webstudio 0.205.0 → 0.206.0

package/lib/cli.js

@@ -1106,7 +1106,10 @@ const mergeStyles = (styleMap) => {
   mergeBackgroundPosition(newStyle);
   return newStyle;
 };
-const hyphenateProperty = (property) => property.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+const hyphenateProperty = (property) => property.replace(
+  /[A-Z]/g,
+  (match) => "-" + match.toLowerCase()
+);
 const mapGroupBy = (array, getKey2) => {
   const groups = /* @__PURE__ */ new Map();
   for (const item of array) {
@@ -1889,6 +1892,12 @@ const WsEmbedTemplate = z.lazy(
     z.union([EmbedTemplateInstance, EmbedTemplateText, EmbedTemplateExpression])
   )
 );
+const PresetStyleDecl = z.object({
+  // State selector, e.g. :hover
+  state: z.optional(z.string()),
+  property: z.string(),
+  value: StyleValue
+});
 z.object({
   props: z.record(PropMeta),
   // Props that will be always visible in properties panel.
@@ -1940,9 +1949,7 @@ z.object({
   label: z.optional(z.string()),
   description: z.string().optional(),
   icon: z.string(),
-  presetStyle: z.optional(
-    z.record(z.string(), z.array(EmbedTemplateStyleDecl))
-  ),
+  presetStyle: z.optional(z.record(z.string(), z.array(PresetStyleDecl))),
   states: z.optional(z.array(ComponentState)),
   template: z.optional(WsEmbedTemplate),
   order: z.number().optional()
@@ -2004,21 +2011,24 @@ const WindowTitleIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" vie
 const 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>`;
 const 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>`;
 const div = [
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
   {
-    property: "borderRightWidth",
+    property: "border-top-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "borderBottomWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "borderLeftWidth",
+    property: "border-bottom-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
-  { property: "outlineWidth", value: { type: "unit", unit: "px", value: 1 } }
+  {
+    property: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  { property: "outline-width", value: { type: "unit", unit: "px", value: 1 } }
 ];
 const address = div;
 const article = div;
@@ -2048,88 +2058,100 @@ const p = div;
 const span = div;
 const html = [
   { property: "display", value: { type: "keyword", value: "grid" } },
-  { property: "minHeight", value: { type: "unit", unit: "%", value: 100 } },
+  { property: "min-height", value: { type: "unit", unit: "%", value: 100 } },
   {
-    property: "fontFamily",
+    property: "font-family",
     value: { type: "fontFamily", value: ["Arial", "Roboto", "sans-serif"] }
   },
-  { property: "fontSize", value: { type: "unit", unit: "px", value: 16 } },
+  { property: "font-size", value: { type: "unit", unit: "px", value: 16 } },
   {
-    property: "lineHeight",
+    property: "line-height",
     value: { type: "unit", unit: "number", value: 1.2 }
   },
   {
-    property: "whiteSpaceCollapse",
+    property: "white-space-collapse",
     value: { type: "keyword", value: "preserve" }
   }
 ];
 const body = [
-  { property: "marginTop", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
   {
-    property: "marginRight",
+    property: "margin-right",
     value: { type: "unit", unit: "number", value: 0 }
   },
   {
-    property: "marginBottom",
+    property: "margin-bottom",
     value: { type: "unit", unit: "number", value: 0 }
   },
-  { property: "marginLeft", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
   {
-    property: "borderRightWidth",
+    property: "margin-left",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "borderBottomWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "borderLeftWidth",
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 }
   }
 ];
 const hr = [
   { property: "height", value: { type: "unit", unit: "number", value: 0 } },
   { property: "color", value: { type: "keyword", value: "inherit" } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
   {
-    property: "borderRightWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "borderBottomWidth",
+    property: "border-bottom-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "borderLeftWidth",
+    property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 }
   }
 ];
 const b = [
   {
-    property: "fontWeight",
+    property: "font-weight",
     value: { type: "unit", unit: "number", value: 700 }
   },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
   {
-    property: "borderRightWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "borderBottomWidth",
+    property: "border-bottom-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "borderLeftWidth",
+    property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 }
   }
 ];
 const code = [
   {
-    property: "fontFamily",
+    property: "font-family",
     value: {
       type: "fontFamily",
       value: [
@@ -2142,174 +2164,222 @@ const code = [
       ]
     }
   },
-  { property: "fontSize", value: { type: "unit", unit: "em", value: 1 } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  { property: "font-size", value: { type: "unit", unit: "em", value: 1 } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
   {
-    property: "borderRightWidth",
+    property: "border-top-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "borderBottomWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "borderLeftWidth",
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 }
   }
 ];
 const sub = [
-  { property: "fontSize", value: { type: "unit", unit: "%", value: 75 } },
-  { property: "lineHeight", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "font-size", value: { type: "unit", unit: "%", value: 75 } },
+  {
+    property: "line-height",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
   { property: "position", value: { type: "keyword", value: "relative" } },
-  { property: "verticalAlign", value: { type: "keyword", value: "baseline" } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  { property: "vertical-align", value: { type: "keyword", value: "baseline" } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
   {
-    property: "borderRightWidth",
+    property: "border-top-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "borderBottomWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "borderLeftWidth",
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   { property: "bottom", value: { type: "unit", unit: "em", value: -0.25 } }
 ];
 const sup = [
-  { property: "fontSize", value: { type: "unit", unit: "%", value: 75 } },
-  { property: "lineHeight", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "font-size", value: { type: "unit", unit: "%", value: 75 } },
+  {
+    property: "line-height",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
   { property: "position", value: { type: "keyword", value: "relative" } },
-  { property: "verticalAlign", value: { type: "keyword", value: "baseline" } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  { property: "vertical-align", value: { type: "keyword", value: "baseline" } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
   {
-    property: "borderRightWidth",
+    property: "border-top-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "borderBottomWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "borderLeftWidth",
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   { property: "top", value: { type: "unit", unit: "em", value: -0.5 } }
 ];
 const input = [
-  { property: "fontFamily", value: { type: "keyword", value: "inherit" } },
-  { property: "fontSize", value: { type: "unit", unit: "%", value: 100 } },
+  { property: "font-family", value: { type: "keyword", value: "inherit" } },
+  { property: "font-size", value: { type: "unit", unit: "%", value: 100 } },
   {
-    property: "lineHeight",
+    property: "line-height",
     value: { type: "unit", unit: "number", value: 1.15 }
   },
-  { property: "marginTop", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
+  {
+    property: "margin-right",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
   {
-    property: "marginRight",
+    property: "margin-bottom",
     value: { type: "unit", unit: "number", value: 0 }
   },
   {
-    property: "marginBottom",
+    property: "margin-left",
     value: { type: "unit", unit: "number", value: 0 }
   },
-  { property: "marginLeft", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
   {
-    property: "borderRightWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "borderBottomWidth",
+    property: "border-bottom-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "borderLeftWidth",
+    property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
-  { property: "borderTopStyle", value: { type: "keyword", value: "solid" } },
-  { property: "borderRightStyle", value: { type: "keyword", value: "solid" } },
-  { property: "borderBottomStyle", value: { type: "keyword", value: "solid" } },
-  { property: "borderLeftStyle", value: { type: "keyword", value: "solid" } }
+  { property: "border-top-style", value: { type: "keyword", value: "solid" } },
+  {
+    property: "border-right-style",
+    value: { type: "keyword", value: "solid" }
+  },
+  {
+    property: "border-bottom-style",
+    value: { type: "keyword", value: "solid" }
+  },
+  { property: "border-left-style", value: { type: "keyword", value: "solid" } }
 ];
 const textarea = input;
 const radio = [
-  { property: "fontFamily", value: { type: "keyword", value: "inherit" } },
-  { property: "fontSize", value: { type: "unit", unit: "%", value: 100 } },
+  { property: "font-family", value: { type: "keyword", value: "inherit" } },
+  { property: "font-size", value: { type: "unit", unit: "%", value: 100 } },
   {
-    property: "lineHeight",
+    property: "line-height",
     value: { type: "unit", unit: "number", value: 1.15 }
   },
-  { property: "marginTop", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
   {
-    property: "marginRight",
+    property: "margin-right",
     value: { type: "unit", unit: "number", value: 0 }
   },
   {
-    property: "marginBottom",
+    property: "margin-bottom",
     value: { type: "unit", unit: "number", value: 0 }
   },
-  { property: "marginLeft", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
   {
-    property: "borderRightWidth",
+    property: "margin-left",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "borderBottomWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "borderLeftWidth",
+    property: "border-bottom-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
-  { property: "borderTopStyle", value: { type: "keyword", value: "none" } },
-  { property: "borderRightStyle", value: { type: "keyword", value: "none" } },
-  { property: "borderBottomStyle", value: { type: "keyword", value: "none" } },
-  { property: "borderLeftStyle", value: { type: "keyword", value: "none" } }
+  {
+    property: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  { property: "border-top-style", value: { type: "keyword", value: "none" } },
+  { property: "border-right-style", value: { type: "keyword", value: "none" } },
+  {
+    property: "border-bottom-style",
+    value: { type: "keyword", value: "none" }
+  },
+  { property: "border-left-style", value: { type: "keyword", value: "none" } }
 ];
 const checkbox = radio;
 const button = [
-  { property: "fontFamily", value: { type: "keyword", value: "inherit" } },
-  { property: "fontSize", value: { type: "unit", unit: "%", value: 100 } },
+  { property: "font-family", value: { type: "keyword", value: "inherit" } },
+  { property: "font-size", value: { type: "unit", unit: "%", value: 100 } },
   {
-    property: "lineHeight",
+    property: "line-height",
     value: { type: "unit", unit: "number", value: 1.15 }
   },
-  { property: "marginTop", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
+  {
+    property: "margin-right",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
   {
-    property: "marginRight",
+    property: "margin-bottom",
     value: { type: "unit", unit: "number", value: 0 }
   },
   {
-    property: "marginBottom",
+    property: "margin-left",
     value: { type: "unit", unit: "number", value: 0 }
   },
-  { property: "marginLeft", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
   {
-    property: "borderRightWidth",
+    property: "border-top-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "borderBottomWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "borderLeftWidth",
+    property: "border-bottom-width",
     value: { type: "unit", unit: "px", value: 1 }
   },
-  { property: "borderTopStyle", value: { type: "keyword", value: "solid" } },
-  { property: "borderRightStyle", value: { type: "keyword", value: "solid" } },
-  { property: "borderBottomStyle", value: { type: "keyword", value: "solid" } },
-  { property: "borderLeftStyle", value: { type: "keyword", value: "solid" } },
-  { property: "textTransform", value: { type: "keyword", value: "none" } }
+  {
+    property: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  { property: "border-top-style", value: { type: "keyword", value: "solid" } },
+  {
+    property: "border-right-style",
+    value: { type: "keyword", value: "solid" }
+  },
+  {
+    property: "border-bottom-style",
+    value: { type: "keyword", value: "solid" }
+  },
+  { property: "border-left-style", value: { type: "keyword", value: "solid" } },
+  { property: "text-transform", value: { type: "keyword", value: "none" } }
 ];
 const select = button;
 const rootComponent = "ws:root";
@@ -2406,6 +2476,51 @@ const parseComponentName = (componentName) => {
   }
   return [namespace, name2];
 };
+const getIndexesWithinAncestors = (metas, instances, rootIds) => {
+  const ancestors = /* @__PURE__ */ new Set();
+  for (const meta2 of metas.values()) {
+    if (meta2.indexWithinAncestor !== void 0) {
+      ancestors.add(meta2.indexWithinAncestor);
+    }
+  }
+  const indexes = /* @__PURE__ */ new Map();
+  const traverseInstances2 = (instances2, instanceId, latestIndexes2 = /* @__PURE__ */ new Map()) => {
+    const instance = instances2.get(instanceId);
+    if (instance === void 0) {
+      return;
+    }
+    const meta2 = metas.get(instance.component);
+    if (ancestors.has(instance.component)) {
+      latestIndexes2 = new Map(latestIndexes2);
+      latestIndexes2.set(instance.component, /* @__PURE__ */ new Map());
+    }
+    if (instance.component === blockTemplateComponent) {
+      latestIndexes2 = new Map(latestIndexes2);
+      for (const key of latestIndexes2.keys()) {
+        latestIndexes2.set(key, /* @__PURE__ */ new Map());
+      }
+    }
+    if ((meta2 == null ? void 0 : meta2.indexWithinAncestor) !== void 0) {
+      const ancestorIndexes = latestIndexes2.get(meta2.indexWithinAncestor);
+      if (ancestorIndexes) {
+        let index = ancestorIndexes.get(instance.component) ?? -1;
+        index += 1;
+        ancestorIndexes.set(instance.component, index);
+        indexes.set(instance.id, index);
+      }
+    }
+    for (const child of instance.children) {
+      if (child.type === "id") {
+        traverseInstances2(instances2, child.value, latestIndexes2);
+      }
+    }
+  };
+  const latestIndexes = /* @__PURE__ */ new Map();
+  for (const instanceId of rootIds) {
+    traverseInstances2(instances, instanceId, latestIndexes);
+  }
+  return indexes;
+};
 const SYSTEM_VARIABLE_ID = ":system";
 const systemParameter = {
   id: SYSTEM_VARIABLE_ID,
@@ -3250,48 +3365,6 @@ const namespaceMeta = (meta2, namespace, components) => {
   }
   return newMeta;
 };
-const getIndexesWithinAncestors = (metas, instances, rootIds) => {
-  const ancestors = /* @__PURE__ */ new Set();
-  for (const meta2 of metas.values()) {
-    if (meta2.indexWithinAncestor !== void 0) {
-      ancestors.add(meta2.indexWithinAncestor);
-    }
-  }
-  const indexes = /* @__PURE__ */ new Map();
-  const traverseInstances2 = (instances2, instanceId, latestIndexes2 = /* @__PURE__ */ new Map()) => {
-    const instance = instances2.get(instanceId);
-    if (instance === void 0) {
-      return;
-    }
-    const meta2 = metas.get(instance.component);
-    if (meta2 === void 0) {
-      return;
-    }
-    if (ancestors.has(instance.component)) {
-      latestIndexes2 = new Map(latestIndexes2);
-      latestIndexes2.set(instance.component, /* @__PURE__ */ new Map());
-    }
-    if (meta2.indexWithinAncestor !== void 0) {
-      const ancestorIndexes = latestIndexes2.get(meta2.indexWithinAncestor);
-      if (ancestorIndexes !== void 0) {
-        let index = ancestorIndexes.get(instance.component) ?? -1;
-        index += 1;
-        ancestorIndexes.set(instance.component, index);
-        indexes.set(instance.id, index);
-      }
-    }
-    for (const child of instance.children) {
-      if (child.type === "id") {
-        traverseInstances2(instances2, child.value, latestIndexes2);
-      }
-    }
-  };
-  const latestIndexes = /* @__PURE__ */ new Map();
-  for (const instanceId of rootIds) {
-    traverseInstances2(instances, instanceId, latestIndexes);
-  }
-  return indexes;
-};
 const generateAction = ({
   scope,
   prop,
@@ -3586,13 +3659,16 @@ const generateWebstudioComponent = ({
   instances,
   props: props2,
   dataSources,
-  indexesWithinAncestors,
+  metas,
   classesMap
 }) => {
   const instance = instances.get(rootInstanceId);
   if (instance === void 0) {
     return "";
   }
+  const indexesWithinAncestors = getIndexesWithinAncestors(metas, instances, [
+    rootInstanceId
+  ]);
   const usedDataSources = /* @__PURE__ */ new Map();
   const generatedJsx = generateJsxElement({
     context: "expression",
@@ -3807,7 +3883,7 @@ const presetStyle$y = {
       value: { type: "keyword", value: "contents" }
     },
     {
-      property: "whiteSpaceCollapse",
+      property: "white-space-collapse",
       value: { type: "keyword", value: "collapse" }
     }
   ]
@@ -3852,7 +3928,7 @@ const meta$G = {
         value: { type: "keyword", value: "contents" }
       },
       {
-        property: "whiteSpaceCollapse",
+        property: "white-space-collapse",
         value: { type: "keyword", value: "collapse" }
       }
     ]
@@ -3862,11 +3938,11 @@ const presetStyle$x = {
   body: [
     ...body,
     {
-      property: "WebkitFontSmoothing",
+      property: "-webkit-font-smoothing",
       value: { type: "keyword", value: "antialiased" }
     },
     {
-      property: "MozOsxFontSmoothing",
+      property: "-moz-osx-font-smoothing",
       value: { type: "keyword", value: "grayscale" }
     }
   ]
@@ -3902,7 +3978,7 @@ const presetStyle$v = {
   div: [
     ...div,
     {
-      property: "minHeight",
+      property: "min-height",
       value: { type: "unit", unit: "em", value: 1 }
     }
   ]
@@ -4005,7 +4081,7 @@ const presetStyle$p = {
   i: [
     ...i,
     {
-      property: "fontStyle",
+      property: "font-style",
       value: { type: "keyword", value: "italic" }
     }
   ]
@@ -4108,7 +4184,7 @@ const meta$r = {
 const presetStyle$k = {
   form: [
     ...form,
-    { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
+    { property: "min-height", value: { type: "unit", unit: "px", value: 20 } }
   ]
 };
 const meta$q = {
@@ -4130,7 +4206,7 @@ const presetStyle$j = {
     ...img,
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
     {
-      property: "maxWidth",
+      property: "max-width",
       value: { type: "unit", unit: "%", value: 100 }
     },
     // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
@@ -4160,47 +4236,47 @@ const meta$p = {
 const presetStyle$i = {
   blockquote: [
     {
-      property: "marginTop",
+      property: "margin-top",
       value: { type: "unit", value: 0, unit: "number" }
     },
     {
-      property: "marginRight",
+      property: "margin-right",
       value: { type: "unit", value: 0, unit: "number" }
     },
     {
-      property: "marginBottom",
+      property: "margin-bottom",
       value: { type: "unit", value: 10, unit: "px" }
     },
     {
-      property: "marginLeft",
+      property: "margin-left",
       value: { type: "unit", value: 0, unit: "number" }
     },
     {
-      property: "paddingTop",
+      property: "padding-top",
       value: { type: "unit", value: 10, unit: "px" }
     },
     {
-      property: "paddingBottom",
+      property: "padding-bottom",
       value: { type: "unit", value: 10, unit: "px" }
     },
     {
-      property: "paddingLeft",
+      property: "padding-left",
       value: { type: "unit", value: 20, unit: "px" }
     },
     {
-      property: "paddingRight",
+      property: "padding-right",
       value: { type: "unit", value: 20, unit: "px" }
     },
     {
-      property: "borderLeftWidth",
+      property: "border-left-width",
       value: { type: "unit", value: 5, unit: "px" }
     },
     {
-      property: "borderLeftStyle",
+      property: "border-left-style",
       value: { type: "keyword", value: "solid" }
     },
     {
-      property: "borderLeftColor",
+      property: "border-left-color",
       value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
     }
   ]
@@ -4216,30 +4292,30 @@ const presetStyle$h = {
   ol: [
     ...ol,
     {
-      property: "marginTop",
+      property: "margin-top",
       value: { type: "keyword", value: "0" }
     },
     {
-      property: "marginBottom",
+      property: "margin-bottom",
       value: { type: "keyword", value: "10px" }
     },
     {
-      property: "paddingLeft",
+      property: "padding-left",
       value: { type: "keyword", value: "40px" }
     }
   ],
   ul: [
     ...ul,
     {
-      property: "marginTop",
+      property: "margin-top",
       value: { type: "keyword", value: "0" }
     },
     {
-      property: "marginBottom",
+      property: "margin-bottom",
       value: { type: "keyword", value: "10px" }
     },
     {
-      property: "paddingLeft",
+      property: "padding-left",
       value: { type: "keyword", value: "40px" }
     }
   ]
@@ -4275,23 +4351,23 @@ const presetStyle$f = {
       value: { type: "keyword", value: "1px" }
     },
     {
-      property: "backgroundColor",
+      property: "background-color",
       value: { type: "keyword", value: "gray" }
     },
     {
-      property: "borderTopStyle",
+      property: "border-top-style",
       value: { type: "keyword", value: "none" }
     },
     {
-      property: "borderRightStyle",
+      property: "border-right-style",
       value: { type: "keyword", value: "none" }
     },
     {
-      property: "borderLeftStyle",
+      property: "border-left-style",
       value: { type: "keyword", value: "none" }
     },
     {
-      property: "borderBottomStyle",
+      property: "border-bottom-style",
       value: { type: "keyword", value: "none" }
     }
   ]
@@ -4313,23 +4389,23 @@ const presetStyle$e = {
       value: { type: "keyword", value: "block" }
     },
     {
-      property: "whiteSpaceCollapse",
+      property: "white-space-collapse",
       value: { type: "keyword", value: "preserve" }
     },
     {
-      property: "textWrapMode",
+      property: "text-wrap-mode",
       value: { type: "keyword", value: "wrap" }
     },
     {
-      property: "paddingLeft",
+      property: "padding-left",
       value: { type: "unit", value: 0.2, unit: "em" }
     },
     {
-      property: "paddingRight",
+      property: "padding-right",
       value: { type: "unit", value: 0.2, unit: "em" }
     },
     {
-      property: "backgroundColor",
+      property: "background-color",
       value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
     }
   ]
@@ -4405,7 +4481,7 @@ const presetStyle$b = {
   input: [
     ...radio,
     {
-      property: "marginRight",
+      property: "margin-right",
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
@@ -4435,7 +4511,7 @@ const presetStyle$a = {
   input: [
     ...checkbox,
     {
-      property: "marginRight",
+      property: "margin-right",
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
@@ -4584,7 +4660,7 @@ const meta$7 = {
 const presetStyle$3 = {
   option: [
     {
-      property: "backgroundColor",
+      property: "background-color",
       state: ":checked",
       value: {
         type: "rgb",
@@ -4776,29 +4852,29 @@ const rgb = (property, r, g, b2) => ({
 });
 const buttonReset = [
   {
-    property: "backgroundColor",
+    property: "background-color",
     value: { type: "keyword", value: "transparent" }
   },
   {
-    property: "backgroundImage",
+    property: "background-image",
     value: { type: "keyword", value: "none" }
   },
-  unit("borderTopWidth", 0, "px"),
-  unit("borderRightWidth", 0, "px"),
-  unit("borderBottomWidth", 0, "px"),
-  unit("borderLeftWidth", 0, "px"),
-  keyword("borderTopStyle", "solid"),
-  keyword("borderRightStyle", "solid"),
-  keyword("borderBottomStyle", "solid"),
-  keyword("borderLeftStyle", "solid"),
-  rgb("borderTopColor", 226, 232, 240),
-  rgb("borderRightColor", 226, 232, 240),
-  rgb("borderBottomColor", 226, 232, 240),
-  rgb("borderLeftColor", 226, 232, 240),
-  unit("paddingTop", 0, "px"),
-  unit("paddingRight", 0, "px"),
-  unit("paddingBottom", 0, "px"),
-  unit("paddingLeft", 0, "px")
+  unit("border-top-width", 0, "px"),
+  unit("border-right-width", 0, "px"),
+  unit("border-bottom-width", 0, "px"),
+  unit("border-left-width", 0, "px"),
+  keyword("border-top-style", "solid"),
+  keyword("border-right-style", "solid"),
+  keyword("border-bottom-style", "solid"),
+  keyword("border-left-style", "solid"),
+  rgb("border-top-color", 226, 232, 240),
+  rgb("border-right-color", 226, 232, 240),
+  rgb("border-bottom-color", 226, 232, 240),
+  rgb("border-left-color", 226, 232, 240),
+  unit("padding-top", 0, "px"),
+  unit("padding-right", 0, "px"),
+  unit("padding-bottom", 0, "px"),
+  unit("padding-left", 0, "px")
 ];
 const metaDialogTrigger = {
   type: "container",
@@ -5100,11 +5176,11 @@ const metaAccordionHeader = {
     h3: [
       ...h3,
       {
-        property: "marginTop",
+        property: "margin-top",
         value: { type: "unit", unit: "px", value: 0 }
       },
       {
-        property: "marginBottom",
+        property: "margin-bottom",
         value: { type: "unit", unit: "px", value: 0 }
       }
     ]
@@ -5881,7 +5957,7 @@ audit=false
 fund=false
 `;
 const prebuild = async (options) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
   if (options.template.length === 0) {
     log.error(
       `Template is not provided
@@ -5935,10 +6011,9 @@ Please check webstudio --help for more details`
       componentSources.set(componentName, entry.source);
     }
   }
-  const projectMetas = new Map(
+  const usedMetas = new Map(
     Object.entries(coreMetas)
   );
-  const componentsByPage = {};
   const siteDataByPage = {};
   const fontAssetsByPage = {};
   const backgroundImageAssetsByPage = {};
@@ -5948,6 +6023,7 @@ Please check webstudio --help for more details`
       instanceMap,
       page.rootInstanceId
     );
+    pageInstanceSet.add(ROOT_INSTANCE_ID);
     const instances = siteData.build.instances.filter(([id]) => pageInstanceSet.has(id));
     const dataSources = [];
     const normalizedProps = normalizeProps({
@@ -5990,15 +6066,10 @@ Please check webstudio --help for more details`
       page,
       assets: siteData.assets
     };
-    componentsByPage[page.id] = /* @__PURE__ */ new Set();
     for (const [_instanceId, instance] of instances) {
-      if (isCoreComponent(instance.component)) {
-        continue;
-      }
-      componentsByPage[page.id].add(instance.component);
       const meta2 = metas.get(instance.component);
       if (meta2) {
-        projectMetas.set(instance.component, meta2);
+        usedMetas.set(instance.component, meta2);
       }
     }
     const styleSourceSelections = ((_a = siteData.build) == null ? void 0 : _a.styleSourceSelections) ?? [];
@@ -6013,7 +6084,7 @@ Please check webstudio --help for more details`
         ([, { value }]) => value.type === "fontFamily" ? value.value : void 0
       ).flat().filter((value) => value !== void 0)
     );
-    const pageFontAssets = siteData.assets.filter((asset) => asset.type === "font").filter((fontAsset) => pageFontFamilySet.has(fontAsset.meta.family));
+    const pageFontAssets = siteData.assets.filter((asset) => asset.type === "font").filter((fontAsset) => pageFontFamilySet.has(fontAsset.meta.family)).map((asset) => asset.name);
     fontAssetsByPage[page.id] = pageFontAssets;
     const backgroundImageAssetIdSet = new Set(
       pageStyles.filter(([, { property }]) => property === "backgroundImage").map(
@@ -6022,7 +6093,7 @@ Please check webstudio --help for more details`
         ) : void 0
       ).flat().filter((value) => value !== void 0)
     );
-    const backgroundImageAssets = siteData.assets.filter((asset) => asset.type === "image").filter((imageAsset) => backgroundImageAssetIdSet.has(imageAsset.id));
+    const backgroundImageAssets = siteData.assets.filter((asset) => asset.type === "image").filter((imageAsset) => backgroundImageAssetIdSet.has(imageAsset.id)).map((asset) => asset.name);
     backgroundImageAssetsByPage[page.id] = backgroundImageAssets;
   }
   const assetsToDownload = [];
@@ -6062,12 +6133,12 @@ Please check webstudio --help for more details`
     styles: new Map((_e = siteData.build) == null ? void 0 : _e.styles),
     styleSourceSelections: new Map((_f = siteData.build) == null ? void 0 : _f.styleSourceSelections),
     // pass only used metas to not generate unused preset styles
-    componentMetas: projectMetas,
+    componentMetas: usedMetas,
     assetBaseUrl,
     atomic: ((_g = siteData.build.pages.compiler) == null ? void 0 : _g.atomicStyles) ?? true
   });
   await createFileIfNotExists(join(generatedDir, "index.css"), cssText);
-  for (const [pageId, pageComponents] of Object.entries(componentsByPage)) {
+  for (const page of Object.values(siteData.pages)) {
     const scope = createScope([
       // manually maintained list of occupied identifiers
       "useState",
@@ -6077,6 +6148,29 @@ Please check webstudio --help for more details`
       "Page",
       "_props"
     ]);
+    const pageData = siteDataByPage[page.id];
+    const instances = new Map(pageData.build.instances);
+    const documentType = page.meta.documentType ?? "html";
+    let rootInstanceId = page.rootInstanceId;
+    if (documentType === "xml") {
+      const bodyInstance = instances.get(rootInstanceId);
+      if (((_h = bodyInstance == null ? void 0 : bodyInstance.children) == null ? void 0 : _h[0].type) === "id") {
+        rootInstanceId = bodyInstance.children[0].value;
+      }
+      for (const instance of instances.values()) {
+        if (isCoreComponent(instance.component)) {
+          continue;
+        }
+        if (((_i = usedMetas.get(instance.component)) == null ? void 0 : _i.category) === "xml") {
+          continue;
+        }
+        instances.delete(instance.id);
+      }
+    }
+    const pageComponents = /* @__PURE__ */ new Set();
+    for (const instance of instances.values()) {
+      pageComponents.add(instance.component);
+    }
     const namespaces = /* @__PURE__ */ new Map();
     for (const component of pageComponents) {
       const namespace = componentSources.get(component);
@@ -6090,50 +6184,18 @@ Please check webstudio --help for more details`
         );
       }
       const [_namespace, shortName] = parseComponentName(component);
-      (_h = namespaces.get(namespace)) == null ? void 0 : _h.add([shortName, component]);
+      (_j = namespaces.get(namespace)) == null ? void 0 : _j.add([shortName, component]);
     }
     let componentImports = "";
-    let xmlPresentationComponents = "";
-    const pageData = siteDataByPage[pageId];
-    const documentType = pageData.page.meta.documentType ?? "html";
     for (const [namespace, componentsSet] of namespaces.entries()) {
-      switch (documentType) {
-        case "html":
-          {
-            const specifiers = Array.from(componentsSet).map(
-              ([shortName, component]) => `${shortName} as ${scope.getName(component, shortName)}`
-            ).join(", ");
-            componentImports += `import { ${specifiers} } from "${namespace}";
+      const specifiers = Array.from(componentsSet).map(
+        ([shortName, component]) => `${shortName} as ${scope.getName(component, shortName)}`
+      ).join(", ");
+      componentImports += `import { ${specifiers} } from "${namespace}";
 `;
-          }
-          break;
-        case "xml":
-          {
-            componentImports = `import { XmlNode, XmlTime } from "@webstudio-is/sdk-components-react";
-`;
-            xmlPresentationComponents += Array.from(componentsSet).map(
-              ([shortName, component]) => scope.getName(component, shortName)
-            ).filter(
-              (scopedName) => scopedName !== "XmlNode" && scopedName !== "XmlTime"
-            ).map(
-              (scopedName) => scopedName === "Body" ? (
-                // Using <svg> prevents React from hoisting elements like <title>, <meta>, and <link>
-                // out of their intended scope during rendering.
-                // More details: https://github.com/facebook/react/blob/7c8e5e7ab8bb63de911637892392c5efd8ce1d0f/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L3083
-                `const ${scopedName} = (props: any) => <svg>{props.children}</svg>;`
-              ) : (
-                // Do not render all other components
-                `const ${scopedName} = (props: any) => null;`
-              )
-            ).join("\n");
-          }
-          break;
-      }
     }
-    const pageFontAssets = fontAssetsByPage[pageId];
-    const pageBackgroundImageAssets = backgroundImageAssetsByPage[pageId];
-    const rootInstanceId = pageData.page.rootInstanceId;
-    const instances = new Map(pageData.build.instances);
+    const pageFontAssets = fontAssetsByPage[page.id];
+    const pageBackgroundImageAssets = backgroundImageAssetsByPage[page.id];
     const props2 = new Map(pageData.build.props);
     const dataSources = new Map(pageData.build.dataSources);
     const resources = new Map(pageData.build.resources);
@@ -6152,7 +6214,7 @@ Please check webstudio --help for more details`
           instanceId: "",
           name: "system",
           type: "parameter",
-          value: pageData.page.systemDataSourceId ?? ""
+          value: page.systemDataSourceId ?? ""
         },
         {
           id: "global-system",
@@ -6166,38 +6228,33 @@ Please check webstudio --help for more details`
       props: props2,
       dataSources,
       classesMap: classes,
-      indexesWithinAncestors: getIndexesWithinAncestors(
-        projectMetas,
-        instances,
-        [rootInstanceId]
-      )
+      metas: usedMetas
     });
     const projectMeta = siteData.build.pages.meta;
     const contactEmail = (
       // fallback to user email when contact email is empty string
-      (projectMeta == null ? void 0 : projectMeta.contactEmail) || ((_i = siteData.user) == null ? void 0 : _i.email) || void 0
+      (projectMeta == null ? void 0 : projectMeta.contactEmail) || ((_k = siteData.user) == null ? void 0 : _k.email) || void 0
     );
-    const favIconAsset = assets.get((projectMeta == null ? void 0 : projectMeta.faviconAssetId) ?? "");
-    const pagePath = getPagePath(pageData.page.id, siteData.build.pages);
+    const favIconAsset = (_l = assets.get((projectMeta == null ? void 0 : projectMeta.faviconAssetId) ?? "")) == null ? void 0 : _l.name;
+    const pagePath = getPagePath(page.id, siteData.build.pages);
     const pageExports = `/* eslint-disable */
       /* This is a auto generated file for building the project */ 
 
 
       import { Fragment, useState } from "react";
-      import type { FontAsset, ImageAsset } from "@webstudio-is/sdk";
       import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime";
       ${componentImports}
 
       export const siteName = ${JSON.stringify(projectMeta == null ? void 0 : projectMeta.siteName)};
 
-      export const favIconAsset: ImageAsset | undefined =
+      export const favIconAsset: string | undefined =
         ${JSON.stringify(favIconAsset)};
 
       // Font assets on current page (can be preloaded)
-      export const pageFontAssets: FontAsset[] =
+      export const pageFontAssets: string[] =
         ${JSON.stringify(pageFontAssets)}
 
-      export const pageBackgroundImageAssets: ImageAsset[] =
+      export const pageBackgroundImageAssets: string[] =
         ${JSON.stringify(pageBackgroundImageAssets)}
 
       ${pagePath === "/" ? `
@@ -6223,8 +6280,6 @@ Please check webstudio --help for more details`
             }
           ` : ""}
 
-      ${xmlPresentationComponents}
-
       ${pageComponent}
 
       export { Page }
@@ -6236,7 +6291,7 @@ Please check webstudio --help for more details`
       import type { PageMeta } from "@webstudio-is/sdk";
       ${generateResources({
       scope,
-      page: pageData.page,
+      page,
       dataSources,
       props: props2,
       resources
@@ -6244,12 +6299,12 @@ Please check webstudio --help for more details`
 
       ${generatePageMeta({
       globalScope: scope,
-      page: pageData.page,
+      page,
       dataSources,
       assets
     })}
 
-      ${generateRemixParams(pageData.page.path)}
+      ${generateRemixParams(page.path)}
 
       export const projectId = "${siteData.build.projectId}";
 
@@ -6295,7 +6350,7 @@ Please check webstudio --help for more details`
     )};
     `
   );
-  const redirects = (_j = siteData.build.pages) == null ? void 0 : _j.redirects;
+  const redirects = (_m = siteData.build.pages) == null ? void 0 : _m.redirects;
   if (redirects !== void 0 && redirects.length > 0) {
     for (const redirect of redirects) {
       const generatedBasename = generateRemixRoute(redirect.old);
@@ -6470,7 +6525,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.205.0";
+const version = "0.206.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";