webstudio 0.210.0 → 0.213.0

package/lib/cli.js

@@ -1657,6 +1657,7 @@ var FormTextFieldIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" vie
 var FormIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.184 5.5h.731a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 0-.75-.75H2.085a.75.75 0 0 0-.75.75v1.5c0 .414.336.75.75.75h11.099ZM13.184 10.5h.732a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 0-.75-.75H2.084a.75.75 0 0 0-.75.75v1.5c0 .414.336.75.75.75h11.099Z"/><path fill="currentColor" d="M6.613 14.5h.222a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-5.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5H6.613Z"/></svg>`;
 var HeaderIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2ZM4 4h8"/></svg>`;
 var HeadingIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4 8h8M4 13.333V2.667M12 13.333V2.667"/></svg>`;
+var HtmlElementIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.556 2H3.444C2.647 2 2 2.647 2 3.444v10.112C2 14.353 2.647 15 3.444 15h10.112c.797 0 1.444-.647 1.444-1.444V3.444C15 2.647 14.353 2 13.556 2Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.5 10 12 8.5 10.5 7M6 7 4.5 8.5 6 10m3.188-4.5-1.876 6"/></svg>`;
 var ImageIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6 7.333a1.333 1.333 0 1 0 0-2.666 1.333 1.333 0 0 0 0 2.666ZM14 10l-2.057-2.057a1.333 1.333 0 0 0-1.886 0L4 14"/></svg>`;
 var ItemIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M2 6h.007M5.333 10H14M5.333 6H14"/></svg>`;
 var LabelIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6.476 11.074V4.926m0 6.148h3.77v-.615m-3.77.615h-.722m.722-6.148h.632m-.632 0h-.722"/></svg>`;
