webstudio 0.216.0 → 0.218.0

package/lib/cli.js

@@ -28,9 +28,8 @@ import { parseExpressionAt } from "acorn";
 import { simple } from "acorn-walk";
 import reservedIdentifiers from "reserved-identifiers";
 import { kebabCase, camelCase } from "change-case";
-import "nanoid";
 import { parseFragment, defaultTreeAdapter } from "parse5";
-import { x as x$4 } from "tinyexec";
+import { x as x$3 } from "tinyexec";
 import makeCLI from "yargs";
 const GLOBAL_CONFIG_FOLDER = envPaths("webstudio").config;
 const GLOBAL_CONFIG_FILE_NAME = "webstudio-config.json";
@@ -1670,6 +1669,7 @@ var MinusIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0
 var NavigationMenuIcon = `<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 7v5.833c0 .645-.597 1.167-1.333 1.167H3.333C2.597 14 2 13.478 2 12.833V7"/><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.978 2.003H2.6a.6.6 0 0 0-.6.6v1.4h11.971v-1.4a.6.6 0 0 0-.6-.6h-2.393Z"/></svg>`;
 var OverlayIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="#D2D2D2" d="M13.444 1H2.556C1.696 1 1 1.696 1 2.556v10.888C1 14.304 1.696 15 2.556 15h10.888c.86 0 1.556-.696 1.556-1.556V2.556C15 1.696 14.304 1 13.444 1Z"/></svg>`;
 var PaintBrushIcon = `<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="m6.04 7.933 5.38-5.373a1.9 1.9 0 1 1 2.687 2.687l-5.374 5.386M4.713 9.96c-1.106 0-2 .9-2 2.013 0 .887-1.666 1.014-1.333 1.347.72.733 1.66 1.347 2.667 1.347 1.466 0 2.666-1.2 2.666-2.694a2.007 2.007 0 0 0-2-2.013Z"/></svg>`;
+var PlayIcon = `<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 2 9.333 6L4 14V2Z"/></svg>`;
 var PopoverIcon = `<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 6V4a1.334 1.334 0 0 0-1.333-1.333h-10A1.333 1.333 0 0 0 1.333 4v6.667c0 .733.6 1.333 1.334 1.333h2.666"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.333 8.667h-4C8.597 8.667 8 9.264 8 10v2c0 .736.597 1.333 1.333 1.333h4c.737 0 1.334-.597 1.334-1.333v-2c0-.736-.597-1.333-1.334-1.333Z"/></svg>`;
 var RadioCheckedIcon = `<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="M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13Z"/><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg>`;
 var RadioGroupIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="#000" stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M8.839 8a1.82 1.82 0 1 1-3.64 0 1.82 1.82 0 0 1 3.64 0Z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M7.019 13.027a5.027 5.027 0 1 0 0-10.054 5.027 5.027 0 0 0 0 10.054Z"/><path stroke="#000" stroke-linecap="round" d="M12.629 12.077v0a6.73 6.73 0 0 0-.337-8.565v0"/></svg>`;
