@webstudio-is/sdk-components-react 0.213.0 → 0.215.0

package/lib/bold.ws.js

@@ -5,16 +5,16 @@ import { props as r } from "./__generated__/bold.props.js";
 const p = {
   b: e
 }, l = {
-  type: "rich-text-child",
+  type: "container",
   label: "Bold Text",
   icon: t,
   states: o,
   presetStyle: p
-}, c = {
+}, n = {
   props: r,
   initialProps: ["id", "className"]
 };
 export {
   l as meta,
-  c as propsMeta
+  n as propsMeta
 };

package/lib/checkbox.ws.js

@@ -11,7 +11,6 @@ const o = {
     }
   ]
 }, d = {
-  type: "control",
   icon: e,
   presetStyle: o,
   states: [

package/lib/code-text.ws.js

@@ -30,15 +30,18 @@ const p = {
       value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
     }
   ]
-}, d = {
+}, i = {
   category: "general",
-  type: "embed",
   description: "Use this component when you want to display code as text on the page.",
   icon: e,
+  contentModel: {
+    category: "instance",
+    children: []
+  },
   states: t,
   presetStyle: p,
   order: 5
-}, n = {
+}, s = {
   props: {
     ...r,
     code: {
@@ -50,6 +53,6 @@ const p = {
   initialProps: ["id", "className", "lang", "code"]
 };
 export {
-  d as meta,
-  n as propsMeta
+  i as meta,
+  s as propsMeta
 };

package/lib/head-link.ws.js

@@ -1,16 +1,14 @@
-import { ResourceIcon as e } from "@webstudio-is/icons/svg";
+import { ResourceIcon as o } from "@webstudio-is/icons/svg";
 import "@webstudio-is/sdk";
-import { props as o } from "./__generated__/head-link.props.js";
+import { props as r } from "./__generated__/head-link.props.js";
 const p = {
-  category: "hidden",
-  icon: e,
-  type: "embed",
+  icon: o,
   contentModel: {
     category: "none",
-    children: ["empty"]
+    children: []
   }
 }, c = {
-  props: o,
+  props: r,
   initialProps: ["rel", "hrefLang", "href", "type", "as"]
 };
 export {

package/lib/head-meta.ws.js

@@ -1,16 +1,14 @@
 import { WindowInfoIcon as o } from "@webstudio-is/icons/svg";
 import "@webstudio-is/sdk";
-import { props as t } from "./__generated__/head-meta.props.js";
+import { props as n } from "./__generated__/head-meta.props.js";
 const p = {
-  category: "hidden",
   icon: o,
-  type: "embed",
   contentModel: {
     category: "none",
-    children: ["empty"]
+    children: []
   }
 }, i = {
-  props: t,
+  props: n,
   initialProps: ["name", "property", "content"]
 };
 export {

package/lib/head-title.ws.js

@@ -1,18 +1,17 @@
 import { WindowTitleIcon as o } from "@webstudio-is/icons/svg";
 import "@webstudio-is/sdk";
 import { props as t } from "./__generated__/head-title.props.js";
-const c = {
-  category: "hidden",
+const p = {
   icon: o,
   type: "container",
   contentModel: {
     category: "none",
     children: ["text"]
   }
-}, i = {
+}, c = {
   props: t
 };
 export {
-  c as meta,
-  i as propsMeta
+  p as meta,
+  c as propsMeta
 };

package/lib/image.ws.js

@@ -26,13 +26,12 @@ const a = {
   ]
 }, l = {
   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.",
   icon: e,
   states: t,
   presetStyle: a,
   order: 0
-}, d = {
+}, n = {
   props: {
     ...r,
     // Automatically generated props don't have the right control.
@@ -56,5 +55,5 @@ const a = {
 };
 export {
   l as meta,
-  d as propsMeta
+  n as propsMeta
 };

package/lib/input.ws.js

@@ -12,7 +12,6 @@ const r = {
   ]
 }, c = {
   category: "forms",
-  type: "control",
   label: "Text Input",
   description: "A single-line text input for collecting string data from your users.",
   icon: e,

package/lib/italic.ws.js

@@ -1,8 +1,8 @@
 import { TextItalicIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as e } from "@webstudio-is/sdk";
 import { i as o } from "@webstudio-is/sdk/normalize.css";
-import { props as i } from "./__generated__/italic.props.js";
-const r = {
+import { props as r } from "./__generated__/italic.props.js";
+const i = {
   i: [
     ...o,
     {
@@ -11,13 +11,13 @@ const r = {
     }
   ]
 }, c = {
-  type: "rich-text-child",
+  type: "container",
   label: "Italic Text",
   icon: t,
   states: e,
-  presetStyle: r
+  presetStyle: i
 }, m = {
-  props: i,
+  props: r,
   initialProps: ["id", "className"]
 };
 export {

package/lib/option.ws.js

@@ -16,7 +16,6 @@ const l = {
   ]
 }, r = {
   category: "hidden",
-  type: "control",
   description: "An item within a drop-down menu that users can select as their chosen value.",
   icon: e,
   presetStyle: l,

package/lib/radio-button.ws.js

@@ -11,7 +11,6 @@ const a = {
     }
   ]
 }, s = {
-  type: "control",
   label: "Radio",
   icon: e,
   presetStyle: a,
@@ -26,11 +25,11 @@ const a = {
     //{ selector: ":read-only", label: "Read Only" },
     //{ selector: ":read-write", label: "Read Write" },
   ]
-}, n = {
+}, m = {
   props: r,
   initialProps: ["id", "className", "name", "value", "required", "checked"]
 };
 export {
   s as meta,
-  n as propsMeta
+  m as propsMeta
 };

package/lib/rich-text-link.ws.js

@@ -1,9 +1,9 @@
-import { meta as t, propsMeta as e } from "./link.ws.js";
-const a = {
+import { meta as t, propsMeta as a } from "./link.ws.js";
+const o = {
   ...t,
-  type: "rich-text-child"
-}, o = e;
+  type: "container"
+}, p = a;
 export {
-  a as meta,
-  o as propsMeta
+  o as meta,
+  p as propsMeta
 };

package/lib/separator.ws.js

@@ -32,7 +32,6 @@ const p = {
   ]
 }, n = {
   category: "general",
-  type: "embed",
   description: "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
   icon: e,
   states: o,

package/lib/span.ws.js

@@ -4,17 +4,17 @@ import { span as r } from "@webstudio-is/sdk/normalize.css";
 import { props as e } from "./__generated__/span.props.js";
 const s = {
   span: r
-}, c = {
-  type: "rich-text-child",
+}, n = {
+  type: "container",
   label: "Text",
   icon: t,
   states: o,
   presetStyle: s
-}, n = {
+}, c = {
   props: e,
   initialProps: ["id", "className"]
 };
 export {
-  c as meta,
-  n as propsMeta
+  n as meta,
+  c as propsMeta
 };

package/lib/subscript.ws.js

@@ -4,17 +4,17 @@ import { sub as r } from "@webstudio-is/sdk/normalize.css";
 import { props as s } from "./__generated__/subscript.props.js";
 const e = {
   sub: r
-}, a = {
-  type: "rich-text-child",
+}, c = {
+  type: "container",
   label: "Subscript Text",
   icon: t,
   states: o,
   presetStyle: e
-}, l = {
+}, n = {
   props: s,
   initialProps: ["id", "className"]
 };
 export {
-  a as meta,
-  l as propsMeta
+  c as meta,
+  n as propsMeta
 };

package/lib/superscript.ws.js

@@ -1,20 +1,20 @@
 import { SuperscriptIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as r } from "@webstudio-is/sdk";
-import { sup as o } from "@webstudio-is/sdk/normalize.css";
+import { defaultStates as o } from "@webstudio-is/sdk";
+import { sup as r } from "@webstudio-is/sdk/normalize.css";
 import { props as p } from "./__generated__/superscript.props.js";
 const e = {
-  sup: o
-}, a = {
-  type: "rich-text-child",
+  sup: r
+}, c = {
+  type: "container",
   label: "Superscript Text",
   icon: t,
-  states: r,
+  states: o,
   presetStyle: e
-}, l = {
+}, n = {
   props: p,
   initialProps: ["id", "className"]
 };
 export {
-  a as meta,
-  l as propsMeta
+  c as meta,
+  n as propsMeta
 };

package/lib/textarea.ws.js

@@ -12,14 +12,17 @@ const l = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, c = {
+}, n = {
   category: "forms",
-  type: "control",
   label: "Text Area",
   description: "A multi-line text input for collecting longer string data from your users.",
   icon: e,
   presetStyle: l,
   order: 4,
+  contentModel: {
+    category: "instance",
+    children: []
+  },
   states: [
     ...r,
     { selector: "::placeholder", label: "Placeholder" },
@@ -33,7 +36,7 @@ const l = {
     //{ selector: ":read-only", label: "Read Only" },
     //{ selector: ":read-write", label: "Read Write" },
   ]
-}, n = {
+}, p = {
   props: t,
   initialProps: [
     "id",
@@ -46,6 +49,6 @@ const l = {
   ]
 };
 export {
-  c as meta,
-  n as propsMeta
+  n as meta,
+  p as propsMeta
 };

package/lib/video.ws.js

@@ -1,9 +1,12 @@
 import { VideoIcon as o } from "@webstudio-is/icons/svg";
 import "@webstudio-is/sdk";
 import { props as t } from "./__generated__/video.props.js";
-const r = {
-  type: "control",
+const p = {
   icon: o,
+  contentModel: {
+    category: "instance",
+    children: []
+  },
   presetStyle: {
     video: [
       {
@@ -12,7 +15,7 @@ const r = {
       }
     ]
   }
-}, a = {
+}, n = {
   props: t,
   initialProps: [
     "id",
@@ -29,6 +32,6 @@ const r = {
   ]
 };
 export {
-  r as meta,
-  a as propsMeta
+  p as meta,
+  n as propsMeta
 };

package/lib/vimeo-preview-image.ws.js

@@ -1,12 +1,12 @@
 import { meta as e, propsMeta as o } from "./image.ws.js";
 import { props as r } from "./__generated__/vimeo-preview-image.props.js";
-const a = {
+const p = {
   ...e,
   category: "hidden",
   label: "Preview Image",
   contentModel: {
     category: "none",
-    children: ["empty"]
+    children: []
   }
 }, i = {
   props: {
@@ -22,6 +22,6 @@ const a = {
   initialProps: o.initialProps
 };
 export {
-  a as meta,
+  p as meta,
   i as propsMeta
 };

package/lib/youtube.js

@@ -1,5 +1,5 @@
 import { jsx as u, jsxs as E, Fragment as O } from "react/jsx-runtime";
-import { forwardRef as x, useState as p, useContext as S, useRef as T, useEffect as h } from "react";
+import { forwardRef as x, useState as p, useContext as S, useRef as T, useEffect as y } from "react";
 import { ReactSdkContext as A } from "@webstudio-is/react-sdk/runtime";
 import { VimeoContext as N, requestFullscreen as P } from "./vimeo.js";
 const U = "https://www.youtube-nocookie.com", V = "https://www.youtube.com", j = "https://img.youtube.com", L = (e) => {
@@ -12,9 +12,9 @@ const U = "https://www.youtube-nocookie.com", V = "https://www.youtube.com", j =
     }
 }, D = (e, t) => {
   var o, n;
-  const l = L(e.url), r = new URL(t);
-  if (l)
-    r.pathname = `/embed/${l}`;
+  const s = L(e.url), r = new URL(t);
+  if (s)
+    r.pathname = `/embed/${s}`;
   else if (e.url)
     try {
       const c = new URL(e.url);
@@ -22,77 +22,79 @@ const U = "https://www.youtube-nocookie.com", V = "https://www.youtube.com", j =
     } catch {
     }
   const i = Object.keys(e), a = {};
+  a.autoplay = "1";
   for (const c of i)
-    switch (c) {
-      case "autoplay":
-        a.autoplay = e.autoplay ? "1" : "0", e.autoplay && e.muted === void 0 && (a.mute = "1");
-        break;
-      case "muted":
-        a.mute = e.muted ? "1" : "0";
-        break;
-      case "showControls":
-        a.controls = e.showControls ? "1" : "0";
-        break;
-      case "showRelatedVideos":
-        a.rel = e.showRelatedVideos ? "1" : "0";
-        break;
-      case "keyboard":
-        a.keyboard = e.keyboard ? "1" : "0";
-        break;
-      case "loop":
-        a.loop = e.loop ? "1" : "0", e.loop && (e.playlist ?? "").trim() === "" && (a.playlist = l);
-        break;
-      case "inline":
-        a.playsinline = e.inline ? "1" : "0";
-        break;
-      case "allowFullscreen":
-        a.fs = e.allowFullscreen ? "1" : "0";
-        break;
-      case "captionLanguage":
-        a.cc_lang_pref = e.captionLanguage;
-        break;
-      case "showCaptions":
-        a.cc_load_policy = e.showCaptions ? "1" : "0";
-        break;
-      case "showAnnotations":
-        a.iv_load_policy = e.showAnnotations ? "1" : "3";
-        break;
-      case "startTime":
-        a.start = (o = e.startTime) == null ? void 0 : o.toString();
-        break;
-      case "endTime":
-        a.end = (n = e.endTime) == null ? void 0 : n.toString();
-        break;
-      case "disableKeyboard":
-        a.disablekb = e.disableKeyboard ? "1" : "0";
-        break;
-      case "language":
-        a.hl = e.language;
-        break;
-      case "listId":
-        a.list = e.listId;
-        break;
-      case "listType":
-        a.listType = e.listType;
-        break;
-      case "color":
-        a.color = e.color;
-        break;
-      case "origin":
-        a.origin = e.origin;
-        break;
-      case "referrer":
-        a.widget_referrer = e.referrer;
-        break;
-      case "playlist":
-        a.playlist = e.playlist;
-        break;
-      case "enablejsapi":
-        a.enablejsapi = e.enablejsapi ? "1" : "0";
-        break;
-    }
-  return Object.entries(a).forEach(([c, s]) => {
-    s !== void 0 && r.searchParams.append(c, s.toString());
+    if (e[c] !== void 0)
+      switch (c) {
+        case "autoplay":
+          e.autoplay && e.muted === void 0 && (a.mute = "1");
+          break;
+        case "muted":
+          a.mute = e.muted ? "1" : "0";
+          break;
+        case "showControls":
+          a.controls = e.showControls ? "1" : "0";
+          break;
+        case "showRelatedVideos":
+          a.rel = e.showRelatedVideos ? "1" : "0";
+          break;
+        case "keyboard":
+          a.keyboard = e.keyboard ? "1" : "0";
+          break;
+        case "loop":
+          a.loop = e.loop ? "1" : "0", e.loop && (e.playlist ?? "").trim() === "" && (a.playlist = s);
+          break;
+        case "inline":
+          a.playsinline = e.inline ? "1" : "0";
+          break;
+        case "allowFullscreen":
+          a.fs = e.allowFullscreen ? "1" : "0";
+          break;
+        case "captionLanguage":
+          a.cc_lang_pref = e.captionLanguage;
+          break;
+        case "showCaptions":
+          a.cc_load_policy = e.showCaptions ? "1" : "0";
+          break;
+        case "showAnnotations":
+          a.iv_load_policy = e.showAnnotations ? "1" : "3";
+          break;
+        case "startTime":
+          a.start = (o = e.startTime) == null ? void 0 : o.toString();
+          break;
+        case "endTime":
+          a.end = (n = e.endTime) == null ? void 0 : n.toString();
+          break;
+        case "disableKeyboard":
+          a.disablekb = e.disableKeyboard ? "1" : "0";
+          break;
+        case "language":
+          a.hl = e.language;
+          break;
+        case "listId":
+          a.list = e.listId;
+          break;
+        case "listType":
+          a.listType = e.listType;
+          break;
+        case "color":
+          a.color = e.color;
+          break;
+        case "origin":
+          a.origin = e.origin;
+          break;
+        case "referrer":
+          a.widget_referrer = e.referrer;
+          break;
+        case "playlist":
+          a.playlist = e.playlist;
+          break;
+        case "enablejsapi":
+          a.enablejsapi = e.enablejsapi ? "1" : "0";
+          break;
+      }
+  return Object.entries(a).forEach(([c, l]) => {
+    l !== void 0 && r.searchParams.append(c, l.toString());
   }), r.toString();
 }, R = (e) => {
   const t = document.createElement("link");
@@ -111,22 +113,22 @@ const F = (e) => {
 }, Y = (e) => new URL(`${j}/vi/${e}/maxresdefault.jpg`), K = () => /* @__PURE__ */ u("div", { className: "flex w-full h-full items-center justify-center text-lg", children: 'Open the "Settings" panel and paste a video URL, e.g. https://youtube.com/watch?v=dQw4w9WgXcQ' }), M = ({
   title: e,
   status: t,
-  loading: l,
+  loading: s,
   videoUrl: r,
   previewImageUrl: i,
   autoplay: a,
   inline: o,
   renderer: n,
   showPreview: c,
-  onStatusChange: s,
+  onStatusChange: l,
   onPreviewImageUrlChange: d
 }) => {
-  const [y, m] = p(0), b = T(null);
-  return h(() => {
-    a && n !== "canvas" && t === "initial" && s("loading");
-  }, [a, t, n, s]), h(() => {
+  const [h, m] = p(0), b = T(null);
+  return y(() => {
+    a && n !== "canvas" && t === "initial" && l("loading");
+  }, [a, t, n, l]), y(() => {
     n !== "canvas" && F(r);
-  }, [n, r]), h(() => {
+  }, [n, r]), y(() => {
     const f = L(r);
     if (!f || !c) {
       d(void 0);
@@ -139,19 +141,19 @@ const F = (e) => {
       ref: b,
       title: e,
       src: r,
-      loading: l,
+      loading: s,
       allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
       allowFullScreen: !0,
       style: {
         position: "absolute",
         width: "100%",
         height: "100%",
-        opacity: y,
+        opacity: h,
         transition: "opacity 1s",
         border: "none"
       },
       onLoad: () => {
-        s("ready"), m(1), !o && !a && b.current && P(b.current);
+        l("ready"), m(1), !o && !a && b.current && P(b.current);
       }
     }
   );
@@ -159,29 +161,29 @@ const F = (e) => {
   ({
     url: e,
     loading: t = "lazy",
-    autoplay: l,
+    autoplay: s,
     showPreview: r,
     showAnnotations: i,
     showCaptions: a,
     showControls: o,
     allowFullscreen: n,
     keyboard: c,
-    children: s,
+    children: l,
     privacyEnhancedMode: d,
-    inline: y = !1,
+    inline: h = !1,
     ...m
   }, b) => {
     const [f, g] = p("initial"), [w, C] = p(), { renderer: k } = S(A), I = d ?? !0 ? U : V, v = D(
       {
         ...m,
-        inline: y,
+        inline: h,
         url: e,
         keyboard: c,
         showAnnotations: i,
         showCaptions: a,
         allowFullscreen: n,
         showControls: o,
-        autoplay: !0,
+        autoplay: s,
         enablejsapi: !1
       },
       I
@@ -197,16 +199,16 @@ const F = (e) => {
           }
         },
         children: /* @__PURE__ */ u("div", { ...m, ref: b, children: v ? /* @__PURE__ */ E(O, { children: [
-          s,
+          l,
           /* @__PURE__ */ u(
             M,
             {
               title: m.title,
-              autoplay: l,
+              autoplay: s,
               videoUrl: v,
               previewImageUrl: w,
               loading: t,
-              inline: y,
+              inline: h,
               showPreview: r,
               renderer: k,
               status: f,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.213.0",
+  "version": "0.215.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -49,10 +49,10 @@
     "colord": "^2.9.3",
     "micromark": "^4.0.2",
     "micromark-extension-gfm-table": "^2.1.1",
-    "@webstudio-is/icons": "0.213.0",
-    "@webstudio-is/image": "0.213.0",
-    "@webstudio-is/react-sdk": "0.213.0",
-    "@webstudio-is/sdk": "0.213.0"
+    "@webstudio-is/image": "0.215.0",
+    "@webstudio-is/icons": "0.215.0",
+    "@webstudio-is/react-sdk": "0.215.0",
+    "@webstudio-is/sdk": "0.215.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
@@ -65,7 +65,7 @@
     "vitest": "^3.0.8",
     "@webstudio-is/generate-arg-types": "0.0.0",
     "@webstudio-is/sdk-cli": "0.94.0",
-    "@webstudio-is/template": "0.213.0",
+    "@webstudio-is/template": "0.215.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {