webstudio 0.204.0 → 0.206.0

package/lib/cli.js

@@ -71,11 +71,6 @@ const jsonToGlobalConfig = (json) => {
   return zGlobalConfig.parse(json);
 };
 const PROJECT_TEMPLATES = [
-  {
-    value: "vanilla",
-    label: "Vanilla",
-    expand: ["defaults"]
-  },
   {
     value: "docker",
     label: "Docker",
@@ -84,7 +79,7 @@ const PROJECT_TEMPLATES = [
   {
     value: "vercel",
     label: "Vercel",
-    expand: ["defaults", "vercel"]
+    expand: ["react-router", "react-router-vercel"]
   },
   {
     value: "netlify",
@@ -709,18 +704,48 @@ const getFontFaces = (assets, options) => {
   }
   return Array.from(faces.values());
 };
-const addGlobalRules = (sheet, { assets, assetBaseUrl }) => {
-  const fontAssets = [];
-  for (const asset of assets.values()) {
-    if (asset.type === "font") {
-      fontAssets.push(asset);
-    }
-  }
-  const fontFaces = getFontFaces(fontAssets, { assetBaseUrl });
-  for (const fontFace of fontFaces) {
-    sheet.addFontFaceRule(fontFace);
-  }
-};
+const TextChild = z.object({
+  type: z.literal("text"),
+  value: z.string(),
+  placeholder: z.boolean().optional()
+});
+const InstanceId = z.string();
+const IdChild = z.object({
+  type: z.literal("id"),
+  value: InstanceId
+});
+const ExpressionChild = z.object({
+  type: z.literal("expression"),
+  value: z.string()
+});
+const InstanceChild = z.union([IdChild, TextChild, ExpressionChild]);
+const Instance = z.object({
+  type: z.literal("instance"),
+  id: InstanceId,
+  component: z.string(),
+  label: z.string().optional(),
+  children: z.array(InstanceChild)
+});
+z.map(InstanceId, Instance);
+const MatcherRelation = z.union([
+  z.literal("ancestor"),
+  z.literal("parent"),
+  z.literal("self"),
+  z.literal("child"),
+  z.literal("descendant")
+]);
+const MatcherOperation = z.object({
+  $eq: z.string().optional(),
+  $neq: z.string().optional(),
+  $in: z.array(z.string()).optional(),
+  $nin: z.array(z.string()).optional()
+});
+const Matcher = z.object({
+  relation: MatcherRelation,
+  component: MatcherOperation.optional(),
+  tag: MatcherOperation.optional()
+});
+const Matchers = z.union([Matcher, z.array(Matcher)]);
 const prefixStyles = (styleMap) => {
   const newStyleMap = /* @__PURE__ */ new Map();
   for (const [property, value] of styleMap) {
@@ -736,7 +761,7 @@ const prefixStyles = (styleMap) => {
     if (property === "backdrop-filter") {
       newStyleMap.set("-webkit-backdrop-filter", value);
     }
-    if (property === "view-timeline-name" || property === "scroll-timeline-name") {
+    if (property === "view-timeline-name" || property === "scroll-timeline-name" || property === "view-timeline-inset") {
       newStyleMap.set(`--${property}`, value);
     }
     newStyleMap.set(property, value);
@@ -1081,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) {
@@ -1119,11 +1147,10 @@ const mergeDeclarations = (declarations) => {
   }
   return newDeclarations;
 };
-const generateStyleMap = ({
-  style,
+const generateStyleMap = (style, {
   indent = 0,
   transformValue
-}) => {
+} = {}) => {
   const spaces = " ".repeat(indent);
   let lines = "";
   for (const [property, value] of style) {
@@ -1256,8 +1283,7 @@ class NestingRule {
     const generated = Array.from(styleBySelector).sort(
       ([leftSelector], [rightSelector]) => leftSelector.localeCompare(rightSelector)
     ).map(([selector, style]) => {
-      const content = generateStyleMap({
-        style: prefixStyles(style),
+      const content = generateStyleMap(prefixStyles(style), {
         indent: indent + 2,
         transformValue
       });
@@ -1618,48 +1644,6 @@ const generateAtomic = (sheet, options) => {
   });
   return { cssText, classes };
 };
-const TextChild = z.object({
-  type: z.literal("text"),
-  value: z.string(),
-  placeholder: z.boolean().optional()
-});
-const InstanceId = z.string();
-const IdChild = z.object({
-  type: z.literal("id"),
-  value: InstanceId
-});
-const ExpressionChild = z.object({
-  type: z.literal("expression"),
-  value: z.string()
-});
-const InstanceChild = z.union([IdChild, TextChild, ExpressionChild]);
-const Instance = z.object({
-  type: z.literal("instance"),
-  id: InstanceId,
-  component: z.string(),
-  label: z.string().optional(),
-  children: z.array(InstanceChild)
-});
-z.map(InstanceId, Instance);
-const MatcherRelation = z.union([
-  z.literal("ancestor"),
-  z.literal("parent"),
-  z.literal("self"),
-  z.literal("child"),
-  z.literal("descendant")
-]);
-const MatcherOperation = z.object({
-  $eq: z.string().optional(),
-  $neq: z.string().optional(),
-  $in: z.array(z.string()).optional(),
-  $nin: z.array(z.string()).optional()
-});
-const Matcher = z.object({
-  relation: MatcherRelation,
-  component: MatcherOperation.optional(),
-  tag: MatcherOperation.optional()
-});
-const Matchers = z.union([Matcher, z.array(Matcher)]);
 const common = {
   label: z.string().optional(),
   description: z.string().optional(),
@@ -1795,6 +1779,12 @@ const TextContent = z.object({
   type: z.literal("string"),
   defaultValue: z.string().optional()
 });
+const AnimationAction = z.object({
+  ...common,
+  control: z.literal("animationAction"),
+  type: z.literal("animationAction"),
+  defaultValue: z.undefined().optional()
+});
 const PropMeta = z.union([
   Number,
   Range,
@@ -1814,7 +1804,8 @@ const PropMeta = z.union([
   Json,
   Date,
   Action,
-  TextContent
+  TextContent,
+  AnimationAction
 ]);
 const EmbedTemplateText = z.object({
   type: z.literal("text"),
@@ -1901,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.
@@ -1938,6 +1935,11 @@ z.object({
   // embed - images, videos or other embeddable components, without children
   // rich-text-child - formatted text fragment, not listed in components list
   type: z.enum(["container", "control", "embed", "rich-text-child"]),
+  /**
+   * a property used as textual placeholder when no content specified while in builder
+   * also signals to not insert components inside unless dropped explicitly
+   */
+  placeholder: z.string().optional(),
   constraints: Matchers.optional(),
   // when this field is specified component receives
   // prop with index of same components withiin specified ancestor
@@ -1947,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()
@@ -2011,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: "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: "outlineWidth", value: { type: "unit", unit: "px", value: 1 } }
+  { property: "outline-width", value: { type: "unit", unit: "px", value: 1 } }
 ];
 const address = div;
 const article = div;
@@ -2055,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: "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 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: "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 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: [
@@ -2149,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";
@@ -2413,6 +2476,58 @@ 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,
+  scopeInstanceId: ROOT_INSTANCE_ID,
+  type: "parameter",
+  name: "system"
+};
 const transpileExpression = ({
   expression,
   executable = false,
@@ -2462,7 +2577,10 @@ const transpileExpression = ({
   return expression;
 };
 const dataSourceVariablePrefix = "$ws$dataSource$";
-const decodeDataSourceVariable = (name2) => {
+const decodeDataVariableId = (name2) => {
+  if (name2 === "$ws$system") {
+    return SYSTEM_VARIABLE_ID;
+  }
   if (name2.startsWith(dataSourceVariablePrefix)) {
     const encoded = name2.slice(dataSourceVariablePrefix.length);
     return encoded.replaceAll("__DASH__", "-");
@@ -2479,8 +2597,11 @@ const generateExpression = ({
     expression,
     executable: true,
     replaceVariable: (identifier) => {
-      const depId = decodeDataSourceVariable(identifier);
-      const dep = depId ? dataSources.get(depId) : void 0;
+      const depId = decodeDataVariableId(identifier);
+      let dep = depId ? dataSources.get(depId) : void 0;
+      if (depId === SYSTEM_VARIABLE_ID) {
+        dep = systemParameter;
+      }
       if (dep) {
         usedDataSources == null ? void 0 : usedDataSources.set(dep.id, dep);
         return scope.getName(dep.id, dep.name);
@@ -2650,12 +2771,11 @@ const generateResources = ({
 `;
     }
     if (dataSource.type === "parameter") {
-      if (dataSource.id !== page.systemDataSourceId) {
-        continue;
-      }
-      const name2 = scope.getName(dataSource.id, dataSource.name);
-      generatedVariables += `  const ${name2} = _props.system
+      if (dataSource.id === page.systemDataSourceId || dataSource.id === SYSTEM_VARIABLE_ID) {
+        const name2 = scope.getName(dataSource.id, dataSource.name);
+        generatedVariables += `  const ${name2} = _props.system
 `;
+      }
     }
   }
   let generated = "";
@@ -2852,7 +2972,7 @@ const generatePageMeta = ({
       continue;
     }
     if (dataSource.type === "parameter") {
-      if (dataSource.id === page.systemDataSourceId) {
+      if (dataSource.id === page.systemDataSourceId || dataSource.id === SYSTEM_VARIABLE_ID) {
         const valueName = localScope.getName(dataSource.id, dataSource.name);
         generated += `  let ${valueName} = system
 `;
@@ -2896,6 +3016,22 @@ const generatePageMeta = ({
 `;
   return generated;
 };
+const addFontRules = ({
+  sheet,
+  assets,
+  assetBaseUrl
+}) => {
+  const fontAssets = [];
+  for (const asset of assets.values()) {
+    if (asset.type === "font") {
+      fontAssets.push(asset);
+    }
+  }
+  const fontFaces = getFontFaces(fontAssets, { assetBaseUrl });
+  for (const fontFace of fontFaces) {
+    sheet.addFontFaceRule(fontFace);
+  }
+};
 const createImageValueTransformer = (assets, { assetBaseUrl }) => (styleValue) => {
   if (styleValue.type === "image" && styleValue.value.type === "asset") {
     const asset = assets.get(styleValue.value.value);
@@ -2925,10 +3061,11 @@ const generateCss = ({
   assetBaseUrl,
   atomic
 }) => {
-  const globalSheet = createRegularStyleSheet({ name: "ssr" });
-  const sheet = createRegularStyleSheet({ name: "ssr" });
-  addGlobalRules(globalSheet, { assets, assetBaseUrl });
-  globalSheet.addMediaRule("presets");
+  const fontSheet = createRegularStyleSheet({ name: "ssr" });
+  const presetSheet = createRegularStyleSheet({ name: "ssr" });
+  const userSheet = createRegularStyleSheet({ name: "ssr" });
+  addFontRules({ sheet: fontSheet, assets, assetBaseUrl });
+  presetSheet.addMediaRule("presets");
   const presetClasses = /* @__PURE__ */ new Map();
   const scope = createScope([], normalizeClassName, "-");
   for (const [component, meta2] of componentMetas) {
@@ -2939,8 +3076,8 @@ const generateCss = ({
       presetClasses.set(component, className);
     }
     for (const [tag, styles2] of presetStyle2) {
-      const selector = component === rootComponent ? ":root" : `:where(${tag}.${className})`;
-      const rule = globalSheet.addNestingRule(selector);
+      const selector = component === rootComponent ? ":root" : `${tag}.${className}`;
+      const rule = presetSheet.addNestingRule(selector);
       for (const declaration of styles2) {
         rule.setDeclaration({
           breakpoint: "presets",
@@ -2952,14 +3089,14 @@ const generateCss = ({
     }
   }
   for (const breakpoint of breakpoints.values()) {
-    sheet.addMediaRule(breakpoint.id, breakpoint);
+    userSheet.addMediaRule(breakpoint.id, breakpoint);
   }
   const imageValueTransformer = createImageValueTransformer(assets, {
     assetBaseUrl
   });
-  sheet.setTransformer(imageValueTransformer);
+  userSheet.setTransformer(imageValueTransformer);
   for (const styleDecl of styles.values()) {
-    const rule = sheet.addMixinRule(styleDecl.styleSourceId);
+    const rule = userSheet.addMixinRule(styleDecl.styleSourceId);
     rule.setDeclaration({
       breakpoint: styleDecl.breakpointId,
       selector: styleDecl.state ?? "",
@@ -2991,7 +3128,7 @@ const generateCss = ({
     let { instanceId } = selection;
     const { values } = selection;
     if (instanceId === ROOT_INSTANCE_ID) {
-      const rule2 = sheet.addNestingRule(`:root`);
+      const rule2 = userSheet.addNestingRule(`:root`);
       rule2.applyMixins(values);
       continue;
     }
@@ -3020,22 +3157,30 @@ const generateCss = ({
       }
       classList.push(className);
     }
-    const rule = sheet.addNestingRule(`.${className}`, descendantSuffix);
+    const rule = userSheet.addNestingRule(`.${className}`, descendantSuffix);
     rule.applyMixins(values);
     instanceByRule.set(rule, instanceId);
   }
+  const fontCss = fontSheet.cssText;
+  const presetCss = presetSheet.cssText.replaceAll(
+    "@media all ",
+    "@layer presets "
+  );
   if (atomic) {
-    const { cssText } = generateAtomic(sheet, {
+    const { cssText } = generateAtomic(userSheet, {
       getKey: (rule) => instanceByRule.get(rule),
       transformValue: imageValueTransformer,
       classes
     });
-    return { cssText: `${globalSheet.cssText}
-${cssText}`, classes };
+    return {
+      cssText: `${fontCss}${presetCss}
+${cssText}`,
+      classes
+    };
   }
   return {
-    cssText: `${globalSheet.cssText}
-${sheet.cssText}`,
+    cssText: `${fontCss}${presetCss}
+${userSheet.cssText}`,
     classes
   };
 };
@@ -3220,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,
@@ -3280,7 +3383,7 @@ const generateAction = ({
         if (args == null ? void 0 : args.includes(identifier)) {
           return;
         }
-        const depId = decodeDataSourceVariable(identifier);
+        const depId = decodeDataVariableId(identifier);
         const dep = depId ? dataSources.get(depId) : void 0;
         if (dep) {
           usedDataSources.set(dep.id, dep);
@@ -3324,7 +3427,7 @@ const generatePropValue = ({
   if (prop.type === "asset" || prop.type === "page") {
     return;
   }
-  if (prop.type === "string" || prop.type === "number" || prop.type === "boolean" || prop.type === "string[]" || prop.type === "json") {
+  if (prop.type === "string" || prop.type === "number" || prop.type === "boolean" || prop.type === "string[]" || prop.type === "json" || prop.type === "animationAction") {
     return JSON.stringify(prop.value);
   }
   if (prop.type === "parameter") {
@@ -3556,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",
@@ -3585,20 +3691,24 @@ const generateWebstudioComponent = ({
     })
   });
   let generatedProps = "";
+  let generatedParameters = "";
+  const uniqueParameters = new Set(
+    parameters.map((parameter) => parameter.name)
+  );
   if (parameters.length > 0) {
-    let generatedPropsValue = "{ ";
-    let generatedPropsType = "{ ";
+    let generatedPropsType = "";
+    for (const parameterName of uniqueParameters) {
+      generatedPropsType += `${parameterName}: any; `;
+    }
+    generatedProps = `_props: { ${generatedPropsType}}`;
     for (const parameter of parameters) {
       const dataSource = usedDataSources.get(parameter.value);
       if (dataSource) {
         const valueName = scope.getName(dataSource.id, dataSource.name);
-        generatedPropsValue += `${parameter.name}: ${valueName}, `;
+        generatedParameters += `const ${valueName} = _props.${parameter.name};
+`;
       }
-      generatedPropsType += `${parameter.name}: any; `;
     }
-    generatedPropsValue += `}`;
-    generatedPropsType += `}`;
-    generatedProps = `${generatedPropsValue}: ${generatedPropsType}`;
   }
   let generatedDataSources = "";
   for (const dataSource of usedDataSources.values()) {
@@ -3627,6 +3737,7 @@ const generateWebstudioComponent = ({
   let generatedComponent = "";
   generatedComponent += `const ${name2} = (${generatedProps}) => {
 `;
+  generatedComponent += `${generatedParameters}`;
   generatedComponent += `${generatedDataSources}`;
   generatedComponent += `return ${generatedJsx}`;
   generatedComponent += `}
@@ -3744,14 +3855,14 @@ const htmlToJsx = (html2) => {
   }
   return result;
 };
-const meta$I = {
+const meta$J = {
   category: "general",
   type: "container",
   description: "Slot is a container for content that you want to reference across the project. Changes made to a Slot's children will be reflected in all other instances of that Slot.",
   icon: SlotComponentIcon,
   order: 5
 };
-const meta$H = {
+const meta$I = {
   type: "container",
   icon: ""
 };
@@ -3772,12 +3883,12 @@ const presetStyle$y = {
       value: { type: "keyword", value: "contents" }
     },
     {
-      property: "whiteSpaceCollapse",
+      property: "white-space-collapse",
       value: { type: "keyword", value: "collapse" }
     }
   ]
 };
-const meta$G = {
+const meta$H = {
   category: "general",
   type: "embed",
   label: "HTML Embed",
@@ -3807,7 +3918,7 @@ const meta$G = {
   },
   initialProps: ["className", "clientOnly", "executeScriptOnCanvas"]
 });
-const meta$F = {
+const meta$G = {
   type: "embed",
   icon: MarkdownEmbedIcon,
   presetStyle: {
@@ -3817,7 +3928,7 @@ const meta$F = {
         value: { type: "keyword", value: "contents" }
       },
       {
-        property: "whiteSpaceCollapse",
+        property: "white-space-collapse",
         value: { type: "keyword", value: "collapse" }
       }
     ]
@@ -3827,16 +3938,16 @@ 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" }
     }
   ]
 };
-const meta$E = {
+const meta$F = {
   type: "container",
   icon: BodyIcon,
   states: defaultStates,
@@ -3854,7 +3965,7 @@ const presetStyle$w = {
   nav,
   section
 };
-const meta$D = {
+const meta$E = {
   category: "general",
   type: "container",
   description: "A container for content. By default this is a Div, but the tag can be changed in settings.",
@@ -3867,12 +3978,12 @@ const presetStyle$v = {
   div: [
     ...div,
     {
-      property: "minHeight",
+      property: "min-height",
       value: { type: "unit", unit: "em", value: 1 }
     }
   ]
 };
-const meta$C = {
+const meta$D = {
   type: "container",
   icon: TextIcon,
   states: defaultStates,
@@ -3886,8 +3997,9 @@ const presetStyle$u = {
   h5,
   h6
 };
-const meta$B = {
+const meta$C = {
   type: "container",
+  placeholder: "Heading",
   icon: HeadingIcon,
   constraints: {
     relation: "ancestor",
@@ -3899,8 +4011,9 @@ const meta$B = {
 const presetStyle$t = {
   p
 };
-const meta$A = {
+const meta$B = {
   type: "container",
+  placeholder: "Paragraph",
   icon: TextAlignLeftIcon,
   constraints: {
     relation: "ancestor",
@@ -3918,8 +4031,9 @@ const presetStyle$s = {
     }
   ]
 };
-const meta$z = {
+const meta$A = {
   type: "container",
+  placeholder: "Link",
   icon: LinkIcon,
   constraints: {
     relation: "ancestor",
@@ -3939,14 +4053,14 @@ const meta$z = {
     }
   ]
 };
-const meta$y = {
-  ...meta$z,
+const meta$z = {
+  ...meta$A,
   type: "rich-text-child"
 };
 const presetStyle$r = {
   span
 };
-const meta$x = {
+const meta$y = {
   type: "rich-text-child",
   label: "Text",
   icon: PaintBrushIcon,
@@ -3956,7 +4070,7 @@ const meta$x = {
 const presetStyle$q = {
   b
 };
-const meta$w = {
+const meta$x = {
   type: "rich-text-child",
   label: "Bold Text",
   icon: BoldIcon,
@@ -3967,12 +4081,12 @@ const presetStyle$p = {
   i: [
     ...i,
     {
-      property: "fontStyle",
+      property: "font-style",
       value: { type: "keyword", value: "italic" }
     }
   ]
 };
-const meta$v = {
+const meta$w = {
   type: "rich-text-child",
   label: "Italic Text",
   icon: TextItalicIcon,
@@ -3982,7 +4096,7 @@ const meta$v = {
 const presetStyle$o = {
   sup
 };
-const meta$u = {
+const meta$v = {
   type: "rich-text-child",
   label: "Superscript Text",
   icon: SuperscriptIcon,
@@ -3992,7 +4106,7 @@ const meta$u = {
 const presetStyle$n = {
   sub
 };
-const meta$t = {
+const meta$u = {
   type: "rich-text-child",
   label: "Subscript Text",
   icon: SubscriptIcon,
@@ -4002,7 +4116,7 @@ const meta$t = {
 const presetStyle$m = {
   button
 };
-const meta$s = {
+const meta$t = {
   icon: ButtonElementIcon,
   type: "container",
   constraints: {
@@ -4025,7 +4139,7 @@ const presetStyle$l = {
     }
   ]
 };
-const meta$r = {
+const meta$s = {
   category: "forms",
   constraints: {
     relation: "ancestor",
@@ -4051,7 +4165,7 @@ const meta$r = {
     //{ selector: ":read-write", label: "Read Write" },
   ]
 };
-const meta$q = {
+const meta$r = {
   label: "Webhook Form",
   icon: WebhookFormIcon,
   type: "container",
@@ -4070,10 +4184,10 @@ const meta$q = {
 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$p = {
+const meta$q = {
   category: "forms",
   type: "container",
   label: "Form",
@@ -4092,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
@@ -4110,7 +4224,7 @@ const presetStyle$j = {
     }
   ]
 };
-const meta$o = {
+const meta$p = {
   category: "media",
   type: "embed",
   description: "Add an image asset to the page. Webstudio automatically converts images to WebP or AVIF format and makes them responsive for best performance.",
@@ -4122,53 +4236,54 @@ const meta$o = {
 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 }
     }
   ]
 };
-const meta$n = {
+const meta$o = {
   type: "container",
+  placeholder: "Blockquote",
   icon: BlockquoteIcon,
   states: defaultStates,
   presetStyle: presetStyle$i
@@ -4177,35 +4292,35 @@ 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" }
     }
   ]
 };
-const meta$m = {
+const meta$n = {
   type: "container",
   icon: ListIcon,
   states: defaultStates,
@@ -4214,8 +4329,9 @@ const meta$m = {
 const presetStyle$g = {
   li
 };
-const meta$l = {
+const meta$m = {
   type: "container",
+  placeholder: "List item",
   constraints: {
     // cannot use parent relation here
     // because list item can be put inside of collection or slot
@@ -4235,28 +4351,28 @@ 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" }
     }
   ]
 };
-const meta$k = {
+const meta$l = {
   category: "general",
   type: "embed",
   description: "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
@@ -4273,28 +4389,28 @@ 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 }
     }
   ]
 };
-const meta$j = {
+const meta$k = {
   category: "general",
   type: "embed",
   description: "Use this component when you want to display code as text on the page.",
@@ -4313,7 +4429,7 @@ const presetStyle$d = {
     { property: "display", value: { type: "keyword", value: "block" } }
   ]
 };
-const meta$i = {
+const meta$j = {
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
@@ -4335,7 +4451,7 @@ const presetStyle$c = {
     }
   ]
 };
-const meta$h = {
+const meta$i = {
   category: "forms",
   type: "control",
   label: "Text Area",
@@ -4365,12 +4481,12 @@ const presetStyle$b = {
   input: [
     ...radio,
     {
-      property: "marginRight",
+      property: "margin-right",
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
 };
-const meta$g = {
+const meta$h = {
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
@@ -4395,12 +4511,12 @@ const presetStyle$a = {
   input: [
     ...checkbox,
     {
-      property: "marginRight",
+      property: "margin-right",
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
 };
-const meta$f = {
+const meta$g = {
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
@@ -4422,7 +4538,7 @@ const meta$f = {
 const presetStyle$9 = {
   div
 };
-const meta$e = {
+const meta$f = {
   type: "container",
   icon: VimeoIcon,
   states: defaultStates,
@@ -4435,7 +4551,7 @@ const meta$e = {
 const presetStyle$8 = {
   div
 };
-const meta$d = {
+const meta$e = {
   type: "container",
   icon: YoutubeIcon,
   states: defaultStates,
@@ -4445,8 +4561,8 @@ const meta$d = {
     component: { $nin: ["Button", "Link", "Heading"] }
   }
 };
-const meta$c = {
-  ...meta$o,
+const meta$d = {
+  ...meta$p,
   category: "hidden",
   label: "Preview Image",
   constraints: {
@@ -4457,7 +4573,7 @@ const meta$c = {
 const presetStyle$7 = {
   button
 };
-const meta$b = {
+const meta$c = {
   category: "hidden",
   type: "container",
   constraints: [
@@ -4478,7 +4594,7 @@ const meta$b = {
 const presetStyle$6 = {
   div
 };
-const meta$a = {
+const meta$b = {
   type: "container",
   constraints: {
     relation: "ancestor",
@@ -4490,14 +4606,14 @@ const meta$a = {
   category: "hidden",
   label: "Spinner"
 };
-const meta$9 = {
+const meta$a = {
   category: "xml",
   order: 6,
   type: "container",
   icon: XmlIcon,
   description: "XML Node"
 };
-const meta$8 = {
+const meta$9 = {
   category: "xml",
   type: "container",
   description: "Converts machine-readable date and time to ISO format.",
@@ -4507,7 +4623,7 @@ const meta$8 = {
 const presetStyle$5 = {
   time
 };
-const meta$7 = {
+const meta$8 = {
   category: "localization",
   type: "container",
   description: "Converts machine-readable date and time to a human-readable format.",
@@ -4524,7 +4640,7 @@ const presetStyle$4 = {
     }
   ]
 };
-const meta$6 = {
+const meta$7 = {
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
@@ -4544,7 +4660,7 @@ const meta$6 = {
 const presetStyle$3 = {
   option: [
     {
-      property: "backgroundColor",
+      property: "background-color",
       state: ":checked",
       value: {
         type: "rgb",
@@ -4556,7 +4672,7 @@ const presetStyle$3 = {
     }
   ]
 };
-const meta$5 = {
+const meta$6 = {
   category: "hidden",
   constraints: {
     relation: "parent",
@@ -4577,7 +4693,7 @@ const meta$5 = {
     { selector: ":disabled", label: "Disabled" }
   ]
 };
-const meta$4 = {
+const meta$5 = {
   icon: HeaderIcon,
   type: "container",
   description: "Inserts children into the head of the document",
@@ -4592,7 +4708,7 @@ const meta$4 = {
     }
   ]
 };
-const meta$3 = {
+const meta$4 = {
   category: "hidden",
   icon: ResourceIcon,
   type: "embed",
@@ -4601,7 +4717,7 @@ const meta$3 = {
     component: { $eq: "HeadSlot" }
   }
 };
-const meta$2 = {
+const meta$3 = {
   category: "hidden",
   icon: WindowInfoIcon,
   type: "embed",
@@ -4610,7 +4726,7 @@ const meta$2 = {
     component: { $eq: "HeadSlot" }
   }
 };
-const meta$1 = {
+const meta$2 = {
   category: "hidden",
   icon: WindowTitleIcon,
   type: "container",
@@ -4621,61 +4737,70 @@ const meta$1 = {
 };
 const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Blockquote: meta$n,
-  Body: meta$E,
-  Bold: meta$w,
-  Box: meta$D,
-  Button: meta$s,
-  Checkbox: meta$f,
-  CodeText: meta$j,
-  Form: meta$q,
-  Fragment: meta$H,
-  HeadLink: meta$3,
-  HeadMeta: meta$2,
-  HeadSlot: meta$4,
-  HeadTitle: meta$1,
-  Heading: meta$B,
-  HtmlEmbed: meta$G,
-  Image: meta$o,
-  Input: meta$r,
-  Italic: meta$v,
-  Label: meta$i,
-  Link: meta$z,
-  List: meta$m,
-  ListItem: meta$l,
-  MarkdownEmbed: meta$F,
-  Option: meta$5,
-  Paragraph: meta$A,
-  RadioButton: meta$g,
-  RemixForm: meta$p,
-  RichTextLink: meta$y,
-  Select: meta$6,
-  Separator: meta$k,
-  Slot: meta$I,
-  Span: meta$x,
-  Subscript: meta$t,
-  Superscript: meta$u,
-  Text: meta$C,
-  Textarea: meta$h,
-  Time: meta$7,
-  Vimeo: meta$e,
-  VimeoPlayButton: meta$b,
-  VimeoPreviewImage: meta$c,
-  VimeoSpinner: meta$a,
-  XmlNode: meta$9,
-  XmlTime: meta$8,
-  YouTube: meta$d
+  Blockquote: meta$o,
+  Body: meta$F,
+  Bold: meta$x,
+  Box: meta$E,
+  Button: meta$t,
+  Checkbox: meta$g,
+  CodeText: meta$k,
+  Form: meta$r,
+  Fragment: meta$I,
+  HeadLink: meta$4,
+  HeadMeta: meta$3,
+  HeadSlot: meta$5,
+  HeadTitle: meta$2,
+  Heading: meta$C,
+  HtmlEmbed: meta$H,
+  Image: meta$p,
+  Input: meta$s,
+  Italic: meta$w,
+  Label: meta$j,
+  Link: meta$A,
+  List: meta$n,
+  ListItem: meta$m,
+  MarkdownEmbed: meta$G,
+  Option: meta$6,
+  Paragraph: meta$B,
+  RadioButton: meta$h,
+  RemixForm: meta$q,
+  RichTextLink: meta$z,
+  Select: meta$7,
+  Separator: meta$l,
+  Slot: meta$J,
+  Span: meta$y,
+  Subscript: meta$u,
+  Superscript: meta$v,
+  Text: meta$D,
+  Textarea: meta$i,
+  Time: meta$8,
+  Vimeo: meta$f,
+  VimeoPlayButton: meta$c,
+  VimeoPreviewImage: meta$d,
+  VimeoSpinner: meta$b,
+  XmlNode: meta$a,
+  XmlTime: meta$9,
+  YouTube: meta$e
 }, Symbol.toStringTag, { value: "Module" }));
+const meta$1 = {
+  category: "general",
+  type: "container",
+  description: "Animate Children",
+  icon: SlotComponentIcon,
+  order: 5,
+  label: "Animate Children"
+};
 const animationComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null
+  __proto__: null,
+  AnimateChildren: meta$1
 }, Symbol.toStringTag, { value: "Module" }));
 const remixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Body: meta$E,
-  Form: meta$q,
-  Link: meta$z,
-  RemixForm: meta$p,
-  RichTextLink: meta$y
+  Body: meta$F,
+  Form: meta$r,
+  Link: meta$A,
+  RemixForm: meta$q,
+  RichTextLink: meta$z
 }, Symbol.toStringTag, { value: "Module" }));
 const metaCollapsible = {
   type: "container",
@@ -4727,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",
@@ -5051,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 }
       }
     ]
@@ -5587,11 +5712,11 @@ const createFramework$2 = async () => {
 };
 const reactRouterComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Body: meta$E,
-  Form: meta$q,
-  Link: meta$z,
-  RemixForm: meta$p,
-  RichTextLink: meta$y
+  Body: meta$F,
+  Form: meta$r,
+  Link: meta$A,
+  RemixForm: meta$q,
+  RichTextLink: meta$z
 }, Symbol.toStringTag, { value: "Module" }));
 const createFramework$1 = async () => {
   const routeTemplatesDir = join("app", "route-templates");
@@ -5832,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
@@ -5886,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 = {};
@@ -5899,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({
@@ -5941,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) ?? [];
@@ -5964,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(
@@ -5973,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 = [];
@@ -6013,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",
@@ -6028,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);
@@ -6041,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}";
-`;
-          }
-          break;
-        case "xml":
-          {
-            componentImports = `import { XmlNode, XmlTime } from "@webstudio-is/sdk-components-react";
+      const specifiers = Array.from(componentsSet).map(
+        ([shortName, component]) => `${shortName} as ${scope.getName(component, shortName)}`
+      ).join(", ");
+      componentImports += `import { ${specifiers} } from "${namespace}";
 `;
-            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);
@@ -6099,49 +6210,51 @@ Please check webstudio --help for more details`
       rootInstanceId,
       parameters: [
         {
-          id: `system`,
+          id: `page-system`,
           instanceId: "",
           name: "system",
           type: "parameter",
-          value: pageData.page.systemDataSourceId ?? ""
+          value: page.systemDataSourceId ?? ""
+        },
+        {
+          id: "global-system",
+          type: "parameter",
+          instanceId: "",
+          name: "system",
+          value: SYSTEM_VARIABLE_ID
         }
       ],
       instances,
       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 === "/" ? `
@@ -6167,8 +6280,6 @@ Please check webstudio --help for more details`
             }
           ` : ""}
 
-      ${xmlPresentationComponents}
-
       ${pageComponent}
 
       export { Page }
@@ -6180,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
@@ -6188,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}";
 
@@ -6239,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);
@@ -6414,7 +6525,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.204.0";
+const version = "0.206.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";
@@ -6474,6 +6585,7 @@ const devDependencies = {
   "@types/react": "^18.2.70",
   "@types/react-dom": "^18.2.25",
   "@types/yargs": "^17.0.33",
+  "@vercel/react-router": "^1.0.2",
   "@vitejs/plugin-react": "^4.3.4",
   "@webstudio-is/http-client": "workspace:*",
   "@webstudio-is/image": "workspace:*",
@@ -6485,14 +6597,14 @@ const devDependencies = {
   "@webstudio-is/sdk-components-react-remix": "workspace:*",
   "@webstudio-is/sdk-components-react-router": "workspace:*",
   "@webstudio-is/tsconfig": "workspace:*",
-  h3: "^1.14.0",
+  h3: "^1.15.0",
   ipx: "^3.0.1",
   prettier: "3.4.2",
   react: "18.3.0-canary-14898b6a9-20240318",
   "react-dom": "18.3.0-canary-14898b6a9-20240318",
   "react-router": "^7.1.5",
   "ts-expect": "^1.3.0",
-  vike: "^0.4.220",
+  vike: "^0.4.222",
   vite: "^5.4.11",
   vitest: "^3.0.4",
   wrangler: "^3.63.2"