webstudio 0.208.0 → 0.210.0

package/lib/cli.js

@@ -30,7 +30,7 @@ import reservedIdentifiers from "reserved-identifiers";
 import { kebabCase, camelCase } from "change-case";
 import "nanoid";
 import { parseFragment, defaultTreeAdapter } from "parse5";
-import { x as x$2 } from "tinyexec";
+import { x as x$4 } from "tinyexec";
 import makeCLI from "yargs";
 const GLOBAL_CONFIG_FOLDER = envPaths("webstudio").config;
 const GLOBAL_CONFIG_FILE_NAME = "webstudio-config.json";
@@ -837,6 +837,22 @@ var toValue = (styleValue, transformValue) => {
     }
     return value.value.filter((value2) => value2.hidden !== true).map((value2) => toValue(value2, transformValue)).join(" ");
   }
+  if (value.type === "shadow") {
+    let shadow = `${toValue(value.offsetX)} ${toValue(value.offsetY)}`;
+    if (value.blur) {
+      shadow += ` ${toValue(value.blur)}`;
+    }
+    if (value.spread) {
+      shadow += ` ${toValue(value.spread)}`;
+    }
+    if (value.color) {
+      shadow += ` ${toValue(value.color)}`;
+    }
+    if (value.position === "inset") {
+      shadow += ` inset`;
+    }
+    return shadow;
+  }
   if (value.type === "function") {
     if (value.hidden === true) {
       return "";
@@ -937,12 +953,23 @@ var TupleValue = z.object({
   value: z.array(TupleValueItem),
   hidden: z.boolean().optional()
 });
+var ShadowValue = z.object({
+  type: z.literal("shadow"),
+  hidden: z.boolean().optional(),
+  position: z.union([z.literal("inset"), z.literal("outset")]),
+  offsetX: z.union([UnitValue, VarValue]),
+  offsetY: z.union([UnitValue, VarValue]),
+  blur: z.union([UnitValue, VarValue]).optional(),
+  spread: z.union([UnitValue, VarValue]).optional(),
+  color: z.union([RgbValue, KeywordValue, VarValue]).optional()
+});
 var LayerValueItem = z.union([
   UnitValue,
   KeywordValue,
   UnparsedValue,
   ImageValue,
   TupleValue,
+  ShadowValue,
   RgbValue,
   InvalidValue,
   FunctionValue,
@@ -966,7 +993,8 @@ var StyleValue = z.union([
   GuaranteedInvalidValue,
   InvalidValue,
   UnsetValue,
-  VarValue
+  VarValue,
+  ShadowValue
 ]);
 var cssWideKeywords = /* @__PURE__ */ new Set([
   "initial",
@@ -1609,6 +1637,7 @@ var generateAtomic = (sheet, options) => {
 };
 var AccordionIcon = `<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.056 8H14.5V4.101a1.3 1.3 0 0 0-1.3-1.299H2.8a1.3 1.3 0 0 0-1.3 1.3V8H13.056ZM13.056 13.198h.145a1.3 1.3 0 0 0 1.299-1.3V8h-13v3.899a1.3 1.3 0 0 0 1.3 1.299h10.256Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m10.026 4.913.975.976.976-.976M10.026 10.111l.975.976.976-.976"/></svg>`;
 var AddTemplateInstanceIcon = `<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.5 2H3.333A1.333 1.333 0 0 0 2 3.333V4.5M14 12.667c0 .021 0 .042-.002.063M11.5 14h1.167a1.333 1.333 0 0 0 1.331-1.27m0 0V11.5M2 11.5v1.167A1.333 1.333 0 0 0 3.333 14H4.5M7 14h2M2 7v2M8.461 4.77H14M11.23 2v5.538"/></svg>`;
+var AnimationGroupIcon = `<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.5 8.3C6.3 7.7 7.8 8 9.3 11c.3-1.8 1.2-4.5 2.1-6M4.208 1.5H2.944A1.444 1.444 0 0 0 1.5 2.944v1.264m13 0V2.944A1.444 1.444 0 0 0 13.056 1.5h-1.264M14.5 13.056c0 .023 0 .046-.002.069M11.792 14.5h1.264a1.444 1.444 0 0 0 1.442-1.375m0 0v-1.333m-12.998 0v1.264A1.444 1.444 0 0 0 2.944 14.5h1.264m2.709-13h2.166m-2.166 13h2.166M1.5 6.917v2.166m13-2.166v2.166"/></svg>`;
 var BlockquoteIcon = `<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" d="M6.667 8H3.333a.667.667 0 0 1-.666-.667V5a.667.667 0 0 1 .666-.667H6A.667.667 0 0 1 6.667 5v3Zm0 0C6.667 9.667 6 10.667 4 11.667M13.333 8H10a.667.667 0 0 1-.667-.667V5A.667.667 0 0 1 10 4.333h2.667a.667.667 0 0 1 .666.667v3Zm0 0c0 1.667-.666 2.667-2.666 3.667"/></svg>`;
 var BodyIcon = `<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 2ZM2 6h12"/></svg>`;
 var BoldIcon = `<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 8h6a2.667 2.667 0 0 1 0 5.333H4.667A.667.667 0 0 1 4 12.667V3.333a.667.667 0 0 1 .667-.666h4.666a2.667 2.667 0 1 1 0 5.333"/></svg>`;
@@ -1647,11 +1676,13 @@ var ResourceIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox=
 var SelectIcon = `<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 10.33h.149c.736 0 1.332-.597 1.332-1.332V6.332c0-.735-.596-1.332-1.332-1.332H2.667c-.735 0-1.332.597-1.332 1.332v2.666c0 .735.597 1.332 1.333 1.332h10.516Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m10.078 7.165 1 1 1-1"/></svg>`;
 var SettingsIcon = `<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.987 6H9.32M13.932 6h-12M14 10.5H2"/><rect width="4" height="4" x="1.932" y="8.534" fill="#fff" stroke="currentColor" rx="2"/><rect width="4" height="4" x="10.068" y="4" fill="#fff" stroke="currentColor" rx="2"/></svg>`;
 var SlotComponentIcon = `<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.5 2H3.333A1.333 1.333 0 0 0 2 3.333V4.5M14 4.5V3.333A1.333 1.333 0 0 0 12.667 2H11.5M14 12.667c0 .021 0 .042-.002.063M11.5 14h1.167a1.333 1.333 0 0 0 1.331-1.27m0 0V11.5M2 11.5v1.167A1.333 1.333 0 0 0 3.333 14H4.5M7 2h2M7 14h2M2 7v2M14 7v2"/></svg>`;
+var StaggerAnimationIcon = `<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.222 5H8.778A.778.778 0 0 0 8 5.778v5.444c0 .43.348.778.778.778h5.444c.43 0 .778-.348.778-.778V5.778A.778.778 0 0 0 14.222 5ZM5.444 6H1.556A.556.556 0 0 0 1 6.556v3.888c0 .307.249.556.556.556h3.888A.556.556 0 0 0 6 10.444V6.556A.556.556 0 0 0 5.444 6Z"/></svg>`;
 var SubscriptIcon = `<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 3.333 8 8.667M8 3.333 2.667 8.667M13.333 12.667h-2.666c0-1 .293-1.334 1-1.667.706-.333 1.666-.78 1.666-1.667 0-.313-.113-.62-.32-.86a1.407 1.407 0 0 0-1.746-.293c-.28.16-.494.413-.6.713"/></svg>`;
 var SuperscriptIcon = `<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 12.667 8 7.333M8 12.667 2.667 7.333M13.333 8h-2.666c0-1 .294-1.333 1-1.667.705-.333 1.666-.777 1.666-1.665 0-.315-.113-.62-.322-.86a1.403 1.403 0 0 0-1.745-.29c-.28.159-.492.409-.6.706"/></svg>`;
 var SwitchIcon = `<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="M10.667 4H5.333a4 4 0 1 0 0 8h5.334a4 4 0 0 0 0-8Z"/><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M5.333 9.333a1.333 1.333 0 1 0 0-2.666 1.333 1.333 0 0 0 0 2.666Z"/></svg>`;
 var TabsIcon = `<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="M9.75 5H13M9.75 5H7.401A1.684 1.684 0 0 1 6 4.25v0l-.5-.75-.5-.75L4.5 2m5.25 3-1-1.5-.5-.75-.5-.75M4.5 2H3v0a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 3 14h10v0a1.5 1.5 0 0 0 1.5-1.5v0-6A1.5 1.5 0 0 0 13 5v0M4.5 2h3.25m0 0h2.375v0c.547 0 1.057.273 1.36.728l.015.022.5.75L13 5"/></svg>`;
 var TextAlignLeftIcon = `<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="M10 8H2M11.333 12H2M14 4H2"/></svg>`;
+var TextAnimationIcon = `<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="M7.476 4.3 7.817 3l6.935 1.817-.34 1.3m-6.245 4.386 2.601.682m.517-7.276-1.817 6.935M2 9.938V9h5v.938M3.562 14h1.875M4.5 9v5"/></svg>`;
 var TextItalicIcon = `<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 2.667h-6M9.333 13.333h-6M10 2.667 6 13.333"/></svg>`;
 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>`;
@@ -1843,7 +1874,13 @@ var MatcherOperation = z.object({
 var Matcher = z.object({
   relation: MatcherRelation,
   component: MatcherOperation.optional(),
-  tag: 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();
@@ -2523,6 +2560,7 @@ var componentCategories = [
   "general",
   "typography",
   "media",
+  "animations",
   "data",
   "forms",
   "localization",
@@ -2567,7 +2605,6 @@ z.object({
   icon: z.string(),
   presetStyle: z.optional(z.record(z.string(), z.array(PresetStyleDecl))),
   states: z.optional(z.array(ComponentState)),
-  template: z.optional(WsEmbedTemplate),
   order: z.number().optional()
 });
 var html = [
@@ -3561,73 +3598,6 @@ var isAttributeNameSafe = (attributeName) => {
   illegalAttributeNameCache.set(attributeName, true);
   return false;
 };
-var namespaceEmbedTemplateComponents = (template, namespace, components) => {
-  return template.map((item) => {
-    if (item.type === "text") {
-      return item;
-    }
-    if (item.type === "expression") {
-      return item;
-    }
-    if (item.type === "instance") {
-      const prefix = components.has(item.component) ? `${namespace}:` : "";
-      return {
-        ...item,
-        component: `${prefix}${item.component}`,
-        children: namespaceEmbedTemplateComponents(
-          item.children,
-          namespace,
-          components
-        )
-      };
-    }
-    throw Error("Impossible case");
-  });
-};
-var namespaceMatcher = (namespace, matcher) => {
-  var _a2, _b2, _c2, _d2;
-  const newMatcher = structuredClone(matcher);
-  if ((_a2 = newMatcher.component) == null ? void 0 : _a2.$eq) {
-    newMatcher.component.$eq = `${namespace}:${newMatcher.component.$eq}`;
-  }
-  if ((_b2 = newMatcher.component) == null ? void 0 : _b2.$neq) {
-    newMatcher.component.$neq = `${namespace}:${newMatcher.component.$neq}`;
-  }
-  if ((_c2 = newMatcher.component) == null ? void 0 : _c2.$in) {
-    newMatcher.component.$in = newMatcher.component.$in.map(
-      (component) => `${namespace}:${component}`
-    );
-  }
-  if ((_d2 = newMatcher.component) == null ? void 0 : _d2.$nin) {
-    newMatcher.component.$nin = newMatcher.component.$nin.map(
-      (component) => `${namespace}:${component}`
-    );
-  }
-  return newMatcher;
-};
-var namespaceMeta = (meta, namespace, components) => {
-  const newMeta = { ...meta };
-  if (newMeta.constraints) {
-    if (Array.isArray(newMeta.constraints)) {
-      newMeta.constraints = newMeta.constraints.map(
-        (matcher) => namespaceMatcher(namespace, matcher)
-      );
-    } else {
-      newMeta.constraints = namespaceMatcher(namespace, newMeta.constraints);
-    }
-  }
-  if (newMeta.indexWithinAncestor) {
-    newMeta.indexWithinAncestor = components.has(newMeta.indexWithinAncestor) ? `${namespace}:${newMeta.indexWithinAncestor}` : newMeta.indexWithinAncestor;
-  }
-  if (newMeta.template) {
-    newMeta.template = namespaceEmbedTemplateComponents(
-      newMeta.template,
-      namespace,
-      components
-    );
-  }
-  return newMeta;
-};
 var generateAction = ({
   scope,
   prop,
@@ -4125,7 +4095,7 @@ const e$5 = {
   icon: SlotComponentIcon,
   order: 5
 };
-const o$3 = {
+const o$4 = {
   type: "container",
   icon: ""
 };
@@ -4139,7 +4109,7 @@ const e$4 = {
     type: "boolean"
   }
 };
-const i$9 = {
+const i$4 = {
   div: [
     {
       property: "display",
@@ -4156,7 +4126,7 @@ const i$9 = {
   label: "HTML Embed",
   description: "Used to add HTML code to the page, such as an SVG or script.",
   icon: EmbedIcon,
-  presetStyle: i$9,
+  presetStyle: i$4,
   order: 2
 };
 ({
@@ -4234,13 +4204,13 @@ var h3 = div;
 var h4 = div;
 var h5 = div;
 var h6 = div;
-var i$8 = div;
+var i$3 = div;
 var img = div;
 var a$b = 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 } },
@@ -4295,7 +4265,7 @@ var hr = [
     value: { type: "unit", unit: "px", value: 1 }
   }
 ];
-var b$5 = [
+var b$8 = [
   {
     property: "font-weight",
     value: { type: "unit", unit: "number", value: 700 }
@@ -4563,13 +4533,13 @@ const a$a = {
       value: { type: "keyword", value: "grayscale" }
     }
   ]
-}, n$5 = {
+}, n$9 = {
   type: "container",
   icon: BodyIcon,
   states: defaultStates,
   presetStyle: a$a
 };
-const g = {
+const g$3 = {
   div,
   address,
   article,
@@ -4580,16 +4550,16 @@ const g = {
   main: main$1,
   nav,
   section
-}, v$3 = {
+}, 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,
+  presetStyle: g$3,
   order: 0
 };
-const r$a = {
+const r$d = {
   div: [
     ...div,
     {
@@ -4597,44 +4567,36 @@ const r$a = {
       value: { type: "unit", unit: "em", value: 1 }
     }
   ]
-}, n$4 = {
+}, n$8 = {
   type: "container",
   icon: TextIcon,
   states: defaultStates,
-  presetStyle: r$a
+  presetStyle: r$d
 };
-const c$7 = {
+const n$7 = {
   h1,
   h2,
   h3,
   h4,
   h5,
   h6
-}, f$3 = {
+}, f$1 = {
   type: "container",
   placeholder: "Heading",
   icon: HeadingIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $neq: "Heading" }
-  },
   states: defaultStates,
-  presetStyle: c$7
+  presetStyle: n$7
 };
-const a$9 = {
-  p: p$d
-}, c$6 = {
+const p$9 = {
+  p: p$a
+}, n$6 = {
   type: "container",
   placeholder: "Paragraph",
   icon: TextAlignLeftIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $neq: "Paragraph" }
-  },
   states: defaultStates,
-  presetStyle: a$9
+  presetStyle: p$9
 };
-const a$8 = {
+const a$9 = {
   a: [
     ...a$b,
     {
@@ -4642,15 +4604,11 @@ const a$8 = {
       value: { type: "keyword", value: "inline-block" }
     }
   ]
-}, l$6 = {
+}, n$5 = {
   type: "container",
   placeholder: "Link",
   icon: LinkIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
-  presetStyle: a$8,
+  presetStyle: a$9,
   states: [
     ...defaultStates,
     {
@@ -4664,46 +4622,46 @@ const a$8 = {
     }
   ]
 };
-const a$7 = {
-  ...l$6,
+const a$8 = {
+  ...n$5,
   type: "rich-text-child"
 };
 const s$3 = {
   span
-}, c$5 = {
+}, c$7 = {
   type: "rich-text-child",
   label: "Text",
   icon: PaintBrushIcon,
   states: defaultStates,
   presetStyle: s$3
 };
-const p$c = {
-  b: b$5
-}, l$5 = {
+const p$8 = {
+  b: b$8
+}, l$6 = {
   type: "rich-text-child",
   label: "Bold Text",
   icon: BoldIcon,
   states: defaultStates,
-  presetStyle: p$c
+  presetStyle: p$8
 };
-const r$9 = {
+const r$c = {
   i: [
-    ...i$8,
+    ...i$3,
     {
       property: "font-style",
       value: { type: "keyword", value: "italic" }
     }
   ]
-}, c$4 = {
+}, c$6 = {
   type: "rich-text-child",
   label: "Italic Text",
   icon: TextItalicIcon,
   states: defaultStates,
-  presetStyle: r$9
+  presetStyle: r$c
 };
 const e$3 = {
   sup
-}, a$6 = {
+}, a$7 = {
   type: "rich-text-child",
   label: "Superscript Text",
   icon: SuperscriptIcon,
@@ -4712,30 +4670,26 @@ const e$3 = {
 };
 const e$2 = {
   sub
-}, a$5 = {
+}, a$6 = {
   type: "rich-text-child",
   label: "Subscript Text",
   icon: SubscriptIcon,
   states: defaultStates,
   presetStyle: e$2
 };
-const a$4 = {
+const l$5 = {
   button
-}, p$b = {
+}, p$7 = {
   icon: ButtonElementIcon,
   type: "container",
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
-  presetStyle: a$4,
+  presetStyle: l$5,
   states: [
     ...defaultStates,
     { selector: ":disabled", label: "Disabled" },
     { selector: ":enabled", label: "Enabled" }
   ]
 };
-const r$8 = {
+const r$b = {
   input: [
     ...input,
     {
@@ -4743,17 +4697,13 @@ const r$8 = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, p$a = {
+}, c$5 = {
   category: "forms",
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
   type: "control",
   label: "Text Input",
   description: "A single-line text input for collecting string data from your users.",
   icon: FormTextFieldIcon,
-  presetStyle: r$8,
+  presetStyle: r$b,
   order: 3,
   states: [
     ...defaultStates,
@@ -4769,14 +4719,10 @@ const r$8 = {
     //{ selector: ":read-write", label: "Read Write" },
   ]
 };
-const n$3 = {
+const c$4 = {
   label: "Webhook Form",
   icon: WebhookFormIcon,
   type: "container",
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Form", "Button", "Link"] }
-  },
   presetStyle: {
     form
   },
@@ -4785,26 +4731,22 @@ const n$3 = {
     { selector: "[data-state=success]", label: "Success" }
   ]
 };
-const n$2 = {
+const s$2 = {
   form: [
     ...form,
     { property: "min-height", value: { type: "unit", unit: "px", value: 20 } }
   ]
-}, p$9 = {
+}, n$4 = {
   category: "forms",
   type: "container",
   label: "Form",
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Form", "Button", "Link"] }
-  },
   description: "Create filters, surveys, searches and more.",
   icon: FormIcon,
   states: defaultStates,
-  presetStyle: n$2,
+  presetStyle: s$2,
   order: 0
 };
-const a$3 = {
+const a$5 = {
   img: [
     ...img,
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
@@ -4832,10 +4774,10 @@ const a$3 = {
   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$3,
+  presetStyle: a$5,
   order: 0
 };
-const r$7 = {
+const r$a = {
   blockquote: [
     {
       property: "margin-top",
@@ -4882,14 +4824,14 @@ const r$7 = {
       value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
     }
   ]
-}, i$7 = {
+}, i$2 = {
   type: "container",
   placeholder: "Blockquote",
   icon: BlockquoteIcon,
   states: defaultStates,
-  presetStyle: r$7
+  presetStyle: r$a
 };
-const a$2 = {
+const a$4 = {
   ol: [
     ...ol,
     {
@@ -4920,29 +4862,22 @@ const a$2 = {
       value: { type: "keyword", value: "40px" }
     }
   ]
-}, d$3 = {
+}, d$5 = {
   type: "container",
   icon: ListIcon,
   states: defaultStates,
-  presetStyle: a$2
+  presetStyle: a$4
 };
-const s$2 = {
-  li
-}, m$3 = {
+const a$3 = {
   type: "container",
   placeholder: "List item",
-  constraints: {
-    // cannot use parent relation here
-    // because list item can be put inside of collection or slot
-    // perhaps can be eventually fixed with tag matchers
-    relation: "ancestor",
-    component: { $eq: "List" }
-  },
   icon: ListItemIcon,
   states: defaultStates,
-  presetStyle: s$2
+  presetStyle: {
+    li
+  }
 };
-const p$8 = {
+const p$6 = {
   hr: [
     ...hr,
     {
@@ -4970,16 +4905,16 @@ const p$8 = {
       value: { type: "keyword", value: "none" }
     }
   ]
-}, n$1 = {
+}, n$3 = {
   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$8,
+  presetStyle: p$6,
   order: 3
 };
-const p$7 = {
+const p$5 = {
   code: [
     ...code,
     {
@@ -5007,34 +4942,26 @@ const p$7 = {
       value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
     }
   ]
-}, i$6 = {
+}, d$4 = {
   category: "general",
   type: "embed",
   description: "Use this component when you want to display code as text on the page.",
   icon: BracesIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $neq: "CodeText" }
-  },
   states: defaultStates,
-  presetStyle: p$7,
+  presetStyle: p$5,
   order: 5
 };
-const a$1 = {
+const a$2 = {
   label: [
     ...label,
     { property: "display", value: { type: "keyword", value: "block" } }
   ]
-}, i$5 = {
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
+}, m$3 = {
   type: "container",
   label: "Input Label",
   icon: LabelIcon,
   states: defaultStates,
-  presetStyle: a$1
+  presetStyle: a$2
 };
 const l$3 = {
   textarea: [
@@ -5046,7 +4973,7 @@ const l$3 = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, p$6 = {
+}, c$3 = {
   category: "forms",
   type: "control",
   label: "Text Area",
@@ -5054,10 +4981,6 @@ const l$3 = {
   icon: FormTextAreaIcon,
   presetStyle: l$3,
   order: 4,
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
   states: [
     ...defaultStates,
     { selector: "::placeholder", label: "Placeholder" },
@@ -5072,7 +4995,7 @@ const l$3 = {
     //{ selector: ":read-write", label: "Read Write" },
   ]
 };
-const i$4 = {
+const a$1 = {
   input: [
     ...radio,
     {
@@ -5080,15 +5003,11 @@ const i$4 = {
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, p$5 = {
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
+}, s$1 = {
   type: "control",
   label: "Radio",
   icon: RadioCheckedIcon,
-  presetStyle: i$4,
+  presetStyle: a$1,
   states: [
     ...defaultStates,
     { selector: ":checked", label: "Checked" },
@@ -5101,7 +5020,7 @@ const i$4 = {
     //{ selector: ":read-write", label: "Read Write" },
   ]
 };
-const r$6 = {
+const o$3 = {
   input: [
     ...checkbox,
     {
@@ -5109,14 +5028,10 @@ const r$6 = {
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, s$1 = {
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
+}, d$3 = {
   type: "control",
   icon: CheckboxCheckedIcon,
-  presetStyle: r$6,
+  presetStyle: o$3,
   states: [
     ...defaultStates,
     { selector: ":checked", label: "Checked" },
@@ -5128,31 +5043,31 @@ const r$6 = {
     { selector: ":read-write", label: "Read Write" }
   ]
 };
-const r$5 = {
+const r$9 = {
   div
-}, c$3 = {
+}, c$2 = {
   type: "container",
   icon: VimeoIcon,
   states: defaultStates,
-  presetStyle: r$5,
+  presetStyle: r$9,
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link", "Heading"] }
   }
 };
-const i$3 = {
+const i$1 = {
   div
-}, c$2 = {
+}, c$1 = {
   type: "container",
   icon: YoutubeIcon,
   states: defaultStates,
-  presetStyle: i$3,
+  presetStyle: i$1,
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link", "Heading"] }
   }
 };
-const i$2 = {
+const i = {
   ...l$4,
   category: "hidden",
   label: "Preview Image",
@@ -5161,7 +5076,7 @@ const i$2 = {
     component: { $in: ["Vimeo", "YouTube"] }
   }
 };
-const r$4 = {
+const r$8 = {
   button
 }, p$4 = {
   category: "hidden",
@@ -5178,10 +5093,10 @@ const r$4 = {
   ],
   label: "Play Button",
   icon: ButtonElementIcon,
-  presetStyle: r$4,
+  presetStyle: r$8,
   states: defaultStates
 };
-const n = {
+const n$2 = {
   div
 }, m$2 = {
   type: "container",
@@ -5191,7 +5106,7 @@ const n = {
   },
   icon: BoxIcon,
   states: defaultStates,
-  presetStyle: n,
+  presetStyle: n$2,
   category: "hidden",
   label: "Spinner"
 };
@@ -5209,7 +5124,7 @@ const a = {
   icon: CalendarIcon,
   order: 7
 };
-const r$3 = {
+const r$7 = {
   time
 }, s = {
   category: "localization",
@@ -5217,9 +5132,9 @@ const r$3 = {
   description: "Converts machine-readable date and time to a human-readable format.",
   icon: CalendarIcon,
   states: defaultStates,
-  presetStyle: r$3
+  presetStyle: r$7
 };
-const r$2 = {
+const r$6 = {
   select: [
     ...select,
     {
@@ -5227,14 +5142,10 @@ const r$2 = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, c$1 = {
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
+}, c = {
   type: "container",
   icon: SelectIcon,
-  presetStyle: r$2,
+  presetStyle: r$6,
   states: [
     ...defaultStates,
     { selector: "::placeholder", label: "Placeholder" },
@@ -5244,7 +5155,7 @@ const r$2 = {
     { selector: ":optional", label: "Optional" }
   ]
 };
-const o$2 = {
+const l$2 = {
   option: [
     {
       property: "background-color",
@@ -5258,16 +5169,12 @@ const o$2 = {
       }
     }
   ]
-}, r$1 = {
+}, r$5 = {
   category: "hidden",
-  constraints: {
-    relation: "parent",
-    component: { $eq: "Select" }
-  },
   type: "control",
   description: "An item within a drop-down menu that users can select as their chosen value.",
   icon: ItemIcon,
-  presetStyle: o$2,
+  presetStyle: l$2,
   states: [
     // Applies when option is being activated (clicked)
     { selector: ":active", label: "Active" },
@@ -5279,7 +5186,7 @@ const o$2 = {
     { selector: ":disabled", label: "Disabled" }
   ]
 };
-const r = {
+const r$4 = {
   icon: HeaderIcon,
   type: "container",
   description: "Inserts children into the head of the document",
@@ -5323,104 +5230,151 @@ const p$1 = {
 };
 const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Blockquote: i$7,
-  Body: n$5,
-  Bold: l$5,
-  Box: v$3,
-  Button: p$b,
-  Checkbox: s$1,
-  CodeText: i$6,
-  Form: n$3,
-  Fragment: o$3,
+  Blockquote: i$2,
+  Body: n$9,
+  Bold: l$6,
+  Box: v$2,
+  Button: p$7,
+  Checkbox: d$3,
+  CodeText: d$4,
+  Form: c$4,
+  Fragment: o$4,
   HeadLink: p$3,
   HeadMeta: p$2,
-  HeadSlot: r,
+  HeadSlot: r$4,
   HeadTitle: p$1,
-  Heading: f$3,
+  Heading: f$1,
   HtmlEmbed: a$c,
   Image: l$4,
-  Input: p$a,
-  Italic: c$4,
-  Label: i$5,
-  Link: l$6,
-  List: d$3,
-  ListItem: m$3,
+  Input: c$5,
+  Italic: c$6,
+  Label: m$3,
+  Link: n$5,
+  List: d$5,
+  ListItem: a$3,
   MarkdownEmbed: t$1,
-  Option: r$1,
-  Paragraph: c$6,
-  RadioButton: p$5,
-  RemixForm: p$9,
-  RichTextLink: a$7,
-  Select: c$1,
-  Separator: n$1,
+  Option: r$5,
+  Paragraph: n$6,
+  RadioButton: s$1,
+  RemixForm: n$4,
+  RichTextLink: a$8,
+  Select: c,
+  Separator: n$3,
   Slot: e$5,
-  Span: c$5,
-  Subscript: a$5,
-  Superscript: a$6,
-  Text: n$4,
-  Textarea: p$6,
+  Span: c$7,
+  Subscript: a$6,
+  Superscript: a$7,
+  Text: n$8,
+  Textarea: c$3,
   Time: s,
-  Vimeo: c$3,
+  Vimeo: c$2,
   VimeoPlayButton: p$4,
-  VimeoPreviewImage: i$2,
+  VimeoPreviewImage: i,
   VimeoSpinner: m$2,
   XmlNode: e$1,
   XmlTime: a,
-  YouTube: c$2
+  YouTube: c$1
 }, Symbol.toStringTag, { value: "Module" }));
-const i$1 = {
-  category: "general",
+const o$2 = {
+  category: "animations",
   type: "container",
-  description: "Animate Children",
-  icon: SlotComponentIcon,
+  description: "Animation Group component is designed to animate its children.",
+  icon: AnimationGroupIcon,
   order: 5,
-  label: "Animate Children"
+  label: "Animation Group",
+  constraints: {
+    relation: "child",
+    text: false
+  }
 };
-const i = {
-  category: "general",
+const n$1 = (t2) => new Proxy(
+  {},
+  {
+    get(o2, e2) {
+      return `${t2}${e2}`;
+    }
+  }
+), r$3 = n$1(
+  "@webstudio-is/sdk-components-animation:"
+);
+const r$2 = {
+  category: "animations",
   type: "container",
-  description: "Animate Text",
-  icon: TextIcon,
+  description: "Text animation allows you to split text by char or by word to animate it.",
+  icon: TextAnimationIcon,
   order: 6,
-  label: "Animate Text"
+  label: "Text Animation",
+  constraints: [
+    { relation: "parent", component: { $eq: r$3.AnimateChildren } },
+    {
+      relation: "child",
+      text: false
+    }
+  ]
+};
+const r$1 = {
+  category: "animations",
+  type: "container",
+  description: "Stagger animation allows you to animate children elements with a sliding window.",
+  icon: StaggerAnimationIcon,
+  order: 6,
+  label: "Stagger Animation",
+  constraints: [
+    { relation: "parent", component: { $eq: r$3.AnimateChildren } },
+    {
+      relation: "child",
+      text: false
+    }
+  ]
 };
 const animationComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  AnimateChildren: i$1,
-  AnimateText: i
+  AnimateChildren: o$2,
+  AnimateText: r$2,
+  StaggerAnimation: r$1
 }, Symbol.toStringTag, { value: "Module" }));
 const remixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Body: n$5,
-  Form: n$3,
-  Link: l$6,
-  RemixForm: p$9,
-  RichTextLink: a$7
+  Body: n$9,
+  Form: c$4,
+  Link: n$5,
+  RemixForm: n$4,
+  RichTextLink: a$8
 }, Symbol.toStringTag, { value: "Module" }));
-const c = {
+const r = (t2) => new Proxy(
+  {},
+  {
+    get(o2, e2) {
+      return `${t2}${e2}`;
+    }
+  }
+), n = r(
+  "@webstudio-is/sdk-components-react-radix:"
+);
+const m$1 = {
   type: "container",
   constraints: [
     {
       relation: "descendant",
-      component: { $eq: "CollapsibleTrigger" }
+      component: { $eq: n.CollapsibleTrigger }
     },
     {
       relation: "descendant",
-      component: { $eq: "CollapsibleContent" }
+      component: { $eq: n.CollapsibleContent }
     }
   ],
   presetStyle: {
     div
   },
   icon: CollapsibleIcon
-}, C$3 = {
+}, b$7 = {
   type: "container",
   icon: TriggerIcon,
   constraints: {
     relation: "ancestor",
-    component: { $eq: "Collapsible" }
+    component: { $eq: n.Collapsible }
   }
-}, b$4 = {
+}, g$2 = {
   type: "container",
   presetStyle: {
     div
@@ -5428,7 +5382,7 @@ const c = {
   icon: ContentIcon,
   constraints: {
     relation: "ancestor",
-    component: { $eq: "Collapsible" }
+    component: { $eq: n.Collapsible }
   }
 };
 const o$1 = (r2, t2, p2) => ({
@@ -5440,7 +5394,7 @@ const o$1 = (r2, t2, p2) => ({
 }), d$2 = (r2, t2, p2, l2) => ({
   property: r2,
   value: { type: "rgb", alpha: 1, r: t2, g: p2, b: l2 }
-}), b$3 = [
+}), b$6 = [
   {
     property: "background-color",
     value: { type: "keyword", value: "transparent" }
@@ -5466,14 +5420,14 @@ const o$1 = (r2, t2, p2) => ({
   o$1("padding-bottom", 0, "px"),
   o$1("padding-left", 0, "px")
 ];
-const O = {
+const S$1 = {
   type: "container",
   icon: TriggerIcon,
   constraints: {
     relation: "ancestor",
-    component: { $eq: "Dialog" }
+    component: { $eq: n.Dialog }
   }
-}, P$2 = {
+}, b$5 = {
   type: "container",
   presetStyle: {
     div
@@ -5482,14 +5436,14 @@ const O = {
   constraints: [
     {
       relation: "ancestor",
-      component: { $eq: "Dialog" }
+      component: { $eq: n.Dialog }
     },
     {
       relation: "descendant",
-      component: { $eq: "DialogContent" }
+      component: { $eq: n.DialogContent }
     }
   ]
-}, S = {
+}, x$3 = {
   type: "container",
   presetStyle: {
     div
@@ -5498,26 +5452,26 @@ const O = {
   constraints: [
     {
       relation: "ancestor",
-      component: { $eq: "DialogOverlay" }
+      component: { $eq: n.DialogOverlay }
     },
     // often deleted by users
     // though radix starts throwing warnings in console
     /*
     {
       relation: "descendant",
-      component: { $eq: "DialogTitle" },
+      component: { $eq: radix.DialogTitle },
     },
     {
       relation: "descendant",
-      component: { $eq: "DialogDescription" },
+      component: { $eq: radix.DialogDescription },
     },
     */
     {
       relation: "descendant",
-      component: { $eq: "DialogClose" }
+      component: { $eq: n.DialogClose }
     }
   ]
-}, b$2 = {
+}, B = {
   type: "container",
   presetStyle: {
     h2
@@ -5525,52 +5479,52 @@ const O = {
   icon: HeadingIcon,
   constraints: {
     relation: "ancestor",
-    component: { $eq: "DialogContent" }
+    component: { $eq: n.DialogContent }
   }
-}, x$1 = {
+}, h$1 = {
   type: "container",
   presetStyle: {
-    p: p$d
+    p: p$a
   },
   icon: TextIcon,
   constraints: {
     relation: "ancestor",
-    component: { $eq: "DialogContent" }
+    component: { $eq: n.DialogContent }
   }
-}, B = {
+}, E = {
   type: "container",
   presetStyle: {
-    button: [b$3, button].flat()
+    button: [b$6, button].flat()
   },
   states: defaultStates,
   icon: ButtonElementIcon,
   label: "Close Button",
   constraints: {
     relation: "ancestor",
-    component: { $eq: "DialogContent" }
+    component: { $eq: n.DialogContent }
   }
-}, h = {
+}, H$1 = {
   type: "container",
   icon: DialogIcon,
   constraints: [
     {
       relation: "descendant",
-      component: { $eq: "DialogTrigger" }
+      component: { $eq: n.DialogTrigger }
     },
     {
       relation: "descendant",
-      component: { $eq: "DialogOverlay" }
+      component: { $eq: n.DialogOverlay }
     }
   ]
 };
-const P$1 = {
+const v$1 = {
   type: "container",
   icon: TriggerIcon,
   constraints: {
     relation: "ancestor",
-    component: { $eq: "Popover" }
+    component: { $eq: n.Popover }
   }
-}, v$2 = {
+}, g$1 = {
   type: "container",
   presetStyle: {
     div
@@ -5578,30 +5532,30 @@ const P$1 = {
   icon: ContentIcon,
   constraints: {
     relation: "ancestor",
-    component: { $eq: "Popover" }
+    component: { $eq: n.Popover }
   }
-}, m$1 = {
+}, l$1 = {
   type: "container",
   icon: PopoverIcon,
   constraints: [
     {
       relation: "descendant",
-      component: { $eq: "PopoverTrigger" }
+      component: { $eq: n.PopoverTrigger }
     },
     {
       relation: "descendant",
-      component: { $eq: "PopoverContent" }
+      component: { $eq: n.PopoverContent }
     }
   ]
 };
-const l$2 = {
+const m = {
   type: "container",
   icon: TriggerIcon,
   constraints: {
     relation: "ancestor",
-    component: { $eq: "Tooltip" }
+    component: { $eq: n.Tooltip }
   }
-}, T$1 = {
+}, g = {
   type: "container",
   icon: ContentIcon,
   presetStyle: {
@@ -5609,64 +5563,64 @@ const l$2 = {
   },
   constraints: {
     relation: "ancestor",
-    component: { $eq: "Tooltip" }
+    component: { $eq: n.Tooltip }
   }
-}, m = {
+}, d$1 = {
   type: "container",
   constraints: [
     {
       relation: "descendant",
-      component: { $eq: "TooltipTrigger" }
+      component: { $eq: n.TooltipTrigger }
     },
     {
       relation: "descendant",
-      component: { $eq: "TooltipContent" }
+      component: { $eq: n.TooltipContent }
     }
   ],
   icon: TooltipIcon
 };
-const t = {
+const o = {
   div
-}, y$2 = {
+}, C$3 = {
   type: "container",
   icon: TabsIcon,
   constraints: [
     {
       relation: "descendant",
-      component: { $eq: "TabsTrigger" }
+      component: { $eq: n.TabsTrigger }
     },
     {
       relation: "descendant",
-      component: { $eq: "TabsList" }
+      component: { $eq: n.TabsList }
     },
     {
       relation: "descendant",
-      component: { $eq: "TabsContent" }
+      component: { $eq: n.TabsContent }
     }
   ],
-  presetStyle: t
-}, $$1 = {
+  presetStyle: o
+}, L = {
   type: "container",
   icon: HeaderIcon,
   constraints: {
     relation: "ancestor",
-    component: { $eq: "Tabs" }
+    component: { $eq: n.Tabs }
   },
-  presetStyle: t
-}, C$2 = {
+  presetStyle: o
+}, u = {
   type: "container",
   icon: TriggerIcon,
   constraints: [
     {
       relation: "ancestor",
-      component: { $eq: "TabsList" }
+      component: { $eq: n.TabsList }
     },
     {
       relation: "ancestor",
-      component: { $neq: "TabsTrigger" }
+      component: { $neq: n.TabsTrigger }
     }
   ],
-  indexWithinAncestor: "Tabs",
+  indexWithinAncestor: n.Tabs,
   label: "Tab Trigger",
   states: [
     ...defaultStates,
@@ -5677,71 +5631,71 @@ const t = {
     }
   ],
   presetStyle: {
-    button: [button, b$3].flat()
+    button: [button, b$6].flat()
   }
-}, L$1 = {
+}, x$2 = {
   type: "container",
   label: "Tab Content",
   icon: ContentIcon,
   constraints: {
     relation: "ancestor",
-    component: { $eq: "Tabs" }
+    component: { $eq: n.Tabs }
   },
-  indexWithinAncestor: "Tabs",
-  presetStyle: t
+  indexWithinAncestor: n.Tabs,
+  presetStyle: o
 };
 const p = {
   label
-}, l$1 = {
+}, l = {
   type: "container",
   icon: LabelIcon,
   presetStyle: p,
   states: defaultStates
 };
-const o = {
+const t = {
   div
-}, f$2 = {
+}, H = {
   type: "container",
   icon: AccordionIcon,
-  presetStyle: o,
+  presetStyle: t,
   constraints: [
     {
       relation: "descendant",
-      component: { $eq: "AccordionItem" }
+      component: { $eq: n.AccordionItem }
     }
   ]
-}, v$1 = {
+}, C$2 = {
   type: "container",
   label: "Item",
   icon: ItemIcon,
   constraints: [
     {
       relation: "ancestor",
-      component: { $eq: "Accordion" }
+      component: { $eq: n.Accordion }
     },
     {
       relation: "descendant",
-      component: { $eq: "AccordionHeader" }
+      component: { $eq: n.AccordionHeader }
     },
     {
       relation: "descendant",
-      component: { $eq: "AccordionContent" }
+      component: { $eq: n.AccordionContent }
     }
   ],
-  indexWithinAncestor: "Accordion",
-  presetStyle: o
-}, H = {
+  indexWithinAncestor: n.Accordion,
+  presetStyle: t
+}, T = {
   type: "container",
   label: "Item Header",
   icon: HeaderIcon,
   constraints: [
     {
       relation: "ancestor",
-      component: { $eq: "AccordionItem" }
+      component: { $eq: n.AccordionItem }
     },
     {
       relation: "descendant",
-      component: { $eq: "AccordionTrigger" }
+      component: { $eq: n.AccordionTrigger }
     }
   ],
   presetStyle: {
@@ -5757,13 +5711,13 @@ const o = {
       }
     ]
   }
-}, C$1 = {
+}, x$1 = {
   type: "container",
   label: "Item Trigger",
   icon: TriggerIcon,
   constraints: {
     relation: "ancestor",
-    component: { $eq: "AccordionHeader" }
+    component: { $eq: n.AccordionHeader }
   },
   states: [
     ...defaultStates,
@@ -5774,19 +5728,19 @@ const o = {
     }
   ],
   presetStyle: {
-    button: [button, b$3].flat()
+    button: [button, b$6].flat()
   }
-}, T = {
+}, M = {
   type: "container",
   label: "Item Content",
   icon: ContentIcon,
   constraints: {
     relation: "ancestor",
-    component: { $eq: "AccordionItem" }
+    component: { $eq: n.AccordionItem }
   },
-  presetStyle: o
+  presetStyle: t
 };
-const y$1 = {
+const d = {
   type: "container",
   icon: NavigationMenuIcon,
   presetStyle: {
@@ -5795,102 +5749,104 @@ const y$1 = {
   constraints: [
     {
       relation: "descendant",
-      component: { $eq: "NavigationMenuList" }
+      component: { $eq: n.NavigationMenuList }
     },
     {
       relation: "descendant",
-      component: { $eq: "NavigationMenuViewport" }
+      component: { $eq: n.NavigationMenuViewport }
     }
   ]
-}, L = {
+}, $ = {
   type: "container",
   icon: ListIcon,
   constraints: [
     {
       relation: "ancestor",
-      component: { $eq: "NavigationMenu" }
+      component: { $eq: n.NavigationMenu }
     },
     {
       relation: "descendant",
-      component: { $eq: "NavigationMenuItem" }
+      component: { $eq: n.NavigationMenuItem }
     }
   ],
   presetStyle: {
     div
   },
   label: "Menu List"
-}, $ = {
+}, q$1 = {
   type: "container",
   icon: ListItemIcon,
   constraints: {
     relation: "ancestor",
-    component: { $eq: "NavigationMenuList" }
+    component: { $eq: n.NavigationMenuList }
   },
   presetStyle: {
     div
   },
-  indexWithinAncestor: "NavigationMenu",
+  indexWithinAncestor: n.NavigationMenu,
   label: "Menu Item"
-}, d$1 = {
+}, b$4 = {
   type: "container",
   icon: TriggerIcon,
   constraints: {
     relation: "ancestor",
-    component: { $eq: "NavigationMenuItem" }
+    component: { $eq: n.NavigationMenuItem }
   },
   label: "Menu Trigger"
-}, q = {
+}, w$1 = {
   type: "container",
   icon: ContentIcon,
   constraints: {
     relation: "ancestor",
-    component: { $eq: "NavigationMenuItem" }
+    component: { $eq: n.NavigationMenuItem }
   },
-  indexWithinAncestor: "NavigationMenu",
+  indexWithinAncestor: n.NavigationMenu,
   presetStyle: {
     div
   },
   label: "Menu Content"
-}, b$1 = {
+}, C$1 = {
   type: "container",
   icon: BoxIcon,
   constraints: [
     {
       relation: "ancestor",
-      component: { $eq: "NavigationMenu" }
+      component: { $eq: n.NavigationMenu }
     },
     {
       relation: "ancestor",
-      component: { $in: ["NavigationMenuContent", "NavigationMenuItem"] }
+      component: {
+        $in: [n.NavigationMenuContent, n.NavigationMenuItem]
+      }
     }
   ],
   label: "Accessible Link Wrapper"
-}, w$1 = {
+}, V = {
   type: "container",
   icon: ViewportIcon,
   constraints: {
     relation: "ancestor",
-    component: { $eq: "NavigationMenu" }
+    component: { $eq: n.NavigationMenu }
   },
   presetStyle: {
     div
   },
   label: "Menu Viewport"
 };
-const M = {
+const C = {
   type: "container",
   icon: SelectIcon,
   constraints: [
     {
       relation: "descendant",
-      component: { $eq: "SelectTrigger" }
+      component: { $eq: n.SelectTrigger }
     },
     {
       relation: "descendant",
-      component: { $eq: "SelectContent" }
+      component: { $eq: n.SelectContent }
     }
   ]
-}, x = {
+}, w = {
   type: "container",
   icon: TriggerIcon,
   presetStyle: {
@@ -5899,14 +5855,14 @@ const M = {
   constraints: [
     {
       relation: "ancestor",
-      component: { $eq: "Select" }
+      component: { $eq: n.Select }
     },
     {
       relation: "descendant",
-      component: { $eq: "SelectValue" }
+      component: { $eq: n.SelectValue }
     }
   ]
-}, C = {
+}, b$3 = {
   type: "container",
   label: "Value",
   icon: FormTextFieldIcon,
@@ -5915,9 +5871,9 @@ const M = {
   },
   constraints: {
     relation: "ancestor",
-    component: { $eq: "SelectTrigger" }
+    component: { $eq: n.SelectTrigger }
   }
-}, w = {
+}, f = {
   type: "container",
   icon: ContentIcon,
   presetStyle: {
@@ -5926,14 +5882,14 @@ const M = {
   constraints: [
     {
       relation: "ancestor",
-      component: { $eq: "Select" }
+      component: { $eq: n.Select }
     },
     {
       relation: "descendant",
-      component: { $eq: "SelectViewport" }
+      component: { $eq: n.SelectViewport }
     }
   ]
-}, b = {
+}, v = {
   type: "container",
   icon: ViewportIcon,
   presetStyle: {
@@ -5942,61 +5898,61 @@ const M = {
   constraints: [
     {
       relation: "ancestor",
-      component: { $eq: "SelectContent" }
+      component: { $eq: n.SelectContent }
     },
     {
       relation: "descendant",
-      component: { $eq: "SelectItem" }
+      component: { $eq: n.SelectItem }
     }
   ]
-}, f$1 = {
+}, P = {
   type: "container",
   icon: ItemIcon,
   constraints: [
     {
       relation: "ancestor",
-      component: { $eq: "SelectViewport" }
+      component: { $eq: n.SelectViewport }
     },
     {
       relation: "descendant",
-      component: { $eq: "SelectItemIndicator" }
+      component: { $eq: n.SelectItemIndicator }
     },
     {
       relation: "descendant",
-      component: { $eq: "SelectItemText" }
+      component: { $eq: n.SelectItemText }
     }
   ],
   presetStyle: {
     div
   }
-}, v = {
+}, h = {
   type: "container",
   label: "Indicator",
   icon: CheckMarkIcon,
   constraints: {
     relation: "ancestor",
-    component: { $eq: "SelectItem" }
+    component: { $eq: n.SelectItem }
   },
   presetStyle: {
     span
   }
-}, P = {
+}, k = {
   type: "container",
   label: "Item Text",
   icon: TextIcon,
   constraints: {
     relation: "ancestor",
-    component: { $eq: "SelectItem" }
+    component: { $eq: n.SelectItem }
   },
   presetStyle: {
     span
   }
 };
-const d = {
+const S = {
   type: "container",
   constraints: {
     relation: "descendant",
-    component: { $eq: "SwitchThumb" }
+    component: { $eq: n.SwitchThumb }
   },
   icon: SwitchIcon,
   states: [
@@ -6013,13 +5969,13 @@ const d = {
     }
   ],
   presetStyle: {
-    button: [button, b$3].flat()
+    button: [button, b$6].flat()
   }
-}, u = {
+}, b$2 = {
   type: "container",
   constraints: {
     relation: "ancestor",
-    component: { $eq: "Switch" }
+    component: { $eq: n.Switch }
   },
   icon: TriggerIcon,
   states: [
@@ -6039,11 +5995,11 @@ const d = {
     span
   }
 };
-const k = {
+const b$1 = {
   type: "container",
   constraints: {
     relation: "descendant",
-    component: { $eq: "CheckboxIndicator" }
+    component: { $eq: n.CheckboxIndicator }
   },
   icon: CheckboxCheckedIcon,
   states: [
@@ -6060,13 +6016,13 @@ const k = {
     }
   ],
   presetStyle: {
-    button: [button, b$3].flat()
+    button: [button, b$6].flat()
   }
-}, l = {
+}, x = {
   type: "container",
   constraints: {
     relation: "ancestor",
-    component: { $eq: "Checkbox" }
+    component: { $eq: n.Checkbox }
   },
   icon: TriggerIcon,
   states: defaultStates,
@@ -6074,11 +6030,11 @@ const k = {
     span
   }
 };
-const I = {
+const y = {
   type: "container",
   constraints: {
     relation: "descendant",
-    component: { $eq: "RadioGroupItem" }
+    component: { $eq: n.RadioGroupItem }
   },
   icon: RadioGroupIcon,
   states: [
@@ -6097,29 +6053,29 @@ const I = {
   presetStyle: {
     div
   }
-}, y = {
+}, b = {
   type: "container",
   constraints: [
     {
       relation: "ancestor",
-      component: { $eq: "RadioGroup" }
+      component: { $eq: n.RadioGroup }
     },
     {
       relation: "descendant",
-      component: { $eq: "RadioGroupIndicator" }
+      component: { $eq: n.RadioGroupIndicator }
     }
   ],
   icon: ItemIcon,
   states: defaultStates,
   presetStyle: {
-    button: [button, b$3].flat()
+    button: [button, b$6].flat()
   }
-}, f = {
+}, q = {
   type: "container",
   icon: TriggerIcon,
   constraints: {
     relation: "ancestor",
-    component: { $eq: "RadioGroupItem" }
+    component: { $eq: n.RadioGroupItem }
   },
   states: defaultStates,
   presetStyle: {
@@ -6128,54 +6084,54 @@ const I = {
 };
 const radixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Accordion: f$2,
-  AccordionContent: T,
-  AccordionHeader: H,
-  AccordionItem: v$1,
-  AccordionTrigger: C$1,
-  Checkbox: k,
-  CheckboxIndicator: l,
-  Collapsible: c,
-  CollapsibleContent: b$4,
-  CollapsibleTrigger: C$3,
-  Dialog: h,
-  DialogClose: B,
-  DialogContent: S,
-  DialogDescription: x$1,
-  DialogOverlay: P$2,
-  DialogTitle: b$2,
-  DialogTrigger: O,
-  Label: l$1,
-  NavigationMenu: y$1,
-  NavigationMenuContent: q,
-  NavigationMenuItem: $,
-  NavigationMenuLink: b$1,
-  NavigationMenuList: L,
-  NavigationMenuTrigger: d$1,
-  NavigationMenuViewport: w$1,
-  Popover: m$1,
-  PopoverContent: v$2,
-  PopoverTrigger: P$1,
-  RadioGroup: I,
-  RadioGroupIndicator: f,
-  RadioGroupItem: y,
-  Select: M,
-  SelectContent: w,
-  SelectItem: f$1,
-  SelectItemIndicator: v,
-  SelectItemText: P,
-  SelectTrigger: x,
-  SelectValue: C,
-  SelectViewport: b,
-  Switch: d,
-  SwitchThumb: u,
-  Tabs: y$2,
-  TabsContent: L$1,
-  TabsList: $$1,
-  TabsTrigger: C$2,
-  Tooltip: m,
-  TooltipContent: T$1,
-  TooltipTrigger: l$2
+  Accordion: H,
+  AccordionContent: M,
+  AccordionHeader: T,
+  AccordionItem: C$2,
+  AccordionTrigger: x$1,
+  Checkbox: b$1,
+  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,
+  NavigationMenuContent: w$1,
+  NavigationMenuItem: q$1,
+  NavigationMenuLink: C$1,
+  NavigationMenuList: $,
+  NavigationMenuTrigger: b$4,
+  NavigationMenuViewport: V,
+  Popover: l$1,
+  PopoverContent: g$1,
+  PopoverTrigger: v$1,
+  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
 }, Symbol.toStringTag, { value: "Module" }));
 const createFramework$2 = async () => {
   const routeTemplatesDir = join("app", "route-templates");
@@ -6199,20 +6155,12 @@ const createFramework$2 = async () => {
   const radixComponentNamespacedMetas = {};
   for (const [name2, meta] of Object.entries(radixComponentMetas)) {
     const namespace = "@webstudio-is/sdk-components-react-radix";
-    radixComponentNamespacedMetas[`${namespace}:${name2}`] = namespaceMeta(
-      meta,
-      namespace,
-      new Set(Object.keys(radixComponentMetas))
-    );
+    radixComponentNamespacedMetas[`${namespace}:${name2}`] = meta;
   }
   const animationComponentNamespacedMetas = {};
   for (const [name2, meta] of Object.entries(animationComponentMetas)) {
     const namespace = "@webstudio-is/sdk-components-animation";
-    animationComponentNamespacedMetas[`${namespace}:${name2}`] = namespaceMeta(
-      meta,
-      namespace,
-      new Set(Object.keys(animationComponentMetas))
-    );
+    animationComponentNamespacedMetas[`${namespace}:${name2}`] = meta;
   }
   return {
     components: [
@@ -6265,11 +6213,11 @@ const createFramework$2 = async () => {
 };
 const reactRouterComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Body: n$5,
-  Form: n$3,
-  Link: l$6,
-  RemixForm: p$9,
-  RichTextLink: a$7
+  Body: n$9,
+  Form: c$4,
+  Link: n$5,
+  RemixForm: n$4,
+  RichTextLink: a$8
 }, Symbol.toStringTag, { value: "Module" }));
 const createFramework$1 = async () => {
   const routeTemplatesDir = join("app", "route-templates");
@@ -6293,20 +6241,12 @@ const createFramework$1 = async () => {
   const radixComponentNamespacedMetas = {};
   for (const [name2, meta] of Object.entries(radixComponentMetas)) {
     const namespace = "@webstudio-is/sdk-components-react-radix";
-    radixComponentNamespacedMetas[`${namespace}:${name2}`] = namespaceMeta(
-      meta,
-      namespace,
-      new Set(Object.keys(radixComponentMetas))
-    );
+    radixComponentNamespacedMetas[`${namespace}:${name2}`] = meta;
   }
   const animationComponentNamespacedMetas = {};
   for (const [name2, meta] of Object.entries(animationComponentMetas)) {
     const namespace = "@webstudio-is/sdk-components-animation";
-    animationComponentNamespacedMetas[`${namespace}:${name2}`] = namespaceMeta(
-      meta,
-      namespace,
-      new Set(Object.keys(animationComponentMetas))
-    );
+    animationComponentNamespacedMetas[`${namespace}:${name2}`] = meta;
   }
   return {
     components: [
@@ -6381,20 +6321,12 @@ const createFramework = async () => {
   const radixComponentNamespacedMetas = {};
   for (const [name2, meta] of Object.entries(radixComponentMetas)) {
     const namespace = "@webstudio-is/sdk-components-react-radix";
-    radixComponentNamespacedMetas[`${namespace}:${name2}`] = namespaceMeta(
-      meta,
-      namespace,
-      new Set(Object.keys(radixComponentMetas))
-    );
+    radixComponentNamespacedMetas[`${namespace}:${name2}`] = meta;
   }
   const animationComponentNamespacedMetas = {};
   for (const [name2, meta] of Object.entries(animationComponentMetas)) {
     const namespace = "@webstudio-is/sdk-components-animation";
-    animationComponentNamespacedMetas[`${namespace}:${name2}`] = namespaceMeta(
-      meta,
-      namespace,
-      new Set(Object.keys(animationComponentMetas))
-    );
+    animationComponentNamespacedMetas[`${namespace}:${name2}`] = meta;
   }
   return {
     components: [
@@ -7006,7 +6938,7 @@ const build = async (options) => {
 const exitIfCancelled = (value) => {
   if (isCancel(value)) {
     cancel("Project initialization is cancelled");
-    process.exit(0);
+    process.exit(1);
   }
   return value;
 };
@@ -7014,7 +6946,7 @@ const initFlow = async (options) => {
   const isProjectConfigured = await isFileExists(".webstudio/config.json");
   let shouldInstallDeps = false;
   let folderName;
-  let projectTemplate = void 0;
+  let projectTemplate;
   if (isProjectConfigured === false) {
     const shouldCreateFolder = exitIfCancelled(
       await confirm({
@@ -7043,12 +6975,14 @@ const initFlow = async (options) => {
       })
     );
     await link({ link: shareLink });
-    projectTemplate = exitIfCancelled(
-      await select$1({
-        message: "Where would you like to deploy your project?",
-        options: PROJECT_TEMPLATES
-      })
-    );
+    if (!options.template.length) {
+      projectTemplate = exitIfCancelled(
+        await select$1({
+          message: "Where would you like to deploy your project?",
+          options: PROJECT_TEMPLATES
+        })
+      );
+    }
     shouldInstallDeps = exitIfCancelled(
       await confirm({
         message: "Would you like to install dependencies? (recommended)",
@@ -7056,7 +6990,7 @@ const initFlow = async (options) => {
       })
     );
   }
-  if (projectTemplate === void 0) {
+  if (!options.template.length && projectTemplate === void 0) {
     projectTemplate = exitIfCancelled(
       await select$1({
         message: "Where would you like to deploy your project?",
@@ -7067,14 +7001,12 @@ const initFlow = async (options) => {
   await sync({ buildId: void 0, origin: void 0, authToken: void 0 });
   await build({
     ...options,
-    ...projectTemplate && {
-      template: mapToTemplatesFromOptions([projectTemplate])
-    }
+    template: projectTemplate ? mapToTemplatesFromOptions([projectTemplate]) : options.template
   });
   if (shouldInstallDeps === true) {
     const install = spinner();
     install.start("Installing dependencies");
-    await x$2("npm", ["install"]);
+    await x$4("npm", ["install"]);
     install.stop("Installed dependencies");
   }
   log.message();
@@ -7105,7 +7037,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.208.0";
+const version = "0.210.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";
@@ -7150,28 +7082,28 @@ const dependencies = {
   "reserved-identifiers": "^1.0.0",
   tinyexec: "^0.3.2",
   yargs: "^17.7.2",
-  zod: "^3.22.4"
+  zod: "^3.24.2"
 };
 const devDependencies = {
   "@netlify/vite-plugin-react-router": "^1.0.0",
-  "@react-router/dev": "^7.3.0",
-  "@react-router/fs-routes": "^7.3.0",
-  "@remix-run/cloudflare": "^2.16.0",
-  "@remix-run/cloudflare-pages": "^2.16.0",
-  "@remix-run/dev": "^2.16.0",
-  "@remix-run/node": "^2.16.0",
-  "@remix-run/react": "^2.16.0",
-  "@remix-run/server-runtime": "^2.16.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",
   "@types/react": "^18.2.70",
   "@types/react-dom": "^18.2.25",
   "@types/yargs": "^17.0.33",
   "@vercel/react-router": "^1.1.0",
   "@vitejs/plugin-react": "^4.3.4",
+  "@webstudio-is/css-engine": "workspace:*",
   "@webstudio-is/http-client": "workspace:*",
   "@webstudio-is/image": "workspace:*",
   "@webstudio-is/react-sdk": "workspace:*",
   "@webstudio-is/sdk": "workspace:*",
-  "@webstudio-is/css-engine": "workspace:*",
   "@webstudio-is/sdk-components-animation": "workspace:*",
   "@webstudio-is/sdk-components-react": "workspace:*",
   "@webstudio-is/sdk-components-react-radix": "workspace:*",
@@ -7179,13 +7111,13 @@ const devDependencies = {
   "@webstudio-is/sdk-components-react-router": "workspace:*",
   "@webstudio-is/tsconfig": "workspace:*",
   h3: "^1.15.1",
-  ipx: "^3.0.1",
+  ipx: "^3.0.3",
   prettier: "3.5.3",
   react: "18.3.0-canary-14898b6a9-20240318",
   "react-dom": "18.3.0-canary-14898b6a9-20240318",
-  "react-router": "^7.3.0",
+  "react-router": "^7.4.0",
   "ts-expect": "^1.3.0",
-  vike: "^0.4.224",
+  vike: "^0.4.227",
   vite: "^5.4.11",
   vitest: "^3.0.8",
   wrangler: "^3.63.2"