@@ -1695,7 +1695,6 @@ var WebhookFormIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewB
 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 = {
@@ -1867,31 +1866,6 @@ var Instance = z.object({
   children: z.array(InstanceChild)
 });
 z.map(InstanceId, Instance);
-var MatcherRelation = z.union([
-  z.literal("ancestor"),
-  z.literal("parent"),
-  z.literal("self"),
-  z.literal("child"),
-  z.literal("descendant")
-]);
-var MatcherOperation = z.object({
-  $eq: z.string().optional(),
-  $neq: z.string().optional(),
-  $in: z.array(z.string()).optional(),
-  $nin: z.array(z.string()).optional()
-});
-var Matcher = z.object({
-  relation: MatcherRelation,
-  component: MatcherOperation.optional(),
-  tag: MatcherOperation.optional(),
-  text: z.literal(false).describe(
-    `
-      To disallow text editing on a container instance,
-      use: { relation: 'child', text: false }
-     `
-  ).optional()
-});
-var Matchers = z.union([Matcher, z.array(Matcher)]);
 var DataSourceId = z.string();
 var DataSourceVariableValue = z.union([
   z.object({
@@ -2495,91 +2469,6 @@ var PropMeta = z.union([
   TextContent,
   AnimationAction
 ]);
-var EmbedTemplateText = z.object({
-  type: z.literal("text"),
-  value: z.string(),
-  placeholder: z.boolean().optional()
-});
-var EmbedTemplateExpression = z.object({
-  type: z.literal("expression"),
-  value: z.string()
-});
-var EmbedTemplateVariable = z.object({
-  alias: z.optional(z.string()),
-  initialValue: z.unknown()
-});
-var EmbedTemplateProp = z.union([
-  z.object({
-    type: z.literal("number"),
-    name: z.string(),
-    value: z.number()
-  }),
-  z.object({
-    type: z.literal("string"),
-    name: z.string(),
-    value: z.string()
-  }),
-  z.object({
-    type: z.literal("boolean"),
-    name: z.string(),
-    value: z.boolean()
-  }),
-  z.object({
-    type: z.literal("string[]"),
-    name: z.string(),
-    value: z.array(z.string())
-  }),
-  z.object({
-    type: z.literal("json"),
-    name: z.string(),
-    value: z.unknown()
-  }),
-  z.object({
-    type: z.literal("expression"),
-    name: z.string(),
-    code: z.string()
-  }),
-  z.object({
-    type: z.literal("parameter"),
-    name: z.string(),
-    variableName: z.string(),
-    variableAlias: z.optional(z.string())
-  }),
-  z.object({
-    type: z.literal("action"),
-    name: z.string(),
-    value: z.array(
-      z.object({
-        type: z.literal("execute"),
-        args: z.optional(z.array(z.string())),
-        code: z.string()
-      })
-    )
-  })
-]);
-var EmbedTemplateStyleDeclRaw = z.object({
-  // State selector, e.g. :hover
-  state: z.optional(z.string()),
-  property: z.string(),
-  value: StyleValue
-});
-var EmbedTemplateStyleDecl = EmbedTemplateStyleDeclRaw;
-var EmbedTemplateInstance = z.lazy(
-  () => z.object({
-    type: z.literal("instance"),
-    component: z.string(),
-    label: z.optional(z.string()),
-    variables: z.optional(z.record(z.string(), EmbedTemplateVariable)),
-    props: z.optional(z.array(EmbedTemplateProp)),
-    styles: z.optional(z.array(EmbedTemplateStyleDecl)),
-    children: WsEmbedTemplate
-  })
-);
-var WsEmbedTemplate = z.lazy(
-  () => z.array(
-    z.union([EmbedTemplateInstance, EmbedTemplateText, EmbedTemplateExpression])
-  )
-);
 var PresetStyleDecl = z.object({
   // State selector, e.g. :hover
   state: z.optional(z.string()),
@@ -2617,6 +2506,7 @@ var defaultStates = [
   { selector: ":focus-visible", label: "Focus Visible" },
   { selector: ":focus-within", label: "Focus Within" }
 ];
+var ComponentContent = z.string();
 var ContentModel = z.object({
   /*
    * instance - accepted by any parent with "instance" in children categories
@@ -2624,23 +2514,21 @@ var ContentModel = z.object({
    */
   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
-   * ComponentName - accept specific components with none category
+   * enforce direct children of category or components
+   */
+  children: z.array(ComponentContent),
+  /**
+   * enforce descendants of category or components
    */
-  children: z.array(z.string())
+  descendants: z.array(ComponentContent).optional()
 });
 z.object({
   category: z.enum(componentCategories).optional(),
-  // container - can accept other components with dnd or be edited as text              ..
-  type: z.enum(["container"]).optional(),
   /**
    * a property used as textual placeholder when no content specified while in builder
    * also signals to not insert components inside unless dropped explicitly
    */
   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
@@ -2719,7 +2607,6 @@ var blockMeta = {
   contentModel: {
     category: "instance",
     children: [blockTemplateComponent, "instance"]
-    // @todo prevent deleting block template
   }
 };
 var coreMetas = {
@@ -4166,7 +4053,9 @@ var standardAttributesToReactProps = {
   y: "y",
   ychannelselector: "yChannelSelector",
   z: "z",
-  zoomandpan: "zoomAndPan"
+  zoomandpan: "zoomAndPan",
+  // added by us
+  dirname: "dirName"
 };
 var generateAction = ({
   scope,
@@ -4678,18 +4567,16 @@ const htmlToJsx = (html2) => {
   }
   return result;
 };
-const e$5 = {
+const e$3 = {
   category: "general",
-  type: "container",
   description: "Slot is a container for content that you want to reference across the project. Changes made to a Slot's children will be reflected in all other instances of that Slot.",
   icon: SlotComponentIcon,
   order: 5
 };
-const o$5 = {
-  type: "container",
+const o$2 = {
   icon: ""
 };
-const e$4 = {
+const e$2 = {
   className: { required: false, control: "text", type: "string" },
   clientOnly: { required: false, control: "boolean", type: "boolean" },
   code: { required: true, control: "text", type: "string" },
@@ -4699,9 +4586,8 @@ const e$4 = {
     type: "boolean"
   }
 };
-const r$8 = {
+const r$b = {
   category: "general",
-  type: "container",
   label: "HTML Embed",
   description: "Used to add HTML code to the page, such as an SVG or script.",
   icon: EmbedIcon,
@@ -4725,13 +4611,13 @@ const r$8 = {
 };
 ({
   props: {
-    ...e$4,
+    ...e$2,
     clientOnly: {
-      ...e$4.clientOnly,
+      ...e$2.clientOnly,
       description: "Activate it for any scripts that can mutate the DOM or introduce interactivity. This only affects the published site."
     },
     executeScriptOnCanvas: {
-      ...e$4.executeScriptOnCanvas,
+      ...e$2.executeScriptOnCanvas,
       label: "Run scripts on canvas",
       description: "Dangerously allow script execution on canvas without switching to preview mode. This only affects build mode, but may result in unwanted side effects inside builder!"
     },
@@ -4745,7 +4631,6 @@ const r$8 = {
   initialProps: ["className", "clientOnly", "executeScriptOnCanvas"]
 });
 const a$a = {
-  type: "container",
   icon: MarkdownEmbedIcon,
   contentModel: {
     category: "instance",
@@ -4802,13 +4687,13 @@ var h3 = div;
 var h4 = div;
 var h5 = div;
 var h6 = div;
-var i$3 = div;
+var i$7 = div;
 var img = div;
 var a$9 = div;
 var li = div;
 var ul = div;
 var ol = div;
-var p$d = div;
+var p$a = div;
 var span = div;
 var body = [
   { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
@@ -4863,7 +4748,7 @@ var hr = [
     value: { type: "unit", unit: "px", value: 1 }
   }
 ];
-var b$8 = [
+var b$7 = [
   {
     property: "font-weight",
     value: { type: "unit", unit: "number", value: 700 }
@@ -5132,14 +5017,12 @@ const a$8 = {
     }
   ]
 }, n$8 = {
-  type: "container",
   icon: BodyIcon,
   states: defaultStates,
   presetStyle: a$8
 };
-const v$2 = {
+const v$3 = {
   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,
@@ -5157,8 +5040,7 @@ const v$2 = {
   },
   order: 0
 };
-const s$7 = {
-  type: "container",
+const n$7 = {
   icon: TextIcon,
   states: defaultStates,
   presetStyle: {
@@ -5171,8 +5053,7 @@ const s$7 = {
     ]
   }
 };
-const d$5 = {
-  type: "container",
+const d$6 = {
   placeholder: "Heading",
   icon: HeadingIcon,
   states: defaultStates,
@@ -5185,14 +5066,13 @@ const d$5 = {
     h6
   }
 };
-const p$c = {
-  p: p$d
-}, n$7 = {
-  type: "container",
+const p$9 = {
+  p: p$a
+}, c$5 = {
   placeholder: "Paragraph",
   icon: TextAlignLeftIcon,
   states: defaultStates,
-  presetStyle: p$c
+  presetStyle: p$9
 };
 const a$7 = {
   a: [
@@ -5203,7 +5083,6 @@ const a$7 = {
     }
   ]
 }, n$6 = {
-  type: "container",
   placeholder: "Link",
   icon: LinkIcon,
   presetStyle: a$7,
@@ -5220,74 +5099,65 @@ const a$7 = {
     }
   ]
 };
-const o$4 = {
-  ...n$6,
-  type: "container"
-};
-const s$6 = {
+const p$8 = n$6;
+const e$1 = {
   span
 }, n$5 = {
-  type: "container",
   label: "Text",
   icon: PaintBrushIcon,
   states: defaultStates,
-  presetStyle: s$6
+  presetStyle: e$1
 };
-const p$b = {
-  b: b$8
-}, l$6 = {
-  type: "container",
+const s$5 = {
+  b: b$7
+}, l$5 = {
   label: "Bold Text",
   icon: BoldIcon,
   states: defaultStates,
-  presetStyle: p$b
+  presetStyle: s$5
 };
-const i$2 = {
+const i$6 = {
   i: [
-    ...i$3,
+    ...i$7,
     {
       property: "font-style",
       value: { type: "keyword", value: "italic" }
     }
   ]
-}, c$5 = {
-  type: "container",
+}, m$4 = {
   label: "Italic Text",
   icon: TextItalicIcon,
   states: defaultStates,
-  presetStyle: i$2
+  presetStyle: i$6
 };
-const e$3 = {
+const s$4 = {
   sup
 }, c$4 = {
-  type: "container",
   label: "Superscript Text",
   icon: SuperscriptIcon,
   states: defaultStates,
-  presetStyle: e$3
+  presetStyle: s$4
 };
-const e$2 = {
+const p$7 = {
   sub
 }, c$3 = {
-  type: "container",
   label: "Subscript Text",
   icon: SubscriptIcon,
   states: defaultStates,
-  presetStyle: e$2
+  presetStyle: p$7
 };
-const l$5 = {
+const l$4 = {
   button
-}, p$a = {
+}, m$3 = {
   icon: ButtonElementIcon,
-  type: "container",
-  presetStyle: l$5,
+  presetStyle: l$4,
   states: [
     ...defaultStates,
     { selector: ":disabled", label: "Disabled" },
     { selector: ":enabled", label: "Enabled" }
   ]
 };
-const r$7 = {
+const r$a = {
   input: [
     ...input,
     {
@@ -5300,7 +5170,7 @@ const r$7 = {
   label: "Text Input",
   description: "A single-line text input for collecting string data from your users.",
   icon: FormTextFieldIcon,
-  presetStyle: r$7,
+  presetStyle: r$a,
   order: 3,
   states: [
     ...defaultStates,
@@ -5319,7 +5189,6 @@ const r$7 = {
 const c$1 = {
   label: "Webhook Form",
   icon: WebhookFormIcon,
-  type: "container",
   presetStyle: {
     form
   },
@@ -5328,19 +5197,18 @@ const c$1 = {
     { selector: "[data-state=success]", label: "Success" }
   ]
 };
-const s$5 = {
+const s$3 = {
   form: [
     ...form,
     { property: "min-height", value: { type: "unit", unit: "px", value: 20 } }
   ]
 }, n$4 = {
   category: "forms",
-  type: "container",
   label: "Form",
   description: "Create filters, surveys, searches and more.",
   icon: FormIcon,
   states: defaultStates,
-  presetStyle: s$5,
+  presetStyle: s$3,
   order: 0
 };
 const a$6 = {
@@ -5365,7 +5233,7 @@ const a$6 = {
       value: { type: "keyword", value: "auto" }
     }
   ]
-}, l$4 = {
+}, l$3 = {
   category: "media",
   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,
@@ -5373,7 +5241,7 @@ const a$6 = {
   presetStyle: a$6,
   order: 0
 };
-const r$6 = {
+const r$9 = {
   blockquote: [
     {
       property: "margin-top",
@@ -5420,12 +5288,11 @@ const r$6 = {
       value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
     }
   ]
-}, i$1 = {
-  type: "container",
+}, i$5 = {
   placeholder: "Blockquote",
   icon: BlockquoteIcon,
   states: defaultStates,
-  presetStyle: r$6
+  presetStyle: r$9
 };
 const a$5 = {
   ol: [
@@ -5458,14 +5325,12 @@ const a$5 = {
       value: { type: "keyword", value: "40px" }
     }
   ]
-}, d$4 = {
-  type: "container",
+}, d$5 = {
   icon: ListIcon,
   states: defaultStates,
   presetStyle: a$5
 };
 const a$4 = {
-  type: "container",
   placeholder: "List item",
   icon: ListItemIcon,
   states: defaultStates,
@@ -5473,7 +5338,7 @@ const a$4 = {
     li
   }
 };
-const p$9 = {
+const p$6 = {
   hr: [
     ...hr,
     {
@@ -5506,10 +5371,10 @@ const p$9 = {
   description: "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
   icon: MinusIcon,
   states: defaultStates,
-  presetStyle: p$9,
+  presetStyle: p$6,
   order: 3
 };
-const p$8 = {
+const p$5 = {
   code: [
     ...code,
     {
@@ -5537,7 +5402,7 @@ const p$8 = {
       value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
     }
   ]
-}, i = {
+}, i$4 = {
   category: "general",
   description: "Use this component when you want to display code as text on the page.",
   icon: BracesIcon,
@@ -5546,22 +5411,21 @@ const p$8 = {
     children: []
   },
   states: defaultStates,
-  presetStyle: p$8,
+  presetStyle: p$5,
   order: 5
 };
-const a$3 = {
+const r$8 = {
   label: [
     ...label,
     { property: "display", value: { type: "keyword", value: "block" } }
   ]
-}, m$3 = {
-  type: "container",
+}, i$3 = {
   label: "Input Label",
   icon: LabelIcon,
   states: defaultStates,
-  presetStyle: a$3
+  presetStyle: r$8
 };
-const l$3 = {
+const l$2 = {
   textarea: [
     ...textarea,
     // resize doesn't work well while on canvas
@@ -5576,7 +5440,7 @@ const l$3 = {
   label: "Text Area",
   description: "A multi-line text input for collecting longer string data from your users.",
   icon: FormTextAreaIcon,
-  presetStyle: l$3,
+  presetStyle: l$2,
   order: 4,
   contentModel: {
     category: "instance",
@@ -5596,7 +5460,7 @@ const l$3 = {
     //{ selector: ":read-write", label: "Read Write" },
   ]
 };
-const a$2 = {
+const a$3 = {
   input: [
     ...radio,
     {
@@ -5604,10 +5468,10 @@ const a$2 = {
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, s$4 = {
+}, s$2 = {
   label: "Radio",
   icon: RadioCheckedIcon,
-  presetStyle: a$2,
+  presetStyle: a$3,
   states: [
     ...defaultStates,
     { selector: ":checked", label: "Checked" },
@@ -5620,7 +5484,7 @@ const a$2 = {
     //{ selector: ":read-write", label: "Read Write" },
   ]
 };
-const o$3 = {
+const o$1 = {
   input: [
     ...checkbox,
     {
@@ -5628,9 +5492,9 @@ const o$3 = {
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, d$3 = {
+}, d$4 = {
   icon: CheckboxCheckedIcon,
-  presetStyle: o$3,
+  presetStyle: o$1,
   states: [
     ...defaultStates,
     { selector: ":checked", label: "Checked" },
@@ -5643,41 +5507,31 @@ const o$3 = {
   ]
 };
 const m$2 = {
-  type: "container",
   icon: VimeoIcon,
   states: defaultStates,
   contentModel: {
     category: "instance",
-    children: [
-      "instance",
-      "VimeoSpinner",
-      "VimeoPlayButton",
-      "VimeoPreviewImage"
-    ]
+    children: ["instance"],
+    descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
   },
   presetStyle: {
     div
   }
 };
-const p$7 = {
-  type: "container",
+const p$4 = {
   icon: YoutubeIcon,
   states: defaultStates,
   contentModel: {
     category: "instance",
-    children: [
-      "instance",
-      "VimeoSpinner",
-      "VimeoPlayButton",
-      "VimeoPreviewImage"
-    ]
+    children: ["instance"],
+    descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
   },
   presetStyle: {
     div
   }
 };
-const p$6 = {
-  ...l$4,
+const p$3 = {
+  ...l$3,
   category: "hidden",
   label: "Preview Image",
   contentModel: {
@@ -5685,9 +5539,8 @@ const p$6 = {
     children: []
   }
 };
-const s$3 = {
+const m$1 = {
   category: "hidden",
-  type: "container",
   label: "Play Button",
   icon: ButtonElementIcon,
   states: defaultStates,
@@ -5699,8 +5552,7 @@ const s$3 = {
     button
   }
 };
-const s$2 = {
-  type: "container",
+const s$1 = {
   icon: BoxIcon,
   states: defaultStates,
   category: "hidden",
@@ -5713,31 +5565,28 @@ const s$2 = {
     div
   }
 };
-const e$1 = {
+const i$2 = {
   category: "xml",
   order: 6,
-  type: "container",
   icon: XmlIcon,
   description: "XML Node"
 };
-const a$1 = {
+const a$2 = {
   category: "xml",
-  type: "container",
   description: "Converts machine-readable date and time to ISO format.",
   icon: CalendarIcon,
   order: 7
 };
-const r$5 = {
+const r$7 = {
   time
-}, s$1 = {
+}, s = {
   category: "localization",
-  type: "container",
   description: "Converts machine-readable date and time to a human-readable format.",
   icon: CalendarIcon,
   states: defaultStates,
-  presetStyle: r$5
+  presetStyle: r$7
 };
-const r$4 = {
+const r$6 = {
   select: [
     ...select,
     {
@@ -5746,9 +5595,8 @@ const r$4 = {
     }
   ]
 }, c = {
-  type: "container",
   icon: SelectIcon,
-  presetStyle: r$4,
+  presetStyle: r$6,
   states: [
     ...defaultStates,
     { selector: "::placeholder", label: "Placeholder" },
@@ -5758,7 +5606,7 @@ const r$4 = {
     { selector: ":optional", label: "Optional" }
   ]
 };
-const l$2 = {
+const l$1 = {
   option: [
     {
       property: "background-color",
@@ -5772,11 +5620,11 @@ const l$2 = {
       }
     }
   ]
-}, r$3 = {
+}, r$5 = {
   category: "hidden",
   description: "An item within a drop-down menu that users can select as their chosen value.",
   icon: ItemIcon,
-  presetStyle: l$2,
+  presetStyle: l$1,
   states: [
     // Applies when option is being activated (clicked)
     { selector: ":active", label: "Active" },
@@ -5788,38 +5636,36 @@ const l$2 = {
     { selector: ":disabled", label: "Disabled" }
   ]
 };
-const r$2 = {
+const r$4 = {
   icon: HeaderIcon,
-  type: "container",
   description: "Inserts children into the head of the document",
   contentModel: {
     category: "instance",
     children: ["HeadLink", "HeadMeta", "HeadTitle"]
   }
 };
-const p$5 = {
+const p$2 = {
   icon: ResourceIcon,
   contentModel: {
     category: "none",
     children: []
   }
 };
-const p$4 = {
+const p$1 = {
   icon: WindowInfoIcon,
   contentModel: {
     category: "none",
     children: []
   }
 };
-const p$3 = {
+const r$3 = {
   icon: WindowTitleIcon,
-  type: "container",
   contentModel: {
     category: "none",
     children: ["text"]
   }
 };
-const p$2 = {
+const i$1 = {
   icon: VideoIcon,
   contentModel: {
     category: "instance",
@@ -5836,128 +5682,123 @@ const p$2 = {
 };
 const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Blockquote: i$1,
+  Blockquote: i$5,
   Body: n$8,
-  Bold: l$6,
-  Box: v$2,
-  Button: p$a,
-  Checkbox: d$3,
-  CodeText: i,
+  Bold: l$5,
+  Box: v$3,
+  Button: m$3,
+  Checkbox: d$4,
+  CodeText: i$4,
   Form: c$1,
-  Fragment: o$5,
-  HeadLink: p$5,
-  HeadMeta: p$4,
-  HeadSlot: r$2,
-  HeadTitle: p$3,
-  Heading: d$5,
-  HtmlEmbed: r$8,
-  Image: l$4,
+  Fragment: o$2,
+  HeadLink: p$2,
+  HeadMeta: p$1,
+  HeadSlot: r$4,
+  HeadTitle: r$3,
+  Heading: d$6,
+  HtmlEmbed: r$b,
+  Image: l$3,
   Input: c$2,
-  Italic: c$5,
-  Label: m$3,
+  Italic: m$4,
+  Label: i$3,
   Link: n$6,
-  List: d$4,
+  List: d$5,
   ListItem: a$4,
   MarkdownEmbed: a$a,
-  Option: r$3,
-  Paragraph: n$7,
-  RadioButton: s$4,
+  Option: r$5,
+  Paragraph: c$5,
+  RadioButton: s$2,
   RemixForm: n$4,
-  RichTextLink: o$4,
+  RichTextLink: p$8,
   Select: c,
   Separator: n$3,
-  Slot: e$5,
+  Slot: e$3,
   Span: n$5,
   Subscript: c$3,
   Superscript: c$4,
-  Text: s$7,
+  Text: n$7,
   Textarea: n$2,
-  Time: s$1,
-  Video: p$2,
+  Time: s,
+  Video: i$1,
   Vimeo: m$2,
-  VimeoPlayButton: s$3,
-  VimeoPreviewImage: p$6,
-  VimeoSpinner: s$2,
-  XmlNode: e$1,
-  XmlTime: a$1,
-  YouTube: p$7
+  VimeoPlayButton: m$1,
+  VimeoPreviewImage: p$3,
+  VimeoSpinner: s$1,
+  XmlNode: i$2,
+  XmlTime: a$2,
+  YouTube: p$4
 }, Symbol.toStringTag, { value: "Module" }));
-const o$2 = {
-  category: "animations",
-  type: "container",
-  description: "Animation Group component is designed to animate its children.",
-  icon: AnimationGroupIcon,
-  order: 5,
-  label: "Animation Group",
-  constraints: {
-    relation: "child",
-    text: false
-  }
-};
-const n$1 = (t2) => new Proxy(
+const n$1 = (t) => new Proxy(
   {},
   {
     get(o2, e2) {
-      return `${t2}${e2}`;
+      return `${t}${e2}`;
     }
   }
-), r$1 = n$1(
+), r$2 = n$1(
   "@webstudio-is/sdk-components-animation:"
 );
-const p$1 = {
+const a$1 = {
+  category: "animations",
+  description: "Animation Group component is designed to animate its children.",
+  icon: AnimationGroupIcon,
+  order: 0,
+  label: "Animation Group",
+  contentModel: {
+    category: "instance",
+    children: [
+      "instance",
+      r$2.AnimateText,
+      r$2.StaggerAnimation,
+      r$2.VideoAnimation
+    ]
+  }
+};
+const a = {
   category: "animations",
-  type: "container",
   description: "Text animation allows you to split text by char or by word to animate it.",
   icon: TextAnimationIcon,
-  order: 6,
+  order: 1,
   label: "Text Animation",
-  constraints: [
-    { relation: "parent", component: { $eq: r$1.AnimateChildren } },
-    {
-      relation: "child",
-      text: false
-    }
-  ],
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
   presetStyle: {
     div
   }
 };
-const s = {
+const r$1 = {
   category: "animations",
-  type: "container",
   description: "Stagger animation allows you to animate children elements with a sliding window.",
   icon: StaggerAnimationIcon,
-  order: 6,
+  order: 4,
   label: "Stagger Animation",
-  constraints: [
-    { relation: "parent", component: { $eq: r$1.AnimateChildren } },
-    {
-      relation: "child",
-      text: false
-    }
-  ],
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
   presetStyle: {
     div
   }
 };
-const a = {
-  type: "container",
-  icon: Youtube1cIcon,
+const p = {
+  icon: PlayIcon,
   label: "Video Animation",
-  constraints: [
-    { relation: "parent", component: { $eq: r$1.AnimateChildren } },
-    {
-      relation: "child",
-      text: false
-    }
-  ]
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: {
+    div
+  }
 };
 const animationComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  AnimateChildren: o$2,
-  AnimateText: p$1,
-  StaggerAnimation: s,
-  VideoAnimation: a
+  AnimateChildren: a$1,
+  AnimateText: a,
+  StaggerAnimation: r$1,
+  VideoAnimation: p
 }, Symbol.toStringTag, { value: "Module" }));
 const remixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
@@ -5965,62 +5806,54 @@ const remixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object
   Form: c$1,
   Link: n$6,
   RemixForm: n$4,
-  RichTextLink: o$4
+  RichTextLink: p$8
 }, Symbol.toStringTag, { value: "Module" }));
-const r = (t2) => new Proxy(
+const r = (t) => new Proxy(
   {},
   {
     get(o2, e2) {
-      return `${t2}${e2}`;
+      return `${t}${e2}`;
     }
   }
 ), n = r(
   "@webstudio-is/sdk-components-react-radix:"
 );
-const m$1 = {
-  type: "container",
-  constraints: [
-    {
-      relation: "descendant",
-      component: { $eq: n.CollapsibleTrigger }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: n.CollapsibleContent }
-    }
-  ],
+const g$2 = {
+  icon: CollapsibleIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [n.CollapsibleTrigger, n.CollapsibleContent]
+  },
   presetStyle: {
     div
-  },
-  icon: CollapsibleIcon
-}, b$7 = {
-  type: "container",
+  }
+}, b$6 = {
   icon: TriggerIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.Collapsible }
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
   }
-}, g$2 = {
-  type: "container",
+}, d$3 = {
+  icon: ContentIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
   presetStyle: {
     div
-  },
-  icon: ContentIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.Collapsible }
   }
 };
-const o$1 = (r2, t2, p2) => ({
+const o = (r2, t, p2) => ({
   property: r2,
-  value: { type: "unit", unit: p2, value: t2 }
-}), e = (r2, t2) => ({
+  value: { type: "unit", unit: p2, value: t }
+}), e = (r2, t) => ({
   property: r2,
-  value: { type: "keyword", value: t2 }
-}), d$2 = (r2, t2, p2, l2) => ({
+  value: { type: "keyword", value: t }
+}), d$2 = (r2, t, p2, l2) => ({
   property: r2,
-  value: { type: "rgb", alpha: 1, r: t2, g: p2, b: l2 }
-}), b$6 = [
+  value: { type: "rgb", alpha: 1, r: t, g: p2, b: l2 }
+}), b$5 = [
   {
     property: "background-color",
     value: { type: "keyword", value: "transparent" }
@@ -6029,10 +5862,10 @@ const o$1 = (r2, t2, p2) => ({
     property: "background-image",
     value: { type: "keyword", value: "none" }
   },
-  o$1("border-top-width", 0, "px"),
-  o$1("border-right-width", 0, "px"),
-  o$1("border-bottom-width", 0, "px"),
-  o$1("border-left-width", 0, "px"),
+  o("border-top-width", 0, "px"),
+  o("border-right-width", 0, "px"),
+  o("border-bottom-width", 0, "px"),
+  o("border-left-width", 0, "px"),
   e("border-top-style", "solid"),
   e("border-right-style", "solid"),
   e("border-bottom-style", "solid"),
@@ -6041,213 +5874,152 @@ const o$1 = (r2, t2, p2) => ({
   d$2("border-right-color", 226, 232, 240),
   d$2("border-bottom-color", 226, 232, 240),
   d$2("border-left-color", 226, 232, 240),
-  o$1("padding-top", 0, "px"),
-  o$1("padding-right", 0, "px"),
-  o$1("padding-bottom", 0, "px"),
-  o$1("padding-left", 0, "px")
+  o("padding-top", 0, "px"),
+  o("padding-right", 0, "px"),
+  o("padding-bottom", 0, "px"),
+  o("padding-left", 0, "px")
 ];
-const S$1 = {
-  type: "container",
+const O = {
   icon: TriggerIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.Dialog }
+  contentModel: {
+    category: "none",
+    children: ["instance"]
   }
-}, b$5 = {
-  type: "container",
+}, b$4 = {
+  icon: OverlayIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [n.DialogContent]
+  },
   presetStyle: {
     div
+  }
+}, B = {
+  icon: ContentIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [
+      n.DialogTitle,
+      n.DialogDescription,
+      n.DialogClose
+    ]
   },
-  icon: OverlayIcon,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $eq: n.Dialog }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: n.DialogContent }
-    }
-  ]
-}, x$3 = {
-  type: "container",
   presetStyle: {
     div
+  }
+}, E = {
+  icon: HeadingIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
   },
-  icon: ContentIcon,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $eq: n.DialogOverlay }
-    },
-    // often deleted by users
-    // though radix starts throwing warnings in console
-    /*
-    {
-      relation: "descendant",
-      component: { $eq: radix.DialogTitle },
-    },
-    {
-      relation: "descendant",
-      component: { $eq: radix.DialogDescription },
-    },
-    */
-    {
-      relation: "descendant",
-      component: { $eq: n.DialogClose }
-    }
-  ]
-}, B = {
-  type: "container",
   presetStyle: {
     h2
-  },
-  icon: HeadingIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.DialogContent }
   }
-}, h$1 = {
-  type: "container",
-  presetStyle: {
-    p: p$d
-  },
+}, H$1 = {
   icon: TextIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.DialogContent }
-  }
-}, E = {
-  type: "container",
-  presetStyle: {
-    button: [b$6, button].flat()
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
   },
-  states: defaultStates,
+  presetStyle: {
+    p: p$a
+  }
+}, R = {
   icon: ButtonElementIcon,
   label: "Close Button",
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.DialogContent }
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  states: defaultStates,
+  presetStyle: {
+    button: [b$5, button].flat()
   }
-}, H$1 = {
-  type: "container",
+}, j = {
   icon: DialogIcon,
-  constraints: [
-    {
-      relation: "descendant",
-      component: { $eq: n.DialogTrigger }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: n.DialogOverlay }
-    }
-  ]
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [n.DialogTrigger, n.DialogOverlay]
+  }
 };
-const v$1 = {
-  type: "container",
+const v$2 = {
   icon: TriggerIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.Popover }
+  contentModel: {
+    category: "none",
+    children: ["instance"]
   }
-}, g$1 = {
-  type: "container",
+}, d$1 = {
+  icon: ContentIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
   presetStyle: {
     div
-  },
-  icon: ContentIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.Popover }
   }
-}, l$1 = {
-  type: "container",
+}, l = {
   icon: PopoverIcon,
-  constraints: [
-    {
-      relation: "descendant",
-      component: { $eq: n.PopoverTrigger }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: n.PopoverContent }
-    }
-  ]
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [n.PopoverTrigger, n.PopoverContent]
+  }
 };
-const m = {
-  type: "container",
+const g$1 = {
   icon: TriggerIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.Tooltip }
+  contentModel: {
+    category: "none",
+    children: ["instance"]
   }
-}, g = {
-  type: "container",
+}, d = {
   icon: ContentIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
   presetStyle: {
     div
-  },
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.Tooltip }
   }
-}, d$1 = {
-  type: "container",
-  constraints: [
-    {
-      relation: "descendant",
-      component: { $eq: n.TooltipTrigger }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: n.TooltipContent }
-    }
-  ],
-  icon: TooltipIcon
+}, m = {
+  icon: TooltipIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [n.TooltipTrigger, n.TooltipContent]
+  }
 };
-const o = {
-  div
-}, C$3 = {
-  type: "container",
+const M = {
   icon: TabsIcon,
-  constraints: [
-    {
-      relation: "descendant",
-      component: { $eq: n.TabsTrigger }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: n.TabsList }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: n.TabsContent }
-    }
-  ],
-  presetStyle: o
-}, L = {
-  type: "container",
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [n.TabsList, n.TabsContent]
+  },
+  presetStyle: {
+    div
+  }
+}, x$2 = {
   icon: HeaderIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.Tabs }
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [n.TabsTrigger]
   },
-  presetStyle: o
-}, u = {
-  type: "container",
+  presetStyle: {
+    div
+  }
+}, C$2 = {
   icon: TriggerIcon,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $eq: n.TabsList }
-    },
-    {
-      relation: "ancestor",
-      component: { $neq: n.TabsTrigger }
-    }
-  ],
-  indexWithinAncestor: n.Tabs,
   label: "Tab Trigger",
+  indexWithinAncestor: n.Tabs,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
   states: [
     ...defaultStates,
     {
@@ -6257,73 +6029,57 @@ const o = {
     }
   ],
   presetStyle: {
-    button: [button, b$6].flat()
+    button: [button, b$5].flat()
   }
-}, x$2 = {
-  type: "container",
+}, S$2 = {
   label: "Tab Content",
   icon: ContentIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.Tabs }
-  },
   indexWithinAncestor: n.Tabs,
-  presetStyle: o
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  presetStyle: {
+    div
+  }
 };
-const p = {
-  label
-}, l = {
-  type: "container",
+const i = {
   icon: LabelIcon,
-  presetStyle: p,
-  states: defaultStates
+  states: defaultStates,
+  presetStyle: {
+    label
+  }
 };
-const t = {
-  div
-}, H = {
-  type: "container",
+const v$1 = {
   icon: AccordionIcon,
-  presetStyle: t,
-  constraints: [
-    {
-      relation: "descendant",
-      component: { $eq: n.AccordionItem }
-    }
-  ]
-}, C$2 = {
-  type: "container",
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [n.AccordionItem]
+  },
+  presetStyle: {
+    div
+  }
+}, x$1 = {
   label: "Item",
   icon: ItemIcon,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $eq: n.Accordion }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: n.AccordionHeader }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: n.AccordionContent }
-    }
-  ],
   indexWithinAncestor: n.Accordion,
-  presetStyle: t
-}, T = {
-  type: "container",
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [n.AccordionHeader, n.AccordionContent]
+  },
+  presetStyle: {
+    div
+  }
+}, C$1 = {
   label: "Item Header",
   icon: HeaderIcon,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $eq: n.AccordionItem }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: n.AccordionTrigger }
-    }
-  ],
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [n.AccordionTrigger]
+  },
   presetStyle: {
     h3: [
       ...h3,
@@ -6337,13 +6093,12 @@ const t = {
       }
     ]
   }
-}, x$1 = {
-  type: "container",
+}, H = {
   label: "Item Trigger",
   icon: TriggerIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.AccordionHeader }
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
   },
   states: [
     ...defaultStates,
@@ -6354,233 +6109,177 @@ const t = {
     }
   ],
   presetStyle: {
-    button: [button, b$6].flat()
+    button: [button, b$5].flat()
   }
-}, M = {
-  type: "container",
+}, S$1 = {
   label: "Item Content",
   icon: ContentIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.AccordionItem }
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
   },
-  presetStyle: t
+  presetStyle: {
+    div
+  }
 };
-const d = {
-  type: "container",
+const y$1 = {
   icon: NavigationMenuIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [n.NavigationMenuList, n.NavigationMenuViewport]
+  },
   presetStyle: {
     div
-  },
-  constraints: [
-    {
-      relation: "descendant",
-      component: { $eq: n.NavigationMenuList }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: n.NavigationMenuViewport }
-    }
-  ]
-}, $ = {
-  type: "container",
+  }
+}, h$1 = {
   icon: ListIcon,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $eq: n.NavigationMenu }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: n.NavigationMenuItem }
-    }
-  ],
+  label: "Menu List",
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [n.NavigationMenuItem]
+  },
   presetStyle: {
     div
-  },
-  label: "Menu List"
-}, q$1 = {
-  type: "container",
+  }
+}, b$3 = {
   icon: ListItemIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.NavigationMenuList }
+  label: "Menu Item",
+  indexWithinAncestor: n.NavigationMenu,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [
+      n.NavigationMenuTrigger,
+      n.NavigationMenuContent,
+      n.NavigationMenuLink
+    ]
   },
   presetStyle: {
     div
-  },
-  indexWithinAncestor: n.NavigationMenu,
-  label: "Menu Item"
-}, b$4 = {
-  type: "container",
+  }
+}, k$1 = {
   icon: TriggerIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.NavigationMenuItem }
-  },
-  label: "Menu Trigger"
+  label: "Menu Trigger",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  }
 }, w$1 = {
-  type: "container",
   icon: ContentIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.NavigationMenuItem }
+  label: "Menu Content",
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [n.NavigationMenuLink]
   },
-  indexWithinAncestor: n.NavigationMenu,
   presetStyle: {
     div
-  },
-  label: "Menu Content"
-}, C$1 = {
-  type: "container",
+  }
+}, C = {
   icon: BoxIcon,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $eq: n.NavigationMenu }
-    },
-    {
-      relation: "ancestor",
-      component: {
-        $in: [n.NavigationMenuContent, n.NavigationMenuItem]
-      }
-    }
-  ],
-  label: "Accessible Link Wrapper"
-}, V = {
-  type: "container",
+  label: "Accessible Link Wrapper",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  }
+}, T = {
   icon: ViewportIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.NavigationMenu }
+  label: "Menu Viewport",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
   },
   presetStyle: {
     div
-  },
-  label: "Menu Viewport"
+  }
 };
-const C = {
-  type: "container",
+const w = {
   icon: SelectIcon,
-  constraints: [
-    {
-      relation: "descendant",
-      component: { $eq: n.SelectTrigger }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: n.SelectContent }
-    }
-  ]
-}, w = {
-  type: "container",
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [n.SelectTrigger, n.SelectContent]
+  }
+}, b$2 = {
   icon: TriggerIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [n.SelectValue]
+  },
   presetStyle: {
     button
-  },
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $eq: n.Select }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: n.SelectValue }
-    }
-  ]
-}, b$3 = {
-  type: "container",
+  }
+}, f = {
   label: "Value",
   icon: FormTextFieldIcon,
+  contentModel: {
+    category: "none",
+    children: []
+  },
   presetStyle: {
     span
-  },
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.SelectTrigger }
   }
