webstudio 0.215.0 → 0.216.0

package/lib/cli.js

@@ -4699,7 +4699,7 @@ const e$4 = {
     type: "boolean"
   }
 };
-const r$a = {
+const r$8 = {
   category: "general",
   type: "container",
   label: "HTML Embed",
@@ -4808,7 +4808,7 @@ var a$9 = div;
 var li = div;
 var ul = div;
 var ol = div;
-var p$c = div;
+var p$d = div;
 var span = div;
 var body = [
   { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
@@ -5157,7 +5157,7 @@ const v$2 = {
   },
   order: 0
 };
-const s$6 = {
+const s$7 = {
   type: "container",
   icon: TextIcon,
   states: defaultStates,
@@ -5185,14 +5185,14 @@ const d$5 = {
     h6
   }
 };
-const p$b = {
-  p: p$c
+const p$c = {
+  p: p$d
 }, n$7 = {
   type: "container",
   placeholder: "Paragraph",
   icon: TextAlignLeftIcon,
   states: defaultStates,
-  presetStyle: p$b
+  presetStyle: p$c
 };
 const a$7 = {
   a: [
@@ -5224,23 +5224,23 @@ const o$4 = {
   ...n$6,
   type: "container"
 };
-const s$5 = {
+const s$6 = {
   span
 }, n$5 = {
   type: "container",
   label: "Text",
   icon: PaintBrushIcon,
   states: defaultStates,
-  presetStyle: s$5
+  presetStyle: s$6
 };
-const p$a = {
+const p$b = {
   b: b$8
 }, l$6 = {
   type: "container",
   label: "Bold Text",
   icon: BoldIcon,
   states: defaultStates,
-  presetStyle: p$a
+  presetStyle: p$b
 };
 const i$2 = {
   i: [
@@ -5277,7 +5277,7 @@ const e$2 = {
 };
 const l$5 = {
   button
-}, p$9 = {
+}, p$a = {
   icon: ButtonElementIcon,
   type: "container",
   presetStyle: l$5,
@@ -5287,7 +5287,7 @@ const l$5 = {
     { selector: ":enabled", label: "Enabled" }
   ]
 };
-const r$9 = {
+const r$7 = {
   input: [
     ...input,
     {
@@ -5300,7 +5300,7 @@ const r$9 = {
   label: "Text Input",
   description: "A single-line text input for collecting string data from your users.",
   icon: FormTextFieldIcon,
-  presetStyle: r$9,
+  presetStyle: r$7,
   order: 3,
   states: [
     ...defaultStates,
@@ -5328,7 +5328,7 @@ const c$1 = {
     { selector: "[data-state=success]", label: "Success" }
   ]
 };
-const s$4 = {
+const s$5 = {
   form: [
     ...form,
     { property: "min-height", value: { type: "unit", unit: "px", value: 20 } }
@@ -5340,7 +5340,7 @@ const s$4 = {
   description: "Create filters, surveys, searches and more.",
   icon: FormIcon,
   states: defaultStates,
-  presetStyle: s$4,
+  presetStyle: s$5,
   order: 0
 };
 const a$6 = {
@@ -5373,7 +5373,7 @@ const a$6 = {
   presetStyle: a$6,
   order: 0
 };
-const r$8 = {
+const r$6 = {
   blockquote: [
     {
       property: "margin-top",
@@ -5425,7 +5425,7 @@ const r$8 = {
   placeholder: "Blockquote",
   icon: BlockquoteIcon,
   states: defaultStates,
-  presetStyle: r$8
+  presetStyle: r$6
 };
 const a$5 = {
   ol: [
@@ -5473,7 +5473,7 @@ const a$4 = {
     li
   }
 };
-const p$8 = {
+const p$9 = {
   hr: [
     ...hr,
     {
@@ -5506,10 +5506,10 @@ const p$8 = {
   description: "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
   icon: MinusIcon,
   states: defaultStates,
-  presetStyle: p$8,
+  presetStyle: p$9,
   order: 3
 };
-const p$7 = {
+const p$8 = {
   code: [
     ...code,
     {
@@ -5546,7 +5546,7 @@ const p$7 = {
     children: []
   },
   states: defaultStates,
-  presetStyle: p$7,
+  presetStyle: p$8,
   order: 5
 };
 const a$3 = {
@@ -5604,7 +5604,7 @@ const a$2 = {
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, s$3 = {
+}, s$4 = {
   label: "Radio",
   icon: RadioCheckedIcon,
   presetStyle: a$2,
@@ -5659,7 +5659,7 @@ const m$2 = {
     div
   }
 };
-const p$6 = {
+const p$7 = {
   type: "container",
   icon: YoutubeIcon,
   states: defaultStates,
@@ -5676,7 +5676,7 @@ const p$6 = {
     div
   }
 };
-const p$5 = {
+const p$6 = {
   ...l$4,
   category: "hidden",
   label: "Preview Image",
@@ -5685,7 +5685,7 @@ const p$5 = {
     children: []
   }
 };
-const s$2 = {
+const s$3 = {
   category: "hidden",
   type: "container",
   label: "Play Button",
@@ -5699,7 +5699,7 @@ const s$2 = {
     button
   }
 };
-const s$1 = {
+const s$2 = {
   type: "container",
   icon: BoxIcon,
   states: defaultStates,
@@ -5727,17 +5727,17 @@ const a$1 = {
   icon: CalendarIcon,
   order: 7
 };
-const r$7 = {
+const r$5 = {
   time
-}, s = {
+}, s$1 = {
   category: "localization",
   type: "container",
   description: "Converts machine-readable date and time to a human-readable format.",
   icon: CalendarIcon,
   states: defaultStates,
-  presetStyle: r$7
+  presetStyle: r$5
 };
-const r$6 = {
+const r$4 = {
   select: [
     ...select,
     {
@@ -5748,7 +5748,7 @@ const r$6 = {
 }, c = {
   type: "container",
   icon: SelectIcon,
-  presetStyle: r$6,
+  presetStyle: r$4,
   states: [
     ...defaultStates,
     { selector: "::placeholder", label: "Placeholder" },
@@ -5772,7 +5772,7 @@ const l$2 = {
       }
     }
   ]
-}, r$5 = {
+}, r$3 = {
   category: "hidden",
   description: "An item within a drop-down menu that users can select as their chosen value.",
   icon: ItemIcon,
@@ -5788,7 +5788,7 @@ const l$2 = {
     { selector: ":disabled", label: "Disabled" }
   ]
 };
-const r$4 = {
+const r$2 = {
   icon: HeaderIcon,
   type: "container",
   description: "Inserts children into the head of the document",
@@ -5797,21 +5797,21 @@ const r$4 = {
     children: ["HeadLink", "HeadMeta", "HeadTitle"]
   }
 };
-const p$4 = {
+const p$5 = {
   icon: ResourceIcon,
   contentModel: {
     category: "none",
     children: []
   }
 };
-const p$3 = {
+const p$4 = {
   icon: WindowInfoIcon,
   contentModel: {
     category: "none",
     children: []
   }
 };
-const p$2 = {
+const p$3 = {
   icon: WindowTitleIcon,
   type: "container",
   contentModel: {
@@ -5819,7 +5819,7 @@ const p$2 = {
     children: ["text"]
   }
 };
-const p$1 = {
+const p$2 = {
   icon: VideoIcon,
   contentModel: {
     category: "instance",
@@ -5840,17 +5840,17 @@ const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   Body: n$8,
   Bold: l$6,
   Box: v$2,
-  Button: p$9,
+  Button: p$a,
   Checkbox: d$3,
   CodeText: i,
   Form: c$1,
   Fragment: o$5,
-  HeadLink: p$4,
-  HeadMeta: p$3,
-  HeadSlot: r$4,
-  HeadTitle: p$2,
+  HeadLink: p$5,
+  HeadMeta: p$4,
+  HeadSlot: r$2,
+  HeadTitle: p$3,
   Heading: d$5,
-  HtmlEmbed: r$a,
+  HtmlEmbed: r$8,
   Image: l$4,
   Input: c$2,
   Italic: c$5,
@@ -5859,9 +5859,9 @@ const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   List: d$4,
   ListItem: a$4,
   MarkdownEmbed: a$a,
-  Option: r$5,
+  Option: r$3,
   Paragraph: n$7,
-  RadioButton: s$3,
+  RadioButton: s$4,
   RemixForm: n$4,
   RichTextLink: o$4,
   Select: c,
@@ -5870,17 +5870,17 @@ const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   Span: n$5,
   Subscript: c$3,
   Superscript: c$4,
-  Text: s$6,
+  Text: s$7,
   Textarea: n$2,
-  Time: s,
-  Video: p$1,
+  Time: s$1,
+  Video: p$2,
   Vimeo: m$2,
-  VimeoPlayButton: s$2,
-  VimeoPreviewImage: p$5,
-  VimeoSpinner: s$1,
+  VimeoPlayButton: s$3,
+  VimeoPreviewImage: p$6,
+  VimeoSpinner: s$2,
   XmlNode: e$1,
   XmlTime: a$1,
-  YouTube: p$6
+  YouTube: p$7
 }, Symbol.toStringTag, { value: "Module" }));
 const o$2 = {
   category: "animations",
@@ -5901,10 +5901,10 @@ const n$1 = (t2) => new Proxy(
       return `${t2}${e2}`;
     }
   }
-), r$3 = n$1(
+), r$1 = n$1(
   "@webstudio-is/sdk-components-animation:"
 );
-const r$2 = {
+const p$1 = {
   category: "animations",
   type: "container",
   description: "Text animation allows you to split text by char or by word to animate it.",
@@ -5912,14 +5912,17 @@ const r$2 = {
   order: 6,
   label: "Text Animation",
   constraints: [
-    { relation: "parent", component: { $eq: r$3.AnimateChildren } },
+    { relation: "parent", component: { $eq: r$1.AnimateChildren } },
     {
       relation: "child",
       text: false
     }
-  ]
+  ],
+  presetStyle: {
+    div
+  }
 };
-const r$1 = {
+const s = {
   category: "animations",
   type: "container",
   description: "Stagger animation allows you to animate children elements with a sliding window.",
@@ -5927,19 +5930,22 @@ const r$1 = {
   order: 6,
   label: "Stagger Animation",
   constraints: [
-    { relation: "parent", component: { $eq: r$3.AnimateChildren } },
+    { relation: "parent", component: { $eq: r$1.AnimateChildren } },
     {
       relation: "child",
       text: false
     }
-  ]
+  ],
+  presetStyle: {
+    div
+  }
 };
 const a = {
   type: "container",
   icon: Youtube1cIcon,
   label: "Video Animation",
   constraints: [
-    { relation: "parent", component: { $eq: r$3.AnimateChildren } },
+    { relation: "parent", component: { $eq: r$1.AnimateChildren } },
     {
       relation: "child",
       text: false
@@ -5949,8 +5955,8 @@ const a = {
 const animationComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   AnimateChildren: o$2,
-  AnimateText: r$2,
-  StaggerAnimation: r$1,
+  AnimateText: p$1,
+  StaggerAnimation: s,
   VideoAnimation: a
 }, Symbol.toStringTag, { value: "Module" }));
 const remixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -6104,7 +6110,7 @@ const S$1 = {
 }, h$1 = {
   type: "container",
   presetStyle: {
-    p: p$c
+    p: p$d
   },
   icon: TextIcon,
   constraints: {
@@ -7659,7 +7665,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.215.0";
+const version = "0.216.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.215.0",
+  "version": "0.216.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -68,17 +68,17 @@
     "vite": "^5.4.11",
     "vitest": "^3.0.8",
     "wrangler": "^3.63.2",
-    "@webstudio-is/css-engine": "0.215.0",
-    "@webstudio-is/http-client": "0.215.0",
-    "@webstudio-is/image": "0.215.0",
-    "@webstudio-is/react-sdk": "0.215.0",
-    "@webstudio-is/sdk-components-react": "0.215.0",
-    "@webstudio-is/sdk-components-react-radix": "0.215.0",
-    "@webstudio-is/sdk-components-react-remix": "0.215.0",
-    "@webstudio-is/sdk-components-react-router": "0.215.0",
-    "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/sdk": "0.215.0",
-    "@webstudio-is/sdk-components-animation": "0.215.0"
+    "@webstudio-is/css-engine": "0.216.0",
+    "@webstudio-is/http-client": "0.216.0",
+    "@webstudio-is/image": "0.216.0",
+    "@webstudio-is/react-sdk": "0.216.0",
+    "@webstudio-is/sdk": "0.216.0",
+    "@webstudio-is/sdk-components-animation": "0.216.0",
+    "@webstudio-is/sdk-components-react": "0.216.0",
+    "@webstudio-is/sdk-components-react-remix": "0.216.0",
+    "@webstudio-is/sdk-components-react-radix": "0.216.0",
+    "@webstudio-is/sdk-components-react-router": "0.216.0",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
     "typecheck": "tsc",

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

@@ -275,6 +275,7 @@ const Outlet = () => {
         assetBaseUrl,
         resources,
         breakpoints,
+        onError: console.error,
       }}
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}

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

@@ -66,6 +66,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
         assetBaseUrl,
         resources,
         breakpoints,
+        onError: console.error,
       }}
     >
       <Page system={system} />

package/templates/defaults/package.json

@@ -11,13 +11,13 @@
     "@remix-run/node": "2.16.4",
     "@remix-run/react": "2.16.4",
     "@remix-run/server-runtime": "2.16.4",
-    "@webstudio-is/image": "0.215.0",
-    "@webstudio-is/react-sdk": "0.215.0",
-    "@webstudio-is/sdk": "0.215.0",
-    "@webstudio-is/sdk-components-react": "0.215.0",
-    "@webstudio-is/sdk-components-animation": "0.215.0",
-    "@webstudio-is/sdk-components-react-radix": "0.215.0",
-    "@webstudio-is/sdk-components-react-remix": "0.215.0",
+    "@webstudio-is/image": "0.216.0",
+    "@webstudio-is/react-sdk": "0.216.0",
+    "@webstudio-is/sdk": "0.216.0",
+    "@webstudio-is/sdk-components-react": "0.216.0",
+    "@webstudio-is/sdk-components-animation": "0.216.0",
+    "@webstudio-is/sdk-components-react-radix": "0.216.0",
+    "@webstudio-is/sdk-components-react-remix": "0.216.0",
     "isbot": "^5.1.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"

package/templates/react-router/app/route-templates/html.tsx

@@ -274,6 +274,7 @@ const Outlet = () => {
         assetBaseUrl,
         resources,
         breakpoints,
+        onError: console.error,
       }}
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}

package/templates/react-router/app/route-templates/xml.tsx

@@ -66,6 +66,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
         assetBaseUrl,
         resources,
         breakpoints,
+        onError: console.error,
       }}
     >
       <Page system={system} />

package/templates/react-router/package.json

@@ -10,13 +10,13 @@
   "dependencies": {
     "@react-router/dev": "^7.5.0",
     "@react-router/fs-routes": "^7.5.0",
-    "@webstudio-is/image": "0.215.0",
-    "@webstudio-is/react-sdk": "0.215.0",
-    "@webstudio-is/sdk": "0.215.0",
-    "@webstudio-is/sdk-components-animation": "0.215.0",
-    "@webstudio-is/sdk-components-react-radix": "0.215.0",
-    "@webstudio-is/sdk-components-react-router": "0.215.0",
-    "@webstudio-is/sdk-components-react": "0.215.0",
+    "@webstudio-is/image": "0.216.0",
+    "@webstudio-is/react-sdk": "0.216.0",
+    "@webstudio-is/sdk": "0.216.0",
+    "@webstudio-is/sdk-components-animation": "0.216.0",
+    "@webstudio-is/sdk-components-react-radix": "0.216.0",
+    "@webstudio-is/sdk-components-react-router": "0.216.0",
+    "@webstudio-is/sdk-components-react": "0.216.0",
     "isbot": "^5.1.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",

package/templates/ssg/app/route-templates/html/+Page.tsx

@@ -12,6 +12,7 @@ const PageComponent = ({ data }: { data: PageContext["data"] }) => {
         assetBaseUrl,
         resources,
         breakpoints,
+        onError: console.error,
       }}
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}

package/templates/ssg/package.json

@@ -8,12 +8,12 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@webstudio-is/image": "0.215.0",
-    "@webstudio-is/react-sdk": "0.215.0",
-    "@webstudio-is/sdk": "0.215.0",
-    "@webstudio-is/sdk-components-react": "0.215.0",
-    "@webstudio-is/sdk-components-animation": "0.215.0",
-    "@webstudio-is/sdk-components-react-radix": "0.215.0",
+    "@webstudio-is/image": "0.216.0",
+    "@webstudio-is/react-sdk": "0.216.0",
+    "@webstudio-is/sdk": "0.216.0",
+    "@webstudio-is/sdk-components-react": "0.216.0",
+    "@webstudio-is/sdk-components-animation": "0.216.0",
+    "@webstudio-is/sdk-components-react-radix": "0.216.0",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vike": "^0.4.228"