@@ -1687,12 +1688,14 @@ var TextItalicIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBo
 var TextIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M2.667 4.667v-2h10.666v2M6 13.333h4M8 2.667v10.666"/></svg>`;
 var TooltipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14 10a1.333 1.333 0 0 1-1.333 1.333h-8L2 14V3.333A1.333 1.333 0 0 1 3.333 2h9.334A1.333 1.333 0 0 1 14 3.333V10Z"/></svg>`;
 var TriggerIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M11.915 7.354v-.647a1.294 1.294 0 1 0-2.587 0"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.328 6.707V6.06a1.294 1.294 0 1 0-2.587 0v.647"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6.74 6.383V2.826a1.293 1.293 0 1 0-2.586 0v6.467"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M11.914 7.353a1.293 1.293 0 0 1 2.587 0v1.94a5.174 5.174 0 0 1-5.174 5.174H8.034c-1.81 0-2.91-.556-3.874-1.513l-2.328-2.328a1.293 1.293 0 0 1 1.83-1.824L4.8 9.94"/></svg>`;
+var VideoIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="currentColor" fill-rule="evenodd" d="M1.833 5.333c0-.46.373-.833.834-.833h6.666c.46 0 .834.373.834.833v5.334c0 .46-.374.833-.834.833H2.667a.833.833 0 0 1-.834-.833V5.333ZM2.667 3.5C1.654 3.5.833 4.32.833 5.333v5.334c0 1.012.821 1.833 1.834 1.833h6.666c1.013 0 1.834-.82 1.834-1.833V9.6l2.704 1.803a.833.833 0 0 0 1.296-.693V5.247a.833.833 0 0 0-1.254-.72l-2.746 1.602v-.796c0-1.012-.821-1.833-1.834-1.833H2.667Zm8.5 3.787V8.4l3 2V5.537l-3 1.75Z" clip-rule="evenodd"/></svg>`;
 var ViewportIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%" style="display: block;"><path fill-rule="evenodd" d="M5.173 1.35h.157a.65.65 0 0 1 0 1.3H5.2c-.57 0-.96 0-1.26.025-.294.024-.446.068-.553.122a1.35 1.35 0 0 0-.59.59c-.054.107-.098.259-.122.552-.025.301-.025.69-.025 1.261v.13a.65.65 0 0 1-1.3 0v-.157c0-.537 0-.98.03-1.34.03-.373.095-.715.259-1.036a2.65 2.65 0 0 1 1.158-1.158c.32-.164.663-.229 1.036-.26.36-.029.803-.029 1.34-.029Zm6.888 1.325c-.301-.024-.69-.025-1.261-.025h-.13a.65.65 0 1 1 0-1.3h.157c.537 0 .98 0 1.34.03.373.03.715.095 1.036.259.499.254.904.66 1.158 1.158.164.32.229.663.26 1.036.029.36.029.803.029 1.34v.157a.65.65 0 1 1-1.3 0V5.2c0-.57 0-.96-.025-1.26-.024-.294-.068-.446-.122-.553a1.35 1.35 0 0 0-.59-.59c-.107-.054-.26-.098-.552-.122ZM2 10.02a.65.65 0 0 1 .65.65v.13c0 .57 0 .96.025 1.26.024.294.068.446.122.553.13.254.336.46.59.59.107.054.259.098.552.122.301.025.69.025 1.261.025h.13a.65.65 0 1 1 0 1.3h-.157c-.537 0-.98 0-1.34-.03-.373-.03-.715-.095-1.036-.259a2.65 2.65 0 0 1-1.158-1.158c-.164-.32-.23-.663-.26-1.037-.029-.36-.029-.802-.029-1.34v-.156a.65.65 0 0 1 .65-.65Zm12 0a.65.65 0 0 1 .65.65v.157c0 .537 0 .98-.03 1.34-.03.373-.095.715-.259 1.036a2.65 2.65 0 0 1-1.158 1.158c-.32.164-.663.23-1.037.26-.36.029-.802.029-1.34.029h-.156a.65.65 0 1 1 0-1.3h.13c.57 0 .96 0 1.26-.025.294-.024.446-.068.553-.122.254-.13.46-.336.59-.59.054-.107.098-.259.122-.552.025-.301.025-.69.025-1.261v-.13a.65.65 0 0 1 .65-.65ZM8 10.033a2.033 2.033 0 1 0 0-4.066 2.033 2.033 0 0 0 0 4.066Zm0 1.3a3.333 3.333 0 1 0 0-6.666 3.333 3.333 0 0 0 0 6.666Z" clip-rule="evenodd"/></svg>`;
 var VimeoIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M14.993 4.801c-.062 1.363-1.014 3.228-2.855 5.597-1.903 2.473-3.514 3.71-4.83 3.71-.817 0-1.508-.753-2.072-2.26l-1.13-4.143c-.419-1.506-.868-2.259-1.349-2.26a4.332 4.332 0 0 0-1.099.66L1 5.257c.69-.607 1.372-1.214 2.043-1.822.921-.796 1.613-1.215 2.074-1.257 1.09-.105 1.76.64 2.012 2.234.272 1.72.461 2.79.566 3.208.315 1.427.66 2.14 1.038 2.14.292 0 .733-.463 1.32-1.39.586-.925.9-1.63.942-2.113.084-.798-.23-1.198-.942-1.199-.357.005-.71.084-1.036.23.688-2.253 2.002-3.349 3.942-3.285 1.439.042 2.117.975 2.034 2.798Z"/></svg>`;
 var WebhookFormIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12 11.32H8.007c-.734 0-1.3.627-1.654 1.267a2.666 2.666 0 0 1-5.02-1.254A2.62 2.62 0 0 1 1.713 10"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4 11.333 6.087 7.48c.353-.647.066-1.453-.334-2.067a2.667 2.667 0 1 1 4.594-2.706"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m8 4 2.087 3.82c.353.647 1.18.847 1.913.847A2.667 2.667 0 0 1 12 14"/></svg>`;
 var WindowInfoIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2ZM8 11.516V7.853"/><rect width="1.4" height="1.4" x="7.3" y="4.484" fill="currentColor" rx=".7"/></svg>`;
 var WindowTitleIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 4H3.333C2.597 4 2 4.497 2 5.111v7.778C2 13.503 2.597 14 3.333 14h9.334c.736 0 1.333-.498 1.333-1.111V5.11C14 4.497 13.403 4 12.667 4ZM4 2h8"/></svg>`;
 var XmlIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.163 9.02v-4L8.83 1.686h-5.5A1.333 1.333 0 0 0 1.997 3.02v6"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.164 2.186v1.667a1.333 1.333 0 0 0 1.333 1.333h2.667M1.997 11.314l3 3M4.997 11.314l-3 3M6.997 14.314v-3l1.5 1.523 1.5-1.523v3M12.163 11.314v3h1.84"/></svg>`;
+var Youtube1cIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill-rule="evenodd" d="M13.47 3.299a1.771 1.771 0 0 1 1.238 1.263C15 5.675 15 8 15 8s0 2.325-.293 3.438a1.771 1.771 0 0 1-1.238 1.263C12.38 13 8 13 8 13s-4.378 0-5.47-.299a1.771 1.771 0 0 1-1.237-1.263C1 10.325 1 8 1 8s0-2.325.293-3.438A1.771 1.771 0 0 1 2.53 3.299C3.622 3 8 3 8 3s4.378 0 5.47.299Zm-3.232 4.7L6.6 10.144V5.857L10.238 8Z" clip-rule="evenodd"/></svg>`;
 var YoutubeIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path d="M.892 11.528a18.047 18.047 0 0 1 0-7.482A1.496 1.496 0 0 1 1.94 3a37.082 37.082 0 0 1 12.12 0 1.497 1.497 0 0 1 1.048 1.047 18.046 18.046 0 0 1 0 7.482 1.497 1.497 0 0 1-1.048 1.048 37.077 37.077 0 0 1-12.12 0 1.497 1.497 0 0 1-1.048-1.048Z"/><path d="m6.5 10.3 4-2.4-4-2.4v4.8Z"/></svg>`;
 var AssetId = z.string();
 var baseAsset = {
@@ -1778,10 +1781,7 @@ var HomePage = z.object({
   ...commonPageFields,
   path: HomePagePath
 });
-var PagePath = z.string().refine((path) => path !== "", "Can't be empty").refine((path) => path !== "/", "Can't be just a /").refine(
-  (path) => path === "" || path.startsWith("/"),
-  "Must start with a / or a full URL e.g. https://website.org"
-).refine((path) => path.endsWith("/") === false, "Can't end with a /").refine((path) => path.includes("//") === false, "Can't contain repeating /").refine(
+var DefaultPagePage = z.string().refine((path) => path !== "", "Can't be empty").refine((path) => path !== "/", "Can't be just a /").refine((path) => path.endsWith("/") === false, "Can't end with a /").refine((path) => path.includes("//") === false, "Can't contain repeating /").refine(
   (path) => /^[-_a-z0-9*:?\\/.]*$/.test(path),
   "Only a-z, 0-9, -, _, /, :, ?, . and * are allowed"
 ).refine(
@@ -1794,6 +1794,14 @@ var PagePath = z.string().refine((path) => path !== "", "Can't be empty").refine
   (path) => path !== "/build" && path.startsWith("/build/") === false,
   "/build prefix is reserved for the system"
 );
+var PagePath = DefaultPagePage.refine(
+  (path) => path === "" || path.startsWith("/"),
+  "Must start with a / or a full URL e.g. https://website.org"
+);
+DefaultPagePage.refine(
+  (path) => path === "" || path.startsWith("/"),
+  "Must start with a / and it must be full path e.g. /project/id"
+);
 var Page = z.object({
   ...commonPageFields,
   path: PagePath
@@ -1854,6 +1862,7 @@ var Instance = z.object({
   type: z.literal("instance"),
   id: InstanceId,
   component: z.string(),
+  tag: z.string().optional(),
   label: z.string().optional(),
   children: z.array(InstanceChild)
 });
@@ -2024,6 +2033,23 @@ var rangeUnitValueSchema = z.union([
   z.object({
     type: z.literal("unparsed"),
     value: z.string()
+  }),
+  z.object({
+    type: z.literal("var"),
+    value: z.string()
+  })
+]);
+var TIME_UNITS = ["ms", "s"];
+var timeUnitSchema = literalUnion(TIME_UNITS);
+var durationUnitValueSchema = z.union([
+  z.object({
+    type: z.literal("unit"),
+    value: z.number(),
+    unit: timeUnitSchema
+  }),
+  z.object({
+    type: z.literal("var"),
+    value: z.string()
   })
 ]);
 var insetUnitValueSchema = z.union([
@@ -2045,8 +2071,9 @@ var keyframeEffectOptionsSchema = z.object({
     z.literal("forwards"),
     z.literal("backwards"),
     z.literal("both")
-  ]).optional()
+  ]).optional(),
   // FillMode
+  duration: durationUnitValueSchema.optional()
 });
 var scrollNamedRangeSchema = z.union([
   z.literal("start"),
@@ -2295,6 +2322,13 @@ var common = {
   description: z.string().optional(),
   required: z.boolean()
 };
+var Tag = z.object({
+  ...common,
+  control: z.literal("tag"),
+  type: z.literal("string"),
+  defaultValue: z.undefined().optional(),
+  options: z.array(z.string())
+});
 var Number = z.object({
   ...common,
   control: z.literal("number"),
@@ -2438,6 +2472,7 @@ var AnimationAction = z.object({
   defaultValue: z.undefined().optional()
 });
 var PropMeta = z.union([
+  Tag,
   Number,
   Range,
   Text,
@@ -2582,6 +2617,23 @@ var defaultStates = [
   { selector: ":focus-visible", label: "Focus Visible" },
   { selector: ":focus-within", label: "Focus Within" }
 ];
+var ContentModel = z.object({
+  /*
+   * instance - accepted by any parent with "instance" in children categories
+   * none - accepted by parents with this component name in children categories
+   */
+  category: z.union([z.literal("instance"), z.literal("none")]),
+  /**
+   * transparent - pass through possible children from parent
+   * rich-text - can be edited as rich text
+   * instance - other instances accepted
+   * empty - no children accepted
+   * ComponentName - accept specific components with none category
+   */
+  children: z.array(
+    z.string()
+  )
+});
 z.object({
   category: z.enum(componentCategories).optional(),
   // container - can accept other components with dnd or be edited as text
@@ -2595,6 +2647,7 @@ z.object({
    */
   placeholder: z.string().optional(),
   constraints: Matchers.optional(),
+  contentModel: ContentModel.optional(),
   // when this field is specified component receives
   // prop with index of same components withiin specified ancestor
   // important to automatically enumerate collections without
@@ -2633,6 +2686,12 @@ var rootMeta = {
     html
   }
 };
+var elementComponent = "ws:element";
+var elementMeta = {
+  type: "container",
+  label: "Element",
+  icon: HtmlElementIcon
+};
 var collectionComponent = "ws:collection";
 var collectionMeta = {
   type: "container",
@@ -2644,46 +2703,42 @@ var descendantMeta = {
   type: "control",
   label: "Descendant",
   icon: PaintBrushIcon,
+  contentModel: {
+    category: "none",
+    children: ["empty"]
+  },
   // @todo infer possible presets
-  presetStyle: {},
-  constraints: {
-    relation: "parent",
-    component: { $in: ["HtmlEmbed", "MarkdownEmbed"] }
-  }
+  presetStyle: {}
 };
 var blockComponent = "ws:block";
 var blockTemplateComponent = "ws:block-template";
 var blockTemplateMeta = {
   type: "container",
   icon: AddTemplateInstanceIcon,
-  constraints: {
-    relation: "parent",
-    component: { $eq: blockComponent }
+  contentModel: {
+    category: "none",
+    children: ["instance"]
   }
 };
 var blockMeta = {
   type: "container",
   label: "Content Block",
   icon: ContentBlockIcon,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $nin: [collectionComponent, blockComponent] }
-    },
-    {
-      relation: "child",
-      component: { $eq: blockTemplateComponent }
-    }
-  ]
+  contentModel: {
+    category: "instance",
+    children: [blockTemplateComponent, "instance"]
+    // @todo prevent deleting block template
+  }
 };
 var coreMetas = {
   [rootComponent]: rootMeta,
+  [elementComponent]: elementMeta,
   [collectionComponent]: collectionMeta,
   [descendantComponent]: descendantMeta,
   [blockComponent]: blockMeta,
   [blockTemplateComponent]: blockTemplateMeta
 };
-var isCoreComponent = (component) => component === rootComponent || component === collectionComponent || component === descendantComponent || component === blockComponent || component === blockTemplateComponent;
+var isCoreComponent = (component) => component === rootComponent || component === elementComponent || component === collectionComponent || component === descendantComponent || component === blockComponent || component === blockTemplateComponent;
 var ROOT_INSTANCE_ID = ":root";
 var traverseInstances = (instances, instanceId, callback) => {
   const instance = instances.get(instanceId);
@@ -3428,6 +3483,8 @@ ${userSheet.cssText}`,
     classes
   };
 };