-}, f = {
-  type: "container",
+}, v = {
   icon: ContentIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [n.SelectViewport]
+  },
   presetStyle: {
     div
-  },
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $eq: n.Select }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: n.SelectViewport }
-    }
-  ]
-}, v = {
-  type: "container",
+  }
+}, P = {
   icon: ViewportIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [n.SelectItem]
+  },
   presetStyle: {
     div
-  },
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $eq: n.SelectContent }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: n.SelectItem }
-    }
-  ]
-}, P = {
-  type: "container",
+  }
+}, k = {
   icon: ItemIcon,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $eq: n.SelectViewport }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: n.SelectItemIndicator }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: n.SelectItemText }
-    }
-  ],
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [n.SelectItemIndicator, n.SelectItemText]
+  },
   presetStyle: {
     div
   }
-}, h = {
-  type: "container",
+}, F = {
   label: "Indicator",
   icon: CheckMarkIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.SelectItem }
+  contentModel: {
+    category: "none",
+    children: ["instance"]
   },
   presetStyle: {
     span
   }
-}, k = {
-  type: "container",
+}, q = {
   label: "Item Text",
   icon: TextIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.SelectItem }
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
   },
   presetStyle: {
     span
   }
 };
-const S = {
-  type: "container",
-  constraints: {
-    relation: "descendant",
-    component: { $eq: n.SwitchThumb }
-  },
+const b$1 = {
   icon: SwitchIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [n.SwitchThumb]
+  },
   states: [
     ...defaultStates,
     {
@@ -6595,15 +6294,14 @@ const S = {
     }
   ],
   presetStyle: {
-    button: [button, b$6].flat()
+    button: [button, b$5].flat()
   }
-}, b$2 = {
-  type: "container",
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.Switch }
-  },
+}, S = {
   icon: TriggerIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
   states: [
     ...defaultStates,
     {
@@ -6621,13 +6319,13 @@ const S = {
     span
   }
 };
-const b$1 = {
-  type: "container",
-  constraints: {
-    relation: "descendant",
-    component: { $eq: n.CheckboxIndicator }
-  },
+const b = {
   icon: CheckboxCheckedIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [n.CheckboxIndicator]
+  },
   states: [
     ...defaultStates,
     {
@@ -6642,27 +6340,26 @@ const b$1 = {
     }
   ],
   presetStyle: {
-    button: [button, b$6].flat()
+    button: [button, b$5].flat()
   }
 }, x = {
-  type: "container",
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.Checkbox }
-  },
   icon: TriggerIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
   states: defaultStates,
   presetStyle: {
     span
   }
 };
 const y = {
-  type: "container",
-  constraints: {
-    relation: "descendant",
-    component: { $eq: n.RadioGroupItem }
-  },
   icon: RadioGroupIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [n.RadioGroupItem]
+  },
   states: [
     ...defaultStates,
     {
@@ -6679,29 +6376,22 @@ const y = {
   presetStyle: {
     div
   }
-}, b = {
-  type: "container",
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $eq: n.RadioGroup }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: n.RadioGroupIndicator }
-    }
-  ],
+}, g = {
   icon: ItemIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [n.RadioGroupIndicator]
+  },
   states: defaultStates,
   presetStyle: {
-    button: [button, b$6].flat()
+    button: [button, b$5].flat()
   }
