webstudio 0.204.0 → 0.205.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);
@@ -1119,11 +1144,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 +1280,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 +1641,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 +1776,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 +1801,8 @@ const PropMeta = z.union([
   Json,
   Date,
   Action,
-  TextContent
+  TextContent,
+  AnimationAction
 ]);
 const EmbedTemplateText = z.object({
   type: z.literal("text"),
@@ -1938,6 +1926,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
@@ -2413,6 +2406,13 @@ const parseComponentName = (componentName) => {
   }
   return [namespace, name2];
 };
+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 +2462,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 +2482,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 +2656,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 +2857,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 +2901,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 +2946,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 +2961,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 +2974,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 +3013,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 +3042,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
   };
 };
@@ -3280,7 +3310,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 +3354,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") {
@@ -3585,20 +3615,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 +3661,7 @@ const generateWebstudioComponent = ({
   let generatedComponent = "";
   generatedComponent += `const ${name2} = (${generatedProps}) => {
 `;
+  generatedComponent += `${generatedParameters}`;
   generatedComponent += `${generatedDataSources}`;
   generatedComponent += `return ${generatedJsx}`;
   generatedComponent += `}
@@ -3744,14 +3779,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: ""
 };
@@ -3777,7 +3812,7 @@ const presetStyle$y = {
     }
   ]
 };
-const meta$G = {
+const meta$H = {
   category: "general",
   type: "embed",
   label: "HTML Embed",
@@ -3807,7 +3842,7 @@ const meta$G = {
   },
   initialProps: ["className", "clientOnly", "executeScriptOnCanvas"]
 });
-const meta$F = {
+const meta$G = {
   type: "embed",
   icon: MarkdownEmbedIcon,
   presetStyle: {
@@ -3836,7 +3871,7 @@ const presetStyle$x = {
     }
   ]
 };
-const meta$E = {
+const meta$F = {
   type: "container",
   icon: BodyIcon,
   states: defaultStates,
@@ -3854,7 +3889,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.",
@@ -3872,7 +3907,7 @@ const presetStyle$v = {
     }
   ]
 };
-const meta$C = {
+const meta$D = {
   type: "container",
   icon: TextIcon,
   states: defaultStates,
@@ -3886,8 +3921,9 @@ const presetStyle$u = {
   h5,
   h6
 };
-const meta$B = {
+const meta$C = {
   type: "container",
+  placeholder: "Heading",
   icon: HeadingIcon,
   constraints: {
     relation: "ancestor",
@@ -3899,8 +3935,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 +3955,9 @@ const presetStyle$s = {
     }
   ]
 };
-const meta$z = {
+const meta$A = {
   type: "container",
+  placeholder: "Link",
   icon: LinkIcon,
   constraints: {
     relation: "ancestor",
@@ -3939,14 +3977,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 +3994,7 @@ const meta$x = {
 const presetStyle$q = {
   b
 };
-const meta$w = {
+const meta$x = {
   type: "rich-text-child",
   label: "Bold Text",
   icon: BoldIcon,
@@ -3972,7 +4010,7 @@ const presetStyle$p = {
     }
   ]
 };
-const meta$v = {
+const meta$w = {
   type: "rich-text-child",
   label: "Italic Text",
   icon: TextItalicIcon,
@@ -3982,7 +4020,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 +4030,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 +4040,7 @@ const meta$t = {
 const presetStyle$m = {
   button
 };
-const meta$s = {
+const meta$t = {
   icon: ButtonElementIcon,
   type: "container",
   constraints: {
@@ -4025,7 +4063,7 @@ const presetStyle$l = {
     }
   ]
 };
-const meta$r = {
+const meta$s = {
   category: "forms",
   constraints: {
     relation: "ancestor",
@@ -4051,7 +4089,7 @@ const meta$r = {
     //{ selector: ":read-write", label: "Read Write" },
   ]
 };
-const meta$q = {
+const meta$r = {
   label: "Webhook Form",
   icon: WebhookFormIcon,
   type: "container",
@@ -4073,7 +4111,7 @@ const presetStyle$k = {
     { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
   ]
 };
-const meta$p = {
+const meta$q = {
   category: "forms",
   type: "container",
   label: "Form",
@@ -4110,7 +4148,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.",
@@ -4167,8 +4205,9 @@ const presetStyle$i = {
     }
   ]
 };
-const meta$n = {
+const meta$o = {
   type: "container",
+  placeholder: "Blockquote",
   icon: BlockquoteIcon,
   states: defaultStates,
   presetStyle: presetStyle$i
@@ -4205,7 +4244,7 @@ const presetStyle$h = {
     }
   ]
 };
-const meta$m = {
+const meta$n = {
   type: "container",
   icon: ListIcon,
   states: defaultStates,
@@ -4214,8 +4253,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
@@ -4256,7 +4296,7 @@ const presetStyle$f = {
     }
   ]
 };
-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.",
@@ -4294,7 +4334,7 @@ const presetStyle$e = {
     }
   ]
 };
-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 +4353,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 +4375,7 @@ const presetStyle$c = {
     }
   ]
 };
-const meta$h = {
+const meta$i = {
   category: "forms",
   type: "control",
   label: "Text Area",
@@ -4370,7 +4410,7 @@ const presetStyle$b = {
     }
   ]
 };
-const meta$g = {
+const meta$h = {
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
@@ -4400,7 +4440,7 @@ const presetStyle$a = {
     }
   ]
 };
-const meta$f = {
+const meta$g = {
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
@@ -4422,7 +4462,7 @@ const meta$f = {
 const presetStyle$9 = {
   div
 };
-const meta$e = {
+const meta$f = {
   type: "container",
   icon: VimeoIcon,
   states: defaultStates,
@@ -4435,7 +4475,7 @@ const meta$e = {
 const presetStyle$8 = {
   div
 };
-const meta$d = {
+const meta$e = {
   type: "container",
   icon: YoutubeIcon,
   states: defaultStates,
@@ -4445,8 +4485,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 +4497,7 @@ const meta$c = {
 const presetStyle$7 = {
   button
 };
-const meta$b = {
+const meta$c = {
   category: "hidden",
   type: "container",
   constraints: [
@@ -4478,7 +4518,7 @@ const meta$b = {
 const presetStyle$6 = {
   div
 };
-const meta$a = {
+const meta$b = {
   type: "container",
   constraints: {
     relation: "ancestor",
@@ -4490,14 +4530,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 +4547,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 +4564,7 @@ const presetStyle$4 = {
     }
   ]
 };
-const meta$6 = {
+const meta$7 = {
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
@@ -4556,7 +4596,7 @@ const presetStyle$3 = {
     }
   ]
 };
-const meta$5 = {
+const meta$6 = {
   category: "hidden",
   constraints: {
     relation: "parent",
@@ -4577,7 +4617,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 +4632,7 @@ const meta$4 = {
     }
   ]
 };
-const meta$3 = {
+const meta$4 = {
   category: "hidden",
   icon: ResourceIcon,
   type: "embed",
@@ -4601,7 +4641,7 @@ const meta$3 = {
     component: { $eq: "HeadSlot" }
   }
 };
-const meta$2 = {
+const meta$3 = {
   category: "hidden",
   icon: WindowInfoIcon,
   type: "embed",
@@ -4610,7 +4650,7 @@ const meta$2 = {
     component: { $eq: "HeadSlot" }
   }
 };
-const meta$1 = {
+const meta$2 = {
   category: "hidden",
   icon: WindowTitleIcon,
   type: "container",
@@ -4621,61 +4661,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",
@@ -5587,11 +5636,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");
@@ -6099,11 +6148,18 @@ Please check webstudio --help for more details`
       rootInstanceId,
       parameters: [
         {
-          id: `system`,
+          id: `page-system`,
           instanceId: "",
           name: "system",
           type: "parameter",
           value: pageData.page.systemDataSourceId ?? ""
+        },
+        {
+          id: "global-system",
+          type: "parameter",
+          instanceId: "",
+          name: "system",
+          value: SYSTEM_VARIABLE_ID
         }
       ],
       instances,
@@ -6414,7 +6470,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.204.0";
+const version = "0.205.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";
@@ -6474,6 +6530,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 +6542,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"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.204.0",
+  "version": "0.205.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -55,27 +55,28 @@
     "@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",
-    "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",
-    "@webstudio-is/http-client": "0.204.0",
-    "@webstudio-is/image": "0.204.0",
-    "@webstudio-is/react-sdk": "0.204.0",
-    "@webstudio-is/sdk": "0.204.0",
-    "@webstudio-is/sdk-components-animation": "0.204.0",
-    "@webstudio-is/sdk-components-react": "0.204.0",
-    "@webstudio-is/sdk-components-react-radix": "0.204.0",
-    "@webstudio-is/sdk-components-react-router": "0.204.0",
-    "@webstudio-is/sdk-components-react-remix": "0.204.0",
+    "@webstudio-is/http-client": "0.205.0",
+    "@webstudio-is/image": "0.205.0",
+    "@webstudio-is/sdk": "0.205.0",
+    "@webstudio-is/sdk-components-animation": "0.205.0",
+    "@webstudio-is/react-sdk": "0.205.0",
+    "@webstudio-is/sdk-components-react": "0.205.0",
+    "@webstudio-is/sdk-components-react-remix": "0.205.0",
+    "@webstudio-is/sdk-components-react-radix": "0.205.0",
+    "@webstudio-is/sdk-components-react-router": "0.205.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {

package/templates/defaults/package.json

@@ -11,13 +11,13 @@
     "@remix-run/node": "2.15.2",
     "@remix-run/react": "2.15.2",
     "@remix-run/server-runtime": "2.15.2",
-    "@webstudio-is/image": "0.204.0",
-    "@webstudio-is/react-sdk": "0.204.0",
-    "@webstudio-is/sdk": "0.204.0",
-    "@webstudio-is/sdk-components-react": "0.204.0",
-    "@webstudio-is/sdk-components-animation": "0.204.0",
-    "@webstudio-is/sdk-components-react-radix": "0.204.0",
-    "@webstudio-is/sdk-components-react-remix": "0.204.0",
+    "@webstudio-is/image": "0.205.0",
+    "@webstudio-is/react-sdk": "0.205.0",
+    "@webstudio-is/sdk": "0.205.0",
+    "@webstudio-is/sdk-components-react": "0.205.0",
+    "@webstudio-is/sdk-components-animation": "0.205.0",
+    "@webstudio-is/sdk-components-react-radix": "0.205.0",
+    "@webstudio-is/sdk-components-react-remix": "0.205.0",
     "isbot": "^5.1.22",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"

package/templates/react-router/package.json

@@ -10,13 +10,13 @@
   "dependencies": {
     "@react-router/dev": "^7.1.5",
     "@react-router/fs-routes": "^7.1.5",
-    "@webstudio-is/image": "0.204.0",
-    "@webstudio-is/react-sdk": "0.204.0",
-    "@webstudio-is/sdk": "0.204.0",
-    "@webstudio-is/sdk-components-animation": "0.204.0",
-    "@webstudio-is/sdk-components-react-radix": "0.204.0",
-    "@webstudio-is/sdk-components-react-router": "0.204.0",
-    "@webstudio-is/sdk-components-react": "0.204.0",
+    "@webstudio-is/image": "0.205.0",
+    "@webstudio-is/react-sdk": "0.205.0",
+    "@webstudio-is/sdk": "0.205.0",
+    "@webstudio-is/sdk-components-animation": "0.205.0",
+    "@webstudio-is/sdk-components-react-radix": "0.205.0",
+    "@webstudio-is/sdk-components-react-router": "0.205.0",
+    "@webstudio-is/sdk-components-react": "0.205.0",
     "isbot": "^5.1.22",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",

package/templates/react-router-docker/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@react-router/node": "^7.1.5",
     "@react-router/serve": "^7.1.5",
-    "h3": "^1.14.0",
+    "h3": "^1.15.0",
     "ipx": "^3.0.1"
   }
 }

package/templates/react-router-vercel/app/constants.mjs

@@ -0,0 +1,25 @@
+/**
+ * We use mjs extension as constants in this file is shared with the build script
+ * and we use `node --eval` to extract the constants.
+ */
+export const assetBaseUrl = "/assets/";
+
+/**
+ * @type {import("@webstudio-is/image").ImageLoader}
+ */
+export const imageLoader = (props) => {
+  if (import.meta.env.DEV) {
+    return props.src;
+  }
+
+  if (props.format === "raw") {
+    return props.src;
+  }
+
+  // https://vercel.com/blog/build-your-own-web-framework#automatic-image-optimization
+  const searchParams = new URLSearchParams();
+  searchParams.set("url", props.src);
+  searchParams.set("w", props.width.toString());
+  searchParams.set("q", props.quality.toString());
+  return `/_vercel/image?${searchParams}`;
+};

package/templates/react-router-vercel/package.json

@@ -0,0 +1,9 @@
+{
+  "scripts": {
+    "deploy": "npx vercel deploy"
+  },
+  "dependencies": {
+    "@react-router/node": "^7.1.5",
+    "@vercel/react-router": "^1.0.2"
+  }
+}

package/templates/react-router-vercel/react-router.config.ts

@@ -0,0 +1,6 @@
+import type { Config } from "@react-router/dev/config";
+import { vercelPreset } from "@vercel/react-router/vite";
+
+export default {
+  presets: [vercelPreset()],
+} satisfies Config;

package/templates/react-router-vercel/vercel.json

@@ -0,0 +1,12 @@
+{
+  "framework": "react-router",
+  "images": {
+    "domains": [],
+    "sizes": [
+      16, 32, 48, 64, 96, 128, 144, 256, 384, 640, 750, 828, 1080, 1200, 1920,
+      2048, 3840
+    ],
+    "minimumCacheTTL": 60,
+    "formats": ["image/webp", "image/avif"]
+  }
+}

package/templates/ssg/package.json

@@ -8,15 +8,15 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@webstudio-is/image": "0.204.0",
-    "@webstudio-is/react-sdk": "0.204.0",
-    "@webstudio-is/sdk": "0.204.0",
-    "@webstudio-is/sdk-components-react": "0.204.0",
-    "@webstudio-is/sdk-components-animation": "0.204.0",
-    "@webstudio-is/sdk-components-react-radix": "0.204.0",
+    "@webstudio-is/image": "0.205.0",
+    "@webstudio-is/react-sdk": "0.205.0",
+    "@webstudio-is/sdk": "0.205.0",
+    "@webstudio-is/sdk-components-react": "0.205.0",
+    "@webstudio-is/sdk-components-animation": "0.205.0",
+    "@webstudio-is/sdk-components-react-radix": "0.205.0",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "vike": "^0.4.220"
+    "vike": "^0.4.222"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",