webstudio 0.199.0 → 0.201.0

package/lib/cli.js

@@ -77,7 +77,16 @@ const PROJECT_TEMPLATES = [
     label: "Vanilla",
     expand: ["defaults"]
   },
-  { value: "vercel", label: "Vercel", expand: ["defaults", "vercel"] },
+  {
+    value: "docker",
+    label: "Docker",
+    expand: ["react-router-docker"]
+  },
+  {
+    value: "vercel",
+    label: "Vercel",
+    expand: ["defaults", "vercel"]
+  },
   {
     value: "netlify-functions",
     label: "Netlify Functions",
@@ -88,7 +97,10 @@ const PROJECT_TEMPLATES = [
     label: "Netlify Edge Functions",
     expand: ["defaults", "netlify-edge-functions"]
   },
-  { value: "ssg", label: "Static Site Generation (SSG)" },
+  {
+    value: "ssg",
+    label: "Static Site Generation (SSG)"
+  },
   {
     value: "ssg-netlify",
     label: "Static Site Generation (SSG) Netlify",
@@ -105,11 +117,6 @@ const INTERNAL_TEMPLATES = [
     value: "cloudflare",
     label: "Cloudflare",
     expand: ["defaults", "cloudflare"]
-  },
-  {
-    value: "react-router-docker",
-    label: "Dokcer",
-    expand: ["react-router-docker"]
   }
 ];
 const isFileExists = async (filePath) => {
@@ -1949,7 +1956,6 @@ z.object({
   // important to automatically enumerate collections without
   // naming every item manually
   indexWithinAncestor: z.optional(z.string()),
-  stylable: z.optional(z.boolean()),
   label: z.optional(z.string()),
   description: z.string().optional(),
   icon: z.string(),
@@ -2338,14 +2344,15 @@ const collectionComponent = "ws:collection";
 const collectionMeta = {
   type: "container",
   label: "Collection",
-  icon: ListViewIcon,
-  stylable: false
+  icon: ListViewIcon
 };
 const descendantComponent = "ws:descendant";
 const descendantMeta = {
   type: "control",
   label: "Descendant",
   icon: PaintBrushIcon,
+  // @todo infer possible presets
+  presetStyle: {},
   constraints: {
     relation: "parent",
     component: { $in: ["HtmlEmbed", "MarkdownEmbed"] }
@@ -2356,7 +2363,6 @@ const blockTemplateComponent = "ws:block-template";
 const blockTemplateMeta = {
   type: "container",
   icon: AddTemplateInstanceIcon,
-  stylable: false,
   constraints: {
     relation: "parent",
     component: { $eq: blockComponent }
@@ -2375,8 +2381,7 @@ const blockMeta = {
       relation: "child",
       component: { $eq: blockTemplateComponent }
     }
-  ],
-  stylable: false
+  ]
 };
 const coreMetas = {
   [rootComponent]: rootMeta,
@@ -3796,13 +3801,11 @@ const meta$I = {
   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,
-  stylable: false,
   order: 5
 };
 const meta$H = {
   type: "container",
-  icon: "",
-  stylable: false
+  icon: ""
 };
 const props = {
   className: { required: false, control: "text", type: "string" },
@@ -3814,7 +3817,7 @@ const props = {
     type: "boolean"
   }
 };
-const presetStyle$E = {
+const presetStyle$y = {
   div: [
     {
       property: "display",
@@ -3832,7 +3835,7 @@ const meta$G = {
   label: "HTML Embed",
   description: "Used to add HTML code to the page, such as an SVG or script.",
   icon: EmbedIcon,
-  presetStyle: presetStyle$E,
+  presetStyle: presetStyle$y,
   order: 2
 };
 ({
@@ -3872,7 +3875,7 @@ const meta$F = {
     ]
   }
 };
-const presetStyle$D = {
+const presetStyle$x = {
   body: [
     ...body,
     {
@@ -3889,9 +3892,9 @@ const meta$E = {
   type: "container",
   icon: BodyIcon,
   states: defaultStates,
-  presetStyle: presetStyle$D
+  presetStyle: presetStyle$x
 };
-const presetStyle$C = {
+const presetStyle$w = {
   div,
   address,
   article,
@@ -3909,10 +3912,10 @@ const meta$D = {
   description: "A container for content. By default this is a Div, but the tag can be changed in settings.",
   icon: BoxIcon,
   states: defaultStates,
-  presetStyle: presetStyle$C,
+  presetStyle: presetStyle$w,
   order: 0
 };
-const presetStyle$B = {
+const presetStyle$v = {
   div: [
     ...div,
     {
@@ -3925,9 +3928,9 @@ const meta$C = {
   type: "container",
   icon: TextIcon,
   states: defaultStates,
-  presetStyle: presetStyle$B
+  presetStyle: presetStyle$v
 };
-const presetStyle$A = {
+const presetStyle$u = {
   h1,
   h2,
   h3,
@@ -3943,9 +3946,9 @@ const meta$B = {
     component: { $neq: "Heading" }
   },
   states: defaultStates,
-  presetStyle: presetStyle$A
+  presetStyle: presetStyle$u
 };
-const presetStyle$z = {
+const presetStyle$t = {
   p
 };
 const meta$A = {
@@ -3956,9 +3959,9 @@ const meta$A = {
     component: { $neq: "Paragraph" }
   },
   states: defaultStates,
-  presetStyle: presetStyle$z
+  presetStyle: presetStyle$t
 };
-const presetStyle$y = {
+const presetStyle$s = {
   a: [
     ...a,
     {
@@ -3974,7 +3977,7 @@ const meta$z = {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
   },
-  presetStyle: presetStyle$y,
+  presetStyle: presetStyle$s,
   states: [
     ...defaultStates,
     {
@@ -3992,7 +3995,7 @@ const meta$y = {
   ...meta$z,
   type: "rich-text-child"
 };
-const presetStyle$x = {
+const presetStyle$r = {
   span
 };
 const meta$x = {
@@ -4000,9 +4003,9 @@ const meta$x = {
   label: "Text",
   icon: PaintBrushIcon,
   states: defaultStates,
-  presetStyle: presetStyle$x
+  presetStyle: presetStyle$r
 };
-const presetStyle$w = {
+const presetStyle$q = {
   b
 };
 const meta$w = {
@@ -4010,9 +4013,9 @@ const meta$w = {
   label: "Bold Text",
   icon: BoldIcon,
   states: defaultStates,
-  presetStyle: presetStyle$w
+  presetStyle: presetStyle$q
 };
-const presetStyle$v = {
+const presetStyle$p = {
   i: [
     ...i,
     {
@@ -4026,9 +4029,9 @@ const meta$v = {
   label: "Italic Text",
   icon: TextItalicIcon,
   states: defaultStates,
-  presetStyle: presetStyle$v
+  presetStyle: presetStyle$p
 };
-const presetStyle$u = {
+const presetStyle$o = {
   sup
 };
 const meta$u = {
@@ -4036,9 +4039,9 @@ const meta$u = {
   label: "Superscript Text",
   icon: SuperscriptIcon,
   states: defaultStates,
-  presetStyle: presetStyle$u
+  presetStyle: presetStyle$o
 };
-const presetStyle$t = {
+const presetStyle$n = {
   sub
 };
 const meta$t = {
@@ -4046,9 +4049,9 @@ const meta$t = {
   label: "Subscript Text",
   icon: SubscriptIcon,
   states: defaultStates,
-  presetStyle: presetStyle$t
+  presetStyle: presetStyle$n
 };
-const presetStyle$s = {
+const presetStyle$m = {
   button
 };
 const meta$s = {
@@ -4058,14 +4061,14 @@ const meta$s = {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
   },
-  presetStyle: presetStyle$s,
+  presetStyle: presetStyle$m,
   states: [
     ...defaultStates,
     { selector: ":disabled", label: "Disabled" },
     { selector: ":enabled", label: "Enabled" }
   ]
 };
-const presetStyle$r = {
+const presetStyle$l = {
   input: [
     ...input,
     {
@@ -4084,7 +4087,7 @@ const meta$r = {
   label: "Text Input",
   description: "A single-line text input for collecting string data from your users.",
   icon: FormTextFieldIcon,
-  presetStyle: presetStyle$r,
+  presetStyle: presetStyle$l,
   order: 3,
   states: [
     ...defaultStates,
@@ -4116,7 +4119,7 @@ const meta$q = {
     { selector: "[data-state=success]", label: "Success" }
   ]
 };
-const presetStyle$q = {
+const presetStyle$k = {
   form: [
     ...form,
     { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
@@ -4133,10 +4136,10 @@ const meta$p = {
   description: "Create filters, surveys, searches and more.",
   icon: FormIcon,
   states: defaultStates,
-  presetStyle: presetStyle$q,
+  presetStyle: presetStyle$k,
   order: 0
 };
-const presetStyle$p = {
+const presetStyle$j = {
   img: [
     ...img,
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
@@ -4165,10 +4168,10 @@ const meta$o = {
   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: presetStyle$p,
+  presetStyle: presetStyle$j,
   order: 0
 };
-const presetStyle$o = {
+const presetStyle$i = {
   blockquote: [
     {
       property: "marginTop",
@@ -4220,9 +4223,9 @@ const meta$n = {
   type: "container",
   icon: BlockquoteIcon,
   states: defaultStates,
-  presetStyle: presetStyle$o
+  presetStyle: presetStyle$i
 };
-const presetStyle$n = {
+const presetStyle$h = {
   ol: [
     ...ol,
     {
@@ -4258,9 +4261,9 @@ const meta$m = {
   type: "container",
   icon: ListIcon,
   states: defaultStates,
-  presetStyle: presetStyle$n
+  presetStyle: presetStyle$h
 };
-const presetStyle$m = {
+const presetStyle$g = {
   li
 };
 const meta$l = {
@@ -4274,9 +4277,9 @@ const meta$l = {
   },
   icon: ListItemIcon,
   states: defaultStates,
-  presetStyle: presetStyle$m
+  presetStyle: presetStyle$g
 };
-const presetStyle$l = {
+const presetStyle$f = {
   hr: [
     ...hr,
     {
@@ -4311,10 +4314,10 @@ const meta$k = {
   description: "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
   icon: MinusIcon,
   states: defaultStates,
-  presetStyle: presetStyle$l,
+  presetStyle: presetStyle$f,
   order: 3
 };
-const presetStyle$k = {
+const presetStyle$e = {
   code: [
     ...code,
     {
@@ -4353,10 +4356,10 @@ const meta$j = {
     component: { $neq: "CodeText" }
   },
   states: defaultStates,
-  presetStyle: presetStyle$k,
+  presetStyle: presetStyle$e,
   order: 5
 };
-const presetStyle$j = {
+const presetStyle$d = {
   label: [
     ...label,
     { property: "display", value: { type: "keyword", value: "block" } }
@@ -4371,9 +4374,9 @@ const meta$i = {
   label: "Input Label",
   icon: LabelIcon,
   states: defaultStates,
-  presetStyle: presetStyle$j
+  presetStyle: presetStyle$d
 };
-const presetStyle$i = {
+const presetStyle$c = {
   textarea: [
     ...textarea,
     // resize doesn't work well while on canvas
@@ -4390,7 +4393,7 @@ const meta$h = {
   label: "Text Area",
   description: "A multi-line text input for collecting longer string data from your users.",
   icon: FormTextAreaIcon,
-  presetStyle: presetStyle$i,
+  presetStyle: presetStyle$c,
   order: 4,
   constraints: {
     relation: "ancestor",
@@ -4410,7 +4413,7 @@ const meta$h = {
     //{ selector: ":read-write", label: "Read Write" },
   ]
 };
-const presetStyle$h = {
+const presetStyle$b = {
   input: [
     ...radio,
     {
@@ -4427,7 +4430,7 @@ const meta$g = {
   type: "control",
   label: "Radio",
   icon: RadioCheckedIcon,
-  presetStyle: presetStyle$h,
+  presetStyle: presetStyle$b,
   states: [
     ...defaultStates,
     { selector: ":checked", label: "Checked" },
@@ -4440,7 +4443,7 @@ const meta$g = {
     //{ selector: ":read-write", label: "Read Write" },
   ]
 };
-const presetStyle$g = {
+const presetStyle$a = {
   input: [
     ...checkbox,
     {
@@ -4456,7 +4459,7 @@ const meta$f = {
   },
   type: "control",
   icon: CheckboxCheckedIcon,
-  presetStyle: presetStyle$g,
+  presetStyle: presetStyle$a,
   states: [
     ...defaultStates,
     { selector: ":checked", label: "Checked" },
@@ -4468,27 +4471,27 @@ const meta$f = {
     { selector: ":read-write", label: "Read Write" }
   ]
 };
-const presetStyle$f = {
+const presetStyle$9 = {
   div
 };
 const meta$e = {
   type: "container",
   icon: VimeoIcon,
   states: defaultStates,
-  presetStyle: presetStyle$f,
+  presetStyle: presetStyle$9,
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link", "Heading"] }
   }
 };
-const presetStyle$e = {
+const presetStyle$8 = {
   div
 };
 const meta$d = {
   type: "container",
   icon: YoutubeIcon,
   states: defaultStates,
-  presetStyle: presetStyle$e,
+  presetStyle: presetStyle$8,
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link", "Heading"] }
@@ -4503,7 +4506,7 @@ const meta$c = {
     component: { $in: ["Vimeo", "YouTube"] }
   }
 };
-const presetStyle$d = {
+const presetStyle$7 = {
   button
 };
 const meta$b = {
@@ -4521,10 +4524,10 @@ const meta$b = {
   ],
   label: "Play Button",
   icon: ButtonElementIcon,
-  presetStyle: presetStyle$d,
+  presetStyle: presetStyle$7,
   states: defaultStates
 };
-const presetStyle$c = {
+const presetStyle$6 = {
   div
 };
 const meta$a = {
@@ -4535,7 +4538,7 @@ const meta$a = {
   },
   icon: BoxIcon,
   states: defaultStates,
-  presetStyle: presetStyle$c,
+  presetStyle: presetStyle$6,
   category: "hidden",
   label: "Spinner"
 };
@@ -4544,7 +4547,6 @@ const meta$9 = {
   order: 6,
   type: "container",
   icon: XmlIcon,
-  stylable: false,
   description: "XML Node"
 };
 const meta$8 = {
@@ -4552,10 +4554,9 @@ const meta$8 = {
   type: "container",
   description: "Converts machine-readable date and time to ISO format.",
   icon: CalendarIcon,
-  stylable: false,
   order: 7
 };
-const presetStyle$b = {
+const presetStyle$5 = {
   time
 };
 const meta$7 = {
@@ -4564,9 +4565,9 @@ const meta$7 = {
   description: "Converts machine-readable date and time to a human-readable format.",
   icon: CalendarIcon,
   states: defaultStates,
-  presetStyle: presetStyle$b
+  presetStyle: presetStyle$5
 };
-const presetStyle$a = {
+const presetStyle$4 = {
   select: [
     ...select,
     {
@@ -4582,7 +4583,7 @@ const meta$6 = {
   },
   type: "container",
   icon: SelectIcon,
-  presetStyle: presetStyle$a,
+  presetStyle: presetStyle$4,
   states: [
     ...defaultStates,
     { selector: "::placeholder", label: "Placeholder" },
@@ -4592,7 +4593,7 @@ const meta$6 = {
     { selector: ":optional", label: "Optional" }
   ]
 };
-const presetStyle$9 = {
+const presetStyle$3 = {
   option: [
     {
       property: "backgroundColor",
@@ -4616,7 +4617,7 @@ const meta$5 = {
   type: "control",
   description: "An item within a drop-down menu that users can select as their chosen value.",
   icon: ItemIcon,
-  presetStyle: presetStyle$9,
+  presetStyle: presetStyle$3,
   states: [
     // Applies when option is being activated (clicked)
     { selector: ":active", label: "Active" },
@@ -4631,7 +4632,6 @@ const meta$5 = {
 const meta$4 = {
   icon: HeaderIcon,
   type: "container",
-  stylable: false,
   description: "Inserts children into the head of the document",
   constraints: [
     {
@@ -4648,7 +4648,6 @@ const meta$3 = {
   category: "hidden",
   icon: ResourceIcon,
   type: "container",
-  stylable: false,
   constraints: {
     relation: "parent",
     component: { $eq: "HeadSlot" }
@@ -4658,7 +4657,6 @@ const meta$2 = {
   category: "hidden",
   icon: WindowInfoIcon,
   type: "container",
-  stylable: false,
   constraints: {
     relation: "parent",
     component: { $eq: "HeadSlot" }
@@ -4668,7 +4666,6 @@ const meta$1 = {
   category: "hidden",
   icon: WindowTitleIcon,
   type: "container",
-  stylable: false,
   constraints: {
     relation: "parent",
     component: { $eq: "HeadSlot" }
@@ -4732,9 +4729,6 @@ const remixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object
   RemixForm: meta$p,
   RichTextLink: meta$y
 }, Symbol.toStringTag, { value: "Module" }));
-const presetStyle$8 = {
-  div
-};
 const metaCollapsible = {
   type: "container",
   constraints: [
@@ -4747,13 +4741,14 @@ const metaCollapsible = {
       component: { $eq: "CollapsibleContent" }
     }
   ],
-  presetStyle: presetStyle$8,
+  presetStyle: {
+    div
+  },
   icon: CollapsibleIcon
 };
 const metaCollapsibleTrigger = {
   type: "container",
   icon: TriggerIcon,
-  stylable: false,
   constraints: {
     relation: "ancestor",
     component: { $eq: "Collapsible" }
@@ -4761,7 +4756,9 @@ const metaCollapsibleTrigger = {
 };
 const metaCollapsibleContent = {
   type: "container",
-  presetStyle: presetStyle$8,
+  presetStyle: {
+    div
+  },
   icon: ContentIcon,
   constraints: {
     relation: "ancestor",
@@ -4806,19 +4803,9 @@ const buttonReset = [
   unit("paddingBottom", 0, "px"),
   unit("paddingLeft", 0, "px")
 ];
-const presetStyle$7 = {
-  div
-};
-const titlePresetStyle = {
-  h2
-};
-const descriptionPresetStyle = {
-  p
-};
 const metaDialogTrigger = {
   type: "container",
   icon: TriggerIcon,
-  stylable: false,
   constraints: {
     relation: "ancestor",
     component: { $eq: "Dialog" }
@@ -4826,7 +4813,9 @@ const metaDialogTrigger = {
 };
 const metaDialogOverlay = {
   type: "container",
-  presetStyle: presetStyle$7,
+  presetStyle: {
+    div
+  },
   icon: OverlayIcon,
   constraints: [
     {
@@ -4841,7 +4830,9 @@ const metaDialogOverlay = {
 };
 const metaDialogContent = {
   type: "container",
-  presetStyle: presetStyle$7,
+  presetStyle: {
+    div
+  },
   icon: ContentIcon,
   constraints: [
     {
@@ -4868,7 +4859,9 @@ const metaDialogContent = {
 };
 const metaDialogTitle = {
   type: "container",
-  presetStyle: titlePresetStyle,
+  presetStyle: {
+    h2
+  },
   icon: HeadingIcon,
   constraints: {
     relation: "ancestor",
@@ -4877,7 +4870,9 @@ const metaDialogTitle = {
 };
 const metaDialogDescription = {
   type: "container",
-  presetStyle: descriptionPresetStyle,
+  presetStyle: {
+    p
+  },
   icon: TextIcon,
   constraints: {
     relation: "ancestor",
@@ -4899,6 +4894,7 @@ const metaDialogClose = {
 };
 const metaDialog = {
   type: "container",
+  icon: DialogIcon,
   constraints: [
     {
       relation: "descendant",
@@ -4908,17 +4904,11 @@ const metaDialog = {
       relation: "descendant",
       component: { $eq: "DialogOverlay" }
     }
-  ],
-  icon: DialogIcon,
-  stylable: false
-};
-const presetStyle$6 = {
-  div
+  ]
 };
 const metaPopoverTrigger = {
   type: "container",
   icon: TriggerIcon,
-  stylable: false,
   constraints: {
     relation: "ancestor",
     component: { $eq: "Popover" }
@@ -4926,7 +4916,9 @@ const metaPopoverTrigger = {
 };
 const metaPopoverContent = {
   type: "container",
-  presetStyle: presetStyle$6,
+  presetStyle: {
+    div
+  },
   icon: ContentIcon,
   constraints: {
     relation: "ancestor",
@@ -4935,6 +4927,7 @@ const metaPopoverContent = {
 };
 const metaPopover = {
   type: "container",
+  icon: PopoverIcon,
   constraints: [
     {
       relation: "descendant",
@@ -4944,17 +4937,11 @@ const metaPopover = {
       relation: "descendant",
       component: { $eq: "PopoverContent" }
     }
-  ],
-  icon: PopoverIcon,
-  stylable: false
-};
-const presetStyle$5 = {
-  div
+  ]
 };
 const metaTooltipTrigger = {
   type: "container",
   icon: TriggerIcon,
-  stylable: false,
   constraints: {
     relation: "ancestor",
     component: { $eq: "Tooltip" }
@@ -4963,7 +4950,9 @@ const metaTooltipTrigger = {
 const metaTooltipContent = {
   type: "container",
   icon: ContentIcon,
-  presetStyle: presetStyle$5,
+  presetStyle: {
+    div
+  },
   constraints: {
     relation: "ancestor",
     component: { $eq: "Tooltip" }
@@ -4981,10 +4970,9 @@ const metaTooltip = {
       component: { $eq: "TooltipContent" }
     }
   ],
-  icon: TooltipIcon,
-  stylable: false
+  icon: TooltipIcon
 };
-const presetStyle$4 = {
+const presetStyle$2 = {
   div
 };
 const metaTabs = {
@@ -5004,7 +4992,7 @@ const metaTabs = {
       component: { $eq: "TabsContent" }
     }
   ],
-  presetStyle: presetStyle$4
+  presetStyle: presetStyle$2
 };
 const metaTabsList = {
   type: "container",
@@ -5013,7 +5001,7 @@ const metaTabsList = {
     relation: "ancestor",
     component: { $eq: "Tabs" }
   },
-  presetStyle: presetStyle$4
+  presetStyle: presetStyle$2
 };
 const metaTabsTrigger = {
   type: "container",
@@ -5051,24 +5039,24 @@ const metaTabsContent = {
     component: { $eq: "Tabs" }
   },
   indexWithinAncestor: "Tabs",
-  presetStyle: presetStyle$4
+  presetStyle: presetStyle$2
 };
-const presetStyle$3 = {
+const presetStyle$1 = {
   label
 };
 const meta = {
   type: "container",
   icon: LabelIcon,
-  presetStyle: presetStyle$3,
+  presetStyle: presetStyle$1,
   states: defaultStates
 };
-const presetStyle$2 = {
+const presetStyle = {
   div
 };
 const metaAccordion = {
   type: "container",
   icon: AccordionIcon,
-  presetStyle: presetStyle$2,
+  presetStyle,
   constraints: [
     {
       relation: "descendant",
@@ -5095,7 +5083,7 @@ const metaAccordionItem = {
     }
   ],
   indexWithinAncestor: "Accordion",
-  presetStyle: presetStyle$2
+  presetStyle
 };
 const metaAccordionHeader = {
   type: "container",
@@ -5153,15 +5141,14 @@ const metaAccordionContent = {
     relation: "ancestor",
     component: { $eq: "AccordionItem" }
   },
-  presetStyle: presetStyle$2
-};
-const presetStyle$1 = {
-  div
+  presetStyle
 };
 const metaNavigationMenu = {
   type: "container",
   icon: NavigationMenuIcon,
-  presetStyle: presetStyle$1,
+  presetStyle: {
+    div
+  },
   constraints: [
     {
       relation: "descendant",
@@ -5186,7 +5173,9 @@ const metaNavigationMenuList = {
       component: { $eq: "NavigationMenuItem" }
     }
   ],
-  presetStyle: presetStyle$1,
+  presetStyle: {
+    div
+  },
   label: "Menu List"
 };
 const metaNavigationMenuItem = {
@@ -5196,19 +5185,19 @@ const metaNavigationMenuItem = {
     relation: "ancestor",
     component: { $eq: "NavigationMenuList" }
   },
-  presetStyle: presetStyle$1,
+  presetStyle: {
+    div
+  },
   indexWithinAncestor: "NavigationMenu",
   label: "Menu Item"
 };
 const metaNavigationMenuTrigger = {
-  stylable: false,
   type: "container",
   icon: TriggerIcon,
   constraints: {
     relation: "ancestor",
     component: { $eq: "NavigationMenuItem" }
   },
-  presetStyle: presetStyle$1,
   label: "Menu Trigger"
 };
 const metaNavigationMenuContent = {
@@ -5219,12 +5208,13 @@ const metaNavigationMenuContent = {
     component: { $eq: "NavigationMenuItem" }
   },
   indexWithinAncestor: "NavigationMenu",
-  presetStyle: presetStyle$1,
+  presetStyle: {
+    div
+  },
   label: "Menu Content"
 };
 const metaNavigationMenuLink = {
   type: "container",
-  stylable: false,
   icon: BoxIcon,
   constraints: [
     {
@@ -5236,7 +5226,6 @@ const metaNavigationMenuLink = {
       component: { $in: ["NavigationMenuContent", "NavigationMenuItem"] }
     }
   ],
-  presetStyle: presetStyle$1,
   label: "Accessible Link Wrapper"
 };
 const metaNavigationMenuViewport = {
@@ -5246,14 +5235,14 @@ const metaNavigationMenuViewport = {
     relation: "ancestor",
     component: { $eq: "NavigationMenu" }
   },
-  presetStyle: presetStyle$1,
+  presetStyle: {
+    div
+  },
   label: "Menu Viewport"
 };
-const presetStyle = {
-  div
-};
 const metaSelect = {
   type: "container",
+  icon: SelectIcon,
   constraints: [
     {
       relation: "descendant",
@@ -5263,9 +5252,7 @@ const metaSelect = {
       relation: "descendant",
       component: { $eq: "SelectContent" }
     }
-  ],
-  icon: SelectIcon,
-  stylable: false
+  ]
 };
 const metaSelectTrigger = {
   type: "container",
@@ -5299,7 +5286,9 @@ const metaSelectValue = {
 const metaSelectContent = {
   type: "container",
   icon: ContentIcon,
-  presetStyle,
+  presetStyle: {
+    div
+  },
   constraints: [
     {
       relation: "ancestor",
@@ -5314,7 +5303,9 @@ const metaSelectContent = {
 const metaSelectViewport = {
   type: "container",
   icon: ViewportIcon,
-  presetStyle,
+  presetStyle: {
+    div
+  },
   constraints: [
     {
       relation: "ancestor",
@@ -5343,7 +5334,9 @@ const metaSelectItem = {
       component: { $eq: "SelectItemText" }
     }
   ],
-  presetStyle
+  presetStyle: {
+    div
+  }
 };
 const metaSelectItemIndicator = {
   type: "container",
@@ -5885,6 +5878,11 @@ const copyTemplates = async (template) => {
 const importFrom = (importee, importer) => {
   return relative(dirname(importer), importee).replaceAll("\\", "/");
 };
+const npmrc = `force=true
+loglevel=error
+audit=false
+fund=false
+`;
 const prebuild = async (options) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   if (options.template.length === 0) {
@@ -5912,7 +5910,7 @@ Please check webstudio --help for more details`
   await rm(generatedDir, { recursive: true, force: true });
   const routesDir = join(appRoot, "routes");
   await rm(routesDir, { recursive: true, force: true });
-  await writeFile(join(cwd(), ".npmrc"), "force=true");
+  await writeFile(join(cwd(), ".npmrc"), npmrc);
   for (const template of options.template) {
     await copyTemplates(template);
   }
@@ -6473,7 +6471,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.199.0";
+const version = "0.201.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";
@@ -6504,7 +6502,7 @@ const engines = {
   node: ">=20.12"
 };
 const dependencies = {
-  "@clack/prompts": "^0.9.0",
+  "@clack/prompts": "^0.9.1",
   "@emotion/hash": "^0.9.2",
   acorn: "^8.14.0",
   "acorn-walk": "^8.3.4",
@@ -6525,7 +6523,8 @@ const dependencies = {
 const devDependencies = {
   "@netlify/remix-adapter": "^2.5.1",
   "@netlify/remix-edge-adapter": "3.4.2",
-  "@react-router/dev": "^7.1.1",
+  "@react-router/dev": "^7.1.3",
+  "@react-router/fs-routes": "^7.1.3",
   "@remix-run/cloudflare": "^2.15.2",
   "@remix-run/cloudflare-pages": "^2.15.2",
   "@remix-run/dev": "^2.15.2",
@@ -6546,13 +6545,13 @@ const devDependencies = {
   "@webstudio-is/sdk-components-react-remix": "workspace:*",
   "@webstudio-is/sdk-components-react-router": "workspace:*",
   "@webstudio-is/tsconfig": "workspace:*",
-  h3: "^1.13.1",
+  h3: "^1.14.0",
   ipx: "^3.0.1",
   prettier: "3.4.2",
   "react-dom": "18.3.0-canary-14898b6a9-20240318",
-  "react-router": "^7.1.1",
+  "react-router": "^7.1.3",
   "ts-expect": "^1.3.0",
-  vike: "^0.4.210",
+  vike: "^0.4.219",
   vite: "^5.4.11",
   vitest: "^3.0.2",
   wrangler: "^3.63.2"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.199.0",
+  "version": "0.201.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -26,7 +26,7 @@
     "node": ">=20.12"
   },
   "dependencies": {
-    "@clack/prompts": "^0.9.0",
+    "@clack/prompts": "^0.9.1",
     "@emotion/hash": "^0.9.2",
     "acorn": "^8.14.0",
     "acorn-walk": "^8.3.4",
@@ -47,7 +47,8 @@
   "devDependencies": {
     "@netlify/remix-adapter": "^2.5.1",
     "@netlify/remix-edge-adapter": "3.4.2",
-    "@react-router/dev": "^7.1.1",
+    "@react-router/dev": "^7.1.3",
+    "@react-router/fs-routes": "^7.1.3",
     "@remix-run/cloudflare": "^2.15.2",
     "@remix-run/cloudflare-pages": "^2.15.2",
     "@remix-run/dev": "^2.15.2",
@@ -58,26 +59,26 @@
     "@types/react-dom": "^18.2.25",
     "@types/yargs": "^17.0.33",
     "@vitejs/plugin-react": "^4.3.4",
-    "h3": "^1.13.1",
+    "h3": "^1.14.0",
     "ipx": "^3.0.1",
     "prettier": "3.4.2",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "react-router": "^7.1.1",
+    "react-router": "^7.1.3",
     "ts-expect": "^1.3.0",
-    "vike": "^0.4.210",
+    "vike": "^0.4.219",
     "vite": "^5.4.11",
     "vitest": "^3.0.2",
     "wrangler": "^3.63.2",
-    "@webstudio-is/http-client": "0.199.0",
-    "@webstudio-is/sdk": "0.199.0",
-    "@webstudio-is/image": "0.199.0",
-    "@webstudio-is/sdk-components-animation": "0.199.0",
-    "@webstudio-is/react-sdk": "0.199.0",
-    "@webstudio-is/sdk-components-react": "0.199.0",
-    "@webstudio-is/sdk-components-react-radix": "0.199.0",
-    "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/sdk-components-react-router": "0.199.0",
-    "@webstudio-is/sdk-components-react-remix": "0.199.0"
+    "@webstudio-is/http-client": "0.201.0",
+    "@webstudio-is/image": "0.201.0",
+    "@webstudio-is/react-sdk": "0.201.0",
+    "@webstudio-is/sdk": "0.201.0",
+    "@webstudio-is/sdk-components-animation": "0.201.0",
+    "@webstudio-is/sdk-components-react": "0.201.0",
+    "@webstudio-is/sdk-components-react-radix": "0.201.0",
+    "@webstudio-is/sdk-components-react-remix": "0.201.0",
+    "@webstudio-is/sdk-components-react-router": "0.201.0",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
     "typecheck": "tsc",

package/templates/defaults/app/route-templates/html.tsx

@@ -20,6 +20,7 @@ import {
   ReactSdkContext,
   PageSettingsMeta,
   PageSettingsTitle,
+  PageSettingsCanonicalLink,
 } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
@@ -288,6 +289,7 @@ const Outlet = () => {
         imageLoader={imageLoader}
       />
       <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
+      <PageSettingsCanonicalLink href={url} />
     </ReactSdkContext.Provider>
   );
 };

package/templates/defaults/package.json

@@ -11,14 +11,14 @@
     "@remix-run/node": "2.15.2",
     "@remix-run/react": "2.15.2",
     "@remix-run/server-runtime": "2.15.2",
-    "@webstudio-is/image": "0.199.0",
-    "@webstudio-is/react-sdk": "0.199.0",
-    "@webstudio-is/sdk": "0.199.0",
-    "@webstudio-is/sdk-components-react": "0.199.0",
-    "@webstudio-is/sdk-components-animation": "0.199.0",
-    "@webstudio-is/sdk-components-react-radix": "0.199.0",
-    "@webstudio-is/sdk-components-react-remix": "0.199.0",
-    "isbot": "^5.1.19",
+    "@webstudio-is/image": "0.201.0",
+    "@webstudio-is/react-sdk": "0.201.0",
+    "@webstudio-is/sdk": "0.201.0",
+    "@webstudio-is/sdk-components-react": "0.201.0",
+    "@webstudio-is/sdk-components-animation": "0.201.0",
+    "@webstudio-is/sdk-components-react-radix": "0.201.0",
+    "@webstudio-is/sdk-components-react-remix": "0.201.0",
+    "isbot": "^5.1.21",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },

package/templates/react-router-docker/Dockerfile

@@ -1,23 +1,19 @@
-FROM node:22-alpine AS development-dependencies-env
-COPY . /app
-WORKDIR /app
-RUN npm install
-
-FROM node:22-alpine AS production-dependencies-env
-COPY ./package.json package-lock.json /app/
+FROM node:22-alpine AS dependencies-env
+COPY .npmrc package.json /app/
 WORKDIR /app
 RUN npm install --omit=dev
 
-FROM node:22-alpine AS build-env
+FROM dependencies-env AS build-env
 COPY . /app/
-COPY --from=development-dependencies-env /app/node_modules /app/node_modules
 WORKDIR /app
+RUN npm install
 RUN npm run build
 
 FROM node:22-alpine
-COPY ./package.json package-lock.json /app/
-COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY .npmrc package.json /app/
+COPY --from=dependencies-env /app/node_modules /app/node_modules
 COPY --from=build-env /app/build /app/build
+COPY --from=build-env /app/public /app/public
 WORKDIR /app
 # there is a DOMAINS env with comma separated allowed domains for image processing
 CMD ["npm", "run", "start"]

package/templates/react-router-docker/app/routes.ts

@@ -0,0 +1,4 @@
+import { type RouteConfig } from "@react-router/dev/routes";
+import { flatRoutes } from "@react-router/fs-routes";
+
+export default flatRoutes() satisfies RouteConfig;

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

@@ -5,24 +5,27 @@
   "scripts": {
     "build": "react-router build",
     "dev": "react-router dev",
+    "start": "react-router-serve ./build/server/index.js",
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@react-router/dev": "^7.1.1",
-    "@react-router/fs-routes": "^7.1.1",
-    "@react-router/node": "^7.1.1",
-    "@webstudio-is/image": "0.199.0",
-    "@webstudio-is/react-sdk": "0.199.0",
-    "@webstudio-is/sdk": "0.199.0",
-    "@webstudio-is/sdk-components-animation": "0.199.0",
-    "@webstudio-is/sdk-components-react-radix": "0.199.0",
-    "@webstudio-is/sdk-components-react-router": "0.199.0",
-    "@webstudio-is/sdk-components-react": "0.199.0",
-    "h3": "^1.13.1",
+    "@react-router/dev": "^7.1.3",
+    "@react-router/fs-routes": "^7.1.3",
+    "@react-router/node": "^7.1.3",
+    "@react-router/serve": "^7.1.3",
+    "@webstudio-is/image": "0.201.0",
+    "@webstudio-is/react-sdk": "0.201.0",
+    "@webstudio-is/sdk": "0.201.0",
+    "@webstudio-is/sdk-components-animation": "0.201.0",
+    "@webstudio-is/sdk-components-react-radix": "0.201.0",
+    "@webstudio-is/sdk-components-react-router": "0.201.0",
+    "@webstudio-is/sdk-components-react": "0.201.0",
+    "h3": "^1.14.0",
     "ipx": "^3.0.1",
-    "isbot": "^5.1.19",
+    "isbot": "^5.1.21",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
+    "react-router": "^7.1.3",
     "vite": "^5.4.11"
   },
   "devDependencies": {

package/templates/ssg/package.json

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