-}, q = {
-  type: "container",
+}, h = {
   icon: TriggerIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: n.RadioGroupItem }
+  contentModel: {
+    category: "none",
+    children: ["instance"]
   },
   states: defaultStates,
   presetStyle: {
@@ -6710,54 +6400,54 @@ const y = {
 };
 const radixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Accordion: H,
-  AccordionContent: M,
-  AccordionHeader: T,
-  AccordionItem: C$2,
-  AccordionTrigger: x$1,
-  Checkbox: b$1,
+  Accordion: v$1,
+  AccordionContent: S$1,
+  AccordionHeader: C$1,
+  AccordionItem: x$1,
+  AccordionTrigger: H,
+  Checkbox: b,
   CheckboxIndicator: x,
-  Collapsible: m$1,
-  CollapsibleContent: g$2,
-  CollapsibleTrigger: b$7,
-  Dialog: H$1,
-  DialogClose: E,
-  DialogContent: x$3,
-  DialogDescription: h$1,
-  DialogOverlay: b$5,
-  DialogTitle: B,
-  DialogTrigger: S$1,
-  Label: l,
-  NavigationMenu: d,
+  Collapsible: g$2,
+  CollapsibleContent: d$3,
+  CollapsibleTrigger: b$6,
+  Dialog: j,
+  DialogClose: R,
+  DialogContent: B,
+  DialogDescription: H$1,
+  DialogOverlay: b$4,
+  DialogTitle: E,
+  DialogTrigger: O,
+  Label: i,
+  NavigationMenu: y$1,
   NavigationMenuContent: w$1,
-  NavigationMenuItem: q$1,
-  NavigationMenuLink: C$1,
-  NavigationMenuList: $,
-  NavigationMenuTrigger: b$4,
-  NavigationMenuViewport: V,
-  Popover: l$1,
-  PopoverContent: g$1,
-  PopoverTrigger: v$1,
+  NavigationMenuItem: b$3,
+  NavigationMenuLink: C,
+  NavigationMenuList: h$1,
+  NavigationMenuTrigger: k$1,
+  NavigationMenuViewport: T,
+  Popover: l,
+  PopoverContent: d$1,
+  PopoverTrigger: v$2,
   RadioGroup: y,
-  RadioGroupIndicator: q,
-  RadioGroupItem: b,
-  Select: C,
-  SelectContent: f,
-  SelectItem: P,
-  SelectItemIndicator: h,
-  SelectItemText: k,
-  SelectTrigger: w,
-  SelectValue: b$3,
-  SelectViewport: v,
-  Switch: S,
-  SwitchThumb: b$2,
-  Tabs: C$3,
-  TabsContent: x$2,
-  TabsList: L,
-  TabsTrigger: u,
-  Tooltip: d$1,
-  TooltipContent: g,
-  TooltipTrigger: m
+  RadioGroupIndicator: h,
+  RadioGroupItem: g,
+  Select: w,
+  SelectContent: v,
+  SelectItem: k,
+  SelectItemIndicator: F,
+  SelectItemText: q,
+  SelectTrigger: b$2,
+  SelectValue: f,
+  SelectViewport: P,
+  Switch: b$1,
+  SwitchThumb: S,
+  Tabs: M,
+  TabsContent: S$2,
+  TabsList: x$2,
+  TabsTrigger: C$2,
+  Tooltip: m,
+  TooltipContent: d,
+  TooltipTrigger: g$1
 }, Symbol.toStringTag, { value: "Module" }));
 const createFramework$2 = async () => {
   const routeTemplatesDir = join("app", "route-templates");
@@ -6843,7 +6533,7 @@ const reactRouterComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */
   Form: c$1,
   Link: n$6,
   RemixForm: n$4,
-  RichTextLink: o$4
+  RichTextLink: p$8
 }, Symbol.toStringTag, { value: "Module" }));
 const createFramework$1 = async () => {
   const routeTemplatesDir = join("app", "route-templates");
@@ -6969,20 +6659,25 @@ const createFramework = async () => {
         metas: radixComponentNamespacedMetas
       }
     ],
