experimental: add Element component to builder

apps/builder/app/builder/features/command-panel/command-panel.tsx

@@ -24,6 +24,7 @@ import {
   componentCategories,
   collectionComponent,
   parseComponentName,
+  elementComponent,
 } from "@webstudio-is/sdk";
 import type { Breakpoint, Page } from "@webstudio-is/sdk";
 import type { TemplateMeta } from "@webstudio-is/template";
@@ -162,6 +163,9 @@ const $componentOptions = computed(
       ) {
         continue;
       }
+      if (isFeatureEnabled("element") === false && name === elementComponent) {
+        continue;
+      }
 
       const componentMeta = metas.get(name);
       const label =

apps/builder/app/builder/features/components/components.tsx

@@ -9,6 +9,7 @@ import {
   componentCategories,
   collectionComponent,
   parseComponentName,
+  elementComponent,
 } from "@webstudio-is/sdk";
 import {
   theme,
@@ -97,6 +98,9 @@ const $metas = computed(
       ) {
         continue;
       }
+      if (isFeatureEnabled("element") === false && name === elementComponent) {
+        continue;
+      }
 
       metas.push({
         name,

apps/builder/app/builder/features/settings-panel/controls/tag-control.tsx

@@ -42,7 +42,7 @@ export const TagControl = ({ meta, prop }: ControlProps<"tag">) => {
         }}
         getDescription={(item) => (
           <Box css={{ width: theme.spacing[28] }}>
-            {elementsByTag[item].description}
+            {elementsByTag[item]?.description}
           </Box>
         )}
       />

apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx

@@ -27,6 +27,7 @@ import {
   blockComponent,
   blockTemplateComponent,
   getIndexesWithinAncestors,
+  elementComponent,
 } from "@webstudio-is/sdk";
 import { indexProperty, tagProperty } from "@webstudio-is/sdk/runtime";
 import {
@@ -471,10 +472,14 @@ export const WebstudioComponentCanvas = forwardRef<
     return <></>;
   }
 
-  let Component =
+  let Component: string | AnyComponent =
     components.get(instance.component) ??
     (MissingComponentStub as AnyComponent);
 
+  if (instance.component === elementComponent) {
+    Component = instance.tag ?? "div";
+  }
+
   if (instance.component === collectionComponent) {
     const data = instanceProps.data;
     if (data && Array.isArray(data) === false) {
@@ -662,7 +667,13 @@ export const WebstudioComponentPreview = forwardRef<
     return <></>;
   }
 
-  let Component = components.get(instance.component);
+  let Component: undefined | string | AnyComponent = components.get(
+    instance.component
+  );
+
+  if (instance.component === elementComponent) {
+    Component = instance.tag ?? "div";
+  }
 
   if (instance.component === blockComponent) {
     Component = Block;

apps/builder/app/shared/instance-utils.ts

@@ -30,6 +30,7 @@ import {
   Prop,
   parseComponentName,
   Props,
+  elementComponent,
 } from "@webstudio-is/sdk";
 import {
   $props,
@@ -171,14 +172,16 @@ const getLabelFromComponentName = (component: Instance["component"]) => {
 };
 
 export const getInstanceLabel = (
-  instance: { component: string; label?: string },
+  instance: { component: string; label?: string; tag?: string },
   meta: { label?: string }
 ) => {
-  return (
-    instance.label ||
-    meta.label ||
-    getLabelFromComponentName(instance.component)
-  );
+  if (instance.label) {
+    return instance.label;
+  }
+  if (instance.component === elementComponent && instance.tag) {
+    return `<${instance.tag}>`;
+  }
+  return meta.label || getLabelFromComponentName(instance.component);
 };
 
 export const findAllEditableInstanceSelector = ({

packages/feature-flags/src/flags.ts

@@ -5,3 +5,4 @@ export const aiRadixComponents = false;
 export const animation = false;
 export const videoAnimation = false;
 export const resourceProp = false;
+export const element = false;

packages/html-data/bin/elements.ts

@@ -68,3 +68,20 @@ export const elementsByTag: Record<string, Element> = ${JSON.stringify(elementsB
 const contentModelFile = "./src/__generated__/elements.ts";
 await mkdir(dirname(contentModelFile), { recursive: true });
 await writeFile(contentModelFile, contentModel);
+
+const tags: string[] = [];
+for (const [tag, element] of Object.entries(elementsByTag)) {
+  if (element.categories.includes("metadata")) {
+    continue;
+  }
+  // @todo remove when element insert can adapt to parent
+  if (element.categories.includes("none")) {
+    continue;
+  }
+  tags.push(tag);
+}
+const tagsContent = `export const tags: string[] = ${JSON.stringify(tags, null, 2)};
+`;
+const tagsFile = "../sdk/src/__generated__/tags.ts";
+await mkdir(dirname(tagsFile), { recursive: true });
+await writeFile(tagsFile, tagsContent);

packages/sdk/src/core-metas.ts

@@ -4,14 +4,17 @@ import {
   PaintBrushIcon,
   SettingsIcon,
   AddTemplateInstanceIcon,
-  HtmlElementIcon,
+  BoxIcon,
 } from "@webstudio-is/icons/svg";
 import { html } from "./__generated__/normalize.css";
+import * as normalize from "./__generated__/normalize.css";
 import type {
   WsComponentMeta,
   WsComponentPropsMeta,
 } from "./schema/component-meta";
 import type { Instance } from "./schema/instances";
+import { tagProperty } from "./runtime";
+import { tags } from "./__generated__/tags";
 
 export const rootComponent = "ws:root";
 
@@ -31,11 +34,20 @@ export const elementComponent = "ws:element";
 
 const elementMeta: WsComponentMeta = {
   label: "Element",
-  icon: HtmlElementIcon,
+  icon: BoxIcon,
+  // convert [object Module] to [object Object] to enable structured cloning
+  presetStyle: { ...normalize },
 };
 
 const elementPropsMeta: WsComponentPropsMeta = {
-  props: {},
+  props: {
+    [tagProperty]: {
+      type: "string",
+      control: "tag",
+      required: true,
+      options: tags,
+    },
+  },
 };
 
 export const portalComponent = "Slot";

packages/sdk/src/core-templates.tsx

@@ -10,8 +10,17 @@ import {
   blockComponent,
   collectionComponent,
   descendantComponent,
+  elementComponent,
 } from "./core-metas";
 
+const elementMeta: TemplateMeta = {
+  category: "general",
+  order: 0,
+  description:
+    "An HTML element is a core building block for web pages, structuring and displaying content like text, images, and links.",
+  template: <ws.element ws:tag="div"></ws.element>,
+};
+
 const collectionItem = new Parameter("collectionItem");
 
 const collectionMeta: TemplateMeta = {
@@ -97,6 +106,7 @@ const blockMeta: TemplateMeta = {
 };
 
 export const coreTemplates = {
+  [elementComponent]: elementMeta,
   [collectionComponent]: collectionMeta,
   [descendantComponent]: descendantMeta,
   [blockComponent]: blockMeta,