+var tagProperty = "data-ws-tag";
+var indexProperty = "data-ws-index";
 var getRemixSegment = (segment) => {
   var _a2, _b2;
   if (segment === "*") {
@@ -3575,7 +3632,6 @@ var normalizeProps = ({
   return newProps;
 };
 var showAttribute = "data-ws-show";
-var indexAttribute = "data-ws-index";
 var attributeNameStartChar = "A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD";
 var attributeNameChar = attributeNameStartChar + ":\\-0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040";
 var validAttributeNameRegex = new RegExp(
@@ -3598,6 +3654,502 @@ var isAttributeNameSafe = (attributeName) => {
   illegalAttributeNameCache.set(attributeName, true);
   return false;
 };
+var standardAttributesToReactProps = {
+  // HTML
+  accept: "accept",
+  acceptcharset: "acceptCharset",
+  "accept-charset": "acceptCharset",
+  accesskey: "accessKey",
+  action: "action",
+  allowfullscreen: "allowFullScreen",
+  alt: "alt",
+  as: "as",
+  async: "async",
+  autocapitalize: "autoCapitalize",
+  autocomplete: "autoComplete",
+  autocorrect: "autoCorrect",
+  autofocus: "autoFocus",
+  autoplay: "autoPlay",
+  autosave: "autoSave",
+  capture: "capture",
+  cellpadding: "cellPadding",
+  cellspacing: "cellSpacing",
+  challenge: "challenge",
+  charset: "charSet",
+  checked: "checked",
+  children: "children",
+  cite: "cite",
+  class: "className",
+  classid: "classID",
+  classname: "className",
+  cols: "cols",
+  colspan: "colSpan",
+  content: "content",
+  contenteditable: "contentEditable",
+  contextmenu: "contextMenu",
+  controls: "controls",
+  controlslist: "controlsList",
+  coords: "coords",
+  crossorigin: "crossOrigin",
+  dangerouslysetinnerhtml: "dangerouslySetInnerHTML",
+  data: "data",
+  datetime: "dateTime",
+  default: "default",
+  defaultchecked: "defaultChecked",
+  defaultvalue: "defaultValue",
+  defer: "defer",
+  dir: "dir",
+  disabled: "disabled",
+  disablepictureinpicture: "disablePictureInPicture",
+  disableremoteplayback: "disableRemotePlayback",
+  download: "download",
+  draggable: "draggable",
+  enctype: "encType",
+  enterkeyhint: "enterKeyHint",
+  fetchpriority: "fetchPriority",
+  for: "htmlFor",
+  form: "form",
+  formmethod: "formMethod",
+  formaction: "formAction",
+  formenctype: "formEncType",
+  formnovalidate: "formNoValidate",
+  formtarget: "formTarget",
+  frameborder: "frameBorder",
+  headers: "headers",
+  height: "height",
+  hidden: "hidden",
+  high: "high",
+  href: "href",
+  hreflang: "hrefLang",
+  htmlfor: "htmlFor",
+  httpequiv: "httpEquiv",
+  "http-equiv": "httpEquiv",
+  icon: "icon",
+  id: "id",
+  imagesizes: "imageSizes",
+  imagesrcset: "imageSrcSet",
+  inert: "inert",
+  innerhtml: "innerHTML",
+  inputmode: "inputMode",
+  integrity: "integrity",
+  is: "is",
+  itemid: "itemID",
+  itemprop: "itemProp",
+  itemref: "itemRef",
+  itemscope: "itemScope",
+  itemtype: "itemType",
+  keyparams: "keyParams",
+  keytype: "keyType",
+  kind: "kind",
+  label: "label",
+  lang: "lang",
+  list: "list",
+  loop: "loop",
+  low: "low",
+  manifest: "manifest",
+  marginwidth: "marginWidth",
+  marginheight: "marginHeight",
+  max: "max",
+  maxlength: "maxLength",
+  media: "media",
+  mediagroup: "mediaGroup",
+  method: "method",
+  min: "min",
+  minlength: "minLength",
+  multiple: "multiple",
+  muted: "muted",
+  name: "name",
+  nomodule: "noModule",
+  nonce: "nonce",
+  novalidate: "noValidate",
+  open: "open",
+  optimum: "optimum",
+  pattern: "pattern",
+  placeholder: "placeholder",
+  playsinline: "playsInline",
+  poster: "poster",
+  preload: "preload",
+  profile: "profile",
+  radiogroup: "radioGroup",
+  readonly: "readOnly",
+  referrerpolicy: "referrerPolicy",
+  rel: "rel",
+  required: "required",
+  reversed: "reversed",
+  role: "role",
+  rows: "rows",
+  rowspan: "rowSpan",
+  sandbox: "sandbox",
+  scope: "scope",
+  scoped: "scoped",
+  scrolling: "scrolling",
+  seamless: "seamless",
+  selected: "selected",
+  shape: "shape",
+  size: "size",
+  sizes: "sizes",
+  span: "span",
+  spellcheck: "spellCheck",
+  src: "src",
+  srcdoc: "srcDoc",
+  srclang: "srcLang",
+  srcset: "srcSet",
+  start: "start",
+  step: "step",
+  style: "style",
+  summary: "summary",
+  tabindex: "tabIndex",
+  target: "target",
+  title: "title",
+  type: "type",
+  usemap: "useMap",
+  value: "value",
+  width: "width",
+  wmode: "wmode",
+  wrap: "wrap",
+  // SVG
+  about: "about",
+  accentheight: "accentHeight",
+  "accent-height": "accentHeight",
+  accumulate: "accumulate",
+  additive: "additive",
+  alignmentbaseline: "alignmentBaseline",
+  "alignment-baseline": "alignmentBaseline",
+  allowreorder: "allowReorder",
+  alphabetic: "alphabetic",
+  amplitude: "amplitude",
+  arabicform: "arabicForm",
+  "arabic-form": "arabicForm",
+  ascent: "ascent",
+  attributename: "attributeName",
+  attributetype: "attributeType",
+  autoreverse: "autoReverse",
+  azimuth: "azimuth",
+  basefrequency: "baseFrequency",
+  baselineshift: "baselineShift",
+  "baseline-shift": "baselineShift",
+  baseprofile: "baseProfile",
+  bbox: "bbox",
+  begin: "begin",
+  bias: "bias",
+  by: "by",
+  calcmode: "calcMode",
+  capheight: "capHeight",
+  "cap-height": "capHeight",
+  clip: "clip",
+  clippath: "clipPath",
+  "clip-path": "clipPath",
+  clippathunits: "clipPathUnits",
+  cliprule: "clipRule",
+  "clip-rule": "clipRule",
+  color: "color",
+  colorinterpolation: "colorInterpolation",
+  "color-interpolation": "colorInterpolation",
+  colorinterpolationfilters: "colorInterpolationFilters",
+  "color-interpolation-filters": "colorInterpolationFilters",
+  colorprofile: "colorProfile",
+  "color-profile": "colorProfile",
+  colorrendering: "colorRendering",
+  "color-rendering": "colorRendering",
+  contentscripttype: "contentScriptType",
+  contentstyletype: "contentStyleType",
+  cursor: "cursor",
+  cx: "cx",
+  cy: "cy",
+  d: "d",
+  datatype: "datatype",
+  decelerate: "decelerate",
+  descent: "descent",
+  diffuseconstant: "diffuseConstant",
+  direction: "direction",
+  display: "display",
+  divisor: "divisor",
+  dominantbaseline: "dominantBaseline",
+  "dominant-baseline": "dominantBaseline",
+  dur: "dur",
+  dx: "dx",
+  dy: "dy",
+  edgemode: "edgeMode",
+  elevation: "elevation",
+  enablebackground: "enableBackground",
+  "enable-background": "enableBackground",
+  end: "end",
+  exponent: "exponent",
+  externalresourcesrequired: "externalResourcesRequired",
+  fill: "fill",
+  fillopacity: "fillOpacity",
+  "fill-opacity": "fillOpacity",
+  fillrule: "fillRule",
+  "fill-rule": "fillRule",
+  filter: "filter",
+  filterres: "filterRes",
+  filterunits: "filterUnits",
+  floodopacity: "floodOpacity",
+  "flood-opacity": "floodOpacity",
+  floodcolor: "floodColor",
+  "flood-color": "floodColor",
+  focusable: "focusable",
+  fontfamily: "fontFamily",
+  "font-family": "fontFamily",
+  fontsize: "fontSize",
+  "font-size": "fontSize",
+  fontsizeadjust: "fontSizeAdjust",
+  "font-size-adjust": "fontSizeAdjust",
+  fontstretch: "fontStretch",
+  "font-stretch": "fontStretch",
+  fontstyle: "fontStyle",
+  "font-style": "fontStyle",
+  fontvariant: "fontVariant",
+  "font-variant": "fontVariant",
+  fontweight: "fontWeight",
+  "font-weight": "fontWeight",
+  format: "format",
+  from: "from",
+  fx: "fx",
+  fy: "fy",
+  g1: "g1",
+  g2: "g2",
+  glyphname: "glyphName",
+  "glyph-name": "glyphName",
+  glyphorientationhorizontal: "glyphOrientationHorizontal",
+  "glyph-orientation-horizontal": "glyphOrientationHorizontal",
+  glyphorientationvertical: "glyphOrientationVertical",
+  "glyph-orientation-vertical": "glyphOrientationVertical",
+  glyphref: "glyphRef",
+  gradienttransform: "gradientTransform",
+  gradientunits: "gradientUnits",
+  hanging: "hanging",
+  horizadvx: "horizAdvX",
+  "horiz-adv-x": "horizAdvX",
+  horizoriginx: "horizOriginX",
+  "horiz-origin-x": "horizOriginX",
+  ideographic: "ideographic",
+  imagerendering: "imageRendering",
+  "image-rendering": "imageRendering",
+  in2: "in2",
+  in: "in",
+  inlist: "inlist",
+  intercept: "intercept",
+  k1: "k1",
+  k2: "k2",
+  k3: "k3",
+  k4: "k4",
+  k: "k",
+  kernelmatrix: "kernelMatrix",
+  kernelunitlength: "kernelUnitLength",
+  kerning: "kerning",
+  keypoints: "keyPoints",
+  keysplines: "keySplines",
+  keytimes: "keyTimes",
+  lengthadjust: "lengthAdjust",
+  letterspacing: "letterSpacing",
+  "letter-spacing": "letterSpacing",
+  lightingcolor: "lightingColor",
+  "lighting-color": "lightingColor",
+  limitingconeangle: "limitingConeAngle",
+  local: "local",
+  markerend: "markerEnd",
+  "marker-end": "markerEnd",
+  markerheight: "markerHeight",
+  markermid: "markerMid",
+  "marker-mid": "markerMid",
+  markerstart: "markerStart",
+  "marker-start": "markerStart",
+  markerunits: "markerUnits",
+  markerwidth: "markerWidth",
+  mask: "mask",
+  maskcontentunits: "maskContentUnits",
+  maskunits: "maskUnits",
+  mathematical: "mathematical",
+  mode: "mode",
+  numoctaves: "numOctaves",
+  offset: "offset",
+  opacity: "opacity",
+  operator: "operator",
+  order: "order",
+  orient: "orient",
+  orientation: "orientation",
+  origin: "origin",
+  overflow: "overflow",
+  overlineposition: "overlinePosition",
+  "overline-position": "overlinePosition",
+  overlinethickness: "overlineThickness",
+  "overline-thickness": "overlineThickness",
+  paintorder: "paintOrder",
+  "paint-order": "paintOrder",
+  panose1: "panose1",
+  "panose-1": "panose1",
+  pathlength: "pathLength",
+  patterncontentunits: "patternContentUnits",
+  patterntransform: "patternTransform",
+  patternunits: "patternUnits",
+  pointerevents: "pointerEvents",
+  "pointer-events": "pointerEvents",
+  points: "points",
+  pointsatx: "pointsAtX",
+  pointsaty: "pointsAtY",
+  pointsatz: "pointsAtZ",
+  popover: "popover",
+  popovertarget: "popoverTarget",
+  popovertargetaction: "popoverTargetAction",
+  prefix: "prefix",
+  preservealpha: "preserveAlpha",
+  preserveaspectratio: "preserveAspectRatio",
+  primitiveunits: "primitiveUnits",
+  property: "property",
+  r: "r",
+  radius: "radius",
+  refx: "refX",
+  refy: "refY",
+  renderingintent: "renderingIntent",
+  "rendering-intent": "renderingIntent",
+  repeatcount: "repeatCount",
+  repeatdur: "repeatDur",
+  requiredextensions: "requiredExtensions",
+  requiredfeatures: "requiredFeatures",
+  resource: "resource",
+  restart: "restart",
+  result: "result",
+  results: "results",
+  rotate: "rotate",
+  rx: "rx",
+  ry: "ry",
+  scale: "scale",
+  security: "security",
+  seed: "seed",
+  shaperendering: "shapeRendering",
+  "shape-rendering": "shapeRendering",
+  slope: "slope",
+  spacing: "spacing",
+  specularconstant: "specularConstant",
+  specularexponent: "specularExponent",
+  speed: "speed",
+  spreadmethod: "spreadMethod",
+  startoffset: "startOffset",
+  stddeviation: "stdDeviation",
+  stemh: "stemh",
+  stemv: "stemv",
+  stitchtiles: "stitchTiles",
+  stopcolor: "stopColor",
+  "stop-color": "stopColor",
+  stopopacity: "stopOpacity",
+  "stop-opacity": "stopOpacity",
+  strikethroughposition: "strikethroughPosition",
+  "strikethrough-position": "strikethroughPosition",
+  strikethroughthickness: "strikethroughThickness",
+  "strikethrough-thickness": "strikethroughThickness",
+  string: "string",
+  stroke: "stroke",
+  strokedasharray: "strokeDasharray",
+  "stroke-dasharray": "strokeDasharray",
+  strokedashoffset: "strokeDashoffset",
+  "stroke-dashoffset": "strokeDashoffset",
+  strokelinecap: "strokeLinecap",
+  "stroke-linecap": "strokeLinecap",
+  strokelinejoin: "strokeLinejoin",
+  "stroke-linejoin": "strokeLinejoin",
+  strokemiterlimit: "strokeMiterlimit",
+  "stroke-miterlimit": "strokeMiterlimit",
+  strokewidth: "strokeWidth",
+  "stroke-width": "strokeWidth",
+  strokeopacity: "strokeOpacity",
+  "stroke-opacity": "strokeOpacity",
+  suppresscontenteditablewarning: "suppressContentEditableWarning",
+  suppresshydrationwarning: "suppressHydrationWarning",
+  surfacescale: "surfaceScale",
+  systemlanguage: "systemLanguage",
+  tablevalues: "tableValues",
+  targetx: "targetX",
+  targety: "targetY",
+  textanchor: "textAnchor",
+  "text-anchor": "textAnchor",
+  textdecoration: "textDecoration",
+  "text-decoration": "textDecoration",
+  textlength: "textLength",
+  textrendering: "textRendering",
+  "text-rendering": "textRendering",
+  to: "to",
+  transform: "transform",
+  transformorigin: "transformOrigin",
+  "transform-origin": "transformOrigin",
+  typeof: "typeof",
+  u1: "u1",
+  u2: "u2",
+  underlineposition: "underlinePosition",
+  "underline-position": "underlinePosition",
+  underlinethickness: "underlineThickness",
+  "underline-thickness": "underlineThickness",
+  unicode: "unicode",
+  unicodebidi: "unicodeBidi",
+  "unicode-bidi": "unicodeBidi",
+  unicoderange: "unicodeRange",
+  "unicode-range": "unicodeRange",
+  unitsperem: "unitsPerEm",
+  "units-per-em": "unitsPerEm",
+  unselectable: "unselectable",
+  valphabetic: "vAlphabetic",
+  "v-alphabetic": "vAlphabetic",
+  values: "values",
+  vectoreffect: "vectorEffect",
+  "vector-effect": "vectorEffect",
+  version: "version",
+  vertadvy: "vertAdvY",
+  "vert-adv-y": "vertAdvY",
+  vertoriginx: "vertOriginX",
+  "vert-origin-x": "vertOriginX",
+  vertoriginy: "vertOriginY",
+  "vert-origin-y": "vertOriginY",
+  vhanging: "vHanging",
+  "v-hanging": "vHanging",
+  videographic: "vIdeographic",
+  "v-ideographic": "vIdeographic",
+  viewbox: "viewBox",
+  viewtarget: "viewTarget",
+  visibility: "visibility",
+  vmathematical: "vMathematical",
+  "v-mathematical": "vMathematical",
+  vocab: "vocab",
+  widths: "widths",
+  wordspacing: "wordSpacing",
+  "word-spacing": "wordSpacing",
+  writingmode: "writingMode",
+  "writing-mode": "writingMode",
+  x1: "x1",
+  x2: "x2",
+  x: "x",
+  xchannelselector: "xChannelSelector",
+  xheight: "xHeight",
+  "x-height": "xHeight",
+  xlinkactuate: "xlinkActuate",
+  "xlink:actuate": "xlinkActuate",
+  xlinkarcrole: "xlinkArcrole",
+  "xlink:arcrole": "xlinkArcrole",
+  xlinkhref: "xlinkHref",
+  "xlink:href": "xlinkHref",
+  xlinkrole: "xlinkRole",
+  "xlink:role": "xlinkRole",
+  xlinkshow: "xlinkShow",
+  "xlink:show": "xlinkShow",
+  xlinktitle: "xlinkTitle",
+  "xlink:title": "xlinkTitle",
+  xlinktype: "xlinkType",
+  "xlink:type": "xlinkType",
+  xmlbase: "xmlBase",
+  "xml:base": "xmlBase",
+  xmllang: "xmlLang",
+  "xml:lang": "xmlLang",
+  xmlns: "xmlns",
+  "xml:space": "xmlSpace",
+  xmlnsxlink: "xmlnsXlink",
+  "xmlns:xlink": "xmlnsXlink",
+  xmlspace: "xmlSpace",
+  y1: "y1",
+  y2: "y2",
+  y: "y",
+  ychannelselector: "yChannelSelector",
+  z: "z",
+  zoomandpan: "zoomAndPan"
+};
 var generateAction = ({
   scope,
   prop,
@@ -3704,7 +4256,11 @@ var generateJsxElement = ({
   const index = indexesWithinAncestors.get(instance.id);
   if (index !== void 0) {
     generatedProps += `
-${indexAttribute}="${index}"`;
+${indexProperty}="${index}"`;
+  }
+  if (instance.tag !== void 0 && instance.component !== elementComponent) {
+    generatedProps += `
+${tagProperty}=${JSON.stringify(instance.tag)}`;
   }
   let conditionValue;
   let collectionDataValue;
@@ -3723,6 +4279,10 @@ ${indexAttribute}="${index}"`;
     if (isAttributeNameSafe(prop.name) === false) {
       continue;
     }
+    let name2 = prop.name;
+    if (instance.component === elementComponent) {
+      name2 = standardAttributesToReactProps[prop.name] ?? prop.name;
+    }
     if (prop.name === showAttribute) {
       if (propValue === "true") {
         continue;
@@ -3742,13 +4302,13 @@ ${indexAttribute}="${index}"`;
       }
       continue;
     }
-    if (prop.name === "className" && propValue !== void 0) {
+    if (name2 === "className" && propValue !== void 0) {
       classNameValue = propValue;
       continue;
     }
     if (propValue !== void 0) {
       generatedProps += `
-${prop.name}={${propValue}}`;
+${name2}={${propValue}}`;
     }
   }
   const classMapArray = classesMap == null ? void 0 : classesMap.get(instance.id);
@@ -3782,6 +4342,18 @@ ${prop.name}={${propValue}}`;
 `;
   } else if (instance.component === blockComponent) {
     generatedElement += children;
+  } else if (instance.component === elementComponent) {
+    const tagName = instance.tag ?? "div";
+    if (instance.children.length === 0) {
+      generatedElement += `<${tagName}${generatedProps} />
+`;
+    } else {
+      generatedElement += `<${tagName}${generatedProps}>
+`;
+      generatedElement += children;
+      generatedElement += `</${tagName}>
+`;
+    }
   } else {
     const [_namespace, shortName] = parseComponentName(instance.component);
     const componentVariable = scope.getName(instance.component, shortName);
@@ -4109,25 +4681,29 @@ const e$4 = {
     type: "boolean"
   }
 };
-const i$4 = {
-  div: [
-    {
-      property: "display",
-      value: { type: "keyword", value: "contents" }
-    },
-    {
-      property: "white-space-collapse",
-      value: { type: "keyword", value: "collapse" }
-    }
-  ]
-}, a$c = {
+const r$c = {
   category: "general",
-  type: "embed",
+  type: "container",
   label: "HTML Embed",
   description: "Used to add HTML code to the page, such as an SVG or script.",
   icon: EmbedIcon,
-  presetStyle: i$4,
-  order: 2
+  order: 2,
+  contentModel: {
+    category: "instance",
+    children: [descendantComponent]
+  },
+  presetStyle: {
+    div: [
+      {
+        property: "display",
+        value: { type: "keyword", value: "contents" }
+      },
+      {
+        property: "white-space-collapse",
+        value: { type: "keyword", value: "collapse" }
+      }
+    ]
+  }
 };
 ({
   props: {
@@ -4150,9 +4726,13 @@ const i$4 = {
   },
   initialProps: ["className", "clientOnly", "executeScriptOnCanvas"]
 });
-const t$1 = {
-  type: "embed",
+const a$e = {
+  type: "container",
   icon: MarkdownEmbedIcon,
+  contentModel: {
+    category: "instance",
+    children: [descendantComponent]
+  },
   presetStyle: {
     div: [
       {
@@ -4204,13 +4784,13 @@ var h3 = div;
 var h4 = div;
 var h5 = div;
 var h6 = div;
-var i$3 = div;
+var i$1 = div;
 var img = div;
-var a$b = div;
+var a$d = div;
 var li = div;
 var ul = div;
 var ol = div;
-var p$a = div;
+var p$9 = div;
 var span = div;
 var body = [
   { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
@@ -4521,7 +5101,7 @@ var button = [
   { property: "text-transform", value: { type: "keyword", value: "none" } }
 ];
 var select = button;
-const a$a = {
+const a$c = {
   body: [
     ...body,
     {
@@ -4533,82 +5113,82 @@ const a$a = {
       value: { type: "keyword", value: "grayscale" }
     }
   ]
-}, n$9 = {
+}, n$6 = {
   type: "container",
   icon: BodyIcon,
   states: defaultStates,
-  presetStyle: a$a
-};
-const g$3 = {
-  div,
-  address,
-  article,
-  aside,
-  figure,
-  footer,
-  header,
-  main: main$1,
-  nav,
-  section
-}, v$2 = {
+  presetStyle: a$c
+};
+const v$2 = {
   category: "general",
   type: "container",
   description: "A container for content. By default this is a Div, but the tag can be changed in settings.",
   icon: BoxIcon,
   states: defaultStates,
-  presetStyle: g$3,
+  presetStyle: {
+    div,
+    address,
+    article,
+    aside,
+    figure,
+    footer,
+    header,
+    main: main$1,
+    nav,
+    section
+  },
   order: 0
 };
-const r$d = {
-  div: [
-    ...div,
-    {
-      property: "min-height",
-      value: { type: "unit", unit: "em", value: 1 }
-    }
-  ]
-}, n$8 = {
+const s$6 = {
   type: "container",
   icon: TextIcon,
   states: defaultStates,
-  presetStyle: r$d
-};
-const n$7 = {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6
-}, f$1 = {
+  presetStyle: {
+    div: [
+      ...div,
+      {
+        property: "min-height",
+        value: { type: "unit", unit: "em", value: 1 }
+      }
+    ]
+  }
+};
+const d$6 = {
   type: "container",
   placeholder: "Heading",
   icon: HeadingIcon,
   states: defaultStates,
-  presetStyle: n$7
+  presetStyle: {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6
+  }
 };
-const p$9 = {
-  p: p$a
-}, n$6 = {
+const p$8 = {
+  p: p$9
+}, n$5 = {
   type: "container",
   placeholder: "Paragraph",
   icon: TextAlignLeftIcon,
   states: defaultStates,
-  presetStyle: p$9
+  presetStyle: p$8
 };
-const a$9 = {
+const a$b = {
   a: [
-    ...a$b,
+    ...a$d,
     {
       property: "display",
       value: { type: "keyword", value: "inline-block" }
     }
   ]
-}, n$5 = {
+}, n$4 = {
   type: "container",
   placeholder: "Link",
   icon: LinkIcon,
-  presetStyle: a$9,
+  presetStyle: a$b,
   states: [
     ...defaultStates,
     {
@@ -4622,46 +5202,46 @@ const a$9 = {
     }
   ]
 };
-const a$8 = {
-  ...n$5,
+const a$a = {
+  ...n$4,
   type: "rich-text-child"
 };
-const s$3 = {
+const s$5 = {
   span
-}, c$7 = {
+}, c$6 = {
   type: "rich-text-child",
   label: "Text",
   icon: PaintBrushIcon,
   states: defaultStates,
-  presetStyle: s$3
+  presetStyle: s$5
 };
-const p$8 = {
+const p$7 = {
   b: b$8
 }, l$6 = {
   type: "rich-text-child",
   label: "Bold Text",
   icon: BoldIcon,
   states: defaultStates,
-  presetStyle: p$8
+  presetStyle: p$7
 };
-const r$c = {
+const r$b = {
   i: [
-    ...i$3,
+    ...i$1,
     {
       property: "font-style",
       value: { type: "keyword", value: "italic" }
     }
   ]
-}, c$6 = {
+}, c$5 = {
   type: "rich-text-child",
   label: "Italic Text",
   icon: TextItalicIcon,
   states: defaultStates,
-  presetStyle: r$c
+  presetStyle: r$b
 };
 const e$3 = {
   sup
-}, a$7 = {
+}, a$9 = {
   type: "rich-text-child",
   label: "Superscript Text",
   icon: SuperscriptIcon,
@@ -4670,7 +5250,7 @@ const e$3 = {
 };
 const e$2 = {
   sub
-}, a$6 = {
+}, a$8 = {
   type: "rich-text-child",
   label: "Subscript Text",
   icon: SubscriptIcon,
@@ -4679,7 +5259,7 @@ const e$2 = {
 };
 const l$5 = {
   button
-}, p$7 = {
+}, p$6 = {
   icon: ButtonElementIcon,
   type: "container",
   presetStyle: l$5,
@@ -4689,7 +5269,7 @@ const l$5 = {
     { selector: ":enabled", label: "Enabled" }
   ]
 };
-const r$b = {
+const r$a = {
   input: [
     ...input,
     {
@@ -4697,13 +5277,13 @@ const r$b = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, c$5 = {
+}, c$4 = {
   category: "forms",
   type: "control",
   label: "Text Input",
   description: "A single-line text input for collecting string data from your users.",
   icon: FormTextFieldIcon,
-  presetStyle: r$b,
+  presetStyle: r$a,
   order: 3,
   states: [
     ...defaultStates,
@@ -4719,7 +5299,7 @@ const r$b = {
     //{ selector: ":read-write", label: "Read Write" },
   ]
 };
-const c$4 = {
+const c$3 = {
   label: "Webhook Form",
   icon: WebhookFormIcon,
   type: "container",
@@ -4731,22 +5311,22 @@ const c$4 = {
     { selector: "[data-state=success]", label: "Success" }
   ]
 };
-const s$2 = {
+const s$4 = {
   form: [
     ...form,
     { property: "min-height", value: { type: "unit", unit: "px", value: 20 } }
   ]
-}, n$4 = {
+}, n$3 = {
   category: "forms",
   type: "container",
   label: "Form",
   description: "Create filters, surveys, searches and more.",
   icon: FormIcon,
   states: defaultStates,
-  presetStyle: s$2,
+  presetStyle: s$4,
   order: 0
 };
-const a$5 = {
+const a$7 = {
   img: [
     ...img,
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
@@ -4774,10 +5354,10 @@ const a$5 = {
   description: "Add an image asset to the page. Webstudio automatically converts images to WebP or AVIF format and makes them responsive for best performance.",
   icon: ImageIcon,
   states: defaultStates,
-  presetStyle: a$5,
+  presetStyle: a$7,
   order: 0
 };
-const r$a = {
+const r$9 = {
   blockquote: [
     {
       property: "margin-top",
@@ -4824,14 +5404,14 @@ const r$a = {
       value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
     }
   ]
-}, i$2 = {
+}, i = {
   type: "container",
   placeholder: "Blockquote",
   icon: BlockquoteIcon,
   states: defaultStates,
-  presetStyle: r$a
+  presetStyle: r$9
 };
-const a$4 = {
+const a$6 = {
   ol: [
     ...ol,
     {
@@ -4866,9 +5446,9 @@ const a$4 = {
   type: "container",
   icon: ListIcon,
   states: defaultStates,
-  presetStyle: a$4
+  presetStyle: a$6
 };
-const a$3 = {
+const a$5 = {
   type: "container",
   placeholder: "List item",
   icon: ListItemIcon,
@@ -4877,7 +5457,7 @@ const a$3 = {
     li
   }
 };
-const p$6 = {
+const p$5 = {
   hr: [
     ...hr,
     {
@@ -4905,16 +5485,16 @@ const p$6 = {
       value: { type: "keyword", value: "none" }
     }
   ]
-}, n$3 = {
+}, n$2 = {
   category: "general",
   type: "embed",
   description: "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
   icon: MinusIcon,
   states: defaultStates,
-  presetStyle: p$6,
+  presetStyle: p$5,
   order: 3
 };
-const p$5 = {
+const p$4 = {
   code: [
     ...code,
     {
@@ -4948,10 +5528,10 @@ const p$5 = {
   description: "Use this component when you want to display code as text on the page.",
   icon: BracesIcon,
   states: defaultStates,
-  presetStyle: p$5,
+  presetStyle: p$4,
   order: 5
 };
-const a$2 = {
+const a$4 = {
   label: [
     ...label,
     { property: "display", value: { type: "keyword", value: "block" } }
@@ -4961,7 +5541,7 @@ const a$2 = {
   label: "Input Label",
   icon: LabelIcon,
   states: defaultStates,
-  presetStyle: a$2
+  presetStyle: a$4
 };
 const l$3 = {
   textarea: [
@@ -4973,7 +5553,7 @@ const l$3 = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, c$3 = {
+}, c$2 = {
   category: "forms",
   type: "control",
   label: "Text Area",
@@ -4995,7 +5575,7 @@ const l$3 = {
     //{ selector: ":read-write", label: "Read Write" },
   ]
 };
-const a$1 = {
+const a$3 = {
   input: [
     ...radio,
     {
@@ -5003,11 +5583,11 @@ const a$1 = {
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, s$1 = {
+}, s$3 = {
   type: "control",
   label: "Radio",
   icon: RadioCheckedIcon,
-  presetStyle: a$1,
+  presetStyle: a$3,
   states: [
     ...defaultStates,
     { selector: ":checked", label: "Checked" },
@@ -5043,72 +5623,76 @@ const o$3 = {
     { selector: ":read-write", label: "Read Write" }
   ]
 };
-const r$9 = {
-  div
-}, c$2 = {
+const m$2 = {
   type: "container",
   icon: VimeoIcon,
   states: defaultStates,
-  presetStyle: r$9,
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link", "Heading"] }
+  contentModel: {
+    category: "instance",
+    children: [
+      "instance",
+      "VimeoSpinner",
+      "VimeoPlayButton",
+      "VimeoPreviewImage"
+    ]
+  },
+  presetStyle: {
+    div
   }
 };
-const i$1 = {
-  div
-}, c$1 = {
+const p$3 = {
   type: "container",
   icon: YoutubeIcon,
   states: defaultStates,
-  presetStyle: i$1,
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link", "Heading"] }
+  contentModel: {
+    category: "instance",
+    children: [
+      "instance",
+      "VimeoSpinner",
+      "VimeoPlayButton",
+      "VimeoPreviewImage"
+    ]
+  },
+  presetStyle: {
+    div
   }
 };
-const i = {
+const a$2 = {
   ...l$4,
   category: "hidden",
   label: "Preview Image",
-  constraints: {
-    relation: "ancestor",
-    component: { $in: ["Vimeo", "YouTube"] }
+  contentModel: {
+    category: "none",
+    children: ["empty"]
   }
 };
-const r$8 = {
-  button
-}, p$4 = {
+const s$2 = {
   category: "hidden",
   type: "container",
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $in: ["Vimeo", "YouTube"] }
-    },
-    {
-      relation: "ancestor",
-      component: { $neq: "Button" }
-    }
-  ],
   label: "Play Button",
   icon: ButtonElementIcon,
-  presetStyle: r$8,
-  states: defaultStates
+  states: defaultStates,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: {
+    button
+  }
 };
-const n$2 = {
-  div
-}, m$2 = {
+const s$1 = {
   type: "container",
-  constraints: {
-    relation: "ancestor",
-    component: { $in: ["Vimeo", "YouTube"] }
-  },
   icon: BoxIcon,
   states: defaultStates,
-  presetStyle: n$2,
   category: "hidden",
-  label: "Spinner"
+  label: "Spinner",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: {
+    div
+  }
 };
 const e$1 = {
   category: "xml",
@@ -5117,14 +5701,14 @@ const e$1 = {
   icon: XmlIcon,
   description: "XML Node"
 };
-const a = {
+const a$1 = {
   category: "xml",
   type: "container",
   description: "Converts machine-readable date and time to ISO format.",
   icon: CalendarIcon,
   order: 7
 };
-const r$7 = {
+const r$8 = {
   time
 }, s = {
   category: "localization",
@@ -5132,9 +5716,9 @@ const r$7 = {
   description: "Converts machine-readable date and time to a human-readable format.",
   icon: CalendarIcon,
   states: defaultStates,
-  presetStyle: r$7
+  presetStyle: r$8
 };
-const r$6 = {
+const r$7 = {
   select: [
     ...select,
     {
@@ -5142,10 +5726,10 @@ const r$6 = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, c = {
+}, c$1 = {
   type: "container",
   icon: SelectIcon,
-  presetStyle: r$6,
+  presetStyle: r$7,
   states: [
     ...defaultStates,
     { selector: "::placeholder", label: "Placeholder" },
@@ -5169,7 +5753,7 @@ const l$2 = {
       }
     }
   ]
-}, r$5 = {
+}, r$6 = {
   category: "hidden",
   type: "control",
   description: "An item within a drop-down menu that users can select as their chosen value.",
@@ -5186,94 +5770,101 @@ const l$2 = {
     { selector: ":disabled", label: "Disabled" }
   ]
 };
-const r$4 = {
+const r$5 = {
   icon: HeaderIcon,
   type: "container",
   description: "Inserts children into the head of the document",
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $nin: ["HeadSlot"] }
-    },
-    {
-      relation: "child",
-      component: { $in: ["HeadLink", "HeadMeta", "HeadTitle"] }
-    }
-  ]
+  contentModel: {
+    category: "instance",
+    children: ["HeadLink", "HeadMeta", "HeadTitle"]
+  }
 };
-const p$3 = {
+const p$2 = {
   category: "hidden",
   icon: ResourceIcon,
   type: "embed",
-  constraints: {
-    relation: "parent",
-    component: { $eq: "HeadSlot" }
+  contentModel: {
+    category: "none",
+    children: ["empty"]
   }
 };
-const p$2 = {
+const p$1 = {
   category: "hidden",
   icon: WindowInfoIcon,
   type: "embed",
-  constraints: {
-    relation: "parent",
-    component: { $eq: "HeadSlot" }
+  contentModel: {
+    category: "none",
+    children: ["empty"]
   }
 };
-const p$1 = {
+const c = {
   category: "hidden",
   icon: WindowTitleIcon,
   type: "container",
-  constraints: {
-    relation: "parent",
-    component: { $eq: "HeadSlot" }
+  contentModel: {
+    category: "none",
+    children: ["text"]
+  }
+};
+const r$4 = {
+  type: "control",
+  icon: VideoIcon,
+  presetStyle: {
+    video: [
+      {
+        property: "max-width",
+        value: { type: "unit", unit: "%", value: 100 }
+      }
+    ]
   }
 };
 const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Blockquote: i$2,
-  Body: n$9,
+  Blockquote: i,
+  Body: n$6,
   Bold: l$6,
   Box: v$2,
-  Button: p$7,
+  Button: p$6,
   Checkbox: d$3,
   CodeText: d$4,
-  Form: c$4,
+  Form: c$3,
   Fragment: o$4,
-  HeadLink: p$3,
-  HeadMeta: p$2,
-  HeadSlot: r$4,
-  HeadTitle: p$1,
-  Heading: f$1,
-  HtmlEmbed: a$c,
+  HeadLink: p$2,
+  HeadMeta: p$1,
+  HeadSlot: r$5,
+  HeadTitle: c,
+  Heading: d$6,
+  HtmlEmbed: r$c,
   Image: l$4,
-  Input: c$5,
-  Italic: c$6,
+  Input: c$4,
+  Italic: c$5,
   Label: m$3,
-  Link: n$5,
+  Link: n$4,
   List: d$5,
-  ListItem: a$3,
-  MarkdownEmbed: t$1,
-  Option: r$5,
-  Paragraph: n$6,
-  RadioButton: s$1,
-  RemixForm: n$4,
-  RichTextLink: a$8,
-  Select: c,
-  Separator: n$3,
+  ListItem: a$5,
+  MarkdownEmbed: a$e,
+  Option: r$6,
+  Paragraph: n$5,
+  RadioButton: s$3,
+  RemixForm: n$3,
+  RichTextLink: a$a,
+  Select: c$1,
+  Separator: n$2,
   Slot: e$5,
-  Span: c$7,
-  Subscript: a$6,
-  Superscript: a$7,
-  Text: n$8,
-  Textarea: c$3,
+  Span: c$6,
+  Subscript: a$8,
+  Superscript: a$9,
+  Text: s$6,
+  Textarea: c$2,
   Time: s,
-  Vimeo: c$2,
-  VimeoPlayButton: p$4,
-  VimeoPreviewImage: i,
-  VimeoSpinner: m$2,
+  Video: r$4,
+  Vimeo: m$2,
+  VimeoPlayButton: s$2,
+  VimeoPreviewImage: a$2,
+  VimeoSpinner: s$1,
   XmlNode: e$1,
-  XmlTime: a,
-  YouTube: c$1
+  XmlTime: a$1,
+  YouTube: p$3
 }, Symbol.toStringTag, { value: "Module" }));
 const o$2 = {
   category: "animations",
@@ -5327,19 +5918,32 @@ const r$1 = {
     }
   ]
 };
+const a = {
+  type: "container",
+  icon: Youtube1cIcon,
+  label: "Video Animation",
+  constraints: [
+    { relation: "parent", component: { $eq: r$3.AnimateChildren } },
+    {
+      relation: "child",
+      text: false
+    }
+  ]
+};
 const animationComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   AnimateChildren: o$2,
   AnimateText: r$2,
-  StaggerAnimation: r$1
+  StaggerAnimation: r$1,
+  VideoAnimation: a
 }, Symbol.toStringTag, { value: "Module" }));
 const remixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Body: n$9,
-  Form: c$4,
-  Link: n$5,
-  RemixForm: n$4,
-  RichTextLink: a$8
+  Body: n$6,
+  Form: c$3,
+  Link: n$4,
+  RemixForm: n$3,
+  RichTextLink: a$a
 }, Symbol.toStringTag, { value: "Module" }));
 const r = (t2) => new Proxy(
   {},
@@ -5484,7 +6088,7 @@ const S$1 = {
 }, h$1 = {
   type: "container",
   presetStyle: {
-    p: p$a
+    p: p$9
   },
   icon: TextIcon,
   constraints: {
@@ -6213,11 +6817,11 @@ const createFramework$2 = async () => {
 };
 const reactRouterComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Body: n$9,
-  Form: c$4,
-  Link: n$5,
-  RemixForm: n$4,
-  RichTextLink: a$8
+  Body: n$6,
+  Form: c$3,
+  Link: n$4,
+  RemixForm: n$3,
+  RichTextLink: a$a
 }, Symbol.toStringTag, { value: "Module" }));
 const createFramework$1 = async () => {
   const routeTemplatesDir = join("app", "route-templates");
@@ -7037,7 +7641,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.210.0";
+const version = "0.213.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";
@@ -7085,15 +7689,15 @@ const dependencies = {
   zod: "^3.24.2"
 };
 const devDependencies = {
-  "@netlify/vite-plugin-react-router": "^1.0.0",
-  "@react-router/dev": "^7.4.0",
-  "@react-router/fs-routes": "^7.4.0",
-  "@remix-run/cloudflare": "^2.16.2",
-  "@remix-run/cloudflare-pages": "^2.16.2",
-  "@remix-run/dev": "^2.16.2",
-  "@remix-run/node": "^2.16.2",
-  "@remix-run/react": "^2.16.2",
-  "@remix-run/server-runtime": "^2.16.2",
+  "@netlify/vite-plugin-react-router": "^1.0.1",
+  "@react-router/dev": "^7.5.0",
+  "@react-router/fs-routes": "^7.5.0",
+  "@remix-run/cloudflare": "^2.16.4",
+  "@remix-run/cloudflare-pages": "^2.16.4",
+  "@remix-run/dev": "^2.16.4",
+  "@remix-run/node": "^2.16.4",
+  "@remix-run/react": "^2.16.4",
+  "@remix-run/server-runtime": "^2.16.4",
   "@types/react": "^18.2.70",
   "@types/react-dom": "^18.2.25",
   "@types/yargs": "^17.0.33",
@@ -7115,9 +7719,9 @@ const devDependencies = {
   prettier: "3.5.3",
   react: "18.3.0-canary-14898b6a9-20240318",
   "react-dom": "18.3.0-canary-14898b6a9-20240318",
-  "react-router": "^7.4.0",
+  "react-router": "^7.5.0",
   "ts-expect": "^1.3.0",
-  vike: "^0.4.227",
+  vike: "^0.4.228",
   vite: "^5.4.11",
   vitest: "^3.0.8",
   wrangler: "^3.63.2"