webstudio 0.212.0 → 0.213.0

package/lib/cli.js

@@ -2617,6 +2617,23 @@ var defaultStates = [
   { selector: ":focus-visible", label: "Focus Visible" },
   { selector: ":focus-within", label: "Focus Within" }
 ];
+var ContentModel = z.object({
+  /*
+   * instance - accepted by any parent with "instance" in children categories
+   * none - accepted by parents with this component name in children categories
+   */
+  category: z.union([z.literal("instance"), z.literal("none")]),
+  /**
+   * transparent - pass through possible children from parent
+   * rich-text - can be edited as rich text
+   * instance - other instances accepted
+   * empty - no children accepted
+   * ComponentName - accept specific components with none category
+   */
+  children: z.array(
+    z.string()
+  )
+});
 z.object({
   category: z.enum(componentCategories).optional(),
   // container - can accept other components with dnd or be edited as text
@@ -2630,6 +2647,7 @@ z.object({
    */
   placeholder: z.string().optional(),
   constraints: Matchers.optional(),
+  contentModel: ContentModel.optional(),
   // when this field is specified component receives
   // prop with index of same components withiin specified ancestor
   // important to automatically enumerate collections without
@@ -2685,37 +2703,32 @@ var descendantMeta = {
   type: "control",
   label: "Descendant",
   icon: PaintBrushIcon,
+  contentModel: {
+    category: "none",
+    children: ["empty"]
+  },
   // @todo infer possible presets
-  presetStyle: {},
-  constraints: {
-    relation: "parent",
-    component: { $in: ["HtmlEmbed", "MarkdownEmbed"] }
-  }
+  presetStyle: {}
 };
 var blockComponent = "ws:block";
 var blockTemplateComponent = "ws:block-template";
 var blockTemplateMeta = {
   type: "container",
   icon: AddTemplateInstanceIcon,
-  constraints: {
-    relation: "parent",
-    component: { $eq: blockComponent }
+  contentModel: {
+    category: "none",
+    children: ["instance"]
   }
 };
 var blockMeta = {
   type: "container",
   label: "Content Block",
   icon: ContentBlockIcon,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $nin: [collectionComponent, blockComponent] }
-    },
-    {
-      relation: "child",
-      component: { $eq: blockTemplateComponent }
-    }
-  ]
+  contentModel: {
+    category: "instance",
+    children: [blockTemplateComponent, "instance"]
+    // @todo prevent deleting block template
+  }
 };
 var coreMetas = {
   [rootComponent]: rootMeta,
@@ -4668,25 +4681,29 @@ const e$4 = {
     type: "boolean"
   }
 };
-const i$4 = {
-  div: [
-    {
-      property: "display",
-      value: { type: "keyword", value: "contents" }
-    },
-    {
-      property: "white-space-collapse",
-      value: { type: "keyword", value: "collapse" }
-    }
-  ]
-}, a$d = {
+const r$c = {
   category: "general",
-  type: "embed",
+  type: "container",
   label: "HTML Embed",
   description: "Used to add HTML code to the page, such as an SVG or script.",
   icon: EmbedIcon,
-  presetStyle: i$4,
-  order: 2
+  order: 2,
+  contentModel: {
+    category: "instance",
+    children: [descendantComponent]
+  },
+  presetStyle: {
+    div: [
+      {
+        property: "display",
+        value: { type: "keyword", value: "contents" }
+      },
+      {
+        property: "white-space-collapse",
+        value: { type: "keyword", value: "collapse" }
+      }
+    ]
+  }
 };
 ({
   props: {
@@ -4709,9 +4726,13 @@ const i$4 = {
   },
   initialProps: ["className", "clientOnly", "executeScriptOnCanvas"]
 });
-const t$1 = {
-  type: "embed",
+const a$e = {
+  type: "container",
   icon: MarkdownEmbedIcon,
+  contentModel: {
+    category: "instance",
+    children: [descendantComponent]
+  },
   presetStyle: {
     div: [
       {
@@ -4763,13 +4784,13 @@ var h3 = div;
 var h4 = div;
 var h5 = div;
 var h6 = div;
-var i$3 = div;
+var i$1 = div;
 var img = div;
-var a$c = div;
+var a$d = div;
 var li = div;
 var ul = div;
 var ol = div;
-var p$a = div;
+var p$9 = div;
 var span = div;
 var body = [
   { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
@@ -5080,7 +5101,7 @@ var button = [
   { property: "text-transform", value: { type: "keyword", value: "none" } }
 ];
 var select = button;
-const a$b = {
+const a$c = {
   body: [
     ...body,
     {
@@ -5092,11 +5113,11 @@ const a$b = {
       value: { type: "keyword", value: "grayscale" }
     }
   ]
-}, n$7 = {
+}, n$6 = {
   type: "container",
   icon: BodyIcon,
   states: defaultStates,
-  presetStyle: a$b
+  presetStyle: a$c
 };
 const v$2 = {
   category: "general",
@@ -5118,7 +5139,7 @@ const v$2 = {
   },
   order: 0
 };
-const s$4 = {
+const s$6 = {
   type: "container",
   icon: TextIcon,
   states: defaultStates,
@@ -5146,28 +5167,28 @@ const d$6 = {
     h6
   }
 };
-const p$9 = {
-  p: p$a
-}, n$6 = {
+const p$8 = {
+  p: p$9
+}, n$5 = {
   type: "container",
   placeholder: "Paragraph",
   icon: TextAlignLeftIcon,
   states: defaultStates,
-  presetStyle: p$9
+  presetStyle: p$8
 };
-const a$a = {
+const a$b = {
   a: [
-    ...a$c,
+    ...a$d,
     {
       property: "display",
       value: { type: "keyword", value: "inline-block" }
     }
   ]
-}, n$5 = {
+}, n$4 = {
   type: "container",
   placeholder: "Link",
   icon: LinkIcon,
-  presetStyle: a$a,
+  presetStyle: a$b,
   states: [
     ...defaultStates,
     {
@@ -5181,46 +5202,46 @@ const a$a = {
     }
   ]
 };
-const a$9 = {
-  ...n$5,
+const a$a = {
+  ...n$4,
   type: "rich-text-child"
 };
-const s$3 = {
+const s$5 = {
   span
-}, c$7 = {
+}, c$6 = {
   type: "rich-text-child",
   label: "Text",
   icon: PaintBrushIcon,
   states: defaultStates,
-  presetStyle: s$3
+  presetStyle: s$5
 };
-const p$8 = {
+const p$7 = {
   b: b$8
 }, l$6 = {
   type: "rich-text-child",
   label: "Bold Text",
   icon: BoldIcon,
   states: defaultStates,
-  presetStyle: p$8
+  presetStyle: p$7
 };
-const r$d = {
+const r$b = {
   i: [
-    ...i$3,
+    ...i$1,
     {
       property: "font-style",
       value: { type: "keyword", value: "italic" }
     }
   ]
-}, c$6 = {
+}, c$5 = {
   type: "rich-text-child",
   label: "Italic Text",
   icon: TextItalicIcon,
   states: defaultStates,
-  presetStyle: r$d
+  presetStyle: r$b
 };
 const e$3 = {
   sup
-}, a$8 = {
+}, a$9 = {
   type: "rich-text-child",
   label: "Superscript Text",
   icon: SuperscriptIcon,
@@ -5229,7 +5250,7 @@ const e$3 = {
 };
 const e$2 = {
   sub
-}, a$7 = {
+}, a$8 = {
   type: "rich-text-child",
   label: "Subscript Text",
   icon: SubscriptIcon,
@@ -5238,7 +5259,7 @@ const e$2 = {
 };
 const l$5 = {
   button
-}, p$7 = {
+}, p$6 = {
   icon: ButtonElementIcon,
   type: "container",
   presetStyle: l$5,
@@ -5248,7 +5269,7 @@ const l$5 = {
     { selector: ":enabled", label: "Enabled" }
   ]
 };
-const r$c = {
+const r$a = {
   input: [
     ...input,
     {
@@ -5256,13 +5277,13 @@ const r$c = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, c$5 = {
+}, c$4 = {
   category: "forms",
   type: "control",
   label: "Text Input",
   description: "A single-line text input for collecting string data from your users.",
   icon: FormTextFieldIcon,
-  presetStyle: r$c,
+  presetStyle: r$a,
   order: 3,
   states: [
     ...defaultStates,
@@ -5278,7 +5299,7 @@ const r$c = {
     //{ selector: ":read-write", label: "Read Write" },
   ]
 };
-const c$4 = {
+const c$3 = {
   label: "Webhook Form",
   icon: WebhookFormIcon,
   type: "container",
@@ -5290,22 +5311,22 @@ const c$4 = {
     { selector: "[data-state=success]", label: "Success" }
   ]
 };
-const s$2 = {
+const s$4 = {
   form: [
     ...form,
     { property: "min-height", value: { type: "unit", unit: "px", value: 20 } }
   ]
-}, n$4 = {
+}, n$3 = {
   category: "forms",
   type: "container",
   label: "Form",
   description: "Create filters, surveys, searches and more.",
   icon: FormIcon,
   states: defaultStates,
-  presetStyle: s$2,
+  presetStyle: s$4,
   order: 0
 };
-const a$6 = {
+const a$7 = {
   img: [
     ...img,
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
@@ -5333,10 +5354,10 @@ const a$6 = {
   description: "Add an image asset to the page. Webstudio automatically converts images to WebP or AVIF format and makes them responsive for best performance.",
   icon: ImageIcon,
   states: defaultStates,
-  presetStyle: a$6,
+  presetStyle: a$7,
   order: 0
 };
-const r$b = {
+const r$9 = {
   blockquote: [
     {
       property: "margin-top",
@@ -5383,14 +5404,14 @@ const r$b = {
       value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
     }
   ]
-}, i$2 = {
+}, i = {
   type: "container",
   placeholder: "Blockquote",
   icon: BlockquoteIcon,
   states: defaultStates,
-  presetStyle: r$b
+  presetStyle: r$9
 };
-const a$5 = {
+const a$6 = {
   ol: [
     ...ol,
     {
@@ -5425,9 +5446,9 @@ const a$5 = {
   type: "container",
   icon: ListIcon,
   states: defaultStates,
-  presetStyle: a$5
+  presetStyle: a$6
 };
-const a$4 = {
+const a$5 = {
   type: "container",
   placeholder: "List item",
   icon: ListItemIcon,
@@ -5436,7 +5457,7 @@ const a$4 = {
     li
   }
 };
-const p$6 = {
+const p$5 = {
   hr: [
     ...hr,
     {
@@ -5464,16 +5485,16 @@ const p$6 = {
       value: { type: "keyword", value: "none" }
     }
   ]
-}, n$3 = {
+}, n$2 = {
   category: "general",
   type: "embed",
   description: "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
   icon: MinusIcon,
   states: defaultStates,
-  presetStyle: p$6,
+  presetStyle: p$5,
   order: 3
 };
-const p$5 = {
+const p$4 = {
   code: [
     ...code,
     {
@@ -5507,10 +5528,10 @@ const p$5 = {
   description: "Use this component when you want to display code as text on the page.",
   icon: BracesIcon,
   states: defaultStates,
-  presetStyle: p$5,
+  presetStyle: p$4,
   order: 5
 };
-const a$3 = {
+const a$4 = {
   label: [
     ...label,
     { property: "display", value: { type: "keyword", value: "block" } }
@@ -5520,7 +5541,7 @@ const a$3 = {
   label: "Input Label",
   icon: LabelIcon,
   states: defaultStates,
-  presetStyle: a$3
+  presetStyle: a$4
 };
 const l$3 = {
   textarea: [
@@ -5532,7 +5553,7 @@ const l$3 = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, c$3 = {
+}, c$2 = {
   category: "forms",
   type: "control",
   label: "Text Area",
@@ -5554,7 +5575,7 @@ const l$3 = {
     //{ selector: ":read-write", label: "Read Write" },
   ]
 };
-const a$2 = {
+const a$3 = {
   input: [
     ...radio,
     {
@@ -5562,11 +5583,11 @@ const a$2 = {
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, s$1 = {
+}, s$3 = {
   type: "control",
   label: "Radio",
   icon: RadioCheckedIcon,
-  presetStyle: a$2,
+  presetStyle: a$3,
   states: [
     ...defaultStates,
     { selector: ":checked", label: "Checked" },
@@ -5602,72 +5623,76 @@ const o$3 = {
     { selector: ":read-write", label: "Read Write" }
   ]
 };
-const r$a = {
-  div
-}, c$2 = {
+const m$2 = {
   type: "container",
   icon: VimeoIcon,
   states: defaultStates,
-  presetStyle: r$a,
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link", "Heading"] }
+  contentModel: {
+    category: "instance",
+    children: [
+      "instance",
+      "VimeoSpinner",
+      "VimeoPlayButton",
+      "VimeoPreviewImage"
+    ]
+  },
+  presetStyle: {
+    div
   }
 };
-const i$1 = {
-  div
-}, c$1 = {
+const p$3 = {
   type: "container",
   icon: YoutubeIcon,
   states: defaultStates,
-  presetStyle: i$1,
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link", "Heading"] }
+  contentModel: {
+    category: "instance",
+    children: [
+      "instance",
+      "VimeoSpinner",
+      "VimeoPlayButton",
+      "VimeoPreviewImage"
+    ]
+  },
+  presetStyle: {
+    div
   }
 };
-const i = {
+const a$2 = {
   ...l$4,
   category: "hidden",
   label: "Preview Image",
-  constraints: {
-    relation: "ancestor",
-    component: { $in: ["Vimeo", "YouTube"] }
+  contentModel: {
+    category: "none",
+    children: ["empty"]
   }
 };
-const r$9 = {
-  button
-}, p$4 = {
+const s$2 = {
   category: "hidden",
   type: "container",
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $in: ["Vimeo", "YouTube"] }
-    },
-    {
-      relation: "ancestor",
-      component: { $neq: "Button" }
-    }
-  ],
   label: "Play Button",
   icon: ButtonElementIcon,
-  presetStyle: r$9,
-  states: defaultStates
+  states: defaultStates,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: {
+    button
+  }
 };
-const n$2 = {
-  div
-}, m$2 = {
+const s$1 = {
   type: "container",
-  constraints: {
-    relation: "ancestor",
-    component: { $in: ["Vimeo", "YouTube"] }
-  },
   icon: BoxIcon,
   states: defaultStates,
-  presetStyle: n$2,
   category: "hidden",
-  label: "Spinner"
+  label: "Spinner",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: {
+    div
+  }
 };
 const e$1 = {
   category: "xml",
@@ -5701,7 +5726,7 @@ const r$7 = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, c = {
+}, c$1 = {
   type: "container",
   icon: SelectIcon,
   presetStyle: r$7,
@@ -5749,42 +5774,36 @@ const r$5 = {
   icon: HeaderIcon,
   type: "container",
   description: "Inserts children into the head of the document",
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $nin: ["HeadSlot"] }
-    },
-    {
-      relation: "child",
-      component: { $in: ["HeadLink", "HeadMeta", "HeadTitle"] }
-    }
-  ]
+  contentModel: {
+    category: "instance",
+    children: ["HeadLink", "HeadMeta", "HeadTitle"]
+  }
 };
-const p$3 = {
+const p$2 = {
   category: "hidden",
   icon: ResourceIcon,
   type: "embed",
-  constraints: {
-    relation: "parent",
-    component: { $eq: "HeadSlot" }
+  contentModel: {
+    category: "none",
+    children: ["empty"]
   }
 };
-const p$2 = {
+const p$1 = {
   category: "hidden",
   icon: WindowInfoIcon,
   type: "embed",
-  constraints: {
-    relation: "parent",
-    component: { $eq: "HeadSlot" }
+  contentModel: {
+    category: "none",
+    children: ["empty"]
   }
 };
-const p$1 = {
+const c = {
   category: "hidden",
   icon: WindowTitleIcon,
   type: "container",
-  constraints: {
-    relation: "parent",
-    component: { $eq: "HeadSlot" }
+  contentModel: {
+    category: "none",
+    children: ["text"]
   }
 };
 const r$4 = {
@@ -5801,51 +5820,51 @@ const r$4 = {
 };
 const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Blockquote: i$2,
-  Body: n$7,
+  Blockquote: i,
+  Body: n$6,
   Bold: l$6,
   Box: v$2,
-  Button: p$7,
+  Button: p$6,
   Checkbox: d$3,
   CodeText: d$4,
-  Form: c$4,
+  Form: c$3,
   Fragment: o$4,
-  HeadLink: p$3,
-  HeadMeta: p$2,
+  HeadLink: p$2,
+  HeadMeta: p$1,
   HeadSlot: r$5,
-  HeadTitle: p$1,
+  HeadTitle: c,
   Heading: d$6,
-  HtmlEmbed: a$d,
+  HtmlEmbed: r$c,
   Image: l$4,
-  Input: c$5,
-  Italic: c$6,
+  Input: c$4,
+  Italic: c$5,
   Label: m$3,
-  Link: n$5,
+  Link: n$4,
   List: d$5,
-  ListItem: a$4,
-  MarkdownEmbed: t$1,
+  ListItem: a$5,
+  MarkdownEmbed: a$e,
   Option: r$6,
-  Paragraph: n$6,
-  RadioButton: s$1,
-  RemixForm: n$4,
-  RichTextLink: a$9,
-  Select: c,
-  Separator: n$3,
+  Paragraph: n$5,
+  RadioButton: s$3,
+  RemixForm: n$3,
+  RichTextLink: a$a,
+  Select: c$1,
+  Separator: n$2,
   Slot: e$5,
-  Span: c$7,
-  Subscript: a$7,
-  Superscript: a$8,
-  Text: s$4,
-  Textarea: c$3,
+  Span: c$6,
+  Subscript: a$8,
+  Superscript: a$9,
+  Text: s$6,
+  Textarea: c$2,
   Time: s,
   Video: r$4,
-  Vimeo: c$2,
-  VimeoPlayButton: p$4,
-  VimeoPreviewImage: i,
-  VimeoSpinner: m$2,
+  Vimeo: m$2,
+  VimeoPlayButton: s$2,
+  VimeoPreviewImage: a$2,
+  VimeoSpinner: s$1,
   XmlNode: e$1,
   XmlTime: a$1,
-  YouTube: c$1
+  YouTube: p$3
 }, Symbol.toStringTag, { value: "Module" }));
 const o$2 = {
   category: "animations",
@@ -5920,11 +5939,11 @@ const animationComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Ob
 }, Symbol.toStringTag, { value: "Module" }));
 const remixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Body: n$7,
-  Form: c$4,
-  Link: n$5,
-  RemixForm: n$4,
-  RichTextLink: a$9
+  Body: n$6,
+  Form: c$3,
+  Link: n$4,
+  RemixForm: n$3,
+  RichTextLink: a$a
 }, Symbol.toStringTag, { value: "Module" }));
 const r = (t2) => new Proxy(
   {},
@@ -6069,7 +6088,7 @@ const S$1 = {
 }, h$1 = {
   type: "container",
   presetStyle: {
-    p: p$a
+    p: p$9
   },
   icon: TextIcon,
   constraints: {
@@ -6798,11 +6817,11 @@ const createFramework$2 = async () => {
 };
 const reactRouterComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Body: n$7,
-  Form: c$4,
-  Link: n$5,
-  RemixForm: n$4,
-  RichTextLink: a$9
+  Body: n$6,
+  Form: c$3,
+  Link: n$4,
+  RemixForm: n$3,
+  RichTextLink: a$a
 }, Symbol.toStringTag, { value: "Module" }));
 const createFramework$1 = async () => {
   const routeTemplatesDir = join("app", "route-templates");
@@ -7622,7 +7641,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.212.0";
+const version = "0.213.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";
@@ -7670,15 +7689,15 @@ const dependencies = {
   zod: "^3.24.2"
 };
 const devDependencies = {
-  "@netlify/vite-plugin-react-router": "^1.0.0",
-  "@react-router/dev": "^7.4.0",
-  "@react-router/fs-routes": "^7.4.0",
-  "@remix-run/cloudflare": "^2.16.2",
-  "@remix-run/cloudflare-pages": "^2.16.2",
-  "@remix-run/dev": "^2.16.2",
-  "@remix-run/node": "^2.16.2",
-  "@remix-run/react": "^2.16.2",
-  "@remix-run/server-runtime": "^2.16.2",
+  "@netlify/vite-plugin-react-router": "^1.0.1",
+  "@react-router/dev": "^7.5.0",
+  "@react-router/fs-routes": "^7.5.0",
+  "@remix-run/cloudflare": "^2.16.4",
+  "@remix-run/cloudflare-pages": "^2.16.4",
+  "@remix-run/dev": "^2.16.4",
+  "@remix-run/node": "^2.16.4",
+  "@remix-run/react": "^2.16.4",
+  "@remix-run/server-runtime": "^2.16.4",
   "@types/react": "^18.2.70",
   "@types/react-dom": "^18.2.25",
   "@types/yargs": "^17.0.33",
@@ -7700,9 +7719,9 @@ const devDependencies = {
   prettier: "3.5.3",
   react: "18.3.0-canary-14898b6a9-20240318",
   "react-dom": "18.3.0-canary-14898b6a9-20240318",
-  "react-router": "^7.4.0",
+  "react-router": "^7.5.0",
   "ts-expect": "^1.3.0",
-  vike: "^0.4.227",
+  vike: "^0.4.228",
   vite: "^5.4.11",
   vitest: "^3.0.8",
   wrangler: "^3.63.2"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.212.0",
+  "version": "0.213.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -43,15 +43,15 @@
     "zod": "^3.24.2"
   },
   "devDependencies": {
-    "@netlify/vite-plugin-react-router": "^1.0.0",
-    "@react-router/dev": "^7.4.0",
-    "@react-router/fs-routes": "^7.4.0",
-    "@remix-run/cloudflare": "^2.16.2",
-    "@remix-run/cloudflare-pages": "^2.16.2",
-    "@remix-run/dev": "^2.16.2",
-    "@remix-run/node": "^2.16.2",
-    "@remix-run/react": "^2.16.2",
-    "@remix-run/server-runtime": "^2.16.2",
+    "@netlify/vite-plugin-react-router": "^1.0.1",
+    "@react-router/dev": "^7.5.0",
+    "@react-router/fs-routes": "^7.5.0",
+    "@remix-run/cloudflare": "^2.16.4",
+    "@remix-run/cloudflare-pages": "^2.16.4",
+    "@remix-run/dev": "^2.16.4",
+    "@remix-run/node": "^2.16.4",
+    "@remix-run/react": "^2.16.4",
+    "@remix-run/server-runtime": "^2.16.4",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "@types/yargs": "^17.0.33",
@@ -62,23 +62,23 @@
     "prettier": "3.5.3",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "react-router": "^7.4.0",
+    "react-router": "^7.5.0",
     "ts-expect": "^1.3.0",
-    "vike": "^0.4.227",
+    "vike": "^0.4.228",
     "vite": "^5.4.11",
     "vitest": "^3.0.8",
     "wrangler": "^3.63.2",
-    "@webstudio-is/css-engine": "0.212.0",
-    "@webstudio-is/http-client": "0.212.0",
-    "@webstudio-is/image": "0.212.0",
-    "@webstudio-is/react-sdk": "0.212.0",
-    "@webstudio-is/sdk": "0.212.0",
-    "@webstudio-is/sdk-components-animation": "0.212.0",
-    "@webstudio-is/sdk-components-react": "0.212.0",
-    "@webstudio-is/sdk-components-react-radix": "0.212.0",
-    "@webstudio-is/sdk-components-react-remix": "0.212.0",
-    "@webstudio-is/sdk-components-react-router": "0.212.0",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/css-engine": "0.213.0",
+    "@webstudio-is/http-client": "0.213.0",
+    "@webstudio-is/image": "0.213.0",
+    "@webstudio-is/react-sdk": "0.213.0",
+    "@webstudio-is/sdk-components-animation": "0.213.0",
+    "@webstudio-is/sdk-components-react": "0.213.0",
+    "@webstudio-is/sdk-components-react-radix": "0.213.0",
+    "@webstudio-is/sdk-components-react-remix": "0.213.0",
+    "@webstudio-is/sdk-components-react-router": "0.213.0",
+    "@webstudio-is/tsconfig": "1.0.7",
+    "@webstudio-is/sdk": "0.213.0"
   },
   "scripts": {
     "typecheck": "tsc",

package/templates/cloudflare/package.json

@@ -12,8 +12,8 @@
     "build-cf-types": "wrangler types"
   },
   "dependencies": {
-    "@remix-run/cloudflare": "2.16.2",
-    "@remix-run/cloudflare-pages": "2.16.2"
+    "@remix-run/cloudflare": "2.16.4",
+    "@remix-run/cloudflare-pages": "2.16.4"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240620.0",

package/templates/defaults/package.json

@@ -8,22 +8,22 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/node": "2.16.2",
-    "@remix-run/react": "2.16.2",
-    "@remix-run/server-runtime": "2.16.2",
-    "@webstudio-is/image": "0.212.0",
-    "@webstudio-is/react-sdk": "0.212.0",
-    "@webstudio-is/sdk": "0.212.0",
-    "@webstudio-is/sdk-components-react": "0.212.0",
-    "@webstudio-is/sdk-components-animation": "0.212.0",
-    "@webstudio-is/sdk-components-react-radix": "0.212.0",
-    "@webstudio-is/sdk-components-react-remix": "0.212.0",
+    "@remix-run/node": "2.16.4",
+    "@remix-run/react": "2.16.4",
+    "@remix-run/server-runtime": "2.16.4",
+    "@webstudio-is/image": "0.213.0",
+    "@webstudio-is/react-sdk": "0.213.0",
+    "@webstudio-is/sdk": "0.213.0",
+    "@webstudio-is/sdk-components-react": "0.213.0",
+    "@webstudio-is/sdk-components-animation": "0.213.0",
+    "@webstudio-is/sdk-components-react-radix": "0.213.0",
+    "@webstudio-is/sdk-components-react-remix": "0.213.0",
     "isbot": "^5.1.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "devDependencies": {
-    "@remix-run/dev": "2.16.2",
+    "@remix-run/dev": "2.16.4",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "typescript": "5.8.2",

package/templates/react-router/package.json

@@ -8,19 +8,19 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@react-router/dev": "^7.4.0",
-    "@react-router/fs-routes": "^7.4.0",
-    "@webstudio-is/image": "0.212.0",
-    "@webstudio-is/react-sdk": "0.212.0",
-    "@webstudio-is/sdk": "0.212.0",
-    "@webstudio-is/sdk-components-animation": "0.212.0",
-    "@webstudio-is/sdk-components-react-radix": "0.212.0",
-    "@webstudio-is/sdk-components-react-router": "0.212.0",
-    "@webstudio-is/sdk-components-react": "0.212.0",
+    "@react-router/dev": "^7.5.0",
+    "@react-router/fs-routes": "^7.5.0",
+    "@webstudio-is/image": "0.213.0",
+    "@webstudio-is/react-sdk": "0.213.0",
+    "@webstudio-is/sdk": "0.213.0",
+    "@webstudio-is/sdk-components-animation": "0.213.0",
+    "@webstudio-is/sdk-components-react-radix": "0.213.0",
+    "@webstudio-is/sdk-components-react-router": "0.213.0",
+    "@webstudio-is/sdk-components-react": "0.213.0",
     "isbot": "^5.1.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "react-router": "^7.4.0",
+    "react-router": "^7.5.0",
     "vite": "^5.4.11"
   },
   "devDependencies": {

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

@@ -3,8 +3,8 @@
     "start": "react-router-serve ./build/server/index.js"
   },
   "dependencies": {
-    "@react-router/node": "^7.4.0",
-    "@react-router/serve": "^7.4.0",
+    "@react-router/node": "^7.5.0",
+    "@react-router/serve": "^7.5.0",
     "h3": "^1.15.1",
     "ipx": "^3.0.3"
   }

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

@@ -4,7 +4,7 @@
     "deploy": "npx netlify-cli deploy --build --prod"
   },
   "dependencies": {
-    "@netlify/vite-plugin-react-router": "^1.0.0",
-    "@react-router/node": "^7.4.0"
+    "@netlify/vite-plugin-react-router": "^1.0.1",
+    "@react-router/node": "^7.5.0"
   }
 }

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

@@ -3,7 +3,7 @@
     "deploy": "npx vercel deploy"
   },
   "dependencies": {
-    "@react-router/node": "^7.4.0",
+    "@react-router/node": "^7.5.0",
     "@vercel/react-router": "^1.1.0"
   }
 }

package/templates/ssg/package.json

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