From 92d25d304a057f9c13e40cfd2dacae2ad6a76581 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 17 Jan 2025 16:31:08 +1100
Subject: [PATCH 01/58] feat(ui): add notes state to fields

---
 .../src/features/nodes/store/nodesSlice.ts    | 28 +++++++++++++++----
 .../web/src/features/nodes/types/field.ts     |  1 +
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
index 9bf859dc01a..7f12c23e8d9 100644
--- a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
@@ -95,23 +95,30 @@ type FieldValueAction<T extends FieldValue> = PayloadAction<{
   value: T;
 }>;
 
+const getField = (nodeId: string, fieldName: string, state: NodesState) => {
+  const nodeIndex = state.nodes.findIndex((n) => n.id === nodeId);
+  const node = state.nodes?.[nodeIndex];
+  if (!isInvocationNode(node)) {
+    return;
+  }
+  return node.data?.inputs[fieldName];
+};
+
 const fieldValueReducer = <T extends FieldValue>(
   state: NodesState,
   action: FieldValueAction<T>,
   schema: z.ZodTypeAny
 ) => {
   const { nodeId, fieldName, value } = action.payload;
-  const nodeIndex = state.nodes.findIndex((n) => n.id === nodeId);
-  const node = state.nodes?.[nodeIndex];
-  if (!isInvocationNode(node)) {
+  const field = getField(nodeId, fieldName, state);
+  if (!field) {
     return;
   }
-  const input = node.data?.inputs[fieldName];
   const result = schema.safeParse(value);
-  if (!input || nodeIndex < 0 || !result.success) {
+  if (!result.success) {
     return;
   }
-  input.value = result.data;
+  field.value = result.data;
 };
 
 export const nodesSlice = createSlice({
@@ -409,6 +416,14 @@ export const nodesSlice = createSlice({
     fieldStringGeneratorValueChanged: (state, action: FieldValueAction<StringGeneratorFieldValue>) => {
       fieldValueReducer(state, action, zStringGeneratorFieldValue);
     },
+    fieldNotesChanged: (state, action: PayloadAction<{ nodeId: string; fieldName: string; val?: string }>) => {
+      const { nodeId, fieldName, val } = action.payload;
+      const field = getField(nodeId, fieldName, state);
+      if (!field) {
+        return;
+      }
+      field.notes = val;
+    },
     notesNodeValueChanged: (state, action: PayloadAction<{ nodeId: string; value: string }>) => {
       const { nodeId, value } = action.payload;
       const nodeIndex = state.nodes.findIndex((n) => n.id === nodeId);
@@ -476,6 +491,7 @@ export const {
   fieldFloatGeneratorValueChanged,
   fieldIntegerGeneratorValueChanged,
   fieldStringGeneratorValueChanged,
+  fieldNotesChanged,
   nodeEditorReset,
   nodeIsIntermediateChanged,
   nodeIsOpenChanged,
diff --git a/invokeai/frontend/web/src/features/nodes/types/field.ts b/invokeai/frontend/web/src/features/nodes/types/field.ts
index 6c516ca0867..fa9759bd284 100644
--- a/invokeai/frontend/web/src/features/nodes/types/field.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/field.ts
@@ -38,6 +38,7 @@ const zFieldUIComponent = z.enum(['none', 'textarea', 'slider']);
 const zFieldInputInstanceBase = z.object({
   name: z.string().trim().min(1),
   label: z.string().nullish(),
+  notes: z.string().nullish(),
 });
 const zFieldTemplateBase = z.object({
   name: z.string().min(1),

From b03479107d950841d34f92e0877f3ba54cba6a15 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 17 Jan 2025 16:44:00 +1100
Subject: [PATCH 02/58] feat(ui): add notes popover to field title bar

---
 .../fields/FieldNotesIconButton.tsx           | 64 +++++++++++++++++++
 .../nodes/Invocation/fields/InputField.tsx    |  2 +
 .../src/features/nodes/hooks/useFieldNotes.ts | 22 +++++++
 3 files changed, 88 insertions(+)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useFieldNotes.ts

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton.tsx
new file mode 100644
index 00000000000..44595e27b17
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton.tsx
@@ -0,0 +1,64 @@
+import {
+  FormControl,
+  FormLabel,
+  IconButton,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Textarea,
+} from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { useFieldNotes } from 'features/nodes/hooks/useFieldNotes';
+import { fieldNotesChanged } from 'features/nodes/store/nodesSlice';
+import type { ChangeEvent } from 'react';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiNoteBold } from 'react-icons/pi';
+
+type Props = {
+  nodeId: string;
+  fieldName: string;
+};
+
+export const FieldNotesIconButton = memo(({ nodeId, fieldName }: Props) => {
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+  const notes = useFieldNotes(nodeId, fieldName);
+  const onChange = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
+      dispatch(fieldNotesChanged({ nodeId, fieldName, val: e.target.value }));
+    },
+    [dispatch, fieldName, nodeId]
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <IconButton
+          variant="ghost"
+          tooltip={t('nodes.notes')}
+          aria-label={t('nodes.notes')}
+          icon={<PiNoteBold />}
+          pointerEvents="auto"
+          size="xs"
+        />
+      </PopoverTrigger>
+      <PopoverContent p={2} w={256}>
+        <FormControl orientation="vertical">
+          <FormLabel>{t('nodes.notes')}</FormLabel>
+          <Textarea
+            className="nodrag nopan nowheel"
+            fontSize="sm"
+            value={notes ?? ''}
+            onChange={onChange}
+            p={2}
+            resize="none"
+            rows={5}
+          />
+        </FormControl>
+      </PopoverContent>
+    </Popover>
+  );
+});
+
+FieldNotesIconButton.displayName = 'FieldNotesIconButton';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
index 9a05a1c6b53..0dfbcbf3f67 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
@@ -1,4 +1,5 @@
 import { Flex, FormControl } from '@invoke-ai/ui-library';
+import { FieldNotesIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton';
 import FieldResetToDefaultValueButton from 'features/nodes/components/flow/nodes/Invocation/fields/FieldResetToDefaultValueButton';
 import { useConnectionState } from 'features/nodes/hooks/useConnectionState';
 import { useFieldInputTemplate } from 'features/nodes/hooks/useFieldInputTemplate';
@@ -71,6 +72,7 @@ const InputField = ({ nodeId, fieldName }: Props) => {
         <Flex flexDir="column" w="full" gap={1} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
           <Flex gap={1}>
             <EditableFieldTitle nodeId={nodeId} fieldName={fieldName} kind="inputs" isInvalid={isInvalid} withTooltip />
+            {isHovered && <FieldNotesIconButton nodeId={nodeId} fieldName={fieldName} />}
             {isHovered && <FieldResetToDefaultValueButton nodeId={nodeId} fieldName={fieldName} />}
             {isHovered && <FieldLinearViewToggle nodeId={nodeId} fieldName={fieldName} />}
           </Flex>
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldNotes.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldNotes.ts
new file mode 100644
index 00000000000..15a4021b3fb
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useFieldNotes.ts
@@ -0,0 +1,22 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectNodesSlice } from 'features/nodes/store/selectors';
+import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
+
+export const useFieldNotes = (nodeId: string, fieldName: string) => {
+  const selector = useMemo(
+    () =>
+      createSelector(selectNodesSlice, (nodes) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return;
+        }
+        return node?.data.inputs[fieldName]?.notes;
+      }),
+    [fieldName, nodeId]
+  );
+
+  const notes = useAppSelector(selector);
+  return notes;
+};

From a842698b7fbeb62e8090f60a6335e105741bd25f Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 17 Jan 2025 17:18:48 +1100
Subject: [PATCH 03/58] feat(ui): show notes icon on editor linear view

---
 .../components/flow/nodes/Invocation/fields/LinearViewField.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
index a6d36c00389..8190de1fe1c 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
@@ -2,6 +2,7 @@ import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Box, Circle, Flex, Icon, IconButton, Spacer, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { DndListDropIndicator } from 'features/dnd/DndListDropIndicator';
+import { FieldNotesIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton';
 import { InvocationInputFieldCheck } from 'features/nodes/components/flow/nodes/Invocation/fields/InvocationFieldCheck';
 import { useLinearViewFieldDnd } from 'features/nodes/components/sidePanel/workflow/useLinearViewFieldDnd';
 import { useFieldOriginalValue } from 'features/nodes/hooks/useFieldOriginalValue';
@@ -63,6 +64,7 @@ const LinearViewFieldInternal = ({ fieldIdentifier }: Props) => {
             <EditableFieldTitle nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName} kind="inputs" />
             <Spacer />
             {isMouseOverNode && <Circle me={2} size={2} borderRadius="full" bg="invokeBlue.500" />}
+            <FieldNotesIconButton nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName} />
             {isValueChanged && (
               <IconButton
                 aria-label={t('nodes.resetToDefaultValue')}

From d96995804154985f88caa1d504543fb3eb264b31 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 17 Jan 2025 17:20:44 +1100
Subject: [PATCH 04/58] feat(ui): show notes icon on user-linear view,
 replacing info icon

---
 .../fields/FieldNotesIconButton.tsx           | 34 +++++++++++++------
 .../sidePanel/viewMode/WorkflowField.tsx      | 10 +-----
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton.tsx
index 44595e27b17..3f581e0be34 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton.tsx
@@ -1,10 +1,12 @@
 import {
+  Box,
   FormControl,
   FormLabel,
   IconButton,
   Popover,
   PopoverContent,
   PopoverTrigger,
+  Text,
   Textarea,
 } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
@@ -18,9 +20,10 @@ import { PiNoteBold } from 'react-icons/pi';
 type Props = {
   nodeId: string;
   fieldName: string;
+  readOnly?: boolean;
 };
 
-export const FieldNotesIconButton = memo(({ nodeId, fieldName }: Props) => {
+export const FieldNotesIconButton = memo(({ nodeId, fieldName, readOnly }: Props) => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const notes = useFieldNotes(nodeId, fieldName);
@@ -31,6 +34,10 @@ export const FieldNotesIconButton = memo(({ nodeId, fieldName }: Props) => {
     [dispatch, fieldName, nodeId]
   );
 
+  if (readOnly && !notes?.trim()) {
+    return null;
+  }
+
   return (
     <Popover>
       <PopoverTrigger>
@@ -46,15 +53,22 @@ export const FieldNotesIconButton = memo(({ nodeId, fieldName }: Props) => {
       <PopoverContent p={2} w={256}>
         <FormControl orientation="vertical">
           <FormLabel>{t('nodes.notes')}</FormLabel>
-          <Textarea
-            className="nodrag nopan nowheel"
-            fontSize="sm"
-            value={notes ?? ''}
-            onChange={onChange}
-            p={2}
-            resize="none"
-            rows={5}
-          />
+          {readOnly && (
+            <Box borderWidth={1} borderRadius="base" p={2} w="full" h="full">
+              <Text fontSize="sm">{notes}</Text>
+            </Box>
+          )}
+          {!readOnly && (
+            <Textarea
+              className="nodrag nopan nowheel"
+              fontSize="sm"
+              value={notes ?? ''}
+              onChange={onChange}
+              p={2}
+              resize="none"
+              rows={5}
+            />
+          )}
         </FormControl>
       </PopoverContent>
     </Popover>
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowField.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowField.tsx
index 482de6693e5..e8c750ad5ee 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowField.tsx
@@ -36,15 +36,7 @@ const WorkflowFieldInternal = ({ nodeId, fieldName }: Props) => {
             icon={<PiArrowCounterClockwiseBold />}
           />
         )}
-        <Tooltip
-          label={<FieldTooltipContent nodeId={nodeId} fieldName={fieldName} kind="inputs" />}
-          openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
-          placement="top"
-        >
-          <Flex h="24px" alignItems="center">
-            <Icon fontSize="md" color="base.300" as={PiInfoBold} />
-          </Flex>
-        </Tooltip>
+        <FieldNotesIconButton nodeId={nodeId} fieldName={fieldName} readOnly />
       </Flex>
       <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
     </Flex>

From 9ffa1b887be6af6dde3be7119822755efe0f19bf Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 17 Jan 2025 17:21:43 +1100
Subject: [PATCH 05/58] feat(ui): clean up user-linear view styling

---
 .../sidePanel/viewMode/WorkflowField.tsx           | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowField.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowField.tsx
index e8c750ad5ee..54357d3fbaa 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowField.tsx
@@ -1,14 +1,13 @@
-import { Flex, FormLabel, Icon, IconButton, Spacer, Tooltip } from '@invoke-ai/ui-library';
-import FieldTooltipContent from 'features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent';
+import { Flex, FormLabel, IconButton, Spacer } from '@invoke-ai/ui-library';
+import { FieldNotesIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton';
 import InputFieldRenderer from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer';
 import { InvocationInputFieldCheck } from 'features/nodes/components/flow/nodes/Invocation/fields/InvocationFieldCheck';
 import { useFieldLabel } from 'features/nodes/hooks/useFieldLabel';
 import { useFieldOriginalValue } from 'features/nodes/hooks/useFieldOriginalValue';
 import { useFieldTemplateTitle } from 'features/nodes/hooks/useFieldTemplateTitle';
-import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants';
 import { t } from 'i18next';
 import { memo } from 'react';
-import { PiArrowCounterClockwiseBold, PiInfoBold } from 'react-icons/pi';
+import { PiArrowCounterClockwiseBold } from 'react-icons/pi';
 
 type Props = {
   nodeId: string;
@@ -21,17 +20,16 @@ const WorkflowFieldInternal = ({ nodeId, fieldName }: Props) => {
   const { isValueChanged, onReset } = useFieldOriginalValue(nodeId, fieldName);
 
   return (
-    <Flex layerStyle="second" position="relative" borderRadius="base" w="full" p={4} gap="2" flexDir="column">
-      <Flex alignItems="center">
+    <Flex position="relative" w="full" gap="2" flexDir="column">
+      <Flex alignItems="center" gap={1}>
         <FormLabel fontSize="sm">{label || fieldTemplateTitle}</FormLabel>
-
         <Spacer />
         {isValueChanged && (
           <IconButton
             aria-label={t('nodes.resetToDefaultValue')}
             tooltip={t('nodes.resetToDefaultValue')}
             variant="ghost"
-            size="sm"
+            size="xs"
             onClick={onReset}
             icon={<PiArrowCounterClockwiseBold />}
           />

From f1de722beb63a536e28dbe9598b9a843ddec69ca Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 17 Jan 2025 17:33:27 +1100
Subject: [PATCH 06/58] feat(ui): add ViewContext so components can know where
 they are being rendered (user-linear view, editor-linear view, or
 editor-nodes view)

---
 .../features/nodes/contexts/ViewContext.tsx   | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 invokeai/frontend/web/src/features/nodes/contexts/ViewContext.tsx

diff --git a/invokeai/frontend/web/src/features/nodes/contexts/ViewContext.tsx b/invokeai/frontend/web/src/features/nodes/contexts/ViewContext.tsx
new file mode 100644
index 00000000000..fc88ed8d623
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/contexts/ViewContext.tsx
@@ -0,0 +1,19 @@
+import type { PropsWithChildren } from 'react';
+import { createContext, memo, useContext } from 'react';
+import { assert } from 'tsafe';
+
+type ViewType = 'user-linear' | 'editor-linear' | 'editor-nodes';
+
+const ViewContext = createContext<ViewType | null>(null);
+
+export const ViewContextProvider = memo((props: PropsWithChildren<{ viewType: ViewType }>) => {
+  return <ViewContext.Provider value={props.viewType}>{props.children}</ViewContext.Provider>;
+});
+
+ViewContextProvider.displayName = 'ViewContextProvider';
+
+export const useViewContext = () => {
+  const context = useContext(ViewContext);
+  assert(context !== null, 'useViewContext must be used within a ViewContextProvider');
+  return context;
+};

From 861a2378c52ff93029edbfe05e8b7c6850ddae35 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 20 Jan 2025 09:37:57 +1100
Subject: [PATCH 07/58] perf(ui): use data attribute for input field wrapper
 styles

---
 .../components/flow/nodes/Invocation/fields/InputField.tsx      | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
index 0dfbcbf3f67..820ff070338 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
@@ -1,4 +1,5 @@
 import { Flex, FormControl } from '@invoke-ai/ui-library';
+import { FieldLinearViewConfigIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldLinearViewConfigIconButton';
 import { FieldNotesIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton';
 import FieldResetToDefaultValueButton from 'features/nodes/components/flow/nodes/Invocation/fields/FieldResetToDefaultValueButton';
 import { useConnectionState } from 'features/nodes/hooks/useConnectionState';
@@ -72,6 +73,7 @@ const InputField = ({ nodeId, fieldName }: Props) => {
         <Flex flexDir="column" w="full" gap={1} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
           <Flex gap={1}>
             <EditableFieldTitle nodeId={nodeId} fieldName={fieldName} kind="inputs" isInvalid={isInvalid} withTooltip />
+            {isHovered && <FieldLinearViewConfigIconButton nodeId={nodeId} fieldName={fieldName} />}
             {isHovered && <FieldNotesIconButton nodeId={nodeId} fieldName={fieldName} />}
             {isHovered && <FieldResetToDefaultValueButton nodeId={nodeId} fieldName={fieldName} />}
             {isHovered && <FieldLinearViewToggle nodeId={nodeId} fieldName={fieldName} />}

From 5ec173b9bbccb87190057e45659eaa08a72c3d53 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 20 Jan 2025 13:27:44 +1100
Subject: [PATCH 08/58] refactor(ui): workflows component structure (WIP)

- Simplify and de-insane-ify component structure, hooks, selectors, etc.
- Some perf improvements by using data attributes for styling instead of dynamic CSS-in-JS.
- Add field notes and start of linear view config, got blocked when I ran into deeper layout issues that made it very difficult to handle field configs. So those are WIP in this commit.
---
 .../flow/nodes/Invocation/InvocationNode.tsx  |  37 +++--
 .../nodes/Invocation/fields/FieldHandle.tsx   | 127 ++++++++++--------
 .../FieldLinearViewConfigIconButton.tsx       |  85 ++++++++++++
 .../fields/FieldLinearViewToggle.tsx          |  17 +--
 .../fields/FieldResetToDefaultValueButton.tsx |  36 +----
 ...eldResetToInitialLinearViewValueButton.tsx |  16 +++
 .../fields/FieldResetValueButton.tsx          |  25 ++++
 .../Invocation/fields/InputFieldGate.tsx      |  23 ++++
 .../fields/InputFieldUnknownPlaceholder.tsx   |  27 ++++
 ...ViewField.tsx => InputFieldViewLinear.tsx} |  59 +++-----
 ...InputField.tsx => InputFieldViewNodes.tsx} |  26 ++--
 .../fields/InputFieldViewSimple.tsx           |  31 +++++
 .../Invocation/fields/InputFieldWrapper.tsx   |  27 ++--
 .../fields/InvocationFieldCheck.tsx           |  59 --------
 .../nodes/Invocation/fields/OutputField.tsx   |  82 -----------
 .../Invocation/fields/OutputFieldGate.tsx     |  21 +++
 .../fields/OutputFieldNodesEditorView.tsx     |  46 +++++++
 .../fields/OutputFieldUnknownPlaceholder.tsx  |  27 ++++
 .../Invocation/fields/OutputFieldWrapper.tsx  |  29 ++++
 .../sidePanel/NodeEditorPanelGroup.tsx        |  24 ++--
 ...nel.tsx => WorkflowNodeInspectorPanel.tsx} |   4 +-
 .../sidePanel/viewMode/WorkflowField.tsx      |  52 -------
 .../sidePanel/viewMode/WorkflowSimpleView.tsx |  52 +++++++
 .../sidePanel/viewMode/WorkflowViewMode.tsx   |  40 ------
 .../sidePanel/workflow/WorkflowLinearTab.tsx  |  26 ++--
 .../sidePanel/workflow/WorkflowPanel.tsx      |   4 +-
 .../features/nodes/contexts/ViewContext.tsx   |   2 +-
 .../nodes/hooks/useConnectionState.ts         |  27 ++--
 .../nodes/hooks/useFieldDefaultValue.ts       |  23 ++++
 ...e.ts => useFieldInitialLinearViewValue.ts} |  16 +--
 .../hooks/useFieldInputInstanceExists.ts      |  20 +++
 .../features/nodes/hooks/useFieldInputName.ts |  27 ++++
 .../nodes/hooks/useFieldInputTemplate.ts      |   2 +-
 .../hooks/useFieldInputTemplateExists.ts      |  25 ++++
 .../features/nodes/hooks/useFieldIsExposed.ts |  17 +++
 .../features/nodes/hooks/useFieldIsInvalid.ts |   2 +-
 .../nodes/hooks/useFieldLinearViewConfig.ts   |  22 +++
 .../nodes/hooks/useFieldOutputName.ts         |  26 ++++
 .../nodes/hooks/useFieldOutputTemplate.ts     |   9 +-
 .../hooks/useFieldOutputTemplateExists.ts     |  25 ++++
 .../src/features/nodes/store/nodesSlice.ts    |  17 +++
 .../web/src/features/nodes/types/field.ts     |   4 +
 .../src/features/ui/components/AppContent.tsx |  11 +-
 .../components/tabs/WorkflowsTabContent.tsx   |   4 +-
 44 files changed, 797 insertions(+), 484 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldLinearViewConfigIconButton.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetToInitialLinearViewValueButton.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetValueButton.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldUnknownPlaceholder.tsx
 rename invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/{LinearViewField.tsx => InputFieldViewLinear.tsx} (57%)
 rename invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/{InputField.tsx => InputFieldViewNodes.tsx} (82%)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewSimple.tsx
 delete mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InvocationFieldCheck.tsx
 delete mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputField.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldGate.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldNodesEditorView.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldUnknownPlaceholder.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldWrapper.tsx
 rename invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/{InspectorPanel.tsx => WorkflowNodeInspectorPanel.tsx} (92%)
 delete mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowField.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowSimpleView.tsx
 delete mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowViewMode.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useFieldDefaultValue.ts
 rename invokeai/frontend/web/src/features/nodes/hooks/{useFieldOriginalValue.ts => useFieldInitialLinearViewValue.ts} (54%)
 create mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useFieldInputInstanceExists.ts
 create mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useFieldInputName.ts
 create mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useFieldInputTemplateExists.ts
 create mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useFieldIsExposed.ts
 create mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useFieldLinearViewConfig.ts
 create mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputName.ts
 create mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputTemplateExists.ts

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx
index baa7fc262a8..ef98639050c 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx
@@ -1,13 +1,14 @@
 import { Flex, Grid, GridItem } from '@invoke-ai/ui-library';
 import NodeWrapper from 'features/nodes/components/flow/nodes/common/NodeWrapper';
-import { InvocationInputFieldCheck } from 'features/nodes/components/flow/nodes/Invocation/fields/InvocationFieldCheck';
+import { InputFieldGate } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate';
+import { OutputFieldGate } from 'features/nodes/components/flow/nodes/Invocation/fields/OutputFieldGate';
+import { OutputFieldNodesEditorView } from 'features/nodes/components/flow/nodes/Invocation/fields/OutputFieldNodesEditorView';
 import { useFieldNames } from 'features/nodes/hooks/useFieldNames';
 import { useOutputFieldNames } from 'features/nodes/hooks/useOutputFieldNames';
 import { useWithFooter } from 'features/nodes/hooks/useWithFooter';
 import { memo } from 'react';
 
-import InputField from './fields/InputField';
-import OutputField from './fields/OutputField';
+import { InputFieldViewNodes } from './fields/InputFieldViewNodes';
 import InvocationNodeFooter from './InvocationNodeFooter';
 import InvocationNodeHeader from './InvocationNodeHeader';
 
@@ -42,34 +43,28 @@ const InvocationNode = ({ nodeId, isOpen, label, type, selected }: Props) => {
               <Grid gridTemplateColumns="1fr auto" gridAutoRows="1fr">
                 {fieldNames.connectionFields.map((fieldName, i) => (
                   <GridItem gridColumnStart={1} gridRowStart={i + 1} key={`${nodeId}.${fieldName}.input-field`}>
-                    <InvocationInputFieldCheck nodeId={nodeId} fieldName={fieldName}>
-                      <InputField nodeId={nodeId} fieldName={fieldName} />
-                    </InvocationInputFieldCheck>
+                    <InputFieldGate nodeId={nodeId} fieldName={fieldName}>
+                      <InputFieldViewNodes nodeId={nodeId} fieldName={fieldName} />
+                    </InputFieldGate>
                   </GridItem>
                 ))}
                 {outputFieldNames.map((fieldName, i) => (
                   <GridItem gridColumnStart={2} gridRowStart={i + 1} key={`${nodeId}.${fieldName}.output-field`}>
-                    <OutputField nodeId={nodeId} fieldName={fieldName} />
+                    <OutputFieldGate nodeId={nodeId} fieldName={fieldName}>
+                      <OutputFieldNodesEditorView nodeId={nodeId} fieldName={fieldName} />
+                    </OutputFieldGate>
                   </GridItem>
                 ))}
               </Grid>
               {fieldNames.anyOrDirectFields.map((fieldName) => (
-                <InvocationInputFieldCheck
-                  key={`${nodeId}.${fieldName}.input-field`}
-                  nodeId={nodeId}
-                  fieldName={fieldName}
-                >
-                  <InputField nodeId={nodeId} fieldName={fieldName} />
-                </InvocationInputFieldCheck>
+                <InputFieldGate key={`${nodeId}.${fieldName}.input-field`} nodeId={nodeId} fieldName={fieldName}>
+                  <InputFieldViewNodes nodeId={nodeId} fieldName={fieldName} />
+                </InputFieldGate>
               ))}
               {fieldNames.missingFields.map((fieldName) => (
-                <InvocationInputFieldCheck
-                  key={`${nodeId}.${fieldName}.input-field`}
-                  nodeId={nodeId}
-                  fieldName={fieldName}
-                >
-                  <InputField nodeId={nodeId} fieldName={fieldName} />
-                </InvocationInputFieldCheck>
+                <InputFieldGate key={`${nodeId}.${fieldName}.input-field`} nodeId={nodeId} fieldName={fieldName}>
+                  <InputFieldViewNodes nodeId={nodeId} fieldName={fieldName} />
+                </InputFieldGate>
               ))}
             </Flex>
           </Flex>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx
index da81a56eae5..7ba1597a61d 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx
@@ -1,72 +1,79 @@
-import { Tooltip } from '@invoke-ai/ui-library';
-import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Box, Tooltip } from '@invoke-ai/ui-library';
 import { getFieldColor } from 'features/nodes/components/flow/edges/util/getEdgeColor';
 import { useFieldTypeName } from 'features/nodes/hooks/usePrettyFieldType';
 import type { ValidationResult } from 'features/nodes/store/util/validateConnection';
 import { HANDLE_TOOLTIP_OPEN_DELAY, MODEL_TYPES } from 'features/nodes/types/constants';
-import { type FieldInputTemplate, type FieldOutputTemplate, isSingle } from 'features/nodes/types/field';
+import type { FieldInputTemplate, FieldOutputTemplate } from 'features/nodes/types/field';
 import type { CSSProperties } from 'react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { HandleType } from 'reactflow';
 import { Handle, Position } from 'reactflow';
 
-type FieldHandleProps = {
-  fieldTemplate: FieldInputTemplate | FieldOutputTemplate;
+type Props = {
   handleType: HandleType;
+  fieldTemplate: FieldInputTemplate | FieldOutputTemplate;
   isConnectionInProgress: boolean;
   isConnectionStartField: boolean;
   validationResult: ValidationResult;
 };
 
-const FieldHandle = (props: FieldHandleProps) => {
-  const { fieldTemplate, handleType, isConnectionInProgress, isConnectionStartField, validationResult } = props;
-  const { t } = useTranslation();
-  const { name } = fieldTemplate;
-  const type = fieldTemplate.type;
-  const fieldTypeName = useFieldTypeName(type);
-  const styles: CSSProperties = useMemo(() => {
-    const isModelType = MODEL_TYPES.some((t) => t === type.name);
-    const color = getFieldColor(type);
-    const s: CSSProperties = {
-      backgroundColor: !isSingle(type) ? colorTokenToCssVar('base.900') : color,
-      position: 'absolute',
-      width: '1rem',
-      height: '1rem',
-      borderWidth: !isSingle(type) ? 4 : 0,
-      borderStyle: 'solid',
-      borderColor: color,
-      borderRadius: isModelType || type.batch ? 4 : '100%',
-      zIndex: 1,
-      transformOrigin: 'center',
-    };
-
-    if (type.batch) {
-      s.transform = 'rotate(45deg) translateX(-0.3rem) translateY(-0.3rem)';
-    }
+const sx = {
+  position: 'relative',
+  width: 'full',
+  height: 'full',
+  borderStyle: 'solid',
+  borderWidth: 4,
+  pointerEvents: 'none',
+  '&[data-cardinality="SINGLE"]': {
+    borderWidth: 0,
+  },
+  borderRadius: '100%',
+  '&[data-is-model-field="true"], &[data-is-batch-field="true"]': {
+    borderRadius: 4,
+  },
+  '&[data-is-batch-field="true"]': {
+    transform: 'rotate(45deg)',
+  },
+  '&[data-is-connection-in-progress="true"][data-is-connection-start-field="false"][data-is-connection-valid="false"]':
+    {
+      filter: 'opacity(0.4) grayscale(0.7)',
+      cursor: 'not-allowed',
+    },
+  '&[data-is-connection-in-progress="true"][data-is-connection-start-field="true"][data-is-connection-valid="false"]': {
+    cursor: 'grab',
+  },
+  '&[data-is-connection-in-progress="false"] &[data-is-connection-valid="true"]': {
+    cursor: 'crosshair',
+  },
+} satisfies SystemStyleObject;
 
-    if (handleType === 'target') {
-      s.insetInlineStart = '-1rem';
-    } else {
-      s.insetInlineEnd = '-1rem';
-    }
+const handleStyleBase = {
+  position: 'absolute',
+  width: '1rem',
+  height: '1rem',
+  zIndex: 1,
+  background: 'none',
+  border: 'none',
+} satisfies CSSProperties;
 
-    if (isConnectionInProgress && !isConnectionStartField && !validationResult.isValid) {
-      s.filter = 'opacity(0.4) grayscale(0.7)';
-    }
+const targetHandleStyle = {
+  ...handleStyleBase,
+  insetInlineStart: '-1rem',
+} satisfies CSSProperties;
 
-    if (isConnectionInProgress && !validationResult.isValid) {
-      if (isConnectionStartField) {
-        s.cursor = 'grab';
-      } else {
-        s.cursor = 'not-allowed';
-      }
-    } else {
-      s.cursor = 'crosshair';
-    }
+const sourceHandleStyle = {
+  ...handleStyleBase,
+  insetInlineEnd: '-1rem',
+} satisfies CSSProperties;
 
-    return s;
-  }, [handleType, isConnectionInProgress, isConnectionStartField, type, validationResult.isValid]);
+export const FieldHandle = memo((props: Props) => {
+  const { fieldTemplate, isConnectionInProgress, isConnectionStartField, validationResult, handleType } = props;
+  const { t } = useTranslation();
+  const fieldTypeName = useFieldTypeName(fieldTemplate.type);
+  const fieldColor = useMemo(() => getFieldColor(fieldTemplate.type), [fieldTemplate.type]);
+  const isModelField = useMemo(() => MODEL_TYPES.some((t) => t === fieldTemplate.type.name), [fieldTemplate.type]);
 
   const tooltip = useMemo(() => {
     if (isConnectionInProgress && validationResult.messageTKey) {
@@ -83,12 +90,24 @@ const FieldHandle = (props: FieldHandleProps) => {
     >
       <Handle
         type={handleType}
-        id={name}
+        id={fieldTemplate.name}
         position={handleType === 'target' ? Position.Left : Position.Right}
-        style={styles}
-      />
+        style={handleType === 'target' ? targetHandleStyle : sourceHandleStyle}
+      >
+        <Box
+          sx={sx}
+          data-cardinality={fieldTemplate.type.cardinality}
+          data-is-batch-field={fieldTemplate.type.batch}
+          data-is-model-field={isModelField}
+          data-is-connection-in-progress={isConnectionInProgress}
+          data-is-connection-start-field={isConnectionStartField}
+          data-is-connection-valid={validationResult.isValid}
+          backgroundColor={fieldTemplate.type.cardinality === 'SINGLE' ? fieldColor : 'base.900'}
+          borderColor={fieldColor}
+        />
+      </Handle>
     </Tooltip>
   );
-};
+});
 
-export default memo(FieldHandle);
+FieldHandle.displayName = 'FieldHandle';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldLinearViewConfigIconButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldLinearViewConfigIconButton.tsx
new file mode 100644
index 00000000000..fb70070f3a7
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldLinearViewConfigIconButton.tsx
@@ -0,0 +1,85 @@
+import {
+  FormControl,
+  FormLabel,
+  IconButton,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Select,
+} from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { useFieldIsExposed } from 'features/nodes/hooks/useFieldIsExposed';
+import { useFieldLinearViewConfig } from 'features/nodes/hooks/useFieldLinearViewConfig';
+import { fieldLinearViewConfigChanged } from 'features/nodes/store/nodesSlice';
+import type { FieldInputInstance } from 'features/nodes/types/field';
+import type { ChangeEvent } from 'react';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiWrenchFill } from 'react-icons/pi';
+
+type Props = {
+  nodeId: string;
+  fieldName: string;
+};
+
+const parseNotesDisplay = (
+  notesDisplay: string
+): NonNullable<FieldInputInstance['linearViewConfig']>['notesDisplay'] => {
+  switch (notesDisplay) {
+    case 'none':
+      return 'none';
+    case 'helper-text':
+      return 'helper-text';
+    case 'icon-with-popover':
+      return 'icon-with-popover';
+    default:
+      return 'none';
+  }
+};
+
+export const FieldLinearViewConfigIconButton = memo(({ nodeId, fieldName }: Props) => {
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+  const isExposed = useFieldIsExposed(nodeId, fieldName);
+  const linearViewConfig = useFieldLinearViewConfig(nodeId, fieldName);
+  const onChangeNotesDisplay = useCallback(
+    (e: ChangeEvent<HTMLSelectElement>) => {
+      const notesDisplay = parseNotesDisplay(e.target.value);
+      dispatch(
+        fieldLinearViewConfigChanged({ nodeId, fieldName, linearViewConfig: { ...linearViewConfig, notesDisplay } })
+      );
+    },
+    [dispatch, fieldName, linearViewConfig, nodeId]
+  );
+
+  if (!isExposed) {
+    return null;
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <IconButton
+          variant="ghost"
+          tooltip="Linear View Config"
+          aria-label="Linear View Config"
+          icon={<PiWrenchFill />}
+          pointerEvents="auto"
+          size="xs"
+        />
+      </PopoverTrigger>
+      <PopoverContent p={2} w={256}>
+        <FormControl orientation="vertical">
+          <FormLabel>{t('nodes.notesDisplay')}</FormLabel>
+          <Select value={linearViewConfig?.notesDisplay ?? 'none'} onChange={onChangeNotesDisplay}>
+            <option value="none">{t('common.none')}</option>
+            <option value="helper-text">{t('nodes.helperText')}</option>
+            <option value="icon-with-popover">{t('nodes.iconWithPopover')}</option>
+          </Select>
+        </FormControl>
+      </PopoverContent>
+    </Popover>
+  );
+});
+
+FieldLinearViewConfigIconButton.displayName = 'FieldLinearViewConfigIconButton';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldLinearViewToggle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldLinearViewToggle.tsx
index ff59e029167..be7951497a2 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldLinearViewToggle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldLinearViewToggle.tsx
@@ -1,13 +1,12 @@
 import { IconButton } from '@invoke-ai/ui-library';
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { useFieldIsExposed } from 'features/nodes/hooks/useFieldIsExposed';
 import { useFieldValue } from 'features/nodes/hooks/useFieldValue';
 import {
-  selectWorkflowSlice,
   workflowExposedFieldAdded,
   workflowExposedFieldRemoved,
 } from 'features/nodes/store/workflowSlice';
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiMinusBold, PiPlusBold } from 'react-icons/pi';
 
@@ -20,15 +19,7 @@ const FieldLinearViewToggle = ({ nodeId, fieldName }: Props) => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const value = useFieldValue(nodeId, fieldName);
-  const selectIsExposed = useMemo(
-    () =>
-      createSelector(selectWorkflowSlice, (workflow) => {
-        return Boolean(workflow.exposedFields.find((f) => f.nodeId === nodeId && f.fieldName === fieldName));
-      }),
-    [fieldName, nodeId]
-  );
-
-  const isExposed = useAppSelector(selectIsExposed);
+  const isExposed = useFieldIsExposed(nodeId, fieldName);
 
   const handleExposeField = useCallback(() => {
     dispatch(workflowExposedFieldAdded({ nodeId, fieldName, value }));
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetToDefaultValueButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetToDefaultValueButton.tsx
index a3038607447..9d944a1c81c 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetToDefaultValueButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetToDefaultValueButton.tsx
@@ -1,12 +1,6 @@
-import { IconButton } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { useFieldInputTemplate } from 'features/nodes/hooks/useFieldInputTemplate';
-import { useFieldValue } from 'features/nodes/hooks/useFieldValue';
-import { fieldValueReset } from 'features/nodes/store/nodesSlice';
-import { isEqual } from 'lodash-es';
-import { memo, useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiArrowCounterClockwiseBold } from 'react-icons/pi';
+import { FieldResetValueButton } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldResetValueButton';
+import { useFieldDefaultValue } from 'features/nodes/hooks/useFieldDefaultValue';
+import { memo } from 'react';
 
 type Props = {
   nodeId: string;
@@ -14,29 +8,9 @@ type Props = {
 };
 
 const FieldResetToDefaultValueButton = ({ nodeId, fieldName }: Props) => {
-  const dispatch = useAppDispatch();
-  const { t } = useTranslation();
-  const value = useFieldValue(nodeId, fieldName);
-  const fieldTemplate = useFieldInputTemplate(nodeId, fieldName);
-  const isDisabled = useMemo(() => {
-    return isEqual(value, fieldTemplate.default);
-  }, [value, fieldTemplate.default]);
-  const onClick = useCallback(() => {
-    dispatch(fieldValueReset({ nodeId, fieldName, value: fieldTemplate.default }));
-  }, [dispatch, fieldName, fieldTemplate.default, nodeId]);
+  const { isValueChanged, resetToDefaultValue } = useFieldDefaultValue(nodeId, fieldName);
 
-  return (
-    <IconButton
-      variant="ghost"
-      tooltip={t('nodes.resetToDefaultValue')}
-      aria-label={t('nodes.resetToDefaultValue')}
-      icon={<PiArrowCounterClockwiseBold />}
-      onClick={onClick}
-      isDisabled={isDisabled}
-      pointerEvents="auto"
-      size="xs"
-    />
-  );
+  return <FieldResetValueButton onClick={resetToDefaultValue} isDisabled={!isValueChanged} />;
 };
 
 export default memo(FieldResetToDefaultValueButton);
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetToInitialLinearViewValueButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetToInitialLinearViewValueButton.tsx
new file mode 100644
index 00000000000..d0c056c9330
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetToInitialLinearViewValueButton.tsx
@@ -0,0 +1,16 @@
+import { FieldResetValueButton } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldResetValueButton';
+import { useFieldInitialLinearViewValue } from 'features/nodes/hooks/useFieldInitialLinearViewValue';
+import { memo } from 'react';
+
+type Props = {
+  nodeId: string;
+  fieldName: string;
+};
+
+const FieldResetToInitialLinearViewValueButton = ({ nodeId, fieldName }: Props) => {
+  const { isValueChanged, resetToInitialLinearViewValue } = useFieldInitialLinearViewValue(nodeId, fieldName);
+
+  return <FieldResetValueButton onClick={resetToInitialLinearViewValue} isDisabled={!isValueChanged} />;
+};
+
+export default memo(FieldResetToInitialLinearViewValueButton);
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetValueButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetValueButton.tsx
new file mode 100644
index 00000000000..c9d1405b40e
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetValueButton.tsx
@@ -0,0 +1,25 @@
+import type { IconButtonProps } from '@invoke-ai/ui-library';
+import { IconButton } from '@invoke-ai/ui-library';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiArrowCounterClockwiseBold } from 'react-icons/pi';
+
+type Props = Omit<IconButtonProps, 'aria-label'>;
+
+export const FieldResetValueButton = memo((props: Props) => {
+  const { t } = useTranslation();
+
+  return (
+    <IconButton
+      variant="ghost"
+      tooltip={t('nodes.resetToDefaultValue')}
+      aria-label={t('nodes.resetToDefaultValue')}
+      icon={<PiArrowCounterClockwiseBold />}
+      pointerEvents="auto"
+      size="xs"
+      {...props}
+    />
+  );
+});
+
+FieldResetValueButton.displayName = 'FieldResetValueButton';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate.tsx
new file mode 100644
index 00000000000..29fd7bc7e22
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate.tsx
@@ -0,0 +1,23 @@
+import { InputFieldUnknownPlaceholder } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldUnknownPlaceholder';
+import { useFieldInputInstanceExists } from 'features/nodes/hooks/useFieldInputInstanceExists';
+import { useFieldInputTemplateExists } from 'features/nodes/hooks/useFieldInputTemplateExists';
+import type { PropsWithChildren } from 'react';
+import { memo } from 'react';
+
+type Props = PropsWithChildren<{
+  nodeId: string;
+  fieldName: string;
+}>;
+
+export const InputFieldGate = memo(({ nodeId, fieldName, children }: Props) => {
+  const hasInstance = useFieldInputInstanceExists(nodeId, fieldName);
+  const hasTemplate = useFieldInputTemplateExists(nodeId, fieldName);
+
+  if (!hasTemplate || !hasInstance) {
+    return <InputFieldUnknownPlaceholder nodeId={nodeId} fieldName={fieldName} />;
+  }
+
+  return children;
+});
+
+InputFieldGate.displayName = 'InputFieldGate';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldUnknownPlaceholder.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldUnknownPlaceholder.tsx
new file mode 100644
index 00000000000..18076735482
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldUnknownPlaceholder.tsx
@@ -0,0 +1,27 @@
+import { FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { InputFieldWrapper } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldWrapper';
+import { useFieldInputName } from 'features/nodes/hooks/useFieldInputName';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+  nodeId: string;
+  fieldName: string;
+};
+
+export const InputFieldUnknownPlaceholder = memo(({ nodeId, fieldName }: Props) => {
+  const { t } = useTranslation();
+  const name = useFieldInputName(nodeId, fieldName);
+
+  return (
+    <InputFieldWrapper shouldDim={false}>
+      <FormControl isInvalid={true} alignItems="stretch" justifyContent="center" gap={2} h="full" w="full">
+        <FormLabel display="flex" mb={0} px={1} py={2} gap={2}>
+          {t('nodes.unknownInput', { name })}
+        </FormLabel>
+      </FormControl>
+    </InputFieldWrapper>
+  );
+});
+
+InputFieldUnknownPlaceholder.displayName = 'InputFieldUnknownPlaceholder';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewLinear.tsx
similarity index 57%
rename from invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
rename to invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewLinear.tsx
index 8190de1fe1c..9bf5e1c5b7f 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewLinear.tsx
@@ -3,23 +3,22 @@ import { Box, Circle, Flex, Icon, IconButton, Spacer, Tooltip } from '@invoke-ai
 import { useAppDispatch } from 'app/store/storeHooks';
 import { DndListDropIndicator } from 'features/dnd/DndListDropIndicator';
 import { FieldNotesIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton';
-import { InvocationInputFieldCheck } from 'features/nodes/components/flow/nodes/Invocation/fields/InvocationFieldCheck';
+import FieldResetToInitialLinearViewValueButton from 'features/nodes/components/flow/nodes/Invocation/fields/FieldResetToInitialLinearViewValueButton';
 import { useLinearViewFieldDnd } from 'features/nodes/components/sidePanel/workflow/useLinearViewFieldDnd';
-import { useFieldOriginalValue } from 'features/nodes/hooks/useFieldOriginalValue';
 import { useMouseOverNode } from 'features/nodes/hooks/useMouseOverNode';
 import { workflowExposedFieldRemoved } from 'features/nodes/store/workflowSlice';
 import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants';
-import type { FieldIdentifier } from 'features/nodes/types/field';
 import { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiArrowCounterClockwiseBold, PiInfoBold, PiTrashSimpleBold } from 'react-icons/pi';
+import { PiInfoBold, PiTrashSimpleBold } from 'react-icons/pi';
 
 import EditableFieldTitle from './EditableFieldTitle';
 import FieldTooltipContent from './FieldTooltipContent';
 import InputFieldRenderer from './InputFieldRenderer';
 
 type Props = {
-  fieldIdentifier: FieldIdentifier;
+  nodeId: string;
+  fieldName: string;
 };
 
 const sx = {
@@ -35,25 +34,24 @@ const sx = {
   transitionProperty: 'common',
 } satisfies SystemStyleObject;
 
-const LinearViewFieldInternal = ({ fieldIdentifier }: Props) => {
+export const InputFieldViewLinear = memo(({ nodeId, fieldName }: Props) => {
   const dispatch = useAppDispatch();
-  const { isValueChanged, onReset } = useFieldOriginalValue(fieldIdentifier.nodeId, fieldIdentifier.fieldName);
-  const { isMouseOverNode, handleMouseOut, handleMouseOver } = useMouseOverNode(fieldIdentifier.nodeId);
+  const { isMouseOverNode, handleMouseOut, handleMouseOver } = useMouseOverNode(nodeId);
   const { t } = useTranslation();
 
   const handleRemoveField = useCallback(() => {
-    dispatch(workflowExposedFieldRemoved(fieldIdentifier));
-  }, [dispatch, fieldIdentifier]);
+    dispatch(workflowExposedFieldRemoved({ nodeId, fieldName }));
+  }, [dispatch, fieldName, nodeId]);
 
   const ref = useRef<HTMLDivElement>(null);
-  const [dndListState, isDragging] = useLinearViewFieldDnd(ref, fieldIdentifier);
+  const [dndListState, isDragging] = useLinearViewFieldDnd(ref, { nodeId, fieldName });
 
   return (
     <Box position="relative" w="full">
       <Flex
         ref={ref}
         // This is used to trigger the post-move flash animation
-        data-field-name={`${fieldIdentifier.nodeId}-${fieldIdentifier.fieldName}`}
+        data-field-name={`${nodeId}-${fieldName}`}
         data-is-dragging={isDragging}
         onMouseEnter={handleMouseOver}
         onMouseLeave={handleMouseOut}
@@ -61,28 +59,13 @@ const LinearViewFieldInternal = ({ fieldIdentifier }: Props) => {
       >
         <Flex flexDir="column" w="full">
           <Flex alignItems="center" gap={2}>
-            <EditableFieldTitle nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName} kind="inputs" />
+            <EditableFieldTitle nodeId={nodeId} fieldName={fieldName} kind="inputs" />
             <Spacer />
             {isMouseOverNode && <Circle me={2} size={2} borderRadius="full" bg="invokeBlue.500" />}
-            <FieldNotesIconButton nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName} />
-            {isValueChanged && (
-              <IconButton
-                aria-label={t('nodes.resetToDefaultValue')}
-                tooltip={t('nodes.resetToDefaultValue')}
-                variant="ghost"
-                size="sm"
-                onClick={onReset}
-                icon={<PiArrowCounterClockwiseBold />}
-              />
-            )}
+            <FieldNotesIconButton nodeId={nodeId} fieldName={fieldName} />
+            <FieldResetToInitialLinearViewValueButton nodeId={nodeId} fieldName={fieldName} />
             <Tooltip
-              label={
-                <FieldTooltipContent
-                  nodeId={fieldIdentifier.nodeId}
-                  fieldName={fieldIdentifier.fieldName}
-                  kind="inputs"
-                />
-              }
+              label={<FieldTooltipContent nodeId={nodeId} fieldName={fieldName} kind="inputs" />}
               openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
               placement="top"
             >
@@ -99,20 +82,12 @@ const LinearViewFieldInternal = ({ fieldIdentifier }: Props) => {
               icon={<PiTrashSimpleBold />}
             />
           </Flex>
-          <InputFieldRenderer nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName} />
+          <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
         </Flex>
       </Flex>
       <DndListDropIndicator dndState={dndListState} />
     </Box>
   );
-};
-
-const LinearViewField = ({ fieldIdentifier }: Props) => {
-  return (
-    <InvocationInputFieldCheck nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName}>
-      <LinearViewFieldInternal fieldIdentifier={fieldIdentifier} />
-    </InvocationInputFieldCheck>
-  );
-};
+});
 
-export default memo(LinearViewField);
+InputFieldViewLinear.displayName = 'InputFieldViewLinear';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewNodes.tsx
similarity index 82%
rename from invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
rename to invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewNodes.tsx
index 820ff070338..5a1d32ba6a2 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewNodes.tsx
@@ -1,4 +1,5 @@
 import { Flex, FormControl } from '@invoke-ai/ui-library';
+import { FieldHandle } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldHandle';
 import { FieldLinearViewConfigIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldLinearViewConfigIconButton';
 import { FieldNotesIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton';
 import FieldResetToDefaultValueButton from 'features/nodes/components/flow/nodes/Invocation/fields/FieldResetToDefaultValueButton';
@@ -8,7 +9,6 @@ import { useFieldIsInvalid } from 'features/nodes/hooks/useFieldIsInvalid';
 import { memo, useCallback, useState } from 'react';
 
 import EditableFieldTitle from './EditableFieldTitle';
-import FieldHandle from './FieldHandle';
 import FieldLinearViewToggle from './FieldLinearViewToggle';
 import InputFieldRenderer from './InputFieldRenderer';
 import { InputFieldWrapper } from './InputFieldWrapper';
@@ -18,13 +18,13 @@ interface Props {
   fieldName: string;
 }
 
-const InputField = ({ nodeId, fieldName }: Props) => {
+export const InputFieldViewNodes = memo(({ nodeId, fieldName }: Props) => {
   const fieldTemplate = useFieldInputTemplate(nodeId, fieldName);
   const [isHovered, setIsHovered] = useState(false);
   const isInvalid = useFieldIsInvalid(nodeId, fieldName);
 
   const { isConnected, isConnectionInProgress, isConnectionStartField, validationResult, shouldDim } =
-    useConnectionState({ nodeId, fieldName, kind: 'inputs' });
+    useConnectionState(nodeId, fieldName, 'inputs');
 
   const onMouseEnter = useCallback(() => {
     setIsHovered(true);
@@ -49,8 +49,8 @@ const InputField = ({ nodeId, fieldName }: Props) => {
         </FormControl>
 
         <FieldHandle
-          fieldTemplate={fieldTemplate}
           handleType="target"
+          fieldTemplate={fieldTemplate}
           isConnectionInProgress={isConnectionInProgress}
           isConnectionStartField={isConnectionStartField}
           validationResult={validationResult}
@@ -73,10 +73,14 @@ const InputField = ({ nodeId, fieldName }: Props) => {
         <Flex flexDir="column" w="full" gap={1} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
           <Flex gap={1}>
             <EditableFieldTitle nodeId={nodeId} fieldName={fieldName} kind="inputs" isInvalid={isInvalid} withTooltip />
-            {isHovered && <FieldLinearViewConfigIconButton nodeId={nodeId} fieldName={fieldName} />}
-            {isHovered && <FieldNotesIconButton nodeId={nodeId} fieldName={fieldName} />}
-            {isHovered && <FieldResetToDefaultValueButton nodeId={nodeId} fieldName={fieldName} />}
-            {isHovered && <FieldLinearViewToggle nodeId={nodeId} fieldName={fieldName} />}
+            {isHovered && (
+              <>
+                <FieldLinearViewConfigIconButton nodeId={nodeId} fieldName={fieldName} />
+                <FieldNotesIconButton nodeId={nodeId} fieldName={fieldName} />
+                <FieldResetToDefaultValueButton nodeId={nodeId} fieldName={fieldName} />
+                <FieldLinearViewToggle nodeId={nodeId} fieldName={fieldName} />
+              </>
+            )}
           </Flex>
           <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
         </Flex>
@@ -84,8 +88,8 @@ const InputField = ({ nodeId, fieldName }: Props) => {
 
       {fieldTemplate.input !== 'direct' && (
         <FieldHandle
-          fieldTemplate={fieldTemplate}
           handleType="target"
+          fieldTemplate={fieldTemplate}
           isConnectionInProgress={isConnectionInProgress}
           isConnectionStartField={isConnectionStartField}
           validationResult={validationResult}
@@ -93,6 +97,6 @@ const InputField = ({ nodeId, fieldName }: Props) => {
       )}
     </InputFieldWrapper>
   );
-};
+});
 
-export default memo(InputField);
+InputFieldViewNodes.displayName = 'InputFieldViewNodes';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewSimple.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewSimple.tsx
new file mode 100644
index 00000000000..0d3fcf463ef
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewSimple.tsx
@@ -0,0 +1,31 @@
+import { Flex, FormLabel, Spacer } from '@invoke-ai/ui-library';
+import { FieldNotesIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton';
+import FieldResetToInitialLinearViewValueButton from 'features/nodes/components/flow/nodes/Invocation/fields/FieldResetToInitialLinearViewValueButton';
+import InputFieldRenderer from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer';
+import { useFieldLabel } from 'features/nodes/hooks/useFieldLabel';
+import { useFieldTemplateTitle } from 'features/nodes/hooks/useFieldTemplateTitle';
+import { memo } from 'react';
+
+type Props = {
+  nodeId: string;
+  fieldName: string;
+};
+
+export const InputFieldViewSimple = memo(({ nodeId, fieldName }: Props) => {
+  const label = useFieldLabel(nodeId, fieldName);
+  const fieldTemplateTitle = useFieldTemplateTitle(nodeId, fieldName, 'inputs');
+
+  return (
+    <Flex position="relative" w="full" gap="2" flexDir="column">
+      <Flex alignItems="center" gap={1}>
+        <FormLabel fontSize="sm">{label || fieldTemplateTitle}</FormLabel>
+        <Spacer />
+        <FieldResetToInitialLinearViewValueButton nodeId={nodeId} fieldName={fieldName} />
+        <FieldNotesIconButton nodeId={nodeId} fieldName={fieldName} readOnly />
+      </Flex>
+      <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
+    </Flex>
+  );
+});
+
+InputFieldViewSimple.displayName = 'InputFieldViewSimple';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldWrapper.tsx
index 8723538f851..d7cc9d5fa5e 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldWrapper.tsx
@@ -1,24 +1,29 @@
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Flex } from '@invoke-ai/ui-library';
 import type { PropsWithChildren } from 'react';
 import { memo } from 'react';
 
+const sx = {
+  position: 'relative',
+  minH: 8,
+  py: 0.5,
+  alignItems: 'center',
+  transitionProperty: 'opacity',
+  transitionDuration: '0.1s',
+  w: 'full',
+  h: 'full',
+  '&[data-should-dim="true"]': {
+    opacity: 0.5,
+  },
+} satisfies SystemStyleObject;
+
 type InputFieldWrapperProps = PropsWithChildren<{
   shouldDim: boolean;
 }>;
 
 export const InputFieldWrapper = memo(({ shouldDim, children }: InputFieldWrapperProps) => {
   return (
-    <Flex
-      position="relative"
-      minH={8}
-      py={0.5}
-      alignItems="center"
-      opacity={shouldDim ? 0.5 : 1}
-      transitionProperty="opacity"
-      transitionDuration="0.1s"
-      w="full"
-      h="full"
-    >
+    <Flex sx={sx} data-should-dim={shouldDim}>
       {children}
     </Flex>
   );
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InvocationFieldCheck.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InvocationFieldCheck.tsx
deleted file mode 100644
index bbbe6deac16..00000000000
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InvocationFieldCheck.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
-import { useStore } from '@nanostores/react';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppSelector } from 'app/store/storeHooks';
-import { $templates } from 'features/nodes/store/nodesSlice';
-import { selectInvocationNode, selectNodesSlice } from 'features/nodes/store/selectors';
-import type { PropsWithChildren } from 'react';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-type Props = PropsWithChildren<{
-  nodeId: string;
-  fieldName: string;
-}>;
-
-export const InvocationInputFieldCheck = memo(({ nodeId, fieldName, children }: Props) => {
-  const { t } = useTranslation();
-  const templates = useStore($templates);
-  const selector = useMemo(
-    () =>
-      createMemoizedSelector(selectNodesSlice, (nodesSlice) => {
-        const node = selectInvocationNode(nodesSlice, nodeId);
-        const instance = node.data.inputs[fieldName];
-        const template = templates[node.data.type];
-        const fieldTemplate = template?.inputs[fieldName];
-        return {
-          name: instance?.label || fieldTemplate?.title || fieldName,
-          hasInstance: Boolean(instance),
-          hasTemplate: Boolean(fieldTemplate),
-        };
-      }),
-    [fieldName, nodeId, templates]
-  );
-  const { hasInstance, hasTemplate, name } = useAppSelector(selector);
-
-  if (!hasTemplate || !hasInstance) {
-    return (
-      <Flex position="relative" minH={8} py={0.5} alignItems="center" w="full" h="full">
-        <FormControl
-          isInvalid={true}
-          alignItems="stretch"
-          justifyContent="center"
-          flexDir="column"
-          gap={2}
-          h="full"
-          w="full"
-        >
-          <FormLabel display="flex" mb={0} px={1} py={2} gap={2}>
-            {t('nodes.unknownInput', { name })}
-          </FormLabel>
-        </FormControl>
-      </Flex>
-    );
-  }
-
-  return children;
-});
-
-InvocationInputFieldCheck.displayName = 'InvocationInputFieldCheck';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputField.tsx
deleted file mode 100644
index 94e8b627441..00000000000
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputField.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Flex, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library';
-import { useConnectionState } from 'features/nodes/hooks/useConnectionState';
-import { useFieldOutputTemplate } from 'features/nodes/hooks/useFieldOutputTemplate';
-import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants';
-import type { PropsWithChildren } from 'react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import FieldHandle from './FieldHandle';
-import FieldTooltipContent from './FieldTooltipContent';
-
-interface Props {
-  nodeId: string;
-  fieldName: string;
-}
-
-const OutputField = ({ nodeId, fieldName }: Props) => {
-  const { t } = useTranslation();
-  const fieldTemplate = useFieldOutputTemplate(nodeId, fieldName);
-
-  const { isConnected, isConnectionInProgress, isConnectionStartField, validationResult, shouldDim } =
-    useConnectionState({ nodeId, fieldName, kind: 'outputs' });
-
-  if (!fieldTemplate) {
-    return (
-      <OutputFieldWrapper shouldDim={shouldDim}>
-        <FormControl alignItems="stretch" justifyContent="space-between" gap={2} h="full" w="full">
-          <FormLabel display="flex" alignItems="center" h="full" color="error.300" mb={0} px={1} gap={2}>
-            {t('nodes.unknownOutput', {
-              name: fieldName,
-            })}
-          </FormLabel>
-        </FormControl>
-      </OutputFieldWrapper>
-    );
-  }
-
-  return (
-    <OutputFieldWrapper shouldDim={shouldDim}>
-      <Tooltip
-        label={<FieldTooltipContent nodeId={nodeId} fieldName={fieldName} kind="outputs" />}
-        openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
-        placement="top"
-        shouldWrapChildren
-      >
-        <FormControl isDisabled={isConnected} pe={2}>
-          <FormLabel mb={0}>{fieldTemplate?.title}</FormLabel>
-        </FormControl>
-      </Tooltip>
-      <FieldHandle
-        fieldTemplate={fieldTemplate}
-        handleType="source"
-        isConnectionInProgress={isConnectionInProgress}
-        isConnectionStartField={isConnectionStartField}
-        validationResult={validationResult}
-      />
-    </OutputFieldWrapper>
-  );
-};
-
-export default memo(OutputField);
-
-type OutputFieldWrapperProps = PropsWithChildren<{
-  shouldDim: boolean;
-}>;
-
-const OutputFieldWrapper = memo(({ shouldDim, children }: OutputFieldWrapperProps) => (
-  <Flex
-    position="relative"
-    minH={8}
-    py={0.5}
-    alignItems="center"
-    opacity={shouldDim ? 0.5 : 1}
-    transitionProperty="opacity"
-    transitionDuration="0.1s"
-    justifyContent="flex-end"
-  >
-    {children}
-  </Flex>
-));
-
-OutputFieldWrapper.displayName = 'OutputFieldWrapper';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldGate.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldGate.tsx
new file mode 100644
index 00000000000..81951959e23
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldGate.tsx
@@ -0,0 +1,21 @@
+import { OutputFieldUnknownPlaceholder } from 'features/nodes/components/flow/nodes/Invocation/fields/OutputFieldUnknownPlaceholder';
+import { useFieldOutputTemplateExists } from 'features/nodes/hooks/useFieldOutputTemplateExists';
+import type { PropsWithChildren } from 'react';
+import { memo } from 'react';
+
+type Props = PropsWithChildren<{
+  nodeId: string;
+  fieldName: string;
+}>;
+
+export const OutputFieldGate = memo(({ nodeId, fieldName, children }: Props) => {
+  const hasTemplate = useFieldOutputTemplateExists(nodeId, fieldName);
+
+  if (!hasTemplate) {
+    return <OutputFieldUnknownPlaceholder nodeId={nodeId} fieldName={fieldName} />;
+  }
+
+  return children;
+});
+
+OutputFieldGate.displayName = 'OutputFieldGate';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldNodesEditorView.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldNodesEditorView.tsx
new file mode 100644
index 00000000000..85ee48cde63
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldNodesEditorView.tsx
@@ -0,0 +1,46 @@
+import { FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library';
+import { FieldHandle } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldHandle';
+import { OutputFieldWrapper } from 'features/nodes/components/flow/nodes/Invocation/fields/OutputFieldWrapper';
+import { useConnectionState } from 'features/nodes/hooks/useConnectionState';
+import { useFieldOutputTemplate } from 'features/nodes/hooks/useFieldOutputTemplate';
+import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants';
+import type { PropsWithChildren } from 'react';
+import { memo } from 'react';
+
+import FieldTooltipContent from './FieldTooltipContent';
+
+type Props = PropsWithChildren<{
+  nodeId: string;
+  fieldName: string;
+}>;
+
+export const OutputFieldNodesEditorView = memo(({ nodeId, fieldName }: Props) => {
+  const fieldTemplate = useFieldOutputTemplate(nodeId, fieldName);
+
+  const { isConnected, isConnectionInProgress, isConnectionStartField, validationResult, shouldDim } =
+    useConnectionState(nodeId, fieldName, 'outputs');
+
+  return (
+    <OutputFieldWrapper shouldDim={shouldDim}>
+      <Tooltip
+        label={<FieldTooltipContent nodeId={nodeId} fieldName={fieldName} kind="outputs" />}
+        openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
+        placement="top"
+        shouldWrapChildren
+      >
+        <FormControl isDisabled={isConnected}>
+          <FormLabel mb={0}>{fieldTemplate?.title}</FormLabel>
+        </FormControl>
+      </Tooltip>
+      <FieldHandle
+        handleType="source"
+        fieldTemplate={fieldTemplate}
+        isConnectionInProgress={isConnectionInProgress}
+        isConnectionStartField={isConnectionStartField}
+        validationResult={validationResult}
+      />
+    </OutputFieldWrapper>
+  );
+});
+
+OutputFieldNodesEditorView.displayName = 'OutputFieldNodesEditorView';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldUnknownPlaceholder.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldUnknownPlaceholder.tsx
new file mode 100644
index 00000000000..20e69a227a3
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldUnknownPlaceholder.tsx
@@ -0,0 +1,27 @@
+import { FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { OutputFieldWrapper } from 'features/nodes/components/flow/nodes/Invocation/fields/OutputFieldWrapper';
+import { useFieldOutputName } from 'features/nodes/hooks/useFieldOutputName';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+  nodeId: string;
+  fieldName: string;
+};
+
+export const OutputFieldUnknownPlaceholder = memo(({ nodeId, fieldName }: Props) => {
+  const { t } = useTranslation();
+  const name = useFieldOutputName(nodeId, fieldName);
+
+  return (
+    <OutputFieldWrapper shouldDim={false}>
+      <FormControl isInvalid={true} alignItems="stretch" justifyContent="space-between" gap={2} h="full" w="full">
+        <FormLabel display="flex" alignItems="center" h="full" color="error.300" mb={0} px={1} gap={2}>
+          {t('nodes.unknownOutput', { name })}
+        </FormLabel>
+      </FormControl>
+    </OutputFieldWrapper>
+  );
+});
+
+OutputFieldUnknownPlaceholder.displayName = 'OutputFieldUnknownPlaceholder';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldWrapper.tsx
new file mode 100644
index 00000000000..fffbeb7c738
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldWrapper.tsx
@@ -0,0 +1,29 @@
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Flex } from '@invoke-ai/ui-library';
+import type { PropsWithChildren } from 'react';
+import { memo } from 'react';
+
+const sx = {
+  position: 'relative',
+  minH: 8,
+  py: 0.5,
+  alignItems: 'center',
+  transitionProperty: 'opacity',
+  transitionDuration: '0.1s',
+  justifyContent: 'flex-end',
+  '&[data-should-dim="true"]': {
+    opacity: 0.5,
+  },
+} satisfies SystemStyleObject;
+
+type OutputFieldWrapperProps = PropsWithChildren<{
+  shouldDim: boolean;
+}>;
+
+export const OutputFieldWrapper = memo(({ shouldDim, children }: OutputFieldWrapperProps) => (
+  <Flex sx={sx} data-should-dim={shouldDim}>
+    {children}
+  </Flex>
+));
+
+OutputFieldWrapper.displayName = 'OutputFieldWrapper';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx
index 0b3039cef73..0f3d4a44e44 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx
@@ -12,9 +12,9 @@ import { memo, useCallback, useRef } from 'react';
 import type { ImperativePanelGroupHandle } from 'react-resizable-panels';
 import { Panel, PanelGroup } from 'react-resizable-panels';
 
-import InspectorPanel from './inspector/InspectorPanel';
-import { WorkflowViewMode } from './viewMode/WorkflowViewMode';
-import WorkflowPanel from './workflow/WorkflowPanel';
+import WorkflowNodeInspectorPanel from './inspector/WorkflowNodeInspectorPanel';
+import { FieldsSimpleView } from './viewMode/WorkflowSimpleView';
+import WorkflowFieldsLinearViewPanel from './workflow/WorkflowPanel';
 import { WorkflowListMenu } from './WorkflowListMenu/WorkflowListMenu';
 import { WorkflowListMenuTrigger } from './WorkflowListMenu/WorkflowListMenuTrigger';
 
@@ -25,7 +25,7 @@ const overlayScrollbarsStyles: CSSProperties = {
   width: '100%',
 };
 
-const NodeEditorPanelGroup = () => {
+const WorkflowsLeftPanel = () => {
   const mode = useAppSelector(selectWorkflowMode);
   const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
   const workflowListMenu = useWorkflowListMenu();
@@ -50,9 +50,9 @@ const NodeEditorPanelGroup = () => {
             </OverlayScrollbarsComponent>
           )}
 
-          <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
-            {mode === 'view' && <WorkflowViewMode />}
-            {mode === 'edit' && (
+          {mode === 'view' && <FieldsSimpleView />}
+          {mode === 'edit' && (
+            <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
               <PanelGroup
                 ref={panelGroupRef}
                 id="workflow-panel-group"
@@ -61,19 +61,19 @@ const NodeEditorPanelGroup = () => {
                 style={panelGroupStyles}
               >
                 <Panel id="workflow" collapsible minSize={25}>
-                  <WorkflowPanel />
+                  <WorkflowFieldsLinearViewPanel />
                 </Panel>
                 <ResizeHandle onDoubleClick={handleDoubleClickHandle} />
                 <Panel id="inspector" collapsible minSize={25}>
-                  <InspectorPanel />
+                  <WorkflowNodeInspectorPanel />
                 </Panel>
               </PanelGroup>
-            )}
-          </OverlayScrollbarsComponent>
+            </OverlayScrollbarsComponent>
+          )}
         </Box>
       </Flex>
     </Flex>
   );
 };
 
-export default memo(NodeEditorPanelGroup);
+export default memo(WorkflowsLeftPanel);
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/WorkflowNodeInspectorPanel.tsx
similarity index 92%
rename from invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx
rename to invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/WorkflowNodeInspectorPanel.tsx
index 9bbf7e6aacd..fa89a8dfc28 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/WorkflowNodeInspectorPanel.tsx
@@ -7,7 +7,7 @@ import InspectorDetailsTab from './InspectorDetailsTab';
 import InspectorOutputsTab from './InspectorOutputsTab';
 import InspectorTemplateTab from './InspectorTemplateTab';
 
-const InspectorPanel = () => {
+const WorkflowNodeInspectorPanel = () => {
   const { t } = useTranslation();
   return (
     <Flex layerStyle="first" flexDir="column" w="full" h="full" borderRadius="base" p={2} gap={2}>
@@ -38,4 +38,4 @@ const InspectorPanel = () => {
   );
 };
 
-export default memo(InspectorPanel);
+export default memo(WorkflowNodeInspectorPanel);
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowField.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowField.tsx
deleted file mode 100644
index 54357d3fbaa..00000000000
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowField.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Flex, FormLabel, IconButton, Spacer } from '@invoke-ai/ui-library';
-import { FieldNotesIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton';
-import InputFieldRenderer from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer';
-import { InvocationInputFieldCheck } from 'features/nodes/components/flow/nodes/Invocation/fields/InvocationFieldCheck';
-import { useFieldLabel } from 'features/nodes/hooks/useFieldLabel';
-import { useFieldOriginalValue } from 'features/nodes/hooks/useFieldOriginalValue';
-import { useFieldTemplateTitle } from 'features/nodes/hooks/useFieldTemplateTitle';
-import { t } from 'i18next';
-import { memo } from 'react';
-import { PiArrowCounterClockwiseBold } from 'react-icons/pi';
-
-type Props = {
-  nodeId: string;
-  fieldName: string;
-};
-
-const WorkflowFieldInternal = ({ nodeId, fieldName }: Props) => {
-  const label = useFieldLabel(nodeId, fieldName);
-  const fieldTemplateTitle = useFieldTemplateTitle(nodeId, fieldName, 'inputs');
-  const { isValueChanged, onReset } = useFieldOriginalValue(nodeId, fieldName);
-
-  return (
-    <Flex position="relative" w="full" gap="2" flexDir="column">
-      <Flex alignItems="center" gap={1}>
-        <FormLabel fontSize="sm">{label || fieldTemplateTitle}</FormLabel>
-        <Spacer />
-        {isValueChanged && (
-          <IconButton
-            aria-label={t('nodes.resetToDefaultValue')}
-            tooltip={t('nodes.resetToDefaultValue')}
-            variant="ghost"
-            size="xs"
-            onClick={onReset}
-            icon={<PiArrowCounterClockwiseBold />}
-          />
-        )}
-        <FieldNotesIconButton nodeId={nodeId} fieldName={fieldName} readOnly />
-      </Flex>
-      <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
-    </Flex>
-  );
-};
-
-const WorkflowField = ({ nodeId, fieldName }: Props) => {
-  return (
-    <InvocationInputFieldCheck nodeId={nodeId} fieldName={fieldName}>
-      <WorkflowFieldInternal nodeId={nodeId} fieldName={fieldName} />
-    </InvocationInputFieldCheck>
-  );
-};
-
-export default memo(WorkflowField);
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowSimpleView.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowSimpleView.tsx
new file mode 100644
index 00000000000..594e209d776
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowSimpleView.tsx
@@ -0,0 +1,52 @@
+import { Box, Flex } from '@invoke-ai/ui-library';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useAppSelector } from 'app/store/storeHooks';
+import { IAINoContentFallback } from 'common/components/IAIImageFallback';
+import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+import { InputFieldGate } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate';
+import { InputFieldViewSimple } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewSimple';
+import { selectWorkflowSlice } from 'features/nodes/store/workflowSlice';
+import { t } from 'i18next';
+import { memo } from 'react';
+import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo';
+
+import { EmptyState } from './EmptyState';
+
+const selectExposedFields = createMemoizedSelector(selectWorkflowSlice, (workflow) => workflow.exposedFields);
+
+export const FieldsSimpleView = memo(() => {
+  return (
+    <Box position="relative" w="full" h="full">
+      <ScrollableContent>
+        <Flex position="relative" flexDir="column" alignItems="flex-start" p={1} gap={2} w="full" h="full">
+          <FieldSimpleViewContent />
+        </Flex>
+      </ScrollableContent>
+    </Box>
+  );
+});
+FieldsSimpleView.displayName = 'FieldsSimpleView';
+
+const FieldSimpleViewContent = memo(() => {
+  const { isLoading } = useGetOpenAPISchemaQuery();
+  const exposedFields = useAppSelector(selectExposedFields);
+
+  if (isLoading) {
+    return <IAINoContentFallback label={t('nodes.loadingNodes')} icon={null} />;
+  }
+
+  if (exposedFields.length === 0) {
+    return <EmptyState />;
+  }
+
+  return (
+    <>
+      {exposedFields.map(({ nodeId, fieldName }) => (
+        <InputFieldGate key={`${nodeId}.${fieldName}`} nodeId={nodeId} fieldName={fieldName}>
+          <InputFieldViewSimple nodeId={nodeId} fieldName={fieldName} />
+        </InputFieldGate>
+      ))}
+    </>
+  );
+});
+FieldSimpleViewContent.displayName = 'FieldSimpleViewContent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowViewMode.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowViewMode.tsx
deleted file mode 100644
index deadafb3b43..00000000000
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowViewMode.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Box, Flex } from '@invoke-ai/ui-library';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppSelector } from 'app/store/storeHooks';
-import { IAINoContentFallback } from 'common/components/IAIImageFallback';
-import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
-import { selectWorkflowSlice } from 'features/nodes/store/workflowSlice';
-import { t } from 'i18next';
-import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo';
-
-import { EmptyState } from './EmptyState';
-import WorkflowField from './WorkflowField';
-
-const selector = createMemoizedSelector(selectWorkflowSlice, (workflow) => {
-  return {
-    fields: workflow.exposedFields,
-    name: workflow.name,
-  };
-});
-
-export const WorkflowViewMode = () => {
-  const { isLoading } = useGetOpenAPISchemaQuery();
-  const { fields } = useAppSelector(selector);
-  return (
-    <Box position="relative" w="full" h="full">
-      <ScrollableContent>
-        <Flex position="relative" flexDir="column" alignItems="flex-start" p={1} gap={2} w="full" h="full">
-          {isLoading ? (
-            <IAINoContentFallback label={t('nodes.loadingNodes')} icon={null} />
-          ) : fields.length ? (
-            fields.map(({ nodeId, fieldName }) => (
-              <WorkflowField key={`${nodeId}.${fieldName}`} nodeId={nodeId} fieldName={fieldName} />
-            ))
-          ) : (
-            <EmptyState />
-          )}
-        </Flex>
-      </ScrollableContent>
-    </Box>
-  );
-};
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
index 2547b9a7749..80726470e78 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
@@ -1,7 +1,7 @@
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
-import { Box, Flex } from '@invoke-ai/ui-library';
+import { Flex } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
@@ -10,7 +10,8 @@ import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
 import { deepClone } from 'common/util/deepClone';
 import { singleWorkflowFieldDndSource } from 'features/dnd/dnd';
 import { triggerPostMoveFlash } from 'features/dnd/util';
-import LinearViewFieldInternal from 'features/nodes/components/flow/nodes/Invocation/fields/LinearViewField';
+import { InputFieldGate } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate';
+import { InputFieldViewLinear } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewLinear';
 import { selectWorkflowSlice, workflowExposedFieldsReordered } from 'features/nodes/store/workflowSlice';
 import type { FieldIdentifier } from 'features/nodes/types/field';
 import { isEqual } from 'lodash-es';
@@ -23,13 +24,11 @@ const selector = createMemoizedSelector(selectWorkflowSlice, (workflow) => workf
 
 const WorkflowLinearTab = () => {
   return (
-    <Box position="relative" w="full" h="full">
-      <ScrollableContent>
-        <Flex position="relative" flexDir="column" alignItems="flex-start" p={1} py={2} gap={2} h="full" w="full">
-          <FieldListContent />
-        </Flex>
-      </ScrollableContent>
-    </Box>
+    <ScrollableContent>
+      <Flex position="relative" flexDir="column" alignItems="flex-start" p={1} py={2} gap={2} h="full" w="full">
+        <FieldListContent />
+      </Flex>
+    </ScrollableContent>
   );
 };
 
@@ -142,11 +141,10 @@ const FieldListInnerContent = memo(({ fields }: { fields: FieldIdentifier[] }) =
 
   return (
     <>
-      {fields.map((fieldIdentifier) => (
-        <LinearViewFieldInternal
-          key={`${fieldIdentifier.nodeId}.${fieldIdentifier.fieldName}`}
-          fieldIdentifier={fieldIdentifier}
-        />
+      {fields.map(({ nodeId, fieldName }) => (
+        <InputFieldGate key={`${nodeId}.${fieldName}`} nodeId={nodeId} fieldName={fieldName}>
+          <InputFieldViewLinear nodeId={nodeId} fieldName={fieldName} />
+        </InputFieldGate>
       ))}
     </>
   );
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
index bdc384d40d0..d6970bd3428 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
@@ -6,7 +6,7 @@ import WorkflowGeneralTab from './WorkflowGeneralTab';
 import WorkflowJSONTab from './WorkflowJSONTab';
 import WorkflowLinearTab from './WorkflowLinearTab';
 
-const WorkflowPanel = () => {
+const WorkflowFieldsLinearViewPanel = () => {
   const { t } = useTranslation();
   return (
     <Flex layerStyle="first" flexDir="column" w="full" h="full" borderRadius="base" p={2} gap={2}>
@@ -33,4 +33,4 @@ const WorkflowPanel = () => {
   );
 };
 
-export default memo(WorkflowPanel);
+export default memo(WorkflowFieldsLinearViewPanel);
diff --git a/invokeai/frontend/web/src/features/nodes/contexts/ViewContext.tsx b/invokeai/frontend/web/src/features/nodes/contexts/ViewContext.tsx
index fc88ed8d623..6ed03f0e5f8 100644
--- a/invokeai/frontend/web/src/features/nodes/contexts/ViewContext.tsx
+++ b/invokeai/frontend/web/src/features/nodes/contexts/ViewContext.tsx
@@ -2,7 +2,7 @@ import type { PropsWithChildren } from 'react';
 import { createContext, memo, useContext } from 'react';
 import { assert } from 'tsafe';
 
-type ViewType = 'user-linear' | 'editor-linear' | 'editor-nodes';
+type ViewType = 'linear-user' | 'linear-editor' | 'nodes-editor';
 
 const ViewContext = createContext<ViewType | null>(null);
 
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useConnectionState.ts b/invokeai/frontend/web/src/features/nodes/hooks/useConnectionState.ts
index 4ed2c358c5a..87438a3c077 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useConnectionState.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useConnectionState.ts
@@ -6,29 +6,22 @@ import { selectNodesSlice } from 'features/nodes/store/selectors';
 import { makeConnectionErrorSelector } from 'features/nodes/store/util/makeConnectionErrorSelector';
 import { useMemo } from 'react';
 
-type UseConnectionStateProps = {
-  nodeId: string;
-  fieldName: string;
-  kind: 'inputs' | 'outputs';
-};
-
-export const useConnectionState = ({ nodeId, fieldName, kind }: UseConnectionStateProps) => {
+export const useConnectionState = (nodeId: string, fieldName: string, kind: 'inputs' | 'outputs') => {
   const pendingConnection = useStore($pendingConnection);
   const templates = useStore($templates);
   const edgePendingUpdate = useStore($edgePendingUpdate);
 
   const selectIsConnected = useMemo(
     () =>
-      createSelector(selectNodesSlice, (nodes) =>
-        Boolean(
-          nodes.edges.filter((edge) => {
-            return (
-              (kind === 'inputs' ? edge.target : edge.source) === nodeId &&
-              (kind === 'inputs' ? edge.targetHandle : edge.sourceHandle) === fieldName
-            );
-          }).length
-        )
-      ),
+      createSelector(selectNodesSlice, (nodes) => {
+        const firstConnectedEdge = nodes.edges.find((edge) => {
+          return (
+            (kind === 'inputs' ? edge.target : edge.source) === nodeId &&
+            (kind === 'inputs' ? edge.targetHandle : edge.sourceHandle) === fieldName
+          );
+        });
+        return firstConnectedEdge !== undefined;
+      }),
     [fieldName, kind, nodeId]
   );
 
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldDefaultValue.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldDefaultValue.ts
new file mode 100644
index 00000000000..ea1d8f67d56
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useFieldDefaultValue.ts
@@ -0,0 +1,23 @@
+import { useAppDispatch } from 'app/store/storeHooks';
+import { useFieldInputTemplate } from 'features/nodes/hooks/useFieldInputTemplate';
+import { useFieldValue } from 'features/nodes/hooks/useFieldValue';
+import { fieldValueReset } from 'features/nodes/store/nodesSlice';
+import { isEqual } from 'lodash-es';
+import { useCallback, useMemo } from 'react';
+
+export const useFieldDefaultValue = (nodeId: string, fieldName: string) => {
+  const dispatch = useAppDispatch();
+
+  const value = useFieldValue(nodeId, fieldName);
+  const fieldTemplate = useFieldInputTemplate(nodeId, fieldName);
+
+  const isValueChanged = useMemo(() => {
+    return !isEqual(value, fieldTemplate.default);
+  }, [value, fieldTemplate.default]);
+
+  const resetToDefaultValue = useCallback(() => {
+    dispatch(fieldValueReset({ nodeId, fieldName, value: fieldTemplate.default }));
+  }, [dispatch, fieldName, fieldTemplate.default, nodeId]);
+
+  return { defaultValue: fieldTemplate.default, isValueChanged, resetToDefaultValue };
+};
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldOriginalValue.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldInitialLinearViewValue.ts
similarity index 54%
rename from invokeai/frontend/web/src/features/nodes/hooks/useFieldOriginalValue.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useFieldInitialLinearViewValue.ts
index a9ebc991e22..61a4460d084 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldOriginalValue.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useFieldInitialLinearViewValue.ts
@@ -6,9 +6,9 @@ import { selectWorkflowSlice } from 'features/nodes/store/workflowSlice';
 import { isEqual } from 'lodash-es';
 import { useCallback, useMemo } from 'react';
 
-export const useFieldOriginalValue = (nodeId: string, fieldName: string) => {
+export const useFieldInitialLinearViewValue = (nodeId: string, fieldName: string) => {
   const dispatch = useAppDispatch();
-  const selectOriginalExposedFieldValues = useMemo(
+  const selectInitialLinearViewValue = useMemo(
     () =>
       createSelector(
         selectWorkflowSlice,
@@ -17,12 +17,12 @@ export const useFieldOriginalValue = (nodeId: string, fieldName: string) => {
       ),
     [nodeId, fieldName]
   );
-  const originalValue = useAppSelector(selectOriginalExposedFieldValues);
+  const initialLinearViewValue = useAppSelector(selectInitialLinearViewValue);
   const value = useFieldValue(nodeId, fieldName);
-  const isValueChanged = useMemo(() => !isEqual(value, originalValue), [value, originalValue]);
-  const onReset = useCallback(() => {
-    dispatch(fieldValueReset({ nodeId, fieldName, value: originalValue }));
-  }, [dispatch, fieldName, nodeId, originalValue]);
+  const isValueChanged = useMemo(() => !isEqual(value, initialLinearViewValue), [value, initialLinearViewValue]);
+  const resetToInitialLinearViewValue = useCallback(() => {
+    dispatch(fieldValueReset({ nodeId, fieldName, value: initialLinearViewValue }));
+  }, [dispatch, fieldName, nodeId, initialLinearViewValue]);
 
-  return { originalValue, isValueChanged, onReset };
+  return { initialLinearViewValue, isValueChanged, resetToInitialLinearViewValue };
 };
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputInstanceExists.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputInstanceExists.ts
new file mode 100644
index 00000000000..1e4c577d541
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputInstanceExists.ts
@@ -0,0 +1,20 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectInvocationNode, selectNodesSlice } from 'features/nodes/store/selectors';
+import { useMemo } from 'react';
+
+export const useFieldInputInstanceExists = (nodeId: string, fieldName: string) => {
+  const selector = useMemo(
+    () =>
+      createSelector(selectNodesSlice, (nodesSlice) => {
+        const node = selectInvocationNode(nodesSlice, nodeId);
+        const instance = node.data.inputs[fieldName];
+        return Boolean(instance);
+      }),
+    [fieldName, nodeId]
+  );
+
+  const exists = useAppSelector(selector);
+
+  return exists;
+};
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputName.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputName.ts
new file mode 100644
index 00000000000..86165094ae0
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputName.ts
@@ -0,0 +1,27 @@
+import { useStore } from '@nanostores/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { $templates } from 'features/nodes/store/nodesSlice';
+import { selectInvocationNode, selectNodesSlice } from 'features/nodes/store/selectors';
+import { useMemo } from 'react';
+
+export const useFieldInputName = (nodeId: string, fieldName: string) => {
+  const templates = useStore($templates);
+
+  const selector = useMemo(
+    () =>
+      createSelector(selectNodesSlice, (nodesSlice) => {
+        const node = selectInvocationNode(nodesSlice, nodeId);
+        const instance = node.data.inputs[fieldName];
+        const nodeTemplate = templates[node.data.type];
+        const fieldTemplate = nodeTemplate?.inputs[fieldName];
+        const name = instance?.label || fieldTemplate?.title || fieldName;
+        return name;
+      }),
+    [fieldName, nodeId, templates]
+  );
+
+  const name = useAppSelector(selector);
+
+  return name;
+};
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputTemplate.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputTemplate.ts
index 729319e0dd8..f1ce8a28834 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputTemplate.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputTemplate.ts
@@ -7,7 +7,7 @@ export const useFieldInputTemplate = (nodeId: string, fieldName: string): FieldI
   const template = useNodeTemplate(nodeId);
   const fieldTemplate = useMemo(() => {
     const _fieldTemplate = template.inputs[fieldName];
-    assert(_fieldTemplate, `Field template for field ${fieldName} not found`);
+    assert(_fieldTemplate, `Template for input field ${fieldName} not found.`);
     return _fieldTemplate;
   }, [fieldName, template.inputs]);
   return fieldTemplate;
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputTemplateExists.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputTemplateExists.ts
new file mode 100644
index 00000000000..75dd3f7a5ea
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputTemplateExists.ts
@@ -0,0 +1,25 @@
+import { useStore } from '@nanostores/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { $templates } from 'features/nodes/store/nodesSlice';
+import { selectInvocationNode, selectNodesSlice } from 'features/nodes/store/selectors';
+import { useMemo } from 'react';
+
+export const useFieldInputTemplateExists = (nodeId: string, fieldName: string) => {
+  const templates = useStore($templates);
+
+  const selector = useMemo(
+    () =>
+      createSelector(selectNodesSlice, (nodesSlice) => {
+        const node = selectInvocationNode(nodesSlice, nodeId);
+        const nodeTemplate = templates[node.data.type];
+        const fieldTemplate = nodeTemplate?.inputs[fieldName];
+        return Boolean(fieldTemplate);
+      }),
+    [fieldName, nodeId, templates]
+  );
+
+  const exists = useAppSelector(selector);
+
+  return exists;
+};
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldIsExposed.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldIsExposed.ts
new file mode 100644
index 00000000000..22bb6669c8a
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useFieldIsExposed.ts
@@ -0,0 +1,17 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectWorkflowSlice } from 'features/nodes/store/workflowSlice';
+import { useMemo } from 'react';
+
+export const useFieldIsExposed = (nodeId: string, fieldName: string) => {
+  const selectIsExposed = useMemo(
+    () =>
+      createSelector(selectWorkflowSlice, (workflow) => {
+        return Boolean(workflow.exposedFields.find((f) => f.nodeId === nodeId && f.fieldName === fieldName));
+      }),
+    [fieldName, nodeId]
+  );
+
+  const isExposed = useAppSelector(selectIsExposed);
+  return isExposed;
+};
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldIsInvalid.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldIsInvalid.ts
index 2f97296087a..cf26b623c77 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldIsInvalid.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useFieldIsInvalid.ts
@@ -22,7 +22,7 @@ import { useMemo } from 'react';
 
 export const useFieldIsInvalid = (nodeId: string, fieldName: string) => {
   const template = useFieldInputTemplate(nodeId, fieldName);
-  const connectionState = useConnectionState({ nodeId, fieldName, kind: 'inputs' });
+  const connectionState = useConnectionState(nodeId, fieldName, 'inputs');
 
   const selectIsInvalid = useMemo(() => {
     return createSelector(selectNodesSlice, (nodes) => {
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldLinearViewConfig.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldLinearViewConfig.ts
new file mode 100644
index 00000000000..f3b4397fc76
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useFieldLinearViewConfig.ts
@@ -0,0 +1,22 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectNodesSlice } from 'features/nodes/store/selectors';
+import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
+
+export const useFieldLinearViewConfig = (nodeId: string, fieldName: string) => {
+  const selector = useMemo(
+    () =>
+      createSelector(selectNodesSlice, (nodes) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return;
+        }
+        return node?.data.inputs[fieldName]?.linearViewConfig;
+      }),
+    [fieldName, nodeId]
+  );
+
+  const linearViewConfig = useAppSelector(selector);
+  return linearViewConfig;
+};
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputName.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputName.ts
new file mode 100644
index 00000000000..5b151dce28f
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputName.ts
@@ -0,0 +1,26 @@
+import { useStore } from '@nanostores/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { $templates } from 'features/nodes/store/nodesSlice';
+import { selectInvocationNode, selectNodesSlice } from 'features/nodes/store/selectors';
+import { useMemo } from 'react';
+
+export const useFieldOutputName = (nodeId: string, fieldName: string) => {
+  const templates = useStore($templates);
+
+  const selector = useMemo(
+    () =>
+      createSelector(selectNodesSlice, (nodesSlice) => {
+        const node = selectInvocationNode(nodesSlice, nodeId);
+        const nodeTemplate = templates[node.data.type];
+        const fieldTemplate = nodeTemplate?.outputs[fieldName];
+        const name = fieldTemplate?.title || fieldName;
+        return name;
+      }),
+    [fieldName, nodeId, templates]
+  );
+
+  const name = useAppSelector(selector);
+
+  return name;
+};
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputTemplate.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputTemplate.ts
index 585ef3fe1cb..0b55857f7a8 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputTemplate.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputTemplate.ts
@@ -1,9 +1,14 @@
 import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate';
 import type { FieldOutputTemplate } from 'features/nodes/types/field';
 import { useMemo } from 'react';
+import { assert } from 'tsafe';
 
-export const useFieldOutputTemplate = (nodeId: string, fieldName: string): FieldOutputTemplate | null => {
+export const useFieldOutputTemplate = (nodeId: string, fieldName: string): FieldOutputTemplate => {
   const template = useNodeTemplate(nodeId);
-  const fieldTemplate = useMemo(() => template.outputs[fieldName] ?? null, [fieldName, template.outputs]);
+  const fieldTemplate = useMemo(() => {
+    const _fieldTemplate = template.outputs[fieldName];
+    assert(_fieldTemplate, `Template for output field ${fieldName} not found`);
+    return _fieldTemplate;
+  }, [fieldName, template.outputs]);
   return fieldTemplate;
 };
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputTemplateExists.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputTemplateExists.ts
new file mode 100644
index 00000000000..336eddc12d6
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputTemplateExists.ts
@@ -0,0 +1,25 @@
+import { useStore } from '@nanostores/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { $templates } from 'features/nodes/store/nodesSlice';
+import { selectInvocationNode, selectNodesSlice } from 'features/nodes/store/selectors';
+import { useMemo } from 'react';
+
+export const useFieldOutputTemplateExists = (nodeId: string, fieldName: string) => {
+  const templates = useStore($templates);
+
+  const selector = useMemo(
+    () =>
+      createSelector(selectNodesSlice, (nodesSlice) => {
+        const node = selectInvocationNode(nodesSlice, nodeId);
+        const nodeTemplate = templates[node.data.type];
+        const fieldTemplate = nodeTemplate?.outputs[fieldName];
+        return Boolean(fieldTemplate);
+      }),
+    [fieldName, nodeId, templates]
+  );
+
+  const exists = useAppSelector(selector);
+
+  return exists;
+};
diff --git a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
index 7f12c23e8d9..c8bd5931f27 100644
--- a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
@@ -14,6 +14,7 @@ import type {
   ControlLoRAModelFieldValue,
   ControlNetModelFieldValue,
   EnumFieldValue,
+  FieldInputInstance,
   FieldValue,
   FloatFieldValue,
   FloatGeneratorFieldValue,
@@ -424,6 +425,21 @@ export const nodesSlice = createSlice({
       }
       field.notes = val;
     },
+    fieldLinearViewConfigChanged: (
+      state,
+      action: PayloadAction<{
+        nodeId: string;
+        fieldName: string;
+        linearViewConfig?: FieldInputInstance['linearViewConfig'];
+      }>
+    ) => {
+      const { nodeId, fieldName, linearViewConfig } = action.payload;
+      const field = getField(nodeId, fieldName, state);
+      if (!field) {
+        return;
+      }
+      field.linearViewConfig = linearViewConfig;
+    },
     notesNodeValueChanged: (state, action: PayloadAction<{ nodeId: string; value: string }>) => {
       const { nodeId, value } = action.payload;
       const nodeIndex = state.nodes.findIndex((n) => n.id === nodeId);
@@ -492,6 +508,7 @@ export const {
   fieldIntegerGeneratorValueChanged,
   fieldStringGeneratorValueChanged,
   fieldNotesChanged,
+  fieldLinearViewConfigChanged,
   nodeEditorReset,
   nodeIsIntermediateChanged,
   nodeIsOpenChanged,
diff --git a/invokeai/frontend/web/src/features/nodes/types/field.ts b/invokeai/frontend/web/src/features/nodes/types/field.ts
index fa9759bd284..cb74046d967 100644
--- a/invokeai/frontend/web/src/features/nodes/types/field.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/field.ts
@@ -35,10 +35,14 @@ import { zBoardField, zColorField, zImageField, zModelIdentifierField, zSchedule
 // #region Base schemas & misc
 const zFieldInput = z.enum(['connection', 'direct', 'any', 'batch']);
 const zFieldUIComponent = z.enum(['none', 'textarea', 'slider']);
+const zFieldInputInstanceLinearViewConfigBase = z.object({
+  notesDisplay: z.enum(['none', 'helper-text', 'icon-with-popover']).nullish(),
+});
 const zFieldInputInstanceBase = z.object({
   name: z.string().trim().min(1),
   label: z.string().nullish(),
   notes: z.string().nullish(),
+  linearViewConfig: zFieldInputInstanceLinearViewConfigBase.nullish(),
 });
 const zFieldTemplateBase = z.object({
   name: z.string().min(1),
diff --git a/invokeai/frontend/web/src/features/ui/components/AppContent.tsx b/invokeai/frontend/web/src/features/ui/components/AppContent.tsx
index 14a47dbb862..2bd7c7b4567 100644
--- a/invokeai/frontend/web/src/features/ui/components/AppContent.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/AppContent.tsx
@@ -5,7 +5,7 @@ import { CanvasRightPanel } from 'features/controlLayers/components/CanvasRightP
 import { useDndMonitor } from 'features/dnd/useDndMonitor';
 import GalleryPanelContent from 'features/gallery/components/GalleryPanelContent';
 import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
-import NodeEditorPanelGroup from 'features/nodes/components/sidePanel/NodeEditorPanelGroup';
+import WorkflowsLeftPanel from 'features/nodes/components/sidePanel/NodeEditorPanelGroup';
 import QueueControls from 'features/queue/components/QueueControls';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import FloatingGalleryButton from 'features/ui/components/FloatingGalleryButton';
@@ -13,7 +13,7 @@ import FloatingParametersPanelButtons from 'features/ui/components/FloatingParam
 import ParametersPanelTextToImage from 'features/ui/components/ParametersPanels/ParametersPanelTextToImage';
 import ModelManagerTab from 'features/ui/components/tabs/ModelManagerTab';
 import QueueTab from 'features/ui/components/tabs/QueueTab';
-import { WorkflowsTabContent } from 'features/ui/components/tabs/WorkflowsTabContent';
+import { WorkflowsMainPanel } from 'features/ui/components/tabs/WorkflowsTabContent';
 import { VerticalNavBar } from 'features/ui/components/VerticalNavBar';
 import type { UsePanelOptions } from 'features/ui/hooks/usePanel';
 import { usePanel } from 'features/ui/hooks/usePanel';
@@ -165,7 +165,6 @@ const RightPanelContent = memo(() => {
   if (tab === 'canvas') {
     return <CanvasRightPanel />;
   }
-
   if (tab === 'upscaling' || tab === 'workflows') {
     return <GalleryPanelContent />;
   }
@@ -183,9 +182,8 @@ const LeftPanelContent = memo(() => {
   if (tab === 'upscaling') {
     return <ParametersPanelUpscale />;
   }
-
   if (tab === 'workflows') {
-    return <NodeEditorPanelGroup />;
+    return <WorkflowsLeftPanel />;
   }
 
   return null;
@@ -194,6 +192,7 @@ LeftPanelContent.displayName = 'LeftPanelContent';
 
 const MainPanelContent = memo(() => {
   const tab = useAppSelector(selectActiveTab);
+
   if (tab === 'canvas') {
     return <CanvasMainPanelContent />;
   }
@@ -201,7 +200,7 @@ const MainPanelContent = memo(() => {
     return <ImageViewer />;
   }
   if (tab === 'workflows') {
-    return <WorkflowsTabContent />;
+    return <WorkflowsMainPanel />;
   }
   if (tab === 'models') {
     return <ModelManagerTab />;
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/WorkflowsTabContent.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/WorkflowsTabContent.tsx
index 72c6082316e..b972b93bdce 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/WorkflowsTabContent.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/WorkflowsTabContent.tsx
@@ -5,7 +5,7 @@ import { selectWorkflowMode } from 'features/nodes/store/workflowSlice';
 import { memo } from 'react';
 import { ReactFlowProvider } from 'reactflow';
 
-export const WorkflowsTabContent = memo(() => {
+export const WorkflowsMainPanel = memo(() => {
   const mode = useAppSelector(selectWorkflowMode);
 
   if (mode === 'edit') {
@@ -19,4 +19,4 @@ export const WorkflowsTabContent = memo(() => {
   return <ImageViewer />;
 });
 
-WorkflowsTabContent.displayName = 'WorkflowsTabContent';
+WorkflowsMainPanel.displayName = 'WorkflowsMainPanel';

From a8b0c1c10cc2c29c5943e1d4031beab6587cd6ae Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 20 Jan 2025 13:55:38 +1100
Subject: [PATCH 09/58] refactor(ui): workflows left panel internal components
 structure

---
 .../sidePanel/LinearViewLeftPanelContent.tsx  | 49 ++++++++++++
 .../sidePanel/NodeEditorPanelGroup.tsx        | 79 -------------------
 .../WorkflowListMenu/WorkflowListMenu.tsx     | 24 +++---
 .../sidePanel/WorkflowsTabLeftPanel.tsx       | 32 ++++++++
 ...iew.tsx => SimpleViewLeftPanelContent.tsx} | 10 +--
 .../nodes/hooks/useFieldTemplateTitle.ts      |  2 +-
 .../src/features/ui/components/AppContent.tsx |  4 +-
 7 files changed, 104 insertions(+), 96 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/LinearViewLeftPanelContent.tsx
 delete mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowsTabLeftPanel.tsx
 rename invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/{WorkflowSimpleView.tsx => SimpleViewLeftPanelContent.tsx} (85%)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/LinearViewLeftPanelContent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/LinearViewLeftPanelContent.tsx
new file mode 100644
index 00000000000..dc13454a987
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/LinearViewLeftPanelContent.tsx
@@ -0,0 +1,49 @@
+import 'reactflow/dist/style.css';
+
+import { Box } from '@invoke-ai/ui-library';
+import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
+import type { CSSProperties } from 'react';
+import { memo, useCallback, useRef } from 'react';
+import type { ImperativePanelGroupHandle } from 'react-resizable-panels';
+import { Panel, PanelGroup } from 'react-resizable-panels';
+
+import WorkflowNodeInspectorPanel from './inspector/WorkflowNodeInspectorPanel';
+import WorkflowFieldsLinearViewPanel from './workflow/WorkflowPanel';
+
+const panelGroupStyles: CSSProperties = { height: '100%', width: '100%' };
+
+export const LinearViewLeftPanelContent = memo(() => {
+  const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
+
+  const handleDoubleClickHandle = useCallback(() => {
+    if (!panelGroupRef.current) {
+      return;
+    }
+    panelGroupRef.current.setLayout([50, 50]);
+  }, []);
+
+  return (
+    <Box position="relative" w="full" h="full">
+      <ScrollableContent>
+        <PanelGroup
+          ref={panelGroupRef}
+          id="workflow-panel-group"
+          autoSaveId="workflow-panel-group"
+          direction="vertical"
+          style={panelGroupStyles}
+        >
+          <Panel id="workflow" collapsible minSize={25}>
+            <WorkflowFieldsLinearViewPanel />
+          </Panel>
+          <ResizeHandle onDoubleClick={handleDoubleClickHandle} />
+          <Panel id="inspector" collapsible minSize={25}>
+            <WorkflowNodeInspectorPanel />
+          </Panel>
+        </PanelGroup>
+      </ScrollableContent>
+    </Box>
+  );
+});
+
+LinearViewLeftPanelContent.displayName = 'LinearViewLeftPanelContent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx
deleted file mode 100644
index 0f3d4a44e44..00000000000
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import 'reactflow/dist/style.css';
-
-import { Box, Flex } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
-import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
-import { useWorkflowListMenu } from 'features/nodes/store/workflowListMenu';
-import { selectWorkflowMode } from 'features/nodes/store/workflowSlice';
-import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
-import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
-import type { CSSProperties } from 'react';
-import { memo, useCallback, useRef } from 'react';
-import type { ImperativePanelGroupHandle } from 'react-resizable-panels';
-import { Panel, PanelGroup } from 'react-resizable-panels';
-
-import WorkflowNodeInspectorPanel from './inspector/WorkflowNodeInspectorPanel';
-import { FieldsSimpleView } from './viewMode/WorkflowSimpleView';
-import WorkflowFieldsLinearViewPanel from './workflow/WorkflowPanel';
-import { WorkflowListMenu } from './WorkflowListMenu/WorkflowListMenu';
-import { WorkflowListMenuTrigger } from './WorkflowListMenu/WorkflowListMenuTrigger';
-
-const panelGroupStyles: CSSProperties = { height: '100%', width: '100%' };
-
-const overlayScrollbarsStyles: CSSProperties = {
-  height: '100%',
-  width: '100%',
-};
-
-const WorkflowsLeftPanel = () => {
-  const mode = useAppSelector(selectWorkflowMode);
-  const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
-  const workflowListMenu = useWorkflowListMenu();
-
-  const handleDoubleClickHandle = useCallback(() => {
-    if (!panelGroupRef.current) {
-      return;
-    }
-    panelGroupRef.current.setLayout([50, 50]);
-  }, []);
-
-  return (
-    <Flex w="full" h="full" gap={2} flexDir="column">
-      <WorkflowListMenuTrigger />
-      <Flex w="full" h="full" position="relative">
-        <Box position="absolute" top={0} left={0} right={0} bottom={0}>
-          {workflowListMenu.isOpen && (
-            <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
-              <Flex gap={2} flexDirection="column" h="full" w="full">
-                <WorkflowListMenu />
-              </Flex>
-            </OverlayScrollbarsComponent>
-          )}
-
-          {mode === 'view' && <FieldsSimpleView />}
-          {mode === 'edit' && (
-            <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
-              <PanelGroup
-                ref={panelGroupRef}
-                id="workflow-panel-group"
-                autoSaveId="workflow-panel-group"
-                direction="vertical"
-                style={panelGroupStyles}
-              >
-                <Panel id="workflow" collapsible minSize={25}>
-                  <WorkflowFieldsLinearViewPanel />
-                </Panel>
-                <ResizeHandle onDoubleClick={handleDoubleClickHandle} />
-                <Panel id="inspector" collapsible minSize={25}>
-                  <WorkflowNodeInspectorPanel />
-                </Panel>
-              </PanelGroup>
-            </OverlayScrollbarsComponent>
-          )}
-        </Box>
-      </Flex>
-    </Flex>
-  );
-};
-
-export default memo(WorkflowsLeftPanel);
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListMenu.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListMenu.tsx
index 6756cacfa54..3f04690ee07 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListMenu.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListMenu.tsx
@@ -1,28 +1,34 @@
-import { Flex } from '@invoke-ai/ui-library';
+import { Box, Flex } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { $workflowCategories } from 'app/store/nanostores/workflowCategories';
+import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import UploadWorkflowButton from 'features/workflowLibrary/components/UploadWorkflowButton';
+import { memo } from 'react';
 
 import { WorkflowList } from './WorkflowList';
 import WorkflowSearch from './WorkflowSearch';
 import { WorkflowSortControl } from './WorkflowSortControl';
 
-export const WorkflowListMenu = () => {
+export const WorkflowListMenu = memo(() => {
   const workflowCategories = useStore($workflowCategories);
 
   return (
-    <Flex flexDir="column" gap={2} padding={3} layerStyle="second" borderRadius="base">
+    <Flex w="full" h="full" flexDir="column" gap={2} padding={3} layerStyle="second" borderRadius="base">
       <Flex alignItems="center" gap={2} w="full" justifyContent="space-between">
         <WorkflowSearch />
-
         <WorkflowSortControl />
-
         <UploadWorkflowButton />
       </Flex>
 
-      {workflowCategories.map((category) => (
-        <WorkflowList key={category} category={category} />
-      ))}
+      <Box position="relative" w="full" h="full">
+        <ScrollableContent>
+          {workflowCategories.map((category) => (
+            <WorkflowList key={category} category={category} />
+          ))}
+        </ScrollableContent>
+      </Box>
     </Flex>
   );
-};
+});
+
+WorkflowListMenu.displayName = 'WorkflowListMenu';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowsTabLeftPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowsTabLeftPanel.tsx
new file mode 100644
index 00000000000..68373a5dc12
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowsTabLeftPanel.tsx
@@ -0,0 +1,32 @@
+import 'reactflow/dist/style.css';
+
+import { Box, Flex } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { LinearViewLeftPanelContent } from 'features/nodes/components/sidePanel/LinearViewLeftPanelContent';
+import { useWorkflowListMenu } from 'features/nodes/store/workflowListMenu';
+import { selectWorkflowMode } from 'features/nodes/store/workflowSlice';
+import { memo } from 'react';
+
+import { SimpleViewLeftPanelContent } from './viewMode/SimpleViewLeftPanelContent';
+import { WorkflowListMenu } from './WorkflowListMenu/WorkflowListMenu';
+import { WorkflowListMenuTrigger } from './WorkflowListMenu/WorkflowListMenuTrigger';
+
+const WorkflowsTabLeftPanel = () => {
+  const mode = useAppSelector(selectWorkflowMode);
+  const workflowListMenu = useWorkflowListMenu();
+
+  return (
+    <Flex w="full" h="full" gap={2} flexDir="column">
+      <WorkflowListMenuTrigger />
+      <Flex w="full" h="full" position="relative">
+        <Box position="absolute" top={0} left={0} right={0} bottom={0}>
+          {workflowListMenu.isOpen && <WorkflowListMenu />}
+          {mode === 'view' && <SimpleViewLeftPanelContent />}
+          {mode === 'edit' && <LinearViewLeftPanelContent />}
+        </Box>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default memo(WorkflowsTabLeftPanel);
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowSimpleView.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/SimpleViewLeftPanelContent.tsx
similarity index 85%
rename from invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowSimpleView.tsx
rename to invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/SimpleViewLeftPanelContent.tsx
index 594e209d776..05048dbc5f9 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowSimpleView.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/SimpleViewLeftPanelContent.tsx
@@ -14,20 +14,20 @@ import { EmptyState } from './EmptyState';
 
 const selectExposedFields = createMemoizedSelector(selectWorkflowSlice, (workflow) => workflow.exposedFields);
 
-export const FieldsSimpleView = memo(() => {
+export const SimpleViewLeftPanelContent = memo(() => {
   return (
     <Box position="relative" w="full" h="full">
       <ScrollableContent>
         <Flex position="relative" flexDir="column" alignItems="flex-start" p={1} gap={2} w="full" h="full">
-          <FieldSimpleViewContent />
+          <SimpleViewLeftPanelContentInner />
         </Flex>
       </ScrollableContent>
     </Box>
   );
 });
-FieldsSimpleView.displayName = 'FieldsSimpleView';
+SimpleViewLeftPanelContent.displayName = 'SimpleViewLeftPanelContent';
 
-const FieldSimpleViewContent = memo(() => {
+const SimpleViewLeftPanelContentInner = memo(() => {
   const { isLoading } = useGetOpenAPISchemaQuery();
   const exposedFields = useAppSelector(selectExposedFields);
 
@@ -49,4 +49,4 @@ const FieldSimpleViewContent = memo(() => {
     </>
   );
 });
-FieldSimpleViewContent.displayName = 'FieldSimpleViewContent';
+SimpleViewLeftPanelContentInner.displayName = ' SimpleViewLeftPanelContentInner';
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldTemplateTitle.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldTemplateTitle.ts
index 5484044e9a1..2370aa8e1dc 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldTemplateTitle.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useFieldTemplateTitle.ts
@@ -1,7 +1,7 @@
 import { useFieldTemplate } from 'features/nodes/hooks/useFieldTemplate';
 import { useMemo } from 'react';
 
-export const useFieldTemplateTitle = (nodeId: string, fieldName: string, kind: 'inputs' | 'outputs'): string | null => {
+export const useFieldTemplateTitle = (nodeId: string, fieldName: string, kind: 'inputs' | 'outputs'): string => {
   const fieldTemplate = useFieldTemplate(nodeId, fieldName, kind);
   const fieldTemplateTitle = useMemo(() => fieldTemplate.title, [fieldTemplate]);
   return fieldTemplateTitle;
diff --git a/invokeai/frontend/web/src/features/ui/components/AppContent.tsx b/invokeai/frontend/web/src/features/ui/components/AppContent.tsx
index 2bd7c7b4567..68f7ee0b21f 100644
--- a/invokeai/frontend/web/src/features/ui/components/AppContent.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/AppContent.tsx
@@ -5,7 +5,7 @@ import { CanvasRightPanel } from 'features/controlLayers/components/CanvasRightP
 import { useDndMonitor } from 'features/dnd/useDndMonitor';
 import GalleryPanelContent from 'features/gallery/components/GalleryPanelContent';
 import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
-import WorkflowsLeftPanel from 'features/nodes/components/sidePanel/NodeEditorPanelGroup';
+import WorkflowsTabLeftPanel from 'features/nodes/components/sidePanel/WorkflowsTabLeftPanel';
 import QueueControls from 'features/queue/components/QueueControls';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import FloatingGalleryButton from 'features/ui/components/FloatingGalleryButton';
@@ -183,7 +183,7 @@ const LeftPanelContent = memo(() => {
     return <ParametersPanelUpscale />;
   }
   if (tab === 'workflows') {
-    return <WorkflowsLeftPanel />;
+    return <WorkflowsTabLeftPanel />;
   }
 
   return null;

From 50461b1ddbd0b8c9f8682837385a62eb6aeb4623 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 20 Jan 2025 15:17:43 +1100
Subject: [PATCH 10/58] fix(ui): remove accidental change to zFieldInput schema

---
 invokeai/frontend/web/src/features/nodes/types/field.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/nodes/types/field.ts b/invokeai/frontend/web/src/features/nodes/types/field.ts
index cb74046d967..066b29539e3 100644
--- a/invokeai/frontend/web/src/features/nodes/types/field.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/field.ts
@@ -33,7 +33,7 @@ import { zBoardField, zColorField, zImageField, zModelIdentifierField, zSchedule
 /** */
 
 // #region Base schemas & misc
-const zFieldInput = z.enum(['connection', 'direct', 'any', 'batch']);
+const zFieldInput = z.enum(['connection', 'direct', 'any']);
 const zFieldUIComponent = z.enum(['none', 'textarea', 'slider']);
 const zFieldInputInstanceLinearViewConfigBase = z.object({
   notesDisplay: z.enum(['none', 'helper-text', 'icon-with-popover']).nullish(),

From 1ba9b5407c5e7d458c07a24363e52f79f7a15372 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 20 Jan 2025 16:11:55 +1100
Subject: [PATCH 11/58] refactor(ui): continued reorg of components & hooks

---
 .../listeners/workflowLoadRequested.ts        |  2 +-
 .../features/nodes/components/flow/Flow.tsx   |  6 +-
 .../flow/nodes/Invocation/InvocationNode.tsx  | 12 +--
 .../nodes/Invocation/InvocationNodeFooter.tsx |  4 +-
 ...ea.tsx => InvocationNodeNotesTextarea.tsx} | 20 ++---
 .../InvocationNodeStatusIndicator.tsx         |  4 +-
 .../Invocation/SaveToGalleryCheckbox.tsx      |  6 +-
 .../nodes/Invocation/UseCacheCheckbox.tsx     |  2 +-
 .../fields/FieldResetToDefaultValueButton.tsx | 16 ----
 ...eldResetToInitialLinearViewValueButton.tsx | 16 ----
 .../fields/FieldResetValueButton.tsx          | 25 ------
 .../Invocation/fields/FieldTooltipContent.tsx | 63 --------------
 ...putFieldAddRemoveLinearViewIconButton.tsx} | 19 ++---
 ...inear.tsx => InputFieldEditModeLinear.tsx} | 33 +++-----
 ...wNodes.tsx => InputFieldEditModeNodes.tsx} | 55 ++++++------
 .../Invocation/fields/InputFieldGate.tsx      |  8 +-
 ... InputFieldLinearViewConfigIconButton.tsx} | 12 +--
 ...tton.tsx => InputFieldNotesIconButton.tsx} |  8 +-
 .../Invocation/fields/InputFieldRenderer.tsx  | 19 ++---
 ...nputFieldResetToDefaultValueIconButton.tsx | 30 +++++++
 ...nputFieldResetToInitialValueIconButton.tsx | 30 +++++++
 ...ableFieldTitle.tsx => InputFieldTitle.tsx} | 84 +++++++++----------
 .../Invocation/fields/InputFieldTooltip.tsx   | 49 +++++++++++
 .../fields/InputFieldUnknownPlaceholder.tsx   |  6 +-
 .../Invocation/fields/InputFieldViewMode.tsx  | 31 +++++++
 .../fields/InputFieldViewSimple.tsx           | 31 -------
 .../Invocation/fields/InputFieldWrapper.tsx   | 15 +---
 .../Invocation/fields/OutputFieldGate.tsx     |  4 +-
 .../fields/OutputFieldNodesEditorView.tsx     | 37 ++++----
 .../Invocation/fields/OutputFieldTitle.tsx    | 43 ++++++++++
 .../Invocation/fields/OutputFieldTooltip.tsx  | 29 +++++++
 .../fields/OutputFieldUnknownPlaceholder.tsx  |  6 +-
 .../Invocation/fields/OutputFieldWrapper.tsx  | 13 +--
 .../ImageFieldCollectionInputComponent.tsx    |  4 +-
 .../NumberFieldCollectionInputComponent.tsx   |  4 +-
 .../StringFieldCollectionInputComponent.tsx   |  4 +-
 .../flow/nodes/common/NodeWrapper.tsx         |  4 +-
 ...ntent.tsx => EditModeLeftPanelContent.tsx} |  4 +-
 .../sidePanel/WorkflowsTabLeftPanel.tsx       |  8 +-
 .../inspector/InspectorDetailsTab.tsx         |  6 +-
 .../inspector/InspectorOutputsTab.tsx         |  4 +-
 ...ntent.tsx => ViewModeLeftPanelContent.tsx} | 14 ++--
 .../sidePanel/workflow/WorkflowLinearTab.tsx  |  4 +-
 .../features/nodes/hooks/useBatchGroupId.ts   | 27 +++---
 .../nodes/hooks/useConnectionState.ts         | 59 -------------
 .../features/nodes/hooks/useFieldTemplate.ts  | 36 --------
 .../nodes/hooks/useFieldTemplateTitle.ts      |  8 --
 .../hooks/useInputFieldConnectionState.ts     | 35 ++++++++
 ...tValue.ts => useInputFieldDefaultValue.ts} | 10 +--
 ...=> useInputFieldInitialLinearViewValue.ts} |  6 +-
 ...utInstance.ts => useInputFieldInstance.ts} | 11 ++-
 ...ists.ts => useInputFieldInstanceExists.ts} |  2 +-
 .../nodes/hooks/useInputFieldIsConnected.ts   | 21 +++++
 ...IsExposed.ts => useInputFieldIsExposed.ts} |  2 +-
 ...IsInvalid.ts => useInputFieldIsInvalid.ts} | 16 ++--
 ...useFieldLabel.ts => useInputFieldLabel.ts} |  2 +-
 ...ig.ts => useInputFieldLinearViewConfig.ts} |  2 +-
 ...FieldInputName.ts => useInputFieldName.ts} |  2 +-
 ...Names.ts => useInputFieldNamesByStatus.ts} |  2 +-
 ...useFieldNotes.ts => useInputFieldNotes.ts} |  2 +-
 ...utTemplate.ts => useInputFieldTemplate.ts} |  2 +-
 ...ists.ts => useInputFieldTemplateExists.ts} |  2 +-
 .../nodes/hooks/useInputFieldTemplateTitle.ts | 15 ++++
 ...useFieldValue.ts => useInputFieldValue.ts} |  2 +-
 .../{useCopyPaste.ts => useNodeCopyPaste.ts}  |  2 +-
 ...utionState.ts => useNodeExecutionState.ts} |  2 +-
 ...mageOutput.ts => useNodeHasImageOutput.ts} |  2 +-
 .../nodes/hooks/useNodeIsInvocationNode.ts    | 20 +++++
 .../src/features/nodes/hooks/useNodeNotes.ts  | 22 +++++
 .../hooks/useOutputFieldConnectionState.ts    | 35 ++++++++
 .../nodes/hooks/useOutputFieldIsConnected.ts  | 21 +++++
 ...eldOutputName.ts => useOutputFieldName.ts} |  2 +-
 ...tTemplate.ts => useOutputFieldTemplate.ts} |  2 +-
 ...sts.ts => useOutputFieldTemplateExists.ts} |  2 +-
 .../nodes/hooks/usePrettyFieldType.ts         |  5 +-
 .../src/features/nodes/hooks/useWithFooter.ts |  4 +-
 .../services/events/onInvocationComplete.tsx  |  2 +-
 .../src/services/events/setEventListeners.tsx |  2 +-
 78 files changed, 634 insertions(+), 547 deletions(-)
 rename invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/{NotesTextarea.tsx => InvocationNodeNotesTextarea.tsx} (64%)
 delete mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetToDefaultValueButton.tsx
 delete mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetToInitialLinearViewValueButton.tsx
 delete mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetValueButton.tsx
 delete mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent.tsx
 rename invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/{FieldLinearViewToggle.tsx => InputFieldAddRemoveLinearViewIconButton.tsx} (71%)
 rename invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/{InputFieldViewLinear.tsx => InputFieldEditModeLinear.tsx} (61%)
 rename invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/{InputFieldViewNodes.tsx => InputFieldEditModeNodes.tsx} (51%)
 rename invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/{FieldLinearViewConfigIconButton.tsx => InputFieldLinearViewConfigIconButton.tsx} (81%)
 rename invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/{FieldNotesIconButton.tsx => InputFieldNotesIconButton.tsx} (86%)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToDefaultValueIconButton.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToInitialValueIconButton.tsx
 rename invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/{EditableFieldTitle.tsx => InputFieldTitle.tsx} (73%)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTooltip.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode.tsx
 delete mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewSimple.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldTitle.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldTooltip.tsx
 rename invokeai/frontend/web/src/features/nodes/components/sidePanel/{LinearViewLeftPanelContent.tsx => EditModeLeftPanelContent.tsx} (92%)
 rename invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/{SimpleViewLeftPanelContent.tsx => ViewModeLeftPanelContent.tsx} (76%)
 delete mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useConnectionState.ts
 delete mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useFieldTemplate.ts
 delete mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useFieldTemplateTitle.ts
 create mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useInputFieldConnectionState.ts
 rename invokeai/frontend/web/src/features/nodes/hooks/{useFieldDefaultValue.ts => useInputFieldDefaultValue.ts} (64%)
 rename invokeai/frontend/web/src/features/nodes/hooks/{useFieldInitialLinearViewValue.ts => useInputFieldInitialLinearViewValue.ts} (83%)
 rename invokeai/frontend/web/src/features/nodes/hooks/{useFieldInputInstance.ts => useInputFieldInstance.ts} (55%)
 rename invokeai/frontend/web/src/features/nodes/hooks/{useFieldInputInstanceExists.ts => useInputFieldInstanceExists.ts} (90%)
 create mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useInputFieldIsConnected.ts
 rename invokeai/frontend/web/src/features/nodes/hooks/{useFieldIsExposed.ts => useInputFieldIsExposed.ts} (87%)
 rename invokeai/frontend/web/src/features/nodes/hooks/{useFieldIsInvalid.ts => useInputFieldIsInvalid.ts} (81%)
 rename invokeai/frontend/web/src/features/nodes/hooks/{useFieldLabel.ts => useInputFieldLabel.ts} (84%)
 rename invokeai/frontend/web/src/features/nodes/hooks/{useFieldLinearViewConfig.ts => useInputFieldLinearViewConfig.ts} (88%)
 rename invokeai/frontend/web/src/features/nodes/hooks/{useFieldInputName.ts => useInputFieldName.ts} (93%)
 rename invokeai/frontend/web/src/features/nodes/hooks/{useFieldNames.ts => useInputFieldNamesByStatus.ts} (95%)
 rename invokeai/frontend/web/src/features/nodes/hooks/{useFieldNotes.ts => useInputFieldNotes.ts} (89%)
 rename invokeai/frontend/web/src/features/nodes/hooks/{useFieldInputTemplate.ts => useInputFieldTemplate.ts} (89%)
 rename invokeai/frontend/web/src/features/nodes/hooks/{useFieldInputTemplateExists.ts => useInputFieldTemplateExists.ts} (92%)
 create mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useInputFieldTemplateTitle.ts
 rename invokeai/frontend/web/src/features/nodes/hooks/{useFieldValue.ts => useInputFieldValue.ts} (90%)
 rename invokeai/frontend/web/src/features/nodes/hooks/{useCopyPaste.ts => useNodeCopyPaste.ts} (99%)
 rename invokeai/frontend/web/src/features/nodes/hooks/{useExecutionState.ts => useNodeExecutionState.ts} (97%)
 rename invokeai/frontend/web/src/features/nodes/hooks/{useHasImageOutput.ts => useNodeHasImageOutput.ts} (89%)
 create mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useNodeIsInvocationNode.ts
 create mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useNodeNotes.ts
 create mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldConnectionState.ts
 create mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldIsConnected.ts
 rename invokeai/frontend/web/src/features/nodes/hooks/{useFieldOutputName.ts => useOutputFieldName.ts} (93%)
 rename invokeai/frontend/web/src/features/nodes/hooks/{useFieldOutputTemplate.ts => useOutputFieldTemplate.ts} (89%)
 rename invokeai/frontend/web/src/features/nodes/hooks/{useFieldOutputTemplateExists.ts => useOutputFieldTemplateExists.ts} (92%)

diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/workflowLoadRequested.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/workflowLoadRequested.ts
index 8d39448ad20..cde399e666a 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/workflowLoadRequested.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/workflowLoadRequested.ts
@@ -1,6 +1,6 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import { $nodeExecutionStates } from 'features/nodes/hooks/useExecutionState';
+import { $nodeExecutionStates } from 'features/nodes/hooks/useNodeExecutionState';
 import { workflowLoaded, workflowLoadRequested } from 'features/nodes/store/actions';
 import { $templates } from 'features/nodes/store/nodesSlice';
 import { $needsFit } from 'features/nodes/store/reactFlowInstance';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx
index aaeea376a19..aef01fbdff0 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx
@@ -3,9 +3,9 @@ import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHooks';
 import { useFocusRegion, useIsRegionFocused } from 'common/hooks/focus';
 import { useConnection } from 'features/nodes/hooks/useConnection';
-import { useCopyPaste } from 'features/nodes/hooks/useCopyPaste';
-import { useSyncExecutionState } from 'features/nodes/hooks/useExecutionState';
 import { useIsValidConnection } from 'features/nodes/hooks/useIsValidConnection';
+import { useNodeCopyPaste } from 'features/nodes/hooks/useNodeCopyPaste';
+import { useSyncExecutionState } from 'features/nodes/hooks/useNodeExecutionState';
 import { useWorkflowWatcher } from 'features/nodes/hooks/useWorkflowWatcher';
 import {
   $addNodeCmdk,
@@ -208,7 +208,7 @@ export const Flow = memo(() => {
 
   // #endregion
 
-  const { copySelection, pasteSelection, pasteSelectionWithEdges } = useCopyPaste();
+  const { copySelection, pasteSelection, pasteSelectionWithEdges } = useNodeCopyPaste();
 
   useRegisteredHotkeys({
     id: 'copySelection',
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx
index ef98639050c..fe3c292ad79 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx
@@ -3,12 +3,12 @@ import NodeWrapper from 'features/nodes/components/flow/nodes/common/NodeWrapper
 import { InputFieldGate } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate';
 import { OutputFieldGate } from 'features/nodes/components/flow/nodes/Invocation/fields/OutputFieldGate';
 import { OutputFieldNodesEditorView } from 'features/nodes/components/flow/nodes/Invocation/fields/OutputFieldNodesEditorView';
-import { useFieldNames } from 'features/nodes/hooks/useFieldNames';
+import { useInputFieldNamesByStatus } from 'features/nodes/hooks/useInputFieldNamesByStatus';
 import { useOutputFieldNames } from 'features/nodes/hooks/useOutputFieldNames';
 import { useWithFooter } from 'features/nodes/hooks/useWithFooter';
 import { memo } from 'react';
 
-import { InputFieldViewNodes } from './fields/InputFieldViewNodes';
+import { InputFieldEditModeNodes } from './fields/InputFieldEditModeNodes';
 import InvocationNodeFooter from './InvocationNodeFooter';
 import InvocationNodeHeader from './InvocationNodeHeader';
 
@@ -21,7 +21,7 @@ type Props = {
 };
 
 const InvocationNode = ({ nodeId, isOpen, label, type, selected }: Props) => {
-  const fieldNames = useFieldNames(nodeId);
+  const fieldNames = useInputFieldNamesByStatus(nodeId);
   const withFooter = useWithFooter(nodeId);
   const outputFieldNames = useOutputFieldNames(nodeId);
 
@@ -44,7 +44,7 @@ const InvocationNode = ({ nodeId, isOpen, label, type, selected }: Props) => {
                 {fieldNames.connectionFields.map((fieldName, i) => (
                   <GridItem gridColumnStart={1} gridRowStart={i + 1} key={`${nodeId}.${fieldName}.input-field`}>
                     <InputFieldGate nodeId={nodeId} fieldName={fieldName}>
-                      <InputFieldViewNodes nodeId={nodeId} fieldName={fieldName} />
+                      <InputFieldEditModeNodes nodeId={nodeId} fieldName={fieldName} />
                     </InputFieldGate>
                   </GridItem>
                 ))}
@@ -58,12 +58,12 @@ const InvocationNode = ({ nodeId, isOpen, label, type, selected }: Props) => {
               </Grid>
               {fieldNames.anyOrDirectFields.map((fieldName) => (
                 <InputFieldGate key={`${nodeId}.${fieldName}.input-field`} nodeId={nodeId} fieldName={fieldName}>
-                  <InputFieldViewNodes nodeId={nodeId} fieldName={fieldName} />
+                  <InputFieldEditModeNodes nodeId={nodeId} fieldName={fieldName} />
                 </InputFieldGate>
               ))}
               {fieldNames.missingFields.map((fieldName) => (
                 <InputFieldGate key={`${nodeId}.${fieldName}.input-field`} nodeId={nodeId} fieldName={fieldName}>
-                  <InputFieldViewNodes nodeId={nodeId} fieldName={fieldName} />
+                  <InputFieldEditModeNodes nodeId={nodeId} fieldName={fieldName} />
                 </InputFieldGate>
               ))}
             </Flex>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx
index c1ff625d257..467e2b1bb6a 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx
@@ -1,6 +1,6 @@
 import type { ChakraProps } from '@invoke-ai/ui-library';
 import { Flex, FormControlGroup } from '@invoke-ai/ui-library';
-import { useHasImageOutput } from 'features/nodes/hooks/useHasImageOutput';
+import { useNodeHasImageOutput } from 'features/nodes/hooks/useNodeHasImageOutput';
 import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { memo } from 'react';
@@ -15,7 +15,7 @@ type Props = {
 const props: ChakraProps = { w: 'unset' };
 
 const InvocationNodeFooter = ({ nodeId }: Props) => {
-  const hasImageOutput = useHasImageOutput(nodeId);
+  const hasImageOutput = useNodeHasImageOutput(nodeId);
   const isCacheEnabled = useFeatureStatus('invocationCache');
   return (
     <Flex
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeNotesTextarea.tsx
similarity index 64%
rename from invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx
rename to invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeNotesTextarea.tsx
index 9f4da396af1..8e316e7841b 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeNotesTextarea.tsx
@@ -1,31 +1,31 @@
 import { FormControl, FormLabel, Textarea } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { useNode } from 'features/nodes/hooks/useNode';
+import { useInvocationNodeNotes } from 'features/nodes/hooks/useNodeNotes';
 import { nodeNotesChanged } from 'features/nodes/store/nodesSlice';
-import { isInvocationNode } from 'features/nodes/types/invocation';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const NotesTextarea = ({ nodeId }: { nodeId: string }) => {
+type Props = {
+  nodeId: string;
+};
+
+export const InvocationNodeNotesTextarea = memo(({ nodeId }: Props) => {
   const dispatch = useAppDispatch();
-  const node = useNode(nodeId);
   const { t } = useTranslation();
+  const notes = useInvocationNodeNotes(nodeId);
   const handleNotesChanged = useCallback(
     (e: ChangeEvent<HTMLTextAreaElement>) => {
       dispatch(nodeNotesChanged({ nodeId, notes: e.target.value }));
     },
     [dispatch, nodeId]
   );
-  if (!isInvocationNode(node)) {
-    return null;
-  }
   return (
     <FormControl orientation="vertical" h="full">
       <FormLabel>{t('nodes.notes')}</FormLabel>
-      <Textarea value={node.data?.notes} onChange={handleNotesChanged} rows={10} resize="none" />
+      <Textarea value={notes} onChange={handleNotesChanged} rows={10} resize="none" />
     </FormControl>
   );
-};
+});
 
-export default memo(NotesTextarea);
+InvocationNodeNotesTextarea.displayName = 'InvocationNodeNotesTextarea';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx
index b58f6fe8ba5..a740a2ee3df 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx
@@ -1,6 +1,6 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Badge, CircularProgress, Flex, Icon, Image, Text, Tooltip } from '@invoke-ai/ui-library';
-import { useExecutionState } from 'features/nodes/hooks/useExecutionState';
+import { useNodeExecutionState } from 'features/nodes/hooks/useNodeExecutionState';
 import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants';
 import type { NodeExecutionState } from 'features/nodes/types/invocation';
 import { zNodeStatus } from 'features/nodes/types/invocation';
@@ -22,7 +22,7 @@ const circleStyles: SystemStyleObject = {
 };
 
 const InvocationNodeStatusIndicator = ({ nodeId }: Props) => {
-  const nodeExecutionState = useExecutionState(nodeId);
+  const nodeExecutionState = useNodeExecutionState(nodeId);
 
   if (!nodeExecutionState) {
     return null;
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/SaveToGalleryCheckbox.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/SaveToGalleryCheckbox.tsx
index 270d137d501..4ef07a04853 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/SaveToGalleryCheckbox.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/SaveToGalleryCheckbox.tsx
@@ -1,7 +1,7 @@
 import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { useHasImageOutput } from 'features/nodes/hooks/useHasImageOutput';
 import { useIsIntermediate } from 'features/nodes/hooks/useIsIntermediate';
+import { useNodeHasImageOutput } from 'features/nodes/hooks/useNodeHasImageOutput';
 import { nodeIsIntermediateChanged } from 'features/nodes/store/nodesSlice';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
 const SaveToGalleryCheckbox = ({ nodeId }: { nodeId: string }) => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const hasImageOutput = useHasImageOutput(nodeId);
+  const hasImageOutput = useNodeHasImageOutput(nodeId);
   const isIntermediate = useIsIntermediate(nodeId);
   const handleChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
@@ -30,7 +30,7 @@ const SaveToGalleryCheckbox = ({ nodeId }: { nodeId: string }) => {
 
   return (
     <FormControl className="nopan">
-      <FormLabel>{t('nodes.saveToGallery')} </FormLabel>
+      <FormLabel m={0}>{t('nodes.saveToGallery')} </FormLabel>
       <Checkbox onChange={handleChange} isChecked={!isIntermediate} />
     </FormControl>
   );
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/UseCacheCheckbox.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/UseCacheCheckbox.tsx
index e8069bf38d5..853d718a859 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/UseCacheCheckbox.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/UseCacheCheckbox.tsx
@@ -23,7 +23,7 @@ const UseCacheCheckbox = ({ nodeId }: { nodeId: string }) => {
   const { t } = useTranslation();
   return (
     <FormControl>
-      <FormLabel>{t('invocationCache.useCache')}</FormLabel>
+      <FormLabel m={0}>{t('invocationCache.useCache')}</FormLabel>
       <Checkbox className="nopan" onChange={handleChange} isChecked={useCache} />
     </FormControl>
   );
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetToDefaultValueButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetToDefaultValueButton.tsx
deleted file mode 100644
index 9d944a1c81c..00000000000
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetToDefaultValueButton.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { FieldResetValueButton } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldResetValueButton';
-import { useFieldDefaultValue } from 'features/nodes/hooks/useFieldDefaultValue';
-import { memo } from 'react';
-
-type Props = {
-  nodeId: string;
-  fieldName: string;
-};
-
-const FieldResetToDefaultValueButton = ({ nodeId, fieldName }: Props) => {
-  const { isValueChanged, resetToDefaultValue } = useFieldDefaultValue(nodeId, fieldName);
-
-  return <FieldResetValueButton onClick={resetToDefaultValue} isDisabled={!isValueChanged} />;
-};
-
-export default memo(FieldResetToDefaultValueButton);
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetToInitialLinearViewValueButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetToInitialLinearViewValueButton.tsx
deleted file mode 100644
index d0c056c9330..00000000000
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetToInitialLinearViewValueButton.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { FieldResetValueButton } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldResetValueButton';
-import { useFieldInitialLinearViewValue } from 'features/nodes/hooks/useFieldInitialLinearViewValue';
-import { memo } from 'react';
-
-type Props = {
-  nodeId: string;
-  fieldName: string;
-};
-
-const FieldResetToInitialLinearViewValueButton = ({ nodeId, fieldName }: Props) => {
-  const { isValueChanged, resetToInitialLinearViewValue } = useFieldInitialLinearViewValue(nodeId, fieldName);
-
-  return <FieldResetValueButton onClick={resetToInitialLinearViewValue} isDisabled={!isValueChanged} />;
-};
-
-export default memo(FieldResetToInitialLinearViewValueButton);
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetValueButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetValueButton.tsx
deleted file mode 100644
index c9d1405b40e..00000000000
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldResetValueButton.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { IconButtonProps } from '@invoke-ai/ui-library';
-import { IconButton } from '@invoke-ai/ui-library';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiArrowCounterClockwiseBold } from 'react-icons/pi';
-
-type Props = Omit<IconButtonProps, 'aria-label'>;
-
-export const FieldResetValueButton = memo((props: Props) => {
-  const { t } = useTranslation();
-
-  return (
-    <IconButton
-      variant="ghost"
-      tooltip={t('nodes.resetToDefaultValue')}
-      aria-label={t('nodes.resetToDefaultValue')}
-      icon={<PiArrowCounterClockwiseBold />}
-      pointerEvents="auto"
-      size="xs"
-      {...props}
-    />
-  );
-});
-
-FieldResetValueButton.displayName = 'FieldResetValueButton';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent.tsx
deleted file mode 100644
index a8925f5b3a1..00000000000
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Flex, Text } from '@invoke-ai/ui-library';
-import { useFieldInputInstance } from 'features/nodes/hooks/useFieldInputInstance';
-import { useFieldTemplate } from 'features/nodes/hooks/useFieldTemplate';
-import { useFieldTypeName } from 'features/nodes/hooks/usePrettyFieldType';
-import { isFieldInputInstance, isFieldInputTemplate } from 'features/nodes/types/field';
-import { startCase } from 'lodash-es';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-interface Props {
-  nodeId: string;
-  fieldName: string;
-  kind: 'inputs' | 'outputs';
-}
-
-const FieldTooltipContent = ({ nodeId, fieldName, kind }: Props) => {
-  const field = useFieldInputInstance(nodeId, fieldName);
-  const fieldTemplate = useFieldTemplate(nodeId, fieldName, kind);
-  const isInputTemplate = isFieldInputTemplate(fieldTemplate);
-  const fieldTypeName = useFieldTypeName(fieldTemplate?.type);
-  const { t } = useTranslation();
-  const fieldTitle = useMemo(() => {
-    if (isFieldInputInstance(field)) {
-      if (field.label && fieldTemplate?.title) {
-        return `${field.label} (${fieldTemplate.title})`;
-      }
-
-      if (field.label && !fieldTemplate) {
-        return field.label;
-      }
-
-      if (!field.label && fieldTemplate) {
-        return fieldTemplate.title;
-      }
-
-      return t('nodes.unknownField');
-    } else {
-      return fieldTemplate?.title || t('nodes.unknownField');
-    }
-  }, [field, fieldTemplate, t]);
-
-  return (
-    <Flex flexDir="column">
-      <Text fontWeight="semibold">{fieldTitle}</Text>
-      {fieldTemplate && (
-        <Text opacity={0.7} fontStyle="oblique 5deg">
-          {fieldTemplate.description}
-        </Text>
-      )}
-      {fieldTypeName && (
-        <Text>
-          {t('parameters.type')}: {fieldTypeName}
-        </Text>
-      )}
-      {isInputTemplate && (
-        <Text>
-          {t('common.input')}: {startCase(fieldTemplate.input)}
-        </Text>
-      )}
-    </Flex>
-  );
-};
-
-export default memo(FieldTooltipContent);
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldLinearViewToggle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldAddRemoveLinearViewIconButton.tsx
similarity index 71%
rename from invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldLinearViewToggle.tsx
rename to invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldAddRemoveLinearViewIconButton.tsx
index be7951497a2..9ffe0afa75a 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldLinearViewToggle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldAddRemoveLinearViewIconButton.tsx
@@ -1,11 +1,8 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { useFieldIsExposed } from 'features/nodes/hooks/useFieldIsExposed';
-import { useFieldValue } from 'features/nodes/hooks/useFieldValue';
-import {
-  workflowExposedFieldAdded,
-  workflowExposedFieldRemoved,
-} from 'features/nodes/store/workflowSlice';
+import { useInputFieldIsExposed } from 'features/nodes/hooks/useInputFieldIsExposed';
+import { useInputFieldValue } from 'features/nodes/hooks/useInputFieldValue';
+import { workflowExposedFieldAdded, workflowExposedFieldRemoved } from 'features/nodes/store/workflowSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiMinusBold, PiPlusBold } from 'react-icons/pi';
@@ -15,11 +12,11 @@ type Props = {
   fieldName: string;
 };
 
-const FieldLinearViewToggle = ({ nodeId, fieldName }: Props) => {
+export const InputFieldAddRemoveLinearViewIconButton = memo(({ nodeId, fieldName }: Props) => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
-  const value = useFieldValue(nodeId, fieldName);
-  const isExposed = useFieldIsExposed(nodeId, fieldName);
+  const value = useInputFieldValue(nodeId, fieldName);
+  const isExposed = useInputFieldIsExposed(nodeId, fieldName);
 
   const handleExposeField = useCallback(() => {
     dispatch(workflowExposedFieldAdded({ nodeId, fieldName, value }));
@@ -54,6 +51,6 @@ const FieldLinearViewToggle = ({ nodeId, fieldName }: Props) => {
       />
     );
   }
-};
+});
 
-export default memo(FieldLinearViewToggle);
+InputFieldAddRemoveLinearViewIconButton.displayName = 'InputFieldAddRemoveLinearViewIconButton';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewLinear.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeLinear.tsx
similarity index 61%
rename from invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewLinear.tsx
rename to invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeLinear.tsx
index 9bf5e1c5b7f..5708ea5b072 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewLinear.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeLinear.tsx
@@ -1,20 +1,18 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { Box, Circle, Flex, Icon, IconButton, Spacer, Tooltip } from '@invoke-ai/ui-library';
+import { Box, Circle, Flex, IconButton, Spacer } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { DndListDropIndicator } from 'features/dnd/DndListDropIndicator';
-import { FieldNotesIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton';
-import FieldResetToInitialLinearViewValueButton from 'features/nodes/components/flow/nodes/Invocation/fields/FieldResetToInitialLinearViewValueButton';
+import { InputFieldNotesIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButton';
+import InputFieldResetToInitialValueIconButton from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToInitialValueIconButton';
 import { useLinearViewFieldDnd } from 'features/nodes/components/sidePanel/workflow/useLinearViewFieldDnd';
 import { useMouseOverNode } from 'features/nodes/hooks/useMouseOverNode';
 import { workflowExposedFieldRemoved } from 'features/nodes/store/workflowSlice';
-import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants';
 import { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiInfoBold, PiTrashSimpleBold } from 'react-icons/pi';
+import { PiTrashSimpleBold } from 'react-icons/pi';
 
-import EditableFieldTitle from './EditableFieldTitle';
-import FieldTooltipContent from './FieldTooltipContent';
-import InputFieldRenderer from './InputFieldRenderer';
+import { InputFieldRenderer } from './InputFieldRenderer';
+import { InputFieldTitle } from './InputFieldTitle';
 
 type Props = {
   nodeId: string;
@@ -34,7 +32,7 @@ const sx = {
   transitionProperty: 'common',
 } satisfies SystemStyleObject;
 
-export const InputFieldViewLinear = memo(({ nodeId, fieldName }: Props) => {
+export const InputFieldEditModeLinear = memo(({ nodeId, fieldName }: Props) => {
   const dispatch = useAppDispatch();
   const { isMouseOverNode, handleMouseOut, handleMouseOver } = useMouseOverNode(nodeId);
   const { t } = useTranslation();
@@ -59,20 +57,11 @@ export const InputFieldViewLinear = memo(({ nodeId, fieldName }: Props) => {
       >
         <Flex flexDir="column" w="full">
           <Flex alignItems="center" gap={2}>
-            <EditableFieldTitle nodeId={nodeId} fieldName={fieldName} kind="inputs" />
+            <InputFieldTitle nodeId={nodeId} fieldName={fieldName} />
             <Spacer />
             {isMouseOverNode && <Circle me={2} size={2} borderRadius="full" bg="invokeBlue.500" />}
-            <FieldNotesIconButton nodeId={nodeId} fieldName={fieldName} />
-            <FieldResetToInitialLinearViewValueButton nodeId={nodeId} fieldName={fieldName} />
-            <Tooltip
-              label={<FieldTooltipContent nodeId={nodeId} fieldName={fieldName} kind="inputs" />}
-              openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
-              placement="top"
-            >
-              <Flex h="full" alignItems="center">
-                <Icon fontSize="sm" color="base.300" as={PiInfoBold} />
-              </Flex>
-            </Tooltip>
+            <InputFieldNotesIconButton nodeId={nodeId} fieldName={fieldName} />
+            <InputFieldResetToInitialValueIconButton nodeId={nodeId} fieldName={fieldName} />
             <IconButton
               aria-label={t('nodes.removeLinearView')}
               tooltip={t('nodes.removeLinearView')}
@@ -90,4 +79,4 @@ export const InputFieldViewLinear = memo(({ nodeId, fieldName }: Props) => {
   );
 });
 
-InputFieldViewLinear.displayName = 'InputFieldViewLinear';
+InputFieldEditModeLinear.displayName = 'InputFieldEditModeLinear';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewNodes.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeNodes.tsx
similarity index 51%
rename from invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewNodes.tsx
rename to invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeNodes.tsx
index 5a1d32ba6a2..80f766e7ee4 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewNodes.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeNodes.tsx
@@ -1,16 +1,17 @@
 import { Flex, FormControl } from '@invoke-ai/ui-library';
 import { FieldHandle } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldHandle';
-import { FieldLinearViewConfigIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldLinearViewConfigIconButton';
-import { FieldNotesIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton';
-import FieldResetToDefaultValueButton from 'features/nodes/components/flow/nodes/Invocation/fields/FieldResetToDefaultValueButton';
-import { useConnectionState } from 'features/nodes/hooks/useConnectionState';
-import { useFieldInputTemplate } from 'features/nodes/hooks/useFieldInputTemplate';
-import { useFieldIsInvalid } from 'features/nodes/hooks/useFieldIsInvalid';
+import { InputFieldLinearViewConfigIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldLinearViewConfigIconButton';
+import { InputFieldNotesIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButton';
+import { InputFieldResetToDefaultValueIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToDefaultValueIconButton';
+import { useInputFieldConnectionState } from 'features/nodes/hooks/useInputFieldConnectionState';
+import { useInputFieldIsConnected } from 'features/nodes/hooks/useInputFieldIsConnected';
+import { useInputFieldIsInvalid } from 'features/nodes/hooks/useInputFieldIsInvalid';
+import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate';
 import { memo, useCallback, useState } from 'react';
 
-import EditableFieldTitle from './EditableFieldTitle';
-import FieldLinearViewToggle from './FieldLinearViewToggle';
-import InputFieldRenderer from './InputFieldRenderer';
+import { InputFieldAddRemoveLinearViewIconButton } from './InputFieldAddRemoveLinearViewIconButton';
+import { InputFieldRenderer } from './InputFieldRenderer';
+import { InputFieldTitle } from './InputFieldTitle';
 import { InputFieldWrapper } from './InputFieldWrapper';
 
 interface Props {
@@ -18,13 +19,15 @@ interface Props {
   fieldName: string;
 }
 
-export const InputFieldViewNodes = memo(({ nodeId, fieldName }: Props) => {
-  const fieldTemplate = useFieldInputTemplate(nodeId, fieldName);
+export const InputFieldEditModeNodes = memo(({ nodeId, fieldName }: Props) => {
+  const fieldTemplate = useInputFieldTemplate(nodeId, fieldName);
   const [isHovered, setIsHovered] = useState(false);
-  const isInvalid = useFieldIsInvalid(nodeId, fieldName);
-
-  const { isConnected, isConnectionInProgress, isConnectionStartField, validationResult, shouldDim } =
-    useConnectionState(nodeId, fieldName, 'inputs');
+  const isInvalid = useInputFieldIsInvalid(nodeId, fieldName);
+  const isConnected = useInputFieldIsConnected(nodeId, fieldName);
+  const { isConnectionInProgress, isConnectionStartField, validationResult } = useInputFieldConnectionState(
+    nodeId,
+    fieldName
+  );
 
   const onMouseEnter = useCallback(() => {
     setIsHovered(true);
@@ -36,15 +39,13 @@ export const InputFieldViewNodes = memo(({ nodeId, fieldName }: Props) => {
 
   if (fieldTemplate.input === 'connection' || isConnected) {
     return (
-      <InputFieldWrapper shouldDim={shouldDim}>
+      <InputFieldWrapper>
         <FormControl isInvalid={isInvalid} isDisabled={isConnected} px={2}>
-          <EditableFieldTitle
+          <InputFieldTitle
             nodeId={nodeId}
             fieldName={fieldName}
-            kind="inputs"
             isInvalid={isInvalid}
-            withTooltip
-            shouldDim
+            isDisabled={(isConnectionInProgress && !validationResult.isValid && !isConnectionStartField) || isConnected}
           />
         </FormControl>
 
@@ -60,7 +61,7 @@ export const InputFieldViewNodes = memo(({ nodeId, fieldName }: Props) => {
   }
 
   return (
-    <InputFieldWrapper shouldDim={shouldDim}>
+    <InputFieldWrapper>
       <FormControl
         isInvalid={isInvalid}
         isDisabled={isConnected}
@@ -72,13 +73,13 @@ export const InputFieldViewNodes = memo(({ nodeId, fieldName }: Props) => {
       >
         <Flex flexDir="column" w="full" gap={1} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
           <Flex gap={1}>
-            <EditableFieldTitle nodeId={nodeId} fieldName={fieldName} kind="inputs" isInvalid={isInvalid} withTooltip />
+            <InputFieldTitle nodeId={nodeId} fieldName={fieldName} isInvalid={isInvalid} />
             {isHovered && (
               <>
-                <FieldLinearViewConfigIconButton nodeId={nodeId} fieldName={fieldName} />
-                <FieldNotesIconButton nodeId={nodeId} fieldName={fieldName} />
-                <FieldResetToDefaultValueButton nodeId={nodeId} fieldName={fieldName} />
-                <FieldLinearViewToggle nodeId={nodeId} fieldName={fieldName} />
+                <InputFieldLinearViewConfigIconButton nodeId={nodeId} fieldName={fieldName} />
+                <InputFieldNotesIconButton nodeId={nodeId} fieldName={fieldName} />
+                <InputFieldResetToDefaultValueIconButton nodeId={nodeId} fieldName={fieldName} />
+                <InputFieldAddRemoveLinearViewIconButton nodeId={nodeId} fieldName={fieldName} />
               </>
             )}
           </Flex>
@@ -99,4 +100,4 @@ export const InputFieldViewNodes = memo(({ nodeId, fieldName }: Props) => {
   );
 });
 
-InputFieldViewNodes.displayName = 'InputFieldViewNodes';
+InputFieldEditModeNodes.displayName = 'InputFieldEditModeNodes';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate.tsx
index 29fd7bc7e22..5f43fc29775 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate.tsx
@@ -1,6 +1,6 @@
 import { InputFieldUnknownPlaceholder } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldUnknownPlaceholder';
-import { useFieldInputInstanceExists } from 'features/nodes/hooks/useFieldInputInstanceExists';
-import { useFieldInputTemplateExists } from 'features/nodes/hooks/useFieldInputTemplateExists';
+import { useInputFieldInstanceExists } from 'features/nodes/hooks/useInputFieldInstanceExists';
+import { useInputFieldTemplateExists } from 'features/nodes/hooks/useInputFieldTemplateExists';
 import type { PropsWithChildren } from 'react';
 import { memo } from 'react';
 
@@ -10,8 +10,8 @@ type Props = PropsWithChildren<{
 }>;
 
 export const InputFieldGate = memo(({ nodeId, fieldName, children }: Props) => {
-  const hasInstance = useFieldInputInstanceExists(nodeId, fieldName);
-  const hasTemplate = useFieldInputTemplateExists(nodeId, fieldName);
+  const hasInstance = useInputFieldInstanceExists(nodeId, fieldName);
+  const hasTemplate = useInputFieldTemplateExists(nodeId, fieldName);
 
   if (!hasTemplate || !hasInstance) {
     return <InputFieldUnknownPlaceholder nodeId={nodeId} fieldName={fieldName} />;
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldLinearViewConfigIconButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldLinearViewConfigIconButton.tsx
similarity index 81%
rename from invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldLinearViewConfigIconButton.tsx
rename to invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldLinearViewConfigIconButton.tsx
index fb70070f3a7..b7659574ad8 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldLinearViewConfigIconButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldLinearViewConfigIconButton.tsx
@@ -8,8 +8,8 @@ import {
   Select,
 } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { useFieldIsExposed } from 'features/nodes/hooks/useFieldIsExposed';
-import { useFieldLinearViewConfig } from 'features/nodes/hooks/useFieldLinearViewConfig';
+import { useInputFieldIsExposed } from 'features/nodes/hooks/useInputFieldIsExposed';
+import { useInputFieldLinearViewConfig } from 'features/nodes/hooks/useInputFieldLinearViewConfig';
 import { fieldLinearViewConfigChanged } from 'features/nodes/store/nodesSlice';
 import type { FieldInputInstance } from 'features/nodes/types/field';
 import type { ChangeEvent } from 'react';
@@ -37,11 +37,11 @@ const parseNotesDisplay = (
   }
 };
 
-export const FieldLinearViewConfigIconButton = memo(({ nodeId, fieldName }: Props) => {
+export const InputFieldLinearViewConfigIconButton = memo(({ nodeId, fieldName }: Props) => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
-  const isExposed = useFieldIsExposed(nodeId, fieldName);
-  const linearViewConfig = useFieldLinearViewConfig(nodeId, fieldName);
+  const isExposed = useInputFieldIsExposed(nodeId, fieldName);
+  const linearViewConfig = useInputFieldLinearViewConfig(nodeId, fieldName);
   const onChangeNotesDisplay = useCallback(
     (e: ChangeEvent<HTMLSelectElement>) => {
       const notesDisplay = parseNotesDisplay(e.target.value);
@@ -82,4 +82,4 @@ export const FieldLinearViewConfigIconButton = memo(({ nodeId, fieldName }: Prop
   );
 });
 
-FieldLinearViewConfigIconButton.displayName = 'FieldLinearViewConfigIconButton';
+InputFieldLinearViewConfigIconButton.displayName = 'InputFieldLinearViewConfigIconButton';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButton.tsx
similarity index 86%
rename from invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton.tsx
rename to invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButton.tsx
index 3f581e0be34..23508f22cc3 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButton.tsx
@@ -10,7 +10,7 @@ import {
   Textarea,
 } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { useFieldNotes } from 'features/nodes/hooks/useFieldNotes';
+import { useInputFieldNotes } from 'features/nodes/hooks/useInputFieldNotes';
 import { fieldNotesChanged } from 'features/nodes/store/nodesSlice';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
@@ -23,10 +23,10 @@ type Props = {
   readOnly?: boolean;
 };
 
-export const FieldNotesIconButton = memo(({ nodeId, fieldName, readOnly }: Props) => {
+export const InputFieldNotesIconButton = memo(({ nodeId, fieldName, readOnly }: Props) => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
-  const notes = useFieldNotes(nodeId, fieldName);
+  const notes = useInputFieldNotes(nodeId, fieldName);
   const onChange = useCallback(
     (e: ChangeEvent<HTMLTextAreaElement>) => {
       dispatch(fieldNotesChanged({ nodeId, fieldName, val: e.target.value }));
@@ -75,4 +75,4 @@ export const FieldNotesIconButton = memo(({ nodeId, fieldName, readOnly }: Props
   );
 });
 
-FieldNotesIconButton.displayName = 'FieldNotesIconButton';
+InputFieldNotesIconButton.displayName = 'InputFieldNotesIconButton';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
index 998fc4ae416..67637947650 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
@@ -5,8 +5,8 @@ import ModelIdentifierFieldInputComponent from 'features/nodes/components/flow/n
 import { NumberFieldCollectionInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldCollectionInputComponent';
 import { StringFieldCollectionInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldCollectionInputComponent';
 import { StringGeneratorFieldInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/StringGeneratorFieldComponent';
-import { useFieldInputInstance } from 'features/nodes/hooks/useFieldInputInstance';
-import { useFieldInputTemplate } from 'features/nodes/hooks/useFieldInputTemplate';
+import { useInputFieldInstance } from 'features/nodes/hooks/useInputFieldInstance';
+import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate';
 import {
   isBoardFieldInputInstance,
   isBoardFieldInputTemplate,
@@ -110,9 +110,9 @@ type InputFieldProps = {
   fieldName: string;
 };
 
-const InputFieldRenderer = ({ nodeId, fieldName }: InputFieldProps) => {
-  const fieldInstance = useFieldInputInstance(nodeId, fieldName);
-  const fieldTemplate = useFieldInputTemplate(nodeId, fieldName);
+export const InputFieldRenderer = memo(({ nodeId, fieldName }: InputFieldProps) => {
+  const fieldInstance = useInputFieldInstance(nodeId, fieldName);
+  const fieldTemplate = useInputFieldTemplate(nodeId, fieldName);
 
   if (isStringFieldCollectionInputInstance(fieldInstance) && isStringFieldCollectionInputTemplate(fieldTemplate)) {
     return <StringFieldCollectionInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
@@ -258,10 +258,7 @@ const InputFieldRenderer = ({ nodeId, fieldName }: InputFieldProps) => {
     return <StringGeneratorFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
-  if (fieldTemplate) {
-    // Fallback for when there is no component for the type
-    return null;
-  }
-};
+  return null;
+});
 
-export default memo(InputFieldRenderer);
+InputFieldRenderer.displayName = 'InputFieldRenderer';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToDefaultValueIconButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToDefaultValueIconButton.tsx
new file mode 100644
index 00000000000..a147743af7c
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToDefaultValueIconButton.tsx
@@ -0,0 +1,30 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { useInputFieldDefaultValue } from 'features/nodes/hooks/useInputFieldDefaultValue';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiArrowCounterClockwiseBold } from 'react-icons/pi';
+
+type Props = {
+  nodeId: string;
+  fieldName: string;
+};
+
+export const InputFieldResetToDefaultValueIconButton = memo(({ nodeId, fieldName }: Props) => {
+  const { t } = useTranslation();
+  const { isValueChanged, resetToDefaultValue } = useInputFieldDefaultValue(nodeId, fieldName);
+
+  return (
+    <IconButton
+      variant="ghost"
+      tooltip={t('nodes.resetToDefaultValue')}
+      aria-label={t('nodes.resetToDefaultValue')}
+      icon={<PiArrowCounterClockwiseBold />}
+      pointerEvents="auto"
+      size="xs"
+      onClick={resetToDefaultValue}
+      isDisabled={!isValueChanged}
+    />
+  );
+});
+
+InputFieldResetToDefaultValueIconButton.displayName = 'InputFieldResetToDefaultValueIconButton';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToInitialValueIconButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToInitialValueIconButton.tsx
new file mode 100644
index 00000000000..3acfc24e7fb
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToInitialValueIconButton.tsx
@@ -0,0 +1,30 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { useInputFieldInitialLinearViewValue } from 'features/nodes/hooks/useInputFieldInitialLinearViewValue';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiArrowCounterClockwiseBold } from 'react-icons/pi';
+
+type Props = {
+  nodeId: string;
+  fieldName: string;
+};
+
+const InputFieldResetToInitialValueIconButton = ({ nodeId, fieldName }: Props) => {
+  const { t } = useTranslation();
+  const { isValueChanged, resetToInitialLinearViewValue } = useInputFieldInitialLinearViewValue(nodeId, fieldName);
+
+  return (
+    <IconButton
+      variant="ghost"
+      tooltip={t('nodes.resetToDefaultValue')}
+      aria-label={t('nodes.resetToDefaultValue')}
+      icon={<PiArrowCounterClockwiseBold />}
+      pointerEvents="auto"
+      size="xs"
+      onClick={resetToInitialLinearViewValue}
+      isDisabled={!isValueChanged}
+    />
+  );
+};
+
+export default memo(InputFieldResetToInitialValueIconButton);
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTitle.tsx
similarity index 73%
rename from invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx
rename to invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTitle.tsx
index d7690669e03..fc4857594ee 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTitle.tsx
@@ -1,37 +1,54 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import {
-  Editable,
-  EditableInput,
-  EditablePreview,
-  Flex,
-  forwardRef,
-  Tooltip,
-  useEditableControls,
-} from '@invoke-ai/ui-library';
+import { Editable, EditableInput, EditablePreview, Flex, Tooltip, useEditableControls } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { useFieldLabel } from 'features/nodes/hooks/useFieldLabel';
-import { useFieldTemplateTitle } from 'features/nodes/hooks/useFieldTemplateTitle';
+import { InputFieldTooltip } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldTooltip';
+import { useInputFieldLabel } from 'features/nodes/hooks/useInputFieldLabel';
+import { useInputFieldTemplateTitle } from 'features/nodes/hooks/useInputFieldTemplateTitle';
 import { fieldLabelChanged } from 'features/nodes/store/nodesSlice';
 import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants';
 import type { MouseEvent } from 'react';
 import { memo, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import FieldTooltipContent from './FieldTooltipContent';
+const editablePreviewStyles: SystemStyleObject = {
+  p: 0,
+  fontWeight: 'semibold',
+  textAlign: 'left',
+  color: 'base.300',
+  _hover: {
+    fontWeight: 'semibold !important',
+  },
+  '&[data-is-invalid="true"]': {
+    color: 'error.300',
+  },
+  '&[data-is-disabled="true"]': {
+    opacity: 0.5,
+  },
+};
+
+const editableInputStyles: SystemStyleObject = {
+  p: 0,
+  w: 'full',
+  fontWeight: 'semibold',
+  color: 'base.100',
+  _focusVisible: {
+    p: 0,
+    textAlign: 'left',
+    boxShadow: 'none',
+  },
+};
 
 interface Props {
   nodeId: string;
   fieldName: string;
-  kind: 'inputs' | 'outputs';
   isInvalid?: boolean;
-  withTooltip?: boolean;
-  shouldDim?: boolean;
+  isDisabled?: boolean;
 }
 
-const EditableFieldTitle = forwardRef((props: Props, ref) => {
-  const { nodeId, fieldName, kind, isInvalid = false, withTooltip = false, shouldDim = false } = props;
-  const label = useFieldLabel(nodeId, fieldName);
-  const fieldTemplateTitle = useFieldTemplateTitle(nodeId, fieldName, kind);
+export const InputFieldTitle = memo((props: Props) => {
+  const { nodeId, fieldName, isInvalid, isDisabled } = props;
+  const label = useInputFieldLabel(nodeId, fieldName);
+  const fieldTemplateTitle = useInputFieldTemplateTitle(nodeId, fieldName);
   const { t } = useTranslation();
 
   const dispatch = useAppDispatch();
@@ -62,7 +79,6 @@ const EditableFieldTitle = forwardRef((props: Props, ref) => {
       onChange={handleChange}
       onSubmit={handleSubmit}
       as={Flex}
-      ref={ref}
       position="relative"
       overflow="hidden"
       alignItems="center"
@@ -71,15 +87,14 @@ const EditableFieldTitle = forwardRef((props: Props, ref) => {
       w="full"
     >
       <Tooltip
-        label={withTooltip ? <FieldTooltipContent nodeId={nodeId} fieldName={fieldName} kind="inputs" /> : undefined}
+        label={<InputFieldTooltip nodeId={nodeId} fieldName={fieldName} />}
         openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
       >
         <EditablePreview
-          fontWeight="semibold"
           sx={editablePreviewStyles}
           noOfLines={1}
-          color={isInvalid ? 'error.300' : 'base.300'}
-          opacity={shouldDim ? 0.5 : 1}
+          data-is-invalid={isInvalid}
+          data-is-disabled={isDisabled}
         />
       </Tooltip>
       <EditableInput className="nodrag" sx={editableInputStyles} />
@@ -88,26 +103,7 @@ const EditableFieldTitle = forwardRef((props: Props, ref) => {
   );
 });
 
-const editableInputStyles: SystemStyleObject = {
-  p: 0,
-  w: 'full',
-  fontWeight: 'semibold',
-  color: 'base.100',
-  _focusVisible: {
-    p: 0,
-    textAlign: 'left',
-    boxShadow: 'none',
-  },
-};
-const editablePreviewStyles: SystemStyleObject = {
-  p: 0,
-  textAlign: 'left',
-  _hover: {
-    fontWeight: 'semibold !important',
-  },
-};
-
-export default memo(EditableFieldTitle);
+InputFieldTitle.displayName = 'InputFieldTitle';
 
 const EditableControls = memo(() => {
   const { isEditing, getEditButtonProps } = useEditableControls();
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTooltip.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTooltip.tsx
new file mode 100644
index 00000000000..324a83d7e35
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTooltip.tsx
@@ -0,0 +1,49 @@
+import { Flex, Text } from '@invoke-ai/ui-library';
+import { useInputFieldInstance } from 'features/nodes/hooks/useInputFieldInstance';
+import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate';
+import { useFieldTypeName } from 'features/nodes/hooks/usePrettyFieldType';
+import { startCase } from 'lodash-es';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface Props {
+  nodeId: string;
+  fieldName: string;
+}
+
+export const InputFieldTooltip = memo(({ nodeId, fieldName }: Props) => {
+  const { t } = useTranslation();
+
+  const fieldInstance = useInputFieldInstance(nodeId, fieldName);
+  const fieldTemplate = useInputFieldTemplate(nodeId, fieldName);
+  const fieldTypeName = useFieldTypeName(fieldTemplate.type);
+
+  const fieldTitle = useMemo(() => {
+    if (fieldInstance.label && fieldTemplate.title) {
+      return `${fieldInstance.label} (${fieldTemplate.title})`;
+    }
+
+    if (fieldInstance.label && !fieldTemplate.title) {
+      return fieldInstance.label;
+    }
+
+    return fieldTemplate.title;
+  }, [fieldInstance, fieldTemplate]);
+
+  return (
+    <Flex flexDir="column">
+      <Text fontWeight="semibold">{fieldTitle}</Text>
+      <Text opacity={0.7} fontStyle="oblique 5deg">
+        {fieldTemplate.description}
+      </Text>
+      <Text>
+        {t('parameters.type')}: {fieldTypeName}
+      </Text>
+      <Text>
+        {t('common.input')}: {startCase(fieldTemplate.input)}
+      </Text>
+    </Flex>
+  );
+});
+
+InputFieldTooltip.displayName = 'FieldTooltipContent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldUnknownPlaceholder.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldUnknownPlaceholder.tsx
index 18076735482..615034ea323 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldUnknownPlaceholder.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldUnknownPlaceholder.tsx
@@ -1,6 +1,6 @@
 import { FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { InputFieldWrapper } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldWrapper';
-import { useFieldInputName } from 'features/nodes/hooks/useFieldInputName';
+import { useInputFieldName } from 'features/nodes/hooks/useInputFieldName';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -11,10 +11,10 @@ type Props = {
 
 export const InputFieldUnknownPlaceholder = memo(({ nodeId, fieldName }: Props) => {
   const { t } = useTranslation();
-  const name = useFieldInputName(nodeId, fieldName);
+  const name = useInputFieldName(nodeId, fieldName);
 
   return (
-    <InputFieldWrapper shouldDim={false}>
+    <InputFieldWrapper>
       <FormControl isInvalid={true} alignItems="stretch" justifyContent="center" gap={2} h="full" w="full">
         <FormLabel display="flex" mb={0} px={1} py={2} gap={2}>
           {t('nodes.unknownInput', { name })}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode.tsx
new file mode 100644
index 00000000000..e7c1e1e87fa
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode.tsx
@@ -0,0 +1,31 @@
+import { Flex, FormLabel, Spacer } from '@invoke-ai/ui-library';
+import { InputFieldNotesIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButton';
+import { InputFieldRenderer } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer';
+import InputFieldResetToInitialValueIconButton from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToInitialValueIconButton';
+import { useInputFieldLabel } from 'features/nodes/hooks/useInputFieldLabel';
+import { useInputFieldTemplateTitle } from 'features/nodes/hooks/useInputFieldTemplateTitle';
+import { memo } from 'react';
+
+type Props = {
+  nodeId: string;
+  fieldName: string;
+};
+
+export const InputFieldViewMode = memo(({ nodeId, fieldName }: Props) => {
+  const label = useInputFieldLabel(nodeId, fieldName);
+  const fieldTemplateTitle = useInputFieldTemplateTitle(nodeId, fieldName);
+
+  return (
+    <Flex position="relative" w="full" gap="2" flexDir="column">
+      <Flex alignItems="center" gap={1}>
+        <FormLabel fontSize="sm">{label || fieldTemplateTitle}</FormLabel>
+        <Spacer />
+        <InputFieldResetToInitialValueIconButton nodeId={nodeId} fieldName={fieldName} />
+        <InputFieldNotesIconButton nodeId={nodeId} fieldName={fieldName} readOnly />
+      </Flex>
+      <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
+    </Flex>
+  );
+});
+
+InputFieldViewMode.displayName = 'InputFieldViewMode';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewSimple.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewSimple.tsx
deleted file mode 100644
index 0d3fcf463ef..00000000000
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewSimple.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Flex, FormLabel, Spacer } from '@invoke-ai/ui-library';
-import { FieldNotesIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldNotesIconButton';
-import FieldResetToInitialLinearViewValueButton from 'features/nodes/components/flow/nodes/Invocation/fields/FieldResetToInitialLinearViewValueButton';
-import InputFieldRenderer from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer';
-import { useFieldLabel } from 'features/nodes/hooks/useFieldLabel';
-import { useFieldTemplateTitle } from 'features/nodes/hooks/useFieldTemplateTitle';
-import { memo } from 'react';
-
-type Props = {
-  nodeId: string;
-  fieldName: string;
-};
-
-export const InputFieldViewSimple = memo(({ nodeId, fieldName }: Props) => {
-  const label = useFieldLabel(nodeId, fieldName);
-  const fieldTemplateTitle = useFieldTemplateTitle(nodeId, fieldName, 'inputs');
-
-  return (
-    <Flex position="relative" w="full" gap="2" flexDir="column">
-      <Flex alignItems="center" gap={1}>
-        <FormLabel fontSize="sm">{label || fieldTemplateTitle}</FormLabel>
-        <Spacer />
-        <FieldResetToInitialLinearViewValueButton nodeId={nodeId} fieldName={fieldName} />
-        <FieldNotesIconButton nodeId={nodeId} fieldName={fieldName} readOnly />
-      </Flex>
-      <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
-    </Flex>
-  );
-});
-
-InputFieldViewSimple.displayName = 'InputFieldViewSimple';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldWrapper.tsx
index d7cc9d5fa5e..5c5046b0868 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldWrapper.tsx
@@ -12,21 +12,10 @@ const sx = {
   transitionDuration: '0.1s',
   w: 'full',
   h: 'full',
-  '&[data-should-dim="true"]': {
-    opacity: 0.5,
-  },
 } satisfies SystemStyleObject;
 
-type InputFieldWrapperProps = PropsWithChildren<{
-  shouldDim: boolean;
-}>;
-
-export const InputFieldWrapper = memo(({ shouldDim, children }: InputFieldWrapperProps) => {
-  return (
-    <Flex sx={sx} data-should-dim={shouldDim}>
-      {children}
-    </Flex>
-  );
+export const InputFieldWrapper = memo(({ children }: PropsWithChildren) => {
+  return <Flex sx={sx}>{children}</Flex>;
 });
 
 InputFieldWrapper.displayName = 'InputFieldWrapper';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldGate.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldGate.tsx
index 81951959e23..2b50e357063 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldGate.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldGate.tsx
@@ -1,5 +1,5 @@
 import { OutputFieldUnknownPlaceholder } from 'features/nodes/components/flow/nodes/Invocation/fields/OutputFieldUnknownPlaceholder';
-import { useFieldOutputTemplateExists } from 'features/nodes/hooks/useFieldOutputTemplateExists';
+import { useOutputFieldTemplateExists } from 'features/nodes/hooks/useOutputFieldTemplateExists';
 import type { PropsWithChildren } from 'react';
 import { memo } from 'react';
 
@@ -9,7 +9,7 @@ type Props = PropsWithChildren<{
 }>;
 
 export const OutputFieldGate = memo(({ nodeId, fieldName, children }: Props) => {
-  const hasTemplate = useFieldOutputTemplateExists(nodeId, fieldName);
+  const hasTemplate = useOutputFieldTemplateExists(nodeId, fieldName);
 
   if (!hasTemplate) {
     return <OutputFieldUnknownPlaceholder nodeId={nodeId} fieldName={fieldName} />;
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldNodesEditorView.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldNodesEditorView.tsx
index 85ee48cde63..6fac1f148f1 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldNodesEditorView.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldNodesEditorView.tsx
@@ -1,37 +1,32 @@
-import { FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library';
 import { FieldHandle } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldHandle';
+import { OutputFieldTitle } from 'features/nodes/components/flow/nodes/Invocation/fields/OutputFieldTitle';
 import { OutputFieldWrapper } from 'features/nodes/components/flow/nodes/Invocation/fields/OutputFieldWrapper';
-import { useConnectionState } from 'features/nodes/hooks/useConnectionState';
-import { useFieldOutputTemplate } from 'features/nodes/hooks/useFieldOutputTemplate';
-import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants';
+import { useOutputFieldConnectionState } from 'features/nodes/hooks/useOutputFieldConnectionState';
+import { useOutputFieldIsConnected } from 'features/nodes/hooks/useOutputFieldIsConnected';
+import { useOutputFieldTemplate } from 'features/nodes/hooks/useOutputFieldTemplate';
 import type { PropsWithChildren } from 'react';
 import { memo } from 'react';
 
-import FieldTooltipContent from './FieldTooltipContent';
-
 type Props = PropsWithChildren<{
   nodeId: string;
   fieldName: string;
 }>;
 
 export const OutputFieldNodesEditorView = memo(({ nodeId, fieldName }: Props) => {
-  const fieldTemplate = useFieldOutputTemplate(nodeId, fieldName);
-
-  const { isConnected, isConnectionInProgress, isConnectionStartField, validationResult, shouldDim } =
-    useConnectionState(nodeId, fieldName, 'outputs');
+  const fieldTemplate = useOutputFieldTemplate(nodeId, fieldName);
+  const isConnected = useOutputFieldIsConnected(nodeId, fieldName);
+  const { isConnectionInProgress, isConnectionStartField, validationResult } = useOutputFieldConnectionState(
+    nodeId,
+    fieldName
+  );
 
   return (
-    <OutputFieldWrapper shouldDim={shouldDim}>
-      <Tooltip
-        label={<FieldTooltipContent nodeId={nodeId} fieldName={fieldName} kind="outputs" />}
-        openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
-        placement="top"
-        shouldWrapChildren
-      >
-        <FormControl isDisabled={isConnected}>
-          <FormLabel mb={0}>{fieldTemplate?.title}</FormLabel>
-        </FormControl>
-      </Tooltip>
+    <OutputFieldWrapper>
+      <OutputFieldTitle
+        nodeId={nodeId}
+        fieldName={fieldName}
+        isDisabled={(isConnectionInProgress && !validationResult.isValid && !isConnectionStartField) || isConnected}
+      />
       <FieldHandle
         handleType="source"
         fieldTemplate={fieldTemplate}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldTitle.tsx
new file mode 100644
index 00000000000..0dcf3a501c6
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldTitle.tsx
@@ -0,0 +1,43 @@
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Text, Tooltip } from '@invoke-ai/ui-library';
+import { useOutputFieldTemplate } from 'features/nodes/hooks/useOutputFieldTemplate';
+import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants';
+import type { PropsWithChildren } from 'react';
+import { memo } from 'react';
+
+import { OutputFieldTooltip } from './OutputFieldTooltip';
+
+const sx = {
+  fontSize: 'sm',
+  color: 'base.300',
+  fontWeight: 'semibold',
+  pe: 2,
+  '&[data-is-disabled="true"]': {
+    opacity: 0.5,
+  },
+} satisfies SystemStyleObject;
+
+type Props = PropsWithChildren<{
+  nodeId: string;
+  fieldName: string;
+  isDisabled?: boolean;
+}>;
+
+export const OutputFieldTitle = memo(({ nodeId, fieldName, isDisabled }: Props) => {
+  const fieldTemplate = useOutputFieldTemplate(nodeId, fieldName);
+
+  return (
+    <Tooltip
+      label={<OutputFieldTooltip nodeId={nodeId} fieldName={fieldName} />}
+      openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
+      placement="top"
+      shouldWrapChildren
+    >
+      <Text data-is-disabled={isDisabled} sx={sx}>
+        {fieldTemplate.title}
+      </Text>
+    </Tooltip>
+  );
+});
+
+OutputFieldTitle.displayName = 'OutputFieldTitle';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldTooltip.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldTooltip.tsx
new file mode 100644
index 00000000000..e034720e46e
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldTooltip.tsx
@@ -0,0 +1,29 @@
+import { Flex, Text } from '@invoke-ai/ui-library';
+import { useOutputFieldTemplate } from 'features/nodes/hooks/useOutputFieldTemplate';
+import { useFieldTypeName } from 'features/nodes/hooks/usePrettyFieldType';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+interface Props {
+  nodeId: string;
+  fieldName: string;
+}
+
+export const OutputFieldTooltip = memo(({ nodeId, fieldName }: Props) => {
+  const fieldTemplate = useOutputFieldTemplate(nodeId, fieldName);
+  const fieldTypeName = useFieldTypeName(fieldTemplate.type);
+  const { t } = useTranslation();
+
+  return (
+    <Flex flexDir="column">
+      <Text fontWeight="semibold">{fieldTemplate.title}</Text>
+      <Text opacity={0.7} fontStyle="oblique 5deg">
+        {fieldTemplate.description}
+      </Text>
+      <Text>
+        {t('parameters.type')}: {fieldTypeName}
+      </Text>
+    </Flex>
+  );
+});
+
+OutputFieldTooltip.displayName = 'OutputFieldTooltip';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldUnknownPlaceholder.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldUnknownPlaceholder.tsx
index 20e69a227a3..9de792b9e56 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldUnknownPlaceholder.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldUnknownPlaceholder.tsx
@@ -1,6 +1,6 @@
 import { FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { OutputFieldWrapper } from 'features/nodes/components/flow/nodes/Invocation/fields/OutputFieldWrapper';
-import { useFieldOutputName } from 'features/nodes/hooks/useFieldOutputName';
+import { useOutputFieldName } from 'features/nodes/hooks/useOutputFieldName';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -11,10 +11,10 @@ type Props = {
 
 export const OutputFieldUnknownPlaceholder = memo(({ nodeId, fieldName }: Props) => {
   const { t } = useTranslation();
-  const name = useFieldOutputName(nodeId, fieldName);
+  const name = useOutputFieldName(nodeId, fieldName);
 
   return (
-    <OutputFieldWrapper shouldDim={false}>
+    <OutputFieldWrapper>
       <FormControl isInvalid={true} alignItems="stretch" justifyContent="space-between" gap={2} h="full" w="full">
         <FormLabel display="flex" alignItems="center" h="full" color="error.300" mb={0} px={1} gap={2}>
           {t('nodes.unknownOutput', { name })}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldWrapper.tsx
index fffbeb7c738..dd45d25368d 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputFieldWrapper.tsx
@@ -11,19 +11,8 @@ const sx = {
   transitionProperty: 'opacity',
   transitionDuration: '0.1s',
   justifyContent: 'flex-end',
-  '&[data-should-dim="true"]': {
-    opacity: 0.5,
-  },
 } satisfies SystemStyleObject;
 
-type OutputFieldWrapperProps = PropsWithChildren<{
-  shouldDim: boolean;
-}>;
-
-export const OutputFieldWrapper = memo(({ shouldDim, children }: OutputFieldWrapperProps) => (
-  <Flex sx={sx} data-should-dim={shouldDim}>
-    {children}
-  </Flex>
-));
+export const OutputFieldWrapper = memo(({ children }: PropsWithChildren) => <Flex sx={sx}>{children}</Flex>);
 
 OutputFieldWrapper.displayName = 'OutputFieldWrapper';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent.tsx
index d011a7ea76b..8a36d3044c8 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent.tsx
@@ -10,7 +10,7 @@ import { addImagesToNodeImageFieldCollectionDndTarget } from 'features/dnd/dnd';
 import { DndDropTarget } from 'features/dnd/DndDropTarget';
 import { DndImage } from 'features/dnd/DndImage';
 import { DndImageIcon } from 'features/dnd/DndImageIcon';
-import { useFieldIsInvalid } from 'features/nodes/hooks/useFieldIsInvalid';
+import { useInputFieldIsInvalid } from 'features/nodes/hooks/useInputFieldIsInvalid';
 import { fieldImageCollectionValueChanged } from 'features/nodes/store/nodesSlice';
 import type { ImageField } from 'features/nodes/types/common';
 import type { ImageFieldCollectionInputInstance, ImageFieldCollectionInputTemplate } from 'features/nodes/types/field';
@@ -39,7 +39,7 @@ export const ImageFieldCollectionInputComponent = memo(
     const { nodeId, field } = props;
     const store = useAppStore();
 
-    const isInvalid = useFieldIsInvalid(nodeId, field.name);
+    const isInvalid = useInputFieldIsInvalid(nodeId, field.name);
 
     const dndTargetData = useMemo<AddImagesToNodeImageFieldCollection>(
       () =>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldCollectionInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldCollectionInputComponent.tsx
index 8f48f01206e..f39abde93d4 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldCollectionInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldCollectionInputComponent.tsx
@@ -12,7 +12,7 @@ import {
 import { NUMPY_RAND_MAX } from 'app/constants';
 import { useAppStore } from 'app/store/nanostores/store';
 import { getOverlayScrollbarsParams, overlayScrollbarsStyles } from 'common/components/OverlayScrollbars/constants';
-import { useFieldIsInvalid } from 'features/nodes/hooks/useFieldIsInvalid';
+import { useInputFieldIsInvalid } from 'features/nodes/hooks/useInputFieldIsInvalid';
 import { fieldNumberCollectionValueChanged } from 'features/nodes/store/nodesSlice';
 import type {
   FloatFieldCollectionInputInstance,
@@ -48,7 +48,7 @@ export const NumberFieldCollectionInputComponent = memo(
     const store = useAppStore();
     const { t } = useTranslation();
 
-    const isInvalid = useFieldIsInvalid(nodeId, field.name);
+    const isInvalid = useInputFieldIsInvalid(nodeId, field.name);
     const isIntegerField = useMemo(() => fieldTemplate.type.name === 'IntegerField', [fieldTemplate.type]);
 
     const onRemoveNumber = useCallback(
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldCollectionInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldCollectionInputComponent.tsx
index 16e04af51cc..ee85fc7d95b 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldCollectionInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldCollectionInputComponent.tsx
@@ -2,7 +2,7 @@ import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Button, Divider, Flex, FormLabel, Grid, GridItem, IconButton, Input } from '@invoke-ai/ui-library';
 import { useAppStore } from 'app/store/nanostores/store';
 import { getOverlayScrollbarsParams, overlayScrollbarsStyles } from 'common/components/OverlayScrollbars/constants';
-import { useFieldIsInvalid } from 'features/nodes/hooks/useFieldIsInvalid';
+import { useInputFieldIsInvalid } from 'features/nodes/hooks/useInputFieldIsInvalid';
 import { fieldStringCollectionValueChanged } from 'features/nodes/store/nodesSlice';
 import type {
   StringFieldCollectionInputInstance,
@@ -32,7 +32,7 @@ export const StringFieldCollectionInputComponent = memo(
     const { t } = useTranslation();
     const store = useAppStore();
 
-    const isInvalid = useFieldIsInvalid(nodeId, field.name);
+    const isInvalid = useInputFieldIsInvalid(nodeId, field.name);
 
     const onRemoveString = useCallback(
       (index: number) => {
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
index 7ae3872864e..18a7c050731 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
@@ -2,7 +2,7 @@ import type { ChakraProps } from '@invoke-ai/ui-library';
 import { Box, useGlobalMenuClose, useToken } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHooks';
 import NodeSelectionOverlay from 'common/components/NodeSelectionOverlay';
-import { useExecutionState } from 'features/nodes/hooks/useExecutionState';
+import { useNodeExecutionState } from 'features/nodes/hooks/useNodeExecutionState';
 import { useMouseOverNode } from 'features/nodes/hooks/useMouseOverNode';
 import { nodesChanged } from 'features/nodes/store/nodesSlice';
 import { selectNodes } from 'features/nodes/store/selectors';
@@ -24,7 +24,7 @@ const NodeWrapper = (props: NodeWrapperProps) => {
   const store = useAppStore();
   const { isMouseOverNode, handleMouseOut, handleMouseOver } = useMouseOverNode(nodeId);
 
-  const executionState = useExecutionState(nodeId);
+  const executionState = useNodeExecutionState(nodeId);
   const isInProgress = executionState?.status === zNodeStatus.enum.IN_PROGRESS;
 
   const [nodeInProgress, shadowsXl, shadowsBase] = useToken('shadows', [
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/LinearViewLeftPanelContent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/EditModeLeftPanelContent.tsx
similarity index 92%
rename from invokeai/frontend/web/src/features/nodes/components/sidePanel/LinearViewLeftPanelContent.tsx
rename to invokeai/frontend/web/src/features/nodes/components/sidePanel/EditModeLeftPanelContent.tsx
index dc13454a987..4b4f8b86b90 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/LinearViewLeftPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/EditModeLeftPanelContent.tsx
@@ -13,7 +13,7 @@ import WorkflowFieldsLinearViewPanel from './workflow/WorkflowPanel';
 
 const panelGroupStyles: CSSProperties = { height: '100%', width: '100%' };
 
-export const LinearViewLeftPanelContent = memo(() => {
+export const EditModeLeftPanelContent = memo(() => {
   const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
 
   const handleDoubleClickHandle = useCallback(() => {
@@ -46,4 +46,4 @@ export const LinearViewLeftPanelContent = memo(() => {
   );
 });
 
-LinearViewLeftPanelContent.displayName = 'LinearViewLeftPanelContent';
+EditModeLeftPanelContent.displayName = 'EditModeLeftPanelContent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowsTabLeftPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowsTabLeftPanel.tsx
index 68373a5dc12..84d630372dd 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowsTabLeftPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowsTabLeftPanel.tsx
@@ -2,12 +2,12 @@ import 'reactflow/dist/style.css';
 
 import { Box, Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { LinearViewLeftPanelContent } from 'features/nodes/components/sidePanel/LinearViewLeftPanelContent';
+import { EditModeLeftPanelContent } from 'features/nodes/components/sidePanel/EditModeLeftPanelContent';
 import { useWorkflowListMenu } from 'features/nodes/store/workflowListMenu';
 import { selectWorkflowMode } from 'features/nodes/store/workflowSlice';
 import { memo } from 'react';
 
-import { SimpleViewLeftPanelContent } from './viewMode/SimpleViewLeftPanelContent';
+import { ViewModeLeftPanelContent } from './viewMode/ViewModeLeftPanelContent';
 import { WorkflowListMenu } from './WorkflowListMenu/WorkflowListMenu';
 import { WorkflowListMenuTrigger } from './WorkflowListMenu/WorkflowListMenuTrigger';
 
@@ -21,8 +21,8 @@ const WorkflowsTabLeftPanel = () => {
       <Flex w="full" h="full" position="relative">
         <Box position="absolute" top={0} left={0} right={0} bottom={0}>
           {workflowListMenu.isOpen && <WorkflowListMenu />}
-          {mode === 'view' && <SimpleViewLeftPanelContent />}
-          {mode === 'edit' && <LinearViewLeftPanelContent />}
+          {mode === 'view' && <ViewModeLeftPanelContent />}
+          {mode === 'edit' && <EditModeLeftPanelContent />}
         </Box>
       </Flex>
     </Flex>
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx
index 3ed2189ff7b..f4796893aa6 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx
@@ -4,7 +4,8 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
-import NotesTextarea from 'features/nodes/components/flow/nodes/Invocation/NotesTextarea';
+import { InvocationNodeNotesTextarea } from 'features/nodes/components/flow/nodes/Invocation/InvocationNodeNotesTextarea';
+import { useNodeIsInvocationNode } from 'features/nodes/hooks/useNodeIsInvocationNode';
 import { useNodeNeedsUpdate } from 'features/nodes/hooks/useNodeNeedsUpdate';
 import { $templates } from 'features/nodes/store/nodesSlice';
 import { selectLastSelectedNode, selectNodesSlice } from 'features/nodes/store/selectors';
@@ -55,6 +56,7 @@ type ContentProps = {
 const Content = memo((props: ContentProps) => {
   const { t } = useTranslation();
   const needsUpdate = useNodeNeedsUpdate(props.nodeId);
+  const isInvocationNode = useNodeIsInvocationNode(props.nodeId);
   return (
     <Box position="relative" w="full" h="full">
       <ScrollableContent>
@@ -74,7 +76,7 @@ const Content = memo((props: ContentProps) => {
               </Text>
             </FormControl>
           </HStack>
-          <NotesTextarea nodeId={props.nodeId} />
+          {isInvocationNode && <InvocationNodeNotesTextarea nodeId={props.nodeId} />}
         </Flex>
       </ScrollableContent>
     </Box>
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx
index 048276f5c08..9f032c1249c 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx
@@ -5,7 +5,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import DataViewer from 'features/gallery/components/ImageMetadataViewer/DataViewer';
-import { useExecutionState } from 'features/nodes/hooks/useExecutionState';
+import { useNodeExecutionState } from 'features/nodes/hooks/useNodeExecutionState';
 import { $templates } from 'features/nodes/store/nodesSlice';
 import { selectLastSelectedNode, selectNodesSlice } from 'features/nodes/store/selectors';
 import { isInvocationNode } from 'features/nodes/types/invocation';
@@ -35,7 +35,7 @@ const InspectorOutputsTab = () => {
     [templates]
   );
   const data = useAppSelector(selector);
-  const nes = useExecutionState(data?.nodeId);
+  const nes = useNodeExecutionState(data?.nodeId);
   const { t } = useTranslation();
 
   if (!data || !nes) {
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/SimpleViewLeftPanelContent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/ViewModeLeftPanelContent.tsx
similarity index 76%
rename from invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/SimpleViewLeftPanelContent.tsx
rename to invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/ViewModeLeftPanelContent.tsx
index 05048dbc5f9..25ee7420200 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/SimpleViewLeftPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/ViewModeLeftPanelContent.tsx
@@ -4,7 +4,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { InputFieldGate } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate';
-import { InputFieldViewSimple } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewSimple';
+import { InputFieldViewMode } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode';
 import { selectWorkflowSlice } from 'features/nodes/store/workflowSlice';
 import { t } from 'i18next';
 import { memo } from 'react';
@@ -14,20 +14,20 @@ import { EmptyState } from './EmptyState';
 
 const selectExposedFields = createMemoizedSelector(selectWorkflowSlice, (workflow) => workflow.exposedFields);
 
-export const SimpleViewLeftPanelContent = memo(() => {
+export const ViewModeLeftPanelContent = memo(() => {
   return (
     <Box position="relative" w="full" h="full">
       <ScrollableContent>
         <Flex position="relative" flexDir="column" alignItems="flex-start" p={1} gap={2} w="full" h="full">
-          <SimpleViewLeftPanelContentInner />
+          <ViewModeLeftPanelContentInner />
         </Flex>
       </ScrollableContent>
     </Box>
   );
 });
-SimpleViewLeftPanelContent.displayName = 'SimpleViewLeftPanelContent';
+ViewModeLeftPanelContent.displayName = 'ViewModeLeftPanelContent';
 
-const SimpleViewLeftPanelContentInner = memo(() => {
+const ViewModeLeftPanelContentInner = memo(() => {
   const { isLoading } = useGetOpenAPISchemaQuery();
   const exposedFields = useAppSelector(selectExposedFields);
 
@@ -43,10 +43,10 @@ const SimpleViewLeftPanelContentInner = memo(() => {
     <>
       {exposedFields.map(({ nodeId, fieldName }) => (
         <InputFieldGate key={`${nodeId}.${fieldName}`} nodeId={nodeId} fieldName={fieldName}>
-          <InputFieldViewSimple nodeId={nodeId} fieldName={fieldName} />
+          <InputFieldViewMode nodeId={nodeId} fieldName={fieldName} />
         </InputFieldGate>
       ))}
     </>
   );
 });
-SimpleViewLeftPanelContentInner.displayName = ' SimpleViewLeftPanelContentInner';
+ViewModeLeftPanelContentInner.displayName = ' ViewModeLeftPanelContentInner';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
index 80726470e78..7270bd72645 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
@@ -10,8 +10,8 @@ import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
 import { deepClone } from 'common/util/deepClone';
 import { singleWorkflowFieldDndSource } from 'features/dnd/dnd';
 import { triggerPostMoveFlash } from 'features/dnd/util';
+import { InputFieldEditModeLinear } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeLinear';
 import { InputFieldGate } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate';
-import { InputFieldViewLinear } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewLinear';
 import { selectWorkflowSlice, workflowExposedFieldsReordered } from 'features/nodes/store/workflowSlice';
 import type { FieldIdentifier } from 'features/nodes/types/field';
 import { isEqual } from 'lodash-es';
@@ -143,7 +143,7 @@ const FieldListInnerContent = memo(({ fields }: { fields: FieldIdentifier[] }) =
     <>
       {fields.map(({ nodeId, fieldName }) => (
         <InputFieldGate key={`${nodeId}.${fieldName}`} nodeId={nodeId} fieldName={fieldName}>
-          <InputFieldViewLinear nodeId={nodeId} fieldName={fieldName} />
+          <InputFieldEditModeLinear nodeId={nodeId} fieldName={fieldName} />
         </InputFieldGate>
       ))}
     </>
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useBatchGroupId.ts b/invokeai/frontend/web/src/features/nodes/hooks/useBatchGroupId.ts
index 9ae03fa39ad..a41f4ca04ec 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useBatchGroupId.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useBatchGroupId.ts
@@ -1,19 +1,24 @@
-import { useNode } from 'features/nodes/hooks/useNode';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectNode, selectNodesSlice } from 'features/nodes/store/selectors';
 import { isBatchNode, isInvocationNode } from 'features/nodes/types/invocation';
 import { useMemo } from 'react';
 
 export const useBatchGroupId = (nodeId: string) => {
-  const node = useNode(nodeId);
+  const selector = useMemo(() => {
+    return createSelector(selectNodesSlice, (nodes) => {
+      const node = selectNode(nodes, nodeId);
+      if (!isInvocationNode(node)) {
+        return;
+      }
+      if (!isBatchNode(node)) {
+        return;
+      }
+      return node.data.inputs['batch_group_id']?.value as string;
+    });
+  }, [nodeId]);
 
-  const batchGroupId = useMemo(() => {
-    if (!isInvocationNode(node)) {
-      return;
-    }
-    if (!isBatchNode(node)) {
-      return;
-    }
-    return node.data.inputs['batch_group_id']?.value as string;
-  }, [node]);
+  const batchGroupId = useAppSelector(selector);
 
   return batchGroupId;
 };
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useConnectionState.ts b/invokeai/frontend/web/src/features/nodes/hooks/useConnectionState.ts
deleted file mode 100644
index 87438a3c077..00000000000
--- a/invokeai/frontend/web/src/features/nodes/hooks/useConnectionState.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useStore } from '@nanostores/react';
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store/storeHooks';
-import { $edgePendingUpdate, $pendingConnection, $templates } from 'features/nodes/store/nodesSlice';
-import { selectNodesSlice } from 'features/nodes/store/selectors';
-import { makeConnectionErrorSelector } from 'features/nodes/store/util/makeConnectionErrorSelector';
-import { useMemo } from 'react';
-
-export const useConnectionState = (nodeId: string, fieldName: string, kind: 'inputs' | 'outputs') => {
-  const pendingConnection = useStore($pendingConnection);
-  const templates = useStore($templates);
-  const edgePendingUpdate = useStore($edgePendingUpdate);
-
-  const selectIsConnected = useMemo(
-    () =>
-      createSelector(selectNodesSlice, (nodes) => {
-        const firstConnectedEdge = nodes.edges.find((edge) => {
-          return (
-            (kind === 'inputs' ? edge.target : edge.source) === nodeId &&
-            (kind === 'inputs' ? edge.targetHandle : edge.sourceHandle) === fieldName
-          );
-        });
-        return firstConnectedEdge !== undefined;
-      }),
-    [fieldName, kind, nodeId]
-  );
-
-  const selectValidationResult = useMemo(
-    () => makeConnectionErrorSelector(templates, nodeId, fieldName, kind === 'inputs' ? 'target' : 'source'),
-    [templates, nodeId, fieldName, kind]
-  );
-
-  const isConnected = useAppSelector(selectIsConnected);
-  const isConnectionInProgress = useMemo(() => Boolean(pendingConnection), [pendingConnection]);
-  const isConnectionStartField = useMemo(() => {
-    if (!pendingConnection) {
-      return false;
-    }
-    return (
-      pendingConnection.nodeId === nodeId &&
-      pendingConnection.handleId === fieldName &&
-      pendingConnection.fieldTemplate.fieldKind === { inputs: 'input', outputs: 'output' }[kind]
-    );
-  }, [fieldName, kind, nodeId, pendingConnection]);
-  const validationResult = useAppSelector((s) => selectValidationResult(s, pendingConnection, edgePendingUpdate));
-
-  const shouldDim = useMemo(
-    () => Boolean(isConnectionInProgress && !validationResult.isValid && !isConnectionStartField),
-    [validationResult, isConnectionInProgress, isConnectionStartField]
-  );
-
-  return {
-    isConnected,
-    isConnectionInProgress,
-    isConnectionStartField,
-    validationResult,
-    shouldDim,
-  };
-};
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldTemplate.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldTemplate.ts
deleted file mode 100644
index 1e1c7a4dd84..00000000000
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldTemplate.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useStore } from '@nanostores/react';
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store/storeHooks';
-import { $templates } from 'features/nodes/store/nodesSlice';
-import { selectInvocationNodeType, selectNodesSlice } from 'features/nodes/store/selectors';
-import type { FieldInputTemplate, FieldOutputTemplate } from 'features/nodes/types/field';
-import { useMemo } from 'react';
-import { assert } from 'tsafe';
-
-export const useFieldTemplate = (
-  nodeId: string,
-  fieldName: string,
-  kind: 'inputs' | 'outputs'
-): FieldInputTemplate | FieldOutputTemplate => {
-  const templates = useStore($templates);
-  const selectNodeType = useMemo(
-    () => createSelector(selectNodesSlice, (nodes) => selectInvocationNodeType(nodes, nodeId)),
-    [nodeId]
-  );
-  const nodeType = useAppSelector(selectNodeType);
-  const fieldTemplate = useMemo(() => {
-    const template = templates[nodeType];
-    assert(template, `Template for node type ${nodeType} not found`);
-    if (kind === 'inputs') {
-      const fieldTemplate = template.inputs[fieldName];
-      assert(fieldTemplate, `Field template for field ${fieldName} not found`);
-      return fieldTemplate;
-    } else {
-      const fieldTemplate = template.outputs[fieldName];
-      assert(fieldTemplate, `Field template for field ${fieldName} not found`);
-      return fieldTemplate;
-    }
-  }, [fieldName, kind, nodeType, templates]);
-
-  return fieldTemplate;
-};
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldTemplateTitle.ts b/invokeai/frontend/web/src/features/nodes/hooks/useFieldTemplateTitle.ts
deleted file mode 100644
index 2370aa8e1dc..00000000000
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldTemplateTitle.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { useFieldTemplate } from 'features/nodes/hooks/useFieldTemplate';
-import { useMemo } from 'react';
-
-export const useFieldTemplateTitle = (nodeId: string, fieldName: string, kind: 'inputs' | 'outputs'): string => {
-  const fieldTemplate = useFieldTemplate(nodeId, fieldName, kind);
-  const fieldTemplateTitle = useMemo(() => fieldTemplate.title, [fieldTemplate]);
-  return fieldTemplateTitle;
-};
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldConnectionState.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldConnectionState.ts
new file mode 100644
index 00000000000..96908478585
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldConnectionState.ts
@@ -0,0 +1,35 @@
+import { useStore } from '@nanostores/react';
+import { useAppSelector } from 'app/store/storeHooks';
+import { $edgePendingUpdate, $pendingConnection, $templates } from 'features/nodes/store/nodesSlice';
+import { makeConnectionErrorSelector } from 'features/nodes/store/util/makeConnectionErrorSelector';
+import { useMemo } from 'react';
+
+export const useInputFieldConnectionState = (nodeId: string, fieldName: string) => {
+  const pendingConnection = useStore($pendingConnection);
+  const templates = useStore($templates);
+  const edgePendingUpdate = useStore($edgePendingUpdate);
+
+  const selectValidationResult = useMemo(
+    () => makeConnectionErrorSelector(templates, nodeId, fieldName, 'target'),
+    [templates, nodeId, fieldName]
+  );
+
+  const isConnectionInProgress = useMemo(() => Boolean(pendingConnection), [pendingConnection]);
+  const isConnectionStartField = useMemo(() => {
+    if (!pendingConnection) {
+      return false;
+    }
+    return (
+      pendingConnection.nodeId === nodeId &&
+      pendingConnection.handleId === fieldName &&
+      pendingConnection.fieldTemplate.fieldKind === 'input'
+    );
+  }, [fieldName, nodeId, pendingConnection]);
+  const validationResult = useAppSelector((s) => selectValidationResult(s, pendingConnection, edgePendingUpdate));
+
+  return {
+    isConnectionInProgress,
+    isConnectionStartField,
+    validationResult,
+  };
+};
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldDefaultValue.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldDefaultValue.ts
similarity index 64%
rename from invokeai/frontend/web/src/features/nodes/hooks/useFieldDefaultValue.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useInputFieldDefaultValue.ts
index ea1d8f67d56..0f1f2aa7220 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldDefaultValue.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldDefaultValue.ts
@@ -1,15 +1,15 @@
 import { useAppDispatch } from 'app/store/storeHooks';
-import { useFieldInputTemplate } from 'features/nodes/hooks/useFieldInputTemplate';
-import { useFieldValue } from 'features/nodes/hooks/useFieldValue';
+import { useInputFieldValue } from 'features/nodes/hooks/useInputFieldValue';
+import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate';
 import { fieldValueReset } from 'features/nodes/store/nodesSlice';
 import { isEqual } from 'lodash-es';
 import { useCallback, useMemo } from 'react';
 
-export const useFieldDefaultValue = (nodeId: string, fieldName: string) => {
+export const useInputFieldDefaultValue = (nodeId: string, fieldName: string) => {
   const dispatch = useAppDispatch();
 
-  const value = useFieldValue(nodeId, fieldName);
-  const fieldTemplate = useFieldInputTemplate(nodeId, fieldName);
+  const value = useInputFieldValue(nodeId, fieldName);
+  const fieldTemplate = useInputFieldTemplate(nodeId, fieldName);
 
   const isValueChanged = useMemo(() => {
     return !isEqual(value, fieldTemplate.default);
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldInitialLinearViewValue.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldInitialLinearViewValue.ts
similarity index 83%
rename from invokeai/frontend/web/src/features/nodes/hooks/useFieldInitialLinearViewValue.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useInputFieldInitialLinearViewValue.ts
index 61a4460d084..e31dacfa26d 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldInitialLinearViewValue.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldInitialLinearViewValue.ts
@@ -1,12 +1,12 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { useFieldValue } from 'features/nodes/hooks/useFieldValue';
+import { useInputFieldValue } from 'features/nodes/hooks/useInputFieldValue';
 import { fieldValueReset } from 'features/nodes/store/nodesSlice';
 import { selectWorkflowSlice } from 'features/nodes/store/workflowSlice';
 import { isEqual } from 'lodash-es';
 import { useCallback, useMemo } from 'react';
 
-export const useFieldInitialLinearViewValue = (nodeId: string, fieldName: string) => {
+export const useInputFieldInitialLinearViewValue = (nodeId: string, fieldName: string) => {
   const dispatch = useAppDispatch();
   const selectInitialLinearViewValue = useMemo(
     () =>
@@ -18,7 +18,7 @@ export const useFieldInitialLinearViewValue = (nodeId: string, fieldName: string
     [nodeId, fieldName]
   );
   const initialLinearViewValue = useAppSelector(selectInitialLinearViewValue);
-  const value = useFieldValue(nodeId, fieldName);
+  const value = useInputFieldValue(nodeId, fieldName);
   const isValueChanged = useMemo(() => !isEqual(value, initialLinearViewValue), [value, initialLinearViewValue]);
   const resetToInitialLinearViewValue = useCallback(() => {
     dispatch(fieldValueReset({ nodeId, fieldName, value: initialLinearViewValue }));
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputInstance.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldInstance.ts
similarity index 55%
rename from invokeai/frontend/web/src/features/nodes/hooks/useFieldInputInstance.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useInputFieldInstance.ts
index 37bc108a95e..470832f7ddb 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputInstance.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldInstance.ts
@@ -3,17 +3,20 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { selectFieldInputInstance, selectNodesSlice } from 'features/nodes/store/selectors';
 import type { FieldInputInstance } from 'features/nodes/types/field';
 import { useMemo } from 'react';
+import { assert } from 'tsafe';
 
-export const useFieldInputInstance = (nodeId: string, fieldName: string): FieldInputInstance | null => {
+export const useInputFieldInstance = (nodeId: string, fieldName: string): FieldInputInstance => {
   const selector = useMemo(
     () =>
       createMemoizedSelector(selectNodesSlice, (nodes) => {
-        return selectFieldInputInstance(nodes, nodeId, fieldName);
+        const instance = selectFieldInputInstance(nodes, nodeId, fieldName);
+        assert(instance, `Instance for input field ${fieldName} not found`);
+        return instance;
       }),
     [fieldName, nodeId]
   );
 
-  const fieldData = useAppSelector(selector);
+  const instance = useAppSelector(selector);
 
-  return fieldData;
+  return instance;
 };
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputInstanceExists.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldInstanceExists.ts
similarity index 90%
rename from invokeai/frontend/web/src/features/nodes/hooks/useFieldInputInstanceExists.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useInputFieldInstanceExists.ts
index 1e4c577d541..bc9702705c4 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputInstanceExists.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldInstanceExists.ts
@@ -3,7 +3,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { selectInvocationNode, selectNodesSlice } from 'features/nodes/store/selectors';
 import { useMemo } from 'react';
 
-export const useFieldInputInstanceExists = (nodeId: string, fieldName: string) => {
+export const useInputFieldInstanceExists = (nodeId: string, fieldName: string) => {
   const selector = useMemo(
     () =>
       createSelector(selectNodesSlice, (nodesSlice) => {
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldIsConnected.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldIsConnected.ts
new file mode 100644
index 00000000000..bda4622db8b
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldIsConnected.ts
@@ -0,0 +1,21 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectNodesSlice } from 'features/nodes/store/selectors';
+import { useMemo } from 'react';
+
+export const useInputFieldIsConnected = (nodeId: string, fieldName: string) => {
+  const selector = useMemo(
+    () =>
+      createSelector(selectNodesSlice, (nodes) => {
+        const firstConnectedEdge = nodes.edges.find((edge) => {
+          return edge.target === nodeId && edge.targetHandle === fieldName;
+        });
+        return firstConnectedEdge !== undefined;
+      }),
+    [fieldName, nodeId]
+  );
+
+  const isConnected = useAppSelector(selector);
+
+  return isConnected;
+};
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldIsExposed.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldIsExposed.ts
similarity index 87%
rename from invokeai/frontend/web/src/features/nodes/hooks/useFieldIsExposed.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useInputFieldIsExposed.ts
index 22bb6669c8a..4245cdde711 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldIsExposed.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldIsExposed.ts
@@ -3,7 +3,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { selectWorkflowSlice } from 'features/nodes/store/workflowSlice';
 import { useMemo } from 'react';
 
-export const useFieldIsExposed = (nodeId: string, fieldName: string) => {
+export const useInputFieldIsExposed = (nodeId: string, fieldName: string) => {
   const selectIsExposed = useMemo(
     () =>
       createSelector(selectWorkflowSlice, (workflow) => {
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldIsInvalid.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldIsInvalid.ts
similarity index 81%
rename from invokeai/frontend/web/src/features/nodes/hooks/useFieldIsInvalid.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useInputFieldIsInvalid.ts
index cf26b623c77..a6e52260e13 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldIsInvalid.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldIsInvalid.ts
@@ -1,7 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
-import { useConnectionState } from 'features/nodes/hooks/useConnectionState';
-import { useFieldInputTemplate } from 'features/nodes/hooks/useFieldInputTemplate';
+import { useInputFieldIsConnected } from 'features/nodes/hooks/useInputFieldIsConnected';
+import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate';
 import { selectFieldInputInstance, selectNodesSlice } from 'features/nodes/store/selectors';
 import {
   isFloatFieldCollectionInputInstance,
@@ -20,9 +20,9 @@ import {
 } from 'features/nodes/types/fieldValidators';
 import { useMemo } from 'react';
 
-export const useFieldIsInvalid = (nodeId: string, fieldName: string) => {
-  const template = useFieldInputTemplate(nodeId, fieldName);
-  const connectionState = useConnectionState(nodeId, fieldName, 'inputs');
+export const useInputFieldIsInvalid = (nodeId: string, fieldName: string) => {
+  const template = useInputFieldTemplate(nodeId, fieldName);
+  const isConnected = useInputFieldIsConnected(nodeId, fieldName);
 
   const selectIsInvalid = useMemo(() => {
     return createSelector(selectNodesSlice, (nodes) => {
@@ -35,11 +35,11 @@ export const useFieldIsInvalid = (nodeId: string, fieldName: string) => {
 
       // 'connection' input fields have no data validation - only connection validation
       if (template.input === 'connection') {
-        return template.required && !connectionState.isConnected;
+        return template.required && !isConnected;
       }
 
       // 'any' input fields are valid if they are connected
-      if (template.input === 'any' && connectionState.isConnected) {
+      if (template.input === 'any' && isConnected) {
         return false;
       }
 
@@ -77,7 +77,7 @@ export const useFieldIsInvalid = (nodeId: string, fieldName: string) => {
       // Field looks OK
       return false;
     });
-  }, [connectionState.isConnected, fieldName, nodeId, template]);
+  }, [nodeId, fieldName, template, isConnected]);
 
   const isInvalid = useAppSelector(selectIsInvalid);
 
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldLabel.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldLabel.ts
similarity index 84%
rename from invokeai/frontend/web/src/features/nodes/hooks/useFieldLabel.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useInputFieldLabel.ts
index d7a7fe48f23..57197090077 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldLabel.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldLabel.ts
@@ -3,7 +3,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { selectFieldInputInstance, selectNodesSlice } from 'features/nodes/store/selectors';
 import { useMemo } from 'react';
 
-export const useFieldLabel = (nodeId: string, fieldName: string): string | null => {
+export const useInputFieldLabel = (nodeId: string, fieldName: string): string | null => {
   const selector = useMemo(
     () =>
       createSelector(selectNodesSlice, (nodes) => {
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldLinearViewConfig.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldLinearViewConfig.ts
similarity index 88%
rename from invokeai/frontend/web/src/features/nodes/hooks/useFieldLinearViewConfig.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useInputFieldLinearViewConfig.ts
index f3b4397fc76..a5703fa11ed 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldLinearViewConfig.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldLinearViewConfig.ts
@@ -4,7 +4,7 @@ import { selectNodesSlice } from 'features/nodes/store/selectors';
 import { isInvocationNode } from 'features/nodes/types/invocation';
 import { useMemo } from 'react';
 
-export const useFieldLinearViewConfig = (nodeId: string, fieldName: string) => {
+export const useInputFieldLinearViewConfig = (nodeId: string, fieldName: string) => {
   const selector = useMemo(
     () =>
       createSelector(selectNodesSlice, (nodes) => {
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputName.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldName.ts
similarity index 93%
rename from invokeai/frontend/web/src/features/nodes/hooks/useFieldInputName.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useInputFieldName.ts
index 86165094ae0..573edd89f99 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputName.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldName.ts
@@ -5,7 +5,7 @@ import { $templates } from 'features/nodes/store/nodesSlice';
 import { selectInvocationNode, selectNodesSlice } from 'features/nodes/store/selectors';
 import { useMemo } from 'react';
 
-export const useFieldInputName = (nodeId: string, fieldName: string) => {
+export const useInputFieldName = (nodeId: string, fieldName: string) => {
   const templates = useStore($templates);
 
   const selector = useMemo(
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldNames.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldNamesByStatus.ts
similarity index 95%
rename from invokeai/frontend/web/src/features/nodes/hooks/useFieldNames.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useInputFieldNamesByStatus.ts
index 19849fb296f..4dba5a776ab 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldNames.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldNamesByStatus.ts
@@ -20,7 +20,7 @@ const isAnyOrDirectInputField = (field: FieldInputTemplate) => {
   );
 };
 
-export const useFieldNames = (nodeId: string) => {
+export const useInputFieldNamesByStatus = (nodeId: string) => {
   const template = useNodeTemplate(nodeId);
   const node = useNodeData(nodeId);
   const fieldNames = useMemo(() => {
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldNotes.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldNotes.ts
similarity index 89%
rename from invokeai/frontend/web/src/features/nodes/hooks/useFieldNotes.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useInputFieldNotes.ts
index 15a4021b3fb..80ff92ebf4b 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldNotes.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldNotes.ts
@@ -4,7 +4,7 @@ import { selectNodesSlice } from 'features/nodes/store/selectors';
 import { isInvocationNode } from 'features/nodes/types/invocation';
 import { useMemo } from 'react';
 
-export const useFieldNotes = (nodeId: string, fieldName: string) => {
+export const useInputFieldNotes = (nodeId: string, fieldName: string) => {
   const selector = useMemo(
     () =>
       createSelector(selectNodesSlice, (nodes) => {
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputTemplate.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldTemplate.ts
similarity index 89%
rename from invokeai/frontend/web/src/features/nodes/hooks/useFieldInputTemplate.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useInputFieldTemplate.ts
index f1ce8a28834..34afde1e495 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputTemplate.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldTemplate.ts
@@ -3,7 +3,7 @@ import type { FieldInputTemplate } from 'features/nodes/types/field';
 import { useMemo } from 'react';
 import { assert } from 'tsafe';
 
-export const useFieldInputTemplate = (nodeId: string, fieldName: string): FieldInputTemplate => {
+export const useInputFieldTemplate = (nodeId: string, fieldName: string): FieldInputTemplate => {
   const template = useNodeTemplate(nodeId);
   const fieldTemplate = useMemo(() => {
     const _fieldTemplate = template.inputs[fieldName];
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputTemplateExists.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldTemplateExists.ts
similarity index 92%
rename from invokeai/frontend/web/src/features/nodes/hooks/useFieldInputTemplateExists.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useInputFieldTemplateExists.ts
index 75dd3f7a5ea..b14fa1d6e40 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldInputTemplateExists.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldTemplateExists.ts
@@ -5,7 +5,7 @@ import { $templates } from 'features/nodes/store/nodesSlice';
 import { selectInvocationNode, selectNodesSlice } from 'features/nodes/store/selectors';
 import { useMemo } from 'react';
 
-export const useFieldInputTemplateExists = (nodeId: string, fieldName: string) => {
+export const useInputFieldTemplateExists = (nodeId: string, fieldName: string) => {
   const templates = useStore($templates);
 
   const selector = useMemo(
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldTemplateTitle.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldTemplateTitle.ts
new file mode 100644
index 00000000000..319c219faf4
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldTemplateTitle.ts
@@ -0,0 +1,15 @@
+import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate';
+import { useMemo } from 'react';
+import { assert } from 'tsafe';
+
+export const useInputFieldTemplateTitle = (nodeId: string, fieldName: string): string => {
+  const template = useNodeTemplate(nodeId);
+
+  const title = useMemo(() => {
+    const fieldTemplate = template.inputs[fieldName];
+    assert(fieldTemplate, `Template for input field ${fieldName} not found.`);
+    return fieldTemplate.title;
+  }, [fieldName, template.inputs]);
+
+  return title;
+};
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldValue.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldValue.ts
similarity index 90%
rename from invokeai/frontend/web/src/features/nodes/hooks/useFieldValue.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useInputFieldValue.ts
index 7dfe27bcc56..d1b83b22178 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldValue.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldValue.ts
@@ -4,7 +4,7 @@ import { selectNodesSlice } from 'features/nodes/store/selectors';
 import { isInvocationNode } from 'features/nodes/types/invocation';
 import { useMemo } from 'react';
 
-export const useFieldValue = (nodeId: string, fieldName: string) => {
+export const useInputFieldValue = (nodeId: string, fieldName: string) => {
   const selector = useMemo(
     () =>
       createMemoizedSelector(selectNodesSlice, (nodes) => {
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useCopyPaste.ts b/invokeai/frontend/web/src/features/nodes/hooks/useNodeCopyPaste.ts
similarity index 99%
rename from invokeai/frontend/web/src/features/nodes/hooks/useCopyPaste.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useNodeCopyPaste.ts
index 3f561eafca7..42799f09b8b 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useCopyPaste.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useNodeCopyPaste.ts
@@ -166,6 +166,6 @@ const pasteSelectionWithEdges = () => {
 
 const api = { copySelection, pasteSelection, pasteSelectionWithEdges };
 
-export const useCopyPaste = () => {
+export const useNodeCopyPaste = () => {
   return api;
 };
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useExecutionState.ts b/invokeai/frontend/web/src/features/nodes/hooks/useNodeExecutionState.ts
similarity index 97%
rename from invokeai/frontend/web/src/features/nodes/hooks/useExecutionState.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useNodeExecutionState.ts
index a8755e67c4a..30ea97a9593 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useExecutionState.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useNodeExecutionState.ts
@@ -19,7 +19,7 @@ const initialNodeExecutionState: Omit<NodeExecutionState, 'nodeId'> = {
   outputs: [],
 };
 
-export const useExecutionState = (nodeId?: string) => {
+export const useNodeExecutionState = (nodeId?: string) => {
   const executionStates = useStore($nodeExecutionStates, nodeId ? { keys: [nodeId] } : undefined);
   const executionState = useMemo(() => (nodeId ? executionStates[nodeId] : undefined), [executionStates, nodeId]);
   return executionState;
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useHasImageOutput.ts b/invokeai/frontend/web/src/features/nodes/hooks/useNodeHasImageOutput.ts
similarity index 89%
rename from invokeai/frontend/web/src/features/nodes/hooks/useHasImageOutput.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useNodeHasImageOutput.ts
index 1078b18cc67..5855f5542b1 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useHasImageOutput.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useNodeHasImageOutput.ts
@@ -2,7 +2,7 @@ import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate';
 import { some } from 'lodash-es';
 import { useMemo } from 'react';
 
-export const useHasImageOutput = (nodeId: string): boolean => {
+export const useNodeHasImageOutput = (nodeId: string): boolean => {
   const template = useNodeTemplate(nodeId);
   const hasImageOutput = useMemo(
     () =>
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useNodeIsInvocationNode.ts b/invokeai/frontend/web/src/features/nodes/hooks/useNodeIsInvocationNode.ts
new file mode 100644
index 00000000000..c3acbf5763d
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useNodeIsInvocationNode.ts
@@ -0,0 +1,20 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectNode, selectNodesSlice } from 'features/nodes/store/selectors';
+import { isInvocationNode as _isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
+
+export const useNodeIsInvocationNode = (nodeId: string): boolean => {
+  const selector = useMemo(
+    () =>
+      createSelector(selectNodesSlice, (nodes) => {
+        const node = selectNode(nodes, nodeId);
+        return _isInvocationNode(node);
+      }),
+    [nodeId]
+  );
+
+  const isInvocationNode = useAppSelector(selector);
+
+  return isInvocationNode;
+};
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useNodeNotes.ts b/invokeai/frontend/web/src/features/nodes/hooks/useNodeNotes.ts
new file mode 100644
index 00000000000..20780aee106
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useNodeNotes.ts
@@ -0,0 +1,22 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectNode, selectNodesSlice } from 'features/nodes/store/selectors';
+import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
+import { assert } from 'tsafe';
+
+export const useInvocationNodeNotes = (nodeId: string): string => {
+  const selector = useMemo(
+    () =>
+      createSelector(selectNodesSlice, (nodes) => {
+        const node = selectNode(nodes, nodeId);
+        assert(isInvocationNode(node), `Node with id ${nodeId} is not an invocation node`);
+        return node.data.notes;
+      }),
+    [nodeId]
+  );
+
+  const notes = useAppSelector(selector);
+
+  return notes;
+};
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldConnectionState.ts b/invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldConnectionState.ts
new file mode 100644
index 00000000000..4bd6606467c
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldConnectionState.ts
@@ -0,0 +1,35 @@
+import { useStore } from '@nanostores/react';
+import { useAppSelector } from 'app/store/storeHooks';
+import { $edgePendingUpdate, $pendingConnection, $templates } from 'features/nodes/store/nodesSlice';
+import { makeConnectionErrorSelector } from 'features/nodes/store/util/makeConnectionErrorSelector';
+import { useMemo } from 'react';
+
+export const useOutputFieldConnectionState = (nodeId: string, fieldName: string) => {
+  const pendingConnection = useStore($pendingConnection);
+  const templates = useStore($templates);
+  const edgePendingUpdate = useStore($edgePendingUpdate);
+
+  const selectValidationResult = useMemo(
+    () => makeConnectionErrorSelector(templates, nodeId, fieldName, 'source'),
+    [templates, nodeId, fieldName]
+  );
+
+  const isConnectionInProgress = useMemo(() => Boolean(pendingConnection), [pendingConnection]);
+  const isConnectionStartField = useMemo(() => {
+    if (!pendingConnection) {
+      return false;
+    }
+    return (
+      pendingConnection.nodeId === nodeId &&
+      pendingConnection.handleId === fieldName &&
+      pendingConnection.fieldTemplate.fieldKind === 'output'
+    );
+  }, [fieldName, nodeId, pendingConnection]);
+  const validationResult = useAppSelector((s) => selectValidationResult(s, pendingConnection, edgePendingUpdate));
+
+  return {
+    isConnectionInProgress,
+    isConnectionStartField,
+    validationResult,
+  };
+};
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldIsConnected.ts b/invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldIsConnected.ts
new file mode 100644
index 00000000000..c6c5f214ab8
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldIsConnected.ts
@@ -0,0 +1,21 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectNodesSlice } from 'features/nodes/store/selectors';
+import { useMemo } from 'react';
+
+export const useOutputFieldIsConnected = (nodeId: string, fieldName: string) => {
+  const selector = useMemo(
+    () =>
+      createSelector(selectNodesSlice, (nodes) => {
+        const firstConnectedEdge = nodes.edges.find((edge) => {
+          return edge.source === nodeId && edge.sourceHandle === fieldName;
+        });
+        return firstConnectedEdge !== undefined;
+      }),
+    [fieldName, nodeId]
+  );
+
+  const isConnected = useAppSelector(selector);
+
+  return isConnected;
+};
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputName.ts b/invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldName.ts
similarity index 93%
rename from invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputName.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldName.ts
index 5b151dce28f..8b237484e23 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputName.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldName.ts
@@ -5,7 +5,7 @@ import { $templates } from 'features/nodes/store/nodesSlice';
 import { selectInvocationNode, selectNodesSlice } from 'features/nodes/store/selectors';
 import { useMemo } from 'react';
 
-export const useFieldOutputName = (nodeId: string, fieldName: string) => {
+export const useOutputFieldName = (nodeId: string, fieldName: string) => {
   const templates = useStore($templates);
 
   const selector = useMemo(
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputTemplate.ts b/invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldTemplate.ts
similarity index 89%
rename from invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputTemplate.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldTemplate.ts
index 0b55857f7a8..d30b4a8bb5f 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputTemplate.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldTemplate.ts
@@ -3,7 +3,7 @@ import type { FieldOutputTemplate } from 'features/nodes/types/field';
 import { useMemo } from 'react';
 import { assert } from 'tsafe';
 
-export const useFieldOutputTemplate = (nodeId: string, fieldName: string): FieldOutputTemplate => {
+export const useOutputFieldTemplate = (nodeId: string, fieldName: string): FieldOutputTemplate => {
   const template = useNodeTemplate(nodeId);
   const fieldTemplate = useMemo(() => {
     const _fieldTemplate = template.outputs[fieldName];
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputTemplateExists.ts b/invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldTemplateExists.ts
similarity index 92%
rename from invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputTemplateExists.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldTemplateExists.ts
index 336eddc12d6..37962efb465 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useFieldOutputTemplateExists.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldTemplateExists.ts
@@ -5,7 +5,7 @@ import { $templates } from 'features/nodes/store/nodesSlice';
 import { selectInvocationNode, selectNodesSlice } from 'features/nodes/store/selectors';
 import { useMemo } from 'react';
 
-export const useFieldOutputTemplateExists = (nodeId: string, fieldName: string) => {
+export const useOutputFieldTemplateExists = (nodeId: string, fieldName: string) => {
   const templates = useStore($templates);
 
   const selector = useMemo(
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/usePrettyFieldType.ts b/invokeai/frontend/web/src/features/nodes/hooks/usePrettyFieldType.ts
index 7f531c3dba6..892f0d73e16 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/usePrettyFieldType.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/usePrettyFieldType.ts
@@ -2,13 +2,10 @@ import { type FieldType, isCollection, isSingleOrCollection } from 'features/nod
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-export const useFieldTypeName = (fieldType?: FieldType): string => {
+export const useFieldTypeName = (fieldType: FieldType): string => {
   const { t } = useTranslation();
 
   const name = useMemo(() => {
-    if (!fieldType) {
-      return '';
-    }
     const { name } = fieldType;
     if (isCollection(fieldType)) {
       return t('nodes.collectionFieldType', { name });
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useWithFooter.ts b/invokeai/frontend/web/src/features/nodes/hooks/useWithFooter.ts
index 6e00d374f63..e118f8901d8 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useWithFooter.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useWithFooter.ts
@@ -1,10 +1,10 @@
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { useMemo } from 'react';
 
-import { useHasImageOutput } from './useHasImageOutput';
+import { useNodeHasImageOutput } from './useNodeHasImageOutput';
 
 export const useWithFooter = (nodeId: string) => {
-  const hasImageOutput = useHasImageOutput(nodeId);
+  const hasImageOutput = useNodeHasImageOutput(nodeId);
   const isCacheEnabled = useFeatureStatus('invocationCache');
   const withFooter = useMemo(() => hasImageOutput || isCacheEnabled, [hasImageOutput, isCacheEnabled]);
   return withFooter;
diff --git a/invokeai/frontend/web/src/services/events/onInvocationComplete.tsx b/invokeai/frontend/web/src/services/events/onInvocationComplete.tsx
index 70b127aa41c..475e6b7b072 100644
--- a/invokeai/frontend/web/src/services/events/onInvocationComplete.tsx
+++ b/invokeai/frontend/web/src/services/events/onInvocationComplete.tsx
@@ -3,7 +3,7 @@ import type { AppDispatch, RootState } from 'app/store/store';
 import { deepClone } from 'common/util/deepClone';
 import { stagingAreaImageStaged } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { boardIdSelected, galleryViewChanged, imageSelected, offsetChanged } from 'features/gallery/store/gallerySlice';
-import { $nodeExecutionStates, upsertExecutionState } from 'features/nodes/hooks/useExecutionState';
+import { $nodeExecutionStates, upsertExecutionState } from 'features/nodes/hooks/useNodeExecutionState';
 import { zNodeStatus } from 'features/nodes/types/invocation';
 import { CANVAS_OUTPUT_PREFIX } from 'features/nodes/util/graph/graphBuilderUtils';
 import { boardsApi } from 'services/api/endpoints/boards';
diff --git a/invokeai/frontend/web/src/services/events/setEventListeners.tsx b/invokeai/frontend/web/src/services/events/setEventListeners.tsx
index bb389b3406a..c3b9907620c 100644
--- a/invokeai/frontend/web/src/services/events/setEventListeners.tsx
+++ b/invokeai/frontend/web/src/services/events/setEventListeners.tsx
@@ -6,7 +6,7 @@ import { $bulkDownloadId } from 'app/store/nanostores/bulkDownloadId';
 import { $queueId } from 'app/store/nanostores/queueId';
 import type { AppStore } from 'app/store/store';
 import { deepClone } from 'common/util/deepClone';
-import { $nodeExecutionStates, upsertExecutionState } from 'features/nodes/hooks/useExecutionState';
+import { $nodeExecutionStates, upsertExecutionState } from 'features/nodes/hooks/useNodeExecutionState';
 import { zNodeStatus } from 'features/nodes/types/invocation';
 import ErrorToastDescription, { ErrorToastTitle } from 'features/toast/ErrorToastDescription';
 import { toast } from 'features/toast/toast';

From e9677940d01e75836035cfadbc49ed11046ec40e Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 20 Jan 2025 16:25:16 +1100
Subject: [PATCH 12/58] refactor(ui): continued reorg of components & hooks

---
 .../nodes/Invocation/InvocationNodeHeader.tsx |   2 +-
 .../Invocation/InvocationNodeInfoIcon.tsx     | 119 +++++++-----------
 .../Invocation/SaveToGalleryCheckbox.tsx      |   4 +-
 .../nodes/hooks/useIsValidConnection.ts       |   6 -
 ...termediate.ts => useNodeIsIntermediate.ts} |   2 +-
 .../src/features/nodes/hooks/useNodeNotes.ts  |   7 +-
 .../features/nodes/hooks/useNodeVersion.ts    |  18 +++
 7 files changed, 69 insertions(+), 89 deletions(-)
 rename invokeai/frontend/web/src/features/nodes/hooks/{useIsIntermediate.ts => useNodeIsIntermediate.ts} (87%)
 create mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useNodeVersion.ts

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx
index 21ba769bfdf..bb4e7710b32 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx
@@ -5,7 +5,7 @@ import InvocationNodeClassificationIcon from 'features/nodes/components/flow/nod
 import { memo } from 'react';
 
 import InvocationNodeCollapsedHandles from './InvocationNodeCollapsedHandles';
-import InvocationNodeInfoIcon from './InvocationNodeInfoIcon';
+import { InvocationNodeInfoIcon } from './InvocationNodeInfoIcon';
 import InvocationNodeStatusIndicator from './InvocationNodeStatusIndicator';
 
 type Props = {
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx
index 090c11f4b45..f563d0b68cb 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx
@@ -1,9 +1,10 @@
 import { Flex, Icon, Text, Tooltip } from '@invoke-ai/ui-library';
 import { compare } from 'compare-versions';
-import { useNode } from 'features/nodes/hooks/useNode';
+import { useNodeLabel } from 'features/nodes/hooks/useNodeLabel';
 import { useNodeNeedsUpdate } from 'features/nodes/hooks/useNodeNeedsUpdate';
+import { useInvocationNodeNotes } from 'features/nodes/hooks/useNodeNotes';
 import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate';
-import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useNodeVersion } from 'features/nodes/hooks/useNodeVersion';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiInfoBold } from 'react-icons/pi';
@@ -12,7 +13,7 @@ interface Props {
   nodeId: string;
 }
 
-const InvocationNodeInfoIcon = ({ nodeId }: Props) => {
+export const InvocationNodeInfoIcon = memo(({ nodeId }: Props) => {
   const needsUpdate = useNodeNeedsUpdate(nodeId);
 
   return (
@@ -20,96 +21,66 @@ const InvocationNodeInfoIcon = ({ nodeId }: Props) => {
       <Icon as={PiInfoBold} display="block" boxSize={4} w={8} color={needsUpdate ? 'error.400' : 'base.400'} />
     </Tooltip>
   );
-};
+});
 
-export default memo(InvocationNodeInfoIcon);
+InvocationNodeInfoIcon.displayName = 'InvocationNodeInfoIcon';
 
 const TooltipContent = memo(({ nodeId }: { nodeId: string }) => {
-  const node = useNode(nodeId);
+  const notes = useInvocationNodeNotes(nodeId);
+  const label = useNodeLabel(nodeId);
+  const version = useNodeVersion(nodeId);
   const nodeTemplate = useNodeTemplate(nodeId);
   const { t } = useTranslation();
 
   const title = useMemo(() => {
-    if (node.data?.label && nodeTemplate?.title) {
-      return `${node.data.label} (${nodeTemplate.title})`;
-    }
-
-    if (node.data?.label && !nodeTemplate) {
-      return node.data.label;
-    }
-
-    if (!node.data?.label && nodeTemplate) {
-      return nodeTemplate.title;
-    }
-
-    return t('nodes.unknownNode');
-  }, [node.data.label, nodeTemplate, t]);
-
-  const versionComponent = useMemo(() => {
-    if (!isInvocationNode(node) || !nodeTemplate) {
-      return null;
-    }
-
-    if (!node.data.version) {
-      return (
-        <Text as="span" color="error.500">
-          {t('nodes.versionUnknown')}
-        </Text>
-      );
-    }
-
-    if (!nodeTemplate.version) {
-      return (
-        <Text as="span" color="error.500">
-          {t('nodes.version')} {node.data.version} ({t('nodes.unknownTemplate')})
-        </Text>
-      );
-    }
-
-    if (compare(node.data.version, nodeTemplate.version, '<')) {
-      return (
-        <Text as="span" color="error.500">
-          {t('nodes.version')} {node.data.version} ({t('nodes.updateNode')})
-        </Text>
-      );
+    if (label) {
+      return `${label} (${nodeTemplate.title})`;
     }
 
-    if (compare(node.data.version, nodeTemplate.version, '>')) {
-      return (
-        <Text as="span" color="error.500">
-          {t('nodes.version')} {node.data.version} ({t('nodes.updateApp')})
-        </Text>
-      );
-    }
-
-    return (
-      <Text as="span">
-        {t('nodes.version')} {node.data.version}
-      </Text>
-    );
-  }, [node, nodeTemplate, t]);
-
-  if (!isInvocationNode(node)) {
-    return <Text fontWeight="semibold">{t('nodes.unknownNode')}</Text>;
-  }
+    return nodeTemplate.title;
+  }, [label, nodeTemplate.title]);
 
   return (
     <Flex flexDir="column">
       <Text as="span" fontWeight="semibold">
         {title}
       </Text>
-      {nodeTemplate?.nodePack && (
-        <Text opacity={0.7}>
-          {t('nodes.nodePack')}: {nodeTemplate.nodePack}
-        </Text>
-      )}
+      <Text opacity={0.7}>
+        {t('nodes.nodePack')}: {nodeTemplate.nodePack}
+      </Text>
       <Text opacity={0.7} fontStyle="oblique 5deg">
-        {nodeTemplate?.description}
+        {nodeTemplate.description}
       </Text>
-      {versionComponent}
-      {node.data?.notes && <Text>{node.data.notes}</Text>}
+      <Version nodeVersion={version} templateVersion={nodeTemplate.version} />
+      {notes && <Text>{notes}</Text>}
     </Flex>
   );
 });
 
 TooltipContent.displayName = 'TooltipContent';
+
+const Version = ({ nodeVersion, templateVersion }: { nodeVersion: string; templateVersion: string }) => {
+  const { t } = useTranslation();
+
+  if (compare(nodeVersion, templateVersion, '<')) {
+    return (
+      <Text as="span" color="error.500">
+        {t('nodes.version')} {nodeVersion} ({t('nodes.updateNode')})
+      </Text>
+    );
+  }
+
+  if (compare(nodeVersion, templateVersion, '>')) {
+    return (
+      <Text as="span" color="error.500">
+        {t('nodes.version')} {nodeVersion} ({t('nodes.updateApp')})
+      </Text>
+    );
+  }
+
+  return (
+    <Text as="span">
+      {t('nodes.version')} {nodeVersion}
+    </Text>
+  );
+};
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/SaveToGalleryCheckbox.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/SaveToGalleryCheckbox.tsx
index 4ef07a04853..f4eeb2e9dc1 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/SaveToGalleryCheckbox.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/SaveToGalleryCheckbox.tsx
@@ -1,7 +1,7 @@
 import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { useIsIntermediate } from 'features/nodes/hooks/useIsIntermediate';
 import { useNodeHasImageOutput } from 'features/nodes/hooks/useNodeHasImageOutput';
+import { useNodeIsIntermediate } from 'features/nodes/hooks/useNodeIsIntermediate';
 import { nodeIsIntermediateChanged } from 'features/nodes/store/nodesSlice';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
@@ -11,7 +11,7 @@ const SaveToGalleryCheckbox = ({ nodeId }: { nodeId: string }) => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const hasImageOutput = useNodeHasImageOutput(nodeId);
-  const isIntermediate = useIsIntermediate(nodeId);
+  const isIntermediate = useNodeIsIntermediate(nodeId);
   const handleChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
       dispatch(
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useIsValidConnection.ts b/invokeai/frontend/web/src/features/nodes/hooks/useIsValidConnection.ts
index e1121e08dc5..8a3ce81efc8 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useIsValidConnection.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useIsValidConnection.ts
@@ -1,4 +1,3 @@
-// TODO: enable this at some point
 import { useStore } from '@nanostores/react';
 import { useAppSelector, useAppStore } from 'app/store/storeHooks';
 import { $edgePendingUpdate, $templates } from 'features/nodes/store/nodesSlice';
@@ -8,11 +7,6 @@ import { selectShouldShouldValidateGraph } from 'features/nodes/store/workflowSe
 import { useCallback } from 'react';
 import type { Connection } from 'reactflow';
 
-/**
- * NOTE: The logic here must be duplicated in `invokeai/frontend/web/src/features/nodes/store/util/makeIsConnectionValidSelector.ts`
- * TODO: Figure out how to do this without duplicating all the logic
- */
-
 export const useIsValidConnection = () => {
   const store = useAppStore();
   const templates = useStore($templates);
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useIsIntermediate.ts b/invokeai/frontend/web/src/features/nodes/hooks/useNodeIsIntermediate.ts
similarity index 87%
rename from invokeai/frontend/web/src/features/nodes/hooks/useIsIntermediate.ts
rename to invokeai/frontend/web/src/features/nodes/hooks/useNodeIsIntermediate.ts
index d46d7148c00..d7b6f8a10ec 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useIsIntermediate.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useNodeIsIntermediate.ts
@@ -3,7 +3,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { selectNodeData, selectNodesSlice } from 'features/nodes/store/selectors';
 import { useMemo } from 'react';
 
-export const useIsIntermediate = (nodeId: string): boolean => {
+export const useNodeIsIntermediate = (nodeId: string): boolean => {
   const selector = useMemo(
     () =>
       createSelector(selectNodesSlice, (nodes) => {
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useNodeNotes.ts b/invokeai/frontend/web/src/features/nodes/hooks/useNodeNotes.ts
index 20780aee106..5c68cc546b7 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useNodeNotes.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useNodeNotes.ts
@@ -1,16 +1,13 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectNode, selectNodesSlice } from 'features/nodes/store/selectors';
-import { isInvocationNode } from 'features/nodes/types/invocation';
+import { selectInvocationNode, selectNodesSlice } from 'features/nodes/store/selectors';
 import { useMemo } from 'react';
-import { assert } from 'tsafe';
 
 export const useInvocationNodeNotes = (nodeId: string): string => {
   const selector = useMemo(
     () =>
       createSelector(selectNodesSlice, (nodes) => {
-        const node = selectNode(nodes, nodeId);
-        assert(isInvocationNode(node), `Node with id ${nodeId} is not an invocation node`);
+        const node = selectInvocationNode(nodes, nodeId);
         return node.data.notes;
       }),
     [nodeId]
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useNodeVersion.ts b/invokeai/frontend/web/src/features/nodes/hooks/useNodeVersion.ts
new file mode 100644
index 00000000000..06098a0fe58
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useNodeVersion.ts
@@ -0,0 +1,18 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectInvocationNode, selectNodesSlice } from 'features/nodes/store/selectors';
+import { useMemo } from 'react';
+
+export const useNodeVersion = (nodeId: string) => {
+  const selector = useMemo(
+    () =>
+      createSelector(selectNodesSlice, (nodesSlice) => {
+        const node = selectInvocationNode(nodesSlice, nodeId);
+        return node.data.version;
+      }),
+    [nodeId]
+  );
+
+  const version = useAppSelector(selector);
+  return version;
+};

From 29570218a7b728729098638657741ff0b259965c Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 20 Jan 2025 16:51:42 +1100
Subject: [PATCH 13/58] fix(ui): color field component layout

---
 .../Invocation/fields/inputs/ColorFieldInputComponent.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ColorFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ColorFieldInputComponent.tsx
index 12f541441a8..fa6ec491ca7 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ColorFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ColorFieldInputComponent.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@invoke-ai/ui-library';
+import { Flex } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { hexToRGBA, rgbaToHex } from 'common/util/colorCodeTransformers';
 import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
@@ -49,7 +49,7 @@ const ColorFieldInputComponent = (props: FieldComponentProps<ColorFieldInputInst
   );
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+    <Flex flexDir="column" gap={2} w="full">
       <HexColorInput
         style={{
           background: colorTokenToCssVar('base.700'),
@@ -67,7 +67,7 @@ const ColorFieldInputComponent = (props: FieldComponentProps<ColorFieldInputInst
         alpha
       />
       <RgbaColorPicker className="nodrag" color={color} onChange={handleValueChanged} style={{ width: '100%' }} />
-    </Box>
+    </Flex>
   );
 };
 

From b61e07c556658143ef50052a47aa757ae8b77e44 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 20 Jan 2025 16:51:59 +1100
Subject: [PATCH 14/58] feat(ui): get configurable notes display working

---
 .../fields/InputFieldEditModeLinear.tsx       | 16 ++++---
 .../fields/InputFieldEditModeNodes.tsx        |  6 +--
 .../fields/InputFieldNotesHelperText.tsx      | 25 +++++++++++
 ... => InputFieldNotesIconButtonEditable.tsx} | 36 +++++----------
 .../InputFieldNotesIconButtonReadonly.tsx     | 45 +++++++++++++++++++
 ...nputFieldResetToInitialValueIconButton.tsx |  6 +--
 .../Invocation/fields/InputFieldViewMode.tsx  | 26 +++++++----
 7 files changed, 112 insertions(+), 48 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesHelperText.tsx
 rename invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/{InputFieldNotesIconButton.tsx => InputFieldNotesIconButtonEditable.tsx} (65%)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButtonReadonly.tsx

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeLinear.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeLinear.tsx
index 5708ea5b072..cb21d9f24df 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeLinear.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeLinear.tsx
@@ -2,14 +2,15 @@ import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Box, Circle, Flex, IconButton, Spacer } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { DndListDropIndicator } from 'features/dnd/DndListDropIndicator';
-import { InputFieldNotesIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButton';
-import InputFieldResetToInitialValueIconButton from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToInitialValueIconButton';
+import { InputFieldLinearViewConfigIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldLinearViewConfigIconButton';
+import { InputFieldNotesIconButtonEditable } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButtonEditable';
+import { InputFieldResetToInitialValueIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToInitialValueIconButton';
 import { useLinearViewFieldDnd } from 'features/nodes/components/sidePanel/workflow/useLinearViewFieldDnd';
 import { useMouseOverNode } from 'features/nodes/hooks/useMouseOverNode';
 import { workflowExposedFieldRemoved } from 'features/nodes/store/workflowSlice';
 import { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiTrashSimpleBold } from 'react-icons/pi';
+import { PiMinusBold } from 'react-icons/pi';
 
 import { InputFieldRenderer } from './InputFieldRenderer';
 import { InputFieldTitle } from './InputFieldTitle';
@@ -55,20 +56,21 @@ export const InputFieldEditModeLinear = memo(({ nodeId, fieldName }: Props) => {
         onMouseLeave={handleMouseOut}
         sx={sx}
       >
-        <Flex flexDir="column" w="full">
+        <Flex flexDir="column" w="full" gap={1}>
           <Flex alignItems="center" gap={2}>
             <InputFieldTitle nodeId={nodeId} fieldName={fieldName} />
             <Spacer />
             {isMouseOverNode && <Circle me={2} size={2} borderRadius="full" bg="invokeBlue.500" />}
-            <InputFieldNotesIconButton nodeId={nodeId} fieldName={fieldName} />
+            <InputFieldLinearViewConfigIconButton nodeId={nodeId} fieldName={fieldName} />
+            <InputFieldNotesIconButtonEditable nodeId={nodeId} fieldName={fieldName} />
             <InputFieldResetToInitialValueIconButton nodeId={nodeId} fieldName={fieldName} />
             <IconButton
               aria-label={t('nodes.removeLinearView')}
               tooltip={t('nodes.removeLinearView')}
               variant="ghost"
-              size="sm"
+              size="xs"
               onClick={handleRemoveField}
-              icon={<PiTrashSimpleBold />}
+              icon={<PiMinusBold />}
             />
           </Flex>
           <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeNodes.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeNodes.tsx
index 80f766e7ee4..ddcb74a3811 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeNodes.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeNodes.tsx
@@ -1,7 +1,6 @@
 import { Flex, FormControl } from '@invoke-ai/ui-library';
 import { FieldHandle } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldHandle';
-import { InputFieldLinearViewConfigIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldLinearViewConfigIconButton';
-import { InputFieldNotesIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButton';
+import { InputFieldNotesIconButtonEditable } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButtonEditable';
 import { InputFieldResetToDefaultValueIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToDefaultValueIconButton';
 import { useInputFieldConnectionState } from 'features/nodes/hooks/useInputFieldConnectionState';
 import { useInputFieldIsConnected } from 'features/nodes/hooks/useInputFieldIsConnected';
@@ -76,8 +75,7 @@ export const InputFieldEditModeNodes = memo(({ nodeId, fieldName }: Props) => {
             <InputFieldTitle nodeId={nodeId} fieldName={fieldName} isInvalid={isInvalid} />
             {isHovered && (
               <>
-                <InputFieldLinearViewConfigIconButton nodeId={nodeId} fieldName={fieldName} />
-                <InputFieldNotesIconButton nodeId={nodeId} fieldName={fieldName} />
+                <InputFieldNotesIconButtonEditable nodeId={nodeId} fieldName={fieldName} />
                 <InputFieldResetToDefaultValueIconButton nodeId={nodeId} fieldName={fieldName} />
                 <InputFieldAddRemoveLinearViewIconButton nodeId={nodeId} fieldName={fieldName} />
               </>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesHelperText.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesHelperText.tsx
new file mode 100644
index 00000000000..8cf58f07c59
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesHelperText.tsx
@@ -0,0 +1,25 @@
+import type { FormHelperTextProps } from '@invoke-ai/ui-library';
+import { FormHelperText } from '@invoke-ai/ui-library';
+import { useInputFieldNotes } from 'features/nodes/hooks/useInputFieldNotes';
+import { memo } from 'react';
+
+type Props = FormHelperTextProps & {
+  nodeId: string;
+  fieldName: string;
+};
+
+export const InputFieldNotesHelperText = memo(({ nodeId, fieldName, ...rest }: Props) => {
+  const notes = useInputFieldNotes(nodeId, fieldName);
+
+  if (!notes?.trim()) {
+    return null;
+  }
+
+  return (
+    <FormHelperText px={1} {...rest}>
+      {notes}
+    </FormHelperText>
+  );
+});
+
+InputFieldNotesHelperText.displayName = 'InputFieldNotesHelperText';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButtonEditable.tsx
similarity index 65%
rename from invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButton.tsx
rename to invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButtonEditable.tsx
index 23508f22cc3..a33fc9d4433 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButtonEditable.tsx
@@ -1,12 +1,10 @@
 import {
-  Box,
   FormControl,
   FormLabel,
   IconButton,
   Popover,
   PopoverContent,
   PopoverTrigger,
-  Text,
   Textarea,
 } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
@@ -20,10 +18,9 @@ import { PiNoteBold } from 'react-icons/pi';
 type Props = {
   nodeId: string;
   fieldName: string;
-  readOnly?: boolean;
 };
 
-export const InputFieldNotesIconButton = memo(({ nodeId, fieldName, readOnly }: Props) => {
+export const InputFieldNotesIconButtonEditable = memo(({ nodeId, fieldName }: Props) => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const notes = useInputFieldNotes(nodeId, fieldName);
@@ -34,10 +31,6 @@ export const InputFieldNotesIconButton = memo(({ nodeId, fieldName, readOnly }:
     [dispatch, fieldName, nodeId]
   );
 
-  if (readOnly && !notes?.trim()) {
-    return null;
-  }
-
   return (
     <Popover>
       <PopoverTrigger>
@@ -53,26 +46,19 @@ export const InputFieldNotesIconButton = memo(({ nodeId, fieldName, readOnly }:
       <PopoverContent p={2} w={256}>
         <FormControl orientation="vertical">
           <FormLabel>{t('nodes.notes')}</FormLabel>
-          {readOnly && (
-            <Box borderWidth={1} borderRadius="base" p={2} w="full" h="full">
-              <Text fontSize="sm">{notes}</Text>
-            </Box>
-          )}
-          {!readOnly && (
-            <Textarea
-              className="nodrag nopan nowheel"
-              fontSize="sm"
-              value={notes ?? ''}
-              onChange={onChange}
-              p={2}
-              resize="none"
-              rows={5}
-            />
-          )}
+          <Textarea
+            className="nodrag nopan nowheel"
+            fontSize="sm"
+            value={notes ?? ''}
+            onChange={onChange}
+            p={2}
+            resize="none"
+            rows={5}
+          />
         </FormControl>
       </PopoverContent>
     </Popover>
   );
 });
 
-InputFieldNotesIconButton.displayName = 'InputFieldNotesIconButton';
+InputFieldNotesIconButtonEditable.displayName = 'InputFieldNotesIconButtonEditable';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButtonReadonly.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButtonReadonly.tsx
new file mode 100644
index 00000000000..5dcc74382f7
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButtonReadonly.tsx
@@ -0,0 +1,45 @@
+import { Box, Flex, IconButton, Popover, PopoverContent, PopoverTrigger, Text } from '@invoke-ai/ui-library';
+import { useInputFieldNotes } from 'features/nodes/hooks/useInputFieldNotes';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiNoteBold } from 'react-icons/pi';
+
+type Props = {
+  nodeId: string;
+  fieldName: string;
+};
+
+export const InputFieldNotesIconButtonReadonly = memo(({ nodeId, fieldName }: Props) => {
+  const { t } = useTranslation();
+  const notes = useInputFieldNotes(nodeId, fieldName);
+
+  if (!notes?.trim()) {
+    return null;
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <IconButton
+          variant="ghost"
+          tooltip={t('nodes.notes')}
+          aria-label={t('nodes.notes')}
+          icon={<PiNoteBold />}
+          size="xs"
+        />
+      </PopoverTrigger>
+      <PopoverContent p={2} w={256}>
+        <Flex flexDir="column" gap={2}>
+          <Text color="base.300" fontWeight="semibold" fontSize="sm">
+            {t('nodes.notes')}
+          </Text>
+          <Box borderWidth={1} borderRadius="base" p={2} w="full" h="full">
+            <Text fontSize="sm">{notes}</Text>
+          </Box>
+        </Flex>
+      </PopoverContent>
+    </Popover>
+  );
+});
+
+InputFieldNotesIconButtonReadonly.displayName = 'InputFieldNotesIconButtonReadonly';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToInitialValueIconButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToInitialValueIconButton.tsx
index 3acfc24e7fb..a611275867c 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToInitialValueIconButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToInitialValueIconButton.tsx
@@ -9,7 +9,7 @@ type Props = {
   fieldName: string;
 };
 
-const InputFieldResetToInitialValueIconButton = ({ nodeId, fieldName }: Props) => {
+export const InputFieldResetToInitialValueIconButton = memo(({ nodeId, fieldName }: Props) => {
   const { t } = useTranslation();
   const { isValueChanged, resetToInitialLinearViewValue } = useInputFieldInitialLinearViewValue(nodeId, fieldName);
 
@@ -25,6 +25,6 @@ const InputFieldResetToInitialValueIconButton = ({ nodeId, fieldName }: Props) =
       isDisabled={!isValueChanged}
     />
   );
-};
+});
 
-export default memo(InputFieldResetToInitialValueIconButton);
+InputFieldResetToInitialValueIconButton.displayName = 'InputFieldResetToInitialValueIconButton';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode.tsx
index e7c1e1e87fa..e1f2a748532 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode.tsx
@@ -1,8 +1,10 @@
-import { Flex, FormLabel, Spacer } from '@invoke-ai/ui-library';
-import { InputFieldNotesIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButton';
+import { FormControl, FormLabel, Spacer } from '@invoke-ai/ui-library';
+import { InputFieldNotesHelperText } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesHelperText';
+import { InputFieldNotesIconButtonReadonly } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButtonReadonly';
 import { InputFieldRenderer } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer';
-import InputFieldResetToInitialValueIconButton from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToInitialValueIconButton';
+import { InputFieldResetToInitialValueIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToInitialValueIconButton';
 import { useInputFieldLabel } from 'features/nodes/hooks/useInputFieldLabel';
+import { useInputFieldLinearViewConfig } from 'features/nodes/hooks/useInputFieldLinearViewConfig';
 import { useInputFieldTemplateTitle } from 'features/nodes/hooks/useInputFieldTemplateTitle';
 import { memo } from 'react';
 
@@ -14,17 +16,23 @@ type Props = {
 export const InputFieldViewMode = memo(({ nodeId, fieldName }: Props) => {
   const label = useInputFieldLabel(nodeId, fieldName);
   const fieldTemplateTitle = useInputFieldTemplateTitle(nodeId, fieldName);
+  const linearViewConfig = useInputFieldLinearViewConfig(nodeId, fieldName);
 
   return (
-    <Flex position="relative" w="full" gap="2" flexDir="column">
-      <Flex alignItems="center" gap={1}>
-        <FormLabel fontSize="sm">{label || fieldTemplateTitle}</FormLabel>
+    <FormControl w="full" gap={2} flexDir="column">
+      <FormLabel fontSize="sm" display="flex" w="full" m={0} gap={2} px={1}>
+        {label || fieldTemplateTitle}
         <Spacer />
+        {linearViewConfig?.notesDisplay === 'icon-with-popover' && (
+          <InputFieldNotesIconButtonReadonly nodeId={nodeId} fieldName={fieldName} />
+        )}
         <InputFieldResetToInitialValueIconButton nodeId={nodeId} fieldName={fieldName} />
-        <InputFieldNotesIconButton nodeId={nodeId} fieldName={fieldName} readOnly />
-      </Flex>
+      </FormLabel>
       <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
-    </Flex>
+      {linearViewConfig?.notesDisplay === 'helper-text' && (
+        <InputFieldNotesHelperText nodeId={nodeId} fieldName={fieldName} />
+      )}
+    </FormControl>
   );
 });
 

From 254d9b52d6e2871d7a398ad1e42030fc0af681ec Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 21 Jan 2025 08:06:20 +1100
Subject: [PATCH 15/58] feat(ui): use workflows view context

---
 .../sidePanel/EditModeLeftPanelContent.tsx    | 41 ++++++++++---------
 .../viewMode/ViewModeLeftPanelContent.tsx     | 17 ++++----
 .../features/nodes/contexts/ViewContext.tsx   | 10 +++--
 .../components/tabs/WorkflowsTabContent.tsx   |  9 ++--
 4 files changed, 44 insertions(+), 33 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/EditModeLeftPanelContent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/EditModeLeftPanelContent.tsx
index 4b4f8b86b90..0017641278a 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/EditModeLeftPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/EditModeLeftPanelContent.tsx
@@ -2,6 +2,7 @@ import 'reactflow/dist/style.css';
 
 import { Box } from '@invoke-ai/ui-library';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+import { ViewContextProvider } from 'features/nodes/contexts/ViewContext';
 import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
 import type { CSSProperties } from 'react';
 import { memo, useCallback, useRef } from 'react';
@@ -24,25 +25,27 @@ export const EditModeLeftPanelContent = memo(() => {
   }, []);
 
   return (
-    <Box position="relative" w="full" h="full">
-      <ScrollableContent>
-        <PanelGroup
-          ref={panelGroupRef}
-          id="workflow-panel-group"
-          autoSaveId="workflow-panel-group"
-          direction="vertical"
-          style={panelGroupStyles}
-        >
-          <Panel id="workflow" collapsible minSize={25}>
-            <WorkflowFieldsLinearViewPanel />
-          </Panel>
-          <ResizeHandle onDoubleClick={handleDoubleClickHandle} />
-          <Panel id="inspector" collapsible minSize={25}>
-            <WorkflowNodeInspectorPanel />
-          </Panel>
-        </PanelGroup>
-      </ScrollableContent>
-    </Box>
+    <ViewContextProvider view="edit-mode-linear">
+      <Box position="relative" w="full" h="full">
+        <ScrollableContent>
+          <PanelGroup
+            ref={panelGroupRef}
+            id="workflow-panel-group"
+            autoSaveId="workflow-panel-group"
+            direction="vertical"
+            style={panelGroupStyles}
+          >
+            <Panel id="workflow" collapsible minSize={25}>
+              <WorkflowFieldsLinearViewPanel />
+            </Panel>
+            <ResizeHandle onDoubleClick={handleDoubleClickHandle} />
+            <Panel id="inspector" collapsible minSize={25}>
+              <WorkflowNodeInspectorPanel />
+            </Panel>
+          </PanelGroup>
+        </ScrollableContent>
+      </Box>
+    </ViewContextProvider>
   );
 });
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/ViewModeLeftPanelContent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/ViewModeLeftPanelContent.tsx
index 25ee7420200..6ec0815b5fe 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/ViewModeLeftPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/ViewModeLeftPanelContent.tsx
@@ -5,6 +5,7 @@ import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { InputFieldGate } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate';
 import { InputFieldViewMode } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode';
+import { ViewContextProvider } from 'features/nodes/contexts/ViewContext';
 import { selectWorkflowSlice } from 'features/nodes/store/workflowSlice';
 import { t } from 'i18next';
 import { memo } from 'react';
@@ -16,13 +17,15 @@ const selectExposedFields = createMemoizedSelector(selectWorkflowSlice, (workflo
 
 export const ViewModeLeftPanelContent = memo(() => {
   return (
-    <Box position="relative" w="full" h="full">
-      <ScrollableContent>
-        <Flex position="relative" flexDir="column" alignItems="flex-start" p={1} gap={2} w="full" h="full">
-          <ViewModeLeftPanelContentInner />
-        </Flex>
-      </ScrollableContent>
-    </Box>
+    <ViewContextProvider view="view-mode-linear">
+      <Box position="relative" w="full" h="full">
+        <ScrollableContent>
+          <Flex position="relative" flexDir="column" alignItems="flex-start" p={1} gap={2} w="full" h="full">
+            <ViewModeLeftPanelContentInner />
+          </Flex>
+        </ScrollableContent>
+      </Box>
+    </ViewContextProvider>
   );
 });
 ViewModeLeftPanelContent.displayName = 'ViewModeLeftPanelContent';
diff --git a/invokeai/frontend/web/src/features/nodes/contexts/ViewContext.tsx b/invokeai/frontend/web/src/features/nodes/contexts/ViewContext.tsx
index 6ed03f0e5f8..ae11ef45e29 100644
--- a/invokeai/frontend/web/src/features/nodes/contexts/ViewContext.tsx
+++ b/invokeai/frontend/web/src/features/nodes/contexts/ViewContext.tsx
@@ -2,12 +2,14 @@ import type { PropsWithChildren } from 'react';
 import { createContext, memo, useContext } from 'react';
 import { assert } from 'tsafe';
 
-type ViewType = 'linear-user' | 'linear-editor' | 'nodes-editor';
+type View = 'view-mode-linear' | 'edit-mode-linear' | 'edit-mode-nodes';
 
-const ViewContext = createContext<ViewType | null>(null);
+const ViewContext = createContext<View | null>(null);
 
-export const ViewContextProvider = memo((props: PropsWithChildren<{ viewType: ViewType }>) => {
-  return <ViewContext.Provider value={props.viewType}>{props.children}</ViewContext.Provider>;
+type Props = PropsWithChildren<{ view: View }>;
+
+export const ViewContextProvider = memo((props: Props) => {
+  return <ViewContext.Provider value={props.view}>{props.children}</ViewContext.Provider>;
 });
 
 ViewContextProvider.displayName = 'ViewContextProvider';
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/WorkflowsTabContent.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/WorkflowsTabContent.tsx
index b972b93bdce..1ed2918077c 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/WorkflowsTabContent.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/WorkflowsTabContent.tsx
@@ -1,6 +1,7 @@
 import { useAppSelector } from 'app/store/storeHooks';
 import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
 import NodeEditor from 'features/nodes/components/NodeEditor';
+import { ViewContextProvider } from 'features/nodes/contexts/ViewContext';
 import { selectWorkflowMode } from 'features/nodes/store/workflowSlice';
 import { memo } from 'react';
 import { ReactFlowProvider } from 'reactflow';
@@ -10,9 +11,11 @@ export const WorkflowsMainPanel = memo(() => {
 
   if (mode === 'edit') {
     return (
-      <ReactFlowProvider>
-        <NodeEditor />
-      </ReactFlowProvider>
+      <ViewContextProvider view="edit-mode-nodes">
+        <ReactFlowProvider>
+          <NodeEditor />
+        </ReactFlowProvider>
+      </ViewContextProvider>
     );
   }
 

From 914ef1f664a73a0f19a4fb9a431969b5996668aa Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 21 Jan 2025 08:06:33 +1100
Subject: [PATCH 16/58] fix(ui): dynamic prompts infinite recursion (wip)

---
 ...torDynamicPromptsCombinatorialSettings.tsx | 16 +++++++-------
 ...gGeneratorDynamicPromptsRandomSettings.tsx | 21 ++++++++++++-------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringGeneratorDynamicPromptsCombinatorialSettings.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringGeneratorDynamicPromptsCombinatorialSettings.tsx
index 7937838a8b1..b11e2b01a28 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringGeneratorDynamicPromptsCombinatorialSettings.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringGeneratorDynamicPromptsCombinatorialSettings.tsx
@@ -29,8 +29,7 @@ export const StringGeneratorDynamicPromptsCombinatorialSettings = memo(
     );
 
     const arg = useMemo(() => {
-      const { input, maxPrompts } = state;
-      return { prompt: input, max_prompts: maxPrompts, combinatorial: true };
+      return { prompt: state.input, max_prompts: state.maxPrompts, combinatorial: true };
     }, [state]);
     const [debouncedArg] = useDebounce(arg, 300);
 
@@ -38,13 +37,16 @@ export const StringGeneratorDynamicPromptsCombinatorialSettings = memo(
 
     useEffect(() => {
       if (isLoading) {
-        onChange({ ...state, values: loadingValues });
-      } else if (data) {
-        onChange({ ...state, values: data.prompts });
-      } else {
+        return;
+      }
+
+      if (!data) {
         onChange({ ...state, values: [] });
+        return;
       }
-    }, [data, isLoading, loadingValues, onChange, state]);
+
+      onChange({ ...state, values: data.prompts });
+    }, [data, isLoading, onChange, state]);
 
     return (
       <Flex gap={2} flexDir="column">
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringGeneratorDynamicPromptsRandomSettings.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringGeneratorDynamicPromptsRandomSettings.tsx
index d9aa664ede0..be47fe5a178 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringGeneratorDynamicPromptsRandomSettings.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringGeneratorDynamicPromptsRandomSettings.tsx
@@ -1,5 +1,6 @@
 import { Checkbox, CompositeNumberInput, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { GeneratorTextareaWithFileUpload } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/GeneratorTextareaWithFileUpload';
+import { useViewContext } from 'features/nodes/contexts/ViewContext';
 import type { StringGeneratorDynamicPromptsRandom } from 'features/nodes/types/field';
 import { isNil, random } from 'lodash-es';
 import { memo, useCallback, useEffect, useMemo } from 'react';
@@ -14,6 +15,7 @@ type StringGeneratorDynamicPromptsRandomSettingsProps = {
 export const StringGeneratorDynamicPromptsRandomSettings = memo(
   ({ state, onChange }: StringGeneratorDynamicPromptsRandomSettingsProps) => {
     const { t } = useTranslation();
+    const view = useViewContext();
     const loadingValues = useMemo(() => [`<${t('nodes.generatorLoading')}>`], [t]);
 
     const onChangeInput = useCallback(
@@ -39,22 +41,25 @@ export const StringGeneratorDynamicPromptsRandomSettings = memo(
     );
 
     const arg = useMemo(() => {
-      const { input, count, seed } = state;
-      return { prompt: input, max_prompts: count, combinatorial: false, seed: seed ?? random() };
-    }, [state]);
+      return { prompt: state.input, max_prompts: state.count, combinatorial: false, seed: state.seed ?? random() };
+    }, [state.count, state.input, state.seed]);
+
     const [debouncedArg] = useDebounce(arg, 300);
 
     const { data, isLoading } = useDynamicPromptsQuery(debouncedArg);
 
     useEffect(() => {
       if (isLoading) {
-        onChange({ ...state, values: loadingValues });
-      } else if (data) {
-        onChange({ ...state, values: data.prompts });
-      } else {
+        return;
+      }
+
+      if (!data) {
         onChange({ ...state, values: [] });
+        return;
       }
-    }, [data, isLoading, loadingValues, onChange, state]);
+
+      onChange({ ...state, values: data.prompts });
+    }, [data, isLoading, onChange, state, view]);
 
     return (
       <Flex gap={2} flexDir="column">

From 79af1e11d0e1180b5e12982aa1d4bef2ed305c4e Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 21 Jan 2025 17:44:54 +1100
Subject: [PATCH 17/58] feat(ui): rough out workflow builder data structure &
 dummy data

---
 .../Invocation/fields/InputFieldViewMode.tsx  |   6 +-
 .../inputs/BooleanFieldInputComponent.tsx     |   2 +-
 .../inputs/StringFieldInputComponent.tsx      |  12 +-
 .../sidePanel/workflow/WorkflowBuilder.tsx    | 145 ++++++++++++++
 .../sidePanel/workflow/WorkflowPanel.tsx      |   4 +-
 .../web/src/features/nodes/types/workflow.ts  | 182 ++++++++++++++++++
 6 files changed, 344 insertions(+), 7 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowBuilder.tsx

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode.tsx
index e1f2a748532..73f750b9c7f 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode.tsx
@@ -1,4 +1,4 @@
-import { FormControl, FormLabel, Spacer } from '@invoke-ai/ui-library';
+import { Box, FormControl, FormLabel, Spacer } from '@invoke-ai/ui-library';
 import { InputFieldNotesHelperText } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesHelperText';
 import { InputFieldNotesIconButtonReadonly } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButtonReadonly';
 import { InputFieldRenderer } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer';
@@ -28,7 +28,9 @@ export const InputFieldViewMode = memo(({ nodeId, fieldName }: Props) => {
         )}
         <InputFieldResetToInitialValueIconButton nodeId={nodeId} fieldName={fieldName} />
       </FormLabel>
-      <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
+      <Box w="full" h="full">
+        <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
+      </Box>
       {linearViewConfig?.notesDisplay === 'helper-text' && (
         <InputFieldNotesHelperText nodeId={nodeId} fieldName={fieldName} />
       )}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BooleanFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BooleanFieldInputComponent.tsx
index 9d3f4cd13f0..1ca47128015 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BooleanFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/BooleanFieldInputComponent.tsx
@@ -27,7 +27,7 @@ const BooleanFieldInputComponent = (
     [dispatch, field.name, nodeId]
   );
 
-  return <Switch className="nodrag" onChange={handleValueChanged} isChecked={field.value}></Switch>;
+  return <Switch className="nodrag" onChange={handleValueChanged} isChecked={field.value} />;
 };
 
 export default memo(BooleanFieldInputComponent);
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldInputComponent.tsx
index d7307f3384b..f5f818d286d 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldInputComponent.tsx
@@ -25,10 +25,18 @@ const StringFieldInputComponent = (props: FieldComponentProps<StringFieldInputIn
   );
 
   if (fieldTemplate.ui_component === 'textarea') {
-    return <Textarea className="nodrag" onChange={handleValueChanged} value={field.value} rows={5} resize="none" />;
+    return (
+      <Textarea
+        className="nodrag nowheel nopan"
+        onChange={handleValueChanged}
+        value={field.value}
+        h="full"
+        resize="none"
+      />
+    );
   }
 
-  return <Input className="nodrag" onChange={handleValueChanged} value={field.value} />;
+  return <Input className="nodrag nowheel nopan" onChange={handleValueChanged} value={field.value} />;
 };
 
 export default memo(StringFieldInputComponent);
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowBuilder.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowBuilder.tsx
new file mode 100644
index 00000000000..523fd7e48e5
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowBuilder.tsx
@@ -0,0 +1,145 @@
+import { Box, Divider, Heading, Text } from '@invoke-ai/ui-library';
+import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+import { InputFieldGate } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate';
+import { InputFieldViewMode } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode';
+import {
+  type BuilderElement,
+  type ContainerElement,
+  data,
+  type DividerElement,
+  type FieldElement,
+  type HeadingElement,
+  type NotesElement,
+} from 'features/nodes/types/workflow';
+import { createContext, memo, useContext, useMemo } from 'react';
+import { assert } from 'tsafe';
+
+const ContainerContext = createContext<{ orientation: ContainerElement['orientation']; depth: number } | null>(null);
+
+const useContainerContextContext = () => {
+  const context = useContext(ContainerContext);
+  assert(context !== null);
+  return context;
+};
+
+export const WorkflowBuilder = memo(() => {
+  return (
+    <ScrollableContent>
+      <ElementComponent element={data} />
+    </ScrollableContent>
+  );
+});
+
+WorkflowBuilder.displayName = 'WorkflowBuilder';
+
+const ElementComponent = ({ element }: { element: BuilderElement }) => {
+  switch (element.type) {
+    case 'container':
+      return <ContainerElementComponent element={element} />;
+    case 'field':
+      return <FieldElementComponent element={element} />;
+    case 'heading':
+      return <HeadingElementComponent element={element} />;
+    case 'notes':
+      return <NotesElementComponent element={element} />;
+    case 'divider':
+      return <DividerElementComponent element={element} />;
+    default:
+      assert(false, `Unhandled element type: ${element}`);
+  }
+};
+
+const ContainerElementComponent = ({ element }: { element: ContainerElement }) => {
+  const { children, orientation } = element;
+
+  const parentCtx = useContext(ContainerContext);
+  const depth = useMemo(() => (parentCtx ? parentCtx.depth + 1 : 0), [parentCtx]);
+  const ctx = useMemo(() => ({ orientation, depth }), [depth, orientation]);
+
+  const gridAutoX = useMemo(() => {
+    return children
+      .map(({ type }) => {
+        switch (type) {
+          case 'divider':
+            return 'min-content';
+          case 'notes':
+          case 'heading':
+          case 'container':
+          case 'field':
+            return 'auto';
+        }
+      })
+      .join(' ');
+  }, [children]);
+
+  if (orientation === 'horizontal') {
+    return (
+      <ContainerContext.Provider value={ctx}>
+        <Box id={element.id} display="grid" gridAutoFlow="column" gridAutoColumns={gridAutoX} gap={2} overflow="hidden">
+          {children.map((child) => (
+            <ElementComponent key={child.id} element={child} />
+          ))}
+        </Box>
+      </ContainerContext.Provider>
+    );
+  }
+
+  // orientation === 'vertical'
+  return (
+    <ContainerContext.Provider value={ctx}>
+      <Box id={element.id} display="grid" gridAutoFlow="row" gridAutoRows={gridAutoX} gap={2} overflow="hidden">
+        {children.map((child) => (
+          <ElementComponent key={child.id} element={child} />
+        ))}
+      </Box>
+    </ContainerContext.Provider>
+  );
+};
+
+const FieldElementComponent = ({ element }: { element: FieldElement }) => {
+  const { fieldIdentifier } = element;
+
+  return (
+    <InputFieldGate nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName}>
+      <InputFieldViewMode nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName} />
+    </InputFieldGate>
+  );
+};
+
+const LEVEL_TO_SIZE = {
+  1: 'xl',
+  2: 'lg',
+  3: 'md',
+  4: 'sm',
+  5: 'xs',
+} as const;
+const HeadingElementComponent = ({ element }: { element: HeadingElement }) => {
+  const { content, level } = element;
+
+  return (
+    <Heading id={element.id} size={LEVEL_TO_SIZE[level]}>
+      {content}
+    </Heading>
+  );
+};
+
+const NotesElementComponent = ({ element }: { element: NotesElement }) => {
+  const { content, fontSize } = element;
+
+  return (
+    <Text id={element.id} fontSize={fontSize}>
+      {content}
+    </Text>
+  );
+};
+
+const DividerElementComponent = ({ element }: { element: DividerElement }) => {
+  const { orientation } = useContainerContextContext();
+
+  if (orientation === 'horizontal') {
+    return <Divider id={element.id} orientation="vertical" />;
+  }
+
+  // orientation === 'vertical'
+  return <Divider id={element.id} orientation="horizontal" />;
+};
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
index d6970bd3428..d98e6ed83ef 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
@@ -1,10 +1,10 @@
 import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
+import { WorkflowBuilder } from 'features/nodes/components/sidePanel/workflow/WorkflowBuilder';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import WorkflowGeneralTab from './WorkflowGeneralTab';
 import WorkflowJSONTab from './WorkflowJSONTab';
-import WorkflowLinearTab from './WorkflowLinearTab';
 
 const WorkflowFieldsLinearViewPanel = () => {
   const { t } = useTranslation();
@@ -19,7 +19,7 @@ const WorkflowFieldsLinearViewPanel = () => {
 
         <TabPanels>
           <TabPanel>
-            <WorkflowLinearTab />
+            <WorkflowBuilder />
           </TabPanel>
           <TabPanel>
             <WorkflowGeneralTab />
diff --git a/invokeai/frontend/web/src/features/nodes/types/workflow.ts b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
index 9805edfaf2d..d4d1ce2fbc5 100644
--- a/invokeai/frontend/web/src/features/nodes/types/workflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
@@ -1,3 +1,4 @@
+import { nanoid } from 'nanoid';
 import { z } from 'zod';
 
 import { zFieldIdentifier } from './field';
@@ -75,3 +76,184 @@ export const zWorkflowV3 = z.object({
 });
 export type WorkflowV3 = z.infer<typeof zWorkflowV3>;
 // #endregion
+
+// #region Workflow Builder
+const zElementId = z.string().trim().min(1);
+
+const zFieldElement = z.object({
+  id: zElementId,
+  type: z.literal('field'),
+  fieldIdentifier: zFieldIdentifier,
+});
+export type FieldElement = z.infer<typeof zFieldElement>;
+
+const zHeadingElement = z.object({
+  id: zElementId,
+  type: z.literal('heading'),
+  content: z.string(),
+  level: z.union([z.literal(1), z.literal(2), z.literal(3), z.literal(4), z.literal(5)]),
+});
+export type HeadingElement = z.infer<typeof zHeadingElement>;
+
+const zNotesElement = z.object({
+  id: zElementId,
+  type: z.literal('notes'),
+  content: z.string(),
+  fontSize: z.enum(['sm', 'md', 'lg']),
+});
+export type NotesElement = z.infer<typeof zNotesElement>;
+
+const zDividerElement = z.object({
+  id: zElementId,
+  type: z.literal('divider'),
+});
+export type DividerElement = z.infer<typeof zDividerElement>;
+
+export type ContainerElement = {
+  id: string;
+  type: 'container';
+  children: BuilderElement[];
+  orientation: 'horizontal' | 'vertical';
+};
+
+export type BuilderElement = FieldElement | HeadingElement | NotesElement | DividerElement | ContainerElement;
+
+const zContainerElement: z.ZodType<ContainerElement> = z.object({
+  id: zElementId,
+  type: z.literal('container'),
+  children: z.lazy(() => z.array(zElement)),
+  orientation: z.enum(['horizontal', 'vertical']),
+});
+
+const zElement = z.union([zFieldElement, zNotesElement, zDividerElement, zContainerElement]);
+
+type ElementType = BuilderElement['type'];
+
+export const data: ContainerElement = {
+  id: nanoid(),
+  type: 'container',
+  orientation: 'vertical',
+  children: [
+    { id: nanoid(), type: 'heading', content: 'My Cool Workflow', level: 1 },
+    {
+      id: nanoid(),
+      type: 'notes',
+      content: 'This is a description of what my workflow does. It does things.',
+      fontSize: 'md',
+    },
+    { id: nanoid(), type: 'heading', content: 'First Section', level: 2 },
+    {
+      id: nanoid(),
+      type: 'notes',
+      content: 'The first section includes fields relevant to the first section. This note describes that fact.',
+      fontSize: 'sm',
+    },
+    {
+      id: nanoid(),
+      type: 'container',
+      orientation: 'horizontal',
+      children: [
+        {
+          id: nanoid(),
+          type: 'field',
+          fieldIdentifier: { nodeId: '7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', fieldName: 'image' },
+        },
+        {
+          id: nanoid(),
+          type: 'field',
+          fieldIdentifier: { nodeId: '7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', fieldName: 'image' },
+        },
+        {
+          id: nanoid(),
+          type: 'field',
+          fieldIdentifier: { nodeId: '7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', fieldName: 'image' },
+        },
+      ],
+    },
+    {
+      id: nanoid(),
+      type: 'field',
+      fieldIdentifier: { nodeId: '9c058600-8d73-4702-912b-0ccf37403bfd', fieldName: 'value' },
+    },
+    {
+      id: nanoid(),
+      type: 'field',
+      fieldIdentifier: { nodeId: '7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', fieldName: 'value' },
+    },
+    {
+      id: nanoid(),
+      type: 'field',
+      fieldIdentifier: { nodeId: '4e16cbf6-457c-46fb-9ab7-9cb262fa1e03', fieldName: 'value' },
+    },
+    {
+      id: nanoid(),
+      type: 'field',
+      fieldIdentifier: { nodeId: '39cb5272-a9d7-4da9-9c35-32e02b46bb34', fieldName: 'color' },
+    },
+    {
+      id: nanoid(),
+      type: 'container',
+      orientation: 'horizontal',
+      children: [
+        {
+          id: nanoid(),
+          type: 'field',
+          fieldIdentifier: { nodeId: '4f609a81-0e25-47d1-ba0d-f24fedd5273f', fieldName: 'value' },
+        },
+        {
+          id: nanoid(),
+          type: 'field',
+          fieldIdentifier: { nodeId: '4f609a81-0e25-47d1-ba0d-f24fedd5273f', fieldName: 'value' },
+        },
+        {
+          id: nanoid(),
+          type: 'field',
+          fieldIdentifier: { nodeId: '4f609a81-0e25-47d1-ba0d-f24fedd5273f', fieldName: 'value' },
+        },
+        {
+          id: nanoid(),
+          type: 'field',
+          fieldIdentifier: { nodeId: '4f609a81-0e25-47d1-ba0d-f24fedd5273f', fieldName: 'value' },
+        },
+      ],
+    },
+    {
+      id: nanoid(),
+      type: 'field',
+      fieldIdentifier: { nodeId: '14744f68-9000-4694-b4d6-cbe83ee231ee', fieldName: 'model' },
+    },
+    { id: nanoid(), type: 'divider' },
+    { id: nanoid(), type: 'notes', content: 'These are some notes that are definitely super helpful.', fontSize: 'sm' },
+    { id: nanoid(), type: 'divider' },
+    {
+      id: nanoid(),
+      type: 'container',
+      orientation: 'horizontal',
+      children: [
+        {
+          id: nanoid(),
+          type: 'container',
+          orientation: 'vertical',
+          children: [
+            {
+              id: nanoid(),
+              type: 'field',
+              fieldIdentifier: { nodeId: '7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', fieldName: 'image' },
+            },
+            {
+              id: nanoid(),
+              type: 'field',
+              fieldIdentifier: { nodeId: '7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', fieldName: 'image' },
+            },
+          ],
+        },
+        { id: nanoid(), type: 'divider' },
+        {
+          id: nanoid(),
+          type: 'field',
+          fieldIdentifier: { nodeId: '7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', fieldName: 'value' },
+        },
+      ],
+    },
+  ],
+};

From e9cb3f6abe2ed486aa4f5d71169d701638ee8382 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 22 Jan 2025 09:33:46 +1100
Subject: [PATCH 18/58] refactor(ui): split up float and integer field
 renderers

---
 .../Invocation/fields/InputFieldRenderer.tsx  |  22 +-
 .../FloatFieldCollectionInputComponent.tsx    | 221 ++++++++++++++++++
 .../inputs/FloatFieldInputComponent.tsx       |  74 ++++++
 ... IntegerFieldCollectionInputComponent.tsx} |  70 +++---
 .../inputs/IntegerFieldInputComponent.tsx     |  74 ++++++
 .../inputs/NumberFieldInputComponent.tsx      |  89 -------
 .../src/features/nodes/store/nodesSlice.ts    |  26 ++-
 7 files changed, 428 insertions(+), 148 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatFieldCollectionInputComponent.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatFieldInputComponent.tsx
 rename invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/{NumberFieldCollectionInputComponent.tsx => IntegerFieldCollectionInputComponent.tsx} (73%)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IntegerFieldInputComponent.tsx
 delete mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldInputComponent.tsx

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
index 67637947650..cb065005cc4 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
@@ -1,8 +1,10 @@
+import { FloatFieldCollectionInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatFieldCollectionInputComponent';
+import { FloatFieldInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatFieldInputComponent';
 import { FloatGeneratorFieldInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatGeneratorFieldComponent';
 import { ImageFieldCollectionInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent';
+import { IntegerFieldCollectionInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/IntegerFieldCollectionInputComponent';
 import { IntegerGeneratorFieldInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/IntegerGeneratorFieldComponent';
 import ModelIdentifierFieldInputComponent from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/ModelIdentifierFieldInputComponent';
-import { NumberFieldCollectionInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldCollectionInputComponent';
 import { StringFieldCollectionInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldCollectionInputComponent';
 import { StringGeneratorFieldInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/StringGeneratorFieldComponent';
 import { useInputFieldInstance } from 'features/nodes/hooks/useInputFieldInstance';
@@ -91,10 +93,10 @@ import EnumFieldInputComponent from './inputs/EnumFieldInputComponent';
 import FluxMainModelFieldInputComponent from './inputs/FluxMainModelFieldInputComponent';
 import FluxVAEModelFieldInputComponent from './inputs/FluxVAEModelFieldInputComponent';
 import ImageFieldInputComponent from './inputs/ImageFieldInputComponent';
+import { IntegerFieldInputComponent } from './inputs/IntegerFieldInputComponent';
 import IPAdapterModelFieldInputComponent from './inputs/IPAdapterModelFieldInputComponent';
 import LoRAModelFieldInputComponent from './inputs/LoRAModelFieldInputComponent';
 import MainModelFieldInputComponent from './inputs/MainModelFieldInputComponent';
-import NumberFieldInputComponent from './inputs/NumberFieldInputComponent';
 import RefinerModelFieldInputComponent from './inputs/RefinerModelFieldInputComponent';
 import SchedulerFieldInputComponent from './inputs/SchedulerFieldInputComponent';
 import SD3MainModelFieldInputComponent from './inputs/SD3MainModelFieldInputComponent';
@@ -126,20 +128,20 @@ export const InputFieldRenderer = memo(({ nodeId, fieldName }: InputFieldProps)
     return <BooleanFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
-  if (isIntegerFieldInputInstance(fieldInstance) && isIntegerFieldInputTemplate(fieldTemplate)) {
-    return <NumberFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isFloatFieldInputInstance(fieldInstance) && isFloatFieldInputTemplate(fieldTemplate)) {
+    return <FloatFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
-  if (isFloatFieldInputInstance(fieldInstance) && isFloatFieldInputTemplate(fieldTemplate)) {
-    return <NumberFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isFloatFieldCollectionInputInstance(fieldInstance) && isFloatFieldCollectionInputTemplate(fieldTemplate)) {
+    return <FloatFieldCollectionInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
-  if (isIntegerFieldCollectionInputInstance(fieldInstance) && isIntegerFieldCollectionInputTemplate(fieldTemplate)) {
-    return <NumberFieldCollectionInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isIntegerFieldInputInstance(fieldInstance) && isIntegerFieldInputTemplate(fieldTemplate)) {
+    return <IntegerFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
-  if (isFloatFieldCollectionInputInstance(fieldInstance) && isFloatFieldCollectionInputTemplate(fieldTemplate)) {
-    return <NumberFieldCollectionInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isIntegerFieldCollectionInputInstance(fieldInstance) && isIntegerFieldCollectionInputTemplate(fieldTemplate)) {
+    return <IntegerFieldCollectionInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
   if (isEnumFieldInputInstance(fieldInstance) && isEnumFieldInputTemplate(fieldTemplate)) {
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatFieldCollectionInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatFieldCollectionInputComponent.tsx
new file mode 100644
index 00000000000..0f4fa97827e
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatFieldCollectionInputComponent.tsx
@@ -0,0 +1,221 @@
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import {
+  Button,
+  CompositeNumberInput,
+  Divider,
+  Flex,
+  FormLabel,
+  Grid,
+  GridItem,
+  IconButton,
+} from '@invoke-ai/ui-library';
+import { NUMPY_RAND_MAX } from 'app/constants';
+import { useAppStore } from 'app/store/nanostores/store';
+import { getOverlayScrollbarsParams, overlayScrollbarsStyles } from 'common/components/OverlayScrollbars/constants';
+import { useInputFieldIsInvalid } from 'features/nodes/hooks/useInputFieldIsInvalid';
+import { fieldFloatCollectionValueChanged } from 'features/nodes/store/nodesSlice';
+import type { FloatFieldCollectionInputInstance, FloatFieldCollectionInputTemplate } from 'features/nodes/types/field';
+import { isNil } from 'lodash-es';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
+import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiXBold } from 'react-icons/pi';
+
+import type { FieldComponentProps } from './types';
+
+const overlayscrollbarsOptions = getOverlayScrollbarsParams().options;
+
+const sx = {
+  borderWidth: 1,
+  '&[data-error=true]': {
+    borderColor: 'error.500',
+    borderStyle: 'solid',
+  },
+} satisfies SystemStyleObject;
+
+export const FloatFieldCollectionInputComponent = memo(
+  (props: FieldComponentProps<FloatFieldCollectionInputInstance, FloatFieldCollectionInputTemplate>) => {
+    const { nodeId, field, fieldTemplate } = props;
+    const store = useAppStore();
+    const { t } = useTranslation();
+
+    const isInvalid = useInputFieldIsInvalid(nodeId, field.name);
+
+    const onChangeValue = useCallback(
+      (value: FloatFieldCollectionInputInstance['value']) => {
+        store.dispatch(fieldFloatCollectionValueChanged({ nodeId, fieldName: field.name, value }));
+      },
+      [field.name, nodeId, store]
+    );
+    const onRemoveNumber = useCallback(
+      (index: number) => {
+        const newValue = field.value ? [...field.value] : [];
+        newValue.splice(index, 1);
+        onChangeValue(newValue);
+      },
+      [field.value, onChangeValue]
+    );
+
+    const onChangeNumber = useCallback(
+      (index: number, value: number) => {
+        const newValue = field.value ? [...field.value] : [];
+        newValue[index] = value;
+        onChangeValue(newValue);
+      },
+      [field.value, onChangeValue]
+    );
+
+    const onAddNumber = useCallback(() => {
+      const newValue = field.value ? [...field.value, 0] : [0];
+      onChangeValue(newValue);
+    }, [field.value, onChangeValue]);
+
+    const min = useMemo(() => {
+      let min = -NUMPY_RAND_MAX;
+      if (!isNil(fieldTemplate.minimum)) {
+        min = fieldTemplate.minimum;
+      }
+      if (!isNil(fieldTemplate.exclusiveMinimum)) {
+        min = fieldTemplate.exclusiveMinimum + 0.01;
+      }
+      return min;
+    }, [fieldTemplate.exclusiveMinimum, fieldTemplate.minimum]);
+
+    const max = useMemo(() => {
+      let max = NUMPY_RAND_MAX;
+      if (!isNil(fieldTemplate.maximum)) {
+        max = fieldTemplate.maximum;
+      }
+      if (!isNil(fieldTemplate.exclusiveMaximum)) {
+        max = fieldTemplate.exclusiveMaximum - 0.01;
+      }
+      return max;
+    }, [fieldTemplate.exclusiveMaximum, fieldTemplate.maximum]);
+
+    const step = useMemo(() => {
+      if (isNil(fieldTemplate.multipleOf)) {
+        return 0.1;
+      }
+      return fieldTemplate.multipleOf;
+    }, [fieldTemplate.multipleOf]);
+
+    const fineStep = useMemo(() => {
+      if (isNil(fieldTemplate.multipleOf)) {
+        return 0.01;
+      }
+      return fieldTemplate.multipleOf;
+    }, [fieldTemplate.multipleOf]);
+
+    return (
+      <Flex
+        className="nodrag"
+        position="relative"
+        w="full"
+        h="auto"
+        maxH={64}
+        alignItems="stretch"
+        justifyContent="center"
+        p={1}
+        sx={sx}
+        data-error={isInvalid}
+        borderRadius="base"
+        flexDir="column"
+        gap={1}
+      >
+        <Button onClick={onAddNumber} variant="ghost">
+          {t('nodes.addItem')}
+        </Button>
+        {field.value && field.value.length > 0 && (
+          <>
+            <Divider />
+            <OverlayScrollbarsComponent
+              className="nowheel"
+              defer
+              style={overlayScrollbarsStyles}
+              options={overlayscrollbarsOptions}
+            >
+              <Grid gap={1} gridTemplateColumns="auto 1fr auto" alignItems="center">
+                {field.value.map((value, index) => (
+                  <FloatListItemContent
+                    key={index}
+                    value={value}
+                    index={index}
+                    min={min}
+                    max={max}
+                    step={step}
+                    fineStep={fineStep}
+                    onRemoveNumber={onRemoveNumber}
+                    onChangeNumber={onChangeNumber}
+                  />
+                ))}
+              </Grid>
+            </OverlayScrollbarsComponent>
+          </>
+        )}
+      </Flex>
+    );
+  }
+);
+
+FloatFieldCollectionInputComponent.displayName = 'FloatFieldCollectionInputComponent';
+
+type FloatListItemContentProps = {
+  value: number;
+  index: number;
+  min: number;
+  max: number;
+  step: number;
+  fineStep: number;
+  onRemoveNumber: (index: number) => void;
+  onChangeNumber: (index: number, value: number) => void;
+};
+
+const FloatListItemContent = memo(
+  ({ value, index, min, max, step, fineStep, onRemoveNumber, onChangeNumber }: FloatListItemContentProps) => {
+    const { t } = useTranslation();
+
+    const onClickRemove = useCallback(() => {
+      onRemoveNumber(index);
+    }, [index, onRemoveNumber]);
+    const onChange = useCallback(
+      (value: number) => {
+        onChangeNumber(index, value);
+      },
+      [index, onChangeNumber]
+    );
+
+    return (
+      <>
+        <GridItem>
+          <FormLabel ps={1} m={0}>
+            {index + 1}.
+          </FormLabel>
+        </GridItem>
+        <GridItem>
+          <CompositeNumberInput
+            onChange={onChange}
+            value={value}
+            min={min}
+            max={max}
+            step={step}
+            fineStep={fineStep}
+            className="nodrag"
+            flexGrow={1}
+          />
+        </GridItem>
+        <GridItem>
+          <IconButton
+            tabIndex={-1}
+            size="sm"
+            variant="link"
+            alignSelf="stretch"
+            onClick={onClickRemove}
+            icon={<PiXBold />}
+            aria-label={t('common.delete')}
+          />
+        </GridItem>
+      </>
+    );
+  }
+);
+FloatListItemContent.displayName = 'FloatListItemContent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatFieldInputComponent.tsx
new file mode 100644
index 00000000000..feeb9ec1d0d
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatFieldInputComponent.tsx
@@ -0,0 +1,74 @@
+import { CompositeNumberInput } from '@invoke-ai/ui-library';
+import { NUMPY_RAND_MAX } from 'app/constants';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { fieldFloatValueChanged } from 'features/nodes/store/nodesSlice';
+import type { FloatFieldInputInstance, FloatFieldInputTemplate } from 'features/nodes/types/field';
+import { isNil } from 'lodash-es';
+import { memo, useCallback, useMemo } from 'react';
+
+import type { FieldComponentProps } from './types';
+
+export const FloatFieldInputComponent = memo(
+  (props: FieldComponentProps<FloatFieldInputInstance, FloatFieldInputTemplate>) => {
+    const { nodeId, field, fieldTemplate } = props;
+    const dispatch = useAppDispatch();
+
+    const handleValueChanged = useCallback(
+      (value: number) => {
+        dispatch(fieldFloatValueChanged({ nodeId, fieldName: field.name, value }));
+      },
+      [dispatch, field.name, nodeId]
+    );
+
+    const min = useMemo(() => {
+      let min = -NUMPY_RAND_MAX;
+      if (!isNil(fieldTemplate.minimum)) {
+        min = fieldTemplate.minimum;
+      }
+      if (!isNil(fieldTemplate.exclusiveMinimum)) {
+        min = fieldTemplate.exclusiveMinimum + 0.01;
+      }
+      return min;
+    }, [fieldTemplate.exclusiveMinimum, fieldTemplate.minimum]);
+
+    const max = useMemo(() => {
+      let max = NUMPY_RAND_MAX;
+      if (!isNil(fieldTemplate.maximum)) {
+        max = fieldTemplate.maximum;
+      }
+      if (!isNil(fieldTemplate.exclusiveMaximum)) {
+        max = fieldTemplate.exclusiveMaximum - 0.01;
+      }
+      return max;
+    }, [fieldTemplate.exclusiveMaximum, fieldTemplate.maximum]);
+
+    const step = useMemo(() => {
+      if (isNil(fieldTemplate.multipleOf)) {
+        return 0.1;
+      }
+      return fieldTemplate.multipleOf;
+    }, [fieldTemplate.multipleOf]);
+
+    const fineStep = useMemo(() => {
+      if (isNil(fieldTemplate.multipleOf)) {
+        return 0.01;
+      }
+      return fieldTemplate.multipleOf;
+    }, [fieldTemplate.multipleOf]);
+
+    return (
+      <CompositeNumberInput
+        defaultValue={fieldTemplate.default}
+        onChange={handleValueChanged}
+        value={field.value}
+        min={min}
+        max={max}
+        step={step}
+        fineStep={fineStep}
+        className="nodrag"
+      />
+    );
+  }
+);
+
+FloatFieldInputComponent.displayName = 'FloatFieldInputComponent ';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldCollectionInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IntegerFieldCollectionInputComponent.tsx
similarity index 73%
rename from invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldCollectionInputComponent.tsx
rename to invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IntegerFieldCollectionInputComponent.tsx
index f39abde93d4..489cf065a54 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldCollectionInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IntegerFieldCollectionInputComponent.tsx
@@ -13,10 +13,8 @@ import { NUMPY_RAND_MAX } from 'app/constants';
 import { useAppStore } from 'app/store/nanostores/store';
 import { getOverlayScrollbarsParams, overlayScrollbarsStyles } from 'common/components/OverlayScrollbars/constants';
 import { useInputFieldIsInvalid } from 'features/nodes/hooks/useInputFieldIsInvalid';
-import { fieldNumberCollectionValueChanged } from 'features/nodes/store/nodesSlice';
+import { fieldIntegerCollectionValueChanged } from 'features/nodes/store/nodesSlice';
 import type {
-  FloatFieldCollectionInputInstance,
-  FloatFieldCollectionInputTemplate,
   IntegerFieldCollectionInputInstance,
   IntegerFieldCollectionInputTemplate,
 } from 'features/nodes/types/field';
@@ -38,41 +36,43 @@ const sx = {
   },
 } satisfies SystemStyleObject;
 
-export const NumberFieldCollectionInputComponent = memo(
-  (
-    props:
-      | FieldComponentProps<IntegerFieldCollectionInputInstance, IntegerFieldCollectionInputTemplate>
-      | FieldComponentProps<FloatFieldCollectionInputInstance, FloatFieldCollectionInputTemplate>
-  ) => {
+export const IntegerFieldCollectionInputComponent = memo(
+  (props: FieldComponentProps<IntegerFieldCollectionInputInstance, IntegerFieldCollectionInputTemplate>) => {
     const { nodeId, field, fieldTemplate } = props;
     const store = useAppStore();
     const { t } = useTranslation();
 
     const isInvalid = useInputFieldIsInvalid(nodeId, field.name);
-    const isIntegerField = useMemo(() => fieldTemplate.type.name === 'IntegerField', [fieldTemplate.type]);
+
+    const onChangeValue = useCallback(
+      (value: IntegerFieldCollectionInputInstance['value']) => {
+        store.dispatch(fieldIntegerCollectionValueChanged({ nodeId, fieldName: field.name, value }));
+      },
+      [field.name, nodeId, store]
+    );
 
     const onRemoveNumber = useCallback(
       (index: number) => {
         const newValue = field.value ? [...field.value] : [];
         newValue.splice(index, 1);
-        store.dispatch(fieldNumberCollectionValueChanged({ nodeId, fieldName: field.name, value: newValue }));
+        onChangeValue(newValue);
       },
-      [field.name, field.value, nodeId, store]
+      [field.value, onChangeValue]
     );
 
     const onChangeNumber = useCallback(
       (index: number, value: number) => {
         const newValue = field.value ? [...field.value] : [];
         newValue[index] = value;
-        store.dispatch(fieldNumberCollectionValueChanged({ nodeId, fieldName: field.name, value: newValue }));
+        onChangeValue(newValue);
       },
-      [field.name, field.value, nodeId, store]
+      [field.value, onChangeValue]
     );
 
     const onAddNumber = useCallback(() => {
       const newValue = field.value ? [...field.value, 0] : [0];
-      store.dispatch(fieldNumberCollectionValueChanged({ nodeId, fieldName: field.name, value: newValue }));
-    }, [field.name, field.value, nodeId, store]);
+      onChangeValue(newValue);
+    }, [field.value, onChangeValue]);
 
     const min = useMemo(() => {
       let min = -NUMPY_RAND_MAX;
@@ -98,17 +98,17 @@ export const NumberFieldCollectionInputComponent = memo(
 
     const step = useMemo(() => {
       if (isNil(fieldTemplate.multipleOf)) {
-        return isIntegerField ? 1 : 0.1;
+        return 1;
       }
       return fieldTemplate.multipleOf;
-    }, [fieldTemplate.multipleOf, isIntegerField]);
+    }, [fieldTemplate.multipleOf]);
 
     const fineStep = useMemo(() => {
       if (isNil(fieldTemplate.multipleOf)) {
-        return isIntegerField ? 1 : 0.01;
+        return 1;
       }
       return fieldTemplate.multipleOf;
-    }, [fieldTemplate.multipleOf, isIntegerField]);
+    }, [fieldTemplate.multipleOf]);
 
     return (
       <Flex
@@ -140,7 +140,7 @@ export const NumberFieldCollectionInputComponent = memo(
             >
               <Grid gap={1} gridTemplateColumns="auto 1fr auto" alignItems="center">
                 {field.value.map((value, index) => (
-                  <NumberListItemContent
+                  <IntegerListItemContent
                     key={index}
                     value={value}
                     index={index}
@@ -148,7 +148,6 @@ export const NumberFieldCollectionInputComponent = memo(
                     max={max}
                     step={step}
                     fineStep={fineStep}
-                    isIntegerField={isIntegerField}
                     onRemoveNumber={onRemoveNumber}
                     onChangeNumber={onChangeNumber}
                   />
@@ -162,12 +161,11 @@ export const NumberFieldCollectionInputComponent = memo(
   }
 );
 
-NumberFieldCollectionInputComponent.displayName = 'NumberFieldCollectionInputComponent';
+IntegerFieldCollectionInputComponent.displayName = 'IntegerFieldCollectionInputComponent';
 
-type NumberListItemContentProps = {
+type IntegerListItemContentProps = {
   value: number;
   index: number;
-  isIntegerField: boolean;
   min: number;
   max: number;
   step: number;
@@ -176,28 +174,18 @@ type NumberListItemContentProps = {
   onChangeNumber: (index: number, value: number) => void;
 };
 
-const NumberListItemContent = memo(
-  ({
-    value,
-    index,
-    isIntegerField,
-    min,
-    max,
-    step,
-    fineStep,
-    onRemoveNumber,
-    onChangeNumber,
-  }: NumberListItemContentProps) => {
+const IntegerListItemContent = memo(
+  ({ value, index, min, max, step, fineStep, onRemoveNumber, onChangeNumber }: IntegerListItemContentProps) => {
     const { t } = useTranslation();
 
     const onClickRemove = useCallback(() => {
       onRemoveNumber(index);
     }, [index, onRemoveNumber]);
     const onChange = useCallback(
-      (v: number) => {
-        onChangeNumber(index, isIntegerField ? Math.floor(Number(v)) : Number(v));
+      (value: number) => {
+        onChangeNumber(index, Math.floor(value));
       },
-      [index, isIntegerField, onChangeNumber]
+      [index, onChangeNumber]
     );
 
     return (
@@ -234,4 +222,4 @@ const NumberListItemContent = memo(
     );
   }
 );
-NumberListItemContent.displayName = 'NumberListItemContent';
+IntegerListItemContent.displayName = 'IntegerListItemContent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IntegerFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IntegerFieldInputComponent.tsx
new file mode 100644
index 00000000000..03f447ba6c4
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IntegerFieldInputComponent.tsx
@@ -0,0 +1,74 @@
+import { CompositeNumberInput } from '@invoke-ai/ui-library';
+import { NUMPY_RAND_MAX } from 'app/constants';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { fieldIntegerValueChanged } from 'features/nodes/store/nodesSlice';
+import type { IntegerFieldInputInstance, IntegerFieldInputTemplate } from 'features/nodes/types/field';
+import { isNil } from 'lodash-es';
+import { memo, useCallback, useMemo } from 'react';
+
+import type { FieldComponentProps } from './types';
+
+export const IntegerFieldInputComponent = memo(
+  (props: FieldComponentProps<IntegerFieldInputInstance, IntegerFieldInputTemplate>) => {
+    const { nodeId, field, fieldTemplate } = props;
+    const dispatch = useAppDispatch();
+
+    const handleValueChanged = useCallback(
+      (value: number) => {
+        dispatch(fieldIntegerValueChanged({ nodeId, fieldName: field.name, value: Math.floor(Number(value)) }));
+      },
+      [dispatch, field.name, nodeId]
+    );
+
+    const min = useMemo(() => {
+      let min = -NUMPY_RAND_MAX;
+      if (!isNil(fieldTemplate.minimum)) {
+        min = fieldTemplate.minimum;
+      }
+      if (!isNil(fieldTemplate.exclusiveMinimum)) {
+        min = fieldTemplate.exclusiveMinimum + 0.01;
+      }
+      return min;
+    }, [fieldTemplate.exclusiveMinimum, fieldTemplate.minimum]);
+
+    const max = useMemo(() => {
+      let max = NUMPY_RAND_MAX;
+      if (!isNil(fieldTemplate.maximum)) {
+        max = fieldTemplate.maximum;
+      }
+      if (!isNil(fieldTemplate.exclusiveMaximum)) {
+        max = fieldTemplate.exclusiveMaximum - 0.01;
+      }
+      return max;
+    }, [fieldTemplate.exclusiveMaximum, fieldTemplate.maximum]);
+
+    const step = useMemo(() => {
+      if (isNil(fieldTemplate.multipleOf)) {
+        return 1;
+      }
+      return fieldTemplate.multipleOf;
+    }, [fieldTemplate.multipleOf]);
+
+    const fineStep = useMemo(() => {
+      if (isNil(fieldTemplate.multipleOf)) {
+        return 1;
+      }
+      return fieldTemplate.multipleOf;
+    }, [fieldTemplate.multipleOf]);
+
+    return (
+      <CompositeNumberInput
+        defaultValue={fieldTemplate.default}
+        onChange={handleValueChanged}
+        value={field.value}
+        min={min}
+        max={max}
+        step={step}
+        fineStep={fineStep}
+        className="nodrag"
+      />
+    );
+  }
+);
+
+IntegerFieldInputComponent.displayName = 'IntegerFieldInputComponent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldInputComponent.tsx
deleted file mode 100644
index e3f33d8a45b..00000000000
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldInputComponent.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { CompositeNumberInput } from '@invoke-ai/ui-library';
-import { NUMPY_RAND_MAX } from 'app/constants';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { fieldNumberValueChanged } from 'features/nodes/store/nodesSlice';
-import type {
-  FloatFieldInputInstance,
-  FloatFieldInputTemplate,
-  IntegerFieldInputInstance,
-  IntegerFieldInputTemplate,
-} from 'features/nodes/types/field';
-import { isNil } from 'lodash-es';
-import { memo, useCallback, useMemo } from 'react';
-
-import type { FieldComponentProps } from './types';
-
-const NumberFieldInputComponent = (
-  props: FieldComponentProps<
-    IntegerFieldInputInstance | FloatFieldInputInstance,
-    IntegerFieldInputTemplate | FloatFieldInputTemplate
-  >
-) => {
-  const { nodeId, field, fieldTemplate } = props;
-  const dispatch = useAppDispatch();
-  const isIntegerField = useMemo(() => fieldTemplate.type.name === 'IntegerField', [fieldTemplate.type]);
-
-  const handleValueChanged = useCallback(
-    (v: number) => {
-      dispatch(
-        fieldNumberValueChanged({
-          nodeId,
-          fieldName: field.name,
-          value: isIntegerField ? Math.floor(Number(v)) : Number(v),
-        })
-      );
-    },
-    [dispatch, field.name, isIntegerField, nodeId]
-  );
-
-  const min = useMemo(() => {
-    let min = -NUMPY_RAND_MAX;
-    if (!isNil(fieldTemplate.minimum)) {
-      min = fieldTemplate.minimum;
-    }
-    if (!isNil(fieldTemplate.exclusiveMinimum)) {
-      min = fieldTemplate.exclusiveMinimum + 0.01;
-    }
-    return min;
-  }, [fieldTemplate.exclusiveMinimum, fieldTemplate.minimum]);
-
-  const max = useMemo(() => {
-    let max = NUMPY_RAND_MAX;
-    if (!isNil(fieldTemplate.maximum)) {
-      max = fieldTemplate.maximum;
-    }
-    if (!isNil(fieldTemplate.exclusiveMaximum)) {
-      max = fieldTemplate.exclusiveMaximum - 0.01;
-    }
-    return max;
-  }, [fieldTemplate.exclusiveMaximum, fieldTemplate.maximum]);
-
-  const step = useMemo(() => {
-    if (isNil(fieldTemplate.multipleOf)) {
-      return isIntegerField ? 1 : 0.1;
-    }
-    return fieldTemplate.multipleOf;
-  }, [fieldTemplate.multipleOf, isIntegerField]);
-
-  const fineStep = useMemo(() => {
-    if (isNil(fieldTemplate.multipleOf)) {
-      return isIntegerField ? 1 : 0.01;
-    }
-    return fieldTemplate.multipleOf;
-  }, [fieldTemplate.multipleOf, isIntegerField]);
-
-  return (
-    <CompositeNumberInput
-      defaultValue={fieldTemplate.default}
-      onChange={handleValueChanged}
-      value={field.value}
-      min={min}
-      max={max}
-      step={step}
-      fineStep={fineStep}
-      className="nodrag"
-    />
-  );
-};
-
-export default memo(NumberFieldInputComponent);
diff --git a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
index c8bd5931f27..468048c0859 100644
--- a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
@@ -333,11 +333,17 @@ export const nodesSlice = createSlice({
     fieldStringCollectionValueChanged: (state, action: FieldValueAction<StringFieldCollectionValue>) => {
       fieldValueReducer(state, action, zStringFieldCollectionValue);
     },
-    fieldNumberValueChanged: (state, action: FieldValueAction<IntegerFieldValue | FloatFieldValue>) => {
-      fieldValueReducer(state, action, zIntegerFieldValue.or(zFloatFieldValue));
+    fieldIntegerValueChanged: (state, action: FieldValueAction<IntegerFieldValue>) => {
+      fieldValueReducer(state, action, zIntegerFieldValue);
     },
-    fieldNumberCollectionValueChanged: (state, action: FieldValueAction<IntegerFieldCollectionValue>) => {
-      fieldValueReducer(state, action, zIntegerFieldCollectionValue.or(zFloatFieldCollectionValue));
+    fieldFloatValueChanged: (state, action: FieldValueAction<FloatFieldValue>) => {
+      fieldValueReducer(state, action, zFloatFieldValue);
+    },
+    fieldFloatCollectionValueChanged: (state, action: FieldValueAction<IntegerFieldCollectionValue>) => {
+      fieldValueReducer(state, action, zFloatFieldCollectionValue);
+    },
+    fieldIntegerCollectionValueChanged: (state, action: FieldValueAction<IntegerFieldCollectionValue>) => {
+      fieldValueReducer(state, action, zIntegerFieldCollectionValue);
     },
     fieldBooleanValueChanged: (state, action: FieldValueAction<BooleanFieldValue>) => {
       fieldValueReducer(state, action, zBooleanFieldValue);
@@ -491,8 +497,10 @@ export const {
   fieldLoRAModelValueChanged,
   fieldModelIdentifierValueChanged,
   fieldMainModelValueChanged,
-  fieldNumberValueChanged,
-  fieldNumberCollectionValueChanged,
+  fieldIntegerValueChanged,
+  fieldFloatValueChanged,
+  fieldFloatCollectionValueChanged,
+  fieldIntegerCollectionValueChanged,
   fieldRefinerModelValueChanged,
   fieldSchedulerValueChanged,
   fieldStringValueChanged,
@@ -609,8 +617,10 @@ export const isAnyNodeOrEdgeMutation = isAnyOf(
   fieldLabelChanged,
   fieldLoRAModelValueChanged,
   fieldMainModelValueChanged,
-  fieldNumberValueChanged,
-  fieldNumberCollectionValueChanged,
+  fieldIntegerValueChanged,
+  fieldIntegerCollectionValueChanged,
+  fieldFloatValueChanged,
+  fieldFloatCollectionValueChanged,
   fieldRefinerModelValueChanged,
   fieldSchedulerValueChanged,
   fieldStringValueChanged,

From 0dddf4fcf913ab355b4f0819c03a7c190af10401 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 22 Jan 2025 11:50:59 +1100
Subject: [PATCH 19/58] revert(ui): rip out linear view config stuff

---
 .../fields/InputFieldEditModeLinear.tsx       |  2 -
 .../InputFieldLinearViewConfigIconButton.tsx  | 85 -------------------
 .../Invocation/fields/InputFieldViewMode.tsx  | 10 ---
 .../hooks/useInputFieldLinearViewConfig.ts    | 22 -----
 .../src/features/nodes/store/nodesSlice.ts    | 17 ----
 .../web/src/features/nodes/types/field.ts     |  4 -
 6 files changed, 140 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldLinearViewConfigIconButton.tsx
 delete mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useInputFieldLinearViewConfig.ts

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeLinear.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeLinear.tsx
index cb21d9f24df..9dc0f61c271 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeLinear.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeLinear.tsx
@@ -2,7 +2,6 @@ import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Box, Circle, Flex, IconButton, Spacer } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { DndListDropIndicator } from 'features/dnd/DndListDropIndicator';
-import { InputFieldLinearViewConfigIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldLinearViewConfigIconButton';
 import { InputFieldNotesIconButtonEditable } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButtonEditable';
 import { InputFieldResetToInitialValueIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToInitialValueIconButton';
 import { useLinearViewFieldDnd } from 'features/nodes/components/sidePanel/workflow/useLinearViewFieldDnd';
@@ -61,7 +60,6 @@ export const InputFieldEditModeLinear = memo(({ nodeId, fieldName }: Props) => {
             <InputFieldTitle nodeId={nodeId} fieldName={fieldName} />
             <Spacer />
             {isMouseOverNode && <Circle me={2} size={2} borderRadius="full" bg="invokeBlue.500" />}
-            <InputFieldLinearViewConfigIconButton nodeId={nodeId} fieldName={fieldName} />
             <InputFieldNotesIconButtonEditable nodeId={nodeId} fieldName={fieldName} />
             <InputFieldResetToInitialValueIconButton nodeId={nodeId} fieldName={fieldName} />
             <IconButton
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldLinearViewConfigIconButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldLinearViewConfigIconButton.tsx
deleted file mode 100644
index b7659574ad8..00000000000
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldLinearViewConfigIconButton.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import {
-  FormControl,
-  FormLabel,
-  IconButton,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  Select,
-} from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { useInputFieldIsExposed } from 'features/nodes/hooks/useInputFieldIsExposed';
-import { useInputFieldLinearViewConfig } from 'features/nodes/hooks/useInputFieldLinearViewConfig';
-import { fieldLinearViewConfigChanged } from 'features/nodes/store/nodesSlice';
-import type { FieldInputInstance } from 'features/nodes/types/field';
-import type { ChangeEvent } from 'react';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiWrenchFill } from 'react-icons/pi';
-
-type Props = {
-  nodeId: string;
-  fieldName: string;
-};
-
-const parseNotesDisplay = (
-  notesDisplay: string
-): NonNullable<FieldInputInstance['linearViewConfig']>['notesDisplay'] => {
-  switch (notesDisplay) {
-    case 'none':
-      return 'none';
-    case 'helper-text':
-      return 'helper-text';
-    case 'icon-with-popover':
-      return 'icon-with-popover';
-    default:
-      return 'none';
-  }
-};
-
-export const InputFieldLinearViewConfigIconButton = memo(({ nodeId, fieldName }: Props) => {
-  const dispatch = useAppDispatch();
-  const { t } = useTranslation();
-  const isExposed = useInputFieldIsExposed(nodeId, fieldName);
-  const linearViewConfig = useInputFieldLinearViewConfig(nodeId, fieldName);
-  const onChangeNotesDisplay = useCallback(
-    (e: ChangeEvent<HTMLSelectElement>) => {
-      const notesDisplay = parseNotesDisplay(e.target.value);
-      dispatch(
-        fieldLinearViewConfigChanged({ nodeId, fieldName, linearViewConfig: { ...linearViewConfig, notesDisplay } })
-      );
-    },
-    [dispatch, fieldName, linearViewConfig, nodeId]
-  );
-
-  if (!isExposed) {
-    return null;
-  }
-
-  return (
-    <Popover>
-      <PopoverTrigger>
-        <IconButton
-          variant="ghost"
-          tooltip="Linear View Config"
-          aria-label="Linear View Config"
-          icon={<PiWrenchFill />}
-          pointerEvents="auto"
-          size="xs"
-        />
-      </PopoverTrigger>
-      <PopoverContent p={2} w={256}>
-        <FormControl orientation="vertical">
-          <FormLabel>{t('nodes.notesDisplay')}</FormLabel>
-          <Select value={linearViewConfig?.notesDisplay ?? 'none'} onChange={onChangeNotesDisplay}>
-            <option value="none">{t('common.none')}</option>
-            <option value="helper-text">{t('nodes.helperText')}</option>
-            <option value="icon-with-popover">{t('nodes.iconWithPopover')}</option>
-          </Select>
-        </FormControl>
-      </PopoverContent>
-    </Popover>
-  );
-});
-
-InputFieldLinearViewConfigIconButton.displayName = 'InputFieldLinearViewConfigIconButton';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode.tsx
index 73f750b9c7f..aece7b78eee 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode.tsx
@@ -1,10 +1,7 @@
 import { Box, FormControl, FormLabel, Spacer } from '@invoke-ai/ui-library';
-import { InputFieldNotesHelperText } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesHelperText';
-import { InputFieldNotesIconButtonReadonly } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButtonReadonly';
 import { InputFieldRenderer } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer';
 import { InputFieldResetToInitialValueIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToInitialValueIconButton';
 import { useInputFieldLabel } from 'features/nodes/hooks/useInputFieldLabel';
-import { useInputFieldLinearViewConfig } from 'features/nodes/hooks/useInputFieldLinearViewConfig';
 import { useInputFieldTemplateTitle } from 'features/nodes/hooks/useInputFieldTemplateTitle';
 import { memo } from 'react';
 
@@ -16,24 +13,17 @@ type Props = {
 export const InputFieldViewMode = memo(({ nodeId, fieldName }: Props) => {
   const label = useInputFieldLabel(nodeId, fieldName);
   const fieldTemplateTitle = useInputFieldTemplateTitle(nodeId, fieldName);
-  const linearViewConfig = useInputFieldLinearViewConfig(nodeId, fieldName);
 
   return (
     <FormControl w="full" gap={2} flexDir="column">
       <FormLabel fontSize="sm" display="flex" w="full" m={0} gap={2} px={1}>
         {label || fieldTemplateTitle}
         <Spacer />
-        {linearViewConfig?.notesDisplay === 'icon-with-popover' && (
-          <InputFieldNotesIconButtonReadonly nodeId={nodeId} fieldName={fieldName} />
-        )}
         <InputFieldResetToInitialValueIconButton nodeId={nodeId} fieldName={fieldName} />
       </FormLabel>
       <Box w="full" h="full">
         <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
       </Box>
-      {linearViewConfig?.notesDisplay === 'helper-text' && (
-        <InputFieldNotesHelperText nodeId={nodeId} fieldName={fieldName} />
-      )}
     </FormControl>
   );
 });
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldLinearViewConfig.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldLinearViewConfig.ts
deleted file mode 100644
index a5703fa11ed..00000000000
--- a/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldLinearViewConfig.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store/storeHooks';
-import { selectNodesSlice } from 'features/nodes/store/selectors';
-import { isInvocationNode } from 'features/nodes/types/invocation';
-import { useMemo } from 'react';
-
-export const useInputFieldLinearViewConfig = (nodeId: string, fieldName: string) => {
-  const selector = useMemo(
-    () =>
-      createSelector(selectNodesSlice, (nodes) => {
-        const node = nodes.nodes.find((node) => node.id === nodeId);
-        if (!isInvocationNode(node)) {
-          return;
-        }
-        return node?.data.inputs[fieldName]?.linearViewConfig;
-      }),
-    [fieldName, nodeId]
-  );
-
-  const linearViewConfig = useAppSelector(selector);
-  return linearViewConfig;
-};
diff --git a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
index 468048c0859..e7e92696367 100644
--- a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
@@ -14,7 +14,6 @@ import type {
   ControlLoRAModelFieldValue,
   ControlNetModelFieldValue,
   EnumFieldValue,
-  FieldInputInstance,
   FieldValue,
   FloatFieldValue,
   FloatGeneratorFieldValue,
@@ -431,21 +430,6 @@ export const nodesSlice = createSlice({
       }
       field.notes = val;
     },
-    fieldLinearViewConfigChanged: (
-      state,
-      action: PayloadAction<{
-        nodeId: string;
-        fieldName: string;
-        linearViewConfig?: FieldInputInstance['linearViewConfig'];
-      }>
-    ) => {
-      const { nodeId, fieldName, linearViewConfig } = action.payload;
-      const field = getField(nodeId, fieldName, state);
-      if (!field) {
-        return;
-      }
-      field.linearViewConfig = linearViewConfig;
-    },
     notesNodeValueChanged: (state, action: PayloadAction<{ nodeId: string; value: string }>) => {
       const { nodeId, value } = action.payload;
       const nodeIndex = state.nodes.findIndex((n) => n.id === nodeId);
@@ -516,7 +500,6 @@ export const {
   fieldIntegerGeneratorValueChanged,
   fieldStringGeneratorValueChanged,
   fieldNotesChanged,
-  fieldLinearViewConfigChanged,
   nodeEditorReset,
   nodeIsIntermediateChanged,
   nodeIsOpenChanged,
diff --git a/invokeai/frontend/web/src/features/nodes/types/field.ts b/invokeai/frontend/web/src/features/nodes/types/field.ts
index 066b29539e3..c5e1482cb2a 100644
--- a/invokeai/frontend/web/src/features/nodes/types/field.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/field.ts
@@ -35,14 +35,10 @@ import { zBoardField, zColorField, zImageField, zModelIdentifierField, zSchedule
 // #region Base schemas & misc
 const zFieldInput = z.enum(['connection', 'direct', 'any']);
 const zFieldUIComponent = z.enum(['none', 'textarea', 'slider']);
-const zFieldInputInstanceLinearViewConfigBase = z.object({
-  notesDisplay: z.enum(['none', 'helper-text', 'icon-with-popover']).nullish(),
-});
 const zFieldInputInstanceBase = z.object({
   name: z.string().trim().min(1),
   label: z.string().nullish(),
   notes: z.string().nullish(),
-  linearViewConfig: zFieldInputInstanceLinearViewConfigBase.nullish(),
 });
 const zFieldTemplateBase = z.object({
   name: z.string().min(1),

From 1665f130005f110f29d00be7935da07940084e31 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 22 Jan 2025 14:21:42 +1100
Subject: [PATCH 20/58] refactor(ui): split integer, float and string field
 components in prep for builder

---
 .../fields/FloatField/FloatFieldInput.tsx     | 24 ++++++
 .../fields/FloatField/FloatFieldSlider.tsx    | 26 +++++++
 .../fields/FloatField/useFloatField.ts        | 65 ++++++++++++++++
 .../Invocation/fields/InputFieldRenderer.tsx  | 18 +++--
 .../Invocation/fields/InputFieldViewMode.tsx  |  2 +-
 .../fields/IntegerField/IntegerFieldInput.tsx | 27 +++++++
 .../IntegerField/IntegerFieldSlider.tsx       | 29 ++++++++
 .../fields/IntegerField/useIntegerField.ts    | 65 ++++++++++++++++
 .../fields/StringField/StringFieldInput.tsx   | 15 ++++
 .../StringField/StringFieldTextarea.tsx       | 25 +++++++
 .../fields/StringField/useStringField.ts      | 30 ++++++++
 .../inputs/FloatFieldInputComponent.tsx       | 74 -------------------
 .../inputs/IntegerFieldInputComponent.tsx     | 74 -------------------
 .../inputs/StringFieldInputComponent.tsx      | 42 -----------
 14 files changed, 318 insertions(+), 198 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FloatField/FloatFieldInput.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FloatField/FloatFieldSlider.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FloatField/useFloatField.ts
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/IntegerField/IntegerFieldInput.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/IntegerField/IntegerFieldSlider.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/IntegerField/useIntegerField.ts
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/StringField/StringFieldInput.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/StringField/StringFieldTextarea.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/StringField/useStringField.ts
 delete mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatFieldInputComponent.tsx
 delete mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IntegerFieldInputComponent.tsx
 delete mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldInputComponent.tsx

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FloatField/FloatFieldInput.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FloatField/FloatFieldInput.tsx
new file mode 100644
index 00000000000..d97effb5f1a
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FloatField/FloatFieldInput.tsx
@@ -0,0 +1,24 @@
+import { CompositeNumberInput } from '@invoke-ai/ui-library';
+import { useFloatField } from 'features/nodes/components/flow/nodes/Invocation/fields/FloatField/useFloatField';
+import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
+import type { FloatFieldInputInstance, FloatFieldInputTemplate } from 'features/nodes/types/field';
+import { memo } from 'react';
+
+export const FloatFieldInput = memo((props: FieldComponentProps<FloatFieldInputInstance, FloatFieldInputTemplate>) => {
+  const { defaultValue, onChange, value, min, max, step, fineStep } = useFloatField(props);
+
+  return (
+    <CompositeNumberInput
+      defaultValue={defaultValue}
+      onChange={onChange}
+      value={value}
+      min={min}
+      max={max}
+      step={step}
+      fineStep={fineStep}
+      className="nodrag"
+    />
+  );
+});
+
+FloatFieldInput.displayName = 'FloatFieldInput ';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FloatField/FloatFieldSlider.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FloatField/FloatFieldSlider.tsx
new file mode 100644
index 00000000000..f57618a671b
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FloatField/FloatFieldSlider.tsx
@@ -0,0 +1,26 @@
+import { CompositeSlider } from '@invoke-ai/ui-library';
+import { useFloatField } from 'features/nodes/components/flow/nodes/Invocation/fields/FloatField/useFloatField';
+import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
+import type { FloatFieldInputInstance, FloatFieldInputTemplate } from 'features/nodes/types/field';
+import { memo } from 'react';
+
+export const FloatFieldSlider = memo((props: FieldComponentProps<FloatFieldInputInstance, FloatFieldInputTemplate>) => {
+  const { defaultValue, onChange, value, min, max, step, fineStep } = useFloatField(props);
+
+  return (
+    <CompositeSlider
+      defaultValue={defaultValue}
+      onChange={onChange}
+      value={value}
+      min={min}
+      max={max}
+      step={step}
+      fineStep={fineStep}
+      className="nodrag"
+      marks
+      withThumbTooltip
+    />
+  );
+});
+
+FloatFieldSlider.displayName = 'FloatFieldSlider ';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FloatField/useFloatField.ts b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FloatField/useFloatField.ts
new file mode 100644
index 00000000000..15779bf0def
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FloatField/useFloatField.ts
@@ -0,0 +1,65 @@
+import { NUMPY_RAND_MAX } from 'app/constants';
+import { useAppDispatch } from 'app/store/storeHooks';
+import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
+import { fieldFloatValueChanged } from 'features/nodes/store/nodesSlice';
+import type { FloatFieldInputInstance, FloatFieldInputTemplate } from 'features/nodes/types/field';
+import { isNil } from 'lodash-es';
+import { useCallback, useMemo } from 'react';
+
+export const useFloatField = (props: FieldComponentProps<FloatFieldInputInstance, FloatFieldInputTemplate>) => {
+  const { nodeId, field, fieldTemplate } = props;
+  const dispatch = useAppDispatch();
+
+  const onChange = useCallback(
+    (value: number) => {
+      dispatch(fieldFloatValueChanged({ nodeId, fieldName: field.name, value }));
+    },
+    [dispatch, field.name, nodeId]
+  );
+
+  const min = useMemo(() => {
+    let min = -NUMPY_RAND_MAX;
+    if (!isNil(fieldTemplate.minimum)) {
+      min = fieldTemplate.minimum;
+    }
+    if (!isNil(fieldTemplate.exclusiveMinimum)) {
+      min = fieldTemplate.exclusiveMinimum + 0.01;
+    }
+    return min;
+  }, [fieldTemplate.exclusiveMinimum, fieldTemplate.minimum]);
+
+  const max = useMemo(() => {
+    let max = NUMPY_RAND_MAX;
+    if (!isNil(fieldTemplate.maximum)) {
+      max = fieldTemplate.maximum;
+    }
+    if (!isNil(fieldTemplate.exclusiveMaximum)) {
+      max = fieldTemplate.exclusiveMaximum - 0.01;
+    }
+    return max;
+  }, [fieldTemplate.exclusiveMaximum, fieldTemplate.maximum]);
+
+  const step = useMemo(() => {
+    if (isNil(fieldTemplate.multipleOf)) {
+      return 0.1;
+    }
+    return fieldTemplate.multipleOf;
+  }, [fieldTemplate.multipleOf]);
+
+  const fineStep = useMemo(() => {
+    if (isNil(fieldTemplate.multipleOf)) {
+      return 0.01;
+    }
+    return fieldTemplate.multipleOf;
+  }, [fieldTemplate.multipleOf]);
+
+  return {
+    defaultValue: fieldTemplate.default,
+    onChange,
+    value: field.value,
+    min,
+    max,
+    step,
+    fineStep,
+  };
+};
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
index cb065005cc4..f13c48c288d 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
@@ -1,5 +1,5 @@
+import { FloatFieldInput } from 'features/nodes/components/flow/nodes/Invocation/fields/FloatField/FloatFieldInput';
 import { FloatFieldCollectionInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatFieldCollectionInputComponent';
-import { FloatFieldInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatFieldInputComponent';
 import { FloatGeneratorFieldInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatGeneratorFieldComponent';
 import { ImageFieldCollectionInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent';
 import { IntegerFieldCollectionInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/IntegerFieldCollectionInputComponent';
@@ -7,6 +7,9 @@ import { IntegerGeneratorFieldInputComponent } from 'features/nodes/components/f
 import ModelIdentifierFieldInputComponent from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/ModelIdentifierFieldInputComponent';
 import { StringFieldCollectionInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldCollectionInputComponent';
 import { StringGeneratorFieldInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/StringGeneratorFieldComponent';
+import { IntegerFieldInput } from 'features/nodes/components/flow/nodes/Invocation/fields/IntegerField/IntegerFieldInput';
+import { StringFieldInput } from 'features/nodes/components/flow/nodes/Invocation/fields/StringField/StringFieldInput';
+import { StringFieldTextarea } from 'features/nodes/components/flow/nodes/Invocation/fields/StringField/StringFieldTextarea';
 import { useInputFieldInstance } from 'features/nodes/hooks/useInputFieldInstance';
 import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate';
 import {
@@ -93,7 +96,6 @@ import EnumFieldInputComponent from './inputs/EnumFieldInputComponent';
 import FluxMainModelFieldInputComponent from './inputs/FluxMainModelFieldInputComponent';
 import FluxVAEModelFieldInputComponent from './inputs/FluxVAEModelFieldInputComponent';
 import ImageFieldInputComponent from './inputs/ImageFieldInputComponent';
-import { IntegerFieldInputComponent } from './inputs/IntegerFieldInputComponent';
 import IPAdapterModelFieldInputComponent from './inputs/IPAdapterModelFieldInputComponent';
 import LoRAModelFieldInputComponent from './inputs/LoRAModelFieldInputComponent';
 import MainModelFieldInputComponent from './inputs/MainModelFieldInputComponent';
@@ -102,11 +104,9 @@ import SchedulerFieldInputComponent from './inputs/SchedulerFieldInputComponent'
 import SD3MainModelFieldInputComponent from './inputs/SD3MainModelFieldInputComponent';
 import SDXLMainModelFieldInputComponent from './inputs/SDXLMainModelFieldInputComponent';
 import SpandrelImageToImageModelFieldInputComponent from './inputs/SpandrelImageToImageModelFieldInputComponent';
-import StringFieldInputComponent from './inputs/StringFieldInputComponent';
 import T2IAdapterModelFieldInputComponent from './inputs/T2IAdapterModelFieldInputComponent';
 import T5EncoderModelFieldInputComponent from './inputs/T5EncoderModelFieldInputComponent';
 import VAEModelFieldInputComponent from './inputs/VAEModelFieldInputComponent';
-
 type InputFieldProps = {
   nodeId: string;
   fieldName: string;
@@ -121,7 +121,11 @@ export const InputFieldRenderer = memo(({ nodeId, fieldName }: InputFieldProps)
   }
 
   if (isStringFieldInputInstance(fieldInstance) && isStringFieldInputTemplate(fieldTemplate)) {
-    return <StringFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+    if (fieldTemplate.ui_component === 'textarea') {
+      return <StringFieldTextarea nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+    } else {
+      return <StringFieldInput nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+    }
   }
 
   if (isBooleanFieldInputInstance(fieldInstance) && isBooleanFieldInputTemplate(fieldTemplate)) {
@@ -129,7 +133,7 @@ export const InputFieldRenderer = memo(({ nodeId, fieldName }: InputFieldProps)
   }
 
   if (isFloatFieldInputInstance(fieldInstance) && isFloatFieldInputTemplate(fieldTemplate)) {
-    return <FloatFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+    return <FloatFieldInput nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
   if (isFloatFieldCollectionInputInstance(fieldInstance) && isFloatFieldCollectionInputTemplate(fieldTemplate)) {
@@ -137,7 +141,7 @@ export const InputFieldRenderer = memo(({ nodeId, fieldName }: InputFieldProps)
   }
 
   if (isIntegerFieldInputInstance(fieldInstance) && isIntegerFieldInputTemplate(fieldTemplate)) {
-    return <IntegerFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+    return <IntegerFieldInput nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
   if (isIntegerFieldCollectionInputInstance(fieldInstance) && isIntegerFieldCollectionInputTemplate(fieldTemplate)) {
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode.tsx
index aece7b78eee..e4a4bca7ec5 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode.tsx
@@ -16,7 +16,7 @@ export const InputFieldViewMode = memo(({ nodeId, fieldName }: Props) => {
 
   return (
     <FormControl w="full" gap={2} flexDir="column">
-      <FormLabel fontSize="sm" display="flex" w="full" m={0} gap={2} px={1}>
+      <FormLabel fontSize="sm" display="flex" w="full" m={0} gap={2} ps={1}>
         {label || fieldTemplateTitle}
         <Spacer />
         <InputFieldResetToInitialValueIconButton nodeId={nodeId} fieldName={fieldName} />
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/IntegerField/IntegerFieldInput.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/IntegerField/IntegerFieldInput.tsx
new file mode 100644
index 00000000000..008f9c1a0d8
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/IntegerField/IntegerFieldInput.tsx
@@ -0,0 +1,27 @@
+import { CompositeNumberInput } from '@invoke-ai/ui-library';
+import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
+import { useIntegerField } from 'features/nodes/components/flow/nodes/Invocation/fields/IntegerField/useIntegerField';
+import type { IntegerFieldInputInstance, IntegerFieldInputTemplate } from 'features/nodes/types/field';
+import { memo } from 'react';
+
+export const IntegerFieldInput = memo(
+  (props: FieldComponentProps<IntegerFieldInputInstance, IntegerFieldInputTemplate>) => {
+    const { defaultValue, onChange, value, min, max, step, fineStep } = useIntegerField(props);
+
+    return (
+      <CompositeNumberInput
+        defaultValue={defaultValue}
+        onChange={onChange}
+        value={value}
+        min={min}
+        max={max}
+        step={step}
+        fineStep={fineStep}
+        className="nodrag"
+        w="full"
+      />
+    );
+  }
+);
+
+IntegerFieldInput.displayName = 'IntegerFieldInput';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/IntegerField/IntegerFieldSlider.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/IntegerField/IntegerFieldSlider.tsx
new file mode 100644
index 00000000000..cd8a0a50eb2
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/IntegerField/IntegerFieldSlider.tsx
@@ -0,0 +1,29 @@
+import { CompositeSlider } from '@invoke-ai/ui-library';
+import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
+import { useIntegerField } from 'features/nodes/components/flow/nodes/Invocation/fields/IntegerField/useIntegerField';
+import type { IntegerFieldInputInstance, IntegerFieldInputTemplate } from 'features/nodes/types/field';
+import { memo } from 'react';
+
+export const IntegerFieldSlider = memo(
+  (props: FieldComponentProps<IntegerFieldInputInstance, IntegerFieldInputTemplate>) => {
+    const { defaultValue, onChange, value, min, max, step, fineStep } = useIntegerField(props);
+
+    return (
+      <CompositeSlider
+        defaultValue={defaultValue}
+        onChange={onChange}
+        value={value}
+        min={min}
+        max={max}
+        step={step}
+        fineStep={fineStep}
+        className="nodrag"
+        w="full"
+        marks
+        withThumbTooltip
+      />
+    );
+  }
+);
+
+IntegerFieldSlider.displayName = 'IntegerFieldSlider';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/IntegerField/useIntegerField.ts b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/IntegerField/useIntegerField.ts
new file mode 100644
index 00000000000..d22cf3e685a
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/IntegerField/useIntegerField.ts
@@ -0,0 +1,65 @@
+import { NUMPY_RAND_MAX } from 'app/constants';
+import { useAppDispatch } from 'app/store/storeHooks';
+import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
+import { fieldIntegerValueChanged } from 'features/nodes/store/nodesSlice';
+import type { IntegerFieldInputInstance, IntegerFieldInputTemplate } from 'features/nodes/types/field';
+import { isNil } from 'lodash-es';
+import { useCallback, useMemo } from 'react';
+
+export const useIntegerField = (props: FieldComponentProps<IntegerFieldInputInstance, IntegerFieldInputTemplate>) => {
+  const { nodeId, field, fieldTemplate } = props;
+  const dispatch = useAppDispatch();
+
+  const onChange = useCallback(
+    (value: number) => {
+      dispatch(fieldIntegerValueChanged({ nodeId, fieldName: field.name, value: Math.floor(Number(value)) }));
+    },
+    [dispatch, field.name, nodeId]
+  );
+
+  const min = useMemo(() => {
+    let min = -NUMPY_RAND_MAX;
+    if (!isNil(fieldTemplate.minimum)) {
+      min = fieldTemplate.minimum;
+    }
+    if (!isNil(fieldTemplate.exclusiveMinimum)) {
+      min = fieldTemplate.exclusiveMinimum + 1
+    }
+    return min;
+  }, [fieldTemplate.exclusiveMinimum, fieldTemplate.minimum]);
+
+  const max = useMemo(() => {
+    let max = NUMPY_RAND_MAX;
+    if (!isNil(fieldTemplate.maximum)) {
+      max = fieldTemplate.maximum;
+    }
+    if (!isNil(fieldTemplate.exclusiveMaximum)) {
+      max = fieldTemplate.exclusiveMaximum - 1
+    }
+    return max;
+  }, [fieldTemplate.exclusiveMaximum, fieldTemplate.maximum]);
+
+  const step = useMemo(() => {
+    if (isNil(fieldTemplate.multipleOf)) {
+      return 1;
+    }
+    return fieldTemplate.multipleOf;
+  }, [fieldTemplate.multipleOf]);
+
+  const fineStep = useMemo(() => {
+    if (isNil(fieldTemplate.multipleOf)) {
+      return 1;
+    }
+    return fieldTemplate.multipleOf;
+  }, [fieldTemplate.multipleOf]);
+
+  return {
+    defaultValue: fieldTemplate.default,
+    onChange,
+    value: field.value,
+    min,
+    max,
+    step,
+    fineStep,
+  };
+};
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/StringField/StringFieldInput.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/StringField/StringFieldInput.tsx
new file mode 100644
index 00000000000..5e57a6cf816
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/StringField/StringFieldInput.tsx
@@ -0,0 +1,15 @@
+import { Input } from '@invoke-ai/ui-library';
+import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
+import { useStringField } from 'features/nodes/components/flow/nodes/Invocation/fields/StringField/useStringField';
+import type { StringFieldInputInstance, StringFieldInputTemplate } from 'features/nodes/types/field';
+import { memo } from 'react';
+
+export const StringFieldInput = memo(
+  (props: FieldComponentProps<StringFieldInputInstance, StringFieldInputTemplate>) => {
+    const { value, onChange } = useStringField(props);
+
+    return <Input className="nodrag nowheel nopan" value={value} onChange={onChange} />;
+  }
+);
+
+StringFieldInput.displayName = 'StringFieldInput';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/StringField/StringFieldTextarea.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/StringField/StringFieldTextarea.tsx
new file mode 100644
index 00000000000..1e2c0683a82
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/StringField/StringFieldTextarea.tsx
@@ -0,0 +1,25 @@
+import { Textarea } from '@invoke-ai/ui-library';
+import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
+import { useStringField } from 'features/nodes/components/flow/nodes/Invocation/fields/StringField/useStringField';
+import type { StringFieldInputInstance, StringFieldInputTemplate } from 'features/nodes/types/field';
+import { memo } from 'react';
+
+export const StringFieldTextarea = memo(
+  (props: FieldComponentProps<StringFieldInputInstance, StringFieldInputTemplate>) => {
+    const { value, onChange } = useStringField(props);
+
+    return (
+      <Textarea
+        className="nodrag nowheel nopan"
+        value={value}
+        onChange={onChange}
+        h="full"
+        resize="none"
+        fontSize="sm"
+        p={2}
+      />
+    );
+  }
+);
+
+StringFieldTextarea.displayName = 'StringFieldTextarea';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/StringField/useStringField.ts b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/StringField/useStringField.ts
new file mode 100644
index 00000000000..1affdae5760
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/StringField/useStringField.ts
@@ -0,0 +1,30 @@
+import { useAppDispatch } from 'app/store/storeHooks';
+import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
+import { fieldStringValueChanged } from 'features/nodes/store/nodesSlice';
+import type { StringFieldInputInstance, StringFieldInputTemplate } from 'features/nodes/types/field';
+import type { ChangeEvent } from 'react';
+import { useCallback } from 'react';
+
+export const useStringField = (props: FieldComponentProps<StringFieldInputInstance, StringFieldInputTemplate>) => {
+  const { nodeId, field, fieldTemplate } = props;
+  const dispatch = useAppDispatch();
+
+  const onChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      dispatch(
+        fieldStringValueChanged({
+          nodeId,
+          fieldName: field.name,
+          value: e.target.value,
+        })
+      );
+    },
+    [dispatch, field.name, nodeId]
+  );
+
+  return {
+    value: field.value,
+    onChange,
+    defaultValue: fieldTemplate.default,
+  };
+};
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatFieldInputComponent.tsx
deleted file mode 100644
index feeb9ec1d0d..00000000000
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatFieldInputComponent.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { CompositeNumberInput } from '@invoke-ai/ui-library';
-import { NUMPY_RAND_MAX } from 'app/constants';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { fieldFloatValueChanged } from 'features/nodes/store/nodesSlice';
-import type { FloatFieldInputInstance, FloatFieldInputTemplate } from 'features/nodes/types/field';
-import { isNil } from 'lodash-es';
-import { memo, useCallback, useMemo } from 'react';
-
-import type { FieldComponentProps } from './types';
-
-export const FloatFieldInputComponent = memo(
-  (props: FieldComponentProps<FloatFieldInputInstance, FloatFieldInputTemplate>) => {
-    const { nodeId, field, fieldTemplate } = props;
-    const dispatch = useAppDispatch();
-
-    const handleValueChanged = useCallback(
-      (value: number) => {
-        dispatch(fieldFloatValueChanged({ nodeId, fieldName: field.name, value }));
-      },
-      [dispatch, field.name, nodeId]
-    );
-
-    const min = useMemo(() => {
-      let min = -NUMPY_RAND_MAX;
-      if (!isNil(fieldTemplate.minimum)) {
-        min = fieldTemplate.minimum;
-      }
-      if (!isNil(fieldTemplate.exclusiveMinimum)) {
-        min = fieldTemplate.exclusiveMinimum + 0.01;
-      }
-      return min;
-    }, [fieldTemplate.exclusiveMinimum, fieldTemplate.minimum]);
-
-    const max = useMemo(() => {
-      let max = NUMPY_RAND_MAX;
-      if (!isNil(fieldTemplate.maximum)) {
-        max = fieldTemplate.maximum;
-      }
-      if (!isNil(fieldTemplate.exclusiveMaximum)) {
-        max = fieldTemplate.exclusiveMaximum - 0.01;
-      }
-      return max;
-    }, [fieldTemplate.exclusiveMaximum, fieldTemplate.maximum]);
-
-    const step = useMemo(() => {
-      if (isNil(fieldTemplate.multipleOf)) {
-        return 0.1;
-      }
-      return fieldTemplate.multipleOf;
-    }, [fieldTemplate.multipleOf]);
-
-    const fineStep = useMemo(() => {
-      if (isNil(fieldTemplate.multipleOf)) {
-        return 0.01;
-      }
-      return fieldTemplate.multipleOf;
-    }, [fieldTemplate.multipleOf]);
-
-    return (
-      <CompositeNumberInput
-        defaultValue={fieldTemplate.default}
-        onChange={handleValueChanged}
-        value={field.value}
-        min={min}
-        max={max}
-        step={step}
-        fineStep={fineStep}
-        className="nodrag"
-      />
-    );
-  }
-);
-
-FloatFieldInputComponent.displayName = 'FloatFieldInputComponent ';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IntegerFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IntegerFieldInputComponent.tsx
deleted file mode 100644
index 03f447ba6c4..00000000000
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IntegerFieldInputComponent.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { CompositeNumberInput } from '@invoke-ai/ui-library';
-import { NUMPY_RAND_MAX } from 'app/constants';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { fieldIntegerValueChanged } from 'features/nodes/store/nodesSlice';
-import type { IntegerFieldInputInstance, IntegerFieldInputTemplate } from 'features/nodes/types/field';
-import { isNil } from 'lodash-es';
-import { memo, useCallback, useMemo } from 'react';
-
-import type { FieldComponentProps } from './types';
-
-export const IntegerFieldInputComponent = memo(
-  (props: FieldComponentProps<IntegerFieldInputInstance, IntegerFieldInputTemplate>) => {
-    const { nodeId, field, fieldTemplate } = props;
-    const dispatch = useAppDispatch();
-
-    const handleValueChanged = useCallback(
-      (value: number) => {
-        dispatch(fieldIntegerValueChanged({ nodeId, fieldName: field.name, value: Math.floor(Number(value)) }));
-      },
-      [dispatch, field.name, nodeId]
-    );
-
-    const min = useMemo(() => {
-      let min = -NUMPY_RAND_MAX;
-      if (!isNil(fieldTemplate.minimum)) {
-        min = fieldTemplate.minimum;
-      }
-      if (!isNil(fieldTemplate.exclusiveMinimum)) {
-        min = fieldTemplate.exclusiveMinimum + 0.01;
-      }
-      return min;
-    }, [fieldTemplate.exclusiveMinimum, fieldTemplate.minimum]);
-
-    const max = useMemo(() => {
-      let max = NUMPY_RAND_MAX;
-      if (!isNil(fieldTemplate.maximum)) {
-        max = fieldTemplate.maximum;
-      }
-      if (!isNil(fieldTemplate.exclusiveMaximum)) {
-        max = fieldTemplate.exclusiveMaximum - 0.01;
-      }
-      return max;
-    }, [fieldTemplate.exclusiveMaximum, fieldTemplate.maximum]);
-
-    const step = useMemo(() => {
-      if (isNil(fieldTemplate.multipleOf)) {
-        return 1;
-      }
-      return fieldTemplate.multipleOf;
-    }, [fieldTemplate.multipleOf]);
-
-    const fineStep = useMemo(() => {
-      if (isNil(fieldTemplate.multipleOf)) {
-        return 1;
-      }
-      return fieldTemplate.multipleOf;
-    }, [fieldTemplate.multipleOf]);
-
-    return (
-      <CompositeNumberInput
-        defaultValue={fieldTemplate.default}
-        onChange={handleValueChanged}
-        value={field.value}
-        min={min}
-        max={max}
-        step={step}
-        fineStep={fineStep}
-        className="nodrag"
-      />
-    );
-  }
-);
-
-IntegerFieldInputComponent.displayName = 'IntegerFieldInputComponent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldInputComponent.tsx
deleted file mode 100644
index f5f818d286d..00000000000
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldInputComponent.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Input, Textarea } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { fieldStringValueChanged } from 'features/nodes/store/nodesSlice';
-import type { StringFieldInputInstance, StringFieldInputTemplate } from 'features/nodes/types/field';
-import type { ChangeEvent } from 'react';
-import { memo, useCallback } from 'react';
-
-import type { FieldComponentProps } from './types';
-
-const StringFieldInputComponent = (props: FieldComponentProps<StringFieldInputInstance, StringFieldInputTemplate>) => {
-  const { nodeId, field, fieldTemplate } = props;
-  const dispatch = useAppDispatch();
-
-  const handleValueChanged = useCallback(
-    (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      dispatch(
-        fieldStringValueChanged({
-          nodeId,
-          fieldName: field.name,
-          value: e.target.value,
-        })
-      );
-    },
-    [dispatch, field.name, nodeId]
-  );
-
-  if (fieldTemplate.ui_component === 'textarea') {
-    return (
-      <Textarea
-        className="nodrag nowheel nopan"
-        onChange={handleValueChanged}
-        value={field.value}
-        h="full"
-        resize="none"
-      />
-    );
-  }
-
-  return <Input className="nodrag nowheel nopan" onChange={handleValueChanged} value={field.value} />;
-};
-
-export default memo(StringFieldInputComponent);

From 1a7e134a2cb2e040d96e4d9764297ace2116c7d6 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 22 Jan 2025 14:22:02 +1100
Subject: [PATCH 21/58] feat(ui): rough out workflow builder data structure

---
 .../sidePanel/workflow/WorkflowBuilder.tsx    | 127 ++++-----
 .../web/src/features/nodes/types/workflow.ts  | 269 +++++++++---------
 2 files changed, 192 insertions(+), 204 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowBuilder.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowBuilder.tsx
index 523fd7e48e5..53c9f1afb5e 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowBuilder.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowBuilder.tsx
@@ -1,23 +1,23 @@
-import { Box, Divider, Heading, Text } from '@invoke-ai/ui-library';
+import { Flex, Heading, Text } from '@invoke-ai/ui-library';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { InputFieldGate } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate';
 import { InputFieldViewMode } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode';
-import {
-  type BuilderElement,
-  type ContainerElement,
-  data,
-  type DividerElement,
-  type FieldElement,
-  type HeadingElement,
-  type NotesElement,
+import type {
+  BuilderElement,
+  DividerElement,
+  FieldElement,
+  HeadingElement,
+  StackElement,
+  TextElement,
 } from 'features/nodes/types/workflow';
+import { data } from 'features/nodes/types/workflow';
 import { createContext, memo, useContext, useMemo } from 'react';
 import { assert } from 'tsafe';
 
-const ContainerContext = createContext<{ orientation: ContainerElement['orientation']; depth: number } | null>(null);
+const StackContext = createContext<{ direction: StackElement['data']['direction']; depth: number } | null>(null);
 
-const useContainerContextContext = () => {
-  const context = useContext(ContainerContext);
+const useStackContext = () => {
+  const context = useContext(StackContext);
   assert(context !== null);
   return context;
 };
@@ -34,14 +34,14 @@ WorkflowBuilder.displayName = 'WorkflowBuilder';
 
 const ElementComponent = ({ element }: { element: BuilderElement }) => {
   switch (element.type) {
-    case 'container':
-      return <ContainerElementComponent element={element} />;
+    case 'stack':
+      return <StackElementComponent element={element} />;
     case 'field':
       return <FieldElementComponent element={element} />;
     case 'heading':
       return <HeadingElementComponent element={element} />;
-    case 'notes':
-      return <NotesElementComponent element={element} />;
+    case 'text':
+      return <TextElementComponent element={element} />;
     case 'divider':
       return <DividerElementComponent element={element} />;
     default:
@@ -49,60 +49,39 @@ const ElementComponent = ({ element }: { element: BuilderElement }) => {
   }
 };
 
-const ContainerElementComponent = ({ element }: { element: ContainerElement }) => {
-  const { children, orientation } = element;
+const DIRECTION_TO_FLEXDIR = {
+  horizontal: 'row',
+  vertical: 'column',
+} as const;
+const StackElementComponent = ({ element }: { element: StackElement }) => {
+  const { id, data } = element;
+  const { children, direction } = data;
 
-  const parentCtx = useContext(ContainerContext);
+  const parentCtx = useContext(StackContext);
   const depth = useMemo(() => (parentCtx ? parentCtx.depth + 1 : 0), [parentCtx]);
-  const ctx = useMemo(() => ({ orientation, depth }), [depth, orientation]);
-
-  const gridAutoX = useMemo(() => {
-    return children
-      .map(({ type }) => {
-        switch (type) {
-          case 'divider':
-            return 'min-content';
-          case 'notes':
-          case 'heading':
-          case 'container':
-          case 'field':
-            return 'auto';
-        }
-      })
-      .join(' ');
-  }, [children]);
-
-  if (orientation === 'horizontal') {
-    return (
-      <ContainerContext.Provider value={ctx}>
-        <Box id={element.id} display="grid" gridAutoFlow="column" gridAutoColumns={gridAutoX} gap={2} overflow="hidden">
-          {children.map((child) => (
-            <ElementComponent key={child.id} element={child} />
-          ))}
-        </Box>
-      </ContainerContext.Provider>
-    );
-  }
+  const ctx = useMemo(() => ({ direction, depth }), [depth, direction]);
 
-  // orientation === 'vertical'
   return (
-    <ContainerContext.Provider value={ctx}>
-      <Box id={element.id} display="grid" gridAutoFlow="row" gridAutoRows={gridAutoX} gap={2} overflow="hidden">
+    <StackContext.Provider value={ctx}>
+      <Flex id={id} gap={2} flexDir={DIRECTION_TO_FLEXDIR[direction]}>
         {children.map((child) => (
           <ElementComponent key={child.id} element={child} />
         ))}
-      </Box>
-    </ContainerContext.Provider>
+      </Flex>
+    </StackContext.Provider>
   );
 };
 
 const FieldElementComponent = ({ element }: { element: FieldElement }) => {
-  const { fieldIdentifier } = element;
+  const { id, data } = element;
+  const { fieldIdentifier } = data;
 
   return (
-    <InputFieldGate nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName}>
-      <InputFieldViewMode nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName} />
-    </InputFieldGate>
+    <Flex id={id} flexBasis="100%">
+      <InputFieldGate nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName}>
+        <InputFieldViewMode nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName} />
+      </InputFieldGate>
+    </Flex>
   );
 };
 
@@ -114,32 +93,42 @@ const LEVEL_TO_SIZE = {
   5: 'xs',
 } as const;
 const HeadingElementComponent = ({ element }: { element: HeadingElement }) => {
-  const { content, level } = element;
+  const { id, data } = element;
+  const { content, level } = data;
 
   return (
-    <Heading id={element.id} size={LEVEL_TO_SIZE[level]}>
+    <Heading id={id} size={LEVEL_TO_SIZE[level]}>
       {content}
     </Heading>
   );
 };
 
-const NotesElementComponent = ({ element }: { element: NotesElement }) => {
-  const { content, fontSize } = element;
+const TextElementComponent = ({ element }: { element: TextElement }) => {
+  const { id, data } = element;
+  const { content, fontSize } = data;
 
   return (
-    <Text id={element.id} fontSize={fontSize}>
+    <Text id={id} fontSize={fontSize}>
       {content}
     </Text>
   );
 };
 
-const DividerElementComponent = ({ element }: { element: DividerElement }) => {
-  const { orientation } = useContainerContextContext();
+const DIRECTION_TO_WIDTH = {
+  horizontal: '1px',
+  vertical: undefined,
+};
 
-  if (orientation === 'horizontal') {
-    return <Divider id={element.id} orientation="vertical" />;
-  }
+const DIRECTION_TO_HEIGHT = {
+  horizontal: undefined,
+  vertical: '1px',
+};
+
+const DividerElementComponent = ({ element }: { element: DividerElement }) => {
+  const { id } = element;
+  const { direction } = useStackContext();
 
-  // orientation === 'vertical'
-  return <Divider id={element.id} orientation="horizontal" />;
+  return (
+    <Flex id={id} w={DIRECTION_TO_WIDTH[direction]} h={DIRECTION_TO_HEIGHT[direction]} bg="base.700" flexShrink={0} />
+  );
 };
diff --git a/invokeai/frontend/web/src/features/nodes/types/workflow.ts b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
index d4d1ce2fbc5..9776eef64d1 100644
--- a/invokeai/frontend/web/src/features/nodes/types/workflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
@@ -78,182 +78,181 @@ export type WorkflowV3 = z.infer<typeof zWorkflowV3>;
 // #endregion
 
 // #region Workflow Builder
-const zElementId = z.string().trim().min(1);
+const buildElementBuilder =
+  <T extends BuilderElement['type']>(type: T) =>
+  (data: Extract<BuilderElement, { type: T }>['data']): Extract<BuilderElement, { type: T }> =>
+    ({
+      id: nanoid(),
+      type,
+      data,
+    }) as Extract<BuilderElement, { type: T }>;
+const zFieldElementNumberConfig = z.object({
+  display: z.enum(['slider', 'input', 'input-with-slider-inline', 'input-with-slider-popover']),
+});
+const zFieldElementStringConfig = z.object({
+  display: z.enum(['input', 'textarea']),
+});
 
-const zFieldElement = z.object({
-  id: zElementId,
+const zElementBase = z.object({
+  id: z.string().trim().min(1),
+});
+
+const zFieldElement = zElementBase.extend({
   type: z.literal('field'),
-  fieldIdentifier: zFieldIdentifier,
+  data: z.object({
+    fieldIdentifier: zFieldIdentifier,
+    fieldConfig: z.union([zFieldElementNumberConfig, zFieldElementStringConfig]).optional(),
+  }),
 });
 export type FieldElement = z.infer<typeof zFieldElement>;
+const buildFieldElement = buildElementBuilder('field');
 
-const zHeadingElement = z.object({
-  id: zElementId,
+const zHeadingElement = zElementBase.extend({
   type: z.literal('heading'),
-  content: z.string(),
-  level: z.union([z.literal(1), z.literal(2), z.literal(3), z.literal(4), z.literal(5)]),
+  data: z.object({
+    content: z.string(),
+    level: z.union([z.literal(1), z.literal(2), z.literal(3), z.literal(4), z.literal(5)]),
+  }),
 });
 export type HeadingElement = z.infer<typeof zHeadingElement>;
+const buildHeadingElement = buildElementBuilder('heading');
 
-const zNotesElement = z.object({
-  id: zElementId,
-  type: z.literal('notes'),
-  content: z.string(),
-  fontSize: z.enum(['sm', 'md', 'lg']),
+const zTextElement = zElementBase.extend({
+  type: z.literal('text'),
+  data: z.object({
+    content: z.string(),
+    fontSize: z.enum(['sm', 'md', 'lg']),
+  }),
 });
-export type NotesElement = z.infer<typeof zNotesElement>;
+export type TextElement = z.infer<typeof zTextElement>;
+const buildTextElement = buildElementBuilder('text');
 
-const zDividerElement = z.object({
-  id: zElementId,
+const zDividerElement = zElementBase.extend({
   type: z.literal('divider'),
+  data: z.void(),
 });
 export type DividerElement = z.infer<typeof zDividerElement>;
+const buildDividerElement = buildElementBuilder('divider');
 
-export type ContainerElement = {
+export type StackElement = {
   id: string;
-  type: 'container';
-  children: BuilderElement[];
-  orientation: 'horizontal' | 'vertical';
+  type: 'stack';
+  data: {
+    children: BuilderElement[];
+    direction: 'horizontal' | 'vertical';
+  };
 };
 
-export type BuilderElement = FieldElement | HeadingElement | NotesElement | DividerElement | ContainerElement;
-
-const zContainerElement: z.ZodType<ContainerElement> = z.object({
-  id: zElementId,
-  type: z.literal('container'),
-  children: z.lazy(() => z.array(zElement)),
-  orientation: z.enum(['horizontal', 'vertical']),
+const zStackElement: z.ZodType<StackElement> = zElementBase.extend({
+  type: z.literal('stack'),
+  data: z.object({
+    children: z.lazy(() => z.array(zElement)),
+    direction: z.enum(['horizontal', 'vertical']),
+  }),
 });
+const buildStackElement = buildElementBuilder('stack');
+
+// export type CollapsibleElement = {
+//   id: string;
+//   type: 'collapsible';
+//   children: BuilderElement[];
+//   title: string;
+//   collapsed: boolean;
+// };
 
-const zElement = z.union([zFieldElement, zNotesElement, zDividerElement, zContainerElement]);
+// const zCollapsibleElement: z.ZodType<CollapsibleElement> = z.object({
+//   type: z.literal('collapsible'),
+//   children: z.lazy(() => z.array(zElement)),
+//   title: z.string(),
+//   collapsed: z.boolean(),
+// });
 
-type ElementType = BuilderElement['type'];
+const zElement = z.union([
+  zStackElement,
+  // zCollapsibleElement
+  zFieldElement,
+  zHeadingElement,
+  zTextElement,
+  zDividerElement,
+]);
 
-export const data: ContainerElement = {
-  id: nanoid(),
-  type: 'container',
-  orientation: 'vertical',
+export type BuilderElement =
+  | StackElement
+  // | CollapsibleElement
+  | FieldElement
+  | HeadingElement
+  | TextElement
+  | DividerElement;
+
+export const data: StackElement = buildStackElement({
+  direction: 'vertical',
   children: [
-    { id: nanoid(), type: 'heading', content: 'My Cool Workflow', level: 1 },
-    {
-      id: nanoid(),
-      type: 'notes',
-      content: 'This is a description of what my workflow does. It does things.',
-      fontSize: 'md',
-    },
-    { id: nanoid(), type: 'heading', content: 'First Section', level: 2 },
-    {
-      id: nanoid(),
-      type: 'notes',
+    buildHeadingElement({ content: 'My Cool Workflow', level: 1 }),
+    buildTextElement({ content: 'This is a description of what my workflow does. It does things.', fontSize: 'md' }),
+    buildDividerElement(),
+    buildHeadingElement({ content: 'First Section', level: 2 }),
+    buildTextElement({
       content: 'The first section includes fields relevant to the first section. This note describes that fact.',
       fontSize: 'sm',
-    },
-    {
-      id: nanoid(),
-      type: 'container',
-      orientation: 'horizontal',
+    }),
+    buildStackElement({
+      direction: 'horizontal',
       children: [
-        {
-          id: nanoid(),
-          type: 'field',
+        buildFieldElement({
           fieldIdentifier: { nodeId: '7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', fieldName: 'image' },
-        },
-        {
-          id: nanoid(),
-          type: 'field',
+        }),
+        buildFieldElement({
           fieldIdentifier: { nodeId: '7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', fieldName: 'image' },
-        },
-        {
-          id: nanoid(),
-          type: 'field',
+        }),
+        buildFieldElement({
           fieldIdentifier: { nodeId: '7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', fieldName: 'image' },
-        },
+        }),
       ],
-    },
-    {
-      id: nanoid(),
-      type: 'field',
-      fieldIdentifier: { nodeId: '9c058600-8d73-4702-912b-0ccf37403bfd', fieldName: 'value' },
-    },
-    {
-      id: nanoid(),
-      type: 'field',
-      fieldIdentifier: { nodeId: '7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', fieldName: 'value' },
-    },
-    {
-      id: nanoid(),
-      type: 'field',
-      fieldIdentifier: { nodeId: '4e16cbf6-457c-46fb-9ab7-9cb262fa1e03', fieldName: 'value' },
-    },
-    {
-      id: nanoid(),
-      type: 'field',
-      fieldIdentifier: { nodeId: '39cb5272-a9d7-4da9-9c35-32e02b46bb34', fieldName: 'color' },
-    },
-    {
-      id: nanoid(),
-      type: 'container',
-      orientation: 'horizontal',
+    }),
+    buildFieldElement({ fieldIdentifier: { nodeId: '9c058600-8d73-4702-912b-0ccf37403bfd', fieldName: 'value' } }),
+    buildFieldElement({ fieldIdentifier: { nodeId: '7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', fieldName: 'value' } }),
+    buildFieldElement({ fieldIdentifier: { nodeId: '4e16cbf6-457c-46fb-9ab7-9cb262fa1e03', fieldName: 'value' } }),
+    buildFieldElement({ fieldIdentifier: { nodeId: '39cb5272-a9d7-4da9-9c35-32e02b46bb34', fieldName: 'color' } }),
+    buildStackElement({
+      direction: 'horizontal',
       children: [
-        {
-          id: nanoid(),
-          type: 'field',
+        buildFieldElement({
           fieldIdentifier: { nodeId: '4f609a81-0e25-47d1-ba0d-f24fedd5273f', fieldName: 'value' },
-        },
-        {
-          id: nanoid(),
-          type: 'field',
+        }),
+        buildFieldElement({
           fieldIdentifier: { nodeId: '4f609a81-0e25-47d1-ba0d-f24fedd5273f', fieldName: 'value' },
-        },
-        {
-          id: nanoid(),
-          type: 'field',
+        }),
+        buildFieldElement({
           fieldIdentifier: { nodeId: '4f609a81-0e25-47d1-ba0d-f24fedd5273f', fieldName: 'value' },
-        },
-        {
-          id: nanoid(),
-          type: 'field',
+        }),
+        buildFieldElement({
           fieldIdentifier: { nodeId: '4f609a81-0e25-47d1-ba0d-f24fedd5273f', fieldName: 'value' },
-        },
+        }),
       ],
-    },
-    {
-      id: nanoid(),
-      type: 'field',
-      fieldIdentifier: { nodeId: '14744f68-9000-4694-b4d6-cbe83ee231ee', fieldName: 'model' },
-    },
-    { id: nanoid(), type: 'divider' },
-    { id: nanoid(), type: 'notes', content: 'These are some notes that are definitely super helpful.', fontSize: 'sm' },
-    { id: nanoid(), type: 'divider' },
-    {
-      id: nanoid(),
-      type: 'container',
-      orientation: 'horizontal',
+    }),
+    buildFieldElement({ fieldIdentifier: { nodeId: '14744f68-9000-4694-b4d6-cbe83ee231ee', fieldName: 'model' } }),
+    buildDividerElement(),
+    buildTextElement({ content: 'These are some text that are definitely super helpful.', fontSize: 'sm' }),
+    buildDividerElement(),
+    buildStackElement({
+      direction: 'horizontal',
       children: [
-        {
-          id: nanoid(),
-          type: 'container',
-          orientation: 'vertical',
+        buildStackElement({
+          direction: 'vertical',
           children: [
-            {
-              id: nanoid(),
-              type: 'field',
+            buildFieldElement({
               fieldIdentifier: { nodeId: '7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', fieldName: 'image' },
-            },
-            {
-              id: nanoid(),
-              type: 'field',
+            }),
+            buildFieldElement({
               fieldIdentifier: { nodeId: '7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', fieldName: 'image' },
-            },
+            }),
           ],
-        },
-        { id: nanoid(), type: 'divider' },
-        {
-          id: nanoid(),
-          type: 'field',
+        }),
+        buildDividerElement(),
+        buildFieldElement({
           fieldIdentifier: { nodeId: '7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', fieldName: 'value' },
-        },
+        }),
       ],
-    },
+    }),
   ],
-};
+});

From 53fb2509d75fe5df2311de50f7508aa5c69f8ef0 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 22 Jan 2025 15:53:28 +1100
Subject: [PATCH 22/58] chore(ui): lint

---
 .../features/nodes/components/flow/nodes/common/NodeWrapper.tsx | 2 +-
 .../web/src/features/nodes/hooks/useInputFieldDefaultValue.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
index 18a7c050731..b00859bc409 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
@@ -2,8 +2,8 @@ import type { ChakraProps } from '@invoke-ai/ui-library';
 import { Box, useGlobalMenuClose, useToken } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHooks';
 import NodeSelectionOverlay from 'common/components/NodeSelectionOverlay';
-import { useNodeExecutionState } from 'features/nodes/hooks/useNodeExecutionState';
 import { useMouseOverNode } from 'features/nodes/hooks/useMouseOverNode';
+import { useNodeExecutionState } from 'features/nodes/hooks/useNodeExecutionState';
 import { nodesChanged } from 'features/nodes/store/nodesSlice';
 import { selectNodes } from 'features/nodes/store/selectors';
 import { selectNodeOpacity } from 'features/nodes/store/workflowSettingsSlice';
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldDefaultValue.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldDefaultValue.ts
index 0f1f2aa7220..0f7f3856dc4 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldDefaultValue.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldDefaultValue.ts
@@ -1,6 +1,6 @@
 import { useAppDispatch } from 'app/store/storeHooks';
-import { useInputFieldValue } from 'features/nodes/hooks/useInputFieldValue';
 import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate';
+import { useInputFieldValue } from 'features/nodes/hooks/useInputFieldValue';
 import { fieldValueReset } from 'features/nodes/store/nodesSlice';
 import { isEqual } from 'lodash-es';
 import { useCallback, useMemo } from 'react';

From f051b0b56c302564a16f22fcf6c9a8e27ebfd253 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 22 Jan 2025 15:53:52 +1100
Subject: [PATCH 23/58] feat(ui): iterate on builder (WIP)

---
 .../builder/ColumnElementComponent.tsx        |  80 ++++++
 .../builder/ContainerElementComponent.tsx     |  46 ++++
 .../builder/DividerElementComponent.tsx       |  11 +
 .../builder/HeadingElementComponent.tsx       |  24 ++
 .../builder/NodeFieldElementComponent.tsx     |  20 ++
 .../builder/TextElementComponent.tsx          |  16 ++
 .../sidePanel/builder/WorkflowBuilder.tsx     |  19 ++
 .../sidePanel/workflow/WorkflowBuilder.tsx    | 134 ----------
 .../sidePanel/workflow/WorkflowPanel.tsx      |   2 +-
 .../web/src/features/nodes/types/workflow.ts  | 234 +++++++++---------
 10 files changed, 335 insertions(+), 251 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ColumnElementComponent.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
 delete mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowBuilder.tsx

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ColumnElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ColumnElementComponent.tsx
new file mode 100644
index 00000000000..1dfa3a712b0
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ColumnElementComponent.tsx
@@ -0,0 +1,80 @@
+import { Flex, Grid, GridItem } from '@invoke-ai/ui-library';
+import {
+  ContainerElementComponent,
+  useContainerContext,
+} from 'features/nodes/components/sidePanel/builder/ContainerElementComponent';
+import { DividerElementComponent } from 'features/nodes/components/sidePanel/builder/DividerElementComponent';
+import { HeadingElementComponent } from 'features/nodes/components/sidePanel/builder/HeadingElementComponent';
+import { NodeFieldElementComponent } from 'features/nodes/components/sidePanel/builder/NodeFieldElementComponent';
+import { TextElementComponent } from 'features/nodes/components/sidePanel/builder/TextElementComponent';
+import type { ColumnChildElement, ColumnElement } from 'features/nodes/types/workflow';
+import type { PropsWithChildren } from 'react';
+import { createContext, memo, useContext, useMemo } from 'react';
+import type { Equals } from 'tsafe';
+import { assert } from 'tsafe';
+
+const _ColumnContext = createContext<{ columnId: string; columnNumber: number } | null>(null);
+const ColumnContextProvider = ({
+  columnId,
+  columnNumber,
+  children,
+}: PropsWithChildren<{ columnId: string; columnNumber: number }>) => {
+  const ctx = useMemo(() => ({ columnId, columnNumber }), [columnId, columnNumber]);
+  return <_ColumnContext.Provider value={ctx}>{children}</_ColumnContext.Provider>;
+};
+export const useColumnContext = () => {
+  const context = useContext(_ColumnContext);
+  assert(context !== null);
+  return context;
+};
+
+const ColumnElementChildComponent = memo(({ element }: { element: ColumnChildElement }) => {
+  const { type, id } = element;
+  switch (type) {
+    case 'container':
+      return <ContainerElementComponent key={id} element={element} />;
+    case 'node-field':
+      return <NodeFieldElementComponent key={id} element={element} />;
+    case 'divider':
+      return <DividerElementComponent key={id} element={element} />;
+    case 'heading':
+      return <HeadingElementComponent key={id} element={element} />;
+    case 'text':
+      return <TextElementComponent key={id} element={element} />;
+    default:
+      assert<Equals<typeof type, never>>(false, `Unhandled type ${type}`);
+  }
+});
+ColumnElementChildComponent.displayName = 'ColumnElementChildComponent';
+
+export const ColumnElementComponent = memo(({ element }: { element: ColumnElement }) => {
+  const containerCtx = useContainerContext();
+  const columnNumber = useMemo(
+    () => containerCtx.columnIds.indexOf(element.id) + 1,
+    [containerCtx.columnIds, element.id]
+  );
+  const withDivider = useMemo(
+    () => containerCtx.columnIds.indexOf(element.id) + 1 < containerCtx.columnIds.length,
+    [containerCtx.columnIds, element.id]
+  );
+  return (
+    <ColumnContextProvider columnId={element.id} columnNumber={columnNumber}>
+      <>
+        <GridItem
+          as={Grid}
+          id={`column:${element.id}_${columnNumber}`}
+          gap={4}
+          gridAutoRows="min-content"
+          gridAutoFlow="row"
+        >
+          {element.data.elements.map((element) => (
+            <ColumnElementChildComponent key={element.id} element={element} />
+          ))}
+        </GridItem>
+        {withDivider && <Flex w="1px" bg="base.800" flexShrink={0} />}
+      </>
+    </ColumnContextProvider>
+  );
+});
+
+ColumnElementComponent.displayName = 'ColumnElementComponent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
new file mode 100644
index 00000000000..9446e7301b4
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
@@ -0,0 +1,46 @@
+import { Grid } from '@invoke-ai/ui-library';
+import { ColumnElementComponent } from 'features/nodes/components/sidePanel/builder/ColumnElementComponent';
+import type { ContainerElement } from 'features/nodes/types/workflow';
+import type { PropsWithChildren } from 'react';
+import { createContext, memo, useContext, useMemo } from 'react';
+import { assert } from 'tsafe';
+
+const _ContainerContext = createContext<{ containerId: string; columnIds: string[]; depth: number } | null>(null);
+const ContainerContextProvider = ({
+  containerId,
+  columnIds,
+  children,
+}: PropsWithChildren<{ containerId: string; columnIds: string[] }>) => {
+  const parentCtx = useContext(_ContainerContext);
+  const ctx = useMemo(
+    () => ({ containerId, columnIds, depth: parentCtx ? parentCtx.depth + 1 : 0 }),
+    [columnIds, containerId, parentCtx]
+  );
+  return <_ContainerContext.Provider value={ctx}>{children}</_ContainerContext.Provider>;
+};
+export const useContainerContext = () => {
+  const context = useContext(_ContainerContext);
+  assert(context !== null);
+  return context;
+};
+
+const getGridTemplateColumns = (count: number) => {
+  return Array.from({ length: count }, () => '1fr').join(' auto ');
+};
+
+export const ContainerElementComponent = memo(({ element }: { element: ContainerElement }) => {
+  const { id, data } = element;
+  const { columns } = data;
+  const columnIds = useMemo(() => columns.map((column) => column.id), [columns]);
+
+  return (
+    <ContainerContextProvider containerId={id} columnIds={columnIds}>
+      <Grid id={id} gap={4} gridTemplateColumns={getGridTemplateColumns(columns.length)} gridAutoFlow="column">
+        {columns.map((element, i) => {
+          return <ColumnElementComponent key={`column:${id}_${i + 1}`} element={element} />;
+        })}
+      </Grid>
+    </ContainerContextProvider>
+  );
+});
+ContainerElementComponent.displayName = 'ContainerElementComponent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
new file mode 100644
index 00000000000..6d5b6337795
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
@@ -0,0 +1,11 @@
+import { Flex } from '@invoke-ai/ui-library';
+import type { DividerElement } from 'features/nodes/types/workflow';
+import { memo } from 'react';
+
+export const DividerElementComponent = memo(({ element }: { element: DividerElement }) => {
+  const { id } = element;
+
+  return <Flex id={id} h="1px" bg="base.800" flexShrink={0} />;
+});
+
+DividerElementComponent.displayName = 'DividerElementComponent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx
new file mode 100644
index 00000000000..982c2c69b3f
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx
@@ -0,0 +1,24 @@
+import { Heading } from '@invoke-ai/ui-library';
+import type { HeadingElement } from 'features/nodes/types/workflow';
+import { memo } from 'react';
+
+const LEVEL_TO_SIZE = {
+  1: 'xl',
+  2: 'lg',
+  3: 'md',
+  4: 'sm',
+  5: 'xs',
+} as const;
+
+export const HeadingElementComponent = memo(({ element }: { element: HeadingElement }) => {
+  const { id, data } = element;
+  const { content, level } = data;
+
+  return (
+    <Heading id={id} size={LEVEL_TO_SIZE[level]}>
+      {content}
+    </Heading>
+  );
+});
+
+HeadingElementComponent.displayName = 'HeadingElementComponent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx
new file mode 100644
index 00000000000..46123dd1561
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx
@@ -0,0 +1,20 @@
+import { Flex } from '@invoke-ai/ui-library';
+import { InputFieldGate } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate';
+import { InputFieldViewMode } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode';
+import type { NodeFieldElement } from 'features/nodes/types/workflow';
+import { memo } from 'react';
+
+export const NodeFieldElementComponent = memo(({ element }: { element: NodeFieldElement }) => {
+  const { id, data } = element;
+  const { fieldIdentifier } = data;
+
+  return (
+    <Flex id={id} flexBasis="100%">
+      <InputFieldGate nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName}>
+        <InputFieldViewMode nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName} />
+      </InputFieldGate>
+    </Flex>
+  );
+});
+
+NodeFieldElementComponent.displayName = 'NodeFieldElementComponent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
new file mode 100644
index 00000000000..b81bd255fbc
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
@@ -0,0 +1,16 @@
+import { Text } from '@invoke-ai/ui-library';
+import type { TextElement } from 'features/nodes/types/workflow';
+import { memo } from 'react';
+
+export const TextElementComponent = memo(({ element }: { element: TextElement }) => {
+  const { id, data } = element;
+  const { content, fontSize } = data;
+
+  return (
+    <Text id={id} fontSize={fontSize}>
+      {content}
+    </Text>
+  );
+});
+
+TextElementComponent.displayName = 'TextElementComponent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
new file mode 100644
index 00000000000..b48288f025f
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
@@ -0,0 +1,19 @@
+import { Flex } from '@invoke-ai/ui-library';
+import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+import { ContainerElementComponent } from 'features/nodes/components/sidePanel/builder/ContainerElementComponent';
+import { data } from 'features/nodes/types/workflow';
+import { memo } from 'react';
+
+export const WorkflowBuilder = memo(() => {
+  return (
+    <ScrollableContent>
+      <Flex w="full" h="full" justifyContent="center">
+        <Flex w="full" h="full" maxW={512}>
+          <ContainerElementComponent element={data} />
+        </Flex>
+      </Flex>
+    </ScrollableContent>
+  );
+});
+
+WorkflowBuilder.displayName = 'WorkflowBuilder';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowBuilder.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowBuilder.tsx
deleted file mode 100644
index 53c9f1afb5e..00000000000
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowBuilder.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { Flex, Heading, Text } from '@invoke-ai/ui-library';
-import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
-import { InputFieldGate } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate';
-import { InputFieldViewMode } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode';
-import type {
-  BuilderElement,
-  DividerElement,
-  FieldElement,
-  HeadingElement,
-  StackElement,
-  TextElement,
-} from 'features/nodes/types/workflow';
-import { data } from 'features/nodes/types/workflow';
-import { createContext, memo, useContext, useMemo } from 'react';
-import { assert } from 'tsafe';
-
-const StackContext = createContext<{ direction: StackElement['data']['direction']; depth: number } | null>(null);
-
-const useStackContext = () => {
-  const context = useContext(StackContext);
-  assert(context !== null);
-  return context;
-};
-
-export const WorkflowBuilder = memo(() => {
-  return (
-    <ScrollableContent>
-      <ElementComponent element={data} />
-    </ScrollableContent>
-  );
-});
-
-WorkflowBuilder.displayName = 'WorkflowBuilder';
-
-const ElementComponent = ({ element }: { element: BuilderElement }) => {
-  switch (element.type) {
-    case 'stack':
-      return <StackElementComponent element={element} />;
-    case 'field':
-      return <FieldElementComponent element={element} />;
-    case 'heading':
-      return <HeadingElementComponent element={element} />;
-    case 'text':
-      return <TextElementComponent element={element} />;
-    case 'divider':
-      return <DividerElementComponent element={element} />;
-    default:
-      assert(false, `Unhandled element type: ${element}`);
-  }
-};
-
-const DIRECTION_TO_FLEXDIR = {
-  horizontal: 'row',
-  vertical: 'column',
-} as const;
-const StackElementComponent = ({ element }: { element: StackElement }) => {
-  const { id, data } = element;
-  const { children, direction } = data;
-
-  const parentCtx = useContext(StackContext);
-  const depth = useMemo(() => (parentCtx ? parentCtx.depth + 1 : 0), [parentCtx]);
-  const ctx = useMemo(() => ({ direction, depth }), [depth, direction]);
-
-  return (
-    <StackContext.Provider value={ctx}>
-      <Flex id={id} gap={2} flexDir={DIRECTION_TO_FLEXDIR[direction]}>
-        {children.map((child) => (
-          <ElementComponent key={child.id} element={child} />
-        ))}
-      </Flex>
-    </StackContext.Provider>
-  );
-};
-
-const FieldElementComponent = ({ element }: { element: FieldElement }) => {
-  const { id, data } = element;
-  const { fieldIdentifier } = data;
-
-  return (
-    <Flex id={id} flexBasis="100%">
-      <InputFieldGate nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName}>
-        <InputFieldViewMode nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName} />
-      </InputFieldGate>
-    </Flex>
-  );
-};
-
-const LEVEL_TO_SIZE = {
-  1: 'xl',
-  2: 'lg',
-  3: 'md',
-  4: 'sm',
-  5: 'xs',
-} as const;
-const HeadingElementComponent = ({ element }: { element: HeadingElement }) => {
-  const { id, data } = element;
-  const { content, level } = data;
-
-  return (
-    <Heading id={id} size={LEVEL_TO_SIZE[level]}>
-      {content}
-    </Heading>
-  );
-};
-
-const TextElementComponent = ({ element }: { element: TextElement }) => {
-  const { id, data } = element;
-  const { content, fontSize } = data;
-
-  return (
-    <Text id={id} fontSize={fontSize}>
-      {content}
-    </Text>
-  );
-};
-
-const DIRECTION_TO_WIDTH = {
-  horizontal: '1px',
-  vertical: undefined,
-};
-
-const DIRECTION_TO_HEIGHT = {
-  horizontal: undefined,
-  vertical: '1px',
-};
-
-const DividerElementComponent = ({ element }: { element: DividerElement }) => {
-  const { id } = element;
-  const { direction } = useStackContext();
-
-  return (
-    <Flex id={id} w={DIRECTION_TO_WIDTH[direction]} h={DIRECTION_TO_HEIGHT[direction]} bg="base.700" flexShrink={0} />
-  );
-};
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
index d98e6ed83ef..4e00f593c5a 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
@@ -1,5 +1,5 @@
 import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
-import { WorkflowBuilder } from 'features/nodes/components/sidePanel/workflow/WorkflowBuilder';
+import { WorkflowBuilder } from 'features/nodes/components/sidePanel/builder/WorkflowBuilder';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
diff --git a/invokeai/frontend/web/src/features/nodes/types/workflow.ts b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
index 9776eef64d1..4c323061d62 100644
--- a/invokeai/frontend/web/src/features/nodes/types/workflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
@@ -78,34 +78,28 @@ export type WorkflowV3 = z.infer<typeof zWorkflowV3>;
 // #endregion
 
 // #region Workflow Builder
-const buildElementBuilder =
-  <T extends BuilderElement['type']>(type: T) =>
-  (data: Extract<BuilderElement, { type: T }>['data']): Extract<BuilderElement, { type: T }> =>
-    ({
-      id: nanoid(),
-      type,
-      data,
-    }) as Extract<BuilderElement, { type: T }>;
-const zFieldElementNumberConfig = z.object({
-  display: z.enum(['slider', 'input', 'input-with-slider-inline', 'input-with-slider-popover']),
-});
-const zFieldElementStringConfig = z.object({
-  display: z.enum(['input', 'textarea']),
-});
 
 const zElementBase = z.object({
   id: z.string().trim().min(1),
 });
 
-const zFieldElement = zElementBase.extend({
-  type: z.literal('field'),
+const zNodeFieldElement = zElementBase.extend({
+  type: z.literal('node-field'),
   data: z.object({
     fieldIdentifier: zFieldIdentifier,
-    fieldConfig: z.union([zFieldElementNumberConfig, zFieldElementStringConfig]).optional(),
   }),
 });
-export type FieldElement = z.infer<typeof zFieldElement>;
-const buildFieldElement = buildElementBuilder('field');
+export type NodeFieldElement = z.infer<typeof zNodeFieldElement>;
+const nodeField = (
+  nodeId: NodeFieldElement['data']['fieldIdentifier']['nodeId'],
+  fieldName: NodeFieldElement['data']['fieldIdentifier']['fieldName']
+): NodeFieldElement => ({
+  id: nanoid(),
+  type: 'node-field',
+  data: {
+    fieldIdentifier: { nodeId, fieldName },
+  },
+});
 
 const zHeadingElement = zElementBase.extend({
   type: z.literal('heading'),
@@ -115,7 +109,17 @@ const zHeadingElement = zElementBase.extend({
   }),
 });
 export type HeadingElement = z.infer<typeof zHeadingElement>;
-const buildHeadingElement = buildElementBuilder('heading');
+const heading = (
+  content: HeadingElement['data']['content'],
+  level: HeadingElement['data']['level']
+): HeadingElement => ({
+  id: nanoid(),
+  type: 'heading',
+  data: {
+    content,
+    level,
+  },
+});
 
 const zTextElement = zElementBase.extend({
   type: z.literal('text'),
@@ -125,134 +129,132 @@ const zTextElement = zElementBase.extend({
   }),
 });
 export type TextElement = z.infer<typeof zTextElement>;
-const buildTextElement = buildElementBuilder('text');
+const text = (content: TextElement['data']['content'], fontSize: TextElement['data']['fontSize']): TextElement => ({
+  id: nanoid(),
+  type: 'text',
+  data: {
+    content,
+    fontSize,
+  },
+});
 
 const zDividerElement = zElementBase.extend({
   type: z.literal('divider'),
-  data: z.void(),
 });
 export type DividerElement = z.infer<typeof zDividerElement>;
-const buildDividerElement = buildElementBuilder('divider');
+const divider = (): DividerElement => ({
+  id: nanoid(),
+  type: 'divider',
+});
+
+export type ColumnElement = {
+  id: string;
+  type: 'column';
+  data: {
+    elements: ColumnChildElement[];
+  };
+};
+
+const zColumnElement = zElementBase.extend({
+  type: z.literal('column'),
+  data: z.object({
+    elements: z.lazy(() => z.array(zColumnChildElement)),
+  }),
+});
+const column = (elements: ColumnElement['data']['elements']): ColumnElement => ({
+  id: nanoid(),
+  type: 'column',
+  data: {
+    elements,
+  },
+});
 
-export type StackElement = {
+export type ContainerElement = {
   id: string;
-  type: 'stack';
+  type: 'container';
   data: {
-    children: BuilderElement[];
-    direction: 'horizontal' | 'vertical';
+    columns: ColumnElement[];
   };
 };
 
-const zStackElement: z.ZodType<StackElement> = zElementBase.extend({
-  type: z.literal('stack'),
+const zContainerElement: z.ZodType<ContainerElement> = zElementBase.extend({
+  type: z.literal('container'),
   data: z.object({
-    children: z.lazy(() => z.array(zElement)),
-    direction: z.enum(['horizontal', 'vertical']),
+    columns: z.lazy(() => z.array(zColumnElement)),
   }),
 });
-const buildStackElement = buildElementBuilder('stack');
+const container = (columns: ContainerElement['data']['columns']): ContainerElement => ({
+  id: nanoid(),
+  type: 'container',
+  data: {
+    columns,
+  },
+});
 
 // export type CollapsibleElement = {
 //   id: string;
 //   type: 'collapsible';
-//   children: BuilderElement[];
+//   columns: BuilderElement[];
 //   title: string;
 //   collapsed: boolean;
 // };
 
 // const zCollapsibleElement: z.ZodType<CollapsibleElement> = z.object({
 //   type: z.literal('collapsible'),
-//   children: z.lazy(() => z.array(zElement)),
+//   columns: z.lazy(() => z.array(zElement)),
 //   title: z.string(),
 //   collapsed: z.boolean(),
 // });
 
-const zElement = z.union([
-  zStackElement,
+const zColumnChildElement = z.union([
+  zContainerElement,
   // zCollapsibleElement
-  zFieldElement,
+  zNodeFieldElement,
   zHeadingElement,
   zTextElement,
   zDividerElement,
 ]);
 
-export type BuilderElement =
-  | StackElement
-  // | CollapsibleElement
-  | FieldElement
-  | HeadingElement
-  | TextElement
-  | DividerElement;
+export type ColumnChildElement = z.infer<typeof zColumnChildElement>;
 
-export const data: StackElement = buildStackElement({
-  direction: 'vertical',
-  children: [
-    buildHeadingElement({ content: 'My Cool Workflow', level: 1 }),
-    buildTextElement({ content: 'This is a description of what my workflow does. It does things.', fontSize: 'md' }),
-    buildDividerElement(),
-    buildHeadingElement({ content: 'First Section', level: 2 }),
-    buildTextElement({
-      content: 'The first section includes fields relevant to the first section. This note describes that fact.',
-      fontSize: 'sm',
-    }),
-    buildStackElement({
-      direction: 'horizontal',
-      children: [
-        buildFieldElement({
-          fieldIdentifier: { nodeId: '7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', fieldName: 'image' },
-        }),
-        buildFieldElement({
-          fieldIdentifier: { nodeId: '7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', fieldName: 'image' },
-        }),
-        buildFieldElement({
-          fieldIdentifier: { nodeId: '7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', fieldName: 'image' },
-        }),
-      ],
-    }),
-    buildFieldElement({ fieldIdentifier: { nodeId: '9c058600-8d73-4702-912b-0ccf37403bfd', fieldName: 'value' } }),
-    buildFieldElement({ fieldIdentifier: { nodeId: '7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', fieldName: 'value' } }),
-    buildFieldElement({ fieldIdentifier: { nodeId: '4e16cbf6-457c-46fb-9ab7-9cb262fa1e03', fieldName: 'value' } }),
-    buildFieldElement({ fieldIdentifier: { nodeId: '39cb5272-a9d7-4da9-9c35-32e02b46bb34', fieldName: 'color' } }),
-    buildStackElement({
-      direction: 'horizontal',
-      children: [
-        buildFieldElement({
-          fieldIdentifier: { nodeId: '4f609a81-0e25-47d1-ba0d-f24fedd5273f', fieldName: 'value' },
-        }),
-        buildFieldElement({
-          fieldIdentifier: { nodeId: '4f609a81-0e25-47d1-ba0d-f24fedd5273f', fieldName: 'value' },
-        }),
-        buildFieldElement({
-          fieldIdentifier: { nodeId: '4f609a81-0e25-47d1-ba0d-f24fedd5273f', fieldName: 'value' },
-        }),
-        buildFieldElement({
-          fieldIdentifier: { nodeId: '4f609a81-0e25-47d1-ba0d-f24fedd5273f', fieldName: 'value' },
-        }),
-      ],
-    }),
-    buildFieldElement({ fieldIdentifier: { nodeId: '14744f68-9000-4694-b4d6-cbe83ee231ee', fieldName: 'model' } }),
-    buildDividerElement(),
-    buildTextElement({ content: 'These are some text that are definitely super helpful.', fontSize: 'sm' }),
-    buildDividerElement(),
-    buildStackElement({
-      direction: 'horizontal',
-      children: [
-        buildStackElement({
-          direction: 'vertical',
-          children: [
-            buildFieldElement({
-              fieldIdentifier: { nodeId: '7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', fieldName: 'image' },
-            }),
-            buildFieldElement({
-              fieldIdentifier: { nodeId: '7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', fieldName: 'image' },
-            }),
-          ],
-        }),
-        buildDividerElement(),
-        buildFieldElement({
-          fieldIdentifier: { nodeId: '7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', fieldName: 'value' },
-        }),
-      ],
-    }),
-  ],
-});
+export const data: ContainerElement = container([
+  column([
+    heading('My Cool Workflow', 1),
+    text('This is a description of what my workflow does. It does things.', 'md'),
+    divider(),
+    heading('First Section', 2),
+    text('The first section includes fields relevant to the first section. This note describes that fact.', 'sm'),
+    container([
+      column([nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image')]),
+      column([nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image')]),
+      column([nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image')]),
+    ]),
+    nodeField('9c058600-8d73-4702-912b-0ccf37403bfd', 'value'),
+    nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value'),
+    nodeField('4e16cbf6-457c-46fb-9ab7-9cb262fa1e03', 'value'),
+    nodeField('39cb5272-a9d7-4da9-9c35-32e02b46bb34', 'color'),
+    container([
+      column([
+        nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
+        nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
+      ]),
+      column([
+        nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
+        nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
+        nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
+        nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
+      ]),
+    ]),
+    nodeField('14744f68-9000-4694-b4d6-cbe83ee231ee', 'model'),
+    divider(),
+    text('These are some text that are definitely super helpful.', 'sm'),
+    divider(),
+    container([
+      column([
+        nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image'),
+        nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image'),
+      ]),
+      column([nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value')]),
+    ]),
+  ]),
+]);

From dfc1d674926a90c30891b6674f347d7fbf161924 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 22 Jan 2025 16:47:03 +1100
Subject: [PATCH 24/58] feat(ui): iterate on builder (WIP)

---
 .../builder/ColumnElementComponent.tsx        | 80 -----------------
 .../builder/ContainerElementComponent.tsx     | 75 +++++++++-------
 .../sidePanel/builder/WorkflowBuilder.tsx     |  4 +-
 .../sidePanel/workflow/WorkflowPanel.tsx      |  5 ++
 .../web/src/features/nodes/types/workflow.ts  | 88 ++++++-------------
 5 files changed, 78 insertions(+), 174 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ColumnElementComponent.tsx

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ColumnElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ColumnElementComponent.tsx
deleted file mode 100644
index 1dfa3a712b0..00000000000
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ColumnElementComponent.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { Flex, Grid, GridItem } from '@invoke-ai/ui-library';
-import {
-  ContainerElementComponent,
-  useContainerContext,
-} from 'features/nodes/components/sidePanel/builder/ContainerElementComponent';
-import { DividerElementComponent } from 'features/nodes/components/sidePanel/builder/DividerElementComponent';
-import { HeadingElementComponent } from 'features/nodes/components/sidePanel/builder/HeadingElementComponent';
-import { NodeFieldElementComponent } from 'features/nodes/components/sidePanel/builder/NodeFieldElementComponent';
-import { TextElementComponent } from 'features/nodes/components/sidePanel/builder/TextElementComponent';
-import type { ColumnChildElement, ColumnElement } from 'features/nodes/types/workflow';
-import type { PropsWithChildren } from 'react';
-import { createContext, memo, useContext, useMemo } from 'react';
-import type { Equals } from 'tsafe';
-import { assert } from 'tsafe';
-
-const _ColumnContext = createContext<{ columnId: string; columnNumber: number } | null>(null);
-const ColumnContextProvider = ({
-  columnId,
-  columnNumber,
-  children,
-}: PropsWithChildren<{ columnId: string; columnNumber: number }>) => {
-  const ctx = useMemo(() => ({ columnId, columnNumber }), [columnId, columnNumber]);
-  return <_ColumnContext.Provider value={ctx}>{children}</_ColumnContext.Provider>;
-};
-export const useColumnContext = () => {
-  const context = useContext(_ColumnContext);
-  assert(context !== null);
-  return context;
-};
-
-const ColumnElementChildComponent = memo(({ element }: { element: ColumnChildElement }) => {
-  const { type, id } = element;
-  switch (type) {
-    case 'container':
-      return <ContainerElementComponent key={id} element={element} />;
-    case 'node-field':
-      return <NodeFieldElementComponent key={id} element={element} />;
-    case 'divider':
-      return <DividerElementComponent key={id} element={element} />;
-    case 'heading':
-      return <HeadingElementComponent key={id} element={element} />;
-    case 'text':
-      return <TextElementComponent key={id} element={element} />;
-    default:
-      assert<Equals<typeof type, never>>(false, `Unhandled type ${type}`);
-  }
-});
-ColumnElementChildComponent.displayName = 'ColumnElementChildComponent';
-
-export const ColumnElementComponent = memo(({ element }: { element: ColumnElement }) => {
-  const containerCtx = useContainerContext();
-  const columnNumber = useMemo(
-    () => containerCtx.columnIds.indexOf(element.id) + 1,
-    [containerCtx.columnIds, element.id]
-  );
-  const withDivider = useMemo(
-    () => containerCtx.columnIds.indexOf(element.id) + 1 < containerCtx.columnIds.length,
-    [containerCtx.columnIds, element.id]
-  );
-  return (
-    <ColumnContextProvider columnId={element.id} columnNumber={columnNumber}>
-      <>
-        <GridItem
-          as={Grid}
-          id={`column:${element.id}_${columnNumber}`}
-          gap={4}
-          gridAutoRows="min-content"
-          gridAutoFlow="row"
-        >
-          {element.data.elements.map((element) => (
-            <ColumnElementChildComponent key={element.id} element={element} />
-          ))}
-        </GridItem>
-        {withDivider && <Flex w="1px" bg="base.800" flexShrink={0} />}
-      </>
-    </ColumnContextProvider>
-  );
-});
-
-ColumnElementComponent.displayName = 'ColumnElementComponent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
index 9446e7301b4..537b10d5c3d 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
@@ -1,29 +1,13 @@
-import { Grid } from '@invoke-ai/ui-library';
-import { ColumnElementComponent } from 'features/nodes/components/sidePanel/builder/ColumnElementComponent';
-import type { ContainerElement } from 'features/nodes/types/workflow';
-import type { PropsWithChildren } from 'react';
-import { createContext, memo, useContext, useMemo } from 'react';
+import { Flex, Grid, GridItem } from '@invoke-ai/ui-library';
+import { DividerElementComponent } from 'features/nodes/components/sidePanel/builder/DividerElementComponent';
+import { HeadingElementComponent } from 'features/nodes/components/sidePanel/builder/HeadingElementComponent';
+import { NodeFieldElementComponent } from 'features/nodes/components/sidePanel/builder/NodeFieldElementComponent';
+import { TextElementComponent } from 'features/nodes/components/sidePanel/builder/TextElementComponent';
+import type { ContainerElement, FormElement } from 'features/nodes/types/workflow';
+import { Fragment, memo } from 'react';
+import type { Equals } from 'tsafe';
 import { assert } from 'tsafe';
 
-const _ContainerContext = createContext<{ containerId: string; columnIds: string[]; depth: number } | null>(null);
-const ContainerContextProvider = ({
-  containerId,
-  columnIds,
-  children,
-}: PropsWithChildren<{ containerId: string; columnIds: string[] }>) => {
-  const parentCtx = useContext(_ContainerContext);
-  const ctx = useMemo(
-    () => ({ containerId, columnIds, depth: parentCtx ? parentCtx.depth + 1 : 0 }),
-    [columnIds, containerId, parentCtx]
-  );
-  return <_ContainerContext.Provider value={ctx}>{children}</_ContainerContext.Provider>;
-};
-export const useContainerContext = () => {
-  const context = useContext(_ContainerContext);
-  assert(context !== null);
-  return context;
-};
-
 const getGridTemplateColumns = (count: number) => {
   return Array.from({ length: count }, () => '1fr').join(' auto ');
 };
@@ -31,16 +15,43 @@ const getGridTemplateColumns = (count: number) => {
 export const ContainerElementComponent = memo(({ element }: { element: ContainerElement }) => {
   const { id, data } = element;
   const { columns } = data;
-  const columnIds = useMemo(() => columns.map((column) => column.id), [columns]);
 
   return (
-    <ContainerContextProvider containerId={id} columnIds={columnIds}>
-      <Grid id={id} gap={4} gridTemplateColumns={getGridTemplateColumns(columns.length)} gridAutoFlow="column">
-        {columns.map((element, i) => {
-          return <ColumnElementComponent key={`column:${id}_${i + 1}`} element={element} />;
-        })}
-      </Grid>
-    </ContainerContextProvider>
+    <Grid id={id} gap={4} gridTemplateColumns={getGridTemplateColumns(columns.length)} gridAutoFlow="column">
+      {columns.map((elements, columnIndex) => {
+        const key = `${element.id}_${columnIndex}`;
+        const withDivider = columnIndex < columns.length - 1;
+        return (
+          <Fragment key={key}>
+            <GridItem as={Grid} id={key} gap={4} gridAutoRows="min-content" gridAutoFlow="row">
+              {elements.map((element) => (
+                <FormElementComponent key={element.id} element={element} />
+              ))}
+            </GridItem>
+            {withDivider && <Flex w="1px" bg="base.800" flexShrink={0} />}
+          </Fragment>
+        );
+      })}
+    </Grid>
   );
 });
 ContainerElementComponent.displayName = 'ContainerElementComponent';
+
+export const FormElementComponent = memo(({ element }: { element: FormElement }) => {
+  const { type, id } = element;
+  switch (type) {
+    case 'container':
+      return <ContainerElementComponent key={id} element={element} />;
+    case 'node-field':
+      return <NodeFieldElementComponent key={id} element={element} />;
+    case 'divider':
+      return <DividerElementComponent key={id} element={element} />;
+    case 'heading':
+      return <HeadingElementComponent key={id} element={element} />;
+    case 'text':
+      return <TextElementComponent key={id} element={element} />;
+    default:
+      assert<Equals<typeof type, never>>(false, `Unhandled type ${type}`);
+  }
+});
+FormElementComponent.displayName = 'FormElementComponent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
index b48288f025f..62dedaabad2 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
@@ -1,6 +1,6 @@
 import { Flex } from '@invoke-ai/ui-library';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
-import { ContainerElementComponent } from 'features/nodes/components/sidePanel/builder/ContainerElementComponent';
+import { FormElementComponent } from 'features/nodes/components/sidePanel/builder/ContainerElementComponent';
 import { data } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
@@ -9,7 +9,7 @@ export const WorkflowBuilder = memo(() => {
     <ScrollableContent>
       <Flex w="full" h="full" justifyContent="center">
         <Flex w="full" h="full" maxW={512}>
-          <ContainerElementComponent element={data} />
+          <FormElementComponent element={data} />
         </Flex>
       </Flex>
     </ScrollableContent>
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
index 4e00f593c5a..e21606101bb 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
@@ -1,5 +1,6 @@
 import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
 import { WorkflowBuilder } from 'features/nodes/components/sidePanel/builder/WorkflowBuilder';
+import WorkflowLinearTab from 'features/nodes/components/sidePanel/workflow/WorkflowLinearTab';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -12,6 +13,7 @@ const WorkflowFieldsLinearViewPanel = () => {
     <Flex layerStyle="first" flexDir="column" w="full" h="full" borderRadius="base" p={2} gap={2}>
       <Tabs variant="line" display="flex" w="full" h="full" flexDir="column">
         <TabList>
+          <Tab>Builder</Tab>
           <Tab>{t('common.linear')}</Tab>
           <Tab>{t('common.details')}</Tab>
           <Tab>JSON</Tab>
@@ -21,6 +23,9 @@ const WorkflowFieldsLinearViewPanel = () => {
           <TabPanel>
             <WorkflowBuilder />
           </TabPanel>
+          <TabPanel>
+            <WorkflowLinearTab />
+          </TabPanel>
           <TabPanel>
             <WorkflowGeneralTab />
           </TabPanel>
diff --git a/invokeai/frontend/web/src/features/nodes/types/workflow.ts b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
index 4c323061d62..a1d72f93ba9 100644
--- a/invokeai/frontend/web/src/features/nodes/types/workflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
@@ -147,40 +147,18 @@ const divider = (): DividerElement => ({
   type: 'divider',
 });
 
-export type ColumnElement = {
-  id: string;
-  type: 'column';
-  data: {
-    elements: ColumnChildElement[];
-  };
-};
-
-const zColumnElement = zElementBase.extend({
-  type: z.literal('column'),
-  data: z.object({
-    elements: z.lazy(() => z.array(zColumnChildElement)),
-  }),
-});
-const column = (elements: ColumnElement['data']['elements']): ColumnElement => ({
-  id: nanoid(),
-  type: 'column',
-  data: {
-    elements,
-  },
-});
-
 export type ContainerElement = {
   id: string;
   type: 'container';
   data: {
-    columns: ColumnElement[];
+    columns: FormElement[][];
   };
 };
 
 const zContainerElement: z.ZodType<ContainerElement> = zElementBase.extend({
   type: z.literal('container'),
   data: z.object({
-    columns: z.lazy(() => z.array(zColumnElement)),
+    columns: z.lazy(() => z.array(z.array(zFormElement))),
   }),
 });
 const container = (columns: ContainerElement['data']['columns']): ContainerElement => ({
@@ -191,70 +169,60 @@ const container = (columns: ContainerElement['data']['columns']): ContainerEleme
   },
 });
 
-// export type CollapsibleElement = {
-//   id: string;
-//   type: 'collapsible';
-//   columns: BuilderElement[];
-//   title: string;
-//   collapsed: boolean;
-// };
-
-// const zCollapsibleElement: z.ZodType<CollapsibleElement> = z.object({
-//   type: z.literal('collapsible'),
-//   columns: z.lazy(() => z.array(zElement)),
-//   title: z.string(),
-//   collapsed: z.boolean(),
-// });
-
-const zColumnChildElement = z.union([
-  zContainerElement,
-  // zCollapsibleElement
-  zNodeFieldElement,
-  zHeadingElement,
-  zTextElement,
-  zDividerElement,
-]);
+const zFormElement = z.union([zContainerElement, zNodeFieldElement, zHeadingElement, zTextElement, zDividerElement]);
 
-export type ColumnChildElement = z.infer<typeof zColumnChildElement>;
+export type FormElement = z.infer<typeof zFormElement>;
 
 export const data: ContainerElement = container([
-  column([
+  [
     heading('My Cool Workflow', 1),
     text('This is a description of what my workflow does. It does things.', 'md'),
     divider(),
     heading('First Section', 2),
     text('The first section includes fields relevant to the first section. This note describes that fact.', 'sm'),
     container([
-      column([nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image')]),
-      column([nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image')]),
-      column([nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image')]),
+      [nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image')],
+      [nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image')],
+      [nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image')],
     ]),
     nodeField('9c058600-8d73-4702-912b-0ccf37403bfd', 'value'),
     nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value'),
     nodeField('4e16cbf6-457c-46fb-9ab7-9cb262fa1e03', 'value'),
     nodeField('39cb5272-a9d7-4da9-9c35-32e02b46bb34', 'color'),
     container([
-      column([
+      [
         nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
         nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
-      ]),
-      column([
+      ],
+      [
         nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
         nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
         nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
         nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
-      ]),
+      ],
+      [
+        container([
+          [
+            nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
+            nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
+          ],
+          [
+            nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
+            nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
+          ],
+        ]),
+      ],
     ]),
     nodeField('14744f68-9000-4694-b4d6-cbe83ee231ee', 'model'),
     divider(),
     text('These are some text that are definitely super helpful.', 'sm'),
     divider(),
     container([
-      column([
+      [
         nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image'),
         nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image'),
-      ]),
-      column([nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value')]),
+      ],
+      [nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value')],
     ]),
-  ]),
+  ],
 ]);

From a366a3233480a3b94456934ab6dae92ddb776c2d Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 22 Jan 2025 23:36:27 +1100
Subject: [PATCH 25/58] feat(ui): iterate on builder (WIP)

---
 .../sidePanel/builder/ContainerContext.ts     |   8 +
 .../builder/ContainerElementComponent.tsx     | 100 ++++---
 .../builder/DividerElementComponent.tsx       |  17 +-
 .../sidePanel/builder/ElementWrapper.tsx      |  12 +
 .../builder/HeadingElementComponent.tsx       |  18 +-
 .../builder/NodeFieldElementComponent.tsx     |  17 +-
 .../builder/TextElementComponent.tsx          |  18 +-
 .../sidePanel/builder/WorkflowBuilder.tsx     |   4 +-
 .../src/features/nodes/store/workflowSlice.ts |  11 +
 .../web/src/features/nodes/types/workflow.ts  | 252 +++++++++++-------
 10 files changed, 306 insertions(+), 151 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerContext.ts
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ElementWrapper.tsx

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerContext.ts b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerContext.ts
new file mode 100644
index 00000000000..761f00642c3
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerContext.ts
@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+
+export const ContainerDirectionContext = createContext<'row' | 'column' | null>(null);
+
+export const useContainerDirectionContext = () => {
+  const containerDirection = useContext(ContainerDirectionContext);
+  return containerDirection;
+};
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
index 537b10d5c3d..2898eabc7c0 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
@@ -1,55 +1,95 @@
-import { Flex, Grid, GridItem } from '@invoke-ai/ui-library';
+import { ContainerDirectionContext } from 'features/nodes/components/sidePanel/builder/ContainerContext';
 import { DividerElementComponent } from 'features/nodes/components/sidePanel/builder/DividerElementComponent';
+import { ElementWrapper } from 'features/nodes/components/sidePanel/builder/ElementWrapper';
 import { HeadingElementComponent } from 'features/nodes/components/sidePanel/builder/HeadingElementComponent';
 import { NodeFieldElementComponent } from 'features/nodes/components/sidePanel/builder/NodeFieldElementComponent';
 import { TextElementComponent } from 'features/nodes/components/sidePanel/builder/TextElementComponent';
-import type { ContainerElement, FormElement } from 'features/nodes/types/workflow';
-import { Fragment, memo } from 'react';
+import { useElement } from 'features/nodes/types/workflow';
+import { memo } from 'react';
 import type { Equals } from 'tsafe';
 import { assert } from 'tsafe';
 
 const getGridTemplateColumns = (count: number) => {
-  return Array.from({ length: count }, () => '1fr').join(' auto ');
+  return Array.from({ length: count }, () => '1fr').join(' ');
 };
+const fill = (count: number, val: string, last?: string) => {
+  return Array.from({ length: count }, (_, i) => {
+    if (last && i === count - 1) {
+      return last;
+    }
+    return val;
+  }).join(' ');
+};
+
+export const ContainerElementComponent = memo(({ id }: { id: string }) => {
+  const element = useElement(id);
+
+  if (!element || element.type !== 'container') {
+    return null;
+  }
 
-export const ContainerElementComponent = memo(({ element }: { element: ContainerElement }) => {
-  const { id, data } = element;
-  const { columns } = data;
+  const { children, direction } = element.data;
 
   return (
-    <Grid id={id} gap={4} gridTemplateColumns={getGridTemplateColumns(columns.length)} gridAutoFlow="column">
-      {columns.map((elements, columnIndex) => {
-        const key = `${element.id}_${columnIndex}`;
-        const withDivider = columnIndex < columns.length - 1;
-        return (
-          <Fragment key={key}>
-            <GridItem as={Grid} id={key} gap={4} gridAutoRows="min-content" gridAutoFlow="row">
-              {elements.map((element) => (
-                <FormElementComponent key={element.id} element={element} />
-              ))}
-            </GridItem>
-            {withDivider && <Flex w="1px" bg="base.800" flexShrink={0} />}
-          </Fragment>
-        );
-      })}
-    </Grid>
+    <ContainerDirectionContext.Provider value={direction}>
+      <ElementWrapper id={id} gap={4} flexDir={direction}>
+        {children.map((childId) => (
+          <FormElementComponent key={childId} id={childId} />
+        ))}
+      </ElementWrapper>
+    </ContainerDirectionContext.Provider>
   );
 });
 ContainerElementComponent.displayName = 'ContainerElementComponent';
+// export const ContainerElementComponent = memo(({ id }: { id: string }) => {
+//   const element = useElement(id);
+
+//   if (!element || element.type !== 'container') {
+//     return null;
+//   }
+
+//   const { children, direction } = element.data;
+
+//   return (
+//     <GridItem
+//       as={Grid}
+//       id={id}
+//       gap={4}
+//       w="full"
+//       h="full"
+//       gridTemplateColumns={direction === 'row' ? fill(children.length, '1fr') : undefined}
+//       gridTemplateRows={direction === 'column' ? fill(children.length, 'min-content', '1fr') : undefined}
+//       gridAutoFlow={direction === 'column' ? 'row' : 'column'}
+//       alignItems="baseline"
+//     >
+//       {children.map((childId) => (
+//         <FormElementComponent key={childId} id={childId} />
+//       ))}
+//     </GridItem>
+//   );
+// });
+// ContainerElementComponent.displayName = 'ContainerElementComponent';
+
+export const FormElementComponent = memo(({ id }: { id: string }) => {
+  const element = useElement(id);
+
+  if (!element) {
+    return null;
+  }
+
+  const { type } = element;
 
-export const FormElementComponent = memo(({ element }: { element: FormElement }) => {
-  const { type, id } = element;
   switch (type) {
     case 'container':
-      return <ContainerElementComponent key={id} element={element} />;
+      return <ContainerElementComponent key={id} id={id} />;
     case 'node-field':
-      return <NodeFieldElementComponent key={id} element={element} />;
+      return <NodeFieldElementComponent key={id} id={id} />;
     case 'divider':
-      return <DividerElementComponent key={id} element={element} />;
+      return <DividerElementComponent key={id} id={id} />;
     case 'heading':
-      return <HeadingElementComponent key={id} element={element} />;
+      return <HeadingElementComponent key={id} id={id} />;
     case 'text':
-      return <TextElementComponent key={id} element={element} />;
+      return <TextElementComponent key={id} id={id} />;
     default:
       assert<Equals<typeof type, never>>(false, `Unhandled type ${type}`);
   }
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
index 6d5b6337795..c58e0b4d440 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
@@ -1,11 +1,20 @@
 import { Flex } from '@invoke-ai/ui-library';
-import type { DividerElement } from 'features/nodes/types/workflow';
+import { useContainerDirectionContext } from 'features/nodes/components/sidePanel/builder/ContainerContext';
 import { memo } from 'react';
 
-export const DividerElementComponent = memo(({ element }: { element: DividerElement }) => {
-  const { id } = element;
+export const DividerElementComponent = memo(({ id }: { id: string }) => {
+  const containerDirection = useContainerDirectionContext();
 
-  return <Flex id={id} h="1px" bg="base.800" flexShrink={0} />;
+  return (
+    <Flex
+      flex="0 0 auto"
+      id={id}
+      h={containerDirection === 'column' ? '1px' : undefined}
+      w={containerDirection === 'column' ? undefined : '1px'}
+      bg="base.700"
+      flexShrink={0}
+    />
+  );
 });
 
 DividerElementComponent.displayName = 'DividerElementComponent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ElementWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ElementWrapper.tsx
new file mode 100644
index 00000000000..7a80d420bd4
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ElementWrapper.tsx
@@ -0,0 +1,12 @@
+import type { FlexProps } from '@invoke-ai/ui-library';
+import { Flex } from '@invoke-ai/ui-library';
+import { useContainerDirectionContext } from 'features/nodes/components/sidePanel/builder/ContainerContext';
+import type { PropsWithChildren } from 'react';
+import { memo } from 'react';
+
+export const ElementWrapper = memo((props: PropsWithChildren<FlexProps>) => {
+  const containerDirection = useContainerDirectionContext();
+  return <Flex flex={containerDirection === 'column' ? '1 1 0' : undefined} {...props} />;
+});
+
+ElementWrapper.displayName = 'ElementWrapper';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx
index 982c2c69b3f..278ed69dd72 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx
@@ -1,5 +1,6 @@
 import { Heading } from '@invoke-ai/ui-library';
-import type { HeadingElement } from 'features/nodes/types/workflow';
+import { ElementWrapper } from 'features/nodes/components/sidePanel/builder/ElementWrapper';
+import { useElement } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
 const LEVEL_TO_SIZE = {
@@ -10,14 +11,19 @@ const LEVEL_TO_SIZE = {
   5: 'xs',
 } as const;
 
-export const HeadingElementComponent = memo(({ element }: { element: HeadingElement }) => {
-  const { id, data } = element;
+export const HeadingElementComponent = memo(({ id }: { id: string }) => {
+  const element = useElement(id);
+
+  if (!element || element.type !== 'heading') {
+    return null;
+  }
+  const { data } = element;
   const { content, level } = data;
 
   return (
-    <Heading id={id} size={LEVEL_TO_SIZE[level]}>
-      {content}
-    </Heading>
+    <ElementWrapper id={id}>
+      <Heading size={LEVEL_TO_SIZE[level]}>{content}</Heading>
+    </ElementWrapper>
   );
 });
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx
index 46123dd1561..4ce4a66fd21 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx
@@ -1,19 +1,24 @@
-import { Flex } from '@invoke-ai/ui-library';
 import { InputFieldGate } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate';
 import { InputFieldViewMode } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode';
-import type { NodeFieldElement } from 'features/nodes/types/workflow';
+import { ElementWrapper } from 'features/nodes/components/sidePanel/builder/ElementWrapper';
+import { useElement } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
-export const NodeFieldElementComponent = memo(({ element }: { element: NodeFieldElement }) => {
-  const { id, data } = element;
+export const NodeFieldElementComponent = memo(({ id }: { id: string }) => {
+  const element = useElement(id);
+
+  if (!element || element.type !== 'node-field') {
+    return null;
+  }
+  const { data } = element;
   const { fieldIdentifier } = data;
 
   return (
-    <Flex id={id} flexBasis="100%">
+    <ElementWrapper id={id}>
       <InputFieldGate nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName}>
         <InputFieldViewMode nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName} />
       </InputFieldGate>
-    </Flex>
+    </ElementWrapper>
   );
 });
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
index b81bd255fbc..b3738f4285a 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
@@ -1,15 +1,21 @@
 import { Text } from '@invoke-ai/ui-library';
-import type { TextElement } from 'features/nodes/types/workflow';
+import { ElementWrapper } from 'features/nodes/components/sidePanel/builder/ElementWrapper';
+import { useElement } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
-export const TextElementComponent = memo(({ element }: { element: TextElement }) => {
-  const { id, data } = element;
+export const TextElementComponent = memo(({ id }: { id: string }) => {
+  const element = useElement(id);
+
+  if (!element || element.type !== 'text') {
+    return null;
+  }
+  const { data } = element;
   const { content, fontSize } = data;
 
   return (
-    <Text id={id} fontSize={fontSize}>
-      {content}
-    </Text>
+    <ElementWrapper id={id}>
+      <Text fontSize={fontSize}>{content}</Text>
+    </ElementWrapper>
   );
 });
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
index 62dedaabad2..9cf01b4e514 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
@@ -1,7 +1,7 @@
 import { Flex } from '@invoke-ai/ui-library';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { FormElementComponent } from 'features/nodes/components/sidePanel/builder/ContainerElementComponent';
-import { data } from 'features/nodes/types/workflow';
+import { rootId } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
 export const WorkflowBuilder = memo(() => {
@@ -9,7 +9,7 @@ export const WorkflowBuilder = memo(() => {
     <ScrollableContent>
       <Flex w="full" h="full" justifyContent="center">
         <Flex w="full" h="full" maxW={512}>
-          <FormElementComponent element={data} />
+          <FormElementComponent id={rootId} />
         </Flex>
       </Flex>
     </ScrollableContent>
diff --git a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
index b1663b2a11d..85e640316d2 100644
--- a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
@@ -28,6 +28,17 @@ const blankWorkflow: Omit<WorkflowV3, 'nodes' | 'edges'> = {
   exposedFields: [],
   meta: { version: '3.0.0', category: 'user' },
   id: undefined,
+  form: {
+    elements: {},
+    structure: {
+      id: 'root',
+      type: 'container',
+      data: {
+        direction: 'column',
+        children: [],
+      },
+    },
+  },
 };
 
 const initialWorkflowState: WorkflowState = {
diff --git a/invokeai/frontend/web/src/features/nodes/types/workflow.ts b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
index a1d72f93ba9..3d330229eab 100644
--- a/invokeai/frontend/web/src/features/nodes/types/workflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
@@ -1,4 +1,6 @@
-import { nanoid } from 'nanoid';
+import { SyncableMap } from 'common/util/SyncableMap/SyncableMap';
+import { getPrefixedId } from 'features/controlLayers/konva/util';
+import { useMemo, useSyncExternalStore } from 'react';
 import { z } from 'zod';
 
 import { zFieldIdentifier } from './field';
@@ -73,18 +75,46 @@ export const zWorkflowV3 = z.object({
     category: zWorkflowCategory.default('user'),
     version: z.literal('3.0.0'),
   }),
+  form: z.object({
+    elements: z.record(z.lazy(() => zFormElement)),
+    structure: z.lazy(() => zContainerElement),
+  }),
 });
 export type WorkflowV3 = z.infer<typeof zWorkflowV3>;
 // #endregion
 
 // #region Workflow Builder
 
+export const elements = new SyncableMap<string, FormElement>();
+
+export const addElement = (element: FormElement) => {
+  elements.set(element.id, element);
+};
+
+export const removeElement = (id: ElementId) => {
+  return elements.delete(id);
+};
+
+export const getElement = (id: ElementId) => {
+  return elements.get(id);
+};
+
+export const useElement = <T extends FormElement>(id: string) => {
+  const map = useSyncExternalStore(elements.subscribe, elements.getSnapshot);
+  const element = useMemo(() => map.get(id), [id, map]);
+  return element as T | undefined;
+};
+
+const zElementId = z.string().trim().min(1);
+type ElementId = z.infer<typeof zElementId>;
+
 const zElementBase = z.object({
-  id: z.string().trim().min(1),
+  id: zElementId,
 });
 
+const NODE_FIELD_TYPE = 'node-field';
 const zNodeFieldElement = zElementBase.extend({
-  type: z.literal('node-field'),
+  type: z.literal(NODE_FIELD_TYPE),
   data: z.object({
     fieldIdentifier: zFieldIdentifier,
   }),
@@ -93,16 +123,21 @@ export type NodeFieldElement = z.infer<typeof zNodeFieldElement>;
 const nodeField = (
   nodeId: NodeFieldElement['data']['fieldIdentifier']['nodeId'],
   fieldName: NodeFieldElement['data']['fieldIdentifier']['fieldName']
-): NodeFieldElement => ({
-  id: nanoid(),
-  type: 'node-field',
-  data: {
-    fieldIdentifier: { nodeId, fieldName },
-  },
-});
+): NodeFieldElement => {
+  const element: NodeFieldElement = {
+    id: getPrefixedId(NODE_FIELD_TYPE),
+    type: NODE_FIELD_TYPE,
+    data: {
+      fieldIdentifier: { nodeId, fieldName },
+    },
+  };
+  addElement(element);
+  return element;
+};
 
+const HEADING_TYPE = 'heading';
 const zHeadingElement = zElementBase.extend({
-  type: z.literal('heading'),
+  type: z.literal(HEADING_TYPE),
   data: z.object({
     content: z.string(),
     level: z.union([z.literal(1), z.literal(2), z.literal(3), z.literal(4), z.literal(5)]),
@@ -112,117 +147,140 @@ export type HeadingElement = z.infer<typeof zHeadingElement>;
 const heading = (
   content: HeadingElement['data']['content'],
   level: HeadingElement['data']['level']
-): HeadingElement => ({
-  id: nanoid(),
-  type: 'heading',
-  data: {
-    content,
-    level,
-  },
-});
+): HeadingElement => {
+  const element: HeadingElement = {
+    id: getPrefixedId(HEADING_TYPE),
+    type: HEADING_TYPE,
+    data: {
+      content,
+      level,
+    },
+  };
+  addElement(element);
+  return element;
+};
 
+const TEXT_TYPE = 'text';
 const zTextElement = zElementBase.extend({
-  type: z.literal('text'),
+  type: z.literal(TEXT_TYPE),
   data: z.object({
     content: z.string(),
     fontSize: z.enum(['sm', 'md', 'lg']),
   }),
 });
 export type TextElement = z.infer<typeof zTextElement>;
-const text = (content: TextElement['data']['content'], fontSize: TextElement['data']['fontSize']): TextElement => ({
-  id: nanoid(),
-  type: 'text',
-  data: {
-    content,
-    fontSize,
-  },
-});
+const text = (content: TextElement['data']['content'], fontSize: TextElement['data']['fontSize']): TextElement => {
+  const element: TextElement = {
+    id: getPrefixedId(TEXT_TYPE),
+    type: TEXT_TYPE,
+    data: {
+      content,
+      fontSize,
+    },
+  };
+  addElement(element);
+  return element;
+};
 
+const DIVIDER_TYPE = 'divider';
 const zDividerElement = zElementBase.extend({
-  type: z.literal('divider'),
+  type: z.literal(DIVIDER_TYPE),
 });
 export type DividerElement = z.infer<typeof zDividerElement>;
-const divider = (): DividerElement => ({
-  id: nanoid(),
-  type: 'divider',
-});
+const divider = (): DividerElement => {
+  const element: DividerElement = {
+    id: getPrefixedId(DIVIDER_TYPE),
+    type: DIVIDER_TYPE,
+  };
+  addElement(element);
+  return element;
+};
 
 export type ContainerElement = {
   id: string;
-  type: 'container';
+  type: typeof CONTAINER_TYPE;
   data: {
-    columns: FormElement[][];
+    direction: 'row' | 'column';
+    children: ElementId[];
   };
 };
 
+const CONTAINER_TYPE = 'container';
 const zContainerElement: z.ZodType<ContainerElement> = zElementBase.extend({
-  type: z.literal('container'),
+  type: z.literal(CONTAINER_TYPE),
   data: z.object({
-    columns: z.lazy(() => z.array(z.array(zFormElement))),
+    direction: z.enum(['row', 'column']),
+    children: z.array(zElementId),
   }),
 });
-const container = (columns: ContainerElement['data']['columns']): ContainerElement => ({
-  id: nanoid(),
-  type: 'container',
-  data: {
-    columns,
-  },
-});
+const container = (
+  direction: ContainerElement['data']['direction'],
+  children: ContainerElement['data']['children']
+): ContainerElement => {
+  const element: ContainerElement = {
+    id: getPrefixedId(CONTAINER_TYPE),
+    type: CONTAINER_TYPE,
+    data: {
+      direction,
+      children,
+    },
+  };
+  addElement(element);
+  return element;
+};
 
 const zFormElement = z.union([zContainerElement, zNodeFieldElement, zHeadingElement, zTextElement, zDividerElement]);
 
 export type FormElement = z.infer<typeof zFormElement>;
 
-export const data: ContainerElement = container([
-  [
-    heading('My Cool Workflow', 1),
-    text('This is a description of what my workflow does. It does things.', 'md'),
-    divider(),
-    heading('First Section', 2),
-    text('The first section includes fields relevant to the first section. This note describes that fact.', 'sm'),
-    container([
-      [nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image')],
-      [nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image')],
-      [nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image')],
-    ]),
-    nodeField('9c058600-8d73-4702-912b-0ccf37403bfd', 'value'),
-    nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value'),
-    nodeField('4e16cbf6-457c-46fb-9ab7-9cb262fa1e03', 'value'),
-    nodeField('39cb5272-a9d7-4da9-9c35-32e02b46bb34', 'color'),
-    container([
-      [
-        nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
-        nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
-      ],
-      [
-        nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
-        nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
-        nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
-        nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
-      ],
-      [
-        container([
-          [
-            nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
-            nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
-          ],
-          [
-            nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
-            nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value'),
-          ],
-        ]),
-      ],
-    ]),
-    nodeField('14744f68-9000-4694-b4d6-cbe83ee231ee', 'model'),
-    divider(),
-    text('These are some text that are definitely super helpful.', 'sm'),
-    divider(),
-    container([
-      [
-        nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image'),
-        nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image'),
-      ],
-      [nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value')],
-    ]),
-  ],
-]);
+export const rootId: string = container('column', [
+  heading('My Cool Workflow', 1).id,
+  text('This is a description of what my workflow does. It does things.', 'md').id,
+  divider().id,
+  heading('First Section', 2).id,
+  text('The first section includes fields relevant to the first section. This note describes that fact.', 'sm').id,
+  container('row', [
+    nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+    divider().id,
+    nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+    divider().id,
+    nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+  ]).id,
+  nodeField('9c058600-8d73-4702-912b-0ccf37403bfd', 'value').id,
+  nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value').id,
+  nodeField('4e16cbf6-457c-46fb-9ab7-9cb262fa1e03', 'value').id,
+  nodeField('39cb5272-a9d7-4da9-9c35-32e02b46bb34', 'color').id,
+  container('row', [
+    container('column', [
+      nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+      nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+    ]).id,
+    container('column', [
+      nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+      nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+      nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+      nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+    ]).id,
+    container('column', [
+      container('row', [
+        nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+        nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+      ]).id,
+      container('row', [
+        nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+        nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+      ]).id,
+    ]).id,
+  ]).id,
+  nodeField('14744f68-9000-4694-b4d6-cbe83ee231ee', 'model').id,
+  divider().id,
+  text('These are some text that are definitely super helpful.', 'sm').id,
+  divider().id,
+  container('row', [
+    container('column', [
+      nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+      nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+    ]).id,
+    container('column', [nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value').id]).id,
+  ]).id,
+]).id;

From 14281890ce4161e1ea350eaec72230d018e140e3 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 23 Jan 2025 07:13:08 +1100
Subject: [PATCH 26/58] feat(ui): iterate on builder (WIP)

---
 .../sidePanel/builder/ContainerContext.ts     |  7 +--
 .../builder/ContainerElementComponent.tsx     | 52 +++++++++++++------
 .../builder/DividerElementComponent.tsx       | 24 ++++-----
 .../sidePanel/builder/ElementWrapper.tsx      | 23 ++++++--
 .../builder/HeadingElementComponent.tsx       |  7 ++-
 .../builder/NodeFieldElementComponent.tsx     |  6 +--
 .../builder/TextElementComponent.tsx          |  7 ++-
 7 files changed, 78 insertions(+), 48 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerContext.ts b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerContext.ts
index 761f00642c3..167df8506b8 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerContext.ts
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerContext.ts
@@ -1,8 +1,9 @@
+import type { ContainerElement } from 'features/nodes/types/workflow';
 import { createContext, useContext } from 'react';
 
-export const ContainerDirectionContext = createContext<'row' | 'column' | null>(null);
+export const ContainerContext = createContext<ContainerElement['data'] | null>(null);
 
-export const useContainerDirectionContext = () => {
-  const containerDirection = useContext(ContainerDirectionContext);
+export const useContainerContext = () => {
+  const containerDirection = useContext(ContainerContext);
   return containerDirection;
 };
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
index 2898eabc7c0..00ba6708ebd 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
@@ -1,6 +1,10 @@
-import { ContainerDirectionContext } from 'features/nodes/components/sidePanel/builder/ContainerContext';
-import { DividerElementComponent } from 'features/nodes/components/sidePanel/builder/DividerElementComponent';
-import { ElementWrapper } from 'features/nodes/components/sidePanel/builder/ElementWrapper';
+import { Flex, type SystemStyleObject } from '@invoke-ai/ui-library';
+import { getPrefixedId } from 'features/controlLayers/konva/util';
+import { ContainerContext } from 'features/nodes/components/sidePanel/builder/ContainerContext';
+import {
+  DIVIDER_CLASS_NAME,
+  DividerElementComponent,
+} from 'features/nodes/components/sidePanel/builder/DividerElementComponent';
 import { HeadingElementComponent } from 'features/nodes/components/sidePanel/builder/HeadingElementComponent';
 import { NodeFieldElementComponent } from 'features/nodes/components/sidePanel/builder/NodeFieldElementComponent';
 import { TextElementComponent } from 'features/nodes/components/sidePanel/builder/TextElementComponent';
@@ -9,16 +13,30 @@ import { memo } from 'react';
 import type { Equals } from 'tsafe';
 import { assert } from 'tsafe';
 
-const getGridTemplateColumns = (count: number) => {
-  return Array.from({ length: count }, () => '1fr').join(' ');
-};
-const fill = (count: number, val: string, last?: string) => {
-  return Array.from({ length: count }, (_, i) => {
-    if (last && i === count - 1) {
-      return last;
-    }
-    return val;
-  }).join(' ');
+const CONTAINER_CLASS_NAME = getPrefixedId('container');
+
+const sx: SystemStyleObject = {
+  gap: 4,
+  '&[data-container-direction="column"]': {
+    flexDir: 'column',
+    flex: '1 1 0',
+    // Select all non-divider children (dividers have a fixed width that they define on their own)
+    [`> *:not(.${DIVIDER_CLASS_NAME})`]: {
+      // By default, all children should take up the same amount of space
+      flex: '0 1 0',
+      // The last child should take up the remaining space
+      '&:last-child': {
+        flex: '1 1 auto',
+      },
+    },
+  },
+  '&[data-container-direction="row"]': {
+    // Select all non-divider children (dividers have a fixed width that they define on their own)
+    [`> *:not(.${DIVIDER_CLASS_NAME})`]: {
+      // By default, all children should take up the same amount of space
+      flex: '1 1 0',
+    },
+  },
 };
 
 export const ContainerElementComponent = memo(({ id }: { id: string }) => {
@@ -31,13 +49,13 @@ export const ContainerElementComponent = memo(({ id }: { id: string }) => {
   const { children, direction } = element.data;
 
   return (
-    <ContainerDirectionContext.Provider value={direction}>
-      <ElementWrapper id={id} gap={4} flexDir={direction}>
+    <ContainerContext.Provider value={element.data}>
+      <Flex id={id} className={CONTAINER_CLASS_NAME} sx={sx} data-container-direction={direction}>
         {children.map((childId) => (
           <FormElementComponent key={childId} id={childId} />
         ))}
-      </ElementWrapper>
-    </ContainerDirectionContext.Provider>
+      </Flex>
+    </ContainerContext.Provider>
   );
 });
 ContainerElementComponent.displayName = 'ContainerElementComponent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
index c58e0b4d440..670b9c08b0d 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
@@ -1,20 +1,18 @@
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Flex } from '@invoke-ai/ui-library';
-import { useContainerDirectionContext } from 'features/nodes/components/sidePanel/builder/ContainerContext';
+import { getPrefixedId } from 'features/controlLayers/konva/util';
 import { memo } from 'react';
 
-export const DividerElementComponent = memo(({ id }: { id: string }) => {
-  const containerDirection = useContainerDirectionContext();
+export const DIVIDER_CLASS_NAME = getPrefixedId('divider');
+
+const sx: SystemStyleObject = {
+  flex: '0 0 1px',
+  bg: 'base.700',
+  flexShrink: 0,
+};
 
-  return (
-    <Flex
-      flex="0 0 auto"
-      id={id}
-      h={containerDirection === 'column' ? '1px' : undefined}
-      w={containerDirection === 'column' ? undefined : '1px'}
-      bg="base.700"
-      flexShrink={0}
-    />
-  );
+export const DividerElementComponent = memo(({ id }: { id: string }) => {
+  return <Flex id={id} className={DIVIDER_CLASS_NAME} sx={sx} />;
 });
 
 DividerElementComponent.displayName = 'DividerElementComponent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ElementWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ElementWrapper.tsx
index 7a80d420bd4..79904ff8be6 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ElementWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ElementWrapper.tsx
@@ -1,12 +1,27 @@
-import type { FlexProps } from '@invoke-ai/ui-library';
+import type { FlexProps, SystemStyleObject } from '@invoke-ai/ui-library';
 import { Flex } from '@invoke-ai/ui-library';
-import { useContainerDirectionContext } from 'features/nodes/components/sidePanel/builder/ContainerContext';
+import { useContainerContext } from 'features/nodes/components/sidePanel/builder/ContainerContext';
 import type { PropsWithChildren } from 'react';
 import { memo } from 'react';
 
+const sx: SystemStyleObject = {
+  // '&[data-container-direction="column"]': {
+  //   flex: '1 1 auto',
+  // },
+  // '&[data-container-direction="column"] > :not(:last-child)': {
+  //   bg: 'red',
+  // },
+};
+
 export const ElementWrapper = memo((props: PropsWithChildren<FlexProps>) => {
-  const containerDirection = useContainerDirectionContext();
-  return <Flex flex={containerDirection === 'column' ? '1 1 0' : undefined} {...props} />;
+  const container = useContainerContext();
+  return (
+    <Flex
+      sx={sx}
+      // data-container-direction={container?.direction}
+      {...props}
+    />
+  );
 });
 
 ElementWrapper.displayName = 'ElementWrapper';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx
index 278ed69dd72..f6656d0c7f3 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx
@@ -1,5 +1,4 @@
-import { Heading } from '@invoke-ai/ui-library';
-import { ElementWrapper } from 'features/nodes/components/sidePanel/builder/ElementWrapper';
+import { Flex, Heading } from '@invoke-ai/ui-library';
 import { useElement } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
@@ -21,9 +20,9 @@ export const HeadingElementComponent = memo(({ id }: { id: string }) => {
   const { content, level } = data;
 
   return (
-    <ElementWrapper id={id}>
+    <Flex id={id}>
       <Heading size={LEVEL_TO_SIZE[level]}>{content}</Heading>
-    </ElementWrapper>
+    </Flex>
   );
 });
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx
index 4ce4a66fd21..c6aba93cfce 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx
@@ -1,6 +1,6 @@
+import { Flex } from '@invoke-ai/ui-library';
 import { InputFieldGate } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate';
 import { InputFieldViewMode } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode';
-import { ElementWrapper } from 'features/nodes/components/sidePanel/builder/ElementWrapper';
 import { useElement } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
@@ -14,11 +14,11 @@ export const NodeFieldElementComponent = memo(({ id }: { id: string }) => {
   const { fieldIdentifier } = data;
 
   return (
-    <ElementWrapper id={id}>
+    <Flex id={id}>
       <InputFieldGate nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName}>
         <InputFieldViewMode nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName} />
       </InputFieldGate>
-    </ElementWrapper>
+    </Flex>
   );
 });
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
index b3738f4285a..57d5a3aca98 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
@@ -1,5 +1,4 @@
-import { Text } from '@invoke-ai/ui-library';
-import { ElementWrapper } from 'features/nodes/components/sidePanel/builder/ElementWrapper';
+import { Flex, Text } from '@invoke-ai/ui-library';
 import { useElement } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
@@ -13,9 +12,9 @@ export const TextElementComponent = memo(({ id }: { id: string }) => {
   const { content, fontSize } = data;
 
   return (
-    <ElementWrapper id={id}>
+    <Flex id={id}>
       <Text fontSize={fontSize}>{content}</Text>
-    </ElementWrapper>
+    </Flex>
   );
 });
 

From 4485450df6cf24e6ad9ca517e080375d70e04332 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 23 Jan 2025 08:32:16 +1100
Subject: [PATCH 27/58] feat(ui): getPrefixedId supports custom separator

---
 .../frontend/web/src/features/controlLayers/konva/util.ts    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/util.ts b/invokeai/frontend/web/src/features/controlLayers/konva/util.ts
index f5a30afcc7e..b774b7ba8be 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/util.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/util.ts
@@ -484,9 +484,10 @@ export function loadImage(src: string): Promise<HTMLImageElement> {
 export const nanoid = customAlphabet('0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz', 10);
 
 export function getPrefixedId(
-  prefix: CanvasEntityIdentifier['type'] | CanvasObjectState['type'] | (string & Record<never, never>)
+  prefix: CanvasEntityIdentifier['type'] | CanvasObjectState['type'] | (string & Record<never, never>),
+  separator = ':'
 ): string {
-  return `${prefix}:${nanoid()}`;
+  return `${prefix}${separator}${nanoid()}`;
 }
 
 export const getEmptyRect = (): Rect => {

From 9cabb8856053f8a212512ce0ee81a996207e4bd6 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 23 Jan 2025 08:32:37 +1100
Subject: [PATCH 28/58] feat(ui): iterate on builder (WIP)

---
 .../builder/ContainerElementComponent.tsx     | 57 +++----------------
 .../builder/DividerElementComponent.tsx       |  5 +-
 .../sidePanel/builder/ElementWrapper.tsx      | 27 ---------
 .../builder/HeadingElementComponent.tsx       |  8 +--
 .../builder/NodeFieldElementComponent.tsx     |  4 +-
 .../builder/TextElementComponent.tsx          |  4 +-
 .../sidePanel/builder/WorkflowBuilder.tsx     |  4 +-
 .../web/src/features/nodes/types/workflow.ts  |  6 ++
 8 files changed, 26 insertions(+), 89 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ElementWrapper.tsx

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
index 00ba6708ebd..4dde132aae7 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
@@ -1,42 +1,31 @@
 import { Flex, type SystemStyleObject } from '@invoke-ai/ui-library';
-import { getPrefixedId } from 'features/controlLayers/konva/util';
 import { ContainerContext } from 'features/nodes/components/sidePanel/builder/ContainerContext';
-import {
-  DIVIDER_CLASS_NAME,
-  DividerElementComponent,
-} from 'features/nodes/components/sidePanel/builder/DividerElementComponent';
+import { DividerElementComponent } from 'features/nodes/components/sidePanel/builder/DividerElementComponent';
 import { HeadingElementComponent } from 'features/nodes/components/sidePanel/builder/HeadingElementComponent';
 import { NodeFieldElementComponent } from 'features/nodes/components/sidePanel/builder/NodeFieldElementComponent';
 import { TextElementComponent } from 'features/nodes/components/sidePanel/builder/TextElementComponent';
-import { useElement } from 'features/nodes/types/workflow';
+import { CONTAINER_CLASS_NAME, DIVIDER_CLASS_NAME, useElement } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 import type { Equals } from 'tsafe';
 import { assert } from 'tsafe';
 
-const CONTAINER_CLASS_NAME = getPrefixedId('container');
-
 const sx: SystemStyleObject = {
   gap: 4,
   '&[data-container-direction="column"]': {
     flexDir: 'column',
-    flex: '1 1 0',
-    // Select all non-divider children (dividers have a fixed width that they define on their own)
-    [`> *:not(.${DIVIDER_CLASS_NAME})`]: {
-      // By default, all children should take up the same amount of space
-      flex: '0 1 0',
-      // The last child should take up the remaining space
-      '&:last-child': {
-        flex: '1 1 auto',
-      },
+    '> :last-child': {
+      flex: '1 0 0',
+      alignItems: 'flex-start',
     },
   },
   '&[data-container-direction="row"]': {
-    // Select all non-divider children (dividers have a fixed width that they define on their own)
-    [`> *:not(.${DIVIDER_CLASS_NAME})`]: {
-      // By default, all children should take up the same amount of space
+    '> *': {
       flex: '1 1 0',
     },
   },
+  [`& > .${DIVIDER_CLASS_NAME}`]: {
+    flex: '0 0 1px',
+  },
 };
 
 export const ContainerElementComponent = memo(({ id }: { id: string }) => {
@@ -59,34 +48,6 @@ export const ContainerElementComponent = memo(({ id }: { id: string }) => {
   );
 });
 ContainerElementComponent.displayName = 'ContainerElementComponent';
-// export const ContainerElementComponent = memo(({ id }: { id: string }) => {
-//   const element = useElement(id);
-
-//   if (!element || element.type !== 'container') {
-//     return null;
-//   }
-
-//   const { children, direction } = element.data;
-
-//   return (
-//     <GridItem
-//       as={Grid}
-//       id={id}
-//       gap={4}
-//       w="full"
-//       h="full"
-//       gridTemplateColumns={direction === 'row' ? fill(children.length, '1fr') : undefined}
-//       gridTemplateRows={direction === 'column' ? fill(children.length, 'min-content', '1fr') : undefined}
-//       gridAutoFlow={direction === 'column' ? 'row' : 'column'}
-//       alignItems="baseline"
-//     >
-//       {children.map((childId) => (
-//         <FormElementComponent key={childId} id={childId} />
-//       ))}
-//     </GridItem>
-//   );
-// });
-// ContainerElementComponent.displayName = 'ContainerElementComponent';
 
 export const FormElementComponent = memo(({ id }: { id: string }) => {
   const element = useElement(id);
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
index 670b9c08b0d..544585f3bd5 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
@@ -1,12 +1,9 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Flex } from '@invoke-ai/ui-library';
-import { getPrefixedId } from 'features/controlLayers/konva/util';
+import { DIVIDER_CLASS_NAME } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
-export const DIVIDER_CLASS_NAME = getPrefixedId('divider');
-
 const sx: SystemStyleObject = {
-  flex: '0 0 1px',
   bg: 'base.700',
   flexShrink: 0,
 };
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ElementWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ElementWrapper.tsx
deleted file mode 100644
index 79904ff8be6..00000000000
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ElementWrapper.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { FlexProps, SystemStyleObject } from '@invoke-ai/ui-library';
-import { Flex } from '@invoke-ai/ui-library';
-import { useContainerContext } from 'features/nodes/components/sidePanel/builder/ContainerContext';
-import type { PropsWithChildren } from 'react';
-import { memo } from 'react';
-
-const sx: SystemStyleObject = {
-  // '&[data-container-direction="column"]': {
-  //   flex: '1 1 auto',
-  // },
-  // '&[data-container-direction="column"] > :not(:last-child)': {
-  //   bg: 'red',
-  // },
-};
-
-export const ElementWrapper = memo((props: PropsWithChildren<FlexProps>) => {
-  const container = useContainerContext();
-  return (
-    <Flex
-      sx={sx}
-      // data-container-direction={container?.direction}
-      {...props}
-    />
-  );
-});
-
-ElementWrapper.displayName = 'ElementWrapper';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx
index f6656d0c7f3..37071cda23e 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx
@@ -1,5 +1,5 @@
 import { Flex, Heading } from '@invoke-ai/ui-library';
-import { useElement } from 'features/nodes/types/workflow';
+import { HEADING_CLASS_NAME, useElement } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
 const LEVEL_TO_SIZE = {
@@ -16,11 +16,11 @@ export const HeadingElementComponent = memo(({ id }: { id: string }) => {
   if (!element || element.type !== 'heading') {
     return null;
   }
-  const { data } = element;
-  const { content, level } = data;
+
+  const { content, level } = element.data;
 
   return (
-    <Flex id={id}>
+    <Flex id={id} className={HEADING_CLASS_NAME}>
       <Heading size={LEVEL_TO_SIZE[level]}>{content}</Heading>
     </Flex>
   );
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx
index c6aba93cfce..4a240a9edc9 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx
@@ -1,7 +1,7 @@
 import { Flex } from '@invoke-ai/ui-library';
 import { InputFieldGate } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate';
 import { InputFieldViewMode } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode';
-import { useElement } from 'features/nodes/types/workflow';
+import { NODE_FIELD_CLASS_NAME, useElement } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
 export const NodeFieldElementComponent = memo(({ id }: { id: string }) => {
@@ -14,7 +14,7 @@ export const NodeFieldElementComponent = memo(({ id }: { id: string }) => {
   const { fieldIdentifier } = data;
 
   return (
-    <Flex id={id}>
+    <Flex id={id} className={NODE_FIELD_CLASS_NAME}>
       <InputFieldGate nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName}>
         <InputFieldViewMode nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName} />
       </InputFieldGate>
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
index 57d5a3aca98..8a84ae014f0 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
@@ -1,5 +1,5 @@
 import { Flex, Text } from '@invoke-ai/ui-library';
-import { useElement } from 'features/nodes/types/workflow';
+import { TEXT_CLASS_NAME, useElement } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
 export const TextElementComponent = memo(({ id }: { id: string }) => {
@@ -12,7 +12,7 @@ export const TextElementComponent = memo(({ id }: { id: string }) => {
   const { content, fontSize } = data;
 
   return (
-    <Flex id={id}>
+    <Flex id={id} className={TEXT_CLASS_NAME}>
       <Text fontSize={fontSize}>{content}</Text>
     </Flex>
   );
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
index 9cf01b4e514..41e8dfcb9ea 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
@@ -7,8 +7,8 @@ import { memo } from 'react';
 export const WorkflowBuilder = memo(() => {
   return (
     <ScrollableContent>
-      <Flex w="full" h="full" justifyContent="center">
-        <Flex w="full" h="full" maxW={512}>
+      <Flex w="full" justifyContent="center">
+        <Flex w="full" maxW={512}>
           <FormElementComponent id={rootId} />
         </Flex>
       </Flex>
diff --git a/invokeai/frontend/web/src/features/nodes/types/workflow.ts b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
index 3d330229eab..1920daced33 100644
--- a/invokeai/frontend/web/src/features/nodes/types/workflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
@@ -113,6 +113,7 @@ const zElementBase = z.object({
 });
 
 const NODE_FIELD_TYPE = 'node-field';
+export const NODE_FIELD_CLASS_NAME = getPrefixedId(NODE_FIELD_TYPE, '-');
 const zNodeFieldElement = zElementBase.extend({
   type: z.literal(NODE_FIELD_TYPE),
   data: z.object({
@@ -136,6 +137,7 @@ const nodeField = (
 };
 
 const HEADING_TYPE = 'heading';
+export const HEADING_CLASS_NAME = getPrefixedId(HEADING_TYPE, '-');
 const zHeadingElement = zElementBase.extend({
   type: z.literal(HEADING_TYPE),
   data: z.object({
@@ -161,6 +163,7 @@ const heading = (
 };
 
 const TEXT_TYPE = 'text';
+export const TEXT_CLASS_NAME = getPrefixedId(TEXT_TYPE, '-');
 const zTextElement = zElementBase.extend({
   type: z.literal(TEXT_TYPE),
   data: z.object({
@@ -183,6 +186,7 @@ const text = (content: TextElement['data']['content'], fontSize: TextElement['da
 };
 
 const DIVIDER_TYPE = 'divider';
+export const DIVIDER_CLASS_NAME = getPrefixedId(DIVIDER_TYPE, '-');
 const zDividerElement = zElementBase.extend({
   type: z.literal(DIVIDER_TYPE),
 });
@@ -206,6 +210,7 @@ export type ContainerElement = {
 };
 
 const CONTAINER_TYPE = 'container';
+export const CONTAINER_CLASS_NAME = getPrefixedId(CONTAINER_TYPE, '-');
 const zContainerElement: z.ZodType<ContainerElement> = zElementBase.extend({
   type: z.literal(CONTAINER_TYPE),
   data: z.object({
@@ -239,6 +244,7 @@ export const rootId: string = container('column', [
   divider().id,
   heading('First Section', 2).id,
   text('The first section includes fields relevant to the first section. This note describes that fact.', 'sm').id,
+  divider().id,
   container('row', [
     nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
     divider().id,

From 819346b9804ec52637846e18a46e14f0c97e77da Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 23 Jan 2025 09:51:33 +1100
Subject: [PATCH 29/58] feat(ui): iterate on builder (WIP)

---
 .../builder/ContainerElementComponent.tsx     | 56 ++++++-----
 .../builder/DividerElementComponent.tsx       |  9 +-
 .../builder/HeadingElementComponent.tsx       |  9 +-
 .../builder/NodeFieldElementComponent.tsx     | 11 ++-
 .../builder/TextElementComponent.tsx          | 11 ++-
 .../sidePanel/builder/WorkflowBuilder.tsx     | 12 ++-
 .../src/features/nodes/store/workflowSlice.ts | 92 ++++++++++++++++---
 .../web/src/features/nodes/types/workflow.ts  | 38 +++-----
 8 files changed, 163 insertions(+), 75 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
index 4dde132aae7..6803c24ca83 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
@@ -4,7 +4,16 @@ import { DividerElementComponent } from 'features/nodes/components/sidePanel/bui
 import { HeadingElementComponent } from 'features/nodes/components/sidePanel/builder/HeadingElementComponent';
 import { NodeFieldElementComponent } from 'features/nodes/components/sidePanel/builder/NodeFieldElementComponent';
 import { TextElementComponent } from 'features/nodes/components/sidePanel/builder/TextElementComponent';
-import { CONTAINER_CLASS_NAME, DIVIDER_CLASS_NAME, useElement } from 'features/nodes/types/workflow';
+import { useElement } from 'features/nodes/store/workflowSlice';
+import {
+  CONTAINER_CLASS_NAME,
+  DIVIDER_CLASS_NAME,
+  isContainerElement,
+  isDividerElement,
+  isHeadingElement,
+  isNodeFieldElement,
+  isTextElement,
+} from 'features/nodes/types/workflow';
 import { memo } from 'react';
 import type { Equals } from 'tsafe';
 import { assert } from 'tsafe';
@@ -29,16 +38,16 @@ const sx: SystemStyleObject = {
 };
 
 export const ContainerElementComponent = memo(({ id }: { id: string }) => {
-  const element = useElement(id);
+  const el = useElement(id);
 
-  if (!element || element.type !== 'container') {
+  if (!el || !isContainerElement(el)) {
     return null;
   }
 
-  const { children, direction } = element.data;
+  const { children, direction } = el.data;
 
   return (
-    <ContainerContext.Provider value={element.data}>
+    <ContainerContext.Provider value={el.data}>
       <Flex id={id} className={CONTAINER_CLASS_NAME} sx={sx} data-container-direction={direction}>
         {children.map((childId) => (
           <FormElementComponent key={childId} id={childId} />
@@ -50,27 +59,32 @@ export const ContainerElementComponent = memo(({ id }: { id: string }) => {
 ContainerElementComponent.displayName = 'ContainerElementComponent';
 
 export const FormElementComponent = memo(({ id }: { id: string }) => {
-  const element = useElement(id);
+  const el = useElement(id);
 
-  if (!element) {
+  if (!el) {
     return null;
   }
 
-  const { type } = element;
+  if (isContainerElement(el)) {
+    return <ContainerElementComponent key={id} id={id} />;
+  }
+
+  if (isNodeFieldElement(el)) {
+    return <NodeFieldElementComponent key={id} id={id} />;
+  }
+
+  if (isDividerElement(el)) {
+    return <DividerElementComponent key={id} id={id} />;
+  }
+
+  if (isHeadingElement(el)) {
+    return <HeadingElementComponent key={id} id={id} />;
+  }
 
-  switch (type) {
-    case 'container':
-      return <ContainerElementComponent key={id} id={id} />;
-    case 'node-field':
-      return <NodeFieldElementComponent key={id} id={id} />;
-    case 'divider':
-      return <DividerElementComponent key={id} id={id} />;
-    case 'heading':
-      return <HeadingElementComponent key={id} id={id} />;
-    case 'text':
-      return <TextElementComponent key={id} id={id} />;
-    default:
-      assert<Equals<typeof type, never>>(false, `Unhandled type ${type}`);
+  if (isTextElement(el)) {
+    return <TextElementComponent key={id} id={id} />;
   }
+
+  assert<Equals<typeof el, never>>(false, `Unhandled type for element with id ${id}`);
 });
 FormElementComponent.displayName = 'FormElementComponent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
index 544585f3bd5..d34952e91d6 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
@@ -1,6 +1,7 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Flex } from '@invoke-ai/ui-library';
-import { DIVIDER_CLASS_NAME } from 'features/nodes/types/workflow';
+import { useElement } from 'features/nodes/store/workflowSlice';
+import { DIVIDER_CLASS_NAME, isDividerElement } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
 const sx: SystemStyleObject = {
@@ -9,6 +10,12 @@ const sx: SystemStyleObject = {
 };
 
 export const DividerElementComponent = memo(({ id }: { id: string }) => {
+  const el = useElement(id);
+
+  if (!el || !isDividerElement(el)) {
+    return;
+  }
+
   return <Flex id={id} className={DIVIDER_CLASS_NAME} sx={sx} />;
 });
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx
index 37071cda23e..b8ea2c2c964 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx
@@ -1,5 +1,6 @@
 import { Flex, Heading } from '@invoke-ai/ui-library';
-import { HEADING_CLASS_NAME, useElement } from 'features/nodes/types/workflow';
+import { useElement } from 'features/nodes/store/workflowSlice';
+import { HEADING_CLASS_NAME, isHeadingElement } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
 const LEVEL_TO_SIZE = {
@@ -11,13 +12,13 @@ const LEVEL_TO_SIZE = {
 } as const;
 
 export const HeadingElementComponent = memo(({ id }: { id: string }) => {
-  const element = useElement(id);
+  const el = useElement(id);
 
-  if (!element || element.type !== 'heading') {
+  if (!el || !isHeadingElement(el)) {
     return null;
   }
 
-  const { content, level } = element.data;
+  const { content, level } = el.data;
 
   return (
     <Flex id={id} className={HEADING_CLASS_NAME}>
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx
index 4a240a9edc9..425dcc56980 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx
@@ -1,17 +1,18 @@
 import { Flex } from '@invoke-ai/ui-library';
 import { InputFieldGate } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate';
 import { InputFieldViewMode } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode';
-import { NODE_FIELD_CLASS_NAME, useElement } from 'features/nodes/types/workflow';
+import { useElement } from 'features/nodes/store/workflowSlice';
+import { isNodeFieldElement, NODE_FIELD_CLASS_NAME } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
 export const NodeFieldElementComponent = memo(({ id }: { id: string }) => {
-  const element = useElement(id);
+  const el = useElement(id);
 
-  if (!element || element.type !== 'node-field') {
+  if (!el || !isNodeFieldElement(el)) {
     return null;
   }
-  const { data } = element;
-  const { fieldIdentifier } = data;
+
+  const { fieldIdentifier } = el.data;
 
   return (
     <Flex id={id} className={NODE_FIELD_CLASS_NAME}>
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
index 8a84ae014f0..398db521579 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
@@ -1,15 +1,16 @@
 import { Flex, Text } from '@invoke-ai/ui-library';
-import { TEXT_CLASS_NAME, useElement } from 'features/nodes/types/workflow';
+import { useElement } from 'features/nodes/store/workflowSlice';
+import { isTextElement, TEXT_CLASS_NAME } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
 export const TextElementComponent = memo(({ id }: { id: string }) => {
-  const element = useElement(id);
+  const el = useElement(id);
 
-  if (!element || element.type !== 'text') {
+  if (!el || !isTextElement(el)) {
     return null;
   }
-  const { data } = element;
-  const { content, fontSize } = data;
+
+  const { content, fontSize } = el.data;
 
   return (
     <Flex id={id} className={TEXT_CLASS_NAME}>
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
index 41e8dfcb9ea..9d45d2321cd 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
@@ -1,15 +1,21 @@
 import { Flex } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { FormElementComponent } from 'features/nodes/components/sidePanel/builder/ContainerElementComponent';
-import { rootId } from 'features/nodes/types/workflow';
-import { memo } from 'react';
+import { formLoaded } from 'features/nodes/store/workflowSlice';
+import { elements, rootElementId } from 'features/nodes/types/workflow';
+import { memo, useEffect } from 'react';
 
 export const WorkflowBuilder = memo(() => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(formLoaded({ elements, rootElementId }));
+  }, [dispatch]);
   return (
     <ScrollableContent>
       <Flex w="full" justifyContent="center">
         <Flex w="full" maxW={512}>
-          <FormElementComponent id={rootId} />
+          {rootElementId && <FormElementComponent id={rootElementId} />}
         </Flex>
       </Flex>
     </ScrollableContent>
diff --git a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
index 85e640316d2..ee923453f50 100644
--- a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
@@ -1,6 +1,7 @@
 import type { PayloadAction, Selector } from '@reduxjs/toolkit';
 import { createSelector, createSlice } from '@reduxjs/toolkit';
 import type { PersistConfig, RootState } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
 import { deepClone } from 'common/util/deepClone';
 import { workflowLoaded } from 'features/nodes/store/actions';
 import { isAnyNodeOrEdgeMutation, nodeEditorReset, nodesChanged } from 'features/nodes/store/nodesSlice';
@@ -11,8 +12,9 @@ import type {
 } from 'features/nodes/store/types';
 import type { FieldIdentifier } from 'features/nodes/types/field';
 import { isInvocationNode } from 'features/nodes/types/invocation';
-import type { WorkflowCategory, WorkflowV3 } from 'features/nodes/types/workflow';
+import type { ContainerElement, FormElement, WorkflowCategory, WorkflowV3 } from 'features/nodes/types/workflow';
 import { isEqual, omit, uniqBy } from 'lodash-es';
+import { useMemo } from 'react';
 import type { SQLiteDirection, WorkflowRecordOrderBy } from 'services/api/types';
 
 import { selectNodesSlice } from './selectors';
@@ -28,17 +30,7 @@ const blankWorkflow: Omit<WorkflowV3, 'nodes' | 'edges'> = {
   exposedFields: [],
   meta: { version: '3.0.0', category: 'user' },
   id: undefined,
-  form: {
-    elements: {},
-    structure: {
-      id: 'root',
-      type: 'container',
-      data: {
-        direction: 'column',
-        children: [],
-      },
-    },
-  },
+  form: undefined,
 };
 
 const initialWorkflowState: WorkflowState = {
@@ -134,6 +126,43 @@ export const workflowSlice = createSlice({
     workflowSaved: (state) => {
       state.isTouched = false;
     },
+    formLoaded: (state, action: PayloadAction<{ elements: Record<string, FormElement>; rootElementId: string }>) => {
+      state.form = action.payload;
+    },
+    formCreated: (state, action: PayloadAction<{ container: ContainerElement }>) => {
+      const { container } = action.payload;
+      state.form = {
+        elements: {
+          [container.id]: container,
+        },
+        rootElementId: container.id,
+      };
+    },
+    formElementAdded: (state, action: PayloadAction<{ element: FormElement; containerId: string; index: number }>) => {
+      if (!state.form) {
+        // Cannot add an element if the form has not been created
+        return;
+      }
+      const { element, containerId, index } = action.payload;
+      const containerElement = state.form.elements[containerId];
+      if (containerElement?.type !== 'container') {
+        return;
+      }
+      state.form.elements[element.id] = element;
+      containerElement.data.children.splice(index, 0, element.id);
+    },
+    formElementRemoved: (state, action: PayloadAction<{ id: string }>) => {
+      if (!state.form) {
+        // Cannot remove an element if the form has not been created
+        return;
+      }
+      const form = state.form;
+      const { id } = action.payload;
+      buildRemoveElementById(form.elements)(id, form.rootElementId);
+    },
+    formReset: (state) => {
+      state.form = undefined;
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(workflowLoaded, (state, action) => {
@@ -247,6 +276,11 @@ export const {
   workflowOrderByChanged,
   workflowOrderDirectionChanged,
   categorySectionsChanged,
+  formLoaded,
+  formCreated,
+  formElementAdded,
+  formElementRemoved,
+  formReset,
 } = workflowSlice.actions;
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -283,3 +317,37 @@ export const selectCleanEditor = createSelector([selectNodesSlice, selectWorkflo
   const savedWorkflow = !!workflow.id;
   return noNodes && !isTouched && !savedWorkflow;
 });
+
+export const selectRootElementId = createWorkflowSelector((workflow) => workflow.form?.rootElementId);
+const buildSelectElement = (id: string) => createWorkflowSelector((workflow) => workflow.form?.elements[id]);
+export const useElement = (id: string): FormElement | undefined => {
+  const selector = useMemo(() => buildSelectElement(id), [id]);
+  const element = useAppSelector(selector);
+  return element;
+};
+
+const buildRemoveElementById = (elements: NonNullable<WorkflowV3['form']>['elements']) => {
+  const removeElementById = (id: string, containerId: string): boolean => {
+    const container = elements[containerId] as ContainerElement;
+
+    if (container.type !== 'container') {
+      return false;
+    }
+
+    const index = container.data.children.indexOf(id);
+    if (index !== -1) {
+      container.data.children.splice(index, 1);
+      delete elements[id];
+      return true;
+    }
+
+    for (const childId of container.data.children) {
+      if (removeElementById(id, childId)) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+  return removeElementById;
+};
diff --git a/invokeai/frontend/web/src/features/nodes/types/workflow.ts b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
index 1920daced33..fa9ca7e7f5b 100644
--- a/invokeai/frontend/web/src/features/nodes/types/workflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
@@ -1,6 +1,4 @@
-import { SyncableMap } from 'common/util/SyncableMap/SyncableMap';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
-import { useMemo, useSyncExternalStore } from 'react';
 import { z } from 'zod';
 
 import { zFieldIdentifier } from './field';
@@ -75,34 +73,21 @@ export const zWorkflowV3 = z.object({
     category: zWorkflowCategory.default('user'),
     version: z.literal('3.0.0'),
   }),
-  form: z.object({
-    elements: z.record(z.lazy(() => zFormElement)),
-    structure: z.lazy(() => zContainerElement),
-  }),
+  form: z
+    .object({
+      elements: z.record(z.lazy(() => zFormElement)),
+      rootElementId: z.lazy(() => zElementId),
+    })
+    .optional(),
 });
 export type WorkflowV3 = z.infer<typeof zWorkflowV3>;
 // #endregion
 
 // #region Workflow Builder
-
-export const elements = new SyncableMap<string, FormElement>();
+export const elements: Record<string, FormElement> = {};
 
 export const addElement = (element: FormElement) => {
-  elements.set(element.id, element);
-};
-
-export const removeElement = (id: ElementId) => {
-  return elements.delete(id);
-};
-
-export const getElement = (id: ElementId) => {
-  return elements.get(id);
-};
-
-export const useElement = <T extends FormElement>(id: string) => {
-  const map = useSyncExternalStore(elements.subscribe, elements.getSnapshot);
-  const element = useMemo(() => map.get(id), [id, map]);
-  return element as T | undefined;
+  elements[element.id] = element;
 };
 
 const zElementId = z.string().trim().min(1);
@@ -121,6 +106,7 @@ const zNodeFieldElement = zElementBase.extend({
   }),
 });
 export type NodeFieldElement = z.infer<typeof zNodeFieldElement>;
+export const isNodeFieldElement = (el: FormElement): el is NodeFieldElement => el.type === NODE_FIELD_TYPE;
 const nodeField = (
   nodeId: NodeFieldElement['data']['fieldIdentifier']['nodeId'],
   fieldName: NodeFieldElement['data']['fieldIdentifier']['fieldName']
@@ -146,6 +132,7 @@ const zHeadingElement = zElementBase.extend({
   }),
 });
 export type HeadingElement = z.infer<typeof zHeadingElement>;
+export const isHeadingElement = (el: FormElement): el is HeadingElement => el.type === HEADING_TYPE;
 const heading = (
   content: HeadingElement['data']['content'],
   level: HeadingElement['data']['level']
@@ -172,6 +159,7 @@ const zTextElement = zElementBase.extend({
   }),
 });
 export type TextElement = z.infer<typeof zTextElement>;
+export const isTextElement = (el: FormElement): el is TextElement => el.type === TEXT_TYPE;
 const text = (content: TextElement['data']['content'], fontSize: TextElement['data']['fontSize']): TextElement => {
   const element: TextElement = {
     id: getPrefixedId(TEXT_TYPE),
@@ -191,6 +179,7 @@ const zDividerElement = zElementBase.extend({
   type: z.literal(DIVIDER_TYPE),
 });
 export type DividerElement = z.infer<typeof zDividerElement>;
+export const isDividerElement = (el: FormElement): el is DividerElement => el.type === DIVIDER_TYPE;
 const divider = (): DividerElement => {
   const element: DividerElement = {
     id: getPrefixedId(DIVIDER_TYPE),
@@ -218,6 +207,7 @@ const zContainerElement: z.ZodType<ContainerElement> = zElementBase.extend({
     children: z.array(zElementId),
   }),
 });
+export const isContainerElement = (el: FormElement): el is ContainerElement => el.type === CONTAINER_TYPE;
 const container = (
   direction: ContainerElement['data']['direction'],
   children: ContainerElement['data']['children']
@@ -238,7 +228,7 @@ const zFormElement = z.union([zContainerElement, zNodeFieldElement, zHeadingElem
 
 export type FormElement = z.infer<typeof zFormElement>;
 
-export const rootId: string = container('column', [
+export const rootElementId: string = container('column', [
   heading('My Cool Workflow', 1).id,
   text('This is a description of what my workflow does. It does things.', 'md').id,
   divider().id,

From 578d1bbea4a5f5d9994c13fa8f5d0d4cfa476757 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 23 Jan 2025 09:55:37 +1100
Subject: [PATCH 30/58] feat(ui): iterate on builder (WIP)

---
 .../components/sidePanel/builder/ContainerElementComponent.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
index 6803c24ca83..99d6d704ca1 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
@@ -58,6 +58,7 @@ export const ContainerElementComponent = memo(({ id }: { id: string }) => {
 });
 ContainerElementComponent.displayName = 'ContainerElementComponent';
 
+// TODO(psyche): Can we move this into a separate file and avoid circular dependencies between it and ContainerElementComponent?
 export const FormElementComponent = memo(({ id }: { id: string }) => {
   const el = useElement(id);
 

From 3329f128f6053bdc88ea9cc24a66a851984c654a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 23 Jan 2025 16:35:57 +1100
Subject: [PATCH 31/58] feat(ui): iterate on builder (WIP)

---
 .../sidePanel/builder/ContainerContext.ts     |   9 --
 .../builder/ContainerElementComponent.tsx     | 105 +++++++++++++----
 .../builder/DividerElementComponent.tsx       |  58 ++++++++-
 .../builder/FormElementEditModeWrapper.tsx    |  87 ++++++++++++++
 .../builder/HeadingElementComponent.tsx       |  37 +++++-
 .../builder/NodeFieldElementComponent.tsx     |  39 +++++-
 .../builder/TextElementComponent.tsx          |  34 +++++-
 .../sidePanel/builder/WorkflowBuilder.tsx     |  25 +++-
 .../components/sidePanel/builder/contexts.ts  |   5 +
 .../sidePanel/workflow/WorkflowPanel.tsx      |   2 +-
 .../web/src/features/nodes/store/types.ts     |   1 +
 .../src/features/nodes/store/workflowSlice.ts | 111 +++++++++++++-----
 .../web/src/features/nodes/types/workflow.ts  | 106 ++++++++++-------
 13 files changed, 497 insertions(+), 122 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerContext.ts
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/contexts.ts

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerContext.ts b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerContext.ts
deleted file mode 100644
index 167df8506b8..00000000000
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerContext.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { ContainerElement } from 'features/nodes/types/workflow';
-import { createContext, useContext } from 'react';
-
-export const ContainerContext = createContext<ContainerElement['data'] | null>(null);
-
-export const useContainerContext = () => {
-  const containerDirection = useContext(ContainerContext);
-  return containerDirection;
-};
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
index 99d6d704ca1..be5d766ac6e 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
@@ -1,62 +1,119 @@
-import { Flex, type SystemStyleObject } from '@invoke-ai/ui-library';
-import { ContainerContext } from 'features/nodes/components/sidePanel/builder/ContainerContext';
+import { Flex, IconButton, type SystemStyleObject } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { ContainerContext, DepthContext } from 'features/nodes/components/sidePanel/builder/contexts';
 import { DividerElementComponent } from 'features/nodes/components/sidePanel/builder/DividerElementComponent';
+import { FormElementEditModeWrapper } from 'features/nodes/components/sidePanel/builder/FormElementEditModeWrapper';
 import { HeadingElementComponent } from 'features/nodes/components/sidePanel/builder/HeadingElementComponent';
 import { NodeFieldElementComponent } from 'features/nodes/components/sidePanel/builder/NodeFieldElementComponent';
 import { TextElementComponent } from 'features/nodes/components/sidePanel/builder/TextElementComponent';
-import { useElement } from 'features/nodes/store/workflowSlice';
+import { formElementAdded, selectWorkflowFormMode, useElement } from 'features/nodes/store/workflowSlice';
+import type { ContainerElement } from 'features/nodes/types/workflow';
 import {
+  container,
   CONTAINER_CLASS_NAME,
-  DIVIDER_CLASS_NAME,
   isContainerElement,
   isDividerElement,
   isHeadingElement,
   isNodeFieldElement,
   isTextElement,
 } from 'features/nodes/types/workflow';
-import { memo } from 'react';
+import { memo, useCallback, useContext } from 'react';
+import { PiPlusBold } from 'react-icons/pi';
 import type { Equals } from 'tsafe';
 import { assert } from 'tsafe';
 
 const sx: SystemStyleObject = {
   gap: 4,
+  flex: '1 1 0',
   '&[data-container-direction="column"]': {
     flexDir: 'column',
-    '> :last-child': {
-      flex: '1 0 0',
-      alignItems: 'flex-start',
-    },
   },
   '&[data-container-direction="row"]': {
-    '> *': {
-      flex: '1 1 0',
-    },
-  },
-  [`& > .${DIVIDER_CLASS_NAME}`]: {
-    flex: '0 0 1px',
+    flexDir: 'row',
   },
 };
 
 export const ContainerElementComponent = memo(({ id }: { id: string }) => {
   const el = useElement(id);
+  const mode = useAppSelector(selectWorkflowFormMode);
 
   if (!el || !isContainerElement(el)) {
     return null;
   }
 
-  const { children, direction } = el.data;
+  if (mode === 'view') {
+    return <ContainerElementComponentViewMode el={el} />;
+  }
+
+  // mode === 'edit'
+  return <ContainerElementComponentEditMode el={el} />;
+});
+ContainerElementComponent.displayName = 'ContainerElementComponent';
+
+export const ContainerElementComponentViewMode = memo(({ el }: { el: ContainerElement }) => {
+  const depth = useContext(DepthContext);
+  const { id, data } = el;
+  const { children, direction } = data;
 
   return (
-    <ContainerContext.Provider value={el.data}>
-      <Flex id={id} className={CONTAINER_CLASS_NAME} sx={sx} data-container-direction={direction}>
-        {children.map((childId) => (
-          <FormElementComponent key={childId} id={childId} />
-        ))}
-      </Flex>
-    </ContainerContext.Provider>
+    <DepthContext.Provider value={depth + 1}>
+      <ContainerContext.Provider value={data}>
+        <Flex id={id} className={CONTAINER_CLASS_NAME} sx={sx} data-container-direction={direction}>
+          {children.map((childId) => (
+            <FormElementComponent key={childId} id={childId} />
+          ))}
+        </Flex>
+      </ContainerContext.Provider>{' '}
+    </DepthContext.Provider>
   );
 });
-ContainerElementComponent.displayName = 'ContainerElementComponent';
+ContainerElementComponentViewMode.displayName = 'ContainerElementComponentViewMode';
+
+export const ContainerElementComponentEditMode = memo(({ el }: { el: ContainerElement }) => {
+  const depth = useContext(DepthContext);
+
+  const { id, data } = el;
+  const { children, direction } = data;
+
+  return (
+    <FormElementEditModeWrapper element={el}>
+      <DepthContext.Provider value={depth + 1}>
+        <ContainerContext.Provider value={data}>
+          <Flex id={id} className={CONTAINER_CLASS_NAME} sx={sx} data-container-direction={direction}>
+            {children.map((childId) => (
+              <FormElementComponent key={childId} id={childId} />
+            ))}
+            {direction === 'row' && children.length < 3 && depth < 2 && <AddColumnButton containerId={id} />}
+            {direction === 'column' && depth < 1 && <AddRowButton containerId={id} />}
+          </Flex>
+        </ContainerContext.Provider>
+      </DepthContext.Provider>
+    </FormElementEditModeWrapper>
+  );
+});
+ContainerElementComponentEditMode.displayName = 'ContainerElementComponentEditMode';
+
+const AddColumnButton = ({ containerId }: { containerId: string }) => {
+  const dispatch = useAppDispatch();
+  const onClick = useCallback(() => {
+    const element = container('column', []);
+    dispatch(formElementAdded({ element, containerId }));
+  }, [containerId, dispatch]);
+  return (
+    <IconButton onClick={onClick} aria-label="add column" icon={<PiPlusBold />} h="unset" variant="ghost" size="sm" />
+  );
+};
+
+const AddRowButton = ({ containerId }: { containerId: string }) => {
+  const dispatch = useAppDispatch();
+  const onClick = useCallback(() => {
+    const element = container('row', []);
+    dispatch(formElementAdded({ element, containerId }));
+  }, [containerId, dispatch]);
+  return (
+    <IconButton onClick={onClick} aria-label="add row" icon={<PiPlusBold />} w="unset" variant="ghost" size="sm" />
+  );
+};
 
 // TODO(psyche): Can we move this into a separate file and avoid circular dependencies between it and ContainerElementComponent?
 export const FormElementComponent = memo(({ id }: { id: string }) => {
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
index d34952e91d6..29b9e8be3c2 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
@@ -1,22 +1,74 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Flex } from '@invoke-ai/ui-library';
-import { useElement } from 'features/nodes/store/workflowSlice';
+import { useAppSelector } from 'app/store/storeHooks';
+import { ContainerContext } from 'features/nodes/components/sidePanel/builder/contexts';
+import { FormElementEditModeWrapper } from 'features/nodes/components/sidePanel/builder/FormElementEditModeWrapper';
+import { selectWorkflowFormMode, useElement } from 'features/nodes/store/workflowSlice';
+import type { DividerElement } from 'features/nodes/types/workflow';
 import { DIVIDER_CLASS_NAME, isDividerElement } from 'features/nodes/types/workflow';
-import { memo } from 'react';
+import { memo, useContext } from 'react';
 
 const sx: SystemStyleObject = {
   bg: 'base.700',
   flexShrink: 0,
+  '&[data-orientation="horizontal"]': {
+    width: '100%',
+    height: '1px',
+  },
+  '&[data-orientation="vertical"]': {
+    height: '100%',
+    width: '1px',
+  },
 };
 
 export const DividerElementComponent = memo(({ id }: { id: string }) => {
   const el = useElement(id);
+  const mode = useAppSelector(selectWorkflowFormMode);
 
   if (!el || !isDividerElement(el)) {
     return;
   }
 
-  return <Flex id={id} className={DIVIDER_CLASS_NAME} sx={sx} />;
+  if (mode === 'view') {
+    return <DividerElementComponentViewMode el={el} />;
+  }
+
+  // mode === 'edit'
+  return <DividerElementComponentEditMode el={el} />;
 });
 
 DividerElementComponent.displayName = 'DividerElementComponent';
+
+export const DividerElementComponentViewMode = memo(({ el }: { el: DividerElement }) => {
+  const container = useContext(ContainerContext);
+  const { id } = el;
+
+  return (
+    <Flex
+      id={id}
+      className={DIVIDER_CLASS_NAME}
+      sx={sx}
+      data-orientation={container?.direction === 'column' ? 'horizontal' : 'vertical'}
+    />
+  );
+});
+
+DividerElementComponentViewMode.displayName = 'DividerElementComponentViewMode';
+
+export const DividerElementComponentEditMode = memo(({ el }: { el: DividerElement }) => {
+  const container = useContext(ContainerContext);
+  const { id } = el;
+
+  return (
+    <FormElementEditModeWrapper element={el}>
+      <Flex
+        id={id}
+        className={DIVIDER_CLASS_NAME}
+        sx={sx}
+        data-orientation={container?.direction === 'column' ? 'horizontal' : 'vertical'}
+      />
+    </FormElementEditModeWrapper>
+  );
+});
+
+DividerElementComponentEditMode.displayName = 'DividerElementComponentEditMode';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
new file mode 100644
index 00000000000..dee267ad46f
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
@@ -0,0 +1,87 @@
+import { Flex, type FlexProps, IconButton, Spacer, Text } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { getPrefixedId } from 'features/controlLayers/konva/util';
+import { DepthContext } from 'features/nodes/components/sidePanel/builder/contexts';
+import { formElementRemoved } from 'features/nodes/store/workflowSlice';
+import { type FormElement, isContainerElement } from 'features/nodes/types/workflow';
+import { startCase } from 'lodash-es';
+import { memo, useCallback, useContext } from 'react';
+import { PiXBold } from 'react-icons/pi';
+
+export const EDIT_MODE_WRAPPER_CLASS_NAME = getPrefixedId('edit-mode-wrapper', '-');
+
+const getHeaderBgColor = (depth: number) => {
+  if (depth <= 1) {
+    return 'base.800';
+  }
+  if (depth === 2) {
+    return 'base.750';
+  }
+  return 'base.700';
+};
+
+const getHeaderLabel = (el: FormElement) => {
+  if (isContainerElement(el)) {
+    if (el.data.direction === 'column') {
+      return 'Column';
+    }
+    return 'Row';
+  }
+  return startCase(el.type);
+};
+
+export const FormElementEditModeWrapper = memo(
+  ({ element, children, ...rest }: { element: FormElement } & FlexProps) => {
+    const depth = useContext(DepthContext);
+    const dispatch = useAppDispatch();
+    const removeElement = useCallback(() => {
+      dispatch(formElementRemoved({ id: element.id }));
+    }, [dispatch, element.id]);
+
+    return (
+      <Flex
+        className={EDIT_MODE_WRAPPER_CLASS_NAME}
+        flexDir="column"
+        borderWidth={1}
+        borderRadius="base"
+        borderColor="base.750"
+        alignItems="center"
+        justifyContent="flex-start"
+        w="full"
+        h="full"
+        {...rest}
+      >
+        <Flex
+          w="full"
+          ps={2}
+          h={8}
+          bg={getHeaderBgColor(depth)}
+          borderTopRadius="inherit"
+          borderBottomWidth={1}
+          borderColor="inherit"
+          alignItems="center"
+          cursor="grab"
+        >
+          <Text fontWeight="semibold" noOfLines={1} wordBreak="break-all">
+            {getHeaderLabel(element)}
+          </Text>
+          <Spacer />
+          <IconButton
+            aria-label="delete"
+            onClick={removeElement}
+            icon={<PiXBold />}
+            variant="link"
+            size="sm"
+            alignSelf="stretch"
+            colorScheme="error"
+          />
+        </Flex>
+        <Flex w="full" p={4} alignItems="center" gap={4}>
+          {children}
+        </Flex>
+      </Flex>
+    );
+  }
+);
+
+FormElementEditModeWrapper.displayName = 'FormElementEditModeWrapper';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx
index b8ea2c2c964..6608811bac2 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx
@@ -1,5 +1,8 @@
 import { Flex, Heading } from '@invoke-ai/ui-library';
-import { useElement } from 'features/nodes/store/workflowSlice';
+import { useAppSelector } from 'app/store/storeHooks';
+import { FormElementEditModeWrapper } from 'features/nodes/components/sidePanel/builder/FormElementEditModeWrapper';
+import { selectWorkflowFormMode, useElement } from 'features/nodes/store/workflowSlice';
+import type { HeadingElement } from 'features/nodes/types/workflow';
 import { HEADING_CLASS_NAME, isHeadingElement } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
@@ -13,12 +16,25 @@ const LEVEL_TO_SIZE = {
 
 export const HeadingElementComponent = memo(({ id }: { id: string }) => {
   const el = useElement(id);
+  const mode = useAppSelector(selectWorkflowFormMode);
 
   if (!el || !isHeadingElement(el)) {
     return null;
   }
 
-  const { content, level } = el.data;
+  if (mode === 'view') {
+    return <HeadingElementComponentViewMode el={el} />;
+  }
+
+  // mode === 'edit'
+  return <HeadingElementComponentEditMode el={el} />;
+});
+
+HeadingElementComponent.displayName = 'HeadingElementComponent';
+
+export const HeadingElementComponentViewMode = memo(({ el }: { el: HeadingElement }) => {
+  const { id, data } = el;
+  const { content, level } = data;
 
   return (
     <Flex id={id} className={HEADING_CLASS_NAME}>
@@ -27,4 +43,19 @@ export const HeadingElementComponent = memo(({ id }: { id: string }) => {
   );
 });
 
-HeadingElementComponent.displayName = 'HeadingElementComponent';
+HeadingElementComponentViewMode.displayName = 'HeadingElementComponentViewMode';
+
+export const HeadingElementComponentEditMode = memo(({ el }: { el: HeadingElement }) => {
+  const { id, data } = el;
+  const { content, level } = data;
+
+  return (
+    <FormElementEditModeWrapper element={el}>
+      <Flex id={id} className={HEADING_CLASS_NAME}>
+        <Heading size={LEVEL_TO_SIZE[level]}>{content}</Heading>
+      </Flex>
+    </FormElementEditModeWrapper>
+  );
+});
+
+HeadingElementComponentEditMode.displayName = 'HeadingElementComponentEditMode';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx
index 425dcc56980..60ced59ba19 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx
@@ -1,18 +1,34 @@
 import { Flex } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
 import { InputFieldGate } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldGate';
 import { InputFieldViewMode } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldViewMode';
-import { useElement } from 'features/nodes/store/workflowSlice';
+import { FormElementEditModeWrapper } from 'features/nodes/components/sidePanel/builder/FormElementEditModeWrapper';
+import { selectWorkflowFormMode, useElement } from 'features/nodes/store/workflowSlice';
+import type { NodeFieldElement } from 'features/nodes/types/workflow';
 import { isNodeFieldElement, NODE_FIELD_CLASS_NAME } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
 export const NodeFieldElementComponent = memo(({ id }: { id: string }) => {
   const el = useElement(id);
+  const mode = useAppSelector(selectWorkflowFormMode);
 
   if (!el || !isNodeFieldElement(el)) {
     return null;
   }
 
-  const { fieldIdentifier } = el.data;
+  if (mode === 'view') {
+    return <NodeFieldElementComponentViewMode el={el} />;
+  }
+
+  // mode === 'edit'
+  return <NodeFieldElementComponentEditMode el={el} />;
+});
+
+NodeFieldElementComponent.displayName = 'NodeFieldElementComponent';
+
+export const NodeFieldElementComponentViewMode = memo(({ el }: { el: NodeFieldElement }) => {
+  const { id, data } = el;
+  const { fieldIdentifier } = data;
 
   return (
     <Flex id={id} className={NODE_FIELD_CLASS_NAME}>
@@ -23,4 +39,21 @@ export const NodeFieldElementComponent = memo(({ id }: { id: string }) => {
   );
 });
 
-NodeFieldElementComponent.displayName = 'NodeFieldElementComponent';
+NodeFieldElementComponentViewMode.displayName = 'NodeFieldElementComponentViewMode';
+
+export const NodeFieldElementComponentEditMode = memo(({ el }: { el: NodeFieldElement }) => {
+  const { id, data } = el;
+  const { fieldIdentifier } = data;
+
+  return (
+    <FormElementEditModeWrapper element={el}>
+      <Flex id={id} className={NODE_FIELD_CLASS_NAME} w='full'>
+        <InputFieldGate nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName}>
+          <InputFieldViewMode nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName} />
+        </InputFieldGate>
+      </Flex>
+    </FormElementEditModeWrapper>
+  );
+});
+
+NodeFieldElementComponentEditMode.displayName = 'NodeFieldElementComponentEditMode';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
index 398db521579..90c4bdf6127 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
@@ -1,16 +1,31 @@
 import { Flex, Text } from '@invoke-ai/ui-library';
-import { useElement } from 'features/nodes/store/workflowSlice';
+import { useAppSelector } from 'app/store/storeHooks';
+import { FormElementEditModeWrapper } from 'features/nodes/components/sidePanel/builder/FormElementEditModeWrapper';
+import { selectWorkflowFormMode, useElement } from 'features/nodes/store/workflowSlice';
+import type { TextElement } from 'features/nodes/types/workflow';
 import { isTextElement, TEXT_CLASS_NAME } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
 export const TextElementComponent = memo(({ id }: { id: string }) => {
   const el = useElement(id);
+  const mode = useAppSelector(selectWorkflowFormMode);
 
   if (!el || !isTextElement(el)) {
     return null;
   }
 
-  const { content, fontSize } = el.data;
+  if (mode === 'view') {
+    return <TextElementComponentViewMode el={el} />;
+  }
+
+  // mode === 'edit'
+  return <TextElementComponentEditMode el={el} />;
+});
+TextElementComponent.displayName = 'TextElementComponent';
+
+export const TextElementComponentViewMode = memo(({ el }: { el: TextElement }) => {
+  const { id, data } = el;
+  const { content, fontSize } = data;
 
   return (
     <Flex id={id} className={TEXT_CLASS_NAME}>
@@ -18,5 +33,18 @@ export const TextElementComponent = memo(({ id }: { id: string }) => {
     </Flex>
   );
 });
+TextElementComponentViewMode.displayName = 'TextElementComponentViewMode';
 
-TextElementComponent.displayName = 'TextElementComponent';
+export const TextElementComponentEditMode = memo(({ el }: { el: TextElement }) => {
+  const { id, data } = el;
+  const { content, fontSize } = data;
+
+  return (
+    <Flex id={id} className={TEXT_CLASS_NAME}>
+      <FormElementEditModeWrapper element={el}>
+        <Text fontSize={fontSize}>{content}</Text>
+      </FormElementEditModeWrapper>
+    </Flex>
+  );
+});
+TextElementComponentEditMode.displayName = 'TextElementComponentEditMode';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
index 9d45d2321cd..76c5986382e 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
@@ -1,20 +1,23 @@
-import { Flex } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
+import { Button, Flex } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { FormElementComponent } from 'features/nodes/components/sidePanel/builder/ContainerElementComponent';
-import { formLoaded } from 'features/nodes/store/workflowSlice';
+import { formLoaded, formModeToggled, selectWorkflowFormMode } from 'features/nodes/store/workflowSlice';
 import { elements, rootElementId } from 'features/nodes/types/workflow';
-import { memo, useEffect } from 'react';
+import { memo, useCallback, useEffect } from 'react';
 
 export const WorkflowBuilder = memo(() => {
   const dispatch = useAppDispatch();
+  const mode = useAppSelector(selectWorkflowFormMode);
+
   useEffect(() => {
     dispatch(formLoaded({ elements, rootElementId }));
   }, [dispatch]);
   return (
     <ScrollableContent>
       <Flex w="full" justifyContent="center">
-        <Flex w="full" maxW={512}>
+        <Flex flexDir="column" w={mode === 'view' ? '768px' : 'min-content'} minW='768px'>
+          <ToggleModeButton />
           {rootElementId && <FormElementComponent id={rootElementId} />}
         </Flex>
       </Flex>
@@ -23,3 +26,15 @@ export const WorkflowBuilder = memo(() => {
 });
 
 WorkflowBuilder.displayName = 'WorkflowBuilder';
+
+const ToggleModeButton = memo(() => {
+  const dispatch = useAppDispatch();
+  const mode = useAppSelector(selectWorkflowFormMode);
+
+  const onClick = useCallback(() => {
+    dispatch(formModeToggled());
+  }, [dispatch]);
+
+  return <Button onClick={onClick}>{mode === 'view' ? 'Edit' : 'View'}</Button>;
+});
+ToggleModeButton.displayName = 'ToggleModeButton';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/contexts.ts b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/contexts.ts
new file mode 100644
index 00000000000..795bb0db957
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/contexts.ts
@@ -0,0 +1,5 @@
+import type { ContainerElement } from 'features/nodes/types/workflow';
+import { createContext } from 'react';
+
+export const ContainerContext = createContext<ContainerElement['data'] | null>(null);
+export const DepthContext = createContext<number>(0);
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
index e21606101bb..1bfe0f7eac9 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
@@ -13,7 +13,7 @@ const WorkflowFieldsLinearViewPanel = () => {
     <Flex layerStyle="first" flexDir="column" w="full" h="full" borderRadius="base" p={2} gap={2}>
       <Tabs variant="line" display="flex" w="full" h="full" flexDir="column">
         <TabList>
-          <Tab>Builder</Tab>
+          <Tab>{t('common.builder')}</Tab>
           <Tab>{t('common.linear')}</Tab>
           <Tab>{t('common.details')}</Tab>
           <Tab>JSON</Tab>
diff --git a/invokeai/frontend/web/src/features/nodes/store/types.ts b/invokeai/frontend/web/src/features/nodes/store/types.ts
index 5684d0f2b33..06279aa61df 100644
--- a/invokeai/frontend/web/src/features/nodes/store/types.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/types.ts
@@ -39,6 +39,7 @@ export type WorkflowsState = Omit<WorkflowV3, 'nodes' | 'edges'> & {
   _version: 1;
   isTouched: boolean;
   mode: WorkflowMode;
+  formMode: WorkflowMode;
   originalExposedFieldValues: FieldIdentifierWithValue[];
   searchTerm: string;
   orderBy?: WorkflowRecordOrderBy;
diff --git a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
index ee923453f50..c9f5db25729 100644
--- a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
@@ -12,7 +12,13 @@ import type {
 } from 'features/nodes/store/types';
 import type { FieldIdentifier } from 'features/nodes/types/field';
 import { isInvocationNode } from 'features/nodes/types/invocation';
-import type { ContainerElement, FormElement, WorkflowCategory, WorkflowV3 } from 'features/nodes/types/workflow';
+import {
+  type ContainerElement,
+  type FormElement,
+  isContainerElement,
+  type WorkflowCategory,
+  type WorkflowV3,
+} from 'features/nodes/types/workflow';
 import { isEqual, omit, uniqBy } from 'lodash-es';
 import { useMemo } from 'react';
 import type { SQLiteDirection, WorkflowRecordOrderBy } from 'services/api/types';
@@ -42,6 +48,7 @@ const initialWorkflowState: WorkflowState = {
   orderBy: undefined, // initial value is decided in component
   orderDirection: 'DESC',
   categorySections: {},
+  formMode: 'view',
   ...blankWorkflow,
 };
 
@@ -138,31 +145,39 @@ export const workflowSlice = createSlice({
         rootElementId: container.id,
       };
     },
-    formElementAdded: (state, action: PayloadAction<{ element: FormElement; containerId: string; index: number }>) => {
+    formElementAdded: (state, action: PayloadAction<{ element: FormElement; containerId: string; index?: number }>) => {
       if (!state.form) {
         // Cannot add an element if the form has not been created
         return;
       }
+      const { elements } = state.form;
       const { element, containerId, index } = action.payload;
-      const containerElement = state.form.elements[containerId];
-      if (containerElement?.type !== 'container') {
-        return;
-      }
-      state.form.elements[element.id] = element;
-      containerElement.data.children.splice(index, 0, element.id);
+      addElement(elements, element, containerId, index);
     },
     formElementRemoved: (state, action: PayloadAction<{ id: string }>) => {
       if (!state.form) {
         // Cannot remove an element if the form has not been created
         return;
       }
-      const form = state.form;
+      const { elements, rootElementId } = state.form;
       const { id } = action.payload;
-      buildRemoveElementById(form.elements)(id, form.rootElementId);
+      removeElement(elements, id, rootElementId);
+    },
+    formElementMoved: (state, action: PayloadAction<{ id: string; containerId: string; index: number }>) => {
+      if (!state.form) {
+        // Cannot move an element if the form has not been created
+        return;
+      }
+      const { elements } = state.form;
+      const { id, containerId, index } = action.payload;
+      moveElement(elements, id, containerId, index);
     },
     formReset: (state) => {
       state.form = undefined;
     },
+    formModeToggled: (state) => {
+      state.formMode = state.formMode === 'edit' ? 'view' : 'edit';
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(workflowLoaded, (state, action) => {
@@ -281,6 +296,7 @@ export const {
   formElementAdded,
   formElementRemoved,
   formReset,
+  formModeToggled,
 } = workflowSlice.actions;
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -305,6 +321,7 @@ const createWorkflowSelector = <T>(selector: Selector<WorkflowState, T>) =>
 export const selectWorkflowName = createWorkflowSelector((workflow) => workflow.name);
 export const selectWorkflowId = createWorkflowSelector((workflow) => workflow.id);
 export const selectWorkflowMode = createWorkflowSelector((workflow) => workflow.mode);
+export const selectWorkflowFormMode = createWorkflowSelector((workflow) => workflow.formMode);
 export const selectWorkflowIsTouched = createWorkflowSelector((workflow) => workflow.isTouched);
 export const selectWorkflowSearchTerm = createWorkflowSelector((workflow) => workflow.searchTerm);
 export const selectWorkflowOrderBy = createWorkflowSelector((workflow) => workflow.orderBy);
@@ -326,28 +343,66 @@ export const useElement = (id: string): FormElement | undefined => {
   return element;
 };
 
-const buildRemoveElementById = (elements: NonNullable<WorkflowV3['form']>['elements']) => {
-  const removeElementById = (id: string, containerId: string): boolean => {
-    const container = elements[containerId] as ContainerElement;
+const addElement = (
+  elements: NonNullable<WorkflowV3['form']>['elements'],
+  element: FormElement,
+  containerId: string,
+  index?: number
+) => {
+  const container = elements[containerId];
+  if (!container || !isContainerElement(container)) {
+    return;
+  }
+  elements[element.id] = element;
+  if (index === undefined) {
+    container.data.children.push(element.id);
+  } else {
+    container.data.children.splice(index, 0, element.id);
+  }
+};
+
+const removeElement = (
+  elements: NonNullable<WorkflowV3['form']>['elements'],
+  id: string,
+  containerId: string
+): boolean => {
+  const container = elements[containerId];
 
-    if (container.type !== 'container') {
-      return false;
-    }
+  if (!container || !isContainerElement(container)) {
+    return false;
+  }
+
+  const index = container.data.children.indexOf(id);
+  if (index !== -1) {
+    container.data.children.splice(index, 1);
+    delete elements[id];
+    return true;
+  }
 
-    const index = container.data.children.indexOf(id);
-    if (index !== -1) {
-      container.data.children.splice(index, 1);
-      delete elements[id];
+  for (const childId of container.data.children) {
+    if (removeElement(elements, id, childId)) {
       return true;
     }
+  }
 
-    for (const childId of container.data.children) {
-      if (removeElementById(id, childId)) {
-        return true;
-      }
-    }
+  return false;
+};
 
-    return false;
-  };
-  return removeElementById;
+const moveElement = (
+  elements: NonNullable<WorkflowV3['form']>['elements'],
+  id: string,
+  containerId: string,
+  index: number
+) => {
+  const element = elements[id];
+  if (!element) {
+    return;
+  }
+  const container = elements[containerId];
+  if (!container || !isContainerElement(container)) {
+    return;
+  }
+
+  removeElement(elements, id, containerId);
+  addElement(elements, element, containerId, index);
 };
diff --git a/invokeai/frontend/web/src/features/nodes/types/workflow.ts b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
index fa9ca7e7f5b..a5aec990cac 100644
--- a/invokeai/frontend/web/src/features/nodes/types/workflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
@@ -118,6 +118,10 @@ const nodeField = (
       fieldIdentifier: { nodeId, fieldName },
     },
   };
+  return element;
+};
+const _nodeField = (...args: Parameters<typeof nodeField>): NodeFieldElement => {
+  const element = nodeField(...args);
   addElement(element);
   return element;
 };
@@ -145,6 +149,10 @@ const heading = (
       level,
     },
   };
+  return element;
+};
+const _heading = (...args: Parameters<typeof heading>): HeadingElement => {
+  const element = heading(...args);
   addElement(element);
   return element;
 };
@@ -172,6 +180,11 @@ const text = (content: TextElement['data']['content'], fontSize: TextElement['da
   addElement(element);
   return element;
 };
+const _text = (...args: Parameters<typeof text>): TextElement => {
+  const element = text(...args);
+  addElement(element);
+  return element;
+};
 
 const DIVIDER_TYPE = 'divider';
 export const DIVIDER_CLASS_NAME = getPrefixedId(DIVIDER_TYPE, '-');
@@ -188,6 +201,11 @@ const divider = (): DividerElement => {
   addElement(element);
   return element;
 };
+const _divider = (...args: Parameters<typeof divider>): DividerElement => {
+  const element = divider(...args);
+  addElement(element);
+  return element;
+};
 
 export type ContainerElement = {
   id: string;
@@ -208,7 +226,7 @@ const zContainerElement: z.ZodType<ContainerElement> = zElementBase.extend({
   }),
 });
 export const isContainerElement = (el: FormElement): el is ContainerElement => el.type === CONTAINER_TYPE;
-const container = (
+export const container = (
   direction: ContainerElement['data']['direction'],
   children: ContainerElement['data']['children']
 ): ContainerElement => {
@@ -220,6 +238,10 @@ const container = (
       children,
     },
   };
+  return element;
+};
+export const _container = (...args: Parameters<typeof container>): ContainerElement => {
+  const element = container(...args);
   addElement(element);
   return element;
 };
@@ -228,55 +250,53 @@ const zFormElement = z.union([zContainerElement, zNodeFieldElement, zHeadingElem
 
 export type FormElement = z.infer<typeof zFormElement>;
 
-export const rootElementId: string = container('column', [
-  heading('My Cool Workflow', 1).id,
-  text('This is a description of what my workflow does. It does things.', 'md').id,
-  divider().id,
-  heading('First Section', 2).id,
-  text('The first section includes fields relevant to the first section. This note describes that fact.', 'sm').id,
-  divider().id,
-  container('row', [
-    nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
-    divider().id,
-    nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
-    divider().id,
-    nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+export const rootElementId: string = _container('column', [
+  _heading('My Cool Workflow', 1).id,
+  _text('This is a description of what my workflow does. It does things.', 'md').id,
+  _divider().id,
+  _heading('First Section', 2).id,
+  _text('The first section includes fields relevant to the first section. This note describes that fact.', 'sm').id,
+  _divider().id,
+  _container('row', [
+    _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+    _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+    _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
   ]).id,
-  nodeField('9c058600-8d73-4702-912b-0ccf37403bfd', 'value').id,
-  nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value').id,
-  nodeField('4e16cbf6-457c-46fb-9ab7-9cb262fa1e03', 'value').id,
-  nodeField('39cb5272-a9d7-4da9-9c35-32e02b46bb34', 'color').id,
-  container('row', [
-    container('column', [
-      nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-      nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+  _nodeField('9c058600-8d73-4702-912b-0ccf37403bfd', 'value').id,
+  _nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value').id,
+  _nodeField('4e16cbf6-457c-46fb-9ab7-9cb262fa1e03', 'value').id,
+  _nodeField('39cb5272-a9d7-4da9-9c35-32e02b46bb34', 'color').id,
+  _container('row', [
+    _container('column', [
+      _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+      _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
     ]).id,
-    container('column', [
-      nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-      nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-      nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-      nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+    _container('column', [
+      _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+      _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+      _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+      _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
     ]).id,
-    container('column', [
-      container('row', [
-        nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-        nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+    _container('column', [
+      _container('row', [
+        _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+        _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
       ]).id,
-      container('row', [
-        nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-        nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+      _container('row', [
+        _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+        _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
       ]).id,
     ]).id,
   ]).id,
-  nodeField('14744f68-9000-4694-b4d6-cbe83ee231ee', 'model').id,
-  divider().id,
-  text('These are some text that are definitely super helpful.', 'sm').id,
-  divider().id,
-  container('row', [
-    container('column', [
-      nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
-      nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+  _nodeField('14744f68-9000-4694-b4d6-cbe83ee231ee', 'model').id,
+  _divider().id,
+  _text('These are some text that are definitely super helpful.', 'sm').id,
+  _divider().id,
+  _container('row', [
+    _container('column', [
+      _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+      _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
     ]).id,
-    container('column', [nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value').id]).id,
+    _container('column', [_nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value').id]).id,
   ]).id,
 ]).id;

From 81cdaac2b5f20cba9dff6193a1779f7a91ebdd69 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 23 Jan 2025 17:33:17 +1100
Subject: [PATCH 32/58] feat(ui): hacking on dnd (WIP)

---
 .../src/features/dnd/DndListDropIndicator.tsx |   4 +-
 .../builder/ContainerElementComponent.tsx     |   3 +-
 .../builder/FormElementEditModeWrapper.tsx    |  26 ++-
 .../sidePanel/builder/use-builder-dnd.ts      | 182 ++++++++++++++++++
 .../src/features/nodes/store/workflowSlice.ts |  73 +++----
 .../web/src/features/nodes/types/workflow.ts  |  96 ++++-----
 6 files changed, 288 insertions(+), 96 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts

diff --git a/invokeai/frontend/web/src/features/dnd/DndListDropIndicator.tsx b/invokeai/frontend/web/src/features/dnd/DndListDropIndicator.tsx
index 3a7152c0f73..5abb58e916e 100644
--- a/invokeai/frontend/web/src/features/dnd/DndListDropIndicator.tsx
+++ b/invokeai/frontend/web/src/features/dnd/DndListDropIndicator.tsx
@@ -104,7 +104,7 @@ function DndDropIndicatorInternal({ edge, gap = '0px' }: DropIndicatorProps) {
   );
 }
 
-export const DndListDropIndicator = ({ dndState }: { dndState: DndListTargetState }) => {
+export const DndListDropIndicator = ({ dndState, gap }: { dndState: DndListTargetState; gap?: string }) => {
   if (dndState.type !== 'is-dragging-over') {
     return null;
   }
@@ -117,7 +117,7 @@ export const DndListDropIndicator = ({ dndState }: { dndState: DndListTargetStat
     <DndDropIndicatorInternal
       edge={dndState.closestEdge}
       // This is the gap between items in the list, used to calculate the position of the drop indicator
-      gap="var(--invoke-space-2)"
+      gap={gap || 'var(--invoke-space-2)'}
     />
   );
 };
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
index be5d766ac6e..3790d14a3d7 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
@@ -6,6 +6,7 @@ import { FormElementEditModeWrapper } from 'features/nodes/components/sidePanel/
 import { HeadingElementComponent } from 'features/nodes/components/sidePanel/builder/HeadingElementComponent';
 import { NodeFieldElementComponent } from 'features/nodes/components/sidePanel/builder/NodeFieldElementComponent';
 import { TextElementComponent } from 'features/nodes/components/sidePanel/builder/TextElementComponent';
+import { useMonitorForFormElementDnd } from 'features/nodes/components/sidePanel/builder/use-builder-dnd';
 import { formElementAdded, selectWorkflowFormMode, useElement } from 'features/nodes/store/workflowSlice';
 import type { ContainerElement } from 'features/nodes/types/workflow';
 import {
@@ -71,9 +72,9 @@ ContainerElementComponentViewMode.displayName = 'ContainerElementComponentViewMo
 
 export const ContainerElementComponentEditMode = memo(({ el }: { el: ContainerElement }) => {
   const depth = useContext(DepthContext);
-
   const { id, data } = el;
   const { children, direction } = data;
+  useMonitorForFormElementDnd(id, children);
 
   return (
     <FormElementEditModeWrapper element={el}>
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
index dee267ad46f..1350df4cf79 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
@@ -1,11 +1,14 @@
 import { Flex, type FlexProps, IconButton, Spacer, Text } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
+import { DndListDropIndicator } from 'features/dnd/DndListDropIndicator';
+import type { DndListTargetState } from 'features/dnd/types';
 import { DepthContext } from 'features/nodes/components/sidePanel/builder/contexts';
+import { useDraggableFormElement } from 'features/nodes/components/sidePanel/builder/use-builder-dnd';
 import { formElementRemoved } from 'features/nodes/store/workflowSlice';
 import { type FormElement, isContainerElement } from 'features/nodes/types/workflow';
 import { startCase } from 'lodash-es';
-import { memo, useCallback, useContext } from 'react';
+import { memo, useCallback, useContext, useRef } from 'react';
 import { PiXBold } from 'react-icons/pi';
 
 export const EDIT_MODE_WRAPPER_CLASS_NAME = getPrefixedId('edit-mode-wrapper', '-');
@@ -30,8 +33,24 @@ const getHeaderLabel = (el: FormElement) => {
   return startCase(el.type);
 };
 
+const getBgColor = (dndListState: DndListTargetState) => {
+  switch (dndListState.type) {
+    case 'idle':
+      return undefined;
+    case 'is-dragging':
+      return 'red';
+    case 'is-dragging-over':
+      return 'blue';
+    case 'preview':
+      return 'green';
+  }
+};
+
 export const FormElementEditModeWrapper = memo(
   ({ element, children, ...rest }: { element: FormElement } & FlexProps) => {
+    const draggableRef = useRef<HTMLDivElement>(null);
+    const dragHandleRef = useRef<HTMLDivElement>(null);
+    const [dndListState] = useDraggableFormElement(element.id, draggableRef, dragHandleRef);
     const depth = useContext(DepthContext);
     const dispatch = useAppDispatch();
     const removeElement = useCallback(() => {
@@ -40,6 +59,8 @@ export const FormElementEditModeWrapper = memo(
 
     return (
       <Flex
+        ref={draggableRef}
+        position="relative"
         className={EDIT_MODE_WRAPPER_CLASS_NAME}
         flexDir="column"
         borderWidth={1}
@@ -49,9 +70,11 @@ export const FormElementEditModeWrapper = memo(
         justifyContent="flex-start"
         w="full"
         h="full"
+        bg={getBgColor(dndListState)}
         {...rest}
       >
         <Flex
+          ref={dragHandleRef}
           w="full"
           ps={2}
           h={8}
@@ -79,6 +102,7 @@ export const FormElementEditModeWrapper = memo(
         <Flex w="full" p={4} alignItems="center" gap={4}>
           {children}
         </Flex>
+        <DndListDropIndicator dndState={dndListState} gap="var(--invoke-space-4)" />
       </Flex>
     );
   }
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts
new file mode 100644
index 00000000000..2582170eb6a
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts
@@ -0,0 +1,182 @@
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import {
+  draggable,
+  dropTargetForElements,
+  monitorForElements,
+} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
+import { getStore } from 'app/store/nanostores/store';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
+import type { DndListTargetState } from 'features/dnd/types';
+import { idle } from 'features/dnd/types';
+import { firefoxDndFix, triggerPostMoveFlash } from 'features/dnd/util';
+import { formElementContainerDataChanged } from 'features/nodes/store/workflowSlice';
+import type { ElementId, FormElement } from 'features/nodes/types/workflow';
+import { isContainerElement } from 'features/nodes/types/workflow';
+import type { RefObject } from 'react';
+import { useEffect, useState } from 'react';
+import { flushSync } from 'react-dom';
+import { assert } from 'tsafe';
+
+export const useMonitorForFormElementDnd = (containerId: string, children: ElementId[]) => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor({ source }) {
+        return (source.data as FormElement).id === containerId;
+      },
+      onDrop({ location, source }) {
+        const target = location.current.dropTargets[0];
+        if (!target) {
+          return;
+        }
+
+        const sourceData = source.data as FormElement;
+        const targetData = target.data as FormElement;
+
+        const sourceElementId = sourceData.id;
+        const targetElementId = targetData.id;
+
+        const childrenClone = [...children];
+
+        const indexOfSource = childrenClone.findIndex((elementId) => elementId === sourceElementId);
+        const indexOfTarget = childrenClone.findIndex((elementId) => elementId === targetElementId);
+
+        if (indexOfTarget < 0 || indexOfSource < 0) {
+          return;
+        }
+
+        // Don't move if the source and target are the same index, meaning same position in the list
+        if (indexOfSource === indexOfTarget) {
+          return;
+        }
+
+        const closestEdgeOfTarget = extractClosestEdge(targetData);
+
+        // It's possible that the indices are different, but refer to the same position. For example, if the source is
+        // at 2 and the target is at 3, but the target edge is 'top', then the entity is already in the correct position.
+        // We should bail if this is the case.
+        // let edgeIndexDelta = 0;
+
+        // if (closestEdgeOfTarget === 'bottom') {
+        //   edgeIndexDelta = 1;
+        // } else if (closestEdgeOfTarget === 'top') {
+        //   edgeIndexDelta = -1;
+        // }
+
+        // If the source is already in the correct position, we don't need to move it.
+        // if (indexOfSource === indexOfTarget + edgeIndexDelta) {
+        //   return;
+        // }
+
+        const reorderedChildren = reorderWithEdge({
+          list: childrenClone,
+          startIndex: indexOfSource,
+          indexOfTarget,
+          closestEdgeOfTarget,
+          axis: 'vertical',
+        });
+
+        // Using `flushSync` so we can query the DOM straight after this line
+        flushSync(() => {
+          dispatch(formElementContainerDataChanged({ id: containerId, changes: { children: reorderedChildren } }));
+        });
+
+        // Flash the element that was moved
+        const element = document.querySelector(`#${sourceElementId}`);
+        if (element instanceof HTMLElement) {
+          triggerPostMoveFlash(element, colorTokenToCssVar('base.700'));
+        }
+      },
+    });
+  }, [children, containerId, dispatch]);
+};
+
+const getElement = (id: ElementId) => {
+  const el = getStore().getState().workflow.form?.elements[id];
+  assert(el !== undefined);
+  return el;
+};
+
+export const useDraggableFormElement = (
+  elementId: ElementId,
+  draggableRef: RefObject<HTMLElement>,
+  dragHandleRef: RefObject<HTMLElement>
+) => {
+  const [dndListState, setListDndState] = useState<DndListTargetState>(idle);
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    const draggableElement = draggableRef.current;
+    const dragHandleElement = dragHandleRef.current;
+    if (!draggableElement || !dragHandleElement) {
+      return;
+    }
+    return combine(
+      firefoxDndFix(draggableElement),
+      draggable({
+        element: draggableElement,
+        dragHandle: dragHandleElement,
+        getInitialData() {
+          return getElement(elementId);
+        },
+        // getInitialData() {
+        //   return singleWorkflowFieldDndSource.getData({ fieldIdentifier });
+        // },
+        onDragStart() {
+          setListDndState({ type: 'is-dragging' });
+          setIsDragging(true);
+        },
+        onDrop() {
+          setListDndState(idle);
+          setIsDragging(false);
+        },
+      }),
+      dropTargetForElements({
+        element: draggableElement,
+        canDrop() {
+          return isContainerElement(getElement(elementId));
+        },
+        getData({ input }) {
+          const data = { elementId };
+          return attachClosestEdge(data, {
+            element: draggableElement,
+            input,
+            allowedEdges: ['top', 'bottom', 'left', 'right'],
+          });
+        },
+        getIsSticky() {
+          return true;
+        },
+        onDragEnter({ self }) {
+          const closestEdge = extractClosestEdge(self.data);
+          setListDndState({ type: 'is-dragging-over', closestEdge });
+          console.log('onDragEnter', self.data);
+        },
+        onDrag({ self }) {
+          const closestEdge = extractClosestEdge(self.data);
+
+          // Only need to update react state if nothing has changed.
+          // Prevents re-rendering.
+          setListDndState((current) => {
+            if (current.type === 'is-dragging-over' && current.closestEdge === closestEdge) {
+              return current;
+            }
+            return { type: 'is-dragging-over', closestEdge };
+          });
+        },
+        onDragLeave() {
+          setListDndState(idle);
+        },
+        onDrop() {
+          setListDndState(idle);
+        },
+      })
+    );
+  }, [dragHandleRef, draggableRef, elementId]);
+
+  return [dndListState, isDragging] as const;
+};
diff --git a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
index c9f5db25729..367d35c2a51 100644
--- a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
@@ -152,7 +152,19 @@ export const workflowSlice = createSlice({
       }
       const { elements } = state.form;
       const { element, containerId, index } = action.payload;
-      addElement(elements, element, containerId, index);
+
+      const container = elements[containerId];
+      if (!container || !isContainerElement(container)) {
+        return;
+      }
+
+      elements[element.id] = element;
+
+      if (index === undefined) {
+        container.data.children.push(element.id);
+      } else {
+        container.data.children.splice(index, 0, element.id);
+      }
     },
     formElementRemoved: (state, action: PayloadAction<{ id: string }>) => {
       if (!state.form) {
@@ -161,16 +173,23 @@ export const workflowSlice = createSlice({
       }
       const { elements, rootElementId } = state.form;
       const { id } = action.payload;
-      removeElement(elements, id, rootElementId);
+      recursivelyRemoveElement(elements, id, rootElementId);
     },
-    formElementMoved: (state, action: PayloadAction<{ id: string; containerId: string; index: number }>) => {
+    formElementContainerDataChanged: (
+      state,
+      action: PayloadAction<{ id: string; changes: Partial<ContainerElement['data']> }>
+    ) => {
       if (!state.form) {
-        // Cannot move an element if the form has not been created
+        // Cannot change a container if the form has not been created
         return;
       }
       const { elements } = state.form;
-      const { id, containerId, index } = action.payload;
-      moveElement(elements, id, containerId, index);
+      const { id, changes } = action.payload;
+      const container = elements[id];
+      if (!container || !isContainerElement(container)) {
+        return;
+      }
+      container.data = { ...container.data, ...changes };
     },
     formReset: (state) => {
       state.form = undefined;
@@ -295,6 +314,7 @@ export const {
   formCreated,
   formElementAdded,
   formElementRemoved,
+  formElementContainerDataChanged,
   formReset,
   formModeToggled,
 } = workflowSlice.actions;
@@ -343,25 +363,7 @@ export const useElement = (id: string): FormElement | undefined => {
   return element;
 };
 
-const addElement = (
-  elements: NonNullable<WorkflowV3['form']>['elements'],
-  element: FormElement,
-  containerId: string,
-  index?: number
-) => {
-  const container = elements[containerId];
-  if (!container || !isContainerElement(container)) {
-    return;
-  }
-  elements[element.id] = element;
-  if (index === undefined) {
-    container.data.children.push(element.id);
-  } else {
-    container.data.children.splice(index, 0, element.id);
-  }
-};
-
-const removeElement = (
+const recursivelyRemoveElement = (
   elements: NonNullable<WorkflowV3['form']>['elements'],
   id: string,
   containerId: string
@@ -380,29 +382,10 @@ const removeElement = (
   }
 
   for (const childId of container.data.children) {
-    if (removeElement(elements, id, childId)) {
+    if (recursivelyRemoveElement(elements, id, childId)) {
       return true;
     }
   }
 
   return false;
 };
-
-const moveElement = (
-  elements: NonNullable<WorkflowV3['form']>['elements'],
-  id: string,
-  containerId: string,
-  index: number
-) => {
-  const element = elements[id];
-  if (!element) {
-    return;
-  }
-  const container = elements[containerId];
-  if (!container || !isContainerElement(container)) {
-    return;
-  }
-
-  removeElement(elements, id, containerId);
-  addElement(elements, element, containerId, index);
-};
diff --git a/invokeai/frontend/web/src/features/nodes/types/workflow.ts b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
index a5aec990cac..5edabaf2dd5 100644
--- a/invokeai/frontend/web/src/features/nodes/types/workflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
@@ -91,7 +91,7 @@ export const addElement = (element: FormElement) => {
 };
 
 const zElementId = z.string().trim().min(1);
-type ElementId = z.infer<typeof zElementId>;
+export type ElementId = z.infer<typeof zElementId>;
 
 const zElementBase = z.object({
   id: zElementId,
@@ -112,7 +112,7 @@ const nodeField = (
   fieldName: NodeFieldElement['data']['fieldIdentifier']['fieldName']
 ): NodeFieldElement => {
   const element: NodeFieldElement = {
-    id: getPrefixedId(NODE_FIELD_TYPE),
+    id: getPrefixedId(NODE_FIELD_TYPE, '-'),
     type: NODE_FIELD_TYPE,
     data: {
       fieldIdentifier: { nodeId, fieldName },
@@ -142,7 +142,7 @@ const heading = (
   level: HeadingElement['data']['level']
 ): HeadingElement => {
   const element: HeadingElement = {
-    id: getPrefixedId(HEADING_TYPE),
+    id: getPrefixedId(HEADING_TYPE, '-'),
     type: HEADING_TYPE,
     data: {
       content,
@@ -170,7 +170,7 @@ export type TextElement = z.infer<typeof zTextElement>;
 export const isTextElement = (el: FormElement): el is TextElement => el.type === TEXT_TYPE;
 const text = (content: TextElement['data']['content'], fontSize: TextElement['data']['fontSize']): TextElement => {
   const element: TextElement = {
-    id: getPrefixedId(TEXT_TYPE),
+    id: getPrefixedId(TEXT_TYPE, '-'),
     type: TEXT_TYPE,
     data: {
       content,
@@ -195,7 +195,7 @@ export type DividerElement = z.infer<typeof zDividerElement>;
 export const isDividerElement = (el: FormElement): el is DividerElement => el.type === DIVIDER_TYPE;
 const divider = (): DividerElement => {
   const element: DividerElement = {
-    id: getPrefixedId(DIVIDER_TYPE),
+    id: getPrefixedId(DIVIDER_TYPE, '-'),
     type: DIVIDER_TYPE,
   };
   addElement(element);
@@ -231,7 +231,7 @@ export const container = (
   children: ContainerElement['data']['children']
 ): ContainerElement => {
   const element: ContainerElement = {
-    id: getPrefixedId(CONTAINER_TYPE),
+    id: getPrefixedId(CONTAINER_TYPE, '-'),
     type: CONTAINER_TYPE,
     data: {
       direction,
@@ -257,46 +257,48 @@ export const rootElementId: string = _container('column', [
   _heading('First Section', 2).id,
   _text('The first section includes fields relevant to the first section. This note describes that fact.', 'sm').id,
   _divider().id,
-  _container('row', [
-    _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
-    _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
-    _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
-  ]).id,
-  _nodeField('9c058600-8d73-4702-912b-0ccf37403bfd', 'value').id,
-  _nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value').id,
-  _nodeField('4e16cbf6-457c-46fb-9ab7-9cb262fa1e03', 'value').id,
-  _nodeField('39cb5272-a9d7-4da9-9c35-32e02b46bb34', 'color').id,
-  _container('row', [
-    _container('column', [
-      _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-      _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-    ]).id,
-    _container('column', [
-      _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-      _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-      _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-      _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-    ]).id,
-    _container('column', [
-      _container('row', [
-        _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-        _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-      ]).id,
-      _container('row', [
-        _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-        _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-      ]).id,
-    ]).id,
-  ]).id,
+  _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+  _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
   _nodeField('14744f68-9000-4694-b4d6-cbe83ee231ee', 'model').id,
-  _divider().id,
-  _text('These are some text that are definitely super helpful.', 'sm').id,
-  _divider().id,
-  _container('row', [
-    _container('column', [
-      _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
-      _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
-    ]).id,
-    _container('column', [_nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value').id]).id,
-  ]).id,
 ]).id;
+
+// export const rootElementId: string = _container('column', [
+//   _heading('My Cool Workflow', 1).id,
+//   _text('This is a description of what my workflow does. It does things.', 'md').id,
+//   _divider().id,
+//   _heading('First Section', 2).id,
+//   _text('The first section includes fields relevant to the first section. This note describes that fact.', 'sm').id,
+//   _divider().id,
+//   _container('row', [
+//     _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+//     _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+//     _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+//   ]).id,
+//   _nodeField('9c058600-8d73-4702-912b-0ccf37403bfd', 'value').id,
+//   _nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value').id,
+//   _nodeField('4e16cbf6-457c-46fb-9ab7-9cb262fa1e03', 'value').id,
+//   _nodeField('39cb5272-a9d7-4da9-9c35-32e02b46bb34', 'color').id,
+//   _container('row', [
+//     _container('column', [
+//       _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+//       _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+//     ]).id,
+//     _container('column', [
+//       _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+//       _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+//       _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+//       _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+//     ]).id,
+//   ]).id,
+//   _nodeField('14744f68-9000-4694-b4d6-cbe83ee231ee', 'model').id,
+//   _divider().id,
+//   _text('These are some text that are definitely super helpful.', 'sm').id,
+//   _divider().id,
+//   _container('row', [
+//     _container('column', [
+//       _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+//       _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+//     ]).id,
+//     _container('column', [_nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value').id]).id,
+//   ]).id,
+// ]).id;

From 5b6c035c6353c90a53fc4ffffe67678f8db5a37f Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 23 Jan 2025 17:42:40 +1100
Subject: [PATCH 33/58] feat(ui): dim form element while dragging

---
 .../components/sidePanel/builder/FormElementEditModeWrapper.tsx  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
index 1350df4cf79..7f1b243612c 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
@@ -71,6 +71,7 @@ export const FormElementEditModeWrapper = memo(
         w="full"
         h="full"
         bg={getBgColor(dndListState)}
+        opacity={dndListState.type === 'is-dragging' ? 0.3 : 1}
         {...rest}
       >
         <Flex

From 71407cf81756bd53555f07b1402e3fbcc06f56cf Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 24 Jan 2025 14:57:07 +1100
Subject: [PATCH 34/58] feat(ui): dnd mostly working (WIP)

---
 .../src/features/dnd/DndListDropIndicator.tsx |   3 +-
 .../builder/ContainerElementComponent.tsx     |  30 +--
 .../builder/DividerElementComponent.tsx       |   8 +-
 .../builder/DndListDropIndicator.tsx          | 122 +++++++++
 .../builder/FormElementEditModeWrapper.tsx    |  31 ++-
 .../builder/TextElementComponent.tsx          |   8 +-
 .../sidePanel/builder/WorkflowBuilder.tsx     |   5 +-
 .../builder/center-or-closest-edge.ts         |  71 ++++++
 .../components/sidePanel/builder/contexts.ts  |   5 -
 .../components/sidePanel/builder/contexts.tsx |  35 +++
 .../sidePanel/builder/use-builder-dnd.ts      | 238 ++++++++++++------
 .../src/features/nodes/store/workflowSlice.ts |  87 +++++--
 .../web/src/features/nodes/types/workflow.ts  | 132 ++++++----
 13 files changed, 585 insertions(+), 190 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DndListDropIndicator.tsx
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/center-or-closest-edge.ts
 delete mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/contexts.ts
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/contexts.tsx

diff --git a/invokeai/frontend/web/src/features/dnd/DndListDropIndicator.tsx b/invokeai/frontend/web/src/features/dnd/DndListDropIndicator.tsx
index 5abb58e916e..600f0d51746 100644
--- a/invokeai/frontend/web/src/features/dnd/DndListDropIndicator.tsx
+++ b/invokeai/frontend/web/src/features/dnd/DndListDropIndicator.tsx
@@ -9,7 +9,8 @@ import type { DndListTargetState } from 'features/dnd/types';
  */
 const line = {
   thickness: 2,
-  backgroundColor: 'base.500',
+  backgroundColor: 'red',
+  // backgroundColor: 'base.500',
 };
 
 type DropIndicatorProps = {
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
index 3790d14a3d7..1f339344e60 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
@@ -1,12 +1,15 @@
 import { Flex, IconButton, type SystemStyleObject } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { ContainerContext, DepthContext } from 'features/nodes/components/sidePanel/builder/contexts';
+import {
+  ContainerContextProvider,
+  DepthContextProvider,
+  useDepthContext,
+} from 'features/nodes/components/sidePanel/builder/contexts';
 import { DividerElementComponent } from 'features/nodes/components/sidePanel/builder/DividerElementComponent';
 import { FormElementEditModeWrapper } from 'features/nodes/components/sidePanel/builder/FormElementEditModeWrapper';
 import { HeadingElementComponent } from 'features/nodes/components/sidePanel/builder/HeadingElementComponent';
 import { NodeFieldElementComponent } from 'features/nodes/components/sidePanel/builder/NodeFieldElementComponent';
 import { TextElementComponent } from 'features/nodes/components/sidePanel/builder/TextElementComponent';
-import { useMonitorForFormElementDnd } from 'features/nodes/components/sidePanel/builder/use-builder-dnd';
 import { formElementAdded, selectWorkflowFormMode, useElement } from 'features/nodes/store/workflowSlice';
 import type { ContainerElement } from 'features/nodes/types/workflow';
 import {
@@ -18,7 +21,7 @@ import {
   isNodeFieldElement,
   isTextElement,
 } from 'features/nodes/types/workflow';
-import { memo, useCallback, useContext } from 'react';
+import { memo, useCallback } from 'react';
 import { PiPlusBold } from 'react-icons/pi';
 import type { Equals } from 'tsafe';
 import { assert } from 'tsafe';
@@ -52,34 +55,33 @@ export const ContainerElementComponent = memo(({ id }: { id: string }) => {
 ContainerElementComponent.displayName = 'ContainerElementComponent';
 
 export const ContainerElementComponentViewMode = memo(({ el }: { el: ContainerElement }) => {
-  const depth = useContext(DepthContext);
+  const depth = useDepthContext();
   const { id, data } = el;
   const { children, direction } = data;
 
   return (
-    <DepthContext.Provider value={depth + 1}>
-      <ContainerContext.Provider value={data}>
+    <DepthContextProvider depth={depth + 1}>
+      <ContainerContextProvider id={id} direction={direction}>
         <Flex id={id} className={CONTAINER_CLASS_NAME} sx={sx} data-container-direction={direction}>
           {children.map((childId) => (
             <FormElementComponent key={childId} id={childId} />
           ))}
         </Flex>
-      </ContainerContext.Provider>{' '}
-    </DepthContext.Provider>
+      </ContainerContextProvider>
+    </DepthContextProvider>
   );
 });
 ContainerElementComponentViewMode.displayName = 'ContainerElementComponentViewMode';
 
 export const ContainerElementComponentEditMode = memo(({ el }: { el: ContainerElement }) => {
-  const depth = useContext(DepthContext);
+  const depth = useDepthContext();
   const { id, data } = el;
   const { children, direction } = data;
-  useMonitorForFormElementDnd(id, children);
 
   return (
     <FormElementEditModeWrapper element={el}>
-      <DepthContext.Provider value={depth + 1}>
-        <ContainerContext.Provider value={data}>
+      <DepthContextProvider depth={depth + 1}>
+        <ContainerContextProvider id={id} direction={direction}>
           <Flex id={id} className={CONTAINER_CLASS_NAME} sx={sx} data-container-direction={direction}>
             {children.map((childId) => (
               <FormElementComponent key={childId} id={childId} />
@@ -87,8 +89,8 @@ export const ContainerElementComponentEditMode = memo(({ el }: { el: ContainerEl
             {direction === 'row' && children.length < 3 && depth < 2 && <AddColumnButton containerId={id} />}
             {direction === 'column' && depth < 1 && <AddRowButton containerId={id} />}
           </Flex>
-        </ContainerContext.Provider>
-      </DepthContext.Provider>
+        </ContainerContextProvider>
+      </DepthContextProvider>
     </FormElementEditModeWrapper>
   );
 });
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
index 29b9e8be3c2..45276c80653 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
@@ -1,12 +1,12 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { ContainerContext } from 'features/nodes/components/sidePanel/builder/contexts';
+import { useContainerContext } from 'features/nodes/components/sidePanel/builder/contexts';
 import { FormElementEditModeWrapper } from 'features/nodes/components/sidePanel/builder/FormElementEditModeWrapper';
 import { selectWorkflowFormMode, useElement } from 'features/nodes/store/workflowSlice';
 import type { DividerElement } from 'features/nodes/types/workflow';
 import { DIVIDER_CLASS_NAME, isDividerElement } from 'features/nodes/types/workflow';
-import { memo, useContext } from 'react';
+import { memo } from 'react';
 
 const sx: SystemStyleObject = {
   bg: 'base.700',
@@ -40,7 +40,7 @@ export const DividerElementComponent = memo(({ id }: { id: string }) => {
 DividerElementComponent.displayName = 'DividerElementComponent';
 
 export const DividerElementComponentViewMode = memo(({ el }: { el: DividerElement }) => {
-  const container = useContext(ContainerContext);
+  const container = useContainerContext();
   const { id } = el;
 
   return (
@@ -56,7 +56,7 @@ export const DividerElementComponentViewMode = memo(({ el }: { el: DividerElemen
 DividerElementComponentViewMode.displayName = 'DividerElementComponentViewMode';
 
 export const DividerElementComponentEditMode = memo(({ el }: { el: DividerElement }) => {
-  const container = useContext(ContainerContext);
+  const container = useContainerContext();
   const { id } = el;
 
   return (
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DndListDropIndicator.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DndListDropIndicator.tsx
new file mode 100644
index 00000000000..e1a89d5dc9c
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DndListDropIndicator.tsx
@@ -0,0 +1,122 @@
+// Adapted from https://github.com/alexreardon/pdnd-react-tailwind/blob/main/src/drop-indicator.tsx
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Box } from '@invoke-ai/ui-library';
+import type { DndListTargetState } from 'features/nodes/components/sidePanel/builder/use-builder-dnd';
+
+/**
+ * Design decisions for the drop indicator's main line
+ */
+const line = {
+  thickness: 2,
+  backgroundColor: 'base.500',
+};
+
+type DropIndicatorProps = {
+  /**
+   * The `edge` to draw a drop indicator on.
+   *
+   * `edge` is required as for the best possible performance
+   * outcome you should only render this component when it needs to do something
+   *
+   * @example {closestEdge && <DropIndicator edge={closestEdge} />}
+   */
+  edge: Edge;
+  /**
+   * `gap` allows you to position the drop indicator further away from the drop target.
+   * `gap` should be the distance between your drop targets
+   * a drop indicator will be rendered halfway between the drop targets
+   * (the drop indicator will be offset by half of the `gap`)
+   *
+   * `gap` should be a valid CSS length.
+   * @example "8px"
+   * @example "var(--gap)"
+   */
+  gap?: string;
+};
+
+const lineStyles: SystemStyleObject = {
+  display: 'block',
+  position: 'absolute',
+  zIndex: 1,
+  borderRadius: 'full',
+  // Blocking pointer events to prevent the line from triggering drag events
+  // Dragging over the line should count as dragging over the element behind it
+  pointerEvents: 'none',
+  background: line.backgroundColor,
+};
+
+type Orientation = 'horizontal' | 'vertical';
+
+const orientationStyles: Record<Orientation, SystemStyleObject> = {
+  horizontal: {
+    height: `${line.thickness}px`,
+    left: 2,
+    right: 2,
+  },
+  vertical: {
+    width: `${line.thickness}px`,
+    top: 2,
+    bottom: 2,
+  },
+};
+
+const edgeToOrientationMap: Record<Edge, Orientation> = {
+  top: 'horizontal',
+  bottom: 'horizontal',
+  left: 'vertical',
+  right: 'vertical',
+};
+
+const edgeStyles: Record<Edge, SystemStyleObject> = {
+  top: {
+    top: 'var(--local-line-offset)',
+  },
+  right: {
+    right: 'var(--local-line-offset)',
+  },
+  bottom: {
+    bottom: 'var(--local-line-offset)',
+  },
+  left: {
+    left: 'var(--local-line-offset)',
+  },
+};
+
+/**
+ * __Drop indicator__
+ *
+ * A drop indicator is used to communicate the intended resting place of the draggable item. The orientation of the drop indicator should always match the direction of the content flow.
+ */
+function DndDropIndicatorInternal({ edge, gap = '0px' }: DropIndicatorProps) {
+  /**
+   * To clearly communicate the resting place of a draggable item during a drag operation,
+   * the drop indicator should be positioned half way between draggable items.
+   */
+  const lineOffset = `calc(-0.5 * (${gap} + ${line.thickness}px))`;
+  const orientation = edgeToOrientationMap[edge];
+
+  return (
+    <Box
+      sx={{ ...lineStyles, ...orientationStyles[orientation], ...edgeStyles[edge], '--local-line-offset': lineOffset }}
+    />
+  );
+}
+
+export const DndListDropIndicator = ({ dndState, gap }: { dndState: DndListTargetState; gap?: string }) => {
+  if (dndState.type !== 'is-dragging-over') {
+    return null;
+  }
+
+  if (!dndState.closestCenterOrEdge || dndState.closestCenterOrEdge === 'center') {
+    return null;
+  }
+
+  return (
+    <DndDropIndicatorInternal
+      edge={dndState.closestCenterOrEdge}
+      // This is the gap between items in the list, used to calculate the position of the drop indicator
+      gap={gap || 'var(--invoke-space-2)'}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
index 7f1b243612c..c7ae517d608 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
@@ -1,18 +1,20 @@
 import { Flex, type FlexProps, IconButton, Spacer, Text } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
-import { DndListDropIndicator } from 'features/dnd/DndListDropIndicator';
-import type { DndListTargetState } from 'features/dnd/types';
-import { DepthContext } from 'features/nodes/components/sidePanel/builder/contexts';
+import { useContainerContext, useDepthContext } from 'features/nodes/components/sidePanel/builder/contexts';
+import { DndListDropIndicator } from 'features/nodes/components/sidePanel/builder/DndListDropIndicator';
+import type { DndListTargetState } from 'features/nodes/components/sidePanel/builder/use-builder-dnd';
 import { useDraggableFormElement } from 'features/nodes/components/sidePanel/builder/use-builder-dnd';
 import { formElementRemoved } from 'features/nodes/store/workflowSlice';
 import { type FormElement, isContainerElement } from 'features/nodes/types/workflow';
 import { startCase } from 'lodash-es';
-import { memo, useCallback, useContext, useRef } from 'react';
+import { memo, useCallback, useRef } from 'react';
 import { PiXBold } from 'react-icons/pi';
 
 export const EDIT_MODE_WRAPPER_CLASS_NAME = getPrefixedId('edit-mode-wrapper', '-');
 
+export const getEditModeWrapperId = (id: string) => `${id}-edit-mode-wrapper`;
+
 const getHeaderBgColor = (depth: number) => {
   if (depth <= 1) {
     return 'base.800';
@@ -40,6 +42,9 @@ const getBgColor = (dndListState: DndListTargetState) => {
     case 'is-dragging':
       return 'red';
     case 'is-dragging-over':
+      if (dndListState.closestCenterOrEdge === 'center') {
+        return 'magenta';
+      }
       return 'blue';
     case 'preview':
       return 'green';
@@ -50,22 +55,27 @@ export const FormElementEditModeWrapper = memo(
   ({ element, children, ...rest }: { element: FormElement } & FlexProps) => {
     const draggableRef = useRef<HTMLDivElement>(null);
     const dragHandleRef = useRef<HTMLDivElement>(null);
-    const [dndListState] = useDraggableFormElement(element.id, draggableRef, dragHandleRef);
-    const depth = useContext(DepthContext);
+    const container = useContainerContext();
+    const [dndListState] = useDraggableFormElement(element.id, container?.id ?? null, draggableRef, dragHandleRef);
+    const depth = useDepthContext();
     const dispatch = useAppDispatch();
     const removeElement = useCallback(() => {
       dispatch(formElementRemoved({ id: element.id }));
     }, [dispatch, element.id]);
 
+    if (dndListState.type !== 'idle') {
+      // console.log(element.id, 'dndListState', dndListState);
+    }
+
     return (
       <Flex
+        id={getEditModeWrapperId(element.id)}
         ref={draggableRef}
         position="relative"
         className={EDIT_MODE_WRAPPER_CLASS_NAME}
         flexDir="column"
-        borderWidth={1}
+        boxShadow="0 0 0 1px var(--invoke-colors-base-750)"
         borderRadius="base"
-        borderColor="base.750"
         alignItems="center"
         justifyContent="flex-start"
         w="full"
@@ -81,13 +91,14 @@ export const FormElementEditModeWrapper = memo(
           h={8}
           bg={getHeaderBgColor(depth)}
           borderTopRadius="inherit"
-          borderBottomWidth={1}
+          // borderBottomWidth={1}
           borderColor="inherit"
           alignItems="center"
           cursor="grab"
         >
           <Text fontWeight="semibold" noOfLines={1} wordBreak="break-all">
-            {getHeaderLabel(element)}
+            {element.id}
+            {/* {getHeaderLabel(element)} */}
           </Text>
           <Spacer />
           <IconButton
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
index 90c4bdf6127..3b5044b2337 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
@@ -40,11 +40,11 @@ export const TextElementComponentEditMode = memo(({ el }: { el: TextElement }) =
   const { content, fontSize } = data;
 
   return (
-    <Flex id={id} className={TEXT_CLASS_NAME}>
-      <FormElementEditModeWrapper element={el}>
+    <FormElementEditModeWrapper element={el}>
+      <Flex id={id} className={TEXT_CLASS_NAME}>
         <Text fontSize={fontSize}>{content}</Text>
-      </FormElementEditModeWrapper>
-    </Flex>
+      </Flex>
+    </FormElementEditModeWrapper>
   );
 });
 TextElementComponentEditMode.displayName = 'TextElementComponentEditMode';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
index 76c5986382e..d379af9ff90 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
@@ -2,6 +2,7 @@ import { Button, Flex } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { FormElementComponent } from 'features/nodes/components/sidePanel/builder/ContainerElementComponent';
+import { useMonitorForFormElementDnd } from 'features/nodes/components/sidePanel/builder/use-builder-dnd';
 import { formLoaded, formModeToggled, selectWorkflowFormMode } from 'features/nodes/store/workflowSlice';
 import { elements, rootElementId } from 'features/nodes/types/workflow';
 import { memo, useCallback, useEffect } from 'react';
@@ -9,14 +10,16 @@ import { memo, useCallback, useEffect } from 'react';
 export const WorkflowBuilder = memo(() => {
   const dispatch = useAppDispatch();
   const mode = useAppSelector(selectWorkflowFormMode);
+  useMonitorForFormElementDnd();
 
   useEffect(() => {
+    // dispatch(formReset());
     dispatch(formLoaded({ elements, rootElementId }));
   }, [dispatch]);
   return (
     <ScrollableContent>
       <Flex w="full" justifyContent="center">
-        <Flex flexDir="column" w={mode === 'view' ? '768px' : 'min-content'} minW='768px'>
+        <Flex flexDir="column" w={mode === 'view' ? '512px' : 'min-content'} minW="512px">
           <ToggleModeButton />
           {rootElementId && <FormElementComponent id={rootElementId} />}
         </Flex>
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/center-or-closest-edge.ts b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/center-or-closest-edge.ts
new file mode 100644
index 00000000000..cfb719a9d50
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/center-or-closest-edge.ts
@@ -0,0 +1,71 @@
+// Adapted from https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/src/closest-edge.ts
+// This adaptation adds 'center' as a possible target
+import type { Input, Position } from '@atlaskit/pragmatic-drag-and-drop/types';
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/dist/types/types';
+
+export type CenterOrEdge = 'center' | Edge;
+
+// re-exporting type to make it easy to use
+
+const getDistanceToCenterOrEdge: {
+  [TKey in CenterOrEdge]: (rect: DOMRect, client: Position) => number;
+} = {
+  top: (rect, client) => Math.abs(client.y - rect.top),
+  right: (rect, client) => Math.abs(rect.right - client.x),
+  bottom: (rect, client) => Math.abs(rect.bottom - client.y),
+  left: (rect, client) => Math.abs(client.x - rect.left),
+  center: (rect, client) => {
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    return Math.sqrt((client.x - centerX) ** 2 + (client.y - centerY) ** 2);
+  },
+};
+
+// using a symbol so we can guarantee a key with a unique value
+const uniqueKey = Symbol('centerWithClosestEdge');
+
+/**
+ * Adds a unique `Symbol` to the `userData` object. Use with `extractClosestEdge()` for type safe lookups.
+ */
+export function attachClosestCenterOrEdge(
+  userData: Record<string | symbol, unknown>,
+  {
+    element,
+    input,
+    allowedCenterOrEdge,
+  }: {
+    element: Element;
+    input: Input;
+    allowedCenterOrEdge: CenterOrEdge[];
+  }
+): Record<string | symbol, unknown> {
+  const client: Position = {
+    x: input.clientX,
+    y: input.clientY,
+  };
+  // I tried caching the result of `getBoundingClientRect()` for a single
+  // frame in order to improve performance.
+  // However, on measurement I saw no improvement. So no longer caching
+  const rect: DOMRect = element.getBoundingClientRect();
+  const entries = allowedCenterOrEdge.map((edge) => {
+    return {
+      edge,
+      value: getDistanceToCenterOrEdge[edge](rect, client),
+    };
+  });
+
+  // edge can be `null` when `allowedCenterOrEdge` is []
+  const addClosestCenterOrEdge: CenterOrEdge | null = entries.sort((a, b) => a.value - b.value)[0]?.edge ?? null;
+
+  return {
+    ...userData,
+    [uniqueKey]: addClosestCenterOrEdge,
+  };
+}
+
+/**
+ * Returns the value added by `attachClosestEdge()` to the `userData` object. It will return `null` if there is no value.
+ */
+export function extractClosestCenterOrEdge(userData: Record<string | symbol, unknown>): CenterOrEdge | null {
+  return (userData[uniqueKey] as CenterOrEdge) ?? null;
+}
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/contexts.ts b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/contexts.ts
deleted file mode 100644
index 795bb0db957..00000000000
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/contexts.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { ContainerElement } from 'features/nodes/types/workflow';
-import { createContext } from 'react';
-
-export const ContainerContext = createContext<ContainerElement['data'] | null>(null);
-export const DepthContext = createContext<number>(0);
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/contexts.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/contexts.tsx
new file mode 100644
index 00000000000..2e888dc7cd4
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/contexts.tsx
@@ -0,0 +1,35 @@
+import type { ContainerElement, ElementId } from 'features/nodes/types/workflow';
+import type { PropsWithChildren } from 'react';
+import { createContext, memo, useContext, useMemo } from 'react';
+
+type ContainerContextValue = {
+  id: ElementId;
+  direction: ContainerElement['data']['direction'];
+};
+
+const ContainerContext = createContext<ContainerContextValue | null>(null);
+
+export const ContainerContextProvider = memo(
+  ({ id, direction, children }: PropsWithChildren<ContainerContextValue>) => {
+    const ctxValue = useMemo(() => ({ id, direction }), [id, direction]);
+    return <ContainerContext.Provider value={ctxValue}>{children}</ContainerContext.Provider>;
+  }
+);
+ContainerContextProvider.displayName = 'ContainerContextProvider';
+
+export const useContainerContext = () => {
+  const container = useContext(ContainerContext);
+  return container;
+};
+
+const DepthContext = createContext<number>(0);
+
+export const DepthContextProvider = memo(({ depth, children }: PropsWithChildren<{ depth: number }>) => {
+  return <DepthContext.Provider value={depth}>{children}</DepthContext.Provider>;
+});
+DepthContextProvider.displayName = 'DepthContextProvider';
+
+export const useDepthContext = () => {
+  const depth = useContext(DepthContext);
+  return depth;
+};
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts
index 2582170eb6a..54909ea7fcf 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts
@@ -4,105 +4,173 @@ import {
   dropTargetForElements,
   monitorForElements,
 } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
-import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
 import { getStore } from 'app/store/nanostores/store';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
-import type { DndListTargetState } from 'features/dnd/types';
-import { idle } from 'features/dnd/types';
 import { firefoxDndFix, triggerPostMoveFlash } from 'features/dnd/util';
-import { formElementContainerDataChanged } from 'features/nodes/store/workflowSlice';
-import type { ElementId, FormElement } from 'features/nodes/types/workflow';
+import type { CenterOrEdge } from 'features/nodes/components/sidePanel/builder/center-or-closest-edge';
+import {
+  attachClosestCenterOrEdge,
+  extractClosestCenterOrEdge,
+} from 'features/nodes/components/sidePanel/builder/center-or-closest-edge';
+import { getEditModeWrapperId } from 'features/nodes/components/sidePanel/builder/FormElementEditModeWrapper';
+import { formElementMoved } from 'features/nodes/store/workflowSlice';
+import type { ContainerElement, ElementId, FormElement } from 'features/nodes/types/workflow';
 import { isContainerElement } from 'features/nodes/types/workflow';
 import type { RefObject } from 'react';
 import { useEffect, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { assert } from 'tsafe';
 
-export const useMonitorForFormElementDnd = (containerId: string, children: ElementId[]) => {
+/**
+ * States for a dnd list with containers.
+ */
+export type DndListTargetState =
+  | {
+      type: 'idle';
+    }
+  | {
+      type: 'preview';
+      container: HTMLElement;
+    }
+  | {
+      type: 'is-dragging';
+    }
+  | {
+      type: 'is-dragging-over';
+      closestCenterOrEdge: CenterOrEdge | null;
+    };
+export const idle: DndListTargetState = { type: 'idle' };
+
+type DndData = {
+  element: FormElement;
+  container: ContainerElement | null;
+};
+
+const getElement = <T extends FormElement>(id: ElementId, guard?: (el: FormElement) => el is T): T => {
+  const el = getStore().getState().workflow.form?.elements[id];
+  assert(el);
+  if (guard) {
+    assert(guard(el));
+    return el;
+  } else {
+    return el as T;
+  }
+};
+
+const adjustIndexForDrop = (index: number, edge: Exclude<CenterOrEdge, 'center'>) => {
+  if (edge === 'left' || edge === 'top') {
+    return index - 1;
+  }
+  return index + 1;
+};
+
+export const useMonitorForFormElementDnd = () => {
   const dispatch = useAppDispatch();
 
   useEffect(() => {
     return monitorForElements({
-      canMonitor({ source }) {
-        return (source.data as FormElement).id === containerId;
-      },
+      // canMonitor({ source }) {
+      //   return (source.data as FormElement).id === containerId;
+      // },
+      canMonitor: () => true,
       onDrop({ location, source }) {
         const target = location.current.dropTargets[0];
         if (!target) {
           return;
         }
 
-        const sourceData = source.data as FormElement;
-        const targetData = target.data as FormElement;
+        const sourceData = source.data as DndData;
+        const targetData = target.data as DndData;
 
-        const sourceElementId = sourceData.id;
-        const targetElementId = targetData.id;
+        const sourceElementId = sourceData.element.id;
+        const targetElementId = targetData.element.id;
 
-        const childrenClone = [...children];
+        const closestCenterOrEdge = extractClosestCenterOrEdge(targetData);
 
-        const indexOfSource = childrenClone.findIndex((elementId) => elementId === sourceElementId);
-        const indexOfTarget = childrenClone.findIndex((elementId) => elementId === targetElementId);
+        if (closestCenterOrEdge === 'center') {
+          const targetContainer = getElement(targetElementId);
+          if (!isContainerElement(targetContainer)) {
+            // Shouldn't happen - when dropped on the center of drop target, the target should always be a container type.
+            return;
+          }
+          flushSync(() => {
+            dispatch(formElementMoved({ id: sourceElementId, containerId: targetContainer.id }));
+          });
+        } else if (closestCenterOrEdge) {
+          if (targetData.container) {
+            const targetContainer = getElement(targetData.container.id);
+            if (!isContainerElement(targetContainer)) {
+              // Shouldn't happen - drop targets should always have a container.
+              return;
+            }
+            const indexOfSource = targetContainer.data.children.findIndex((elementId) => elementId === sourceElementId);
+            const indexOfTarget = targetContainer.data.children.findIndex((elementId) => elementId === targetElementId);
 
-        if (indexOfTarget < 0 || indexOfSource < 0) {
-          return;
-        }
+            if (indexOfSource === indexOfTarget) {
+              // Don't move if the source and target are the same index, meaning same position in the list.
+              return;
+            }
+
+            const adjustedIndex = adjustIndexForDrop(indexOfTarget, closestCenterOrEdge);
 
-        // Don't move if the source and target are the same index, meaning same position in the list
-        if (indexOfSource === indexOfTarget) {
+            if (indexOfSource === adjustedIndex) {
+              // Don't move if the source is already in the correct position.
+              return;
+            }
+
+            flushSync(() => {
+              dispatch(
+                formElementMoved({
+                  id: sourceElementId,
+                  containerId: targetContainer.id,
+                  index: indexOfTarget,
+                })
+              );
+            });
+          }
+        } else {
+          // No container, cannot do anything
           return;
         }
+        // const childrenClone = [...targetData.container.data.children];
 
-        const closestEdgeOfTarget = extractClosestEdge(targetData);
-
-        // It's possible that the indices are different, but refer to the same position. For example, if the source is
-        // at 2 and the target is at 3, but the target edge is 'top', then the entity is already in the correct position.
-        // We should bail if this is the case.
-        // let edgeIndexDelta = 0;
+        // const indexOfSource = childrenClone.findIndex((elementId) => elementId === sourceElementId);
+        // const indexOfTarget = childrenClone.findIndex((elementId) => elementId === targetElementId);
 
-        // if (closestEdgeOfTarget === 'bottom') {
-        //   edgeIndexDelta = 1;
-        // } else if (closestEdgeOfTarget === 'top') {
-        //   edgeIndexDelta = -1;
+        // if (indexOfTarget < 0 || indexOfSource < 0) {
+        //   return;
         // }
 
-        // If the source is already in the correct position, we don't need to move it.
-        // if (indexOfSource === indexOfTarget + edgeIndexDelta) {
+        // // Don't move if the source and target are the same index, meaning same position in the list
+        // if (indexOfSource === indexOfTarget) {
         //   return;
         // }
 
-        const reorderedChildren = reorderWithEdge({
-          list: childrenClone,
-          startIndex: indexOfSource,
-          indexOfTarget,
-          closestEdgeOfTarget,
-          axis: 'vertical',
-        });
-
         // Using `flushSync` so we can query the DOM straight after this line
-        flushSync(() => {
-          dispatch(formElementContainerDataChanged({ id: containerId, changes: { children: reorderedChildren } }));
-        });
+        // flushSync(() => {
+        //   dispatch(
+        //     formElementMoved({
+        //       id: sourceElementId,
+        //       containerId: targetData.container.id,
+        //       index: indexOfTarget,
+        //     })
+        //   );
+        // });
 
         // Flash the element that was moved
-        const element = document.querySelector(`#${sourceElementId}`);
+        const element = document.querySelector(`#${getEditModeWrapperId(sourceElementId)}`);
         if (element instanceof HTMLElement) {
           triggerPostMoveFlash(element, colorTokenToCssVar('base.700'));
         }
       },
     });
-  }, [children, containerId, dispatch]);
-};
-
-const getElement = (id: ElementId) => {
-  const el = getStore().getState().workflow.form?.elements[id];
-  assert(el !== undefined);
-  return el;
+  }, [dispatch]);
 };
 
 export const useDraggableFormElement = (
   elementId: ElementId,
+  containerId: ElementId | null,
   draggableRef: RefObject<HTMLElement>,
   dragHandleRef: RefObject<HTMLElement>
 ) => {
@@ -118,14 +186,16 @@ export const useDraggableFormElement = (
     return combine(
       firefoxDndFix(draggableElement),
       draggable({
+        canDrag: () => Boolean(containerId),
         element: draggableElement,
         dragHandle: dragHandleElement,
         getInitialData() {
-          return getElement(elementId);
+          const data: DndData = {
+            element: getElement(elementId),
+            container: containerId ? getElement(containerId, isContainerElement) : null,
+          };
+          return data;
         },
-        // getInitialData() {
-        //   return singleWorkflowFieldDndSource.getData({ fieldIdentifier });
-        // },
         onDragStart() {
           setListDndState({ type: 'is-dragging' });
           setIsDragging(true);
@@ -137,35 +207,57 @@ export const useDraggableFormElement = (
       }),
       dropTargetForElements({
         element: draggableElement,
-        canDrop() {
-          return isContainerElement(getElement(elementId));
-        },
+        // canDrop() {},
         getData({ input }) {
-          const data = { elementId };
-          return attachClosestEdge(data, {
+          const element = getElement(elementId);
+          const container = containerId ? getElement(containerId, isContainerElement) : null;
+
+          const data: DndData = {
+            element,
+            container,
+          };
+
+          const allowedCenterOrEdge: CenterOrEdge[] = [];
+
+          if (isContainerElement(element)) {
+            allowedCenterOrEdge.push('center');
+          }
+
+          if (container?.data.direction === 'row') {
+            allowedCenterOrEdge.push('left', 'right');
+          }
+
+          if (container?.data.direction === 'column') {
+            allowedCenterOrEdge.push('top', 'bottom');
+          }
+
+          return attachClosestCenterOrEdge(data, {
             element: draggableElement,
             input,
-            allowedEdges: ['top', 'bottom', 'left', 'right'],
+            allowedCenterOrEdge,
           });
         },
         getIsSticky() {
           return true;
         },
-        onDragEnter({ self }) {
-          const closestEdge = extractClosestEdge(self.data);
-          setListDndState({ type: 'is-dragging-over', closestEdge });
-          console.log('onDragEnter', self.data);
-        },
-        onDrag({ self }) {
-          const closestEdge = extractClosestEdge(self.data);
+        onDrag({ self, location }) {
+          const innermostDropTargetElement = location.current.dropTargets.at(0)?.element;
+
+          // If the innermost target is not this draggable element, bail. We only want to react when dragging over _this_ element.
+          if (!innermostDropTargetElement || innermostDropTargetElement !== draggableElement) {
+            setListDndState(idle);
+            return;
+          }
+
+          const closestCenterOrEdge = extractClosestCenterOrEdge(self.data);
 
           // Only need to update react state if nothing has changed.
           // Prevents re-rendering.
           setListDndState((current) => {
-            if (current.type === 'is-dragging-over' && current.closestEdge === closestEdge) {
+            if (current.type === 'is-dragging-over' && current.closestCenterOrEdge === closestCenterOrEdge) {
               return current;
             }
-            return { type: 'is-dragging-over', closestEdge };
+            return { type: 'is-dragging-over', closestCenterOrEdge };
           });
         },
         onDragLeave() {
@@ -176,7 +268,7 @@ export const useDraggableFormElement = (
         },
       })
     );
-  }, [dragHandleRef, draggableRef, elementId]);
+  }, [containerId, dragHandleRef, draggableRef, elementId]);
 
   return [dndListState, isDragging] as const;
 };
diff --git a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
index 367d35c2a51..aa596c6db99 100644
--- a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
@@ -150,30 +150,24 @@ export const workflowSlice = createSlice({
         // Cannot add an element if the form has not been created
         return;
       }
-      const { elements } = state.form;
       const { element, containerId, index } = action.payload;
-
-      const container = elements[containerId];
-      if (!container || !isContainerElement(container)) {
-        return;
-      }
-
-      elements[element.id] = element;
-
-      if (index === undefined) {
-        container.data.children.push(element.id);
-      } else {
-        container.data.children.splice(index, 0, element.id);
-      }
+      addElement({ formState: state.form, element, containerId, index });
     },
     formElementRemoved: (state, action: PayloadAction<{ id: string }>) => {
       if (!state.form) {
         // Cannot remove an element if the form has not been created
         return;
       }
-      const { elements, rootElementId } = state.form;
       const { id } = action.payload;
-      recursivelyRemoveElement(elements, id, rootElementId);
+      recursivelyRemoveElement({ id, formState: state.form });
+    },
+    formElementMoved: (state, action: PayloadAction<{ id: string; containerId: string; index?: number }>) => {
+      if (!state.form) {
+        // Cannot remove an element if the form has not been created
+        return;
+      }
+      const { id, containerId, index } = action.payload;
+      moveElement({ formState: state.form, id, containerId, index });
     },
     formElementContainerDataChanged: (
       state,
@@ -314,6 +308,7 @@ export const {
   formCreated,
   formElementAdded,
   formElementRemoved,
+  formElementMoved,
   formElementContainerDataChanged,
   formReset,
   formModeToggled,
@@ -363,12 +358,14 @@ export const useElement = (id: string): FormElement | undefined => {
   return element;
 };
 
-const recursivelyRemoveElement = (
-  elements: NonNullable<WorkflowV3['form']>['elements'],
-  id: string,
-  containerId: string
-): boolean => {
-  const container = elements[containerId];
+const recursivelyRemoveElement = (args: {
+  id: string;
+  containerId?: string;
+  formState: NonNullable<WorkflowV3['form']>;
+}): boolean => {
+  const { id, containerId, formState } = args;
+  const { elements, rootElementId } = formState;
+  const container = elements[containerId || rootElementId];
 
   if (!container || !isContainerElement(container)) {
     return false;
@@ -382,10 +379,54 @@ const recursivelyRemoveElement = (
   }
 
   for (const childId of container.data.children) {
-    if (recursivelyRemoveElement(elements, id, childId)) {
+    if (recursivelyRemoveElement({ id, containerId: childId, formState })) {
       return true;
     }
   }
 
   return false;
 };
+
+const addElement = (args: {
+  formState: NonNullable<WorkflowV3['form']>;
+  element: FormElement;
+  containerId: string;
+  index?: number;
+}) => {
+  const { formState, element, containerId, index } = args;
+  const { elements } = formState;
+  const container = elements[containerId];
+  if (!container || !isContainerElement(container)) {
+    return;
+  }
+
+  elements[element.id] = element;
+
+  if (index === undefined) {
+    container.data.children.push(element.id);
+  } else {
+    container.data.children.splice(index, 0, element.id);
+  }
+};
+
+const moveElement = (args: {
+  formState: NonNullable<WorkflowV3['form']>;
+  id: string;
+  containerId: string;
+  index?: number;
+}) => {
+  const { formState, id, containerId, index } = args;
+  const { elements } = formState;
+
+  const element = elements[id];
+  if (!element) {
+    return;
+  }
+  const container = elements[containerId];
+  if (!container || !isContainerElement(container)) {
+    return;
+  }
+
+  recursivelyRemoveElement({ formState, id });
+  addElement({ formState, element, containerId, index });
+};
diff --git a/invokeai/frontend/web/src/features/nodes/types/workflow.ts b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
index 5edabaf2dd5..2ee91f3a038 100644
--- a/invokeai/frontend/web/src/features/nodes/types/workflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
@@ -95,6 +95,7 @@ export type ElementId = z.infer<typeof zElementId>;
 
 const zElementBase = z.object({
   id: zElementId,
+  parentId: zElementId.optional(),
 });
 
 const NODE_FIELD_TYPE = 'node-field';
@@ -109,11 +110,13 @@ export type NodeFieldElement = z.infer<typeof zNodeFieldElement>;
 export const isNodeFieldElement = (el: FormElement): el is NodeFieldElement => el.type === NODE_FIELD_TYPE;
 const nodeField = (
   nodeId: NodeFieldElement['data']['fieldIdentifier']['nodeId'],
-  fieldName: NodeFieldElement['data']['fieldIdentifier']['fieldName']
+  fieldName: NodeFieldElement['data']['fieldIdentifier']['fieldName'],
+  parentId?: NodeFieldElement['parentId']
 ): NodeFieldElement => {
   const element: NodeFieldElement = {
     id: getPrefixedId(NODE_FIELD_TYPE, '-'),
     type: NODE_FIELD_TYPE,
+    parentId,
     data: {
       fieldIdentifier: { nodeId, fieldName },
     },
@@ -139,10 +142,12 @@ export type HeadingElement = z.infer<typeof zHeadingElement>;
 export const isHeadingElement = (el: FormElement): el is HeadingElement => el.type === HEADING_TYPE;
 const heading = (
   content: HeadingElement['data']['content'],
-  level: HeadingElement['data']['level']
+  level: HeadingElement['data']['level'],
+  parentId?: NodeFieldElement['parentId']
 ): HeadingElement => {
   const element: HeadingElement = {
     id: getPrefixedId(HEADING_TYPE, '-'),
+    parentId,
     type: HEADING_TYPE,
     data: {
       content,
@@ -168,9 +173,14 @@ const zTextElement = zElementBase.extend({
 });
 export type TextElement = z.infer<typeof zTextElement>;
 export const isTextElement = (el: FormElement): el is TextElement => el.type === TEXT_TYPE;
-const text = (content: TextElement['data']['content'], fontSize: TextElement['data']['fontSize']): TextElement => {
+const text = (
+  content: TextElement['data']['content'],
+  fontSize: TextElement['data']['fontSize'],
+  parentId?: NodeFieldElement['parentId']
+): TextElement => {
   const element: TextElement = {
     id: getPrefixedId(TEXT_TYPE, '-'),
+    parentId,
     type: TEXT_TYPE,
     data: {
       content,
@@ -193,9 +203,10 @@ const zDividerElement = zElementBase.extend({
 });
 export type DividerElement = z.infer<typeof zDividerElement>;
 export const isDividerElement = (el: FormElement): el is DividerElement => el.type === DIVIDER_TYPE;
-const divider = (): DividerElement => {
+const divider = (parentId?: NodeFieldElement['parentId']): DividerElement => {
   const element: DividerElement = {
     id: getPrefixedId(DIVIDER_TYPE, '-'),
+    parentId,
     type: DIVIDER_TYPE,
   };
   addElement(element);
@@ -207,31 +218,25 @@ const _divider = (...args: Parameters<typeof divider>): DividerElement => {
   return element;
 };
 
-export type ContainerElement = {
-  id: string;
-  type: typeof CONTAINER_TYPE;
-  data: {
-    direction: 'row' | 'column';
-    children: ElementId[];
-  };
-};
-
 const CONTAINER_TYPE = 'container';
 export const CONTAINER_CLASS_NAME = getPrefixedId(CONTAINER_TYPE, '-');
-const zContainerElement: z.ZodType<ContainerElement> = zElementBase.extend({
+const zContainerElement = zElementBase.extend({
   type: z.literal(CONTAINER_TYPE),
   data: z.object({
     direction: z.enum(['row', 'column']),
     children: z.array(zElementId),
   }),
 });
+export type ContainerElement = z.infer<typeof zContainerElement>;
 export const isContainerElement = (el: FormElement): el is ContainerElement => el.type === CONTAINER_TYPE;
 export const container = (
   direction: ContainerElement['data']['direction'],
-  children: ContainerElement['data']['children']
+  children: ContainerElement['data']['children'],
+  parentId?: NodeFieldElement['parentId']
 ): ContainerElement => {
   const element: ContainerElement = {
     id: getPrefixedId(CONTAINER_TYPE, '-'),
+    parentId,
     type: CONTAINER_TYPE,
     data: {
       direction,
@@ -250,18 +255,35 @@ const zFormElement = z.union([zContainerElement, zNodeFieldElement, zHeadingElem
 
 export type FormElement = z.infer<typeof zFormElement>;
 
-export const rootElementId: string = _container('column', [
-  _heading('My Cool Workflow', 1).id,
-  _text('This is a description of what my workflow does. It does things.', 'md').id,
-  _divider().id,
-  _heading('First Section', 2).id,
-  _text('The first section includes fields relevant to the first section. This note describes that fact.', 'sm').id,
-  _divider().id,
-  _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
-  _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-  _nodeField('14744f68-9000-4694-b4d6-cbe83ee231ee', 'model').id,
-]).id;
+// export const rootElementId: string = _container('column', [
+//   _heading('My Cool Workflow', 1).id,
+//   _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+//   _nodeField('14744f68-9000-4694-b4d6-cbe83ee231ee', 'model').id,
+//   _container('row', [_container('column', []).id, _container('column', []).id, _container('column', []).id]).id,
+// ]).id;
+
+const rootContainer = container('column', []);
+addElement(rootContainer);
+const children = [
+  heading('My Cool Workflow', 1, rootContainer.id),
+  text('This is a description of what my workflow does. It does things.', 'md', rootContainer.id),
+  divider(rootContainer.id),
+  heading('First Section', 2, rootContainer.id),
+  text(
+    'The first section includes fields relevant to the first section. This note describes that fact.',
+    'sm',
+    rootContainer.id
+  ),
+  divider(rootContainer.id),
+  text('These are some text that are definitely super helpful.', 'sm', rootContainer.id),
+  divider(rootContainer.id),
+];
+children.forEach((child) => {
+  addElement(child);
+  rootContainer.data.children.push(child.id);
+});
 
+export const rootElementId = rootContainer.id;
 // export const rootElementId: string = _container('column', [
 //   _heading('My Cool Workflow', 1).id,
 //   _text('This is a description of what my workflow does. It does things.', 'md').id,
@@ -269,36 +291,36 @@ export const rootElementId: string = _container('column', [
 //   _heading('First Section', 2).id,
 //   _text('The first section includes fields relevant to the first section. This note describes that fact.', 'sm').id,
 //   _divider().id,
-//   _container('row', [
-//     _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
-//     _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
-//     _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
-//   ]).id,
-//   _nodeField('9c058600-8d73-4702-912b-0ccf37403bfd', 'value').id,
-//   _nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value').id,
-//   _nodeField('4e16cbf6-457c-46fb-9ab7-9cb262fa1e03', 'value').id,
-//   _nodeField('39cb5272-a9d7-4da9-9c35-32e02b46bb34', 'color').id,
-//   _container('row', [
-//     _container('column', [
-//       _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-//       _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-//     ]).id,
-//     _container('column', [
-//       _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-//       _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-//       _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
-//       _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-//     ]).id,
-//   ]).id,
-//   _nodeField('14744f68-9000-4694-b4d6-cbe83ee231ee', 'model').id,
+//   // _container('row', [
+//   //   _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+//   //   _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+//   //   _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+//   // ]).id,
+//   // _nodeField('9c058600-8d73-4702-912b-0ccf37403bfd', 'value').id,
+//   // _nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value').id,
+//   // _nodeField('4e16cbf6-457c-46fb-9ab7-9cb262fa1e03', 'value').id,
+//   // _nodeField('39cb5272-a9d7-4da9-9c35-32e02b46bb34', 'color').id,
+//   // _container('row', [
+//   //   _container('column', [
+//   //     _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+//   //     _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+//   //   ]).id,
+//   //   _container('column', [
+//   //     _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+//   //     _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+//   //     _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+//   //     _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
+//   //   ]).id,
+//   // ]).id,
+//   // _nodeField('14744f68-9000-4694-b4d6-cbe83ee231ee', 'model').id,
 //   _divider().id,
 //   _text('These are some text that are definitely super helpful.', 'sm').id,
 //   _divider().id,
-//   _container('row', [
-//     _container('column', [
-//       _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
-//       _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
-//     ]).id,
-//     _container('column', [_nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value').id]).id,
-//   ]).id,
+//   // _container('row', [
+//   //   _container('column', [
+//   //     _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+//   //     _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
+//   //   ]).id,
+//   //   _container('column', [_nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value').id]).id,
+//   // ]).id,
 // ]).id;

From e966bf9759dacdc78c5e9d5fe19a24b6c96baf54 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 24 Jan 2025 15:58:15 +1100
Subject: [PATCH 35/58] feat(ui): dnd almost fully working (WIP)

---
 .../builder/ContainerElementComponent.tsx     |  20 +--
 .../builder/FormElementEditModeWrapper.tsx    |   5 +-
 .../builder/center-or-closest-edge.ts         |   4 +-
 .../sidePanel/builder/use-builder-dnd.ts      | 146 +++++++-----------
 .../src/features/nodes/store/workflowSlice.ts |  33 +++-
 5 files changed, 102 insertions(+), 106 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
index 1f339344e60..0b2befc9980 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
@@ -86,8 +86,8 @@ export const ContainerElementComponentEditMode = memo(({ el }: { el: ContainerEl
             {children.map((childId) => (
               <FormElementComponent key={childId} id={childId} />
             ))}
-            {direction === 'row' && children.length < 3 && depth < 2 && <AddColumnButton containerId={id} />}
-            {direction === 'column' && depth < 1 && <AddRowButton containerId={id} />}
+            {direction === 'row' && children.length < 3 && depth < 2 && <AddColumnButton el={el} />}
+            {direction === 'column' && depth < 1 && <AddRowButton el={el} />}
           </Flex>
         </ContainerContextProvider>
       </DepthContextProvider>
@@ -96,23 +96,23 @@ export const ContainerElementComponentEditMode = memo(({ el }: { el: ContainerEl
 });
 ContainerElementComponentEditMode.displayName = 'ContainerElementComponentEditMode';
 
-const AddColumnButton = ({ containerId }: { containerId: string }) => {
+const AddColumnButton = ({ el }: { el: ContainerElement }) => {
   const dispatch = useAppDispatch();
   const onClick = useCallback(() => {
-    const element = container('column', []);
-    dispatch(formElementAdded({ element, containerId }));
-  }, [containerId, dispatch]);
+    const element = container('column', [], el.id);
+    dispatch(formElementAdded({ element, containerId: el.id }));
+  }, [dispatch, el.id]);
   return (
     <IconButton onClick={onClick} aria-label="add column" icon={<PiPlusBold />} h="unset" variant="ghost" size="sm" />
   );
 };
 
-const AddRowButton = ({ containerId }: { containerId: string }) => {
+const AddRowButton = ({ el }: { el: ContainerElement }) => {
   const dispatch = useAppDispatch();
   const onClick = useCallback(() => {
-    const element = container('row', []);
-    dispatch(formElementAdded({ element, containerId }));
-  }, [containerId, dispatch]);
+    const element = container('row', [], el.id);
+    dispatch(formElementAdded({ element, containerId: el.id }));
+  }, [dispatch, el.id]);
   return (
     <IconButton onClick={onClick} aria-label="add row" icon={<PiPlusBold />} w="unset" variant="ghost" size="sm" />
   );
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
index c7ae517d608..c1155f2bd5c 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
@@ -1,7 +1,7 @@
 import { Flex, type FlexProps, IconButton, Spacer, Text } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
-import { useContainerContext, useDepthContext } from 'features/nodes/components/sidePanel/builder/contexts';
+import { useDepthContext } from 'features/nodes/components/sidePanel/builder/contexts';
 import { DndListDropIndicator } from 'features/nodes/components/sidePanel/builder/DndListDropIndicator';
 import type { DndListTargetState } from 'features/nodes/components/sidePanel/builder/use-builder-dnd';
 import { useDraggableFormElement } from 'features/nodes/components/sidePanel/builder/use-builder-dnd';
@@ -55,8 +55,7 @@ export const FormElementEditModeWrapper = memo(
   ({ element, children, ...rest }: { element: FormElement } & FlexProps) => {
     const draggableRef = useRef<HTMLDivElement>(null);
     const dragHandleRef = useRef<HTMLDivElement>(null);
-    const container = useContainerContext();
-    const [dndListState] = useDraggableFormElement(element.id, container?.id ?? null, draggableRef, dragHandleRef);
+    const [dndListState] = useDraggableFormElement(element.id, draggableRef, dragHandleRef);
     const depth = useDepthContext();
     const dispatch = useAppDispatch();
     const removeElement = useCallback(() => {
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/center-or-closest-edge.ts b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/center-or-closest-edge.ts
index cfb719a9d50..aca12766fbe 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/center-or-closest-edge.ts
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/center-or-closest-edge.ts
@@ -5,6 +5,8 @@ import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/dist/types/t
 
 export type CenterOrEdge = 'center' | Edge;
 
+const CENTER_BIAS_FACTOR = 0.8;
+
 // re-exporting type to make it easy to use
 
 const getDistanceToCenterOrEdge: {
@@ -17,7 +19,7 @@ const getDistanceToCenterOrEdge: {
   center: (rect, client) => {
     const centerX = rect.left + rect.width / 2;
     const centerY = rect.top + rect.height / 2;
-    return Math.sqrt((client.x - centerX) ** 2 + (client.y - centerY) ** 2);
+    return Math.sqrt((client.x - centerX) ** 2 + (client.y - centerY) ** 2) * CENTER_BIAS_FACTOR;
   },
 };
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts
index 54909ea7fcf..f9bfee65951 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts
@@ -15,7 +15,7 @@ import {
 } from 'features/nodes/components/sidePanel/builder/center-or-closest-edge';
 import { getEditModeWrapperId } from 'features/nodes/components/sidePanel/builder/FormElementEditModeWrapper';
 import { formElementMoved } from 'features/nodes/store/workflowSlice';
-import type { ContainerElement, ElementId, FormElement } from 'features/nodes/types/workflow';
+import type { ElementId, FormElement } from 'features/nodes/types/workflow';
 import { isContainerElement } from 'features/nodes/types/workflow';
 import type { RefObject } from 'react';
 import { useEffect, useState } from 'react';
@@ -42,9 +42,12 @@ export type DndListTargetState =
     };
 export const idle: DndListTargetState = { type: 'idle' };
 
+// using a symbol so we can guarantee a key with a unique value
+const uniqueBuilderDndKey = Symbol('builderDnd');
+
 type DndData = {
+  [uniqueBuilderDndKey]: true;
   element: FormElement;
-  container: ContainerElement | null;
 };
 
 const getElement = <T extends FormElement>(id: ElementId, guard?: (el: FormElement) => el is T): T => {
@@ -70,11 +73,8 @@ export const useMonitorForFormElementDnd = () => {
 
   useEffect(() => {
     return monitorForElements({
-      // canMonitor({ source }) {
-      //   return (source.data as FormElement).id === containerId;
-      // },
-      canMonitor: () => true,
-      onDrop({ location, source }) {
+      canMonitor: ({ source }) => uniqueBuilderDndKey in source.data,
+      onDrop: ({ location, source }) => {
         const target = location.current.dropTargets[0];
         if (!target) {
           return;
@@ -83,83 +83,55 @@ export const useMonitorForFormElementDnd = () => {
         const sourceData = source.data as DndData;
         const targetData = target.data as DndData;
 
-        const sourceElementId = sourceData.element.id;
-        const targetElementId = targetData.element.id;
-
         const closestCenterOrEdge = extractClosestCenterOrEdge(targetData);
 
         if (closestCenterOrEdge === 'center') {
-          const targetContainer = getElement(targetElementId);
-          if (!isContainerElement(targetContainer)) {
-            // Shouldn't happen - when dropped on the center of drop target, the target should always be a container type.
-            return;
-          }
+          // Move the element to the target container - should we double-check that the target is a container?
           flushSync(() => {
-            dispatch(formElementMoved({ id: sourceElementId, containerId: targetContainer.id }));
+            dispatch(formElementMoved({ id: sourceData.element.id, containerId: targetData.element.id }));
           });
         } else if (closestCenterOrEdge) {
-          if (targetData.container) {
-            const targetContainer = getElement(targetData.container.id);
-            if (!isContainerElement(targetContainer)) {
-              // Shouldn't happen - drop targets should always have a container.
-              return;
-            }
-            const indexOfSource = targetContainer.data.children.findIndex((elementId) => elementId === sourceElementId);
-            const indexOfTarget = targetContainer.data.children.findIndex((elementId) => elementId === targetElementId);
+          // Move the element to the target's parent container at the correct index
+          const { parentId } = targetData.element;
+          assert(parentId !== undefined, 'Target element should have a parent');
 
-            if (indexOfSource === indexOfTarget) {
-              // Don't move if the source and target are the same index, meaning same position in the list.
-              return;
-            }
+          const isReparenting = parentId !== sourceData.element.parentId;
+
+          const parentContainer = getElement(parentId, isContainerElement);
+          const targetIndex = parentContainer.data.children.findIndex(
+            (elementId) => elementId === targetData.element.id
+          );
 
-            const adjustedIndex = adjustIndexForDrop(indexOfTarget, closestCenterOrEdge);
+          let index: number | undefined = undefined;
 
-            if (indexOfSource === adjustedIndex) {
-              // Don't move if the source is already in the correct position.
+          if (!isReparenting) {
+            const sourceIndex = parentContainer.data.children.findIndex(
+              (elementId) => elementId === sourceData.element.id
+            );
+            if (sourceIndex === targetIndex || sourceIndex === adjustIndexForDrop(targetIndex, closestCenterOrEdge)) {
               return;
             }
-
-            flushSync(() => {
-              dispatch(
-                formElementMoved({
-                  id: sourceElementId,
-                  containerId: targetContainer.id,
-                  index: indexOfTarget,
-                })
-              );
-            });
+            index = targetIndex;
+          } else {
+            index = adjustIndexForDrop(targetIndex, closestCenterOrEdge);
           }
+
+          flushSync(() => {
+            dispatch(
+              formElementMoved({
+                id: sourceData.element.id,
+                containerId: parentId,
+                index,
+              })
+            );
+          });
         } else {
           // No container, cannot do anything
           return;
         }
-        // const childrenClone = [...targetData.container.data.children];
-
-        // const indexOfSource = childrenClone.findIndex((elementId) => elementId === sourceElementId);
-        // const indexOfTarget = childrenClone.findIndex((elementId) => elementId === targetElementId);
-
-        // if (indexOfTarget < 0 || indexOfSource < 0) {
-        //   return;
-        // }
-
-        // // Don't move if the source and target are the same index, meaning same position in the list
-        // if (indexOfSource === indexOfTarget) {
-        //   return;
-        // }
-
-        // Using `flushSync` so we can query the DOM straight after this line
-        // flushSync(() => {
-        //   dispatch(
-        //     formElementMoved({
-        //       id: sourceElementId,
-        //       containerId: targetData.container.id,
-        //       index: indexOfTarget,
-        //     })
-        //   );
-        // });
 
         // Flash the element that was moved
-        const element = document.querySelector(`#${getEditModeWrapperId(sourceElementId)}`);
+        const element = document.querySelector(`#${getEditModeWrapperId(sourceData.element.id)}`);
         if (element instanceof HTMLElement) {
           triggerPostMoveFlash(element, colorTokenToCssVar('base.700'));
         }
@@ -170,7 +142,6 @@ export const useMonitorForFormElementDnd = () => {
 
 export const useDraggableFormElement = (
   elementId: ElementId,
-  containerId: ElementId | null,
   draggableRef: RefObject<HTMLElement>,
   dragHandleRef: RefObject<HTMLElement>
 ) => {
@@ -183,38 +154,39 @@ export const useDraggableFormElement = (
     if (!draggableElement || !dragHandleElement) {
       return;
     }
+    const _element = getElement(elementId);
+    if (!_element.parentId) {
+      // Root element, cannot drag
+      return;
+    }
     return combine(
       firefoxDndFix(draggableElement),
       draggable({
-        canDrag: () => Boolean(containerId),
         element: draggableElement,
         dragHandle: dragHandleElement,
-        getInitialData() {
-          const data: DndData = {
-            element: getElement(elementId),
-            container: containerId ? getElement(containerId, isContainerElement) : null,
-          };
-          return data;
-        },
-        onDragStart() {
+        getInitialData: () => ({
+          [uniqueBuilderDndKey]: true,
+          element: getElement(elementId),
+        }),
+        onDragStart: () => {
           setListDndState({ type: 'is-dragging' });
           setIsDragging(true);
         },
-        onDrop() {
+        onDrop: () => {
           setListDndState(idle);
           setIsDragging(false);
         },
       }),
       dropTargetForElements({
         element: draggableElement,
-        // canDrop() {},
-        getData({ input }) {
+        canDrop: ({ source }) => uniqueBuilderDndKey in source.data,
+        getData: ({ input }) => {
           const element = getElement(elementId);
-          const container = containerId ? getElement(containerId, isContainerElement) : null;
+          const container = element.parentId ? getElement(element.parentId, isContainerElement) : null;
 
           const data: DndData = {
+            [uniqueBuilderDndKey]: true,
             element,
-            container,
           };
 
           const allowedCenterOrEdge: CenterOrEdge[] = [];
@@ -237,10 +209,8 @@ export const useDraggableFormElement = (
             allowedCenterOrEdge,
           });
         },
-        getIsSticky() {
-          return true;
-        },
-        onDrag({ self, location }) {
+        getIsSticky: () => true,
+        onDrag: ({ self, location }) => {
           const innermostDropTargetElement = location.current.dropTargets.at(0)?.element;
 
           // If the innermost target is not this draggable element, bail. We only want to react when dragging over _this_ element.
@@ -260,15 +230,15 @@ export const useDraggableFormElement = (
             return { type: 'is-dragging-over', closestCenterOrEdge };
           });
         },
-        onDragLeave() {
+        onDragLeave: () => {
           setListDndState(idle);
         },
-        onDrop() {
+        onDrop: () => {
           setListDndState(idle);
         },
       })
     );
-  }, [containerId, dragHandleRef, draggableRef, elementId]);
+  }, [dragHandleRef, draggableRef, elementId]);
 
   return [dndListState, isDragging] as const;
 };
diff --git a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
index aa596c6db99..47fdbc65633 100644
--- a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
@@ -422,11 +422,36 @@ const moveElement = (args: {
   if (!element) {
     return;
   }
-  const container = elements[containerId];
-  if (!container || !isContainerElement(container)) {
+  const newContainer = elements[containerId];
+  if (!newContainer || !isContainerElement(newContainer)) {
     return;
   }
 
-  recursivelyRemoveElement({ formState, id });
-  addElement({ formState, element, containerId, index });
+  if (newContainer.data.children.includes(id)) {
+    // Moving within the same container - remove the element from its current position and insert it at the new position
+    const currentIndex = newContainer.data.children.indexOf(id);
+    if (currentIndex === -1) {
+      return;
+    }
+    newContainer.data.children.splice(currentIndex, 1);
+    if (index === undefined) {
+      newContainer.data.children.push(id);
+    } else {
+      newContainer.data.children.splice(index, 0, id);
+    }
+  } else if (element.parentId !== undefined) {
+    const oldContainer = elements[element.parentId];
+    if (!oldContainer || !isContainerElement(oldContainer)) {
+      return;
+    }
+    oldContainer.data.children = oldContainer.data.children.filter((childId) => childId !== id);
+    if (index === undefined) {
+      newContainer.data.children.push(id);
+    } else {
+      newContainer.data.children.splice(index, 0, id);
+    }
+    element.parentId = containerId;
+  } else {
+    // Should never happen
+  }
 };

From db0eeafb579ed9b57e65bd6f9cec1202d71757fc Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 25 Jan 2025 09:34:44 +1100
Subject: [PATCH 36/58] feat(ui): improved dnd hitbox for edges when center
 drop is allowed

---
 .../builder/center-or-closest-edge.ts         | 72 +++++++++++++++----
 1 file changed, 59 insertions(+), 13 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/center-or-closest-edge.ts b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/center-or-closest-edge.ts
index aca12766fbe..7282c9a4420 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/center-or-closest-edge.ts
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/center-or-closest-edge.ts
@@ -5,21 +5,67 @@ import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/dist/types/t
 
 export type CenterOrEdge = 'center' | Edge;
 
-const CENTER_BIAS_FACTOR = 0.8;
-
 // re-exporting type to make it easy to use
 
+// When the DOM element is small, the closest-edge algorithm can result in a very small hitbox for the center
+// region, making it difficult for the user to hit the center. To mitigate this, when the center is allowed,
+// we use an absolute edge hitbox size of 10px or 1/4 of the element's size, whichever is smaller.
+
 const getDistanceToCenterOrEdge: {
-  [TKey in CenterOrEdge]: (rect: DOMRect, client: Position) => number;
+  [TKey in CenterOrEdge]: (
+    rect: Pick<DOMRect, 'top' | 'right' | 'bottom' | 'left' | 'width' | 'height'>,
+    client: Position,
+    isCenterAllowed: boolean
+  ) => number;
 } = {
-  top: (rect, client) => Math.abs(client.y - rect.top),
-  right: (rect, client) => Math.abs(rect.right - client.x),
-  bottom: (rect, client) => Math.abs(rect.bottom - client.y),
-  left: (rect, client) => Math.abs(client.x - rect.left),
-  center: (rect, client) => {
+  top: (rect, client, isCenterAllowed) => {
+    const distanceFromTop = Math.abs(client.y - rect.top);
+    if (!isCenterAllowed) {
+      return distanceFromTop;
+    }
+    const hitboxHeight = Math.min(rect.height / 4, 10);
+    if (distanceFromTop <= hitboxHeight) {
+      return 0;
+    }
+    return Infinity;
+  },
+  right: (rect, client, isCenterAllowed) => {
+    const distanceFromRight = Math.abs(rect.right - client.x);
+    if (!isCenterAllowed) {
+      return distanceFromRight;
+    }
+    const hitboxWidth = Math.min(rect.width / 4, 10);
+    if (distanceFromRight <= hitboxWidth) {
+      return 0;
+    }
+    return Infinity;
+  },
+  bottom: (rect, client, isCenterAllowed) => {
+    const distanceFromBottom = Math.abs(rect.bottom - client.y);
+    if (!isCenterAllowed) {
+      return distanceFromBottom;
+    }
+    const hitboxHeight = Math.min(rect.height / 4, 10);
+    if (distanceFromBottom <= hitboxHeight) {
+      return 0;
+    }
+    return Infinity;
+  },
+  left: (rect, client, isCenterAllowed) => {
+    const distanceFromLeft = Math.abs(client.x - rect.left);
+    if (!isCenterAllowed) {
+      return distanceFromLeft;
+    }
+    const hitboxWidth = Math.min(rect.width / 4, 10);
+    if (distanceFromLeft <= hitboxWidth) {
+      return 0;
+    }
+    return Infinity;
+  },
+  center: (rect, client, _) => {
     const centerX = rect.left + rect.width / 2;
     const centerY = rect.top + rect.height / 2;
-    return Math.sqrt((client.x - centerX) ** 2 + (client.y - centerY) ** 2) * CENTER_BIAS_FACTOR;
+    return Math.sqrt((client.x - centerX) ** 2 + (client.y - centerY) ** 2);
   },
 };
 
@@ -49,11 +95,11 @@ export function attachClosestCenterOrEdge(
   // frame in order to improve performance.
   // However, on measurement I saw no improvement. So no longer caching
   const rect: DOMRect = element.getBoundingClientRect();
+
+  const isCenterAllowed = allowedCenterOrEdge.includes('center');
+
   const entries = allowedCenterOrEdge.map((edge) => {
-    return {
-      edge,
-      value: getDistanceToCenterOrEdge[edge](rect, client),
-    };
+    return { edge, value: getDistanceToCenterOrEdge[edge](rect, client, isCenterAllowed) };
   });
 
   // edge can be `null` when `allowedCenterOrEdge` is []

From c9579165b9ca1f73d349af581d43348d7d755a71 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 25 Jan 2025 09:34:58 +1100
Subject: [PATCH 37/58] feat(ui): dnd drop target styling

---
 .../builder/FormElementEditModeWrapper.tsx    | 26 +++++--------------
 1 file changed, 7 insertions(+), 19 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
index c1155f2bd5c..1c87129c672 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
@@ -36,19 +36,13 @@ const getHeaderLabel = (el: FormElement) => {
 };
 
 const getBgColor = (dndListState: DndListTargetState) => {
-  switch (dndListState.type) {
-    case 'idle':
-      return undefined;
-    case 'is-dragging':
-      return 'red';
-    case 'is-dragging-over':
-      if (dndListState.closestCenterOrEdge === 'center') {
-        return 'magenta';
-      }
-      return 'blue';
-    case 'preview':
-      return 'green';
+  if (dndListState.type !== 'is-dragging-over') {
+    return undefined;
   }
+  if (dndListState.closestCenterOrEdge === 'center') {
+    return 'base.700';
+  }
+  return undefined;
 };
 
 export const FormElementEditModeWrapper = memo(
@@ -62,10 +56,6 @@ export const FormElementEditModeWrapper = memo(
       dispatch(formElementRemoved({ id: element.id }));
     }, [dispatch, element.id]);
 
-    if (dndListState.type !== 'idle') {
-      // console.log(element.id, 'dndListState', dndListState);
-    }
-
     return (
       <Flex
         id={getEditModeWrapperId(element.id)}
@@ -90,14 +80,12 @@ export const FormElementEditModeWrapper = memo(
           h={8}
           bg={getHeaderBgColor(depth)}
           borderTopRadius="inherit"
-          // borderBottomWidth={1}
           borderColor="inherit"
           alignItems="center"
           cursor="grab"
         >
           <Text fontWeight="semibold" noOfLines={1} wordBreak="break-all">
-            {element.id}
-            {/* {getHeaderLabel(element)} */}
+            {getHeaderLabel(element)} ({element.id})
           </Text>
           <Spacer />
           <IconButton

From 0e66e539c107032f9243351337fc1498fe860472 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 25 Jan 2025 09:52:33 +1100
Subject: [PATCH 38/58] fix(ui): do not allow reparenting to self

---
 .../components/sidePanel/builder/use-builder-dnd.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts
index f9bfee65951..5cf562fcd7f 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts
@@ -83,6 +83,11 @@ export const useMonitorForFormElementDnd = () => {
         const sourceData = source.data as DndData;
         const targetData = target.data as DndData;
 
+        //
+        if (sourceData.element.id === targetData.element.id) {
+          return;
+        }
+
         const closestCenterOrEdge = extractClosestCenterOrEdge(targetData);
 
         if (closestCenterOrEdge === 'center') {
@@ -210,7 +215,7 @@ export const useDraggableFormElement = (
           });
         },
         getIsSticky: () => true,
-        onDrag: ({ self, location }) => {
+        onDrag: ({ self, location, source }) => {
           const innermostDropTargetElement = location.current.dropTargets.at(0)?.element;
 
           // If the innermost target is not this draggable element, bail. We only want to react when dragging over _this_ element.
@@ -221,6 +226,12 @@ export const useDraggableFormElement = (
 
           const closestCenterOrEdge = extractClosestCenterOrEdge(self.data);
 
+          // Don't allow reparanting to the same container
+          if (closestCenterOrEdge === 'center' && source.element === draggableElement) {
+            setListDndState(idle);
+            return;
+          }
+
           // Only need to update react state if nothing has changed.
           // Prevents re-rendering.
           setListDndState((current) => {

From 82a6fcbfdb6a45d9c8c3c90e9202cd054518d741 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 25 Jan 2025 09:52:45 +1100
Subject: [PATCH 39/58] feat(ui): improved drop target styling

---
 .../builder/FormElementEditModeWrapper.tsx    | 81 +++++++++----------
 1 file changed, 39 insertions(+), 42 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
index 1c87129c672..41905b3120d 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
@@ -1,9 +1,9 @@
-import { Flex, type FlexProps, IconButton, Spacer, Text } from '@invoke-ai/ui-library';
+import type { FlexProps, SystemStyleObject } from '@invoke-ai/ui-library';
+import { Flex, IconButton, Spacer, Text } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
 import { useDepthContext } from 'features/nodes/components/sidePanel/builder/contexts';
 import { DndListDropIndicator } from 'features/nodes/components/sidePanel/builder/DndListDropIndicator';
-import type { DndListTargetState } from 'features/nodes/components/sidePanel/builder/use-builder-dnd';
 import { useDraggableFormElement } from 'features/nodes/components/sidePanel/builder/use-builder-dnd';
 import { formElementRemoved } from 'features/nodes/store/workflowSlice';
 import { type FormElement, isContainerElement } from 'features/nodes/types/workflow';
@@ -15,16 +15,6 @@ export const EDIT_MODE_WRAPPER_CLASS_NAME = getPrefixedId('edit-mode-wrapper', '
 
 export const getEditModeWrapperId = (id: string) => `${id}-edit-mode-wrapper`;
 
-const getHeaderBgColor = (depth: number) => {
-  if (depth <= 1) {
-    return 'base.800';
-  }
-  if (depth === 2) {
-    return 'base.750';
-  }
-  return 'base.700';
-};
-
 const getHeaderLabel = (el: FormElement) => {
   if (isContainerElement(el)) {
     if (el.data.direction === 'column') {
@@ -35,21 +25,43 @@ const getHeaderLabel = (el: FormElement) => {
   return startCase(el.type);
 };
 
-const getBgColor = (dndListState: DndListTargetState) => {
-  if (dndListState.type !== 'is-dragging-over') {
-    return undefined;
-  }
-  if (dndListState.closestCenterOrEdge === 'center') {
-    return 'base.700';
-  }
-  return undefined;
+const wrapperSx: SystemStyleObject = {
+  position: 'relative',
+  flexDir: 'column',
+  boxShadow: '0 0 0 1px var(--invoke-colors-base-750)',
+  borderRadius: 'base',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  w: 'full',
+  h: 'full',
+  '&[data-is-dragging="true"]': {
+    opacity: 0.3,
+  },
+  '&[data-is-dragging-over-center="true"]': {
+    opacity: 1,
+    bg: 'base.700',
+  },
+};
+
+const headerSx: SystemStyleObject = {
+  w: 'full',
+  ps: 2,
+  h: 8,
+  borderTopRadius: 'inherit',
+  borderColor: 'inherit',
+  alignItems: 'center',
+  cursor: 'grab',
+  bg: 'base.700',
+  '&[data-depth="0"]': { bg: 'base.800' },
+  '&[data-depth="1"]': { bg: 'base.800' },
+  '&[data-depth="2"]': { bg: 'base.750' },
 };
 
 export const FormElementEditModeWrapper = memo(
   ({ element, children, ...rest }: { element: FormElement } & FlexProps) => {
     const draggableRef = useRef<HTMLDivElement>(null);
     const dragHandleRef = useRef<HTMLDivElement>(null);
-    const [dndListState] = useDraggableFormElement(element.id, draggableRef, dragHandleRef);
+    const [dndListState, isDragging] = useDraggableFormElement(element.id, draggableRef, dragHandleRef);
     const depth = useDepthContext();
     const dispatch = useAppDispatch();
     const removeElement = useCallback(() => {
@@ -60,30 +72,15 @@ export const FormElementEditModeWrapper = memo(
       <Flex
         id={getEditModeWrapperId(element.id)}
         ref={draggableRef}
-        position="relative"
+        sx={wrapperSx}
         className={EDIT_MODE_WRAPPER_CLASS_NAME}
-        flexDir="column"
-        boxShadow="0 0 0 1px var(--invoke-colors-base-750)"
-        borderRadius="base"
-        alignItems="center"
-        justifyContent="flex-start"
-        w="full"
-        h="full"
-        bg={getBgColor(dndListState)}
-        opacity={dndListState.type === 'is-dragging' ? 0.3 : 1}
+        data-is-dragging={isDragging}
+        data-is-dragging-over-center={
+          dndListState.type === 'is-dragging-over' && dndListState.closestCenterOrEdge === 'center'
+        }
         {...rest}
       >
-        <Flex
-          ref={dragHandleRef}
-          w="full"
-          ps={2}
-          h={8}
-          bg={getHeaderBgColor(depth)}
-          borderTopRadius="inherit"
-          borderColor="inherit"
-          alignItems="center"
-          cursor="grab"
-        >
+        <Flex ref={dragHandleRef} sx={headerSx} data-depth={depth}>
           <Text fontWeight="semibold" noOfLines={1} wordBreak="break-all">
             {getHeaderLabel(element)} ({element.id})
           </Text>

From 265cf8ca7e75863b848a682ff1a274873246ad3c Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 25 Jan 2025 21:29:23 +1100
Subject: [PATCH 40/58] feat(ui): support adding form elements and node fields
 with dnd

---
 .../fields/InputFieldEditModeNodes.tsx        |  48 ++-
 .../builder/ContainerElementComponent.tsx     |   6 +-
 .../builder/DndListDropIndicator.tsx          |  17 +-
 .../builder/FormElementEditModeWrapper.tsx    |  10 +-
 .../sidePanel/builder/WorkflowBuilder.tsx     |  89 ++++-
 .../sidePanel/builder/use-builder-dnd.ts      | 329 ++++++++++++------
 .../src/features/nodes/store/workflowSlice.ts |   1 +
 .../web/src/features/nodes/types/workflow.ts  |  62 ++--
 8 files changed, 404 insertions(+), 158 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeNodes.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeNodes.tsx
index ddcb74a3811..8c3d9b82e4b 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeNodes.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeNodes.tsx
@@ -1,12 +1,18 @@
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { Flex, FormControl } from '@invoke-ai/ui-library';
+import { firefoxDndFix } from 'features/dnd/util';
 import { FieldHandle } from 'features/nodes/components/flow/nodes/Invocation/fields/FieldHandle';
 import { InputFieldNotesIconButtonEditable } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldNotesIconButtonEditable';
 import { InputFieldResetToDefaultValueIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToDefaultValueIconButton';
+import { buildNodeFieldDndData } from 'features/nodes/components/sidePanel/builder/use-builder-dnd';
 import { useInputFieldConnectionState } from 'features/nodes/hooks/useInputFieldConnectionState';
 import { useInputFieldIsConnected } from 'features/nodes/hooks/useInputFieldIsConnected';
 import { useInputFieldIsInvalid } from 'features/nodes/hooks/useInputFieldIsInvalid';
 import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate';
-import { memo, useCallback, useState } from 'react';
+import type { FieldIdentifier } from 'features/nodes/types/field';
+import type { RefObject } from 'react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
 
 import { InputFieldAddRemoveLinearViewIconButton } from './InputFieldAddRemoveLinearViewIconButton';
 import { InputFieldRenderer } from './InputFieldRenderer';
@@ -20,6 +26,8 @@ interface Props {
 
 export const InputFieldEditModeNodes = memo(({ nodeId, fieldName }: Props) => {
   const fieldTemplate = useInputFieldTemplate(nodeId, fieldName);
+  const draggableRef = useRef<HTMLDivElement>(null);
+  const dragHandleRef = useRef<HTMLDivElement>(null);
   const [isHovered, setIsHovered] = useState(false);
   const isInvalid = useInputFieldIsInvalid(nodeId, fieldName);
   const isConnected = useInputFieldIsConnected(nodeId, fieldName);
@@ -36,6 +44,8 @@ export const InputFieldEditModeNodes = memo(({ nodeId, fieldName }: Props) => {
     setIsHovered(false);
   }, []);
 
+  const isDragging = useNodeFieldDnd({ nodeId, fieldName }, draggableRef, dragHandleRef);
+
   if (fieldTemplate.input === 'connection' || isConnected) {
     return (
       <InputFieldWrapper>
@@ -62,6 +72,7 @@ export const InputFieldEditModeNodes = memo(({ nodeId, fieldName }: Props) => {
   return (
     <InputFieldWrapper>
       <FormControl
+        ref={draggableRef}
         isInvalid={isInvalid}
         isDisabled={isConnected}
         // Without pointerEvents prop, disabled inputs don't trigger reactflow events. For example, when making a
@@ -69,9 +80,10 @@ export const InputFieldEditModeNodes = memo(({ nodeId, fieldName }: Props) => {
         pointerEvents={isConnected ? 'none' : 'auto'}
         orientation="vertical"
         px={2}
+        opacity={isDragging ? 0.3 : 1}
       >
         <Flex flexDir="column" w="full" gap={1} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-          <Flex gap={1}>
+          <Flex className="nodrag" ref={dragHandleRef} gap={1}>
             <InputFieldTitle nodeId={nodeId} fieldName={fieldName} isInvalid={isInvalid} />
             {isHovered && (
               <>
@@ -99,3 +111,35 @@ export const InputFieldEditModeNodes = memo(({ nodeId, fieldName }: Props) => {
 });
 
 InputFieldEditModeNodes.displayName = 'InputFieldEditModeNodes';
+
+const useNodeFieldDnd = (
+  fieldIdentifier: FieldIdentifier,
+  draggableRef: RefObject<HTMLElement>,
+  dragHandleRef: RefObject<HTMLElement>
+) => {
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    const draggableElement = draggableRef.current;
+    const dragHandleElement = dragHandleRef.current;
+    if (!draggableElement || !dragHandleElement) {
+      return;
+    }
+    return combine(
+      firefoxDndFix(draggableElement),
+      draggable({
+        element: draggableElement,
+        dragHandle: dragHandleElement,
+        getInitialData: () => buildNodeFieldDndData(fieldIdentifier),
+        onDragStart: () => {
+          setIsDragging(true);
+        },
+        onDrop: () => {
+          setIsDragging(false);
+        },
+      })
+    );
+  }, [dragHandleRef, draggableRef, fieldIdentifier]);
+
+  return isDragging;
+};
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
index 0b2befc9980..01d83035307 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementComponent.tsx
@@ -13,7 +13,7 @@ import { TextElementComponent } from 'features/nodes/components/sidePanel/builde
 import { formElementAdded, selectWorkflowFormMode, useElement } from 'features/nodes/store/workflowSlice';
 import type { ContainerElement } from 'features/nodes/types/workflow';
 import {
-  container,
+  buildContainer,
   CONTAINER_CLASS_NAME,
   isContainerElement,
   isDividerElement,
@@ -99,7 +99,7 @@ ContainerElementComponentEditMode.displayName = 'ContainerElementComponentEditMo
 const AddColumnButton = ({ el }: { el: ContainerElement }) => {
   const dispatch = useAppDispatch();
   const onClick = useCallback(() => {
-    const element = container('column', [], el.id);
+    const element = buildContainer('column', [], el.id);
     dispatch(formElementAdded({ element, containerId: el.id }));
   }, [dispatch, el.id]);
   return (
@@ -110,7 +110,7 @@ const AddColumnButton = ({ el }: { el: ContainerElement }) => {
 const AddRowButton = ({ el }: { el: ContainerElement }) => {
   const dispatch = useAppDispatch();
   const onClick = useCallback(() => {
-    const element = container('row', [], el.id);
+    const element = buildContainer('row', [], el.id);
     dispatch(formElementAdded({ element, containerId: el.id }));
   }, [dispatch, el.id]);
   return (
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DndListDropIndicator.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DndListDropIndicator.tsx
index e1a89d5dc9c..9ce6294fd28 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DndListDropIndicator.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DndListDropIndicator.tsx
@@ -2,7 +2,7 @@
 import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Box } from '@invoke-ai/ui-library';
-import type { DndListTargetState } from 'features/nodes/components/sidePanel/builder/use-builder-dnd';
+import type { CenterOrEdge } from 'features/nodes/components/sidePanel/builder/center-or-closest-edge';
 
 /**
  * Design decisions for the drop indicator's main line
@@ -103,18 +103,23 @@ function DndDropIndicatorInternal({ edge, gap = '0px' }: DropIndicatorProps) {
   );
 }
 
-export const DndListDropIndicator = ({ dndState, gap }: { dndState: DndListTargetState; gap?: string }) => {
-  if (dndState.type !== 'is-dragging-over') {
+export const DndListDropIndicator = ({
+  activeDropRegion,
+  gap,
+}: {
+  activeDropRegion: CenterOrEdge | null;
+  gap?: string;
+}) => {
+  if (!activeDropRegion) {
     return null;
   }
-
-  if (!dndState.closestCenterOrEdge || dndState.closestCenterOrEdge === 'center') {
+  if (activeDropRegion === 'center') {
     return null;
   }
 
   return (
     <DndDropIndicatorInternal
-      edge={dndState.closestCenterOrEdge}
+      edge={activeDropRegion}
       // This is the gap between items in the list, used to calculate the position of the drop indicator
       gap={gap || 'var(--invoke-space-2)'}
     />
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
index 41905b3120d..6307cbf0700 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
@@ -37,7 +37,7 @@ const wrapperSx: SystemStyleObject = {
   '&[data-is-dragging="true"]': {
     opacity: 0.3,
   },
-  '&[data-is-dragging-over-center="true"]': {
+  '&[data-active-drop-region="center"]': {
     opacity: 1,
     bg: 'base.700',
   },
@@ -61,7 +61,7 @@ export const FormElementEditModeWrapper = memo(
   ({ element, children, ...rest }: { element: FormElement } & FlexProps) => {
     const draggableRef = useRef<HTMLDivElement>(null);
     const dragHandleRef = useRef<HTMLDivElement>(null);
-    const [dndListState, isDragging] = useDraggableFormElement(element.id, draggableRef, dragHandleRef);
+    const [activeDropRegion, isDragging] = useDraggableFormElement(element.id, draggableRef, dragHandleRef);
     const depth = useDepthContext();
     const dispatch = useAppDispatch();
     const removeElement = useCallback(() => {
@@ -75,9 +75,7 @@ export const FormElementEditModeWrapper = memo(
         sx={wrapperSx}
         className={EDIT_MODE_WRAPPER_CLASS_NAME}
         data-is-dragging={isDragging}
-        data-is-dragging-over-center={
-          dndListState.type === 'is-dragging-over' && dndListState.closestCenterOrEdge === 'center'
-        }
+        data-active-drop-region={activeDropRegion}
         {...rest}
       >
         <Flex ref={dragHandleRef} sx={headerSx} data-depth={depth}>
@@ -98,7 +96,7 @@ export const FormElementEditModeWrapper = memo(
         <Flex w="full" p={4} alignItems="center" gap={4}>
           {children}
         </Flex>
-        <DndListDropIndicator dndState={dndListState} gap="var(--invoke-space-4)" />
+        <DndListDropIndicator activeDropRegion={activeDropRegion} gap="var(--invoke-space-4)" />
       </Flex>
     );
   }
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
index d379af9ff90..1ab0450368b 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
@@ -1,11 +1,27 @@
-import { Button, Flex } from '@invoke-ai/ui-library';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { Button, ButtonGroup, Flex } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+import { firefoxDndFix } from 'features/dnd/util';
 import { FormElementComponent } from 'features/nodes/components/sidePanel/builder/ContainerElementComponent';
-import { useMonitorForFormElementDnd } from 'features/nodes/components/sidePanel/builder/use-builder-dnd';
+import {
+  buildAddFormElementDndData,
+  useMonitorForFormElementDnd,
+} from 'features/nodes/components/sidePanel/builder/use-builder-dnd';
 import { formLoaded, formModeToggled, selectWorkflowFormMode } from 'features/nodes/store/workflowSlice';
-import { elements, rootElementId } from 'features/nodes/types/workflow';
-import { memo, useCallback, useEffect } from 'react';
+import type { FormElement } from 'features/nodes/types/workflow';
+import {
+  buildContainer,
+  buildDivider,
+  buildHeading,
+  buildText,
+  elements,
+  rootElementId,
+} from 'features/nodes/types/workflow';
+import type { RefObject } from 'react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { assert } from 'tsafe';
 
 export const WorkflowBuilder = memo(() => {
   const dispatch = useAppDispatch();
@@ -19,8 +35,14 @@ export const WorkflowBuilder = memo(() => {
   return (
     <ScrollableContent>
       <Flex w="full" justifyContent="center">
-        <Flex flexDir="column" w={mode === 'view' ? '512px' : 'min-content'} minW="512px">
-          <ToggleModeButton />
+        <Flex flexDir="column" w={mode === 'view' ? '512px' : 'min-content'} minW="512px" gap={2}>
+          <ButtonGroup isAttached={false}>
+            <ToggleModeButton />
+            <AddFormElementDndButton type="container" />
+            <AddFormElementDndButton type="divider" />
+            <AddFormElementDndButton type="heading" />
+            <AddFormElementDndButton type="text" />
+          </ButtonGroup>
           {rootElementId && <FormElementComponent id={rootElementId} />}
         </Flex>
       </Flex>
@@ -41,3 +63,58 @@ const ToggleModeButton = memo(() => {
   return <Button onClick={onClick}>{mode === 'view' ? 'Edit' : 'View'}</Button>;
 });
 ToggleModeButton.displayName = 'ToggleModeButton';
+
+const useAddFormElementDnd = (type: Omit<FormElement['type'], 'node-field'>, draggableRef: RefObject<HTMLElement>) => {
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    const draggableElement = draggableRef.current;
+    if (!draggableElement) {
+      return;
+    }
+    return combine(
+      firefoxDndFix(draggableElement),
+      draggable({
+        element: draggableElement,
+        getInitialData: () => {
+          if (type === 'container') {
+            const element = buildContainer('row', []);
+            return buildAddFormElementDndData(element);
+          }
+          if (type === 'divider') {
+            const element = buildDivider();
+            return buildAddFormElementDndData(element);
+          }
+          if (type === 'heading') {
+            const element = buildHeading('default heading', 1);
+            return buildAddFormElementDndData(element);
+          }
+          if (type === 'text') {
+            const element = buildText('default text', 'sm');
+            return buildAddFormElementDndData(element);
+          }
+          assert(false);
+        },
+        onDragStart: () => {
+          setIsDragging(true);
+        },
+        onDrop: () => {
+          setIsDragging(false);
+        },
+      })
+    );
+  }, [draggableRef, type]);
+
+  return isDragging;
+};
+
+const AddFormElementDndButton = ({ type }: { type: Omit<FormElement['type'], 'node-field'> }) => {
+  const draggableRef = useRef<HTMLButtonElement>(null);
+  const isDragging = useAddFormElementDnd(type, draggableRef);
+
+  return (
+    <Button ref={draggableRef} variant="ghost" pointerEvents="auto" opacity={isDragging ? 0.3 : 1}>
+      {type}
+    </Button>
+  );
+};
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts
index 5cf562fcd7f..6b0c58c508c 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts
@@ -14,41 +14,54 @@ import {
   extractClosestCenterOrEdge,
 } from 'features/nodes/components/sidePanel/builder/center-or-closest-edge';
 import { getEditModeWrapperId } from 'features/nodes/components/sidePanel/builder/FormElementEditModeWrapper';
-import { formElementMoved } from 'features/nodes/store/workflowSlice';
+import { formElementAdded, formElementMoved } from 'features/nodes/store/workflowSlice';
+import type { FieldIdentifier } from 'features/nodes/types/field';
 import type { ElementId, FormElement } from 'features/nodes/types/workflow';
-import { isContainerElement } from 'features/nodes/types/workflow';
+import { buildNodeField, isContainerElement } from 'features/nodes/types/workflow';
 import type { RefObject } from 'react';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { assert } from 'tsafe';
 
-/**
- * States for a dnd list with containers.
- */
-export type DndListTargetState =
-  | {
-      type: 'idle';
-    }
-  | {
-      type: 'preview';
-      container: HTMLElement;
-    }
-  | {
-      type: 'is-dragging';
-    }
-  | {
-      type: 'is-dragging-over';
-      closestCenterOrEdge: CenterOrEdge | null;
-    };
-export const idle: DndListTargetState = { type: 'idle' };
-
-// using a symbol so we can guarantee a key with a unique value
-const uniqueBuilderDndKey = Symbol('builderDnd');
+const uniqueMoveFormElementKey = Symbol('move-form-element');
+type MoveFormElementDndData = {
+  [uniqueMoveFormElementKey]: true;
+  element: FormElement;
+};
+const buildMoveFormElementDndData = (element: FormElement): MoveFormElementDndData => ({
+  [uniqueMoveFormElementKey]: true,
+  element,
+});
+const isMoveFormElementDndData = (data: Record<string | symbol, unknown>): data is MoveFormElementDndData => {
+  return uniqueMoveFormElementKey in data;
+};
 
-type DndData = {
-  [uniqueBuilderDndKey]: true;
+const uniqueAddFormElementKey = Symbol('add-form-element');
+type AddFormElementDndData = {
+  [uniqueAddFormElementKey]: true;
   element: FormElement;
 };
+export const buildAddFormElementDndData = (element: FormElement): AddFormElementDndData => ({
+  [uniqueAddFormElementKey]: true,
+  element,
+});
+const isAddFormElementDndData = (data: Record<string | symbol, unknown>): data is AddFormElementDndData => {
+  return uniqueAddFormElementKey in data;
+};
+
+const uniqueNodeFieldKey = Symbol('node-field');
+type NodeFieldDndData = {
+  [uniqueNodeFieldKey]: true;
+  fieldIdentifier: FieldIdentifier;
+};
+export const buildNodeFieldDndData = (fieldIdentifier: FieldIdentifier): NodeFieldDndData => ({
+  [uniqueNodeFieldKey]: true,
+  fieldIdentifier,
+});
+
+const isNodeFieldDndData = (data: Record<string | symbol, unknown>): data is NodeFieldDndData => {
+  return uniqueNodeFieldKey in data;
+};
 
 const getElement = <T extends FormElement>(id: ElementId, guard?: (el: FormElement) => el is T): T => {
   const el = getStore().getState().workflow.form?.elements[id];
@@ -61,88 +74,204 @@ const getElement = <T extends FormElement>(id: ElementId, guard?: (el: FormEleme
   }
 };
 
-const adjustIndexForDrop = (index: number, edge: Exclude<CenterOrEdge, 'center'>) => {
+const adjustIndexForFormElementMoveDrop = (index: number, edge: Exclude<CenterOrEdge, 'center'>) => {
   if (edge === 'left' || edge === 'top') {
     return index - 1;
   }
   return index + 1;
 };
 
+const adjustIndexForNodeFieldDrop = (index: number, edge: Exclude<CenterOrEdge, 'center'>) => {
+  if (edge === 'left' || edge === 'top') {
+    return index;
+  }
+  return index + 1;
+};
+
+const flashElement = (elementId: ElementId) => {
+  const element = document.querySelector(`#${getEditModeWrapperId(elementId)}`);
+  if (element instanceof HTMLElement) {
+    triggerPostMoveFlash(element, colorTokenToCssVar('base.700'));
+  }
+};
+
 export const useMonitorForFormElementDnd = () => {
   const dispatch = useAppDispatch();
 
+  const handleMoveFormElementDrop = useCallback(
+    (sourceData: MoveFormElementDndData, targetData: MoveFormElementDndData) => {
+      if (sourceData.element.id === targetData.element.id) {
+        return;
+      }
+
+      const closestCenterOrEdge = extractClosestCenterOrEdge(targetData);
+
+      if (closestCenterOrEdge === 'center') {
+        // Move the element to the target container - should we double-check that the target is a container?
+        flushSync(() => {
+          dispatch(formElementMoved({ id: sourceData.element.id, containerId: targetData.element.id }));
+        });
+        // Flash the element that was moved
+        flashElement(sourceData.element.id);
+      } else if (closestCenterOrEdge) {
+        // Move the element to the target's parent container at the correct index
+        const { parentId } = targetData.element;
+        assert(parentId !== undefined, 'Target element should have a parent');
+
+        const isReparenting = parentId !== sourceData.element.parentId;
+
+        const parentContainer = getElement(parentId, isContainerElement);
+        const targetIndex = parentContainer.data.children.findIndex((elementId) => elementId === targetData.element.id);
+
+        let index: number | undefined = undefined;
+
+        if (!isReparenting) {
+          const sourceIndex = parentContainer.data.children.findIndex(
+            (elementId) => elementId === sourceData.element.id
+          );
+          if (
+            sourceIndex === targetIndex ||
+            sourceIndex === adjustIndexForFormElementMoveDrop(targetIndex, closestCenterOrEdge)
+          ) {
+            return;
+          }
+          index = targetIndex;
+        } else {
+          index = adjustIndexForFormElementMoveDrop(targetIndex, closestCenterOrEdge);
+        }
+
+        flushSync(() => {
+          dispatch(
+            formElementMoved({
+              id: sourceData.element.id,
+              containerId: parentId,
+              index,
+            })
+          );
+        });
+        // Flash the element that was moved
+        flashElement(sourceData.element.id);
+      } else {
+        // No container, cannot do anything
+        return;
+      }
+    },
+    [dispatch]
+  );
+
+  const handleAddFormElementDrop = useCallback(
+    (sourceData: AddFormElementDndData, targetData: MoveFormElementDndData) => {
+      const closestCenterOrEdge = extractClosestCenterOrEdge(targetData);
+
+      if (closestCenterOrEdge === 'center') {
+        // Move the element to the target container - should we double-check that the target is a container?
+        const { element } = sourceData;
+        flushSync(() => {
+          dispatch(formElementAdded({ element, containerId: targetData.element.id }));
+        });
+        flashElement(element.id);
+      } else if (closestCenterOrEdge) {
+        // Move the element to the target's parent container at the correct index
+        const { parentId } = targetData.element;
+        assert(parentId !== undefined, 'Target element should have a parent');
+        const { element } = sourceData;
+
+        const parentContainer = getElement(parentId, isContainerElement);
+        const targetIndex = parentContainer.data.children.findIndex((elementId) => elementId === targetData.element.id);
+
+        const index = adjustIndexForNodeFieldDrop(targetIndex, closestCenterOrEdge);
+
+        flushSync(() => {
+          dispatch(
+            formElementAdded({
+              element,
+              containerId: parentId,
+              index,
+            })
+          );
+        });
+        flashElement(element.id);
+      } else {
+        // No container, cannot do anything
+        return;
+      }
+    },
+    [dispatch]
+  );
+
+  const handleNodeFieldDrop = useCallback(
+    (sourceData: NodeFieldDndData, targetData: MoveFormElementDndData) => {
+      const closestCenterOrEdge = extractClosestCenterOrEdge(targetData);
+      const { nodeId, fieldName } = sourceData.fieldIdentifier;
+
+      if (closestCenterOrEdge === 'center') {
+        // Move the element to the target container - should we double-check that the target is a container?
+        const element = buildNodeField(nodeId, fieldName, targetData.element.id);
+        flushSync(() => {
+          dispatch(formElementAdded({ element, containerId: targetData.element.id }));
+        });
+        flashElement(element.id);
+      } else if (closestCenterOrEdge) {
+        // Move the element to the target's parent container at the correct index
+        const { parentId } = targetData.element;
+        assert(parentId !== undefined, 'Target element should have a parent');
+        const element = buildNodeField(nodeId, fieldName, parentId);
+
+        const parentContainer = getElement(parentId, isContainerElement);
+        const targetIndex = parentContainer.data.children.findIndex((elementId) => elementId === targetData.element.id);
+
+        const index = adjustIndexForNodeFieldDrop(targetIndex, closestCenterOrEdge);
+
+        flushSync(() => {
+          dispatch(
+            formElementAdded({
+              element,
+              containerId: parentId,
+              index,
+            })
+          );
+        });
+        flashElement(element.id);
+      } else {
+        // No container, cannot do anything
+        return;
+      }
+    },
+    [dispatch]
+  );
+
   useEffect(() => {
     return monitorForElements({
-      canMonitor: ({ source }) => uniqueBuilderDndKey in source.data,
+      canMonitor: ({ source }) =>
+        isMoveFormElementDndData(source.data) ||
+        isNodeFieldDndData(source.data) ||
+        isAddFormElementDndData(source.data),
       onDrop: ({ location, source }) => {
         const target = location.current.dropTargets[0];
         if (!target) {
           return;
         }
 
-        const sourceData = source.data as DndData;
-        const targetData = target.data as DndData;
+        const sourceData = source.data;
+        const targetData = target.data;
 
-        //
-        if (sourceData.element.id === targetData.element.id) {
+        if (isMoveFormElementDndData(targetData) && isMoveFormElementDndData(sourceData)) {
+          handleMoveFormElementDrop(sourceData, targetData);
           return;
         }
 
-        const closestCenterOrEdge = extractClosestCenterOrEdge(targetData);
-
-        if (closestCenterOrEdge === 'center') {
-          // Move the element to the target container - should we double-check that the target is a container?
-          flushSync(() => {
-            dispatch(formElementMoved({ id: sourceData.element.id, containerId: targetData.element.id }));
-          });
-        } else if (closestCenterOrEdge) {
-          // Move the element to the target's parent container at the correct index
-          const { parentId } = targetData.element;
-          assert(parentId !== undefined, 'Target element should have a parent');
-
-          const isReparenting = parentId !== sourceData.element.parentId;
-
-          const parentContainer = getElement(parentId, isContainerElement);
-          const targetIndex = parentContainer.data.children.findIndex(
-            (elementId) => elementId === targetData.element.id
-          );
-
-          let index: number | undefined = undefined;
-
-          if (!isReparenting) {
-            const sourceIndex = parentContainer.data.children.findIndex(
-              (elementId) => elementId === sourceData.element.id
-            );
-            if (sourceIndex === targetIndex || sourceIndex === adjustIndexForDrop(targetIndex, closestCenterOrEdge)) {
-              return;
-            }
-            index = targetIndex;
-          } else {
-            index = adjustIndexForDrop(targetIndex, closestCenterOrEdge);
-          }
-
-          flushSync(() => {
-            dispatch(
-              formElementMoved({
-                id: sourceData.element.id,
-                containerId: parentId,
-                index,
-              })
-            );
-          });
-        } else {
-          // No container, cannot do anything
+        if (isMoveFormElementDndData(targetData) && isAddFormElementDndData(sourceData)) {
+          handleAddFormElementDrop(sourceData, targetData);
           return;
         }
 
-        // Flash the element that was moved
-        const element = document.querySelector(`#${getEditModeWrapperId(sourceData.element.id)}`);
-        if (element instanceof HTMLElement) {
-          triggerPostMoveFlash(element, colorTokenToCssVar('base.700'));
+        if (isMoveFormElementDndData(targetData) && isNodeFieldDndData(sourceData)) {
+          handleNodeFieldDrop(sourceData, targetData);
+          return;
         }
       },
     });
-  }, [dispatch]);
+  }, [handleAddFormElementDrop, handleMoveFormElementDrop, handleNodeFieldDrop]);
 };
 
 export const useDraggableFormElement = (
@@ -150,8 +279,8 @@ export const useDraggableFormElement = (
   draggableRef: RefObject<HTMLElement>,
   dragHandleRef: RefObject<HTMLElement>
 ) => {
-  const [dndListState, setListDndState] = useState<DndListTargetState>(idle);
   const [isDragging, setIsDragging] = useState(false);
+  const [activeDropRegion, setActiveDropRegion] = useState<CenterOrEdge | null>(null);
 
   useEffect(() => {
     const draggableElement = draggableRef.current;
@@ -169,30 +298,25 @@ export const useDraggableFormElement = (
       draggable({
         element: draggableElement,
         dragHandle: dragHandleElement,
-        getInitialData: () => ({
-          [uniqueBuilderDndKey]: true,
-          element: getElement(elementId),
-        }),
+        getInitialData: () => buildMoveFormElementDndData(getElement(elementId)),
         onDragStart: () => {
-          setListDndState({ type: 'is-dragging' });
           setIsDragging(true);
         },
         onDrop: () => {
-          setListDndState(idle);
           setIsDragging(false);
         },
       }),
       dropTargetForElements({
         element: draggableElement,
-        canDrop: ({ source }) => uniqueBuilderDndKey in source.data,
+        canDrop: ({ source }) =>
+          isMoveFormElementDndData(source.data) ||
+          isNodeFieldDndData(source.data) ||
+          isAddFormElementDndData(source.data),
         getData: ({ input }) => {
           const element = getElement(elementId);
           const container = element.parentId ? getElement(element.parentId, isContainerElement) : null;
 
-          const data: DndData = {
-            [uniqueBuilderDndKey]: true,
-            element,
-          };
+          const data = buildMoveFormElementDndData(element);
 
           const allowedCenterOrEdge: CenterOrEdge[] = [];
 
@@ -220,7 +344,7 @@ export const useDraggableFormElement = (
 
           // If the innermost target is not this draggable element, bail. We only want to react when dragging over _this_ element.
           if (!innermostDropTargetElement || innermostDropTargetElement !== draggableElement) {
-            setListDndState(idle);
+            setActiveDropRegion(null);
             return;
           }
 
@@ -228,28 +352,23 @@ export const useDraggableFormElement = (
 
           // Don't allow reparanting to the same container
           if (closestCenterOrEdge === 'center' && source.element === draggableElement) {
-            setListDndState(idle);
+            setActiveDropRegion(null);
             return;
           }
 
           // Only need to update react state if nothing has changed.
           // Prevents re-rendering.
-          setListDndState((current) => {
-            if (current.type === 'is-dragging-over' && current.closestCenterOrEdge === closestCenterOrEdge) {
-              return current;
-            }
-            return { type: 'is-dragging-over', closestCenterOrEdge };
-          });
+          setActiveDropRegion(closestCenterOrEdge);
         },
         onDragLeave: () => {
-          setListDndState(idle);
+          setActiveDropRegion(null);
         },
         onDrop: () => {
-          setListDndState(idle);
+          setActiveDropRegion(null);
         },
       })
     );
   }, [dragHandleRef, draggableRef, elementId]);
 
-  return [dndListState, isDragging] as const;
+  return [activeDropRegion, isDragging] as const;
 };
diff --git a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
index 47fdbc65633..8850a405d4d 100644
--- a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
@@ -400,6 +400,7 @@ const addElement = (args: {
     return;
   }
 
+  element.parentId = containerId;
   elements[element.id] = element;
 
   if (index === undefined) {
diff --git a/invokeai/frontend/web/src/features/nodes/types/workflow.ts b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
index 2ee91f3a038..daf493cdbe8 100644
--- a/invokeai/frontend/web/src/features/nodes/types/workflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
@@ -108,7 +108,7 @@ const zNodeFieldElement = zElementBase.extend({
 });
 export type NodeFieldElement = z.infer<typeof zNodeFieldElement>;
 export const isNodeFieldElement = (el: FormElement): el is NodeFieldElement => el.type === NODE_FIELD_TYPE;
-const nodeField = (
+export const buildNodeField = (
   nodeId: NodeFieldElement['data']['fieldIdentifier']['nodeId'],
   fieldName: NodeFieldElement['data']['fieldIdentifier']['fieldName'],
   parentId?: NodeFieldElement['parentId']
@@ -123,8 +123,8 @@ const nodeField = (
   };
   return element;
 };
-const _nodeField = (...args: Parameters<typeof nodeField>): NodeFieldElement => {
-  const element = nodeField(...args);
+const _nodeField = (...args: Parameters<typeof buildNodeField>): NodeFieldElement => {
+  const element = buildNodeField(...args);
   addElement(element);
   return element;
 };
@@ -140,7 +140,7 @@ const zHeadingElement = zElementBase.extend({
 });
 export type HeadingElement = z.infer<typeof zHeadingElement>;
 export const isHeadingElement = (el: FormElement): el is HeadingElement => el.type === HEADING_TYPE;
-const heading = (
+export const buildHeading = (
   content: HeadingElement['data']['content'],
   level: HeadingElement['data']['level'],
   parentId?: NodeFieldElement['parentId']
@@ -156,8 +156,8 @@ const heading = (
   };
   return element;
 };
-const _heading = (...args: Parameters<typeof heading>): HeadingElement => {
-  const element = heading(...args);
+const _heading = (...args: Parameters<typeof buildHeading>): HeadingElement => {
+  const element = buildHeading(...args);
   addElement(element);
   return element;
 };
@@ -173,7 +173,7 @@ const zTextElement = zElementBase.extend({
 });
 export type TextElement = z.infer<typeof zTextElement>;
 export const isTextElement = (el: FormElement): el is TextElement => el.type === TEXT_TYPE;
-const text = (
+export const buildText = (
   content: TextElement['data']['content'],
   fontSize: TextElement['data']['fontSize'],
   parentId?: NodeFieldElement['parentId']
@@ -187,11 +187,10 @@ const text = (
       fontSize,
     },
   };
-  addElement(element);
   return element;
 };
-const _text = (...args: Parameters<typeof text>): TextElement => {
-  const element = text(...args);
+const _text = (...args: Parameters<typeof buildText>): TextElement => {
+  const element = buildText(...args);
   addElement(element);
   return element;
 };
@@ -203,17 +202,16 @@ const zDividerElement = zElementBase.extend({
 });
 export type DividerElement = z.infer<typeof zDividerElement>;
 export const isDividerElement = (el: FormElement): el is DividerElement => el.type === DIVIDER_TYPE;
-const divider = (parentId?: NodeFieldElement['parentId']): DividerElement => {
+export const buildDivider = (parentId?: NodeFieldElement['parentId']): DividerElement => {
   const element: DividerElement = {
     id: getPrefixedId(DIVIDER_TYPE, '-'),
     parentId,
     type: DIVIDER_TYPE,
   };
-  addElement(element);
   return element;
 };
-const _divider = (...args: Parameters<typeof divider>): DividerElement => {
-  const element = divider(...args);
+const _divider = (...args: Parameters<typeof buildDivider>): DividerElement => {
+  const element = buildDivider(...args);
   addElement(element);
   return element;
 };
@@ -229,7 +227,7 @@ const zContainerElement = zElementBase.extend({
 });
 export type ContainerElement = z.infer<typeof zContainerElement>;
 export const isContainerElement = (el: FormElement): el is ContainerElement => el.type === CONTAINER_TYPE;
-export const container = (
+export const buildContainer = (
   direction: ContainerElement['data']['direction'],
   children: ContainerElement['data']['children'],
   parentId?: NodeFieldElement['parentId']
@@ -245,8 +243,8 @@ export const container = (
   };
   return element;
 };
-export const _container = (...args: Parameters<typeof container>): ContainerElement => {
-  const element = container(...args);
+export const _container = (...args: Parameters<typeof buildContainer>): ContainerElement => {
+  const element = buildContainer(...args);
   addElement(element);
   return element;
 };
@@ -262,21 +260,25 @@ export type FormElement = z.infer<typeof zFormElement>;
 //   _container('row', [_container('column', []).id, _container('column', []).id, _container('column', []).id]).id,
 // ]).id;
 
-const rootContainer = container('column', []);
+const rootContainer = buildContainer('column', []);
 addElement(rootContainer);
+const rowContainer = buildContainer('row', [], rootContainer.id);
+const rowContainerChildren = [
+  _nodeField('58e748ec-7405-4816-a5ff-c168ee35161a', 'value', rowContainer.id),
+  _nodeField('1b383334-2efc-406d-a000-49c4c5ebccde', 'value', rowContainer.id),
+  _nodeField('7ebda150-63c7-4ccd-a1d2-444459107393', 'value', rowContainer.id),
+];
+rowContainerChildren.forEach((child) => {
+  addElement(child);
+  rowContainer.data.children.push(child.id);
+});
+
 const children = [
-  heading('My Cool Workflow', 1, rootContainer.id),
-  text('This is a description of what my workflow does. It does things.', 'md', rootContainer.id),
-  divider(rootContainer.id),
-  heading('First Section', 2, rootContainer.id),
-  text(
-    'The first section includes fields relevant to the first section. This note describes that fact.',
-    'sm',
-    rootContainer.id
-  ),
-  divider(rootContainer.id),
-  text('These are some text that are definitely super helpful.', 'sm', rootContainer.id),
-  divider(rootContainer.id),
+  buildHeading('My Cool Workflow', 1, rootContainer.id),
+  buildText('This is a description of what my workflow does. It does things.', 'md', rootContainer.id),
+  buildDivider(rootContainer.id),
+  buildText('These are some text that are definitely super helpful.', 'sm', rootContainer.id),
+  rowContainer,
 ];
 children.forEach((child) => {
   addElement(child);

From d58ed05bcb34b5b83faac05ed995d9276a91639e Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 25 Jan 2025 21:39:59 +1100
Subject: [PATCH 41/58] fix(ui): allow root element to be drop target

---
 .../nodes/components/sidePanel/builder/use-builder-dnd.ts  | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts
index 6b0c58c508c..8ce8f80364a 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts
@@ -289,13 +289,12 @@ export const useDraggableFormElement = (
       return;
     }
     const _element = getElement(elementId);
-    if (!_element.parentId) {
-      // Root element, cannot drag
-      return;
-    }
+
     return combine(
       firefoxDndFix(draggableElement),
       draggable({
+        // The root element is not draggable
+        canDrag: () => Boolean(_element.parentId),
         element: draggableElement,
         dragHandle: dragHandleElement,
         getInitialData: () => buildMoveFormElementDndData(getElement(elementId)),

From d3b42948d6639343c9cae29413b60bda2388f4dc Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 25 Jan 2025 21:40:56 +1100
Subject: [PATCH 42/58] fix(ui): start workflow w/ single column as root

---
 .../src/features/nodes/store/workflowSlice.ts | 35 ++++++++++++-------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
index 8850a405d4d..59c24e5e571 100644
--- a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
@@ -13,6 +13,7 @@ import type {
 import type { FieldIdentifier } from 'features/nodes/types/field';
 import { isInvocationNode } from 'features/nodes/types/invocation';
 import {
+  buildContainer,
   type ContainerElement,
   type FormElement,
   isContainerElement,
@@ -25,18 +26,26 @@ import type { SQLiteDirection, WorkflowRecordOrderBy } from 'services/api/types'
 
 import { selectNodesSlice } from './selectors';
 
-const blankWorkflow: Omit<WorkflowV3, 'nodes' | 'edges'> = {
-  name: '',
-  author: '',
-  description: '',
-  version: '',
-  contact: '',
-  tags: '',
-  notes: '',
-  exposedFields: [],
-  meta: { version: '3.0.0', category: 'user' },
-  id: undefined,
-  form: undefined,
+const getBlankWorkflow = (): Omit<WorkflowV3, 'nodes' | 'edges'> => {
+  const rootElement = buildContainer('column', []);
+  return {
+    name: '',
+    author: '',
+    description: '',
+    version: '',
+    contact: '',
+    tags: '',
+    notes: '',
+    exposedFields: [],
+    meta: { version: '3.0.0', category: 'user' },
+    id: undefined,
+    form: {
+      elements: {
+        [rootElement.id]: rootElement,
+      },
+      rootElementId: rootElement.id,
+    },
+  };
 };
 
 const initialWorkflowState: WorkflowState = {
@@ -49,7 +58,7 @@ const initialWorkflowState: WorkflowState = {
   orderDirection: 'DESC',
   categorySections: {},
   formMode: 'view',
-  ...blankWorkflow,
+  ...getBlankWorkflow(),
 };
 
 export const workflowSlice = createSlice({

From 7c7d8928d074f36d88f1115e63442426bc6c1f38 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 25 Jan 2025 21:41:25 +1100
Subject: [PATCH 43/58] fix(ui): use redux store for form

---
 .../sidePanel/builder/WorkflowBuilder.tsx     | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
index 1ab0450368b..f76e66a2dad 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx
@@ -9,34 +9,23 @@ import {
   buildAddFormElementDndData,
   useMonitorForFormElementDnd,
 } from 'features/nodes/components/sidePanel/builder/use-builder-dnd';
-import { formLoaded, formModeToggled, selectWorkflowFormMode } from 'features/nodes/store/workflowSlice';
+import { formModeToggled, selectRootElementId, selectWorkflowFormMode } from 'features/nodes/store/workflowSlice';
 import type { FormElement } from 'features/nodes/types/workflow';
-import {
-  buildContainer,
-  buildDivider,
-  buildHeading,
-  buildText,
-  elements,
-  rootElementId,
-} from 'features/nodes/types/workflow';
+import { buildContainer, buildDivider, buildHeading, buildText } from 'features/nodes/types/workflow';
 import type { RefObject } from 'react';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { assert } from 'tsafe';
 
 export const WorkflowBuilder = memo(() => {
-  const dispatch = useAppDispatch();
   const mode = useAppSelector(selectWorkflowFormMode);
+  const rootElementId = useAppSelector(selectRootElementId);
   useMonitorForFormElementDnd();
 
-  useEffect(() => {
-    // dispatch(formReset());
-    dispatch(formLoaded({ elements, rootElementId }));
-  }, [dispatch]);
   return (
     <ScrollableContent>
       <Flex w="full" justifyContent="center">
         <Flex flexDir="column" w={mode === 'view' ? '512px' : 'min-content'} minW="512px" gap={2}>
-          <ButtonGroup isAttached={false}>
+          <ButtonGroup isAttached={false} justifyContent="center">
             <ToggleModeButton />
             <AddFormElementDndButton type="container" />
             <AddFormElementDndButton type="divider" />

From 99b57acc8be32b41094505af15c4ff2559d0825e Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 25 Jan 2025 21:41:51 +1100
Subject: [PATCH 44/58] tidy(ui): remove unused mock form builder data

---
 .../web/src/features/nodes/types/workflow.ts  | 74 -------------------
 1 file changed, 74 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/types/workflow.ts b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
index daf493cdbe8..c899cf91073 100644
--- a/invokeai/frontend/web/src/features/nodes/types/workflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
@@ -252,77 +252,3 @@ export const _container = (...args: Parameters<typeof buildContainer>): Containe
 const zFormElement = z.union([zContainerElement, zNodeFieldElement, zHeadingElement, zTextElement, zDividerElement]);
 
 export type FormElement = z.infer<typeof zFormElement>;
-
-// export const rootElementId: string = _container('column', [
-//   _heading('My Cool Workflow', 1).id,
-//   _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-//   _nodeField('14744f68-9000-4694-b4d6-cbe83ee231ee', 'model').id,
-//   _container('row', [_container('column', []).id, _container('column', []).id, _container('column', []).id]).id,
-// ]).id;
-
-const rootContainer = buildContainer('column', []);
-addElement(rootContainer);
-const rowContainer = buildContainer('row', [], rootContainer.id);
-const rowContainerChildren = [
-  _nodeField('58e748ec-7405-4816-a5ff-c168ee35161a', 'value', rowContainer.id),
-  _nodeField('1b383334-2efc-406d-a000-49c4c5ebccde', 'value', rowContainer.id),
-  _nodeField('7ebda150-63c7-4ccd-a1d2-444459107393', 'value', rowContainer.id),
-];
-rowContainerChildren.forEach((child) => {
-  addElement(child);
-  rowContainer.data.children.push(child.id);
-});
-
-const children = [
-  buildHeading('My Cool Workflow', 1, rootContainer.id),
-  buildText('This is a description of what my workflow does. It does things.', 'md', rootContainer.id),
-  buildDivider(rootContainer.id),
-  buildText('These are some text that are definitely super helpful.', 'sm', rootContainer.id),
-  rowContainer,
-];
-children.forEach((child) => {
-  addElement(child);
-  rootContainer.data.children.push(child.id);
-});
-
-export const rootElementId = rootContainer.id;
-// export const rootElementId: string = _container('column', [
-//   _heading('My Cool Workflow', 1).id,
-//   _text('This is a description of what my workflow does. It does things.', 'md').id,
-//   _divider().id,
-//   _heading('First Section', 2).id,
-//   _text('The first section includes fields relevant to the first section. This note describes that fact.', 'sm').id,
-//   _divider().id,
-//   // _container('row', [
-//   //   _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
-//   //   _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
-//   //   _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
-//   // ]).id,
-//   // _nodeField('9c058600-8d73-4702-912b-0ccf37403bfd', 'value').id,
-//   // _nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value').id,
-//   // _nodeField('4e16cbf6-457c-46fb-9ab7-9cb262fa1e03', 'value').id,
-//   // _nodeField('39cb5272-a9d7-4da9-9c35-32e02b46bb34', 'color').id,
-//   // _container('row', [
-//   //   _container('column', [
-//   //     _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-//   //     _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-//   //   ]).id,
-//   //   _container('column', [
-//   //     _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-//   //     _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-//   //     _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
-//   //     _nodeField('4f609a81-0e25-47d1-ba0d-f24fedd5273f', 'value').id,
-//   //   ]).id,
-//   // ]).id,
-//   // _nodeField('14744f68-9000-4694-b4d6-cbe83ee231ee', 'model').id,
-//   _divider().id,
-//   _text('These are some text that are definitely super helpful.', 'sm').id,
-//   _divider().id,
-//   // _container('row', [
-//   //   _container('column', [
-//   //     _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
-//   //     _nodeField('7aed1a5f-7fd7-4184-abe8-ddea0ea5e706', 'image').id,
-//   //   ]).id,
-//   //   _container('column', [_nodeField('7a8bbab2-6919-4cfc-bd7c-bcfda3c79ecf', 'value').id]).id,
-//   // ]).id,
-// ]).id;

From 98cdbedb101f13d88a4fe2b471e10863d99efe90 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 25 Jan 2025 21:45:12 +1100
Subject: [PATCH 45/58] fix(ui): hide nonfunctional delete button on root form
 element

---
 .../builder/FormElementEditModeWrapper.tsx    | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
index 6307cbf0700..9a433e05fa9 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
@@ -83,15 +83,17 @@ export const FormElementEditModeWrapper = memo(
             {getHeaderLabel(element)} ({element.id})
           </Text>
           <Spacer />
-          <IconButton
-            aria-label="delete"
-            onClick={removeElement}
-            icon={<PiXBold />}
-            variant="link"
-            size="sm"
-            alignSelf="stretch"
-            colorScheme="error"
-          />
+          {element.parentId && (
+            <IconButton
+              aria-label="delete"
+              onClick={removeElement}
+              icon={<PiXBold />}
+              variant="link"
+              size="sm"
+              alignSelf="stretch"
+              colorScheme="error"
+            />
+          )}
         </Flex>
         <Flex w="full" p={4} alignItems="center" gap={4}>
           {children}

From d51529b23958ef64b3b1694e9515262c26a52f42 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 26 Jan 2025 10:11:05 +1100
Subject: [PATCH 46/58] chore(ui): upgrade reactflow to v12

---
 invokeai/frontend/web/package.json            |   2 +-
 invokeai/frontend/web/pnpm-lock.yaml          | 311 ++----------------
 .../components/NodeSelectionOverlay.tsx       |  39 ---
 .../features/nodes/components/NodeEditor.tsx  |   2 +-
 .../flow/AddNodeCmdk/AddNodeCmdk.tsx          |   7 +-
 .../features/nodes/components/flow/Flow.tsx   |  62 ++--
 .../connectionLines/CustomConnectionLine.tsx  |   4 +-
 .../flow/edges/InvocationCollapsedEdge.tsx    |   7 +-
 .../flow/edges/InvocationDefaultEdge.tsx      |   7 +-
 .../nodes/CurrentImage/CurrentImageNode.tsx   |   2 +-
 .../InvocationNodeCollapsedHandles.tsx        |   2 +-
 .../Invocation/InvocationNodeWrapper.tsx      |   4 +-
 .../nodes/Invocation/fields/FieldHandle.tsx   |   8 +-
 .../fields/IntegerField/useIntegerField.ts    |   4 +-
 .../components/flow/nodes/Notes/NotesNode.tsx |   4 +-
 .../flow/nodes/common/NodeCollapseButton.tsx  |   2 +-
 .../flow/nodes/common/NodeWrapper.tsx         | 115 ++++---
 .../BottomLeftPanel/ViewportControls.tsx      |   2 +-
 .../flow/panels/MinimapPanel/MinimapPanel.tsx |   2 +-
 .../TopRightPanel/WorkflowEditorSettings.tsx  |   2 +-
 .../sidePanel/EditModeLeftPanelContent.tsx    |   2 +-
 .../sidePanel/WorkflowsTabLeftPanel.tsx       |   2 +-
 .../builder/NodeFieldElementComponent.tsx     |   2 +-
 .../src/features/nodes/hooks/useBuildNode.ts  |   2 +-
 .../src/features/nodes/hooks/useConnection.ts |   7 +-
 .../nodes/hooks/useIsValidConnection.ts       |   9 +-
 .../web/src/features/nodes/hooks/useNode.ts   |   2 +-
 .../features/nodes/hooks/useNodeCopyPaste.ts  |   7 +-
 .../src/features/nodes/store/nodesSlice.ts    |  61 ++--
 .../features/nodes/store/reactFlowInstance.ts |   5 +-
 .../web/src/features/nodes/store/selectors.ts |   5 +-
 .../web/src/features/nodes/store/types.ts     |   6 +-
 .../store/util/findUnoccupiedPosition.ts      |   2 +-
 .../nodes/store/util/getCollectItemType.ts    |   4 +-
 .../store/util/getFirstValidConnection.ts     |  16 +-
 .../features/nodes/store/util/getHasCycles.ts |   2 +-
 .../store/util/makeConnectionErrorSelector.ts |   7 +-
 .../nodes/store/util/reactFlowUtil.ts         |   5 +-
 .../features/nodes/store/util/testUtils.ts    |   5 +-
 .../nodes/store/util/validateConnection.ts    |  12 +-
 .../nodes/store/workflowSettingsSlice.ts      |   2 +-
 .../web/src/features/nodes/types/constants.ts |   4 +-
 .../src/features/nodes/types/invocation.ts    |  16 +-
 .../features/nodes/types/workflow.test-d.ts   |   4 +-
 .../nodes/util/node/buildCurrentImageNode.ts  |   2 +-
 .../nodes/util/node/buildInvocationNode.ts    |   2 +-
 .../nodes/util/node/buildNotesNode.ts         |   2 +-
 .../web/src/features/queue/store/readiness.ts |   6 +-
 .../components/tabs/WorkflowsTabContent.tsx   |   2 +-
 49 files changed, 277 insertions(+), 514 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/common/components/NodeSelectionOverlay.tsx

diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json
index ef1bbb04503..8cc58ee14b1 100644
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@@ -62,6 +62,7 @@
     "@nanostores/react": "^0.7.3",
     "@reduxjs/toolkit": "2.2.3",
     "@roarr/browser-log-writer": "^1.3.0",
+    "@xyflow/react": "^12.4.2",
     "async-mutex": "^0.5.0",
     "chakra-react-select": "^4.9.2",
     "cmdk": "^1.0.0",
@@ -98,7 +99,6 @@
     "react-resizable-panels": "^2.1.4",
     "react-use": "^17.5.1",
     "react-virtuoso": "^4.10.4",
-    "reactflow": "^11.11.4",
     "redux-dynamic-middlewares": "^2.2.0",
     "redux-remember": "^5.1.0",
     "redux-undo": "^1.1.0",
diff --git a/invokeai/frontend/web/pnpm-lock.yaml b/invokeai/frontend/web/pnpm-lock.yaml
index 4d7a0830d24..ff9759d6627 100644
--- a/invokeai/frontend/web/pnpm-lock.yaml
+++ b/invokeai/frontend/web/pnpm-lock.yaml
@@ -35,6 +35,9 @@ dependencies:
   '@roarr/browser-log-writer':
     specifier: ^1.3.0
     version: 1.3.0
+  '@xyflow/react':
+    specifier: ^12.4.2
+    version: 12.4.2(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
   async-mutex:
     specifier: ^0.5.0
     version: 0.5.0
@@ -143,9 +146,6 @@ dependencies:
   react-virtuoso:
     specifier: ^4.10.4
     version: 4.10.4(react-dom@18.3.1)(react@18.3.1)
-  reactflow:
-    specifier: ^11.11.4
-    version: 11.11.4(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
   redux-dynamic-middlewares:
     specifier: ^2.2.0
     version: 2.2.0
@@ -2170,114 +2170,6 @@ packages:
       react: 18.3.1
     dev: false
 
-  /@reactflow/background@11.3.14(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-Gewd7blEVT5Lh6jqrvOgd4G6Qk17eGKQfsDXgyRSqM+CTwDqRldG2LsWN4sNeno6sbqVIC2fZ+rAUBFA9ZEUDA==}
-    peerDependencies:
-      react: '>=17'
-      react-dom: '>=17'
-    dependencies:
-      '@reactflow/core': 11.11.4(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
-      classcat: 5.0.5
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      zustand: 4.5.5(@types/react@18.3.11)(react@18.3.1)
-    transitivePeerDependencies:
-      - '@types/react'
-      - immer
-    dev: false
-
-  /@reactflow/controls@11.2.14(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-MiJp5VldFD7FrqaBNIrQ85dxChrG6ivuZ+dcFhPQUwOK3HfYgX2RHdBua+gx+40p5Vw5It3dVNp/my4Z3jF0dw==}
-    peerDependencies:
-      react: '>=17'
-      react-dom: '>=17'
-    dependencies:
-      '@reactflow/core': 11.11.4(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
-      classcat: 5.0.5
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      zustand: 4.5.5(@types/react@18.3.11)(react@18.3.1)
-    transitivePeerDependencies:
-      - '@types/react'
-      - immer
-    dev: false
-
-  /@reactflow/core@11.11.4(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-H4vODklsjAq3AMq6Np4LE12i1I4Ta9PrDHuBR9GmL8uzTt2l2jh4CiQbEMpvMDcp7xi4be0hgXj+Ysodde/i7Q==}
-    peerDependencies:
-      react: '>=17'
-      react-dom: '>=17'
-    dependencies:
-      '@types/d3': 7.4.3
-      '@types/d3-drag': 3.0.7
-      '@types/d3-selection': 3.0.10
-      '@types/d3-zoom': 3.0.8
-      classcat: 5.0.5
-      d3-drag: 3.0.0
-      d3-selection: 3.0.0
-      d3-zoom: 3.0.0
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      zustand: 4.5.5(@types/react@18.3.11)(react@18.3.1)
-    transitivePeerDependencies:
-      - '@types/react'
-      - immer
-    dev: false
-
-  /@reactflow/minimap@11.7.14(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-mpwLKKrEAofgFJdkhwR5UQ1JYWlcAAL/ZU/bctBkuNTT1yqV+y0buoNVImsRehVYhJwffSWeSHaBR5/GJjlCSQ==}
-    peerDependencies:
-      react: '>=17'
-      react-dom: '>=17'
-    dependencies:
-      '@reactflow/core': 11.11.4(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
-      '@types/d3-selection': 3.0.10
-      '@types/d3-zoom': 3.0.8
-      classcat: 5.0.5
-      d3-selection: 3.0.0
-      d3-zoom: 3.0.0
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      zustand: 4.5.5(@types/react@18.3.11)(react@18.3.1)
-    transitivePeerDependencies:
-      - '@types/react'
-      - immer
-    dev: false
-
-  /@reactflow/node-resizer@2.2.14(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-fwqnks83jUlYr6OHcdFEedumWKChTHRGw/kbCxj0oqBd+ekfs+SIp4ddyNU0pdx96JIm5iNFS0oNrmEiJbbSaA==}
-    peerDependencies:
-      react: '>=17'
-      react-dom: '>=17'
-    dependencies:
-      '@reactflow/core': 11.11.4(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
-      classcat: 5.0.5
-      d3-drag: 3.0.0
-      d3-selection: 3.0.0
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      zustand: 4.5.5(@types/react@18.3.11)(react@18.3.1)
-    transitivePeerDependencies:
-      - '@types/react'
-      - immer
-    dev: false
-
-  /@reactflow/node-toolbar@1.3.14(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-rbynXQnH/xFNu4P9H+hVqlEUafDCkEoCy0Dg9mG22Sg+rY/0ck6KkrAQrYrTgXusd+cEJOMK0uOOFCK2/5rSGQ==}
-    peerDependencies:
-      react: '>=17'
-      react-dom: '>=17'
-    dependencies:
-      '@reactflow/core': 11.11.4(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
-      classcat: 5.0.5
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      zustand: 4.5.5(@types/react@18.3.11)(react@18.3.1)
-    transitivePeerDependencies:
-      - '@types/react'
-      - immer
-    dev: false
-
   /@redocly/ajv@8.11.2:
     resolution: {integrity: sha512-io1JpnwtIcvojV7QKDUSIuMN/ikdOUd1ReEnUnMKGfDVridQZ31J0MmIuqwuRjWDZfmvr+Q0MqCcfHM2gTivOg==}
     dependencies:
@@ -3215,137 +3107,26 @@ packages:
       '@types/node': 20.16.10
     dev: true
 
-  /@types/d3-array@3.2.1:
-    resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
-    dev: false
-
-  /@types/d3-axis@3.0.6:
-    resolution: {integrity: sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==}
-    dependencies:
-      '@types/d3-selection': 3.0.10
-    dev: false
-
-  /@types/d3-brush@3.0.6:
-    resolution: {integrity: sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==}
-    dependencies:
-      '@types/d3-selection': 3.0.10
-    dev: false
-
-  /@types/d3-chord@3.0.6:
-    resolution: {integrity: sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==}
-    dev: false
-
   /@types/d3-color@3.1.3:
     resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
     dev: false
 
-  /@types/d3-contour@3.0.6:
-    resolution: {integrity: sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==}
-    dependencies:
-      '@types/d3-array': 3.2.1
-      '@types/geojson': 7946.0.14
-    dev: false
-
-  /@types/d3-delaunay@6.0.4:
-    resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==}
-    dev: false
-
-  /@types/d3-dispatch@3.0.6:
-    resolution: {integrity: sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ==}
-    dev: false
-
   /@types/d3-drag@3.0.7:
     resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
     dependencies:
       '@types/d3-selection': 3.0.10
     dev: false
 
-  /@types/d3-dsv@3.0.7:
-    resolution: {integrity: sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==}
-    dev: false
-
-  /@types/d3-ease@3.0.2:
-    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
-    dev: false
-
-  /@types/d3-fetch@3.0.7:
-    resolution: {integrity: sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==}
-    dependencies:
-      '@types/d3-dsv': 3.0.7
-    dev: false
-
-  /@types/d3-force@3.0.10:
-    resolution: {integrity: sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==}
-    dev: false
-
-  /@types/d3-format@3.0.4:
-    resolution: {integrity: sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==}
-    dev: false
-
-  /@types/d3-geo@3.1.0:
-    resolution: {integrity: sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==}
-    dependencies:
-      '@types/geojson': 7946.0.14
-    dev: false
-
-  /@types/d3-hierarchy@3.1.7:
-    resolution: {integrity: sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==}
-    dev: false
-
   /@types/d3-interpolate@3.0.4:
     resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
     dependencies:
       '@types/d3-color': 3.1.3
     dev: false
 
-  /@types/d3-path@3.1.0:
-    resolution: {integrity: sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==}
-    dev: false
-
-  /@types/d3-polygon@3.0.2:
-    resolution: {integrity: sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==}
-    dev: false
-
-  /@types/d3-quadtree@3.0.6:
-    resolution: {integrity: sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==}
-    dev: false
-
-  /@types/d3-random@3.0.3:
-    resolution: {integrity: sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==}
-    dev: false
-
-  /@types/d3-scale-chromatic@3.0.3:
-    resolution: {integrity: sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw==}
-    dev: false
-
-  /@types/d3-scale@4.0.8:
-    resolution: {integrity: sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==}
-    dependencies:
-      '@types/d3-time': 3.0.3
-    dev: false
-
   /@types/d3-selection@3.0.10:
     resolution: {integrity: sha512-cuHoUgS/V3hLdjJOLTT691+G2QoqAjCVLmr4kJXR4ha56w1Zdu8UUQ5TxLRqudgNjwXeQxKMq4j+lyf9sWuslg==}
     dev: false
 
-  /@types/d3-shape@3.1.6:
-    resolution: {integrity: sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==}
-    dependencies:
-      '@types/d3-path': 3.1.0
-    dev: false
-
-  /@types/d3-time-format@4.0.3:
-    resolution: {integrity: sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==}
-    dev: false
-
-  /@types/d3-time@3.0.3:
-    resolution: {integrity: sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==}
-    dev: false
-
-  /@types/d3-timer@3.0.2:
-    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
-    dev: false
-
   /@types/d3-transition@3.0.8:
     resolution: {integrity: sha512-ew63aJfQ/ms7QQ4X7pk5NxQ9fZH/z+i24ZfJ6tJSfqxJMrYLiK01EAs2/Rtw/JreGUsS3pLPNV644qXFGnoZNQ==}
     dependencies:
@@ -3359,41 +3140,6 @@ packages:
       '@types/d3-selection': 3.0.10
     dev: false
 
-  /@types/d3@7.4.3:
-    resolution: {integrity: sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==}
-    dependencies:
-      '@types/d3-array': 3.2.1
-      '@types/d3-axis': 3.0.6
-      '@types/d3-brush': 3.0.6
-      '@types/d3-chord': 3.0.6
-      '@types/d3-color': 3.1.3
-      '@types/d3-contour': 3.0.6
-      '@types/d3-delaunay': 6.0.4
-      '@types/d3-dispatch': 3.0.6
-      '@types/d3-drag': 3.0.7
-      '@types/d3-dsv': 3.0.7
-      '@types/d3-ease': 3.0.2
-      '@types/d3-fetch': 3.0.7
-      '@types/d3-force': 3.0.10
-      '@types/d3-format': 3.0.4
-      '@types/d3-geo': 3.1.0
-      '@types/d3-hierarchy': 3.1.7
-      '@types/d3-interpolate': 3.0.4
-      '@types/d3-path': 3.1.0
-      '@types/d3-polygon': 3.0.2
-      '@types/d3-quadtree': 3.0.6
-      '@types/d3-random': 3.0.3
-      '@types/d3-scale': 4.0.8
-      '@types/d3-scale-chromatic': 3.0.3
-      '@types/d3-selection': 3.0.10
-      '@types/d3-shape': 3.1.6
-      '@types/d3-time': 3.0.3
-      '@types/d3-time-format': 4.0.3
-      '@types/d3-timer': 3.0.2
-      '@types/d3-transition': 3.0.8
-      '@types/d3-zoom': 3.0.8
-    dev: false
-
   /@types/dateformat@5.0.2:
     resolution: {integrity: sha512-M95hNBMa/hnwErH+a+VOD/sYgTmo15OTYTM2Hr52/e0OdOuY+Crag+kd3/ioZrhg0WGbl9Sm3hR7UU+MH6rfOw==}
     dev: true
@@ -3447,10 +3193,6 @@ packages:
     resolution: {integrity: sha512-frsJrz2t/CeGifcu/6uRo4b+SzAwT4NYCVPu1GN8IB9XTzrpPkGuV0tmh9mN+/L0PklAlsC3u5Fxt0ju00LXIw==}
     dev: true
 
-  /@types/geojson@7946.0.14:
-    resolution: {integrity: sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==}
-    dev: false
-
   /@types/glob@7.2.0:
     resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
     dependencies:
@@ -3985,6 +3727,34 @@ packages:
     resolution: {integrity: sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==}
     dev: false
 
+  /@xyflow/react@12.4.2(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-AFJKVc/fCPtgSOnRst3xdYJwiEcUN9lDY7EO/YiRvFHYCJGgfzg+jpvZjkTOnBLGyrMJre9378pRxAc3fsR06A==}
+    peerDependencies:
+      react: '>=17'
+      react-dom: '>=17'
+    dependencies:
+      '@xyflow/system': 0.0.50
+      classcat: 5.0.5
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      zustand: 4.5.5(@types/react@18.3.11)(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - immer
+    dev: false
+
+  /@xyflow/system@0.0.50:
+    resolution: {integrity: sha512-HVUZd4LlY88XAaldFh2nwVxDOcdIBxGpQ5txzwfJPf+CAjj2BfYug1fHs2p4yS7YO8H6A3EFJQovBE8YuHkAdg==}
+    dependencies:
+      '@types/d3-drag': 3.0.7
+      '@types/d3-selection': 3.0.10
+      '@types/d3-transition': 3.0.8
+      '@types/d3-zoom': 3.0.8
+      d3-drag: 3.0.0
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+    dev: false
+
   /@zag-js/dom-query@0.31.1:
     resolution: {integrity: sha512-oiuohEXAXhBxpzzNm9k2VHGEOLC1SXlXSbRPcfBZ9so5NRQUA++zCE7cyQJqGLTZR0t3itFLlZqDbYEXRrefwg==}
     dev: false
@@ -7941,25 +7711,6 @@ packages:
     dependencies:
       loose-envify: 1.4.0
 
-  /reactflow@11.11.4(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-70FOtJkUWH3BAOsN+LU9lCrKoKbtOPnz2uq0CV2PLdNSwxTXOhCbsZr50GmZ+Rtw3jx8Uv7/vBFtCGixLfd4Og==}
-    peerDependencies:
-      react: '>=17'
-      react-dom: '>=17'
-    dependencies:
-      '@reactflow/background': 11.3.14(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
-      '@reactflow/controls': 11.2.14(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
-      '@reactflow/core': 11.11.4(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
-      '@reactflow/minimap': 11.7.14(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
-      '@reactflow/node-resizer': 2.2.14(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
-      '@reactflow/node-toolbar': 1.3.14(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    transitivePeerDependencies:
-      - '@types/react'
-      - immer
-    dev: false
-
   /readable-stream@3.6.2:
     resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
     engines: {node: '>= 6'}
diff --git a/invokeai/frontend/web/src/common/components/NodeSelectionOverlay.tsx b/invokeai/frontend/web/src/common/components/NodeSelectionOverlay.tsx
deleted file mode 100644
index 31ea415c909..00000000000
--- a/invokeai/frontend/web/src/common/components/NodeSelectionOverlay.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Box } from '@invoke-ai/ui-library';
-import { memo, useMemo } from 'react';
-
-type Props = {
-  isSelected: boolean;
-  isHovered: boolean;
-};
-const SelectionOverlay = ({ isSelected, isHovered }: Props) => {
-  const shadow = useMemo(() => {
-    if (isSelected && isHovered) {
-      return 'nodeHoveredSelected';
-    }
-    if (isSelected) {
-      return 'nodeSelected';
-    }
-    if (isHovered) {
-      return 'nodeHovered';
-    }
-    return undefined;
-  }, [isHovered, isSelected]);
-  return (
-    <Box
-      className="selection-box"
-      position="absolute"
-      top={0}
-      insetInlineEnd={0}
-      bottom={0}
-      insetInlineStart={0}
-      borderRadius="base"
-      opacity={isSelected || isHovered ? 1 : 0.5}
-      transitionProperty="common"
-      transitionDuration="0.1s"
-      pointerEvents="none"
-      shadow={shadow}
-    />
-  );
-};
-
-export default memo(SelectionOverlay);
diff --git a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
index acc2fde7536..3c9a97dfc83 100644
--- a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
@@ -1,4 +1,4 @@
-import 'reactflow/dist/style.css';
+import '@xyflow/react/dist/base.css';
 
 import { Flex } from '@invoke-ai/ui-library';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodeCmdk/AddNodeCmdk.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodeCmdk/AddNodeCmdk.tsx
index 90a1d7427b2..ecb06308428 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodeCmdk/AddNodeCmdk.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodeCmdk/AddNodeCmdk.tsx
@@ -12,6 +12,7 @@ import {
   Text,
 } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
+import type { EdgeChange, NodeChange } from '@xyflow/react';
 import { useAppSelector, useAppStore } from 'app/store/storeHooks';
 import { CommandEmpty, CommandItem, CommandList, CommandRoot } from 'cmdk';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
@@ -31,6 +32,7 @@ import { findUnoccupiedPosition } from 'features/nodes/store/util/findUnoccupied
 import { getFirstValidConnection } from 'features/nodes/store/util/getFirstValidConnection';
 import { connectionToEdge } from 'features/nodes/store/util/reactFlowUtil';
 import { validateConnectionTypes } from 'features/nodes/store/util/validateConnectionTypes';
+import type { AnyEdge, AnyNode } from 'features/nodes/types/invocation';
 import { isInvocationNode } from 'features/nodes/types/invocation';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { toast } from 'features/toast/toast';
@@ -41,7 +43,6 @@ import type { ChangeEvent } from 'react';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiCircuitryBold, PiFlaskBold, PiHammerBold, PiLightningFill } from 'react-icons/pi';
-import type { EdgeChange, NodeChange } from 'reactflow';
 import type { S } from 'services/api/types';
 
 const useThrottle = <T,>(value: T, limit: number) => {
@@ -95,8 +96,8 @@ const useAddNode = () => {
       node.selected = true;
 
       // Deselect all other nodes and edges
-      const nodeChanges: NodeChange[] = [{ type: 'add', item: node }];
-      const edgeChanges: EdgeChange[] = [];
+      const nodeChanges: NodeChange<AnyNode>[] = [{ type: 'add', item: node }];
+      const edgeChanges: EdgeChange<AnyEdge>[] = [];
       nodes.forEach(({ id, selected }) => {
         if (selected) {
           nodeChanges.push({ type: 'select', id, selected: false });
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx
index aef01fbdff0..93093bbcf7d 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx
@@ -1,5 +1,19 @@
 import { useGlobalMenuClose, useToken } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
+import type {
+  EdgeChange,
+  HandleType,
+  NodeChange,
+  OnEdgesChange,
+  OnInit,
+  OnMoveEnd,
+  OnNodesChange,
+  OnReconnect,
+  ProOptions,
+  ReactFlowProps,
+  ReactFlowState,
+} from '@xyflow/react';
+import { Background, ReactFlow, useStore as useReactFlowStore, useUpdateNodeInternals } from '@xyflow/react';
 import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHooks';
 import { useFocusRegion, useIsRegionFocused } from 'common/hooks/focus';
 import { useConnection } from 'features/nodes/hooks/useConnection';
@@ -30,23 +44,11 @@ import {
 } from 'features/nodes/store/selectors';
 import { connectionToEdge } from 'features/nodes/store/util/reactFlowUtil';
 import { selectSelectionMode, selectShouldSnapToGrid } from 'features/nodes/store/workflowSettingsSlice';
+import type { AnyEdge, AnyNode } from 'features/nodes/types/invocation';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import type { CSSProperties, MouseEvent } from 'react';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import type {
-  EdgeChange,
-  NodeChange,
-  OnEdgesChange,
-  OnEdgeUpdateFunc,
-  OnInit,
-  OnMoveEnd,
-  OnNodesChange,
-  ProOptions,
-  ReactFlowProps,
-  ReactFlowState,
-} from 'reactflow';
-import { Background, ReactFlow, useStore as useReactFlowStore, useUpdateNodeInternals } from 'reactflow';
 
 import CustomConnectionLine from './connectionLines/CustomConnectionLine';
 import InvocationCollapsedEdge from './edges/InvocationCollapsedEdge';
@@ -58,13 +60,13 @@ import NotesNode from './nodes/Notes/NotesNode';
 const edgeTypes = {
   collapsed: InvocationCollapsedEdge,
   default: InvocationDefaultEdge,
-};
+} as const;
 
 const nodeTypes = {
   invocation: InvocationNodeWrapper,
   current_image: CurrentImageNode,
   notes: NotesNode,
-};
+} as const;
 
 // TODO: can we support reactflow? if not, we could style the attribution so it matches the app
 const proOptions: ProOptions = { hideAttribution: true };
@@ -97,7 +99,7 @@ export const Flow = memo(() => {
   const [borderRadius] = useToken('radii', ['base']);
   const flowStyles = useMemo<CSSProperties>(() => ({ borderRadius }), [borderRadius]);
 
-  const onNodesChange: OnNodesChange = useCallback(
+  const onNodesChange: OnNodesChange<AnyNode> = useCallback(
     (nodeChanges) => {
       dispatch(nodesChanged(nodeChanges));
       const flow = $flow.get();
@@ -112,7 +114,7 @@ export const Flow = memo(() => {
     [dispatch, needsFit]
   );
 
-  const onEdgesChange: OnEdgesChange = useCallback(
+  const onEdgesChange: OnEdgesChange<AnyEdge> = useCallback(
     (changes) => {
       if (changes.length > 0) {
         dispatch(edgesChanged(changes));
@@ -130,7 +132,7 @@ export const Flow = memo(() => {
     onCloseGlobal();
   }, [onCloseGlobal]);
 
-  const onInit: OnInit = useCallback((flow) => {
+  const onInit: OnInit<AnyNode, AnyEdge> = useCallback((flow) => {
     $flow.set(flow);
     flow.fitView();
   }, []);
@@ -158,13 +160,13 @@ export const Flow = memo(() => {
    *   where the edge is deleted if you click it accidentally).
    */
 
-  const onEdgeUpdateStart: NonNullable<ReactFlowProps['onEdgeUpdateStart']> = useCallback((e, edge, _handleType) => {
+  const onReconnectStart = useCallback((event: MouseEvent, edge: AnyEdge, _handleType: HandleType) => {
     $edgePendingUpdate.set(edge);
     $didUpdateEdge.set(false);
-    $lastEdgeUpdateMouseEvent.set(e);
+    $lastEdgeUpdateMouseEvent.set(event);
   }, []);
 
-  const onEdgeUpdate: OnEdgeUpdateFunc = useCallback(
+  const onReconnect: OnReconnect = useCallback(
     (oldEdge, newConnection) => {
       // This event is fired when an edge update is successful
       $didUpdateEdge.set(true);
@@ -183,7 +185,7 @@ export const Flow = memo(() => {
     [dispatch, updateNodeInternals]
   );
 
-  const onEdgeUpdateEnd: NonNullable<ReactFlowProps['onEdgeUpdateEnd']> = useCallback(
+  const onReconnectEnd: NonNullable<ReactFlowProps['onReconnectEnd']> = useCallback(
     (e, edge, _handleType) => {
       const didUpdateEdge = $didUpdateEdge.get();
       // Fall back to a reasonable default event
@@ -220,8 +222,8 @@ export const Flow = memo(() => {
 
   const selectAll = useCallback(() => {
     const { nodes, edges } = selectNodesSlice(store.getState());
-    const nodeChanges: NodeChange[] = [];
-    const edgeChanges: EdgeChange[] = [];
+    const nodeChanges: NodeChange<AnyNode>[] = [];
+    const edgeChanges: EdgeChange<AnyEdge>[] = [];
     nodes.forEach(({ id, selected }) => {
       if (!selected) {
         nodeChanges.push({ type: 'select', id, selected: true });
@@ -294,8 +296,8 @@ export const Flow = memo(() => {
 
   const deleteSelection = useCallback(() => {
     const { nodes, edges } = selectNodesSlice(store.getState());
-    const nodeChanges: NodeChange[] = [];
-    const edgeChanges: EdgeChange[] = [];
+    const nodeChanges: NodeChange<AnyNode>[] = [];
+    const edgeChanges: EdgeChange<AnyEdge>[] = [];
     nodes
       .filter((n) => n.selected)
       .forEach(({ id }) => {
@@ -322,7 +324,7 @@ export const Flow = memo(() => {
   });
 
   return (
-    <ReactFlow
+    <ReactFlow<AnyNode, AnyEdge>
       id="workflow-editor"
       ref={flowWrapper}
       defaultViewport={viewport}
@@ -334,9 +336,9 @@ export const Flow = memo(() => {
       onMouseMove={onMouseMove}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
-      onEdgeUpdate={onEdgeUpdate}
-      onEdgeUpdateStart={onEdgeUpdateStart}
-      onEdgeUpdateEnd={onEdgeUpdateEnd}
+      onReconnect={onReconnect}
+      onReconnectStart={onReconnectStart}
+      onReconnectEnd={onReconnectEnd}
       onConnectStart={onConnectStart}
       onConnect={onConnect}
       onConnectEnd={onConnectEnd}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/connectionLines/CustomConnectionLine.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/connectionLines/CustomConnectionLine.tsx
index b55fc6fe70a..fa309559acb 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/connectionLines/CustomConnectionLine.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/connectionLines/CustomConnectionLine.tsx
@@ -1,4 +1,6 @@
 import { useStore } from '@nanostores/react';
+import type { ConnectionLineComponentProps } from '@xyflow/react';
+import { getBezierPath } from '@xyflow/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
 import { getFieldColor } from 'features/nodes/components/flow/edges/util/getEdgeColor';
@@ -6,8 +8,6 @@ import { $pendingConnection } from 'features/nodes/store/nodesSlice';
 import { selectShouldAnimateEdges, selectShouldColorEdges } from 'features/nodes/store/workflowSettingsSlice';
 import type { CSSProperties } from 'react';
 import { memo, useMemo } from 'react';
-import type { ConnectionLineComponentProps } from 'reactflow';
-import { getBezierPath } from 'reactflow';
 
 const pathStyles: CSSProperties = { opacity: 0.8 };
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx
index 0d7e7b7d5e4..befc50bbcb3 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx
@@ -1,13 +1,14 @@
 import { Badge, Flex } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
+import type { EdgeProps } from '@xyflow/react';
+import { BaseEdge, EdgeLabelRenderer, getBezierPath } from '@xyflow/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens';
 import { getEdgeStyles } from 'features/nodes/components/flow/edges/util/getEdgeColor';
 import { makeEdgeSelector } from 'features/nodes/components/flow/edges/util/makeEdgeSelector';
 import { $templates } from 'features/nodes/store/nodesSlice';
+import type { CollapsedInvocationNodeEdge } from 'features/nodes/types/invocation';
 import { memo, useMemo } from 'react';
-import type { EdgeProps } from 'reactflow';
-import { BaseEdge, EdgeLabelRenderer, getBezierPath } from 'reactflow';
 
 const InvocationCollapsedEdge = ({
   sourceX,
@@ -23,7 +24,7 @@ const InvocationCollapsedEdge = ({
   sourceHandleId,
   target,
   targetHandleId,
-}: EdgeProps<{ count: number }>) => {
+}: EdgeProps<CollapsedInvocationNodeEdge>) => {
   const templates = useStore($templates);
   const selector = useMemo(
     () => makeEdgeSelector(templates, source, sourceHandleId, target, targetHandleId),
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx
index f9e4deed9e4..41a30bd09cc 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx
@@ -1,12 +1,13 @@
 import { Flex, Text } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
+import type { EdgeProps } from '@xyflow/react';
+import { BaseEdge, EdgeLabelRenderer, getBezierPath } from '@xyflow/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import { getEdgeStyles } from 'features/nodes/components/flow/edges/util/getEdgeColor';
 import { $templates } from 'features/nodes/store/nodesSlice';
 import { selectShouldShowEdgeLabels } from 'features/nodes/store/workflowSettingsSlice';
+import type { DefaultInvocationNodeEdge } from 'features/nodes/types/invocation';
 import { memo, useMemo } from 'react';
-import type { EdgeProps } from 'reactflow';
-import { BaseEdge, EdgeLabelRenderer, getBezierPath } from 'reactflow';
 
 import { makeEdgeSelector } from './util/makeEdgeSelector';
 
@@ -23,7 +24,7 @@ const InvocationDefaultEdge = ({
   target,
   sourceHandleId,
   targetHandleId,
-}: EdgeProps) => {
+}: EdgeProps<DefaultInvocationNodeEdge>) => {
   const templates = useStore($templates);
   const selector = useMemo(
     () => makeEdgeSelector(templates, source, sourceHandleId, target, targetHandleId),
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx
index f7587252569..d89e452dfda 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx
@@ -1,5 +1,6 @@
 import { Flex, Image, Text } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
+import type { NodeProps } from '@xyflow/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import { DndImage } from 'features/dnd/DndImage';
@@ -12,7 +13,6 @@ import { motion } from 'framer-motion';
 import type { CSSProperties, PropsWithChildren } from 'react';
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { NodeProps } from 'reactflow';
 import { $lastProgressEvent } from 'services/events/stores';
 
 const CurrentImageNode = (props: NodeProps) => {
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeCollapsedHandles.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeCollapsedHandles.tsx
index b888e8a5162..4094fd1746b 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeCollapsedHandles.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeCollapsedHandles.tsx
@@ -1,9 +1,9 @@
+import { Handle, Position } from '@xyflow/react';
 import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens';
 import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate';
 import { map } from 'lodash-es';
 import type { CSSProperties } from 'react';
 import { memo, useMemo } from 'react';
-import { Handle, Position } from 'reactflow';
 
 interface Props {
   nodeId: string;
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeWrapper.tsx
index ade19d6f897..94534b7028d 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeWrapper.tsx
@@ -1,16 +1,16 @@
 import { useStore } from '@nanostores/react';
 import { createSelector } from '@reduxjs/toolkit';
+import type { Node, NodeProps } from '@xyflow/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import InvocationNode from 'features/nodes/components/flow/nodes/Invocation/InvocationNode';
 import { $templates } from 'features/nodes/store/nodesSlice';
 import { selectNodes } from 'features/nodes/store/selectors';
 import type { InvocationNodeData } from 'features/nodes/types/invocation';
 import { memo, useMemo } from 'react';
-import type { NodeProps } from 'reactflow';
 
 import InvocationNodeUnknownFallback from './InvocationNodeUnknownFallback';
 
-const InvocationNodeWrapper = (props: NodeProps<InvocationNodeData>) => {
+const InvocationNodeWrapper = (props: NodeProps<Node<InvocationNodeData>>) => {
   const { data, selected } = props;
   const { id: nodeId, type, isOpen, label } = data;
   const templates = useStore($templates);
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx
index 7ba1597a61d..1cf384dd993 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx
@@ -1,5 +1,7 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Box, Tooltip } from '@invoke-ai/ui-library';
+import type { HandleType } from '@xyflow/react';
+import { Handle, Position } from '@xyflow/react';
 import { getFieldColor } from 'features/nodes/components/flow/edges/util/getEdgeColor';
 import { useFieldTypeName } from 'features/nodes/hooks/usePrettyFieldType';
 import type { ValidationResult } from 'features/nodes/store/util/validateConnection';
@@ -8,8 +10,6 @@ import type { FieldInputTemplate, FieldOutputTemplate } from 'features/nodes/typ
 import type { CSSProperties } from 'react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { HandleType } from 'reactflow';
-import { Handle, Position } from 'reactflow';
 
 type Props = {
   handleType: HandleType;
@@ -60,12 +60,12 @@ const handleStyleBase = {
 
 const targetHandleStyle = {
   ...handleStyleBase,
-  insetInlineStart: '-1rem',
+  insetInlineStart: '-0.5rem',
 } satisfies CSSProperties;
 
 const sourceHandleStyle = {
   ...handleStyleBase,
-  insetInlineEnd: '-1rem',
+  insetInlineEnd: '-0.5rem',
 } satisfies CSSProperties;
 
 export const FieldHandle = memo((props: Props) => {
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/IntegerField/useIntegerField.ts b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/IntegerField/useIntegerField.ts
index d22cf3e685a..ccc330feaaf 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/IntegerField/useIntegerField.ts
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/IntegerField/useIntegerField.ts
@@ -23,7 +23,7 @@ export const useIntegerField = (props: FieldComponentProps<IntegerFieldInputInst
       min = fieldTemplate.minimum;
     }
     if (!isNil(fieldTemplate.exclusiveMinimum)) {
-      min = fieldTemplate.exclusiveMinimum + 1
+      min = fieldTemplate.exclusiveMinimum + 1;
     }
     return min;
   }, [fieldTemplate.exclusiveMinimum, fieldTemplate.minimum]);
@@ -34,7 +34,7 @@ export const useIntegerField = (props: FieldComponentProps<IntegerFieldInputInst
       max = fieldTemplate.maximum;
     }
     if (!isNil(fieldTemplate.exclusiveMaximum)) {
-      max = fieldTemplate.exclusiveMaximum - 1
+      max = fieldTemplate.exclusiveMaximum - 1;
     }
     return max;
   }, [fieldTemplate.exclusiveMaximum, fieldTemplate.maximum]);
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx
index 76666af3966..2ce72490254 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx
@@ -1,4 +1,5 @@
 import { Box, Flex, Textarea } from '@invoke-ai/ui-library';
+import type { Node,NodeProps } from '@xyflow/react';
 import { useAppDispatch } from 'app/store/storeHooks';
 import NodeCollapseButton from 'features/nodes/components/flow/nodes/common/NodeCollapseButton';
 import NodeTitle from 'features/nodes/components/flow/nodes/common/NodeTitle';
@@ -7,9 +8,8 @@ import { notesNodeValueChanged } from 'features/nodes/store/nodesSlice';
 import type { NotesNodeData } from 'features/nodes/types/invocation';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
-import type { NodeProps } from 'reactflow';
 
-const NotesNode = (props: NodeProps<NotesNodeData>) => {
+const NotesNode = (props: NodeProps<Node<NotesNodeData>>) => {
   const { id: nodeId, data, selected } = props;
   const { notes, isOpen } = data;
   const dispatch = useAppDispatch();
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx
index 372854b703d..b3302eb88a7 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx
@@ -1,9 +1,9 @@
 import { Icon, IconButton } from '@invoke-ai/ui-library';
+import { useUpdateNodeInternals } from '@xyflow/react';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { nodeIsOpenChanged } from 'features/nodes/store/nodesSlice';
 import { memo, useCallback } from 'react';
 import { PiCaretUpBold } from 'react-icons/pi';
-import { useUpdateNodeInternals } from 'reactflow';
 
 interface Props {
   nodeId: string;
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
index b00859bc409..44fcaa06235 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
@@ -1,17 +1,17 @@
-import type { ChakraProps } from '@invoke-ai/ui-library';
-import { Box, useGlobalMenuClose, useToken } from '@invoke-ai/ui-library';
+import type { ChakraProps, SystemStyleObject } from '@invoke-ai/ui-library';
+import { Box, useGlobalMenuClose } from '@invoke-ai/ui-library';
+import type { NodeChange } from '@xyflow/react';
 import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHooks';
-import NodeSelectionOverlay from 'common/components/NodeSelectionOverlay';
 import { useMouseOverNode } from 'features/nodes/hooks/useMouseOverNode';
 import { useNodeExecutionState } from 'features/nodes/hooks/useNodeExecutionState';
 import { nodesChanged } from 'features/nodes/store/nodesSlice';
 import { selectNodes } from 'features/nodes/store/selectors';
 import { selectNodeOpacity } from 'features/nodes/store/workflowSettingsSlice';
 import { DRAG_HANDLE_CLASSNAME, NODE_WIDTH } from 'features/nodes/types/constants';
+import type { AnyNode } from 'features/nodes/types/invocation';
 import { zNodeStatus } from 'features/nodes/types/invocation';
 import type { MouseEvent, PropsWithChildren } from 'react';
 import { memo, useCallback } from 'react';
-import type { NodeChange } from 'reactflow';
 
 type NodeWrapperProps = PropsWithChildren & {
   nodeId: string;
@@ -19,6 +19,67 @@ type NodeWrapperProps = PropsWithChildren & {
   width?: ChakraProps['w'];
 };
 
+const containerSx: SystemStyleObject = {
+  h: 'full',
+  position: 'relative',
+  borderRadius: 'base',
+  transitionProperty: 'common',
+  transitionDuration: '0.1s',
+  cursor: 'grab',
+};
+
+const shadowsSx: SystemStyleObject = {
+  position: 'absolute',
+  top: 0,
+  insetInlineEnd: 0,
+  bottom: 0,
+  insetInlineStart: 0,
+  borderRadius: 'base',
+  pointerEvents: 'none',
+  zIndex: -1,
+  shadow: 'var(--invoke-shadows-xl), var(--invoke-shadows-base), var(--invoke-shadows-base)',
+};
+
+const inProgressSx: SystemStyleObject = {
+  position: 'absolute',
+  top: 0,
+  insetInlineEnd: 0,
+  bottom: 0,
+  insetInlineStart: 0,
+  borderRadius: 'md',
+  pointerEvents: 'none',
+  transitionProperty: 'common',
+  transitionDuration: '0.1s',
+  opacity: 0.7,
+  zIndex: -1,
+  visibility: 'hidden',
+  shadow: '0 0 0 2px var(--invoke-colors-yellow-400), 0 0 20px 2px var(--invoke-colors-orange-700)',
+  '&[data-is-in-progress="true"]': {
+    visibility: 'visible',
+  },
+};
+
+const selectionOverlaySx: SystemStyleObject = {
+  position: 'absolute',
+  top: 0,
+  insetInlineEnd: 0,
+  bottom: 0,
+  insetInlineStart: 0,
+  borderRadius: 'base',
+  transitionProperty: 'common',
+  transitionDuration: '0.1s',
+  pointerEvents: 'none',
+  visibility: 'hidden',
+  opacity: 0.5,
+  '&[data-is-selected="true"], &[data-is-hovered="true"]': { visibility: 'visible' },
+  '&[data-is-selected="true"]': { shadow: '0 0 0 3px var(--invoke-colors-blue-500)' },
+  '&[data-is-hovered="true"]': { shadow: '0 0 0 2px var(--invoke-colors-blue-500)' },
+  '&[data-is-selected="true"][data-is-hovered="true"]': {
+    opacity: 1,
+    shadow: '0 0 0 3px var(--invoke-colors-blue-500)',
+  },
+};
+
 const NodeWrapper = (props: NodeWrapperProps) => {
   const { nodeId, width, children, selected } = props;
   const store = useAppStore();
@@ -27,12 +88,6 @@ const NodeWrapper = (props: NodeWrapperProps) => {
   const executionState = useNodeExecutionState(nodeId);
   const isInProgress = executionState?.status === zNodeStatus.enum.IN_PROGRESS;
 
-  const [nodeInProgress, shadowsXl, shadowsBase] = useToken('shadows', [
-    'nodeInProgress',
-    'shadows.xl',
-    'shadows.base',
-  ]);
-
   const dispatch = useAppDispatch();
 
   const opacity = useAppSelector(selectNodeOpacity);
@@ -42,7 +97,7 @@ const NodeWrapper = (props: NodeWrapperProps) => {
     (e: MouseEvent<HTMLDivElement>) => {
       if (!e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey) {
         const nodes = selectNodes(store.getState());
-        const nodeChanges: NodeChange[] = [];
+        const nodeChanges: NodeChange<AnyNode>[] = [];
         nodes.forEach(({ id, selected }) => {
           if (selected !== (id === nodeId)) {
             nodeChanges.push({ type: 'select', id, selected: id === nodeId });
@@ -63,42 +118,14 @@ const NodeWrapper = (props: NodeWrapperProps) => {
       onMouseEnter={handleMouseOver}
       onMouseLeave={handleMouseOut}
       className={DRAG_HANDLE_CLASSNAME}
-      h="full"
-      position="relative"
-      borderRadius="base"
-      w={width ? width : NODE_WIDTH}
-      transitionProperty="common"
-      transitionDuration="0.1s"
-      cursor="grab"
+      sx={containerSx}
+      width={width || NODE_WIDTH}
       opacity={opacity}
     >
-      <Box
-        position="absolute"
-        top={0}
-        insetInlineEnd={0}
-        bottom={0}
-        insetInlineStart={0}
-        borderRadius="base"
-        pointerEvents="none"
-        shadow={`${shadowsXl}, ${shadowsBase}, ${shadowsBase}`}
-        zIndex={-1}
-      />
-      <Box
-        position="absolute"
-        top={0}
-        insetInlineEnd={0}
-        bottom={0}
-        insetInlineStart={0}
-        borderRadius="md"
-        pointerEvents="none"
-        transitionProperty="common"
-        transitionDuration="0.1s"
-        opacity={0.7}
-        shadow={isInProgress ? nodeInProgress : undefined}
-        zIndex={-1}
-      />
+      <Box sx={shadowsSx} />
+      <Box sx={inProgressSx} data-is-in-progress={isInProgress} />
       {children}
-      <NodeSelectionOverlay isSelected={selected} isHovered={isMouseOverNode} />
+      <Box sx={selectionOverlaySx} data-is-selected={selected} data-is-hovered={isMouseOverNode} />
     </Box>
   );
 };
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx
index 56d74c31db9..de0c62722e0 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx
@@ -1,4 +1,5 @@
 import { ButtonGroup, IconButton } from '@invoke-ai/ui-library';
+import { useReactFlow } from '@xyflow/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   selectShouldShowMinimapPanel,
@@ -12,7 +13,6 @@ import {
   PiMagnifyingGlassPlusBold,
   PiMapPinBold,
 } from 'react-icons/pi';
-import { useReactFlow } from 'reactflow';
 
 const ViewportControls = () => {
   const { t } = useTranslation();
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx
index 8f37d7a2188..22f61925845 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx
@@ -1,9 +1,9 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { chakra, Flex } from '@invoke-ai/ui-library';
+import { MiniMap } from '@xyflow/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectShouldShowMinimapPanel } from 'features/nodes/store/workflowSettingsSlice';
 import { memo } from 'react';
-import { MiniMap } from 'reactflow';
 
 const ChakraMiniMap = chakra(MiniMap);
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx
index 4f269d1296a..0d3ca06c8a3 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx
@@ -15,6 +15,7 @@ import {
   ModalOverlay,
   Switch,
 } from '@invoke-ai/ui-library';
+import { SelectionMode } from '@xyflow/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { buildUseBoolean } from 'common/hooks/useBoolean';
 import ReloadNodeTemplatesButton from 'features/nodes/components/flow/panels/TopRightPanel/ReloadSchemaButton';
@@ -35,7 +36,6 @@ import {
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { SelectionMode } from 'reactflow';
 
 const formLabelProps: FormLabelProps = { flexGrow: 1 };
 export const [useWorkflowEditorSettingsModal] = buildUseBoolean(false);
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/EditModeLeftPanelContent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/EditModeLeftPanelContent.tsx
index 0017641278a..3af64c05d63 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/EditModeLeftPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/EditModeLeftPanelContent.tsx
@@ -1,4 +1,4 @@
-import 'reactflow/dist/style.css';
+import '@xyflow/react/dist/base.css';
 
 import { Box } from '@invoke-ai/ui-library';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowsTabLeftPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowsTabLeftPanel.tsx
index 84d630372dd..5508f38bcb6 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowsTabLeftPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowsTabLeftPanel.tsx
@@ -1,4 +1,4 @@
-import 'reactflow/dist/style.css';
+import '@xyflow/react/dist/base.css';
 
 import { Box, Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx
index 60ced59ba19..6335cf2f2e6 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementComponent.tsx
@@ -47,7 +47,7 @@ export const NodeFieldElementComponentEditMode = memo(({ el }: { el: NodeFieldEl
 
   return (
     <FormElementEditModeWrapper element={el}>
-      <Flex id={id} className={NODE_FIELD_CLASS_NAME} w='full'>
+      <Flex id={id} className={NODE_FIELD_CLASS_NAME} w="full">
         <InputFieldGate nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName}>
           <InputFieldViewMode nodeId={fieldIdentifier.nodeId} fieldName={fieldIdentifier.fieldName} />
         </InputFieldGate>
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useBuildNode.ts b/invokeai/frontend/web/src/features/nodes/hooks/useBuildNode.ts
index 4e96c219f86..10f49292350 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useBuildNode.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useBuildNode.ts
@@ -1,4 +1,5 @@
 import { useStore } from '@nanostores/react';
+import { useReactFlow } from '@xyflow/react';
 import { $templates } from 'features/nodes/store/nodesSlice';
 import { NODE_WIDTH } from 'features/nodes/types/constants';
 import type { AnyNode, InvocationTemplate } from 'features/nodes/types/invocation';
@@ -6,7 +7,6 @@ import { buildCurrentImageNode } from 'features/nodes/util/node/buildCurrentImag
 import { buildInvocationNode } from 'features/nodes/util/node/buildInvocationNode';
 import { buildNotesNode } from 'features/nodes/util/node/buildNotesNode';
 import { useCallback } from 'react';
-import { useReactFlow } from 'reactflow';
 
 export const useBuildNode = () => {
   const templates = useStore($templates);
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useConnection.ts b/invokeai/frontend/web/src/features/nodes/hooks/useConnection.ts
index dffd1447303..e650cde2cdc 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useConnection.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useConnection.ts
@@ -1,4 +1,6 @@
 import { useStore } from '@nanostores/react';
+import type { EdgeChange, OnConnect, OnConnectEnd, OnConnectStart } from '@xyflow/react';
+import { useUpdateNodeInternals } from '@xyflow/react';
 import { useAppStore } from 'app/store/storeHooks';
 import { $mouseOverNode } from 'features/nodes/hooks/useMouseOverNode';
 import {
@@ -12,9 +14,8 @@ import {
 import { selectNodes, selectNodesSlice } from 'features/nodes/store/selectors';
 import { getFirstValidConnection } from 'features/nodes/store/util/getFirstValidConnection';
 import { connectionToEdge } from 'features/nodes/store/util/reactFlowUtil';
+import type { AnyEdge } from 'features/nodes/types/invocation';
 import { useCallback, useMemo } from 'react';
-import type { EdgeChange, OnConnect, OnConnectEnd, OnConnectStart } from 'reactflow';
-import { useUpdateNodeInternals } from 'reactflow';
 import { assert } from 'tsafe';
 
 export const useConnection = () => {
@@ -94,7 +95,7 @@ export const useConnection = () => {
       );
       if (connection) {
         const newEdge = connectionToEdge(connection);
-        const edgeChanges: EdgeChange[] = [{ type: 'add', item: newEdge }];
+        const edgeChanges: EdgeChange<AnyEdge>[] = [{ type: 'add', item: newEdge }];
 
         const nodesToUpdate = [newEdge.source, newEdge.target];
         if (edgePendingUpdate) {
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useIsValidConnection.ts b/invokeai/frontend/web/src/features/nodes/hooks/useIsValidConnection.ts
index 8a3ce81efc8..e4337018bc7 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useIsValidConnection.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useIsValidConnection.ts
@@ -1,18 +1,19 @@
 import { useStore } from '@nanostores/react';
+import type { IsValidConnection } from '@xyflow/react';
 import { useAppSelector, useAppStore } from 'app/store/storeHooks';
 import { $edgePendingUpdate, $templates } from 'features/nodes/store/nodesSlice';
 import { selectNodesSlice } from 'features/nodes/store/selectors';
 import { validateConnection } from 'features/nodes/store/util/validateConnection';
 import { selectShouldShouldValidateGraph } from 'features/nodes/store/workflowSettingsSlice';
+import type { AnyEdge } from 'features/nodes/types/invocation';
 import { useCallback } from 'react';
-import type { Connection } from 'reactflow';
 
-export const useIsValidConnection = () => {
+export const useIsValidConnection = (): IsValidConnection<AnyEdge> => {
   const store = useAppStore();
   const templates = useStore($templates);
   const shouldValidateGraph = useAppSelector(selectShouldShouldValidateGraph);
-  const isValidConnection = useCallback(
-    ({ source, sourceHandle, target, targetHandle }: Connection): boolean => {
+  const isValidConnection = useCallback<IsValidConnection<AnyEdge>>(
+    ({ source, sourceHandle, target, targetHandle }) => {
       // Connection must have valid targets
       if (!(source && sourceHandle && target && targetHandle)) {
         return false;
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useNode.ts b/invokeai/frontend/web/src/features/nodes/hooks/useNode.ts
index eb49e4080e2..b86acca4a65 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useNode.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useNode.ts
@@ -1,8 +1,8 @@
+import type { Node } from '@xyflow/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectNode, selectNodesSlice } from 'features/nodes/store/selectors';
 import { useMemo } from 'react';
-import type { Node } from 'reactflow';
 
 export const useNode = (nodeId: string): Node => {
   const selector = useMemo(
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useNodeCopyPaste.ts b/invokeai/frontend/web/src/features/nodes/hooks/useNodeCopyPaste.ts
index 42799f09b8b..3974857ea11 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useNodeCopyPaste.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useNodeCopyPaste.ts
@@ -1,3 +1,4 @@
+import type { EdgeChange, NodeChange } from '@xyflow/react';
 import { logger } from 'app/logging/logger';
 import { getStore } from 'app/store/nanostores/store';
 import { deepClone } from 'common/util/deepClone';
@@ -13,9 +14,9 @@ import {
 import { selectNodesSlice } from 'features/nodes/store/selectors';
 import { findUnoccupiedPosition } from 'features/nodes/store/util/findUnoccupiedPosition';
 import { validateConnection } from 'features/nodes/store/util/validateConnection';
+import type { AnyEdge, AnyNode } from 'features/nodes/types/invocation';
 import { t } from 'i18next';
 import { isEqual, isNil, uniqWith } from 'lodash-es';
-import type { EdgeChange, NodeChange } from 'reactflow';
 import { assert } from 'tsafe';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -80,8 +81,8 @@ const _pasteSelection = (withEdgesToCopiedNodes?: boolean) => {
     edge.id = uuidv4();
   });
 
-  const nodeChanges: NodeChange[] = [];
-  const edgeChanges: EdgeChange[] = [];
+  const nodeChanges: NodeChange<AnyNode>[] = [];
+  const edgeChanges: EdgeChange<AnyEdge>[] = [];
   // Deselect existing nodes
   nodes.forEach(({ id, selected }) => {
     if (selected) {
diff --git a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
index e7e92696367..924ff76cc8d 100644
--- a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
@@ -1,5 +1,7 @@
 import type { PayloadAction, UnknownAction } from '@reduxjs/toolkit';
 import { createSlice, isAnyOf } from '@reduxjs/toolkit';
+import type { EdgeChange, NodeChange, Viewport, XYPosition } from '@xyflow/react';
+import { applyEdgeChanges, applyNodeChanges, getConnectedEdges, getIncomers, getOutgoers } from '@xyflow/react';
 import type { PersistConfig } from 'app/store/store';
 import { buildUseBoolean } from 'common/hooks/useBoolean';
 import { workflowLoaded } from 'features/nodes/store/actions';
@@ -72,12 +74,10 @@ import {
   zT5EncoderModelFieldValue,
   zVAEModelFieldValue,
 } from 'features/nodes/types/field';
-import type { AnyNode, InvocationNodeEdge } from 'features/nodes/types/invocation';
+import type { AnyEdge, AnyNode } from 'features/nodes/types/invocation';
 import { isInvocationNode, isNotesNode } from 'features/nodes/types/invocation';
 import { atom, computed } from 'nanostores';
 import type { MouseEvent } from 'react';
-import type { Edge, EdgeChange, NodeChange, Viewport, XYPosition } from 'reactflow';
-import { applyEdgeChanges, applyNodeChanges, getConnectedEdges, getIncomers, getOutgoers } from 'reactflow';
 import type { UndoableOptions } from 'redux-undo';
 import type { z } from 'zod';
 
@@ -125,10 +125,10 @@ export const nodesSlice = createSlice({
   name: 'nodes',
   initialState: initialNodesState,
   reducers: {
-    nodesChanged: (state, action: PayloadAction<NodeChange[]>) => {
-      state.nodes = applyNodeChanges(action.payload, state.nodes);
+    nodesChanged: (state, action: PayloadAction<NodeChange<AnyNode>[]>) => {
+      state.nodes = applyNodeChanges<AnyNode>(action.payload, state.nodes);
       // Remove edges that are no longer valid, due to a removed or otherwise changed node
-      const edgeChanges: EdgeChange[] = [];
+      const edgeChanges: EdgeChange<AnyEdge>[] = [];
       state.edges.forEach((e) => {
         const sourceExists = state.nodes.some((n) => n.id === e.source);
         const targetExists = state.nodes.some((n) => n.id === e.target);
@@ -136,10 +136,10 @@ export const nodesSlice = createSlice({
           edgeChanges.push({ type: 'remove', id: e.id });
         }
       });
-      state.edges = applyEdgeChanges(edgeChanges, state.edges);
+      state.edges = applyEdgeChanges<AnyEdge>(edgeChanges, state.edges);
     },
-    edgesChanged: (state, action: PayloadAction<EdgeChange[]>) => {
-      const changes: EdgeChange[] = [];
+    edgesChanged: (state, action: PayloadAction<EdgeChange<AnyEdge>[]>) => {
+      const changes: EdgeChange<AnyEdge>[] = [];
       // We may need to massage the edge changes or otherwise handle them
       action.payload.forEach((change) => {
         if (change.type === 'remove' || change.type === 'select') {
@@ -251,7 +251,7 @@ export const nodesSlice = createSlice({
           (node) => isInvocationNode(node) && node.data.isOpen === false
         );
 
-        const collapsedEdgesToCreate: Edge<{ count: number }>[] = [];
+        const collapsedEdgesToCreate: AnyEdge[] = [];
 
         // hide all edges
         connectedEdges.forEach((edge) => {
@@ -271,7 +271,7 @@ export const nodesSlice = createSlice({
                 target: edge.target,
                 type: 'collapsed',
                 data: { count: 1 },
-                updatable: false,
+                reconnectable: false,
                 selected: edge.selected,
               });
             }
@@ -292,14 +292,14 @@ export const nodesSlice = createSlice({
                 target: edge.target,
                 type: 'collapsed',
                 data: { count: 1 },
-                updatable: false,
+                reconnectable: false,
                 selected: edge.selected,
               });
             }
           }
         });
         if (collapsedEdgesToCreate.length) {
-          state.edges = applyEdgeChanges(
+          state.edges = applyEdgeChanges<AnyEdge>(
             collapsedEdgesToCreate.map((edge) => ({ type: 'add', item: edge })),
             state.edges
           );
@@ -449,13 +449,28 @@ export const nodesSlice = createSlice({
   extraReducers: (builder) => {
     builder.addCase(workflowLoaded, (state, action) => {
       const { nodes, edges } = action.payload;
-      state.nodes = applyNodeChanges(
-        nodes.map((node) => ({
-          type: 'add',
-          item: { ...node, ...SHARED_NODE_PROPERTIES },
-        })),
-        []
-      );
+
+      const changes: NodeChange<AnyNode>[] = [];
+      for (const node of nodes) {
+        if (node.type === 'notes') {
+          changes.push({
+            type: 'add',
+            item: {
+              ...SHARED_NODE_PROPERTIES,
+              ...node,
+            },
+          });
+        } else if (node.type === 'invocation') {
+          changes.push({
+            type: 'add',
+            item: {
+              ...SHARED_NODE_PROPERTIES,
+              ...node,
+            },
+          });
+        }
+      }
+      state.nodes = applyNodeChanges<AnyNode>(changes, []);
       state.edges = applyEdgeChanges(
         edges.map((edge) => ({ type: 'add', item: edge })),
         []
@@ -516,10 +531,10 @@ export const $cursorPos = atom<XYPosition | null>(null);
 export const $templates = atom<Templates>({});
 export const $hasTemplates = computed($templates, (templates) => Object.keys(templates).length > 0);
 export const $copiedNodes = atom<AnyNode[]>([]);
-export const $copiedEdges = atom<InvocationNodeEdge[]>([]);
-export const $edgesToCopiedNodes = atom<InvocationNodeEdge[]>([]);
+export const $copiedEdges = atom<AnyEdge[]>([]);
+export const $edgesToCopiedNodes = atom<AnyEdge[]>([]);
 export const $pendingConnection = atom<PendingConnection | null>(null);
-export const $edgePendingUpdate = atom<Edge | null>(null);
+export const $edgePendingUpdate = atom<AnyEdge | null>(null);
 export const $didUpdateEdge = atom(false);
 export const $lastEdgeUpdateMouseEvent = atom<MouseEvent | null>(null);
 
diff --git a/invokeai/frontend/web/src/features/nodes/store/reactFlowInstance.ts b/invokeai/frontend/web/src/features/nodes/store/reactFlowInstance.ts
index cfbadc66697..db76ff1f912 100644
--- a/invokeai/frontend/web/src/features/nodes/store/reactFlowInstance.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/reactFlowInstance.ts
@@ -1,5 +1,6 @@
+import type { ReactFlowInstance } from '@xyflow/react';
+import type { AnyEdge, AnyNode } from 'features/nodes/types/invocation';
 import { atom } from 'nanostores';
-import type { ReactFlowInstance } from 'reactflow';
 
-export const $flow = atom<ReactFlowInstance | null>(null);
+export const $flow = atom<ReactFlowInstance<AnyNode, AnyEdge> | null>(null);
 export const $needsFit = atom<boolean>(true);
diff --git a/invokeai/frontend/web/src/features/nodes/store/selectors.ts b/invokeai/frontend/web/src/features/nodes/store/selectors.ts
index 2cc7df3deea..ca10f21a592 100644
--- a/invokeai/frontend/web/src/features/nodes/store/selectors.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/selectors.ts
@@ -3,12 +3,11 @@ import { createSelector } from '@reduxjs/toolkit';
 import type { RootState } from 'app/store/store';
 import type { NodesState } from 'features/nodes/store/types';
 import type { FieldInputInstance } from 'features/nodes/types/field';
-import type { InvocationNode, InvocationNodeData } from 'features/nodes/types/invocation';
+import type { AnyNode, InvocationNode, InvocationNodeData } from 'features/nodes/types/invocation';
 import { isInvocationNode } from 'features/nodes/types/invocation';
-import type { Node } from 'reactflow';
 import { assert } from 'tsafe';
 
-export const selectNode = (nodesSlice: NodesState, nodeId: string): Node => {
+export const selectNode = (nodesSlice: NodesState, nodeId: string): AnyNode => {
   const node = nodesSlice.nodes.find((node) => node.id === nodeId);
   assert(node !== undefined, `Node ${nodeId} not found`);
   return node;
diff --git a/invokeai/frontend/web/src/features/nodes/store/types.ts b/invokeai/frontend/web/src/features/nodes/store/types.ts
index 06279aa61df..6db8dfd4e41 100644
--- a/invokeai/frontend/web/src/features/nodes/store/types.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/types.ts
@@ -1,3 +1,4 @@
+import type { HandleType } from '@xyflow/react';
 import type {
   FieldIdentifier,
   FieldInputTemplate,
@@ -5,13 +6,12 @@ import type {
   StatefulFieldValue,
 } from 'features/nodes/types/field';
 import type {
+  AnyEdge,
   AnyNode,
-  InvocationNodeEdge,
   InvocationTemplate,
   NodeExecutionState,
 } from 'features/nodes/types/invocation';
 import type { WorkflowV3 } from 'features/nodes/types/workflow';
-import type { HandleType } from 'reactflow';
 import type { SQLiteDirection, WorkflowRecordOrderBy } from 'services/api/types';
 
 export type Templates = Record<string, InvocationTemplate>;
@@ -27,7 +27,7 @@ export type PendingConnection = {
 export type NodesState = {
   _version: 1;
   nodes: AnyNode[];
-  edges: InvocationNodeEdge[];
+  edges: AnyEdge[];
 };
 
 export type WorkflowMode = 'edit' | 'view';
diff --git a/invokeai/frontend/web/src/features/nodes/store/util/findUnoccupiedPosition.ts b/invokeai/frontend/web/src/features/nodes/store/util/findUnoccupiedPosition.ts
index bd110a50a1f..6974a6ec543 100644
--- a/invokeai/frontend/web/src/features/nodes/store/util/findUnoccupiedPosition.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/util/findUnoccupiedPosition.ts
@@ -1,4 +1,4 @@
-import type { Node } from 'reactflow';
+import type { Node } from '@xyflow/react';
 
 export const findUnoccupiedPosition = (nodes: Node[], x: number, y: number) => {
   let newX = x;
diff --git a/invokeai/frontend/web/src/features/nodes/store/util/getCollectItemType.ts b/invokeai/frontend/web/src/features/nodes/store/util/getCollectItemType.ts
index e6c117d91e9..bba9d5b1e0c 100644
--- a/invokeai/frontend/web/src/features/nodes/store/util/getCollectItemType.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/util/getCollectItemType.ts
@@ -1,6 +1,6 @@
 import type { Templates } from 'features/nodes/store/types';
 import type { FieldType } from 'features/nodes/types/field';
-import type { AnyNode, InvocationNodeEdge } from 'features/nodes/types/invocation';
+import type { AnyNode, AnyEdge } from 'features/nodes/types/invocation';
 
 /**
  * Given a collect node, return the type of the items it collects. The graph is traversed to find the first node and
@@ -15,7 +15,7 @@ import type { AnyNode, InvocationNodeEdge } from 'features/nodes/types/invocatio
 export const getCollectItemType = (
   templates: Templates,
   nodes: AnyNode[],
-  edges: InvocationNodeEdge[],
+  edges: AnyEdge[],
   nodeId: string
 ): FieldType | null => {
   const firstEdgeToCollect = edges.find((edge) => edge.target === nodeId && edge.targetHandle === 'item');
diff --git a/invokeai/frontend/web/src/features/nodes/store/util/getFirstValidConnection.ts b/invokeai/frontend/web/src/features/nodes/store/util/getFirstValidConnection.ts
index adc51341d7d..d38f1f1a0de 100644
--- a/invokeai/frontend/web/src/features/nodes/store/util/getFirstValidConnection.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/util/getFirstValidConnection.ts
@@ -1,9 +1,9 @@
+import type { Connection } from '@xyflow/react';
 import type { Templates } from 'features/nodes/store/types';
 import { validateConnection } from 'features/nodes/store/util/validateConnection';
 import type { FieldInputTemplate, FieldOutputTemplate } from 'features/nodes/types/field';
-import type { AnyNode, InvocationNodeEdge } from 'features/nodes/types/invocation';
+import type { AnyEdge,AnyNode } from 'features/nodes/types/invocation';
 import { map } from 'lodash-es';
-import type { Connection, Edge } from 'reactflow';
 
 /**
  *
@@ -23,9 +23,9 @@ export const getFirstValidConnection = (
   target: string,
   targetHandle: string | null,
   nodes: AnyNode[],
-  edges: InvocationNodeEdge[],
+  edges: AnyEdge[],
   templates: Templates,
-  edgePendingUpdate: Edge | null
+  edgePendingUpdate: AnyEdge | null
 ): Connection | null => {
   if (source === target) {
     return null;
@@ -81,9 +81,9 @@ export const getTargetCandidateFields = (
   sourceHandle: string,
   target: string,
   nodes: AnyNode[],
-  edges: Edge[],
+  edges: AnyEdge[],
   templates: Templates,
-  edgePendingUpdate: Edge | null
+  edgePendingUpdate: AnyEdge | null
 ): FieldInputTemplate[] => {
   const sourceNode = nodes.find((n) => n.id === source);
   const targetNode = nodes.find((n) => n.id === target);
@@ -117,9 +117,9 @@ export const getSourceCandidateFields = (
   targetHandle: string,
   source: string,
   nodes: AnyNode[],
-  edges: Edge[],
+  edges: AnyEdge[],
   templates: Templates,
-  edgePendingUpdate: Edge | null
+  edgePendingUpdate: AnyEdge | null
 ): FieldOutputTemplate[] => {
   const targetNode = nodes.find((n) => n.id === target);
   const sourceNode = nodes.find((n) => n.id === source);
diff --git a/invokeai/frontend/web/src/features/nodes/store/util/getHasCycles.ts b/invokeai/frontend/web/src/features/nodes/store/util/getHasCycles.ts
index c1a4e51f0cc..9b0b99e48de 100644
--- a/invokeai/frontend/web/src/features/nodes/store/util/getHasCycles.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/util/getHasCycles.ts
@@ -1,5 +1,5 @@
 import graphlib from '@dagrejs/graphlib';
-import type { Edge, Node } from 'reactflow';
+import type { Edge, Node } from '@xyflow/react';
 
 /**
  * Check if adding an edge between the source and target nodes would create a cycle in the graph.
diff --git a/invokeai/frontend/web/src/features/nodes/store/util/makeConnectionErrorSelector.ts b/invokeai/frontend/web/src/features/nodes/store/util/makeConnectionErrorSelector.ts
index 823aa923219..2b6eb070e5e 100644
--- a/invokeai/frontend/web/src/features/nodes/store/util/makeConnectionErrorSelector.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/util/makeConnectionErrorSelector.ts
@@ -1,9 +1,10 @@
+import type { HandleType } from '@xyflow/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import type { RootState } from 'app/store/store';
 import { selectNodesSlice } from 'features/nodes/store/selectors';
 import type { NodesState, PendingConnection, Templates } from 'features/nodes/store/types';
 import { buildRejectResult, validateConnection } from 'features/nodes/store/util/validateConnection';
-import type { Edge, HandleType } from 'reactflow';
+import type { AnyEdge } from 'features/nodes/types/invocation';
 
 /**
  * Creates a selector that validates a pending connection.
@@ -26,9 +27,9 @@ export const makeConnectionErrorSelector = (
   return createMemoizedSelector(
     selectNodesSlice,
     (state: RootState, pendingConnection: PendingConnection | null) => pendingConnection,
-    (state: RootState, pendingConnection: PendingConnection | null, edgePendingUpdate: Edge | null) =>
+    (state: RootState, pendingConnection: PendingConnection | null, edgePendingUpdate: AnyEdge | null) =>
       edgePendingUpdate,
-    (nodesSlice: NodesState, pendingConnection: PendingConnection | null, edgePendingUpdate: Edge | null) => {
+    (nodesSlice: NodesState, pendingConnection: PendingConnection | null, edgePendingUpdate: AnyEdge | null) => {
       const { nodes, edges } = nodesSlice;
 
       if (!pendingConnection) {
diff --git a/invokeai/frontend/web/src/features/nodes/store/util/reactFlowUtil.ts b/invokeai/frontend/web/src/features/nodes/store/util/reactFlowUtil.ts
index 89be7951a2a..67264bf41ba 100644
--- a/invokeai/frontend/web/src/features/nodes/store/util/reactFlowUtil.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/util/reactFlowUtil.ts
@@ -1,4 +1,5 @@
-import type { Connection, Edge } from 'reactflow';
+import type { Connection } from '@xyflow/react';
+import type { AnyEdge } from 'features/nodes/types/invocation';
 import { assert } from 'tsafe';
 
 /**
@@ -19,7 +20,7 @@ const getEdgeId = (connection: Connection): string => {
  * @returns The edge
  * @throws If the connection is invalid (e.g. missing source, sourcehandle, target, or targetHandle)
  */
-export const connectionToEdge = (connection: Connection): Edge => {
+export const connectionToEdge = (connection: Connection): AnyEdge => {
   const { source, sourceHandle, target, targetHandle } = connection;
   assert(source && sourceHandle && target && targetHandle, 'Invalid connection');
   return {
diff --git a/invokeai/frontend/web/src/features/nodes/store/util/testUtils.ts b/invokeai/frontend/web/src/features/nodes/store/util/testUtils.ts
index 9a33c063578..77eff30b0f4 100644
--- a/invokeai/frontend/web/src/features/nodes/store/util/testUtils.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/util/testUtils.ts
@@ -1,10 +1,9 @@
 import type { Templates } from 'features/nodes/store/types';
-import type { InvocationTemplate } from 'features/nodes/types/invocation';
+import type { AnyEdge, InvocationTemplate } from 'features/nodes/types/invocation';
 import { buildInvocationNode } from 'features/nodes/util/node/buildInvocationNode';
 import type { OpenAPIV3_1 } from 'openapi-types';
-import type { Edge } from 'reactflow';
 
-export const buildEdge = (source: string, sourceHandle: string, target: string, targetHandle: string): Edge => ({
+export const buildEdge = (source: string, sourceHandle: string, target: string, targetHandle: string): AnyEdge => ({
   source,
   sourceHandle,
   target,
diff --git a/invokeai/frontend/web/src/features/nodes/store/util/validateConnection.ts b/invokeai/frontend/web/src/features/nodes/store/util/validateConnection.ts
index d717968d808..a5b9598d167 100644
--- a/invokeai/frontend/web/src/features/nodes/store/util/validateConnection.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/util/validateConnection.ts
@@ -1,10 +1,10 @@
+import type { Connection as NullableConnection } from '@xyflow/react';
 import type { Templates } from 'features/nodes/store/types';
 import { areTypesEqual } from 'features/nodes/store/util/areTypesEqual';
 import { getCollectItemType } from 'features/nodes/store/util/getCollectItemType';
 import { getHasCycles } from 'features/nodes/store/util/getHasCycles';
 import { validateConnectionTypes } from 'features/nodes/store/util/validateConnectionTypes';
-import type { AnyNode } from 'features/nodes/types/invocation';
-import type { Connection as NullableConnection, Edge } from 'reactflow';
+import type { AnyEdge, AnyNode } from 'features/nodes/types/invocation';
 import type { SetNonNullable } from 'type-fest';
 
 type Connection = SetNonNullable<NullableConnection>;
@@ -22,15 +22,15 @@ export type ValidationResult =
 type ValidateConnectionFunc = (
   connection: Connection,
   nodes: AnyNode[],
-  edges: Edge[],
+  edges: AnyEdge[],
   templates: Templates,
-  ignoreEdge: Edge | null,
+  ignoreEdge: AnyEdge | null,
   strict?: boolean
 ) => ValidationResult;
 
 const getEqualityPredicate =
   (c: Connection) =>
-  (e: Edge): boolean => {
+  (e: AnyEdge): boolean => {
     return (
       e.target === c.target &&
       e.targetHandle === c.targetHandle &&
@@ -41,7 +41,7 @@ const getEqualityPredicate =
 
 const getTargetEqualityPredicate =
   (c: Connection) =>
-  (e: Edge): boolean => {
+  (e: AnyEdge): boolean => {
     return e.target === c.target && e.targetHandle === c.targetHandle;
   };
 
diff --git a/invokeai/frontend/web/src/features/nodes/store/workflowSettingsSlice.ts b/invokeai/frontend/web/src/features/nodes/store/workflowSettingsSlice.ts
index 135cfcc562e..8d0ef927cd9 100644
--- a/invokeai/frontend/web/src/features/nodes/store/workflowSettingsSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/workflowSettingsSlice.ts
@@ -1,8 +1,8 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSelector, createSlice } from '@reduxjs/toolkit';
+import { SelectionMode } from '@xyflow/react';
 import type { PersistConfig, RootState } from 'app/store/store';
 import type { Selector } from 'react-redux';
-import { SelectionMode } from 'reactflow';
 
 export type WorkflowSettingsState = {
   _version: 1;
diff --git a/invokeai/frontend/web/src/features/nodes/types/constants.ts b/invokeai/frontend/web/src/features/nodes/types/constants.ts
index cff7f8ac6bc..9b7e7e6bc6c 100644
--- a/invokeai/frontend/web/src/features/nodes/types/constants.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/constants.ts
@@ -1,4 +1,4 @@
-import type { Node } from 'reactflow';
+import type { AnyNode } from 'features/nodes/types/invocation';
 
 /**
  * How long to wait before showing a tooltip when hovering a field handle.
@@ -19,7 +19,7 @@ export const DRAG_HANDLE_CLASSNAME = 'node-drag-handle';
 /**
  * reactflow-specifc properties shared between all node types.
  */
-export const SHARED_NODE_PROPERTIES: Partial<Node> = {
+export const SHARED_NODE_PROPERTIES: Partial<AnyNode> = {
   dragHandle: `.${DRAG_HANDLE_CLASSNAME}`,
 };
 
diff --git a/invokeai/frontend/web/src/features/nodes/types/invocation.ts b/invokeai/frontend/web/src/features/nodes/types/invocation.ts
index e48f87c32ae..1d3b7166ef6 100644
--- a/invokeai/frontend/web/src/features/nodes/types/invocation.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/invocation.ts
@@ -1,4 +1,4 @@
-import type { Edge, Node } from 'reactflow';
+import type { Edge, Node } from '@xyflow/react';
 import { z } from 'zod';
 
 import { zClassification, zProgressImage } from './common';
@@ -49,17 +49,15 @@ const zCurrentImageNodeData = z.object({
   label: z.string(),
   isOpen: z.boolean(),
 });
-const zAnyNodeData = z.union([zInvocationNodeData, zNotesNodeData, zCurrentImageNodeData]);
 
 export type NotesNodeData = z.infer<typeof zNotesNodeData>;
 export type InvocationNodeData = z.infer<typeof zInvocationNodeData>;
 type CurrentImageNodeData = z.infer<typeof zCurrentImageNodeData>;
-type AnyNodeData = z.infer<typeof zAnyNodeData>;
 
 export type InvocationNode = Node<InvocationNodeData, 'invocation'>;
 export type NotesNode = Node<NotesNodeData, 'notes'>;
 export type CurrentImageNode = Node<CurrentImageNodeData, 'current_image'>;
-export type AnyNode = Node<AnyNodeData>;
+export type AnyNode = InvocationNode | NotesNode | CurrentImageNode;
 
 export const isInvocationNode = (node?: AnyNode | null): node is InvocationNode =>
   Boolean(node && node.type === 'invocation');
@@ -85,11 +83,13 @@ export type NodeExecutionState = z.infer<typeof zNodeExecutionState>;
 // #endregion
 
 // #region Edges
-const zInvocationNodeEdgeExtra = z.object({
-  type: z.union([z.literal('default'), z.literal('collapsed')]),
+const zInvocationNodeEdgeCollapsedData = z.object({
+  count: z.number().int().min(1),
 });
-type InvocationNodeEdgeExtra = z.infer<typeof zInvocationNodeEdgeExtra>;
-export type InvocationNodeEdge = Edge<InvocationNodeEdgeExtra>;
+type InvocationNodeEdgeCollapsedData = z.infer<typeof zInvocationNodeEdgeCollapsedData>;
+export type DefaultInvocationNodeEdge = Edge<Record<string, never>, 'default'>;
+export type CollapsedInvocationNodeEdge = Edge<InvocationNodeEdgeCollapsedData, 'collapsed'>;
+export type AnyEdge = DefaultInvocationNodeEdge | CollapsedInvocationNodeEdge;
 // #endregion
 
 export const isBatchNode = (node: InvocationNode) => {
diff --git a/invokeai/frontend/web/src/features/nodes/types/workflow.test-d.ts b/invokeai/frontend/web/src/features/nodes/types/workflow.test-d.ts
index 7cb1ea230ce..071417dc2ed 100644
--- a/invokeai/frontend/web/src/features/nodes/types/workflow.test-d.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/workflow.test-d.ts
@@ -1,5 +1,5 @@
+import type { XYPosition as ReactFlowXYPosition } from '@xyflow/react';
 import type { WorkflowCategory, WorkflowV3, XYPosition } from 'features/nodes/types/workflow';
-import type * as ReactFlow from 'reactflow';
 import type { S } from 'services/api/types';
 import type { Equals, Extends } from 'tsafe';
 import { assert } from 'tsafe';
@@ -11,7 +11,7 @@ import { describe, test } from 'vitest';
  */
 
 describe('Workflow types', () => {
-  test('XYPosition', () => assert<Equals<XYPosition, ReactFlow.XYPosition>>());
+  test('XYPosition', () => assert<Equals<XYPosition, ReactFlowXYPosition>>());
   test('WorkflowCategory', () => assert<Equals<WorkflowCategory, S['WorkflowCategory']>>());
   // @ts-expect-error TODO(psyche): Need to revise server types!
   test('WorkflowV3', () => assert<Extends<WorkflowV3, S['Workflow']>>());
diff --git a/invokeai/frontend/web/src/features/nodes/util/node/buildCurrentImageNode.ts b/invokeai/frontend/web/src/features/nodes/util/node/buildCurrentImageNode.ts
index d90ea31561d..c7bd8416738 100644
--- a/invokeai/frontend/web/src/features/nodes/util/node/buildCurrentImageNode.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/node/buildCurrentImageNode.ts
@@ -1,6 +1,6 @@
+import type { XYPosition } from '@xyflow/react';
 import { SHARED_NODE_PROPERTIES } from 'features/nodes/types/constants';
 import type { CurrentImageNode } from 'features/nodes/types/invocation';
-import type { XYPosition } from 'reactflow';
 import { v4 as uuidv4 } from 'uuid';
 
 export const buildCurrentImageNode = (position: XYPosition): CurrentImageNode => {
diff --git a/invokeai/frontend/web/src/features/nodes/util/node/buildInvocationNode.ts b/invokeai/frontend/web/src/features/nodes/util/node/buildInvocationNode.ts
index 6daadcf103e..c069f090461 100644
--- a/invokeai/frontend/web/src/features/nodes/util/node/buildInvocationNode.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/node/buildInvocationNode.ts
@@ -1,9 +1,9 @@
+import type { XYPosition } from '@xyflow/react';
 import { SHARED_NODE_PROPERTIES } from 'features/nodes/types/constants';
 import type { FieldInputInstance } from 'features/nodes/types/field';
 import type { InvocationNode, InvocationTemplate } from 'features/nodes/types/invocation';
 import { buildFieldInputInstance } from 'features/nodes/util/schema/buildFieldInputInstance';
 import { reduce } from 'lodash-es';
-import type { XYPosition } from 'reactflow';
 import { v4 as uuidv4 } from 'uuid';
 
 export const buildInvocationNode = (position: XYPosition, template: InvocationTemplate): InvocationNode => {
diff --git a/invokeai/frontend/web/src/features/nodes/util/node/buildNotesNode.ts b/invokeai/frontend/web/src/features/nodes/util/node/buildNotesNode.ts
index c858c8854f9..1a89bfc585f 100644
--- a/invokeai/frontend/web/src/features/nodes/util/node/buildNotesNode.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/node/buildNotesNode.ts
@@ -1,6 +1,6 @@
+import type { XYPosition } from '@xyflow/react';
 import { SHARED_NODE_PROPERTIES } from 'features/nodes/types/constants';
 import type { NotesNode } from 'features/nodes/types/invocation';
-import type { XYPosition } from 'reactflow';
 import { v4 as uuidv4 } from 'uuid';
 
 export const buildNotesNode = (position: XYPosition): NotesNode => {
diff --git a/invokeai/frontend/web/src/features/queue/store/readiness.ts b/invokeai/frontend/web/src/features/queue/store/readiness.ts
index 282111c17ee..5eea303295e 100644
--- a/invokeai/frontend/web/src/features/queue/store/readiness.ts
+++ b/invokeai/frontend/web/src/features/queue/store/readiness.ts
@@ -1,4 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
+import { getConnectedEdges } from '@xyflow/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import type { AppConfig } from 'app/types/invokeai';
 import type { ParamsState } from 'features/controlLayers/store/paramsSlice';
@@ -40,14 +41,13 @@ import {
   validateNumberFieldCollectionValue,
   validateStringFieldCollectionValue,
 } from 'features/nodes/types/fieldValidators';
-import type { InvocationNode, InvocationNodeEdge } from 'features/nodes/types/invocation';
+import type { InvocationNode, AnyEdge } from 'features/nodes/types/invocation';
 import { isBatchNode, isExecutableNode, isInvocationNode } from 'features/nodes/types/invocation';
 import type { UpscaleState } from 'features/parameters/store/upscaleSlice';
 import { selectUpscaleSlice } from 'features/parameters/store/upscaleSlice';
 import { selectConfigSlice } from 'features/system/store/configSlice';
 import i18n from 'i18next';
 import { forEach, groupBy, upperFirst } from 'lodash-es';
-import { getConnectedEdges } from 'reactflow';
 import { assert } from 'tsafe';
 
 /**
@@ -70,7 +70,7 @@ export type Reason = { prefix?: string; content: string };
 
 const disconnectedReason = (t: typeof i18n.t) => ({ content: t('parameters.invoke.systemDisconnected') });
 
-export const resolveBatchValue = (batchNode: InvocationNode, nodes: InvocationNode[], edges: InvocationNodeEdge[]) => {
+export const resolveBatchValue = (batchNode: InvocationNode, nodes: InvocationNode[], edges: AnyEdge[]) => {
   if (batchNode.data.type === 'image_batch') {
     assert(isImageFieldCollectionInputInstance(batchNode.data.inputs.images));
     const ownValue = batchNode.data.inputs.images.value ?? [];
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/WorkflowsTabContent.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/WorkflowsTabContent.tsx
index 1ed2918077c..1953ba72712 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/WorkflowsTabContent.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/WorkflowsTabContent.tsx
@@ -1,10 +1,10 @@
+import { ReactFlowProvider } from '@xyflow/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
 import NodeEditor from 'features/nodes/components/NodeEditor';
 import { ViewContextProvider } from 'features/nodes/contexts/ViewContext';
 import { selectWorkflowMode } from 'features/nodes/store/workflowSlice';
 import { memo } from 'react';
-import { ReactFlowProvider } from 'reactflow';
 
 export const WorkflowsMainPanel = memo(() => {
   const mode = useAppSelector(selectWorkflowMode);

From 4ef198fc690d28cb8170406d09065380cebc0685 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 26 Jan 2025 10:53:39 +1100
Subject: [PATCH 47/58] refactor(ui): edge rendering

- Fix issues with positioning of labels
- Optimize styling to be less reliant on JS
---
 .../flow/edges/InvocationCollapsedEdge.tsx    |  77 ++++++++-----
 .../flow/edges/InvocationDefaultEdge.tsx      | 104 +++++++++++++-----
 .../flow/edges/util/buildEdgeSelectors.ts     |  62 +++++++++++
 .../flow/edges/util/getEdgeColor.ts           |  14 ---
 .../flow/edges/util/makeEdgeSelector.ts       |  58 ----------
 .../InvocationNodeCollapsedHandles.tsx        |  37 ++-----
 6 files changed, 200 insertions(+), 152 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/edges/util/buildEdgeSelectors.ts
 delete mode 100644 invokeai/frontend/web/src/features/nodes/components/flow/edges/util/makeEdgeSelector.ts

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx
index befc50bbcb3..17c44717f14 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx
@@ -1,15 +1,40 @@
-import { Badge, Flex } from '@invoke-ai/ui-library';
-import { useStore } from '@nanostores/react';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Badge, Box, chakra } from '@invoke-ai/ui-library';
 import type { EdgeProps } from '@xyflow/react';
 import { BaseEdge, EdgeLabelRenderer, getBezierPath } from '@xyflow/react';
 import { useAppSelector } from 'app/store/storeHooks';
-import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens';
-import { getEdgeStyles } from 'features/nodes/components/flow/edges/util/getEdgeColor';
-import { makeEdgeSelector } from 'features/nodes/components/flow/edges/util/makeEdgeSelector';
-import { $templates } from 'features/nodes/store/nodesSlice';
+import { buildSelectAreConnectedNodesSelected } from 'features/nodes/components/flow/edges/util/buildEdgeSelectors';
+import { selectShouldAnimateEdges } from 'features/nodes/store/workflowSettingsSlice';
 import type { CollapsedInvocationNodeEdge } from 'features/nodes/types/invocation';
 import { memo, useMemo } from 'react';
 
+const ChakraBaseEdge = chakra(BaseEdge);
+
+const baseEdgeSx: SystemStyleObject = {
+  strokeWidth: '3px !important',
+  stroke: 'base.500 !important',
+  opacity: '0.5 !important',
+  strokeDasharray: 'none',
+  '&[data-selected="true"]': {
+    opacity: '1 !important',
+  },
+  '&[data-selected="true"], &[data-are-connected-nodes-selected="true"]': {
+    strokeDasharray: '5 !important',
+  },
+  '&[data-should-animate-edges="true"]': {
+    animation: 'dashdraw 0.5s linear infinite !important',
+  },
+};
+
+const badgeSx: SystemStyleObject = {
+  bg: 'base.500',
+  opacity: 0.5,
+  shadow: 'base',
+  '&[data-selected="true"]': {
+    opacity: 1,
+  },
+};
+
 const InvocationCollapsedEdge = ({
   sourceX,
   sourceY,
@@ -21,17 +46,15 @@ const InvocationCollapsedEdge = ({
   data,
   selected = false,
   source,
-  sourceHandleId,
   target,
-  targetHandleId,
 }: EdgeProps<CollapsedInvocationNodeEdge>) => {
-  const templates = useStore($templates);
-  const selector = useMemo(
-    () => makeEdgeSelector(templates, source, sourceHandleId, target, targetHandleId),
-    [templates, source, sourceHandleId, target, targetHandleId]
+  const shouldAnimateEdges = useAppSelector(selectShouldAnimateEdges);
+  const selectAreConnectedNodesSelected = useMemo(
+    () => buildSelectAreConnectedNodesSelected(source, target),
+    [source, target]
   );
 
-  const { shouldAnimateEdges, areConnectedNodesSelected } = useAppSelector(selector);
+  const areConnectedNodesSelected = useAppSelector(selectAreConnectedNodesSelected);
 
   const [edgePath, labelX, labelY] = getBezierPath({
     sourceX,
@@ -42,31 +65,29 @@ const InvocationCollapsedEdge = ({
     targetPosition,
   });
 
-  const { base500 } = useChakraThemeTokens();
-
-  const edgeStyles = useMemo(
-    () => getEdgeStyles(base500, selected, shouldAnimateEdges, areConnectedNodesSelected),
-    [areConnectedNodesSelected, base500, selected, shouldAnimateEdges]
-  );
-
   return (
     <>
-      <BaseEdge path={edgePath} markerEnd={markerEnd} style={edgeStyles} />
-      {data?.count && data.count > 1 && (
+      <ChakraBaseEdge
+        path={edgePath}
+        markerEnd={markerEnd}
+        sx={baseEdgeSx}
+        data-selected={selected}
+        data-are-connected-nodes-selected={areConnectedNodesSelected}
+        data-should-animate-edges={shouldAnimateEdges}
+      />
+      {data?.count !== undefined && (
         <EdgeLabelRenderer>
-          <Flex
-            data-testid="asdfasdfasdf"
+          <Box
             position="absolute"
             transform={`translate(-50%, -50%) translate(${labelX}px,${labelY}px)`}
-            className="nodrag nopan"
-            // Unfortunately edge labels do not get the same zIndex treatment as edges do, so we need to manage this ourselves
+            className="edge-label-renderer__custom-edge nodrag nopan" // Unfortunately edge labels do not get the same zIndex treatment as edges do, so we need to manage this ourselves
             // See: https://github.com/xyflow/xyflow/issues/3658
             zIndex={1001}
           >
-            <Badge variant="solid" bg="base.500" opacity={selected ? 0.8 : 0.5} boxShadow="base">
+            <Badge variant="solid" sx={badgeSx} data-selected={selected}>
               {data.count}
             </Badge>
-          </Flex>
+          </Box>
         </EdgeLabelRenderer>
       )}
     </>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx
index 41a30bd09cc..6654532b273 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx
@@ -1,15 +1,61 @@
-import { Flex, Text } from '@invoke-ai/ui-library';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { chakra, Flex, Text } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import type { EdgeProps } from '@xyflow/react';
 import { BaseEdge, EdgeLabelRenderer, getBezierPath } from '@xyflow/react';
 import { useAppSelector } from 'app/store/storeHooks';
-import { getEdgeStyles } from 'features/nodes/components/flow/edges/util/getEdgeColor';
 import { $templates } from 'features/nodes/store/nodesSlice';
-import { selectShouldShowEdgeLabels } from 'features/nodes/store/workflowSettingsSlice';
+import { selectShouldAnimateEdges, selectShouldShowEdgeLabels } from 'features/nodes/store/workflowSettingsSlice';
 import type { DefaultInvocationNodeEdge } from 'features/nodes/types/invocation';
 import { memo, useMemo } from 'react';
 
-import { makeEdgeSelector } from './util/makeEdgeSelector';
+import {
+  buildSelectAreConnectedNodesSelected,
+  buildSelectEdgeColor,
+  buildSelectEdgeLabel,
+} from './util/buildEdgeSelectors';
+
+const ChakraBaseEdge = chakra(BaseEdge);
+
+const baseEdgeSx: SystemStyleObject = {
+  strokeWidth: '3px !important',
+  opacity: '0.5 !important',
+  strokeDasharray: 'none',
+  '&[data-selected="true"]': {
+    opacity: '1 !important',
+  },
+  '&[data-selected="true"], &[data-are-connected-nodes-selected="true"]': {
+    strokeDasharray: '5 !important',
+  },
+  '&[data-should-animate-edges="true"]': {
+    animation: 'dashdraw 0.5s linear infinite !important',
+  },
+};
+
+const edgeLabelWrapperSx: SystemStyleObject = {
+  pointerEvents: 'all',
+  position: 'absolute',
+  bg: 'base.800',
+  borderRadius: 'base',
+  borderWidth: 1,
+  opacity: 0.5,
+  borderColor: 'transparent',
+  py: 1,
+  px: 3,
+  shadow: 'md',
+  '&[data-selected="true"]': {
+    opacity: 1,
+    borderColor: undefined,
+  },
+};
+
+const edgeLabelTextSx: SystemStyleObject = {
+  fontWeight: 'semibold',
+  color: 'base.300',
+  '&[data-selected="true"]': {
+    color: 'base.100',
+  },
+};
 
 const InvocationDefaultEdge = ({
   sourceX,
@@ -26,13 +72,24 @@ const InvocationDefaultEdge = ({
   targetHandleId,
 }: EdgeProps<DefaultInvocationNodeEdge>) => {
   const templates = useStore($templates);
-  const selector = useMemo(
-    () => makeEdgeSelector(templates, source, sourceHandleId, target, targetHandleId),
+  const shouldAnimateEdges = useAppSelector(selectShouldAnimateEdges);
+  const shouldShowEdgeLabels = useAppSelector(selectShouldShowEdgeLabels);
+
+  const selectAreConnectedNodesSelected = useMemo(
+    () => buildSelectAreConnectedNodesSelected(source, target),
+    [source, target]
+  );
+  const selectStrokeColor = useMemo(
+    () => buildSelectEdgeColor(templates, source, sourceHandleId, target, targetHandleId),
     [templates, source, sourceHandleId, target, targetHandleId]
   );
-
-  const { shouldAnimateEdges, areConnectedNodesSelected, stroke, label } = useAppSelector(selector);
-  const shouldShowEdgeLabels = useAppSelector(selectShouldShowEdgeLabels);
+  const selectEdgeLabel = useMemo(
+    () => buildSelectEdgeLabel(templates, source, sourceHandleId, target, targetHandleId),
+    [templates, source, sourceHandleId, target, targetHandleId]
+  );
+  const areConnectedNodesSelected = useAppSelector(selectAreConnectedNodesSelected);
+  const stroke = useAppSelector(selectStrokeColor);
+  const label = useAppSelector(selectEdgeLabel);
 
   const [edgePath, labelX, labelY] = getBezierPath({
     sourceX,
@@ -43,31 +100,26 @@ const InvocationDefaultEdge = ({
     targetPosition,
   });
 
-  const edgeStyles = useMemo(
-    () => getEdgeStyles(stroke, selected, shouldAnimateEdges, areConnectedNodesSelected),
-    [areConnectedNodesSelected, stroke, selected, shouldAnimateEdges]
-  );
-
   return (
     <>
-      <BaseEdge path={edgePath} markerEnd={markerEnd} style={edgeStyles} />
+      <ChakraBaseEdge
+        path={edgePath}
+        markerEnd={markerEnd}
+        sx={baseEdgeSx}
+        stroke={`${stroke} !important`}
+        data-selected={selected}
+        data-are-connected-nodes-selected={areConnectedNodesSelected}
+        data-should-animate-edges={shouldAnimateEdges}
+      />
       {label && shouldShowEdgeLabels && (
         <EdgeLabelRenderer>
           <Flex
             className="nodrag nopan"
-            pointerEvents="all"
-            position="absolute"
             transform={`translate(-50%, -50%) translate(${labelX}px,${labelY}px)`}
-            bg="base.800"
-            borderRadius="base"
-            borderWidth={1}
-            borderColor={selected ? 'undefined' : 'transparent'}
-            opacity={selected ? 1 : 0.5}
-            py={1}
-            px={3}
-            shadow="md"
+            data-selected={selected}
+            sx={edgeLabelWrapperSx}
           >
-            <Text size="sm" fontWeight="semibold" color={selected ? 'base.100' : 'base.300'}>
+            <Text size="sm" sx={edgeLabelTextSx} data-selected={selected}>
               {label}
             </Text>
           </Flex>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/edges/util/buildEdgeSelectors.ts b/invokeai/frontend/web/src/features/nodes/components/flow/edges/util/buildEdgeSelectors.ts
new file mode 100644
index 00000000000..9e4aeea5e39
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/edges/util/buildEdgeSelectors.ts
@@ -0,0 +1,62 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
+import { selectNodesSlice } from 'features/nodes/store/selectors';
+import type { Templates } from 'features/nodes/store/types';
+import { selectWorkflowSettingsSlice } from 'features/nodes/store/workflowSettingsSlice';
+import { isInvocationNode } from 'features/nodes/types/invocation';
+
+import { getFieldColor } from './getEdgeColor';
+
+export const buildSelectAreConnectedNodesSelected = (source: string, target: string) =>
+  createSelector(selectNodesSlice, (nodes): boolean => {
+    const sourceNode = nodes.nodes.find((node) => node.id === source);
+    const targetNode = nodes.nodes.find((node) => node.id === target);
+
+    return Boolean(sourceNode?.selected || targetNode?.selected);
+  });
+
+export const buildSelectEdgeColor = (
+  templates: Templates,
+  source: string,
+  sourceHandleId: string | null | undefined,
+  target: string,
+  targetHandleId: string | null | undefined
+) =>
+  createSelector(selectNodesSlice, selectWorkflowSettingsSlice, (nodes, workflowSettings): string => {
+    const { shouldColorEdges } = workflowSettings;
+    const sourceNode = nodes.nodes.find((node) => node.id === source);
+    const targetNode = nodes.nodes.find((node) => node.id === target);
+
+    if (!sourceNode || !sourceHandleId || !targetNode || !targetHandleId) {
+      return colorTokenToCssVar('base.500');
+    }
+
+    const sourceNodeTemplate = templates[sourceNode.data.type];
+
+    const isInvocationToInvocationEdge = isInvocationNode(sourceNode) && isInvocationNode(targetNode);
+    const outputFieldTemplate = sourceNodeTemplate?.outputs[sourceHandleId];
+    const sourceType = isInvocationToInvocationEdge ? outputFieldTemplate?.type : undefined;
+
+    return sourceType && shouldColorEdges ? getFieldColor(sourceType) : colorTokenToCssVar('base.500');
+  });
+
+export const buildSelectEdgeLabel = (
+  templates: Templates,
+  source: string,
+  sourceHandleId: string | null | undefined,
+  target: string,
+  targetHandleId: string | null | undefined
+) =>
+  createSelector(selectNodesSlice, (nodes): string | null => {
+    const sourceNode = nodes.nodes.find((node) => node.id === source);
+    const targetNode = nodes.nodes.find((node) => node.id === target);
+
+    if (!sourceNode || !sourceHandleId || !targetNode || !targetHandleId) {
+      return null;
+    }
+
+    const sourceNodeTemplate = templates[sourceNode.data.type];
+    const targetNodeTemplate = templates[targetNode.data.type];
+
+    return `${sourceNodeTemplate?.title || sourceNode.data?.label} -> ${targetNodeTemplate?.title || targetNode.data?.label}`;
+  });
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/edges/util/getEdgeColor.ts b/invokeai/frontend/web/src/features/nodes/components/flow/edges/util/getEdgeColor.ts
index b5801c45edb..e7fa43015b2 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/edges/util/getEdgeColor.ts
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/edges/util/getEdgeColor.ts
@@ -1,7 +1,6 @@
 import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
 import { FIELD_COLORS } from 'features/nodes/types/constants';
 import type { FieldType } from 'features/nodes/types/field';
-import type { CSSProperties } from 'react';
 
 export const getFieldColor = (fieldType: FieldType | null): string => {
   if (!fieldType) {
@@ -11,16 +10,3 @@ export const getFieldColor = (fieldType: FieldType | null): string => {
 
   return color ? colorTokenToCssVar(color) : colorTokenToCssVar('base.500');
 };
-
-export const getEdgeStyles = (
-  stroke: string,
-  selected: boolean,
-  shouldAnimateEdges: boolean,
-  areConnectedNodesSelected: boolean
-): CSSProperties => ({
-  strokeWidth: 3,
-  stroke,
-  opacity: selected ? 1 : 0.5,
-  animation: shouldAnimateEdges ? 'dashdraw 0.5s linear infinite' : undefined,
-  strokeDasharray: selected || areConnectedNodesSelected ? 5 : 'none',
-});
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/edges/util/makeEdgeSelector.ts b/invokeai/frontend/web/src/features/nodes/components/flow/edges/util/makeEdgeSelector.ts
deleted file mode 100644
index 6a783f31581..00000000000
--- a/invokeai/frontend/web/src/features/nodes/components/flow/edges/util/makeEdgeSelector.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
-import { deepClone } from 'common/util/deepClone';
-import { selectNodesSlice } from 'features/nodes/store/selectors';
-import type { Templates } from 'features/nodes/store/types';
-import { selectWorkflowSettingsSlice } from 'features/nodes/store/workflowSettingsSlice';
-import { isInvocationNode } from 'features/nodes/types/invocation';
-
-import { getFieldColor } from './getEdgeColor';
-
-const defaultReturnValue = {
-  areConnectedNodesSelected: false,
-  shouldAnimateEdges: false,
-  stroke: colorTokenToCssVar('base.500'),
-  label: '',
-};
-
-export const makeEdgeSelector = (
-  templates: Templates,
-  source: string,
-  sourceHandleId: string | null | undefined,
-  target: string,
-  targetHandleId: string | null | undefined
-) =>
-  createMemoizedSelector(
-    selectNodesSlice,
-    selectWorkflowSettingsSlice,
-    (
-      nodes,
-      workflowSettings
-    ): { areConnectedNodesSelected: boolean; shouldAnimateEdges: boolean; stroke: string; label: string } => {
-      const { shouldAnimateEdges, shouldColorEdges } = workflowSettings;
-      const sourceNode = nodes.nodes.find((node) => node.id === source);
-      const targetNode = nodes.nodes.find((node) => node.id === target);
-
-      const returnValue = deepClone(defaultReturnValue);
-      returnValue.shouldAnimateEdges = shouldAnimateEdges;
-
-      const isInvocationToInvocationEdge = isInvocationNode(sourceNode) && isInvocationNode(targetNode);
-
-      returnValue.areConnectedNodesSelected = Boolean(sourceNode?.selected || targetNode?.selected);
-      if (!sourceNode || !sourceHandleId || !targetNode || !targetHandleId) {
-        return returnValue;
-      }
-
-      const sourceNodeTemplate = templates[sourceNode.data.type];
-      const targetNodeTemplate = templates[targetNode.data.type];
-
-      const outputFieldTemplate = sourceNodeTemplate?.outputs[sourceHandleId];
-      const sourceType = isInvocationToInvocationEdge ? outputFieldTemplate?.type : undefined;
-
-      returnValue.stroke = sourceType && shouldColorEdges ? getFieldColor(sourceType) : colorTokenToCssVar('base.500');
-
-      returnValue.label = `${sourceNodeTemplate?.title || sourceNode.data?.label} -> ${targetNodeTemplate?.title || targetNode.data?.label}`;
-
-      return returnValue;
-    }
-  );
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeCollapsedHandles.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeCollapsedHandles.tsx
index 4094fd1746b..456f89daa04 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeCollapsedHandles.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeCollapsedHandles.tsx
@@ -1,40 +1,25 @@
 import { Handle, Position } from '@xyflow/react';
-import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens';
 import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate';
 import { map } from 'lodash-es';
 import type { CSSProperties } from 'react';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 
 interface Props {
   nodeId: string;
 }
 
 const hiddenHandleStyles: CSSProperties = { visibility: 'hidden' };
+const collapsedHandleStyles: CSSProperties = {
+  borderWidth: 0,
+  borderRadius: '3px',
+  width: '1rem',
+  height: '1rem',
+  backgroundColor: 'var(--invoke-colors-base-600)',
+  zIndex: -1,
+};
 
 const InvocationNodeCollapsedHandles = ({ nodeId }: Props) => {
   const template = useNodeTemplate(nodeId);
-  const { base600 } = useChakraThemeTokens();
-
-  const dummyHandleStyles: CSSProperties = useMemo(
-    () => ({
-      borderWidth: 0,
-      borderRadius: '3px',
-      width: '1rem',
-      height: '1rem',
-      backgroundColor: base600,
-      zIndex: -1,
-    }),
-    [base600]
-  );
-
-  const collapsedTargetStyles: CSSProperties = useMemo(
-    () => ({ ...dummyHandleStyles, left: '-0.5rem' }),
-    [dummyHandleStyles]
-  );
-  const collapsedSourceStyles: CSSProperties = useMemo(
-    () => ({ ...dummyHandleStyles, right: '-0.5rem' }),
-    [dummyHandleStyles]
-  );
 
   if (!template) {
     return null;
@@ -47,7 +32,7 @@ const InvocationNodeCollapsedHandles = ({ nodeId }: Props) => {
         id={`${nodeId}-collapsed-target`}
         isConnectable={false}
         position={Position.Left}
-        style={collapsedTargetStyles}
+        style={collapsedHandleStyles}
       />
       {map(template.inputs, (input) => (
         <Handle
@@ -64,7 +49,7 @@ const InvocationNodeCollapsedHandles = ({ nodeId }: Props) => {
         id={`${nodeId}-collapsed-source`}
         isConnectable={false}
         position={Position.Right}
-        style={collapsedSourceStyles}
+        style={collapsedHandleStyles}
       />
       {map(template.outputs, (output) => (
         <Handle

From 33bde00f8bdf206616a55c723221b7b2859e1bda Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 26 Jan 2025 10:54:46 +1100
Subject: [PATCH 48/58] tweak(ui): node selection colors

---
 .../nodes/components/flow/nodes/common/NodeWrapper.tsx      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
index 44fcaa06235..aeea13ab222 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
@@ -72,11 +72,11 @@ const selectionOverlaySx: SystemStyleObject = {
   visibility: 'hidden',
   opacity: 0.5,
   '&[data-is-selected="true"], &[data-is-hovered="true"]': { visibility: 'visible' },
-  '&[data-is-selected="true"]': { shadow: '0 0 0 3px var(--invoke-colors-blue-500)' },
-  '&[data-is-hovered="true"]': { shadow: '0 0 0 2px var(--invoke-colors-blue-500)' },
+  '&[data-is-selected="true"]': { shadow: '0 0 0 3px var(--invoke-colors-blue-300)' },
+  '&[data-is-hovered="true"]': { shadow: '0 0 0 2px var(--invoke-colors-blue-300)' },
   '&[data-is-selected="true"][data-is-hovered="true"]': {
     opacity: 1,
-    shadow: '0 0 0 3px var(--invoke-colors-blue-500)',
+    shadow: '0 0 0 3px var(--invoke-colors-blue-300)',
   },
 };
 

From ac8314139eb5031f4fb525e2232f28d9a2ee3f1d Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 26 Jan 2025 10:59:04 +1100
Subject: [PATCH 49/58] fix(ui): do not render dashed edges unless animation is
 enabled

---
 .../nodes/components/flow/edges/InvocationDefaultEdge.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx
index 6654532b273..bd7484f0beb 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx
@@ -24,11 +24,11 @@ const baseEdgeSx: SystemStyleObject = {
   '&[data-selected="true"]': {
     opacity: '1 !important',
   },
-  '&[data-selected="true"], &[data-are-connected-nodes-selected="true"]': {
-    strokeDasharray: '5 !important',
-  },
   '&[data-should-animate-edges="true"]': {
     animation: 'dashdraw 0.5s linear infinite !important',
+    '&[data-selected="true"], &[data-are-connected-nodes-selected="true"]': {
+      strokeDasharray: '5 !important',
+    },
   },
 };
 

From 9586b4476dd35d49345b9818969e68ed4c5d4467 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 26 Jan 2025 11:05:53 +1100
Subject: [PATCH 50/58] fix(ui): node-autoconnect showing invalid connection
 options

---
 .../nodes/components/flow/AddNodeCmdk/AddNodeCmdk.tsx      | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodeCmdk/AddNodeCmdk.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodeCmdk/AddNodeCmdk.tsx
index ecb06308428..d97408c624c 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodeCmdk/AddNodeCmdk.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodeCmdk/AddNodeCmdk.tsx
@@ -44,6 +44,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiCircuitryBold, PiFlaskBold, PiHammerBold, PiLightningFill } from 'react-icons/pi';
 import type { S } from 'services/api/types';
+import { objectEntries } from 'tsafe';
 
 const useThrottle = <T,>(value: T, limit: number) => {
   const [throttledValue, setThrottledValue] = useState(value);
@@ -382,11 +383,11 @@ const NodeCommandList = memo(({ searchTerm, onSelect }: { searchTerm: string; on
         if (filter(template, searchTerm)) {
           const candidateFields = pendingConnection.handleType === 'source' ? template.inputs : template.outputs;
 
-          for (const field of Object.values(candidateFields)) {
+          for (const [_fieldName, fieldTemplate] of objectEntries(candidateFields)) {
             const sourceType =
-              pendingConnection.handleType === 'source' ? field.type : pendingConnection.fieldTemplate.type;
+              pendingConnection.handleType === 'source' ? pendingConnection.fieldTemplate.type : fieldTemplate.type;
             const targetType =
-              pendingConnection.handleType === 'target' ? field.type : pendingConnection.fieldTemplate.type;
+              pendingConnection.handleType === 'target' ? pendingConnection.fieldTemplate.type : fieldTemplate.type;
 
             if (validateConnectionTypes(sourceType, targetType)) {
               _items.push({

From 9edd1895bd42b20f231f410aeadf8955916e132f Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 26 Jan 2025 11:11:57 +1100
Subject: [PATCH 51/58] chore(ui): lint

---
 .../src/common/hooks/useChakraThemeTokens.ts  | 238 ------------------
 .../components/flow/nodes/Notes/NotesNode.tsx |   2 +-
 .../web/src/features/nodes/hooks/useNode.ts   |  19 --
 .../web/src/features/nodes/store/types.ts     |   7 +-
 .../nodes/store/util/getCollectItemType.ts    |   2 +-
 .../store/util/getFirstValidConnection.ts     |   2 +-
 .../web/src/features/queue/store/readiness.ts |   2 +-
 7 files changed, 5 insertions(+), 267 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/common/hooks/useChakraThemeTokens.ts
 delete mode 100644 invokeai/frontend/web/src/features/nodes/hooks/useNode.ts

diff --git a/invokeai/frontend/web/src/common/hooks/useChakraThemeTokens.ts b/invokeai/frontend/web/src/common/hooks/useChakraThemeTokens.ts
deleted file mode 100644
index 93345f6a4cb..00000000000
--- a/invokeai/frontend/web/src/common/hooks/useChakraThemeTokens.ts
+++ /dev/null
@@ -1,238 +0,0 @@
-import { useToken } from '@invoke-ai/ui-library';
-
-export const useChakraThemeTokens = () => {
-  const [
-    base50,
-    base100,
-    base150,
-    base200,
-    base250,
-    base300,
-    base350,
-    base400,
-    base450,
-    base500,
-    base550,
-    base600,
-    base650,
-    base700,
-    base750,
-    base800,
-    base850,
-    base900,
-    base950,
-    accent50,
-    accent100,
-    accent150,
-    accent200,
-    accent250,
-    accent300,
-    accent350,
-    accent400,
-    accent450,
-    accent500,
-    accent550,
-    accent600,
-    accent650,
-    accent700,
-    accent750,
-    accent800,
-    accent850,
-    accent900,
-    accent950,
-    baseAlpha50,
-    baseAlpha100,
-    baseAlpha150,
-    baseAlpha200,
-    baseAlpha250,
-    baseAlpha300,
-    baseAlpha350,
-    baseAlpha400,
-    baseAlpha450,
-    baseAlpha500,
-    baseAlpha550,
-    baseAlpha600,
-    baseAlpha650,
-    baseAlpha700,
-    baseAlpha750,
-    baseAlpha800,
-    baseAlpha850,
-    baseAlpha900,
-    baseAlpha950,
-    accentAlpha50,
-    accentAlpha100,
-    accentAlpha150,
-    accentAlpha200,
-    accentAlpha250,
-    accentAlpha300,
-    accentAlpha350,
-    accentAlpha400,
-    accentAlpha450,
-    accentAlpha500,
-    accentAlpha550,
-    accentAlpha600,
-    accentAlpha650,
-    accentAlpha700,
-    accentAlpha750,
-    accentAlpha800,
-    accentAlpha850,
-    accentAlpha900,
-    accentAlpha950,
-  ] = useToken('colors', [
-    'base.50',
-    'base.100',
-    'base.150',
-    'base.200',
-    'base.250',
-    'base.300',
-    'base.350',
-    'base.400',
-    'base.450',
-    'base.500',
-    'base.550',
-    'base.600',
-    'base.650',
-    'base.700',
-    'base.750',
-    'base.800',
-    'base.850',
-    'base.900',
-    'base.950',
-    'accent.50',
-    'accent.100',
-    'accent.150',
-    'accent.200',
-    'accent.250',
-    'accent.300',
-    'accent.350',
-    'accent.400',
-    'accent.450',
-    'accent.500',
-    'accent.550',
-    'accent.600',
-    'accent.650',
-    'accent.700',
-    'accent.750',
-    'accent.800',
-    'accent.850',
-    'accent.900',
-    'accent.950',
-    'baseAlpha.50',
-    'baseAlpha.100',
-    'baseAlpha.150',
-    'baseAlpha.200',
-    'baseAlpha.250',
-    'baseAlpha.300',
-    'baseAlpha.350',
-    'baseAlpha.400',
-    'baseAlpha.450',
-    'baseAlpha.500',
-    'baseAlpha.550',
-    'baseAlpha.600',
-    'baseAlpha.650',
-    'baseAlpha.700',
-    'baseAlpha.750',
-    'baseAlpha.800',
-    'baseAlpha.850',
-    'baseAlpha.900',
-    'baseAlpha.950',
-    'accentAlpha.50',
-    'accentAlpha.100',
-    'accentAlpha.150',
-    'accentAlpha.200',
-    'accentAlpha.250',
-    'accentAlpha.300',
-    'accentAlpha.350',
-    'accentAlpha.400',
-    'accentAlpha.450',
-    'accentAlpha.500',
-    'accentAlpha.550',
-    'accentAlpha.600',
-    'accentAlpha.650',
-    'accentAlpha.700',
-    'accentAlpha.750',
-    'accentAlpha.800',
-    'accentAlpha.850',
-    'accentAlpha.900',
-    'accentAlpha.950',
-  ]);
-
-  return {
-    base50,
-    base100,
-    base150,
-    base200,
-    base250,
-    base300,
-    base350,
-    base400,
-    base450,
-    base500,
-    base550,
-    base600,
-    base650,
-    base700,
-    base750,
-    base800,
-    base850,
-    base900,
-    base950,
-    accent50,
-    accent100,
-    accent150,
-    accent200,
-    accent250,
-    accent300,
-    accent350,
-    accent400,
-    accent450,
-    accent500,
-    accent550,
-    accent600,
-    accent650,
-    accent700,
-    accent750,
-    accent800,
-    accent850,
-    accent900,
-    accent950,
-    baseAlpha50,
-    baseAlpha100,
-    baseAlpha150,
-    baseAlpha200,
-    baseAlpha250,
-    baseAlpha300,
-    baseAlpha350,
-    baseAlpha400,
-    baseAlpha450,
-    baseAlpha500,
-    baseAlpha550,
-    baseAlpha600,
-    baseAlpha650,
-    baseAlpha700,
-    baseAlpha750,
-    baseAlpha800,
-    baseAlpha850,
-    baseAlpha900,
-    baseAlpha950,
-    accentAlpha50,
-    accentAlpha100,
-    accentAlpha150,
-    accentAlpha200,
-    accentAlpha250,
-    accentAlpha300,
-    accentAlpha350,
-    accentAlpha400,
-    accentAlpha450,
-    accentAlpha500,
-    accentAlpha550,
-    accentAlpha600,
-    accentAlpha650,
-    accentAlpha700,
-    accentAlpha750,
-    accentAlpha800,
-    accentAlpha850,
-    accentAlpha900,
-    accentAlpha950,
-  };
-};
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx
index 2ce72490254..9b93c57f07c 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx
@@ -1,5 +1,5 @@
 import { Box, Flex, Textarea } from '@invoke-ai/ui-library';
-import type { Node,NodeProps } from '@xyflow/react';
+import type { Node, NodeProps } from '@xyflow/react';
 import { useAppDispatch } from 'app/store/storeHooks';
 import NodeCollapseButton from 'features/nodes/components/flow/nodes/common/NodeCollapseButton';
 import NodeTitle from 'features/nodes/components/flow/nodes/common/NodeTitle';
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useNode.ts b/invokeai/frontend/web/src/features/nodes/hooks/useNode.ts
deleted file mode 100644
index b86acca4a65..00000000000
--- a/invokeai/frontend/web/src/features/nodes/hooks/useNode.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { Node } from '@xyflow/react';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppSelector } from 'app/store/storeHooks';
-import { selectNode, selectNodesSlice } from 'features/nodes/store/selectors';
-import { useMemo } from 'react';
-
-export const useNode = (nodeId: string): Node => {
-  const selector = useMemo(
-    () =>
-      createMemoizedSelector(selectNodesSlice, (nodes) => {
-        return selectNode(nodes, nodeId);
-      }),
-    [nodeId]
-  );
-
-  const node = useAppSelector(selector);
-
-  return node;
-};
diff --git a/invokeai/frontend/web/src/features/nodes/store/types.ts b/invokeai/frontend/web/src/features/nodes/store/types.ts
index 6db8dfd4e41..bc961bf5d56 100644
--- a/invokeai/frontend/web/src/features/nodes/store/types.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/types.ts
@@ -5,12 +5,7 @@ import type {
   FieldOutputTemplate,
   StatefulFieldValue,
 } from 'features/nodes/types/field';
-import type {
-  AnyEdge,
-  AnyNode,
-  InvocationTemplate,
-  NodeExecutionState,
-} from 'features/nodes/types/invocation';
+import type { AnyEdge, AnyNode, InvocationTemplate, NodeExecutionState } from 'features/nodes/types/invocation';
 import type { WorkflowV3 } from 'features/nodes/types/workflow';
 import type { SQLiteDirection, WorkflowRecordOrderBy } from 'services/api/types';
 
diff --git a/invokeai/frontend/web/src/features/nodes/store/util/getCollectItemType.ts b/invokeai/frontend/web/src/features/nodes/store/util/getCollectItemType.ts
index bba9d5b1e0c..9fb2795ae81 100644
--- a/invokeai/frontend/web/src/features/nodes/store/util/getCollectItemType.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/util/getCollectItemType.ts
@@ -1,6 +1,6 @@
 import type { Templates } from 'features/nodes/store/types';
 import type { FieldType } from 'features/nodes/types/field';
-import type { AnyNode, AnyEdge } from 'features/nodes/types/invocation';
+import type { AnyEdge, AnyNode } from 'features/nodes/types/invocation';
 
 /**
  * Given a collect node, return the type of the items it collects. The graph is traversed to find the first node and
diff --git a/invokeai/frontend/web/src/features/nodes/store/util/getFirstValidConnection.ts b/invokeai/frontend/web/src/features/nodes/store/util/getFirstValidConnection.ts
index d38f1f1a0de..2a88e2078a1 100644
--- a/invokeai/frontend/web/src/features/nodes/store/util/getFirstValidConnection.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/util/getFirstValidConnection.ts
@@ -2,7 +2,7 @@ import type { Connection } from '@xyflow/react';
 import type { Templates } from 'features/nodes/store/types';
 import { validateConnection } from 'features/nodes/store/util/validateConnection';
 import type { FieldInputTemplate, FieldOutputTemplate } from 'features/nodes/types/field';
-import type { AnyEdge,AnyNode } from 'features/nodes/types/invocation';
+import type { AnyEdge, AnyNode } from 'features/nodes/types/invocation';
 import { map } from 'lodash-es';
 
 /**
diff --git a/invokeai/frontend/web/src/features/queue/store/readiness.ts b/invokeai/frontend/web/src/features/queue/store/readiness.ts
index 5eea303295e..ff3026e651a 100644
--- a/invokeai/frontend/web/src/features/queue/store/readiness.ts
+++ b/invokeai/frontend/web/src/features/queue/store/readiness.ts
@@ -41,7 +41,7 @@ import {
   validateNumberFieldCollectionValue,
   validateStringFieldCollectionValue,
 } from 'features/nodes/types/fieldValidators';
-import type { InvocationNode, AnyEdge } from 'features/nodes/types/invocation';
+import type { AnyEdge, InvocationNode } from 'features/nodes/types/invocation';
 import { isBatchNode, isExecutableNode, isInvocationNode } from 'features/nodes/types/invocation';
 import type { UpscaleState } from 'features/parameters/store/upscaleSlice';
 import { selectUpscaleSlice } from 'features/parameters/store/upscaleSlice';

From 020544045f92cf09ebb280dea6b38566db834b52 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 26 Jan 2025 11:14:05 +1100
Subject: [PATCH 52/58] chore(ui): lint

---
 .../web/src/features/nodes/types/workflow.ts  | 31 -------------------
 1 file changed, 31 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/types/workflow.ts b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
index c899cf91073..4279366b29d 100644
--- a/invokeai/frontend/web/src/features/nodes/types/workflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
@@ -84,12 +84,6 @@ export type WorkflowV3 = z.infer<typeof zWorkflowV3>;
 // #endregion
 
 // #region Workflow Builder
-export const elements: Record<string, FormElement> = {};
-
-export const addElement = (element: FormElement) => {
-  elements[element.id] = element;
-};
-
 const zElementId = z.string().trim().min(1);
 export type ElementId = z.infer<typeof zElementId>;
 
@@ -123,11 +117,6 @@ export const buildNodeField = (
   };
   return element;
 };
-const _nodeField = (...args: Parameters<typeof buildNodeField>): NodeFieldElement => {
-  const element = buildNodeField(...args);
-  addElement(element);
-  return element;
-};
 
 const HEADING_TYPE = 'heading';
 export const HEADING_CLASS_NAME = getPrefixedId(HEADING_TYPE, '-');
@@ -156,11 +145,6 @@ export const buildHeading = (
   };
   return element;
 };
-const _heading = (...args: Parameters<typeof buildHeading>): HeadingElement => {
-  const element = buildHeading(...args);
-  addElement(element);
-  return element;
-};
 
 const TEXT_TYPE = 'text';
 export const TEXT_CLASS_NAME = getPrefixedId(TEXT_TYPE, '-');
@@ -189,11 +173,6 @@ export const buildText = (
   };
   return element;
 };
-const _text = (...args: Parameters<typeof buildText>): TextElement => {
-  const element = buildText(...args);
-  addElement(element);
-  return element;
-};
 
 const DIVIDER_TYPE = 'divider';
 export const DIVIDER_CLASS_NAME = getPrefixedId(DIVIDER_TYPE, '-');
@@ -210,11 +189,6 @@ export const buildDivider = (parentId?: NodeFieldElement['parentId']): DividerEl
   };
   return element;
 };
-const _divider = (...args: Parameters<typeof buildDivider>): DividerElement => {
-  const element = buildDivider(...args);
-  addElement(element);
-  return element;
-};
 
 const CONTAINER_TYPE = 'container';
 export const CONTAINER_CLASS_NAME = getPrefixedId(CONTAINER_TYPE, '-');
@@ -243,11 +217,6 @@ export const buildContainer = (
   };
   return element;
 };
-export const _container = (...args: Parameters<typeof buildContainer>): ContainerElement => {
-  const element = buildContainer(...args);
-  addElement(element);
-  return element;
-};
 
 const zFormElement = z.union([zContainerElement, zNodeFieldElement, zHeadingElement, zTextElement, zDividerElement]);
 

From 4ecf8be0bea291a85fac9718869076bc0a6170c0 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 26 Jan 2025 11:23:07 +1100
Subject: [PATCH 53/58] perf(ui): faster InputFieldRenderer

Use non-zod type guards for input field types and fail early when possible
---
 .../Invocation/fields/InputFieldRenderer.tsx  | 255 +++++++++++------
 .../web/src/features/nodes/types/field.ts     | 266 ++++++++++--------
 2 files changed, 315 insertions(+), 206 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
index f13c48c288d..c844853fbe3 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
@@ -113,155 +113,248 @@ type InputFieldProps = {
 };
 
 export const InputFieldRenderer = memo(({ nodeId, fieldName }: InputFieldProps) => {
-  const fieldInstance = useInputFieldInstance(nodeId, fieldName);
-  const fieldTemplate = useInputFieldTemplate(nodeId, fieldName);
+  const field = useInputFieldInstance(nodeId, fieldName);
+  const template = useInputFieldTemplate(nodeId, fieldName);
 
-  if (isStringFieldCollectionInputInstance(fieldInstance) && isStringFieldCollectionInputTemplate(fieldTemplate)) {
-    return <StringFieldCollectionInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isStringFieldCollectionInputTemplate(template)) {
+    if (!isStringFieldCollectionInputInstance(field)) {
+      return null;
+    }
+    return <StringFieldCollectionInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isStringFieldInputInstance(fieldInstance) && isStringFieldInputTemplate(fieldTemplate)) {
-    if (fieldTemplate.ui_component === 'textarea') {
-      return <StringFieldTextarea nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isStringFieldInputTemplate(template)) {
+    if (!isStringFieldInputInstance(field)) {
+      return null;
+    }
+    if (template.ui_component === 'textarea') {
+      return <StringFieldTextarea nodeId={nodeId} field={field} fieldTemplate={template} />;
     } else {
-      return <StringFieldInput nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+      return <StringFieldInput nodeId={nodeId} field={field} fieldTemplate={template} />;
     }
   }
 
-  if (isBooleanFieldInputInstance(fieldInstance) && isBooleanFieldInputTemplate(fieldTemplate)) {
-    return <BooleanFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isBooleanFieldInputTemplate(template)) {
+    if (!isBooleanFieldInputInstance(field)) {
+      return null;
+    }
+    return <BooleanFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isFloatFieldInputInstance(fieldInstance) && isFloatFieldInputTemplate(fieldTemplate)) {
-    return <FloatFieldInput nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isIntegerFieldInputTemplate(template)) {
+    if (!isIntegerFieldInputInstance(field)) {
+      return null;
+    }
+    return <IntegerFieldInput nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isFloatFieldCollectionInputInstance(fieldInstance) && isFloatFieldCollectionInputTemplate(fieldTemplate)) {
-    return <FloatFieldCollectionInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isFloatFieldInputTemplate(template)) {
+    if (!isFloatFieldInputInstance(field)) {
+      return null;
+    }
+    return <FloatFieldInput nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isIntegerFieldInputInstance(fieldInstance) && isIntegerFieldInputTemplate(fieldTemplate)) {
-    return <IntegerFieldInput nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isIntegerFieldCollectionInputTemplate(template)) {
+    if (!isIntegerFieldCollectionInputInstance(field)) {
+      return null;
+    }
+    return <IntegerFieldCollectionInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isIntegerFieldCollectionInputInstance(fieldInstance) && isIntegerFieldCollectionInputTemplate(fieldTemplate)) {
-    return <IntegerFieldCollectionInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isFloatFieldCollectionInputTemplate(template)) {
+    if (!isFloatFieldCollectionInputInstance(field)) {
+      return null;
+    }
+    return <FloatFieldCollectionInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isEnumFieldInputInstance(fieldInstance) && isEnumFieldInputTemplate(fieldTemplate)) {
-    return <EnumFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isEnumFieldInputTemplate(template)) {
+    if (!isEnumFieldInputInstance(field)) {
+      return null;
+    }
+    return <EnumFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isImageFieldCollectionInputInstance(fieldInstance) && isImageFieldCollectionInputTemplate(fieldTemplate)) {
-    return <ImageFieldCollectionInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isImageFieldCollectionInputTemplate(template)) {
+    if (!isImageFieldCollectionInputInstance(field)) {
+      return null;
+    }
+    return <ImageFieldCollectionInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isImageFieldInputInstance(fieldInstance) && isImageFieldInputTemplate(fieldTemplate)) {
-    return <ImageFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isImageFieldInputTemplate(template)) {
+    if (!isImageFieldInputInstance(field)) {
+      return null;
+    }
+    return <ImageFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isBoardFieldInputInstance(fieldInstance) && isBoardFieldInputTemplate(fieldTemplate)) {
-    return <BoardFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isBoardFieldInputTemplate(template)) {
+    if (!isBoardFieldInputInstance(field)) {
+      return null;
+    }
+    return <BoardFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isMainModelFieldInputInstance(fieldInstance) && isMainModelFieldInputTemplate(fieldTemplate)) {
-    return <MainModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isMainModelFieldInputTemplate(template)) {
+    if (!isMainModelFieldInputInstance(field)) {
+      return null;
+    }
+    return <MainModelFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isModelIdentifierFieldInputInstance(fieldInstance) && isModelIdentifierFieldInputTemplate(fieldTemplate)) {
-    return <ModelIdentifierFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isModelIdentifierFieldInputTemplate(template)) {
+    if (!isModelIdentifierFieldInputInstance(field)) {
+      return null;
+    }
+    return <ModelIdentifierFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isSDXLRefinerModelFieldInputInstance(fieldInstance) && isSDXLRefinerModelFieldInputTemplate(fieldTemplate)) {
-    return <RefinerModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isSDXLRefinerModelFieldInputTemplate(template)) {
+    if (!isSDXLRefinerModelFieldInputInstance(field)) {
+      return null;
+    }
+    return <RefinerModelFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isVAEModelFieldInputInstance(fieldInstance) && isVAEModelFieldInputTemplate(fieldTemplate)) {
-    return <VAEModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isVAEModelFieldInputTemplate(template)) {
+    if (!isVAEModelFieldInputInstance(field)) {
+      return null;
+    }
+    return <VAEModelFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isT5EncoderModelFieldInputInstance(fieldInstance) && isT5EncoderModelFieldInputTemplate(fieldTemplate)) {
-    return <T5EncoderModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isT5EncoderModelFieldInputTemplate(template)) {
+    if (!isT5EncoderModelFieldInputInstance(field)) {
+      return null;
+    }
+    return <T5EncoderModelFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
-  if (isCLIPEmbedModelFieldInputInstance(fieldInstance) && isCLIPEmbedModelFieldInputTemplate(fieldTemplate)) {
-    return <CLIPEmbedModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isCLIPEmbedModelFieldInputTemplate(template)) {
+    if (!isCLIPEmbedModelFieldInputInstance(field)) {
+      return null;
+    }
+    return <CLIPEmbedModelFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isCLIPLEmbedModelFieldInputInstance(fieldInstance) && isCLIPLEmbedModelFieldInputTemplate(fieldTemplate)) {
-    return <CLIPLEmbedModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isCLIPLEmbedModelFieldInputTemplate(template)) {
+    if (!isCLIPLEmbedModelFieldInputInstance(field)) {
+      return null;
+    }
+    return <CLIPLEmbedModelFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isCLIPGEmbedModelFieldInputInstance(fieldInstance) && isCLIPGEmbedModelFieldInputTemplate(fieldTemplate)) {
-    return <CLIPGEmbedModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isCLIPGEmbedModelFieldInputTemplate(template)) {
+    if (!isCLIPGEmbedModelFieldInputInstance(field)) {
+      return null;
+    }
+    return <CLIPGEmbedModelFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isControlLoRAModelFieldInputInstance(fieldInstance) && isControlLoRAModelFieldInputTemplate(fieldTemplate)) {
-    return <ControlLoRAModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isControlLoRAModelFieldInputTemplate(template)) {
+    if (!isControlLoRAModelFieldInputInstance(field)) {
+      return null;
+    }
+    return <ControlLoRAModelFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isFluxVAEModelFieldInputInstance(fieldInstance) && isFluxVAEModelFieldInputTemplate(fieldTemplate)) {
-    return <FluxVAEModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isFluxVAEModelFieldInputTemplate(template)) {
+    if (!isFluxVAEModelFieldInputInstance(field)) {
+      return null;
+    }
+    return <FluxVAEModelFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isLoRAModelFieldInputInstance(fieldInstance) && isLoRAModelFieldInputTemplate(fieldTemplate)) {
-    return <LoRAModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isLoRAModelFieldInputTemplate(template)) {
+    if (!isLoRAModelFieldInputInstance(field)) {
+      return null;
+    }
+    return <LoRAModelFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isControlNetModelFieldInputInstance(fieldInstance) && isControlNetModelFieldInputTemplate(fieldTemplate)) {
-    return <ControlNetModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isControlNetModelFieldInputTemplate(template)) {
+    if (!isControlNetModelFieldInputInstance(field)) {
+      return null;
+    }
+    return <ControlNetModelFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isIPAdapterModelFieldInputInstance(fieldInstance) && isIPAdapterModelFieldInputTemplate(fieldTemplate)) {
-    return <IPAdapterModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isIPAdapterModelFieldInputTemplate(template)) {
+    if (!isIPAdapterModelFieldInputInstance(field)) {
+      return null;
+    }
+    return <IPAdapterModelFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isT2IAdapterModelFieldInputInstance(fieldInstance) && isT2IAdapterModelFieldInputTemplate(fieldTemplate)) {
-    return <T2IAdapterModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isT2IAdapterModelFieldInputTemplate(template)) {
+    if (!isT2IAdapterModelFieldInputInstance(field)) {
+      return null;
+    }
+    return <T2IAdapterModelFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (
-    isSpandrelImageToImageModelFieldInputInstance(fieldInstance) &&
-    isSpandrelImageToImageModelFieldInputTemplate(fieldTemplate)
-  ) {
-    return (
-      <SpandrelImageToImageModelFieldInputComponent
-        nodeId={nodeId}
-        field={fieldInstance}
-        fieldTemplate={fieldTemplate}
-      />
-    );
+  if (isSpandrelImageToImageModelFieldInputTemplate(template)) {
+    if (!isSpandrelImageToImageModelFieldInputInstance(field)) {
+      return null;
+    }
+    return <SpandrelImageToImageModelFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isColorFieldInputInstance(fieldInstance) && isColorFieldInputTemplate(fieldTemplate)) {
-    return <ColorFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isColorFieldInputTemplate(template)) {
+    if (!isColorFieldInputInstance(field)) {
+      return null;
+    }
+    return <ColorFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isFluxMainModelFieldInputInstance(fieldInstance) && isFluxMainModelFieldInputTemplate(fieldTemplate)) {
-    return <FluxMainModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isFluxMainModelFieldInputTemplate(template)) {
+    if (!isFluxMainModelFieldInputInstance(field)) {
+      return null;
+    }
+    return <FluxMainModelFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isSD3MainModelFieldInputInstance(fieldInstance) && isSD3MainModelFieldInputTemplate(fieldTemplate)) {
-    return <SD3MainModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isSD3MainModelFieldInputTemplate(template)) {
+    if (!isSD3MainModelFieldInputInstance(field)) {
+      return null;
+    }
+    return <SD3MainModelFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isSDXLMainModelFieldInputInstance(fieldInstance) && isSDXLMainModelFieldInputTemplate(fieldTemplate)) {
-    return <SDXLMainModelFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isSDXLMainModelFieldInputTemplate(template)) {
+    if (!isSDXLMainModelFieldInputInstance(field)) {
+      return null;
+    }
+    return <SDXLMainModelFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isSchedulerFieldInputInstance(fieldInstance) && isSchedulerFieldInputTemplate(fieldTemplate)) {
-    return <SchedulerFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isSchedulerFieldInputTemplate(template)) {
+    if (!isSchedulerFieldInputInstance(field)) {
+      return null;
+    }
+    return <SchedulerFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isFloatGeneratorFieldInputInstance(fieldInstance) && isFloatGeneratorFieldInputTemplate(fieldTemplate)) {
-    return <FloatGeneratorFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isFloatGeneratorFieldInputTemplate(template)) {
+    if (!isFloatGeneratorFieldInputInstance(field)) {
+      return null;
+    }
+    return <FloatGeneratorFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isIntegerGeneratorFieldInputInstance(fieldInstance) && isIntegerGeneratorFieldInputTemplate(fieldTemplate)) {
-    return <IntegerGeneratorFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isIntegerGeneratorFieldInputTemplate(template)) {
+    if (!isIntegerGeneratorFieldInputInstance(field)) {
+      return null;
+    }
+    return <IntegerGeneratorFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
-  if (isStringGeneratorFieldInputInstance(fieldInstance) && isStringGeneratorFieldInputTemplate(fieldTemplate)) {
-    return <StringGeneratorFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  if (isStringGeneratorFieldInputTemplate(template)) {
+    if (!isStringGeneratorFieldInputInstance(field)) {
+      return null;
+    }
+    return <StringGeneratorFieldInputComponent nodeId={nodeId} field={field} fieldTemplate={template} />;
   }
 
   return null;
diff --git a/invokeai/frontend/web/src/features/nodes/types/field.ts b/invokeai/frontend/web/src/features/nodes/types/field.ts
index c5e1482cb2a..ccfa41a5f71 100644
--- a/invokeai/frontend/web/src/features/nodes/types/field.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/field.ts
@@ -1,4 +1,3 @@
-import { buildTypeGuard } from 'features/parameters/types/parameterSchemas';
 import { isNil, trim } from 'lodash-es';
 import MersenneTwister from 'mtwist';
 import { assert } from 'tsafe';
@@ -89,7 +88,10 @@ const zIntegerCollectionFieldType = zFieldTypeBase.extend({
   cardinality: z.literal(COLLECTION),
   originalType: zStatelessFieldType.optional(),
 });
-export const isIntegerCollectionFieldType = buildTypeGuard(zIntegerCollectionFieldType);
+export const isIntegerCollectionFieldType = (
+  fieldType: FieldType
+): fieldType is z.infer<typeof zIntegerCollectionFieldType> =>
+  fieldType.name === 'IntegerField' && fieldType.cardinality === COLLECTION;
 
 const zFloatFieldType = zFieldTypeBase.extend({
   name: z.literal('FloatField'),
@@ -100,7 +102,10 @@ const zFloatCollectionFieldType = zFieldTypeBase.extend({
   cardinality: z.literal(COLLECTION),
   originalType: zStatelessFieldType.optional(),
 });
-export const isFloatCollectionFieldType = buildTypeGuard(zFloatCollectionFieldType);
+export const isFloatCollectionFieldType = (
+  fieldType: FieldType
+): fieldType is z.infer<typeof zFloatCollectionFieldType> =>
+  fieldType.name === 'FloatField' && fieldType.cardinality === COLLECTION;
 
 const zStringFieldType = zFieldTypeBase.extend({
   name: z.literal('StringField'),
@@ -111,7 +116,10 @@ const zStringCollectionFieldType = zFieldTypeBase.extend({
   cardinality: z.literal(COLLECTION),
   originalType: zStatelessFieldType.optional(),
 });
-export const isStringCollectionFieldType = buildTypeGuard(zStringCollectionFieldType);
+export const isStringCollectionFieldType = (
+  fieldType: FieldType
+): fieldType is z.infer<typeof zStringCollectionFieldType> =>
+  fieldType.name === 'StringField' && fieldType.cardinality === COLLECTION;
 
 const zBooleanFieldType = zFieldTypeBase.extend({
   name: z.literal('BooleanField'),
@@ -130,7 +138,11 @@ const zImageCollectionFieldType = zFieldTypeBase.extend({
   cardinality: z.literal(COLLECTION),
   originalType: zStatelessFieldType.optional(),
 });
-export const isImageCollectionFieldType = buildTypeGuard(zImageCollectionFieldType);
+export const isImageCollectionFieldType = (
+  fieldType: FieldType
+): fieldType is z.infer<typeof zImageCollectionFieldType> =>
+  fieldType.name === 'ImageField' && fieldType.cardinality === COLLECTION;
+
 const zBoardFieldType = zFieldTypeBase.extend({
   name: z.literal('BoardField'),
   originalType: zStatelessFieldType.optional(),
@@ -272,6 +284,22 @@ export const isSingleOrCollection = (fieldType: FieldType): boolean =>
   fieldType.cardinality === zCardinality.enum.SINGLE_OR_COLLECTION;
 // #endregion
 
+const buildInstanceTypeGuard = <T extends z.ZodTypeAny>(schema: T) => {
+  return (val: unknown): val is z.infer<T> => schema.safeParse(val).success;
+};
+
+const buildTemplateTypeGuard =
+  <T extends FieldInputTemplate>(name: string, cardinality?: 'SINGLE' | 'COLLECTION' | 'SINGLE_OR_COLLECTION') =>
+  (template: FieldInputTemplate): template is T => {
+    if (template.type.name !== name) {
+      return false;
+    }
+    if (cardinality) {
+      return template.type.cardinality === cardinality;
+    }
+    return true;
+  };
+
 // #region IntegerField
 
 export const zIntegerFieldValue = z.number().int();
@@ -294,8 +322,8 @@ const zIntegerFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type IntegerFieldValue = z.infer<typeof zIntegerFieldValue>;
 export type IntegerFieldInputInstance = z.infer<typeof zIntegerFieldInputInstance>;
 export type IntegerFieldInputTemplate = z.infer<typeof zIntegerFieldInputTemplate>;
-export const isIntegerFieldInputInstance = buildTypeGuard(zIntegerFieldInputInstance);
-export const isIntegerFieldInputTemplate = buildTypeGuard(zIntegerFieldInputTemplate);
+export const isIntegerFieldInputInstance = buildInstanceTypeGuard(zIntegerFieldInputInstance);
+export const isIntegerFieldInputTemplate = buildTemplateTypeGuard<IntegerFieldInputTemplate>('IntegerField', 'SINGLE');
 // #endregion
 
 // #region IntegerField Collection
@@ -332,12 +360,14 @@ const zIntegerFieldCollectionOutputTemplate = zFieldOutputTemplateBase.extend({
 export type IntegerFieldCollectionValue = z.infer<typeof zIntegerFieldCollectionValue>;
 export type IntegerFieldCollectionInputInstance = z.infer<typeof zIntegerFieldCollectionInputInstance>;
 export type IntegerFieldCollectionInputTemplate = z.infer<typeof zIntegerFieldCollectionInputTemplate>;
-export const isIntegerFieldCollectionInputInstance = buildTypeGuard(zIntegerFieldCollectionInputInstance);
-export const isIntegerFieldCollectionInputTemplate = buildTypeGuard(zIntegerFieldCollectionInputTemplate);
+export const isIntegerFieldCollectionInputInstance = buildInstanceTypeGuard(zIntegerFieldCollectionInputInstance);
+export const isIntegerFieldCollectionInputTemplate = buildTemplateTypeGuard<IntegerFieldCollectionInputTemplate>(
+  'IntegerField',
+  'COLLECTION'
+);
 // #endregion
 
 // #region FloatField
-
 export const zFloatFieldValue = z.number();
 const zFloatFieldInputInstance = zFieldInputInstanceBase.extend({
   value: zFloatFieldValue,
@@ -358,8 +388,8 @@ const zFloatFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type FloatFieldValue = z.infer<typeof zFloatFieldValue>;
 export type FloatFieldInputInstance = z.infer<typeof zFloatFieldInputInstance>;
 export type FloatFieldInputTemplate = z.infer<typeof zFloatFieldInputTemplate>;
-export const isFloatFieldInputInstance = buildTypeGuard(zFloatFieldInputInstance);
-export const isFloatFieldInputTemplate = buildTypeGuard(zFloatFieldInputTemplate);
+export const isFloatFieldInputInstance = buildInstanceTypeGuard(zFloatFieldInputInstance);
+export const isFloatFieldInputTemplate = buildTemplateTypeGuard<FloatFieldInputTemplate>('FloatField', 'SINGLE');
 // #endregion
 
 // #region FloatField Collection
@@ -389,19 +419,20 @@ const zFloatFieldCollectionInputTemplate = zFieldInputTemplateBase
     },
     { message: 'maxItems must be greater than or equal to minItems' }
   );
-
 const zFloatFieldCollectionOutputTemplate = zFieldOutputTemplateBase.extend({
   type: zFloatCollectionFieldType,
 });
 export type FloatFieldCollectionValue = z.infer<typeof zFloatFieldCollectionValue>;
 export type FloatFieldCollectionInputInstance = z.infer<typeof zFloatFieldCollectionInputInstance>;
 export type FloatFieldCollectionInputTemplate = z.infer<typeof zFloatFieldCollectionInputTemplate>;
-export const isFloatFieldCollectionInputInstance = buildTypeGuard(zFloatFieldCollectionInputInstance);
-export const isFloatFieldCollectionInputTemplate = buildTypeGuard(zFloatFieldCollectionInputTemplate);
+export const isFloatFieldCollectionInputInstance = buildInstanceTypeGuard(zFloatFieldCollectionInputInstance);
+export const isFloatFieldCollectionInputTemplate = buildTemplateTypeGuard<FloatFieldCollectionInputTemplate>(
+  'FloatField',
+  'COLLECTION'
+);
 // #endregion
 
 // #region StringField
-
 export const zStringFieldValue = z.string();
 const zStringFieldInputInstance = zFieldInputInstanceBase.extend({
   value: zStringFieldValue,
@@ -426,6 +457,12 @@ const zStringFieldInputTemplate = zFieldInputTemplateBase
 const zStringFieldOutputTemplate = zFieldOutputTemplateBase.extend({
   type: zStringFieldType,
 });
+export type StringFieldValue = z.infer<typeof zStringFieldValue>;
+export type StringFieldInputInstance = z.infer<typeof zStringFieldInputInstance>;
+export type StringFieldInputTemplate = z.infer<typeof zStringFieldInputTemplate>;
+export const isStringFieldInputInstance = buildInstanceTypeGuard(zStringFieldInputInstance);
+export const isStringFieldInputTemplate = buildTemplateTypeGuard<StringFieldInputTemplate>('StringField', 'SINGLE');
+// #endregion
 
 // #region StringField Collection
 export const zStringFieldCollectionValue = z.array(zStringFieldValue).optional();
@@ -467,19 +504,14 @@ const zStringFieldCollectionOutputTemplate = zFieldOutputTemplateBase.extend({
 export type StringFieldCollectionValue = z.infer<typeof zStringFieldCollectionValue>;
 export type StringFieldCollectionInputInstance = z.infer<typeof zStringFieldCollectionInputInstance>;
 export type StringFieldCollectionInputTemplate = z.infer<typeof zStringFieldCollectionInputTemplate>;
-export const isStringFieldCollectionInputInstance = buildTypeGuard(zStringFieldCollectionInputInstance);
-export const isStringFieldCollectionInputTemplate = buildTypeGuard(zStringFieldCollectionInputTemplate);
-// #endregion
-
-export type StringFieldValue = z.infer<typeof zStringFieldValue>;
-export type StringFieldInputInstance = z.infer<typeof zStringFieldInputInstance>;
-export type StringFieldInputTemplate = z.infer<typeof zStringFieldInputTemplate>;
-export const isStringFieldInputInstance = buildTypeGuard(zStringFieldInputInstance);
-export const isStringFieldInputTemplate = buildTypeGuard(zStringFieldInputTemplate);
+export const isStringFieldCollectionInputInstance = buildInstanceTypeGuard(zStringFieldCollectionInputInstance);
+export const isStringFieldCollectionInputTemplate = buildTemplateTypeGuard<StringFieldCollectionInputTemplate>(
+  'StringField',
+  'COLLECTION'
+);
 // #endregion
 
 // #region BooleanField
-
 export const zBooleanFieldValue = z.boolean();
 const zBooleanFieldInputInstance = zFieldInputInstanceBase.extend({
   value: zBooleanFieldValue,
@@ -495,12 +527,11 @@ const zBooleanFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type BooleanFieldValue = z.infer<typeof zBooleanFieldValue>;
 export type BooleanFieldInputInstance = z.infer<typeof zBooleanFieldInputInstance>;
 export type BooleanFieldInputTemplate = z.infer<typeof zBooleanFieldInputTemplate>;
-export const isBooleanFieldInputInstance = buildTypeGuard(zBooleanFieldInputInstance);
-export const isBooleanFieldInputTemplate = buildTypeGuard(zBooleanFieldInputTemplate);
+export const isBooleanFieldInputInstance = buildInstanceTypeGuard(zBooleanFieldInputInstance);
+export const isBooleanFieldInputTemplate = buildTemplateTypeGuard<BooleanFieldInputTemplate>('BooleanField');
 // #endregion
 
 // #region EnumField
-
 export const zEnumFieldValue = z.string();
 const zEnumFieldInputInstance = zFieldInputInstanceBase.extend({
   value: zEnumFieldValue,
@@ -518,8 +549,8 @@ const zEnumFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type EnumFieldValue = z.infer<typeof zEnumFieldValue>;
 export type EnumFieldInputInstance = z.infer<typeof zEnumFieldInputInstance>;
 export type EnumFieldInputTemplate = z.infer<typeof zEnumFieldInputTemplate>;
-export const isEnumFieldInputInstance = buildTypeGuard(zEnumFieldInputInstance);
-export const isEnumFieldInputTemplate = buildTypeGuard(zEnumFieldInputTemplate);
+export const isEnumFieldInputInstance = buildInstanceTypeGuard(zEnumFieldInputInstance);
+export const isEnumFieldInputTemplate = buildTemplateTypeGuard<EnumFieldInputTemplate>('EnumField');
 // #endregion
 
 // #region ImageField
@@ -538,8 +569,8 @@ const zImageFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type ImageFieldValue = z.infer<typeof zImageFieldValue>;
 export type ImageFieldInputInstance = z.infer<typeof zImageFieldInputInstance>;
 export type ImageFieldInputTemplate = z.infer<typeof zImageFieldInputTemplate>;
-export const isImageFieldInputInstance = buildTypeGuard(zImageFieldInputInstance);
-export const isImageFieldInputTemplate = buildTypeGuard(zImageFieldInputTemplate);
+export const isImageFieldInputInstance = buildInstanceTypeGuard(zImageFieldInputInstance);
+export const isImageFieldInputTemplate = buildTemplateTypeGuard<ImageFieldInputTemplate>('ImageField', 'SINGLE');
 // #endregion
 
 // #region ImageField Collection
@@ -571,12 +602,14 @@ const zImageFieldCollectionOutputTemplate = zFieldOutputTemplateBase.extend({
 export type ImageFieldCollectionValue = z.infer<typeof zImageFieldCollectionValue>;
 export type ImageFieldCollectionInputInstance = z.infer<typeof zImageFieldCollectionInputInstance>;
 export type ImageFieldCollectionInputTemplate = z.infer<typeof zImageFieldCollectionInputTemplate>;
-export const isImageFieldCollectionInputInstance = buildTypeGuard(zImageFieldCollectionInputInstance);
-export const isImageFieldCollectionInputTemplate = buildTypeGuard(zImageFieldCollectionInputTemplate);
+export const isImageFieldCollectionInputInstance = buildInstanceTypeGuard(zImageFieldCollectionInputInstance);
+export const isImageFieldCollectionInputTemplate = buildTemplateTypeGuard<ImageFieldCollectionInputTemplate>(
+  'ImageField',
+  'COLLECTION'
+);
 // #endregion
 
 // #region BoardField
-
 export const zBoardFieldValue = zBoardField.optional();
 const zBoardFieldInputInstance = zFieldInputInstanceBase.extend({
   value: zBoardFieldValue,
@@ -592,12 +625,11 @@ const zBoardFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type BoardFieldValue = z.infer<typeof zBoardFieldValue>;
 export type BoardFieldInputInstance = z.infer<typeof zBoardFieldInputInstance>;
 export type BoardFieldInputTemplate = z.infer<typeof zBoardFieldInputTemplate>;
-export const isBoardFieldInputInstance = buildTypeGuard(zBoardFieldInputInstance);
-export const isBoardFieldInputTemplate = buildTypeGuard(zBoardFieldInputTemplate);
+export const isBoardFieldInputInstance = buildInstanceTypeGuard(zBoardFieldInputInstance);
+export const isBoardFieldInputTemplate = buildTemplateTypeGuard<BoardFieldInputTemplate>('BoardField');
 // #endregion
 
 // #region ColorField
-
 export const zColorFieldValue = zColorField.optional();
 const zColorFieldInputInstance = zFieldInputInstanceBase.extend({
   value: zColorFieldValue,
@@ -613,12 +645,11 @@ const zColorFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type ColorFieldValue = z.infer<typeof zColorFieldValue>;
 export type ColorFieldInputInstance = z.infer<typeof zColorFieldInputInstance>;
 export type ColorFieldInputTemplate = z.infer<typeof zColorFieldInputTemplate>;
-export const isColorFieldInputInstance = buildTypeGuard(zColorFieldInputInstance);
-export const isColorFieldInputTemplate = buildTypeGuard(zColorFieldInputTemplate);
+export const isColorFieldInputInstance = buildInstanceTypeGuard(zColorFieldInputInstance);
+export const isColorFieldInputTemplate = buildTemplateTypeGuard<ColorFieldInputTemplate>('ColorField');
 // #endregion
 
 // #region MainModelField
-
 export const zMainModelFieldValue = zModelIdentifierField.optional();
 const zMainModelFieldInputInstance = zFieldInputInstanceBase.extend({
   value: zMainModelFieldValue,
@@ -634,8 +665,8 @@ const zMainModelFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type MainModelFieldValue = z.infer<typeof zMainModelFieldValue>;
 export type MainModelFieldInputInstance = z.infer<typeof zMainModelFieldInputInstance>;
 export type MainModelFieldInputTemplate = z.infer<typeof zMainModelFieldInputTemplate>;
-export const isMainModelFieldInputInstance = buildTypeGuard(zMainModelFieldInputInstance);
-export const isMainModelFieldInputTemplate = buildTypeGuard(zMainModelFieldInputTemplate);
+export const isMainModelFieldInputInstance = buildInstanceTypeGuard(zMainModelFieldInputInstance);
+export const isMainModelFieldInputTemplate = buildTemplateTypeGuard<MainModelFieldInputTemplate>('MainModelField');
 // #endregion
 
 // #region ModelIdentifierField
@@ -654,12 +685,12 @@ const zModelIdentifierFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type ModelIdentifierFieldValue = z.infer<typeof zModelIdentifierFieldValue>;
 export type ModelIdentifierFieldInputInstance = z.infer<typeof zModelIdentifierFieldInputInstance>;
 export type ModelIdentifierFieldInputTemplate = z.infer<typeof zModelIdentifierFieldInputTemplate>;
-export const isModelIdentifierFieldInputInstance = buildTypeGuard(zModelIdentifierFieldInputInstance);
-export const isModelIdentifierFieldInputTemplate = buildTypeGuard(zModelIdentifierFieldInputTemplate);
+export const isModelIdentifierFieldInputInstance = buildInstanceTypeGuard(zModelIdentifierFieldInputInstance);
+export const isModelIdentifierFieldInputTemplate =
+  buildTemplateTypeGuard<ModelIdentifierFieldInputTemplate>('ModelIdentifierField');
 // #endregion
 
 // #region SDXLMainModelField
-
 const zSDXLMainModelFieldValue = zMainModelFieldValue; // TODO: Narrow to SDXL models only.
 const zSDXLMainModelFieldInputInstance = zFieldInputInstanceBase.extend({
   value: zSDXLMainModelFieldValue,
@@ -674,12 +705,12 @@ const zSDXLMainModelFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 });
 export type SDXLMainModelFieldInputInstance = z.infer<typeof zSDXLMainModelFieldInputInstance>;
 export type SDXLMainModelFieldInputTemplate = z.infer<typeof zSDXLMainModelFieldInputTemplate>;
-export const isSDXLMainModelFieldInputInstance = buildTypeGuard(zSDXLMainModelFieldInputInstance);
-export const isSDXLMainModelFieldInputTemplate = buildTypeGuard(zSDXLMainModelFieldInputTemplate);
+export const isSDXLMainModelFieldInputInstance = buildInstanceTypeGuard(zSDXLMainModelFieldInputInstance);
+export const isSDXLMainModelFieldInputTemplate =
+  buildTemplateTypeGuard<SDXLMainModelFieldInputTemplate>('SDXLMainModelField');
 // #endregion
 
 // #region SD3MainModelField
-
 const zSD3MainModelFieldValue = zMainModelFieldValue; // TODO: Narrow to SDXL models only.
 const zSD3MainModelFieldInputInstance = zFieldInputInstanceBase.extend({
   value: zSD3MainModelFieldValue,
@@ -694,13 +725,12 @@ const zSD3MainModelFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 });
 export type SD3MainModelFieldInputInstance = z.infer<typeof zSD3MainModelFieldInputInstance>;
 export type SD3MainModelFieldInputTemplate = z.infer<typeof zSD3MainModelFieldInputTemplate>;
-export const isSD3MainModelFieldInputInstance = buildTypeGuard(zSD3MainModelFieldInputInstance);
-export const isSD3MainModelFieldInputTemplate = buildTypeGuard(zSD3MainModelFieldInputTemplate);
-
+export const isSD3MainModelFieldInputInstance = buildInstanceTypeGuard(zSD3MainModelFieldInputInstance);
+export const isSD3MainModelFieldInputTemplate =
+  buildTemplateTypeGuard<SD3MainModelFieldInputTemplate>('SD3MainModelField');
 // #endregion
 
 // #region FluxMainModelField
-
 const zFluxMainModelFieldValue = zMainModelFieldValue; // TODO: Narrow to SDXL models only.
 const zFluxMainModelFieldInputInstance = zFieldInputInstanceBase.extend({
   value: zFluxMainModelFieldValue,
@@ -715,13 +745,12 @@ const zFluxMainModelFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 });
 export type FluxMainModelFieldInputInstance = z.infer<typeof zFluxMainModelFieldInputInstance>;
 export type FluxMainModelFieldInputTemplate = z.infer<typeof zFluxMainModelFieldInputTemplate>;
-export const isFluxMainModelFieldInputInstance = buildTypeGuard(zFluxMainModelFieldInputInstance);
-export const isFluxMainModelFieldInputTemplate = buildTypeGuard(zFluxMainModelFieldInputTemplate);
-
+export const isFluxMainModelFieldInputInstance = buildInstanceTypeGuard(zFluxMainModelFieldInputInstance);
+export const isFluxMainModelFieldInputTemplate =
+  buildTemplateTypeGuard<FluxMainModelFieldInputTemplate>('FluxMainModelField');
 // #endregion
 
 // #region SDXLRefinerModelField
-
 /** @alias */ // tells knip to ignore this duplicate export
 export const zSDXLRefinerModelFieldValue = zMainModelFieldValue; // TODO: Narrow to SDXL Refiner models only.
 const zSDXLRefinerModelFieldInputInstance = zFieldInputInstanceBase.extend({
@@ -738,8 +767,9 @@ const zSDXLRefinerModelFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type SDXLRefinerModelFieldValue = z.infer<typeof zSDXLRefinerModelFieldValue>;
 export type SDXLRefinerModelFieldInputInstance = z.infer<typeof zSDXLRefinerModelFieldInputInstance>;
 export type SDXLRefinerModelFieldInputTemplate = z.infer<typeof zSDXLRefinerModelFieldInputTemplate>;
-export const isSDXLRefinerModelFieldInputInstance = buildTypeGuard(zSDXLRefinerModelFieldInputInstance);
-export const isSDXLRefinerModelFieldInputTemplate = buildTypeGuard(zSDXLRefinerModelFieldInputTemplate);
+export const isSDXLRefinerModelFieldInputInstance = buildInstanceTypeGuard(zSDXLRefinerModelFieldInputInstance);
+export const isSDXLRefinerModelFieldInputTemplate =
+  buildTemplateTypeGuard<SDXLRefinerModelFieldInputTemplate>('SDXLRefinerModelField');
 // #endregion
 
 // #region VAEModelField
@@ -759,12 +789,11 @@ const zVAEModelFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type VAEModelFieldValue = z.infer<typeof zVAEModelFieldValue>;
 export type VAEModelFieldInputInstance = z.infer<typeof zVAEModelFieldInputInstance>;
 export type VAEModelFieldInputTemplate = z.infer<typeof zVAEModelFieldInputTemplate>;
-export const isVAEModelFieldInputInstance = buildTypeGuard(zVAEModelFieldInputInstance);
-export const isVAEModelFieldInputTemplate = buildTypeGuard(zVAEModelFieldInputTemplate);
+export const isVAEModelFieldInputInstance = buildInstanceTypeGuard(zVAEModelFieldInputInstance);
+export const isVAEModelFieldInputTemplate = buildTemplateTypeGuard<VAEModelFieldInputTemplate>('VAEModelField');
 // #endregion
 
 // #region LoRAModelField
-
 export const zLoRAModelFieldValue = zModelIdentifierField.optional();
 const zLoRAModelFieldInputInstance = zFieldInputInstanceBase.extend({
   value: zLoRAModelFieldValue,
@@ -780,12 +809,11 @@ const zLoRAModelFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type LoRAModelFieldValue = z.infer<typeof zLoRAModelFieldValue>;
 export type LoRAModelFieldInputInstance = z.infer<typeof zLoRAModelFieldInputInstance>;
 export type LoRAModelFieldInputTemplate = z.infer<typeof zLoRAModelFieldInputTemplate>;
-export const isLoRAModelFieldInputInstance = buildTypeGuard(zLoRAModelFieldInputInstance);
-export const isLoRAModelFieldInputTemplate = buildTypeGuard(zLoRAModelFieldInputTemplate);
+export const isLoRAModelFieldInputInstance = buildInstanceTypeGuard(zLoRAModelFieldInputInstance);
+export const isLoRAModelFieldInputTemplate = buildTemplateTypeGuard<LoRAModelFieldInputTemplate>('LoRAModelField');
 // #endregion
 
 // #region ControlNetModelField
-
 export const zControlNetModelFieldValue = zModelIdentifierField.optional();
 const zControlNetModelFieldInputInstance = zFieldInputInstanceBase.extend({
   value: zControlNetModelFieldValue,
@@ -801,12 +829,12 @@ const zControlNetModelFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type ControlNetModelFieldValue = z.infer<typeof zControlNetModelFieldValue>;
 export type ControlNetModelFieldInputInstance = z.infer<typeof zControlNetModelFieldInputInstance>;
 export type ControlNetModelFieldInputTemplate = z.infer<typeof zControlNetModelFieldInputTemplate>;
-export const isControlNetModelFieldInputInstance = buildTypeGuard(zControlNetModelFieldInputInstance);
-export const isControlNetModelFieldInputTemplate = buildTypeGuard(zControlNetModelFieldInputTemplate);
+export const isControlNetModelFieldInputInstance = buildInstanceTypeGuard(zControlNetModelFieldInputInstance);
+export const isControlNetModelFieldInputTemplate =
+  buildTemplateTypeGuard<ControlNetModelFieldInputTemplate>('ControlNetModelField');
 // #endregion
 
 // #region IPAdapterModelField
-
 export const zIPAdapterModelFieldValue = zModelIdentifierField.optional();
 const zIPAdapterModelFieldInputInstance = zFieldInputInstanceBase.extend({
   value: zIPAdapterModelFieldValue,
@@ -822,12 +850,12 @@ const zIPAdapterModelFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type IPAdapterModelFieldValue = z.infer<typeof zIPAdapterModelFieldValue>;
 export type IPAdapterModelFieldInputInstance = z.infer<typeof zIPAdapterModelFieldInputInstance>;
 export type IPAdapterModelFieldInputTemplate = z.infer<typeof zIPAdapterModelFieldInputTemplate>;
-export const isIPAdapterModelFieldInputInstance = buildTypeGuard(zIPAdapterModelFieldInputInstance);
-export const isIPAdapterModelFieldInputTemplate = buildTypeGuard(zIPAdapterModelFieldInputTemplate);
+export const isIPAdapterModelFieldInputInstance = buildInstanceTypeGuard(zIPAdapterModelFieldInputInstance);
+export const isIPAdapterModelFieldInputTemplate =
+  buildTemplateTypeGuard<IPAdapterModelFieldInputTemplate>('IPAdapterModelField');
 // #endregion
 
 // #region T2IAdapterField
-
 export const zT2IAdapterModelFieldValue = zModelIdentifierField.optional();
 const zT2IAdapterModelFieldInputInstance = zFieldInputInstanceBase.extend({
   value: zT2IAdapterModelFieldValue,
@@ -843,12 +871,12 @@ const zT2IAdapterModelFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type T2IAdapterModelFieldValue = z.infer<typeof zT2IAdapterModelFieldValue>;
 export type T2IAdapterModelFieldInputInstance = z.infer<typeof zT2IAdapterModelFieldInputInstance>;
 export type T2IAdapterModelFieldInputTemplate = z.infer<typeof zT2IAdapterModelFieldInputTemplate>;
-export const isT2IAdapterModelFieldInputInstance = buildTypeGuard(zT2IAdapterModelFieldInputInstance);
-export const isT2IAdapterModelFieldInputTemplate = buildTypeGuard(zT2IAdapterModelFieldInputTemplate);
+export const isT2IAdapterModelFieldInputInstance = buildInstanceTypeGuard(zT2IAdapterModelFieldInputInstance);
+export const isT2IAdapterModelFieldInputTemplate =
+  buildTemplateTypeGuard<T2IAdapterModelFieldInputTemplate>('T2IAdapterModelField');
 // #endregion
 
 // #region SpandrelModelToModelField
-
 export const zSpandrelImageToImageModelFieldValue = zModelIdentifierField.optional();
 const zSpandrelImageToImageModelFieldInputInstance = zFieldInputInstanceBase.extend({
   value: zSpandrelImageToImageModelFieldValue,
@@ -864,12 +892,11 @@ const zSpandrelImageToImageModelFieldOutputTemplate = zFieldOutputTemplateBase.e
 export type SpandrelImageToImageModelFieldValue = z.infer<typeof zSpandrelImageToImageModelFieldValue>;
 export type SpandrelImageToImageModelFieldInputInstance = z.infer<typeof zSpandrelImageToImageModelFieldInputInstance>;
 export type SpandrelImageToImageModelFieldInputTemplate = z.infer<typeof zSpandrelImageToImageModelFieldInputTemplate>;
-export const isSpandrelImageToImageModelFieldInputInstance = buildTypeGuard(
+export const isSpandrelImageToImageModelFieldInputInstance = buildInstanceTypeGuard(
   zSpandrelImageToImageModelFieldInputInstance
 );
-export const isSpandrelImageToImageModelFieldInputTemplate = buildTypeGuard(
-  zSpandrelImageToImageModelFieldInputTemplate
-);
+export const isSpandrelImageToImageModelFieldInputTemplate =
+  buildTemplateTypeGuard<SpandrelImageToImageModelFieldInputTemplate>('SpandrelImageToImageModelField');
 // #endregion
 
 // #region T5EncoderModelField
@@ -883,18 +910,15 @@ const zT5EncoderModelFieldInputTemplate = zFieldInputTemplateBase.extend({
   originalType: zFieldType.optional(),
   default: zT5EncoderModelFieldValue,
 });
-
 export type T5EncoderModelFieldValue = z.infer<typeof zT5EncoderModelFieldValue>;
-
 export type T5EncoderModelFieldInputInstance = z.infer<typeof zT5EncoderModelFieldInputInstance>;
 export type T5EncoderModelFieldInputTemplate = z.infer<typeof zT5EncoderModelFieldInputTemplate>;
-export const isT5EncoderModelFieldInputInstance = buildTypeGuard(zT5EncoderModelFieldInputInstance);
-export const isT5EncoderModelFieldInputTemplate = buildTypeGuard(zT5EncoderModelFieldInputTemplate);
-
+export const isT5EncoderModelFieldInputInstance = buildInstanceTypeGuard(zT5EncoderModelFieldInputInstance);
+export const isT5EncoderModelFieldInputTemplate =
+  buildTemplateTypeGuard<T5EncoderModelFieldInputTemplate>('T5EncoderModelField');
 // #endregion
 
 // #region FluxVAEModelField
-
 export const zFluxVAEModelFieldValue = zModelIdentifierField.optional();
 const zFluxVAEModelFieldInputInstance = zFieldInputInstanceBase.extend({
   value: zFluxVAEModelFieldValue,
@@ -904,18 +928,15 @@ const zFluxVAEModelFieldInputTemplate = zFieldInputTemplateBase.extend({
   originalType: zFieldType.optional(),
   default: zFluxVAEModelFieldValue,
 });
-
 export type FluxVAEModelFieldValue = z.infer<typeof zFluxVAEModelFieldValue>;
-
 export type FluxVAEModelFieldInputInstance = z.infer<typeof zFluxVAEModelFieldInputInstance>;
 export type FluxVAEModelFieldInputTemplate = z.infer<typeof zFluxVAEModelFieldInputTemplate>;
-export const isFluxVAEModelFieldInputInstance = buildTypeGuard(zFluxVAEModelFieldInputInstance);
-export const isFluxVAEModelFieldInputTemplate = buildTypeGuard(zFluxVAEModelFieldInputTemplate);
-
+export const isFluxVAEModelFieldInputInstance = buildInstanceTypeGuard(zFluxVAEModelFieldInputInstance);
+export const isFluxVAEModelFieldInputTemplate =
+  buildTemplateTypeGuard<FluxVAEModelFieldInputTemplate>('FluxVAEModelField');
 // #endregion
 
 // #region CLIPEmbedModelField
-
 export const zCLIPEmbedModelFieldValue = zModelIdentifierField.optional();
 const zCLIPEmbedModelFieldInputInstance = zFieldInputInstanceBase.extend({
   value: zCLIPEmbedModelFieldValue,
@@ -925,18 +946,15 @@ const zCLIPEmbedModelFieldInputTemplate = zFieldInputTemplateBase.extend({
   originalType: zFieldType.optional(),
   default: zCLIPEmbedModelFieldValue,
 });
-
 export type CLIPEmbedModelFieldValue = z.infer<typeof zCLIPEmbedModelFieldValue>;
-
 export type CLIPEmbedModelFieldInputInstance = z.infer<typeof zCLIPEmbedModelFieldInputInstance>;
 export type CLIPEmbedModelFieldInputTemplate = z.infer<typeof zCLIPEmbedModelFieldInputTemplate>;
-export const isCLIPEmbedModelFieldInputInstance = buildTypeGuard(zCLIPEmbedModelFieldInputInstance);
-export const isCLIPEmbedModelFieldInputTemplate = buildTypeGuard(zCLIPEmbedModelFieldInputTemplate);
-
+export const isCLIPEmbedModelFieldInputInstance = buildInstanceTypeGuard(zCLIPEmbedModelFieldInputInstance);
+export const isCLIPEmbedModelFieldInputTemplate =
+  buildTemplateTypeGuard<CLIPEmbedModelFieldInputTemplate>('CLIPEmbedModelField');
 // #endregion
 
 // #region CLIPLEmbedModelField
-
 export const zCLIPLEmbedModelFieldValue = zModelIdentifierField.optional();
 const zCLIPLEmbedModelFieldInputInstance = zFieldInputInstanceBase.extend({
   value: zCLIPLEmbedModelFieldValue,
@@ -946,18 +964,15 @@ const zCLIPLEmbedModelFieldInputTemplate = zFieldInputTemplateBase.extend({
   originalType: zFieldType.optional(),
   default: zCLIPLEmbedModelFieldValue,
 });
-
 export type CLIPLEmbedModelFieldValue = z.infer<typeof zCLIPLEmbedModelFieldValue>;
-
 export type CLIPLEmbedModelFieldInputInstance = z.infer<typeof zCLIPLEmbedModelFieldInputInstance>;
 export type CLIPLEmbedModelFieldInputTemplate = z.infer<typeof zCLIPLEmbedModelFieldInputTemplate>;
-export const isCLIPLEmbedModelFieldInputInstance = buildTypeGuard(zCLIPLEmbedModelFieldInputInstance);
-export const isCLIPLEmbedModelFieldInputTemplate = buildTypeGuard(zCLIPLEmbedModelFieldInputTemplate);
-
+export const isCLIPLEmbedModelFieldInputInstance = buildInstanceTypeGuard(zCLIPLEmbedModelFieldInputInstance);
+export const isCLIPLEmbedModelFieldInputTemplate =
+  buildTemplateTypeGuard<CLIPLEmbedModelFieldInputTemplate>('CLIPLEmbedModelField');
 // #endregion
 
 // #region CLIPGEmbedModelField
-
 export const zCLIPGEmbedModelFieldValue = zModelIdentifierField.optional();
 const zCLIPGEmbedModelFieldInputInstance = zFieldInputInstanceBase.extend({
   value: zCLIPGEmbedModelFieldValue,
@@ -967,18 +982,15 @@ const zCLIPGEmbedModelFieldInputTemplate = zFieldInputTemplateBase.extend({
   originalType: zFieldType.optional(),
   default: zCLIPGEmbedModelFieldValue,
 });
-
 export type CLIPGEmbedModelFieldValue = z.infer<typeof zCLIPLEmbedModelFieldValue>;
-
 export type CLIPGEmbedModelFieldInputInstance = z.infer<typeof zCLIPGEmbedModelFieldInputInstance>;
 export type CLIPGEmbedModelFieldInputTemplate = z.infer<typeof zCLIPGEmbedModelFieldInputTemplate>;
-export const isCLIPGEmbedModelFieldInputInstance = buildTypeGuard(zCLIPGEmbedModelFieldInputInstance);
-export const isCLIPGEmbedModelFieldInputTemplate = buildTypeGuard(zCLIPGEmbedModelFieldInputTemplate);
-
+export const isCLIPGEmbedModelFieldInputInstance = buildInstanceTypeGuard(zCLIPGEmbedModelFieldInputInstance);
+export const isCLIPGEmbedModelFieldInputTemplate =
+  buildTemplateTypeGuard<CLIPGEmbedModelFieldInputTemplate>('CLIPGEmbedModelField');
 // #endregion
 
 // #region ControlLoRAModelField
-
 export const zControlLoRAModelFieldValue = zModelIdentifierField.optional();
 const zControlLoRAModelFieldInputInstance = zFieldInputInstanceBase.extend({
   value: zControlLoRAModelFieldValue,
@@ -988,18 +1000,15 @@ const zControlLoRAModelFieldInputTemplate = zFieldInputTemplateBase.extend({
   originalType: zFieldType.optional(),
   default: zControlLoRAModelFieldValue,
 });
-
 export type ControlLoRAModelFieldValue = z.infer<typeof zCLIPLEmbedModelFieldValue>;
-
 export type ControlLoRAModelFieldInputInstance = z.infer<typeof zControlLoRAModelFieldInputInstance>;
 export type ControlLoRAModelFieldInputTemplate = z.infer<typeof zControlLoRAModelFieldInputTemplate>;
-export const isControlLoRAModelFieldInputInstance = buildTypeGuard(zControlLoRAModelFieldInputInstance);
-export const isControlLoRAModelFieldInputTemplate = buildTypeGuard(zControlLoRAModelFieldInputTemplate);
-
+export const isControlLoRAModelFieldInputInstance = buildInstanceTypeGuard(zControlLoRAModelFieldInputInstance);
+export const isControlLoRAModelFieldInputTemplate =
+  buildTemplateTypeGuard<ControlLoRAModelFieldInputTemplate>('ControlLoRAModelField');
 // #endregion
 
 // #region SchedulerField
-
 export const zSchedulerFieldValue = zSchedulerField.optional();
 const zSchedulerFieldInputInstance = zFieldInputInstanceBase.extend({
   value: zSchedulerFieldValue,
@@ -1015,8 +1024,8 @@ const zSchedulerFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type SchedulerFieldValue = z.infer<typeof zSchedulerFieldValue>;
 export type SchedulerFieldInputInstance = z.infer<typeof zSchedulerFieldInputInstance>;
 export type SchedulerFieldInputTemplate = z.infer<typeof zSchedulerFieldInputTemplate>;
-export const isSchedulerFieldInputInstance = buildTypeGuard(zSchedulerFieldInputInstance);
-export const isSchedulerFieldInputTemplate = buildTypeGuard(zSchedulerFieldInputTemplate);
+export const isSchedulerFieldInputInstance = buildInstanceTypeGuard(zSchedulerFieldInputInstance);
+export const isSchedulerFieldInputTemplate = buildTemplateTypeGuard<SchedulerFieldInputTemplate>('SchedulerField');
 // #endregion
 
 // #region FloatGeneratorField
@@ -1137,8 +1146,9 @@ const zFloatGeneratorFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type FloatGeneratorFieldValue = z.infer<typeof zFloatGeneratorFieldValue>;
 export type FloatGeneratorFieldInputInstance = z.infer<typeof zFloatGeneratorFieldInputInstance>;
 export type FloatGeneratorFieldInputTemplate = z.infer<typeof zFloatGeneratorFieldInputTemplate>;
-export const isFloatGeneratorFieldInputInstance = buildTypeGuard(zFloatGeneratorFieldInputInstance);
-export const isFloatGeneratorFieldInputTemplate = buildTypeGuard(zFloatGeneratorFieldInputTemplate);
+export const isFloatGeneratorFieldInputInstance = buildInstanceTypeGuard(zFloatGeneratorFieldInputInstance);
+export const isFloatGeneratorFieldInputTemplate =
+  buildTemplateTypeGuard<FloatGeneratorFieldInputTemplate>('FloatGeneratorField');
 export const resolveFloatGeneratorField = ({ value }: FloatGeneratorFieldInputInstance) => {
   if (value.values) {
     return value.values;
@@ -1288,8 +1298,9 @@ const zIntegerGeneratorFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type IntegerGeneratorFieldValue = z.infer<typeof zIntegerGeneratorFieldValue>;
 export type IntegerGeneratorFieldInputInstance = z.infer<typeof zIntegerGeneratorFieldInputInstance>;
 export type IntegerGeneratorFieldInputTemplate = z.infer<typeof zIntegerGeneratorFieldInputTemplate>;
-export const isIntegerGeneratorFieldInputInstance = buildTypeGuard(zIntegerGeneratorFieldInputInstance);
-export const isIntegerGeneratorFieldInputTemplate = buildTypeGuard(zIntegerGeneratorFieldInputTemplate);
+export const isIntegerGeneratorFieldInputInstance = buildInstanceTypeGuard(zIntegerGeneratorFieldInputInstance);
+export const isIntegerGeneratorFieldInputTemplate =
+  buildTemplateTypeGuard<IntegerGeneratorFieldInputTemplate>('IntegerGeneratorField');
 export const resolveIntegerGeneratorField = ({ value }: IntegerGeneratorFieldInputInstance) => {
   if (value.values) {
     return value.values;
@@ -1405,8 +1416,11 @@ const zStringGeneratorFieldOutputTemplate = zFieldOutputTemplateBase.extend({
 export type StringGeneratorFieldValue = z.infer<typeof zStringGeneratorFieldValue>;
 export type StringGeneratorFieldInputInstance = z.infer<typeof zStringGeneratorFieldInputInstance>;
 export type StringGeneratorFieldInputTemplate = z.infer<typeof zStringGeneratorFieldInputTemplate>;
-export const isStringGeneratorFieldInputInstance = buildTypeGuard(zStringGeneratorFieldInputInstance);
-export const isStringGeneratorFieldInputTemplate = buildTypeGuard(zStringGeneratorFieldInputTemplate);
+export const isStringGeneratorFieldInputInstance = buildInstanceTypeGuard(zStringGeneratorFieldInputInstance);
+export const isStringGeneratorFieldInputTemplate = buildTemplateTypeGuard<StringGeneratorFieldInputTemplate>(
+  zStringGeneratorFieldType.shape.name.value
+);
+
 export const resolveStringGeneratorField = ({ value }: StringGeneratorFieldInputInstance) => {
   if (value.values) {
     return value.values;
@@ -1561,7 +1575,6 @@ const zStatefulFieldInputInstance = z.union([
 
 export const zFieldInputInstance = z.union([zStatefulFieldInputInstance, zStatelessFieldInputInstance]);
 export type FieldInputInstance = z.infer<typeof zFieldInputInstance>;
-export const isFieldInputInstance = buildTypeGuard(zFieldInputInstance);
 // #endregion
 
 // #region StatefulFieldInputTemplate & FieldInputTemplate
@@ -1605,7 +1618,6 @@ const zStatefulFieldInputTemplate = z.union([
 
 export const zFieldInputTemplate = z.union([zStatefulFieldInputTemplate, zStatelessFieldInputTemplate]);
 export type FieldInputTemplate = z.infer<typeof zFieldInputTemplate>;
-export const isFieldInputTemplate = buildTypeGuard(zFieldInputTemplate);
 // #endregion
 
 // #region StatefulFieldOutputTemplate & FieldOutputTemplate
@@ -1643,3 +1655,7 @@ const zStatefulFieldOutputTemplate = z.union([
 export const zFieldOutputTemplate = z.union([zStatefulFieldOutputTemplate, zStatelessFieldOutputTemplate]);
 export type FieldOutputTemplate = z.infer<typeof zFieldOutputTemplate>;
 // #endregion
+
+// #region FieldInputTemplate Type Guards
+
+// #endregion

From d49ad17257dfa8209c00d86c26b768a9bce4dfa1 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 26 Jan 2025 11:25:32 +1100
Subject: [PATCH 54/58] fix(ui): circular dep

---
 .../sidePanel/builder/FormElementEditModeWrapper.tsx        | 6 +-----
 .../features/nodes/components/sidePanel/builder/shared.ts   | 5 +++++
 .../nodes/components/sidePanel/builder/use-builder-dnd.ts   | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/shared.ts

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
index 9a433e05fa9..29553241cc7 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
@@ -1,9 +1,9 @@
 import type { FlexProps, SystemStyleObject } from '@invoke-ai/ui-library';
 import { Flex, IconButton, Spacer, Text } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { getPrefixedId } from 'features/controlLayers/konva/util';
 import { useDepthContext } from 'features/nodes/components/sidePanel/builder/contexts';
 import { DndListDropIndicator } from 'features/nodes/components/sidePanel/builder/DndListDropIndicator';
+import { EDIT_MODE_WRAPPER_CLASS_NAME, getEditModeWrapperId } from 'features/nodes/components/sidePanel/builder/shared';
 import { useDraggableFormElement } from 'features/nodes/components/sidePanel/builder/use-builder-dnd';
 import { formElementRemoved } from 'features/nodes/store/workflowSlice';
 import { type FormElement, isContainerElement } from 'features/nodes/types/workflow';
@@ -11,10 +11,6 @@ import { startCase } from 'lodash-es';
 import { memo, useCallback, useRef } from 'react';
 import { PiXBold } from 'react-icons/pi';
 
-export const EDIT_MODE_WRAPPER_CLASS_NAME = getPrefixedId('edit-mode-wrapper', '-');
-
-export const getEditModeWrapperId = (id: string) => `${id}-edit-mode-wrapper`;
-
 const getHeaderLabel = (el: FormElement) => {
   if (isContainerElement(el)) {
     if (el.data.direction === 'column') {
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/shared.ts b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/shared.ts
new file mode 100644
index 00000000000..3f7af9c9623
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/shared.ts
@@ -0,0 +1,5 @@
+import { getPrefixedId } from 'features/controlLayers/konva/util';
+
+export const EDIT_MODE_WRAPPER_CLASS_NAME = getPrefixedId('edit-mode-wrapper', '-');
+
+export const getEditModeWrapperId = (id: string) => `${id}-edit-mode-wrapper`;
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts
index 8ce8f80364a..925761720e1 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-builder-dnd.ts
@@ -13,7 +13,7 @@ import {
   attachClosestCenterOrEdge,
   extractClosestCenterOrEdge,
 } from 'features/nodes/components/sidePanel/builder/center-or-closest-edge';
-import { getEditModeWrapperId } from 'features/nodes/components/sidePanel/builder/FormElementEditModeWrapper';
+import { getEditModeWrapperId } from 'features/nodes/components/sidePanel/builder/shared';
 import { formElementAdded, formElementMoved } from 'features/nodes/store/workflowSlice';
 import type { FieldIdentifier } from 'features/nodes/types/field';
 import type { ElementId, FormElement } from 'features/nodes/types/workflow';

From 6413753e9bfade8f82b5ac4d0f0c4e3218e4c27b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 26 Jan 2025 11:31:50 +1100
Subject: [PATCH 55/58] tidy(ui): import reactflow css in main theme provider

---
 .../frontend/web/src/app/components/ThemeLocaleProvider.tsx     | 1 +
 .../frontend/web/src/features/nodes/components/NodeEditor.tsx   | 2 --
 .../nodes/components/sidePanel/EditModeLeftPanelContent.tsx     | 2 --
 .../nodes/components/sidePanel/WorkflowsTabLeftPanel.tsx        | 2 --
 4 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
index 325db314d56..1cdddb76a57 100644
--- a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
+++ b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
@@ -1,5 +1,6 @@
 import '@fontsource-variable/inter';
 import 'overlayscrollbars/overlayscrollbars.css';
+import '@xyflow/react/dist/base.css';
 
 import { ChakraProvider, DarkMode, extendTheme, theme as _theme, TOAST_OPTIONS } from '@invoke-ai/ui-library';
 import type { ReactNode } from 'react';
diff --git a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
index 3c9a97dfc83..de0ab48d7c7 100644
--- a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
@@ -1,5 +1,3 @@
-import '@xyflow/react/dist/base.css';
-
 import { Flex } from '@invoke-ai/ui-library';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import { useFocusRegion } from 'common/hooks/focus';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/EditModeLeftPanelContent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/EditModeLeftPanelContent.tsx
index 3af64c05d63..3240629ec25 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/EditModeLeftPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/EditModeLeftPanelContent.tsx
@@ -1,5 +1,3 @@
-import '@xyflow/react/dist/base.css';
-
 import { Box } from '@invoke-ai/ui-library';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { ViewContextProvider } from 'features/nodes/contexts/ViewContext';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowsTabLeftPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowsTabLeftPanel.tsx
index 5508f38bcb6..04287d9b5f6 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowsTabLeftPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowsTabLeftPanel.tsx
@@ -1,5 +1,3 @@
-import '@xyflow/react/dist/base.css';
-
 import { Box, Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { EditModeLeftPanelContent } from 'features/nodes/components/sidePanel/EditModeLeftPanelContent';

From 468f1bff009489f417d4769ec3b11e869a831246 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 31 Jan 2025 10:18:57 +1100
Subject: [PATCH 56/58] feat(ui): plumbing for editable form elements

---
 .../src/features/nodes/store/workflowSlice.ts | 63 +++++++++++++------
 .../web/src/features/nodes/types/workflow.ts  |  1 +
 2 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
index 59c24e5e571..2a29c5df791 100644
--- a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
@@ -12,13 +12,21 @@ import type {
 } from 'features/nodes/store/types';
 import type { FieldIdentifier } from 'features/nodes/types/field';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import type {
+  ContainerElement,
+  FormElement,
+  HeadingElement,
+  NodeFieldElement,
+  TextElement,
+  WorkflowCategory,
+  WorkflowV3,
+} from 'features/nodes/types/workflow';
 import {
   buildContainer,
-  type ContainerElement,
-  type FormElement,
   isContainerElement,
-  type WorkflowCategory,
-  type WorkflowV3,
+  isHeadingElement,
+  isNodeFieldElement,
+  isTextElement,
 } from 'features/nodes/types/workflow';
 import { isEqual, omit, uniqBy } from 'lodash-es';
 import { useMemo } from 'react';
@@ -26,6 +34,24 @@ import type { SQLiteDirection, WorkflowRecordOrderBy } from 'services/api/types'
 
 import { selectNodesSlice } from './selectors';
 
+type FormElementDataChangedAction<T extends FormElement> = PayloadAction<{
+  id: string;
+  changes: Partial<T['data']>;
+}>;
+
+const formElementDataChangedReducer = <T extends FormElement>(
+  state: WorkflowState,
+  action: FormElementDataChangedAction<T>,
+  guard: (element: FormElement) => element is T
+) => {
+  const { id, changes } = action.payload;
+  const element = state.form?.elements[id];
+  if (!element || !guard(element)) {
+    return;
+  }
+  element.data = { ...element.data, ...changes } as T['data'];
+};
+
 const getBlankWorkflow = (): Omit<WorkflowV3, 'nodes' | 'edges'> => {
   const rootElement = buildContainer('column', []);
   return {
@@ -178,21 +204,17 @@ export const workflowSlice = createSlice({
       const { id, containerId, index } = action.payload;
       moveElement({ formState: state.form, id, containerId, index });
     },
-    formElementContainerDataChanged: (
-      state,
-      action: PayloadAction<{ id: string; changes: Partial<ContainerElement['data']> }>
-    ) => {
-      if (!state.form) {
-        // Cannot change a container if the form has not been created
-        return;
-      }
-      const { elements } = state.form;
-      const { id, changes } = action.payload;
-      const container = elements[id];
-      if (!container || !isContainerElement(container)) {
-        return;
-      }
-      container.data = { ...container.data, ...changes };
+    formElementHeadingDataChanged: (state, action: FormElementDataChangedAction<HeadingElement>) => {
+      formElementDataChangedReducer(state, action, isHeadingElement);
+    },
+    formElementTextDataChanged: (state, action: FormElementDataChangedAction<TextElement>) => {
+      formElementDataChangedReducer(state, action, isTextElement);
+    },
+    formElementNodeFieldDataChanged: (state, action: FormElementDataChangedAction<NodeFieldElement>) => {
+      formElementDataChangedReducer(state, action, isNodeFieldElement);
+    },
+    formElementContainerDataChanged: (state, action: FormElementDataChangedAction<ContainerElement>) => {
+      formElementDataChangedReducer(state, action, isContainerElement);
     },
     formReset: (state) => {
       state.form = undefined;
@@ -318,6 +340,9 @@ export const {
   formElementAdded,
   formElementRemoved,
   formElementMoved,
+  formElementHeadingDataChanged,
+  formElementTextDataChanged,
+  formElementNodeFieldDataChanged,
   formElementContainerDataChanged,
   formReset,
   formModeToggled,
diff --git a/invokeai/frontend/web/src/features/nodes/types/workflow.ts b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
index 4279366b29d..acd9f232f3d 100644
--- a/invokeai/frontend/web/src/features/nodes/types/workflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
@@ -90,6 +90,7 @@ export type ElementId = z.infer<typeof zElementId>;
 const zElementBase = z.object({
   id: zElementId,
   parentId: zElementId.optional(),
+  data: z.undefined(),
 });
 
 const NODE_FIELD_TYPE = 'node-field';

From 32327bed5eb72836c8372dfcbd15207e029528b4 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 31 Jan 2025 11:02:13 +1100
Subject: [PATCH 57/58] chore(ui): bump @invoke-ai/ui-library

---
 invokeai/frontend/web/package.json            |   3 +-
 invokeai/frontend/web/pnpm-lock.yaml          | 279 +++++++++++++++---
 .../common/components/IAIImageFallback.tsx    |   5 +-
 .../ImageFieldCollectionInputComponent.tsx    |   2 +-
 4 files changed, 242 insertions(+), 47 deletions(-)

diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json
index 8cc58ee14b1..6b1269100f0 100644
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@@ -58,7 +58,7 @@
     "@dagrejs/dagre": "^1.1.4",
     "@dagrejs/graphlib": "^2.2.4",
     "@fontsource-variable/inter": "^5.1.0",
-    "@invoke-ai/ui-library": "^0.0.44",
+    "@invoke-ai/ui-library": "^0.0.46",
     "@nanostores/react": "^0.7.3",
     "@reduxjs/toolkit": "2.2.3",
     "@roarr/browser-log-writer": "^1.3.0",
@@ -97,6 +97,7 @@
     "react-icons": "^5.3.0",
     "react-redux": "9.1.2",
     "react-resizable-panels": "^2.1.4",
+    "react-textarea-autosize": "^8.5.7",
     "react-use": "^17.5.1",
     "react-virtuoso": "^4.10.4",
     "redux-dynamic-middlewares": "^2.2.0",
diff --git a/invokeai/frontend/web/pnpm-lock.yaml b/invokeai/frontend/web/pnpm-lock.yaml
index ff9759d6627..cf43a853458 100644
--- a/invokeai/frontend/web/pnpm-lock.yaml
+++ b/invokeai/frontend/web/pnpm-lock.yaml
@@ -24,8 +24,8 @@ dependencies:
     specifier: ^5.1.0
     version: 5.1.0
   '@invoke-ai/ui-library':
-    specifier: ^0.0.44
-    version: 0.0.44(@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.1.0)(@types/react@18.3.11)(i18next@23.15.1)(react-dom@18.3.1)(react@18.3.1)
+    specifier: ^0.0.46
+    version: 0.0.46(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.1.0)(@types/react@18.3.11)(i18next@23.15.1)(react-dom@18.3.1)(react@18.3.1)
   '@nanostores/react':
     specifier: ^0.7.3
     version: 0.7.3(nanostores@0.11.3)(react@18.3.1)
@@ -43,7 +43,7 @@ dependencies:
     version: 0.5.0
   chakra-react-select:
     specifier: ^4.9.2
-    version: 4.9.2(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@emotion/react@11.13.3)(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
+    version: 4.9.2(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@emotion/react@11.14.0)(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
   cmdk:
     specifier: ^1.0.0
     version: 1.0.0(@types/react-dom@18.3.0)(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
@@ -140,6 +140,9 @@ dependencies:
   react-resizable-panels:
     specifier: ^2.1.4
     version: 2.1.4(react-dom@18.3.1)(react@18.3.1)
+  react-textarea-autosize:
+    specifier: ^8.5.7
+    version: 8.5.7(@types/react@18.3.11)(react@18.3.1)
   react-use:
     specifier: ^17.5.1
     version: 17.5.1(react-dom@18.3.1)(react@18.3.1)
@@ -572,7 +575,7 @@ packages:
       '@chakra-ui/react-types': 2.0.7(react@18.3.1)
       '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.14.0)(@emotion/styled@11.14.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -595,7 +598,7 @@ packages:
       react: '>=18'
     dependencies:
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.14.0)(@emotion/styled@11.14.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -605,7 +608,7 @@ packages:
       '@chakra-ui/react': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/react': 2.10.4(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@types/react@18.3.11)(framer-motion@11.10.0)(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/react': 2.10.4(@emotion/react@11.14.0)(@emotion/styled@11.14.0)(@types/react@18.3.11)(framer-motion@11.10.0)(react-dom@18.3.1)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -621,7 +624,7 @@ packages:
       '@chakra-ui/react-children-utils': 2.0.6(react@18.3.1)
       '@chakra-ui/react-context': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.14.0)(@emotion/styled@11.14.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -638,7 +641,7 @@ packages:
       '@chakra-ui/breakpoint-utils': 2.0.8
       '@chakra-ui/react-env': 3.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.14.0)(@emotion/styled@11.14.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -663,7 +666,7 @@ packages:
       '@chakra-ui/react-use-outside-click': 2.2.0(react@18.3.1)
       '@chakra-ui/react-use-update-effect': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.14.0)(@emotion/styled@11.14.0)(react@18.3.1)
       '@chakra-ui/transition': 2.1.0(framer-motion@11.10.0)(react@18.3.1)
       framer-motion: 11.10.0(react-dom@18.3.1)(react@18.3.1)
       react: 18.3.1
@@ -828,7 +831,7 @@ packages:
       react: 18.3.1
     dev: false
 
-  /@chakra-ui/react@2.10.4(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@types/react@18.3.11)(framer-motion@11.10.0)(react-dom@18.3.1)(react@18.3.1):
+  /@chakra-ui/react@2.10.4(@emotion/react@11.14.0)(@emotion/styled@11.14.0)(@types/react@18.3.11)(framer-motion@11.10.0)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-XyRWnuZ1Uw7Mlj5pKUGO5/WhnIHP/EOrpy6lGZC1yWlkd0eIfIpYMZ1ALTZx4KPEdbBaes48dgiMT2ROCqLhkA==}
     peerDependencies:
       '@emotion/react': '>=11'
@@ -841,8 +844,8 @@ packages:
       '@chakra-ui/styled-system': 2.12.1(react@18.3.1)
       '@chakra-ui/theme': 3.4.7(@chakra-ui/styled-system@2.12.1)(react@18.3.1)
       '@chakra-ui/utils': 2.2.3(react@18.3.1)
-      '@emotion/react': 11.13.3(@types/react@18.3.11)(react@18.3.1)
-      '@emotion/styled': 11.13.0(@emotion/react@11.13.3)(@types/react@18.3.11)(react@18.3.1)
+      '@emotion/react': 11.14.0(@types/react@18.3.11)(react@18.3.1)
+      '@emotion/styled': 11.14.0(@emotion/react@11.14.0)(@types/react@18.3.11)(react@18.3.1)
       '@popperjs/core': 2.11.8
       '@zag-js/focus-visible': 0.31.1
       aria-hidden: 1.2.4
@@ -867,7 +870,7 @@ packages:
       react: '>=18'
     dependencies:
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.14.0)(@emotion/styled@11.14.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -888,7 +891,7 @@ packages:
       lodash.mergewith: 4.6.2
     dev: false
 
-  /@chakra-ui/system@2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1):
+  /@chakra-ui/system@2.6.2(@emotion/react@11.14.0)(@emotion/styled@11.14.0)(react@18.3.1):
     resolution: {integrity: sha512-EGtpoEjLrUu4W1fHD+a62XR+hzC5YfsWm+6lO0Kybcga3yYEij9beegO0jZgug27V+Rf7vns95VPVP6mFd/DEQ==}
     peerDependencies:
       '@emotion/react': ^11.0.0
@@ -901,8 +904,8 @@ packages:
       '@chakra-ui/styled-system': 2.9.2
       '@chakra-ui/theme-utils': 2.0.21
       '@chakra-ui/utils': 2.0.15
-      '@emotion/react': 11.13.3(@types/react@18.3.11)(react@18.3.1)
-      '@emotion/styled': 11.13.0(@emotion/react@11.13.3)(@types/react@18.3.11)(react@18.3.1)
+      '@emotion/react': 11.14.0(@types/react@18.3.11)(react@18.3.1)
+      '@emotion/styled': 11.14.0(@emotion/react@11.14.0)(@types/react@18.3.11)(react@18.3.1)
       react: 18.3.1
       react-fast-compare: 3.2.2
     dev: false
@@ -1023,6 +1026,24 @@ packages:
       - supports-color
     dev: false
 
+  /@emotion/babel-plugin@11.13.5:
+    resolution: {integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==}
+    dependencies:
+      '@babel/helper-module-imports': 7.25.7
+      '@babel/runtime': 7.25.7
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/serialize': 1.3.3
+      babel-plugin-macros: 3.1.0
+      convert-source-map: 1.9.0
+      escape-string-regexp: 4.0.0
+      find-root: 1.1.0
+      source-map: 0.5.7
+      stylis: 4.2.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@emotion/cache@11.13.1:
     resolution: {integrity: sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==}
     dependencies:
@@ -1033,6 +1054,16 @@ packages:
       stylis: 4.2.0
     dev: false
 
+  /@emotion/cache@11.14.0:
+    resolution: {integrity: sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==}
+    dependencies:
+      '@emotion/memoize': 0.9.0
+      '@emotion/sheet': 1.4.0
+      '@emotion/utils': 1.4.2
+      '@emotion/weak-memoize': 0.4.0
+      stylis: 4.2.0
+    dev: false
+
   /@emotion/hash@0.9.2:
     resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
     dev: false
@@ -1084,6 +1115,29 @@ packages:
       - supports-color
     dev: false
 
+  /@emotion/react@11.14.0(@types/react@18.3.11)(react@18.3.1):
+    resolution: {integrity: sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.25.7
+      '@emotion/babel-plugin': 11.13.5
+      '@emotion/cache': 11.14.0
+      '@emotion/serialize': 1.3.3
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@18.3.1)
+      '@emotion/utils': 1.4.2
+      '@emotion/weak-memoize': 0.4.0
+      '@types/react': 18.3.11
+      hoist-non-react-statics: 3.3.2
+      react: 18.3.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@emotion/serialize@1.3.2:
     resolution: {integrity: sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==}
     dependencies:
@@ -1094,12 +1148,22 @@ packages:
       csstype: 3.1.3
     dev: false
 
+  /@emotion/serialize@1.3.3:
+    resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==}
+    dependencies:
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/unitless': 0.10.0
+      '@emotion/utils': 1.4.2
+      csstype: 3.1.3
+    dev: false
+
   /@emotion/sheet@1.4.0:
     resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==}
     dev: false
 
-  /@emotion/styled@11.13.0(@emotion/react@11.13.3)(@types/react@18.3.11)(react@18.3.1):
-    resolution: {integrity: sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==}
+  /@emotion/styled@11.14.0(@emotion/react@11.14.0)(@types/react@18.3.11)(react@18.3.1):
+    resolution: {integrity: sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA==}
     peerDependencies:
       '@emotion/react': ^11.0.0-rc.0
       '@types/react': '*'
@@ -1109,12 +1173,12 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.25.7
-      '@emotion/babel-plugin': 11.12.0
+      '@emotion/babel-plugin': 11.13.5
       '@emotion/is-prop-valid': 1.3.1
-      '@emotion/react': 11.13.3(@types/react@18.3.11)(react@18.3.1)
-      '@emotion/serialize': 1.3.2
-      '@emotion/use-insertion-effect-with-fallbacks': 1.1.0(react@18.3.1)
-      '@emotion/utils': 1.4.1
+      '@emotion/react': 11.14.0(@types/react@18.3.11)(react@18.3.1)
+      '@emotion/serialize': 1.3.3
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@18.3.1)
+      '@emotion/utils': 1.4.2
       '@types/react': 18.3.11
       react: 18.3.1
     transitivePeerDependencies:
@@ -1133,10 +1197,22 @@ packages:
       react: 18.3.1
     dev: false
 
+  /@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@18.3.1):
+    resolution: {integrity: sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==}
+    peerDependencies:
+      react: '>=16.8.0'
+    dependencies:
+      react: 18.3.1
+    dev: false
+
   /@emotion/utils@1.4.1:
     resolution: {integrity: sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==}
     dev: false
 
+  /@emotion/utils@1.4.2:
+    resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==}
+    dev: false
+
   /@emotion/weak-memoize@0.4.0:
     resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
     dev: false
@@ -1678,25 +1754,25 @@ packages:
       prettier: 3.3.3
     dev: true
 
-  /@invoke-ai/ui-library@0.0.44(@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.1.0)(@types/react@18.3.11)(i18next@23.15.1)(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-PDseHmdr8oi8cmrpx3UwIYHn4NduAJX2R0pM0pyM54xrCMPMgYiCbC/eOs8Gt4fBc2ziiPZ9UGoW4evnE3YJsg==}
+  /@invoke-ai/ui-library@0.0.46(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.1.0)(@types/react@18.3.11)(i18next@23.15.1)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-3YBuWWhRbTUHi0RZKeyvDEvweoyZmeBdUGJIhemjdAgGx6l98rAMeCs8IQH+SYjSAIhiGRGf45fQ33PDK8Jkmw==}
     peerDependencies:
       '@fontsource-variable/inter': ^5.0.16
       react: ^18.2.0
       react-dom: ^18.2.0
     dependencies:
-      '@chakra-ui/anatomy': 2.2.2
+      '@chakra-ui/anatomy': 2.3.5
       '@chakra-ui/icons': 2.2.4(@chakra-ui/react@2.10.4)(react@18.3.1)
       '@chakra-ui/layout': 2.3.1(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/portal': 2.1.0(react-dom@18.3.1)(react@18.3.1)
-      '@chakra-ui/react': 2.10.4(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@types/react@18.3.11)(framer-motion@11.10.0)(react-dom@18.3.1)(react@18.3.1)
-      '@chakra-ui/styled-system': 2.9.2
-      '@chakra-ui/theme-tools': 2.1.2(@chakra-ui/styled-system@2.9.2)
-      '@emotion/react': 11.13.3(@types/react@18.3.11)(react@18.3.1)
-      '@emotion/styled': 11.13.0(@emotion/react@11.13.3)(@types/react@18.3.11)(react@18.3.1)
+      '@chakra-ui/react': 2.10.4(@emotion/react@11.14.0)(@emotion/styled@11.14.0)(@types/react@18.3.11)(framer-motion@11.10.0)(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/styled-system': 2.12.1(react@18.3.1)
+      '@chakra-ui/theme-tools': 2.2.7(@chakra-ui/styled-system@2.12.1)(react@18.3.1)
+      '@emotion/react': 11.14.0(@types/react@18.3.11)(react@18.3.1)
+      '@emotion/styled': 11.14.0(@emotion/react@11.14.0)(@types/react@18.3.11)(react@18.3.1)
       '@fontsource-variable/inter': 5.1.0
       '@nanostores/react': 0.7.3(nanostores@0.11.3)(react@18.3.1)
-      chakra-react-select: 4.9.2(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@emotion/react@11.13.3)(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
+      chakra-react-select: 4.10.1(@chakra-ui/react@2.10.4)(@emotion/react@11.14.0)(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
       framer-motion: 10.18.0(react-dom@18.3.1)(react@18.3.1)
       lodash-es: 4.17.21
       nanostores: 0.11.3
@@ -1704,15 +1780,10 @@ packages:
       overlayscrollbars-react: 0.5.6(overlayscrollbars@2.10.0)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      react-i18next: 15.0.2(i18next@23.15.1)(react-dom@18.3.1)(react@18.3.1)
-      react-icons: 5.3.0(react@18.3.1)
-      react-select: 5.8.0(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
+      react-i18next: 15.4.0(i18next@23.15.1)(react-dom@18.3.1)(react@18.3.1)
+      react-icons: 5.4.0(react@18.3.1)
+      react-select: 5.10.0(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
     transitivePeerDependencies:
-      - '@chakra-ui/form-control'
-      - '@chakra-ui/icon'
-      - '@chakra-ui/media-query'
-      - '@chakra-ui/menu'
-      - '@chakra-ui/spinner'
       - '@chakra-ui/system'
       - '@types/react'
       - i18next
@@ -4196,7 +4267,25 @@ packages:
       pathval: 2.0.0
     dev: true
 
-  /chakra-react-select@4.9.2(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@emotion/react@11.13.3)(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1):
+  /chakra-react-select@4.10.1(@chakra-ui/react@2.10.4)(@emotion/react@11.14.0)(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-0d7lubrmcm7molVYNYWEYi7o71W8wn/WruINon+m23XQLYvJ+bZlYVawDdWYdJjX8O1nzJlTDo4b7CB6zTsr4A==}
+    peerDependencies:
+      '@chakra-ui/react': 2.x
+      '@emotion/react': ^11.8.1
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    dependencies:
+      '@chakra-ui/react': 2.10.4(@emotion/react@11.14.0)(@emotion/styled@11.14.0)(@types/react@18.3.11)(framer-motion@11.10.0)(react-dom@18.3.1)(react@18.3.1)
+      '@emotion/react': 11.14.0(@types/react@18.3.11)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-select: 5.8.0(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - supports-color
+    dev: false
+
+  /chakra-react-select@4.9.2(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@emotion/react@11.14.0)(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-uhvKAJ1I2lbIwdn+wx0YvxX5rtQVI0gXL0apx0CXm3blIxk7qf6YuCh2TnGuGKst8gj8jUFZyhYZiGlcvgbBRQ==}
     peerDependencies:
       '@chakra-ui/form-control': ^2.0.0
@@ -4216,8 +4305,8 @@ packages:
       '@chakra-ui/media-query': 3.3.0(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/menu': 2.2.1(@chakra-ui/system@2.6.2)(framer-motion@11.10.0)(react@18.3.1)
       '@chakra-ui/spinner': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
-      '@emotion/react': 11.13.3(@types/react@18.3.11)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.14.0)(@emotion/styled@11.14.0)(react@18.3.1)
+      '@emotion/react': 11.14.0(@types/react@18.3.11)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       react-select: 5.8.0(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1)
@@ -7501,6 +7590,26 @@ packages:
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
+  /react-i18next@15.4.0(i18next@23.15.1)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-Py6UkX3zV08RTvL6ZANRoBh9sL/ne6rQq79XlkHEdd82cZr2H9usbWpUNVadJntIZP2pu3M2rL1CN+5rQYfYFw==}
+    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.25.7
+      html-parse-stringify: 3.0.1
+      i18next: 23.15.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /react-icons@5.3.0(react@18.3.1):
     resolution: {integrity: sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==}
     peerDependencies:
@@ -7509,6 +7618,14 @@ packages:
       react: 18.3.1
     dev: false
 
+  /react-icons@5.4.0(react@18.3.1):
+    resolution: {integrity: sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==}
+    peerDependencies:
+      react: '*'
+    dependencies:
+      react: 18.3.1
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -7607,6 +7724,28 @@ packages:
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
+  /react-select@5.10.0(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-k96gw+i6N3ExgDwPIg0lUPmexl1ygPe6u5BdQFNBhkpbwroIgCNXdubtIzHfThYXYYTubwOBafoMnn7ruEP1xA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    dependencies:
+      '@babel/runtime': 7.25.7
+      '@emotion/cache': 11.14.0
+      '@emotion/react': 11.14.0(@types/react@18.3.11)(react@18.3.1)
+      '@floating-ui/dom': 1.6.11
+      '@types/react-transition-group': 4.4.11
+      memoize-one: 6.0.0
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-transition-group: 4.4.5(react-dom@18.3.1)(react@18.3.1)
+      use-isomorphic-layout-effect: 1.2.0(@types/react@18.3.11)(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - supports-color
+    dev: false
+
   /react-select@5.8.0(@types/react@18.3.11)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==}
     peerDependencies:
@@ -7646,6 +7785,20 @@ packages:
       tslib: 2.7.0
     dev: false
 
+  /react-textarea-autosize@8.5.7(@types/react@18.3.11)(react@18.3.1):
+    resolution: {integrity: sha512-2MqJ3p0Jh69yt9ktFIaZmORHXw4c4bxSIhCeWiFwmJ9EYKgLmuNII3e9c9b2UO+ijl4StnpZdqpxNIhTdHvqtQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    dependencies:
+      '@babel/runtime': 7.25.7
+      react: 18.3.1
+      use-composed-ref: 1.4.0(@types/react@18.3.11)(react@18.3.1)
+      use-latest: 1.3.0(@types/react@18.3.11)(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
   /react-transition-group@4.4.5(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
     peerDependencies:
@@ -8823,6 +8976,19 @@ packages:
       tslib: 2.7.0
     dev: false
 
+  /use-composed-ref@1.4.0(@types/react@18.3.11)(react@18.3.1):
+    resolution: {integrity: sha512-djviaxuOOh7wkj0paeO1Q/4wMZ8Zrnag5H6yBvzN7AKKe8beOaED9SF5/ByLqsku8NP4zQqsvM2u3ew/tJK8/w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.3.11
+      react: 18.3.1
+    dev: false
+
   /use-debounce@10.0.3(react@18.3.1):
     resolution: {integrity: sha512-DxQSI9ZKso689WM1mjgGU3ozcxU1TJElBJ3X6S4SMzMNcm2lVH0AHmyXB+K7ewjz2BSUKJTDqTcwtSMRfB89dg==}
     engines: {node: '>= 16.0.0'}
@@ -8853,6 +9019,33 @@ packages:
       react: 18.3.1
     dev: false
 
+  /use-isomorphic-layout-effect@1.2.0(@types/react@18.3.11)(react@18.3.1):
+    resolution: {integrity: sha512-q6ayo8DWoPZT0VdG4u3D3uxcgONP3Mevx2i2b0434cwWBoL+aelL1DzkXI6w3PhTZzUeR2kaVlZn70iCiseP6w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.3.11
+      react: 18.3.1
+    dev: false
+
+  /use-latest@1.3.0(@types/react@18.3.11)(react@18.3.1):
+    resolution: {integrity: sha512-mhg3xdm9NaM8q+gLT8KryJPnRFOz1/5XPBhmDEVZK1webPzDjrPk7f/mbpeLqTgB9msytYWANxgALOCJKnLvcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.3.11
+      react: 18.3.1
+      use-isomorphic-layout-effect: 1.1.2(@types/react@18.3.11)(react@18.3.1)
+    dev: false
+
   /use-sidecar@1.1.2(@types/react@18.3.11)(react@18.3.1):
     resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
     engines: {node: '>=10'}
diff --git a/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx b/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx
index f9e4e11f085..756ffec0d91 100644
--- a/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx
@@ -1,5 +1,6 @@
-import type { As, ChakraProps, FlexProps } from '@invoke-ai/ui-library';
+import type { ChakraProps, FlexProps } from '@invoke-ai/ui-library';
 import { Flex, Icon, Skeleton, Spinner, Text } from '@invoke-ai/ui-library';
+import type { ElementType } from 'react';
 import { memo, useMemo } from 'react';
 import { PiImageBold } from 'react-icons/pi';
 import type { ImageDTO } from 'services/api/types';
@@ -28,7 +29,7 @@ IAILoadingImageFallback.displayName = 'IAILoadingImageFallback';
 
 type IAINoImageFallbackProps = FlexProps & {
   label?: string;
-  icon?: As | null;
+  icon?: ElementType | null;
   boxSize?: ChakraProps['boxSize'];
 };
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent.tsx
index 8a36d3044c8..25c376afb9b 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent.tsx
@@ -132,7 +132,7 @@ const ImageGridItemContent = memo(
     }
 
     if (!query.data) {
-      return <IAINoContentFallback icon={<PiExclamationMarkBold />} />;
+      return <IAINoContentFallback icon={PiExclamationMarkBold} />;
     }
 
     return (

From 3e0a56982615f20a15946e6fcc0eaefe59875c02 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 31 Jan 2025 11:04:24 +1100
Subject: [PATCH 58/58] feat(ui): editable heading and text elements

---
 .../sidePanel/builder/AutosizeTextarea.tsx    | 16 ++++
 .../builder/HeadingElementComponent.tsx       | 90 +++++++++++++++----
 .../builder/TextElementComponent.tsx          | 72 +++++++++++++--
 3 files changed, 154 insertions(+), 24 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/AutosizeTextarea.tsx

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/AutosizeTextarea.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/AutosizeTextarea.tsx
new file mode 100644
index 00000000000..276dda78e0f
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/AutosizeTextarea.tsx
@@ -0,0 +1,16 @@
+import type { TextareaProps } from '@invoke-ai/ui-library';
+import { chakra, forwardRef, typedMemo, useStyleConfig } from '@invoke-ai/ui-library';
+import type { ComponentProps } from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+
+const ChakraTextareaAutosize = chakra(TextareaAutosize);
+
+export const AutosizeTextarea = typedMemo(
+  forwardRef<ComponentProps<typeof ChakraTextareaAutosize> & TextareaProps, typeof ChakraTextareaAutosize>(
+    ({ variant, ...rest }, ref) => {
+      const styles = useStyleConfig('Textarea', { variant });
+      return <ChakraTextareaAutosize __css={styles} ref={ref} {...rest} />;
+    }
+  )
+);
+AutosizeTextarea.displayName = 'AutosizeTextarea';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx
index 6608811bac2..d0f7264fac0 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementComponent.tsx
@@ -1,17 +1,19 @@
-import { Flex, Heading } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
+import { Flex, Text } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { AutosizeTextarea } from 'features/nodes/components/sidePanel/builder/AutosizeTextarea';
 import { FormElementEditModeWrapper } from 'features/nodes/components/sidePanel/builder/FormElementEditModeWrapper';
-import { selectWorkflowFormMode, useElement } from 'features/nodes/store/workflowSlice';
+import { formElementHeadingDataChanged, selectWorkflowFormMode, useElement } from 'features/nodes/store/workflowSlice';
 import type { HeadingElement } from 'features/nodes/types/workflow';
 import { HEADING_CLASS_NAME, isHeadingElement } from 'features/nodes/types/workflow';
-import { memo } from 'react';
-
-const LEVEL_TO_SIZE = {
-  1: 'xl',
-  2: 'lg',
-  3: 'md',
-  4: 'sm',
-  5: 'xs',
+import type { ChangeEvent, KeyboardEvent } from 'react';
+import { memo, useCallback, useRef, useState } from 'react';
+
+const LEVEL_TO_FONT_SIZE = {
+  1: '4xl',
+  2: '3xl',
+  3: '2xl',
+  4: 'xl',
+  5: 'lg',
 } as const;
 
 export const HeadingElementComponent = memo(({ id }: { id: string }) => {
@@ -38,7 +40,9 @@ export const HeadingElementComponentViewMode = memo(({ el }: { el: HeadingElemen
 
   return (
     <Flex id={id} className={HEADING_CLASS_NAME}>
-      <Heading size={LEVEL_TO_SIZE[level]}>{content}</Heading>
+      <Text fontWeight="bold" fontSize={LEVEL_TO_FONT_SIZE[level]}>
+        {content || 'Edit to add heading'}
+      </Text>
     </Flex>
   );
 });
@@ -46,16 +50,70 @@ export const HeadingElementComponentViewMode = memo(({ el }: { el: HeadingElemen
 HeadingElementComponentViewMode.displayName = 'HeadingElementComponentViewMode';
 
 export const HeadingElementComponentEditMode = memo(({ el }: { el: HeadingElement }) => {
-  const { id, data } = el;
-  const { content, level } = data;
+  const { id } = el;
 
   return (
     <FormElementEditModeWrapper element={el}>
-      <Flex id={id} className={HEADING_CLASS_NAME}>
-        <Heading size={LEVEL_TO_SIZE[level]}>{content}</Heading>
+      <Flex id={id} className={HEADING_CLASS_NAME} w="full">
+        <EditableHeading el={el} />
       </Flex>
     </FormElementEditModeWrapper>
   );
 });
 
 HeadingElementComponentEditMode.displayName = 'HeadingElementComponentEditMode';
+
+export const EditableHeading = memo(({ el }: { el: HeadingElement }) => {
+  const dispatch = useAppDispatch();
+  const { id, data } = el;
+  const { content, level } = data;
+
+  const [localContent, setLocalContent] = useState(content);
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  const onChange = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
+    setLocalContent(e.target.value);
+  }, []);
+
+  const onBlur = useCallback(() => {
+    const trimmedContent = localContent.trim();
+    if (trimmedContent === content) {
+      return;
+    }
+    setLocalContent(trimmedContent);
+    dispatch(formElementHeadingDataChanged({ id, changes: { content: trimmedContent } }));
+  }, [localContent, content, id, dispatch]);
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter') {
+        onBlur();
+      } else if (e.key === 'Escape') {
+        setLocalContent(content);
+      }
+    },
+    [content, onBlur]
+  );
+
+  return (
+    <AutosizeTextarea
+      ref={ref}
+      placeholder="Heading"
+      value={localContent}
+      onChange={onChange}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+      variant="outline"
+      overflowWrap="anywhere"
+      w="full"
+      minRows={1}
+      maxRows={10}
+      resize="none"
+      p={2}
+      fontWeight="bold"
+      fontSize={LEVEL_TO_FONT_SIZE[level]}
+    />
+  );
+});
+
+EditableHeading.displayName = 'EditableHeading';
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
index 3b5044b2337..51ef9f74958 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/TextElementComponent.tsx
@@ -1,10 +1,12 @@
 import { Flex, Text } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { AutosizeTextarea } from 'features/nodes/components/sidePanel/builder/AutosizeTextarea';
 import { FormElementEditModeWrapper } from 'features/nodes/components/sidePanel/builder/FormElementEditModeWrapper';
-import { selectWorkflowFormMode, useElement } from 'features/nodes/store/workflowSlice';
+import { formElementTextDataChanged, selectWorkflowFormMode, useElement } from 'features/nodes/store/workflowSlice';
 import type { TextElement } from 'features/nodes/types/workflow';
 import { isTextElement, TEXT_CLASS_NAME } from 'features/nodes/types/workflow';
-import { memo } from 'react';
+import type { ChangeEvent, KeyboardEvent } from 'react';
+import { memo, useCallback, useRef, useState } from 'react';
 
 export const TextElementComponent = memo(({ id }: { id: string }) => {
   const el = useElement(id);
@@ -29,22 +31,76 @@ export const TextElementComponentViewMode = memo(({ el }: { el: TextElement }) =
 
   return (
     <Flex id={id} className={TEXT_CLASS_NAME}>
-      <Text fontSize={fontSize}>{content}</Text>
+      <Text fontSize={fontSize} overflowWrap="anywhere">
+        {content || 'Edit to add text'}
+      </Text>
     </Flex>
   );
 });
 TextElementComponentViewMode.displayName = 'TextElementComponentViewMode';
 
 export const TextElementComponentEditMode = memo(({ el }: { el: TextElement }) => {
-  const { id, data } = el;
-  const { content, fontSize } = data;
+  const { id } = el;
 
   return (
     <FormElementEditModeWrapper element={el}>
-      <Flex id={id} className={TEXT_CLASS_NAME}>
-        <Text fontSize={fontSize}>{content}</Text>
+      <Flex id={id} className={TEXT_CLASS_NAME} w="full">
+        <EditableText el={el} />
       </Flex>
     </FormElementEditModeWrapper>
   );
 });
 TextElementComponentEditMode.displayName = 'TextElementComponentEditMode';
+
+export const EditableText = memo(({ el }: { el: TextElement }) => {
+  const dispatch = useAppDispatch();
+  const { id, data } = el;
+  const { content, fontSize } = data;
+  const [localContent, setLocalContent] = useState(content);
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  const onChange = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
+    setLocalContent(e.target.value);
+  }, []);
+
+  const onBlur = useCallback(() => {
+    const trimmedContent = localContent.trim();
+    if (trimmedContent === content) {
+      return;
+    }
+    setLocalContent(trimmedContent);
+    dispatch(formElementTextDataChanged({ id, changes: { content: trimmedContent } }));
+  }, [localContent, content, id, dispatch]);
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter') {
+        onBlur();
+      } else if (e.key === 'Escape') {
+        setLocalContent(content);
+      }
+    },
+    [content, onBlur]
+  );
+
+  return (
+    <AutosizeTextarea
+      ref={ref}
+      placeholder="Text"
+      value={localContent}
+      onChange={onChange}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+      fontSize={fontSize}
+      variant="outline"
+      overflowWrap="anywhere"
+      w="full"
+      minRows={1}
+      maxRows={10}
+      resize="none"
+      p={2}
+    />
+  );
+});
+
+EditableText.displayName = 'EditableText';