Give body separate type in sdk (#560)

Body is the only container which should not be listed. After discussing
with Oleg decided to give it separate body type.

apps/designer/app/canvas/shared/instance.ts

@@ -73,9 +73,10 @@ export const findInsertLocation = (
   );
   path.reverse();
 
-  const parentIndex = path.findIndex(
-    ({ item }) => getComponentMeta(item.component).type === "container"
-  );
+  const parentIndex = path.findIndex(({ item }) => {
+    const { type } = getComponentMeta(item.component);
+    return type === "body" || type === "container";
+  });
 
   // Just in case selected Instance is not in the tree for some reason.
   if (parentIndex === -1) {

apps/designer/app/canvas/shared/use-drag-drop.ts

@@ -115,9 +115,10 @@ export const useDragAndDrop = () => {
         path.splice(0, dragItemIndex + 1);
       }
 
-      const data = path.find(
-        (instance) => getComponentMeta(instance.component).type === "container"
-      );
+      const data = path.find((instance) => {
+        const { type } = getComponentMeta(instance.component);
+        return type === "body" || type === "container";
+      });
 
       if (data === undefined) {
         return getDefaultDropTarget();

apps/designer/app/designer/shared/tree/index.tsx

@@ -20,14 +20,19 @@ const instanceRelatedProps = {
   },
   canAcceptChild(item: Instance) {
     const { type } = getComponentMeta(item.component);
-    return type === "container";
+    return type === "body" || type === "container";
   },
   getItemChildren(item: Instance) {
     const { type } = getComponentMeta(item.component);
 
     // We want to avoid calling .filter() unnecessarily, because this is a hot path for performance.
     // We rely on the fact that only rich-text or rich-text-child components may have `string` children.
-    if (type === "container" || type === "control" || type === "embed") {
+    if (
+      type === "body" ||
+      type === "container" ||
+      type === "control" ||
+      type === "embed"
+    ) {
       return item.children as Instance[];
     }
 

packages/react-sdk/src/components/body.ws.tsx

@@ -53,7 +53,7 @@ const defaultStyle = {
 } as const;
 
 const meta: WsComponentMeta = {
-  type: "container",
+  type: "body",
   label: "Body",
   Icon: BodyIcon,
   props: props as MetaProps,

packages/react-sdk/src/components/component-type.ts

@@ -1,19 +1,26 @@
 import { z } from "zod";
 import type { FunctionComponent } from "react";
-import { IconProps } from "@webstudio-is/icons";
+import type { IconProps } from "@webstudio-is/icons";
 import type { Style } from "@webstudio-is/css-data";
 
 export type MetaProps = Partial<z.infer<typeof Props>>;
 
 export type WsComponentMeta = {
   /**
+   * body - can accept other components with dnd but not listed
    * container - can accept other components with dnd
    * control - usually form controls like inputs, without children
    * embed - images, videos or other embeddable components, without children
    * rich-text - editable text component
    * rich-text-child - formatted text fragment, not listed in components list
    */
-  type: "container" | "control" | "embed" | "rich-text" | "rich-text-child";
+  type:
+    | "body"
+    | "container"
+    | "control"
+    | "embed"
+    | "rich-text"
+    | "rich-text-child";
   label: string;
   Icon: FunctionComponent<IconProps>;
   defaultStyle?: Style;
@@ -66,6 +73,7 @@ const Props = z.record(
 export const WsComponentMeta = z.lazy(() =>
   z.object({
     type: z.enum([
+      "body",
       "container",
       "control",
       "embed",