feat: zIndex management for Flex Nodes

Author: camielvs

src/components/shared/ReactFlow/FlowCanvas/FlexNode/FlexNodeEditor.tsx

@@ -12,6 +12,7 @@ import { Paragraph, Text } from "@/components/ui/typography";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { updateSubgraphSpec } from "@/utils/subgraphUtils";
 
+import { StackingControls } from "../../FlowControls/StackingControls";
 import { updateFlexNodeInComponentSpec } from "./interface";
 import type { FlexNodeData } from "./types";
 
@@ -77,6 +78,8 @@ export const FlexNodeEditor = ({
           },
         ]}
       />
+
+      {!readOnly && <ZIndexEditor flexNode={flexNode} />}
     </BlockStack>
   );
 };
@@ -272,3 +275,39 @@ const ColorEditor = ({
     </ContentBlock>
   );
 };
+
+const ZIndexEditor = ({ flexNode }: { flexNode: FlexNodeData }) => {
+  const {
+    componentSpec,
+    currentSubgraphSpec,
+    currentSubgraphPath,
+    setComponentSpec,
+  } = useComponentSpec();
+
+  const handleStackingControlChange = (newZIndex: number) => {
+    const updatedSubgraphSpec = updateFlexNodeInComponentSpec(
+      currentSubgraphSpec,
+      {
+        ...flexNode,
+        zIndex: newZIndex,
+      },
+    );
+
+    const newRootSpec = updateSubgraphSpec(
+      componentSpec,
+      currentSubgraphPath,
+      updatedSubgraphSpec,
+    );
+
+    setComponentSpec(newRootSpec);
+  };
+
+  return (
+    <ContentBlock title="Stacking">
+      <StackingControls
+        nodeId={flexNode.id}
+        onChange={handleStackingControlChange}
+      />
+    </ContentBlock>
+  );
+};

src/components/shared/ReactFlow/FlowCanvas/utils/addFlexNode.ts

@@ -6,6 +6,7 @@ import { type ComponentSpec } from "@/utils/componentSpec";
 import { updateFlexNodeInComponentSpec } from "../FlexNode/interface";
 import type { FlexNodeData } from "../FlexNode/types";
 import { DEFAULT_FLEX_NODE_SIZE, DEFAULT_STICKY_NOTE } from "../FlexNode/utils";
+import { Z_INDEX_RANGES } from "./zIndex";
 
 interface AddFlexNodeResult {
   spec: ComponentSpec;
@@ -45,7 +46,7 @@ const addFlexNode = (
     metadata,
     size: DEFAULT_FLEX_NODE_SIZE,
     position: position,
-    zIndex: 1,
+    zIndex: Z_INDEX_RANGES.flex.default,
   };
 
   const newComponentSpec = updateFlexNodeInComponentSpec(

src/components/shared/ReactFlow/FlowCanvas/utils/zIndex.ts

@@ -29,6 +29,11 @@ export const Z_INDEX_RANGES: Record<NodeType, zIndexDefinition> = {
     max: 100,
     default: 100,
   },
+  flex: {
+    min: -100,
+    max: 1000,
+    default: 0,
+  },
 };
 
 const getNodeZIndexDefault = (node: Node): number => {