-    html: ({ pagePath }) => [
-      {
-        file: join("pages", generateVikeRoute(pagePath), "+Page.tsx"),
-        template: htmlPageTemplate
-      },
-      {
-        file: join("pages", generateVikeRoute(pagePath), "+Head.tsx"),
-        template: htmlHeadTemplate
-      },
-      {
-        file: join("pages", generateVikeRoute(pagePath), "+data.ts"),
-        template: htmlDataTemplate
+    html: ({ pagePath }) => {
+      if (isPathnamePattern(pagePath)) {
+        return [];
       }
-    ],
+      return [
+        {
+          file: join("pages", generateVikeRoute(pagePath), "+Page.tsx"),
+          template: htmlPageTemplate
+        },
+        {
+          file: join("pages", generateVikeRoute(pagePath), "+Head.tsx"),
+          template: htmlHeadTemplate
+        },
+        {
+          file: join("pages", generateVikeRoute(pagePath), "+data.ts"),
+          template: htmlDataTemplate
+        }
+      ];
+    },
     xml: () => [],
     redirect: () => [],
     defaultSitemap: () => []
@@ -7634,7 +7329,7 @@ const initFlow = async (options) => {
   if (shouldInstallDeps === true) {
     const install = spinner();
     install.start("Installing dependencies");
-    await x$4("npm", ["install"]);
+    await x$3("npm", ["install"]);
     install.stop("Installed dependencies");
   }
   log.message();
@@ -7665,7 +7360,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.216.0";
+const version = "0.218.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";
@@ -7703,7 +7398,7 @@ const dependencies = {
   "change-case": "^5.4.4",
   deepmerge: "^4.3.1",
   "env-paths": "^3.0.0",
-  nanoid: "^5.0.9",
+  nanoid: "^5.1.5",
   "p-limit": "^6.2.0",
   parse5: "7.2.1",
   picocolors: "^1.1.1",