@webstudio-is/sdk-components-react 0.0.0-4f7bf18 → 0.0.0-50b8685

package/lib/blockquote.ws.js

@@ -4,60 +4,61 @@ import { props as p } from "./__generated__/blockquote.props.js";
 const r = {
   blockquote: [
     {
-      property: "marginTop",
+      property: "margin-top",
       value: { type: "unit", value: 0, unit: "number" }
     },
     {
-      property: "marginRight",
+      property: "margin-right",
       value: { type: "unit", value: 0, unit: "number" }
     },
     {
-      property: "marginBottom",
+      property: "margin-bottom",
       value: { type: "unit", value: 10, unit: "px" }
     },
     {
-      property: "marginLeft",
+      property: "margin-left",
       value: { type: "unit", value: 0, unit: "number" }
     },
     {
-      property: "paddingTop",
+      property: "padding-top",
       value: { type: "unit", value: 10, unit: "px" }
     },
     {
-      property: "paddingBottom",
+      property: "padding-bottom",
       value: { type: "unit", value: 10, unit: "px" }
     },
     {
-      property: "paddingLeft",
+      property: "padding-left",
       value: { type: "unit", value: 20, unit: "px" }
     },
     {
-      property: "paddingRight",
+      property: "padding-right",
       value: { type: "unit", value: 20, unit: "px" }
     },
     {
-      property: "borderLeftWidth",
+      property: "border-left-width",
       value: { type: "unit", value: 5, unit: "px" }
     },
     {
-      property: "borderLeftStyle",
+      property: "border-left-style",
       value: { type: "keyword", value: "solid" }
     },
     {
-      property: "borderLeftColor",
+      property: "border-left-color",
       value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
     }
   ]
 }, i = {
   type: "container",
+  placeholder: "Blockquote",
   icon: t,
   states: e,
   presetStyle: r
-}, n = {
+}, l = {
   props: p,
   initialProps: ["id", "className", "cite"]
 };
 export {
   i as meta,
-  n as propsMeta
+  l as propsMeta
 };

package/lib/body.ws.js

@@ -6,15 +6,15 @@ const a = {
   body: [
     ...e,
     {
-      property: "WebkitFontSmoothing",
+      property: "-webkit-font-smoothing",
       value: { type: "keyword", value: "antialiased" }
     },
     {
-      property: "MozOsxFontSmoothing",
+      property: "-moz-osx-font-smoothing",
       value: { type: "keyword", value: "grayscale" }
     }
   ]
-}, m = {
+}, n = {
   type: "container",
   icon: o,
   states: t,
@@ -24,6 +24,6 @@ const a = {
   initialProps: ["id", "className"]
 };
 export {
-  m as meta,
+  n as meta,
   y as propsMeta
 };

package/lib/checkbox.ws.js

@@ -6,7 +6,7 @@ const r = {
   input: [
     ...o,
     {
-      property: "marginRight",
+      property: "margin-right",
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]

package/lib/code-text.ws.js

@@ -10,27 +10,27 @@ const p = {
       value: { type: "keyword", value: "block" }
     },
     {
-      property: "whiteSpaceCollapse",
+      property: "white-space-collapse",
       value: { type: "keyword", value: "preserve" }
     },
     {
-      property: "textWrapMode",
+      property: "text-wrap-mode",
       value: { type: "keyword", value: "wrap" }
     },
     {
-      property: "paddingLeft",
+      property: "padding-left",
       value: { type: "unit", value: 0.2, unit: "em" }
     },
     {
-      property: "paddingRight",
+      property: "padding-right",
       value: { type: "unit", value: 0.2, unit: "em" }
     },
     {
-      property: "backgroundColor",
+      property: "background-color",
       value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
     }
   ]
-}, s = {
+}, i = {
   category: "general",
   type: "embed",
   description: "Use this component when you want to display code as text on the page.",
@@ -42,7 +42,7 @@ const p = {
   states: t,
   presetStyle: p,
   order: 5
-}, d = {
+}, c = {
   props: {
     ...r,
     code: {
@@ -54,6 +54,6 @@ const p = {
   initialProps: ["id", "className", "lang", "code"]
 };
 export {
-  s as meta,
-  d as propsMeta
+  i as meta,
+  c as propsMeta
 };

package/lib/form.ws.js

@@ -5,7 +5,7 @@ import { props as e } from "./__generated__/form.props.js";
 const n = {
   form: [
     ...r,
-    { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
+    { property: "min-height", value: { type: "unit", unit: "px", value: 20 } }
   ]
 }, p = {
   category: "forms",

package/lib/head-link.ws.js

@@ -1,16 +1,16 @@
 import { ResourceIcon as o } from "@webstudio-is/icons/svg";
 import "@webstudio-is/sdk";
-import { props as t } from "./__generated__/head-link.props.js";
+import { props as e } from "./__generated__/head-link.props.js";
 const p = {
   category: "hidden",
   icon: o,
-  type: "container",
+  type: "embed",
   constraints: {
     relation: "parent",
     component: { $eq: "HeadSlot" }
   }
 }, a = {
-  props: t,
+  props: e,
   initialProps: ["rel", "hrefLang", "href", "type", "as"]
 };
 export {

package/lib/head-meta.ws.js

@@ -4,7 +4,7 @@ import { props as t } from "./__generated__/head-meta.props.js";
 const p = {
   category: "hidden",
   icon: o,
-  type: "container",
+  type: "embed",
   constraints: {
     relation: "parent",
     component: { $eq: "HeadSlot" }

package/lib/heading.ws.js

@@ -1,28 +1,29 @@
 import { HeadingIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as o } from "@webstudio-is/sdk";
-import { h1 as e, h2 as n, h3 as r, h4 as a, h5 as s, h6 as i } from "@webstudio-is/sdk/normalize.css";
+import { h1 as e, h2 as n, h3 as r, h4 as a, h5 as i, h6 as s } from "@webstudio-is/sdk/normalize.css";
 import { props as p } from "./__generated__/heading.props.js";
-const m = {
+const c = {
   h1: e,
   h2: n,
   h3: r,
   h4: a,
-  h5: s,
-  h6: i
-}, d = {
+  h5: i,
+  h6: s
+}, f = {
   type: "container",
+  placeholder: "Heading",
   icon: t,
   constraints: {
     relation: "ancestor",
     component: { $neq: "Heading" }
   },
   states: o,
-  presetStyle: m
+  presetStyle: c
 }, g = {
   props: p,
   initialProps: ["id", "className", "tag"]
 };
 export {
-  d as meta,
+  f as meta,
   g as propsMeta
 };

package/lib/html-embed.ws.js

@@ -7,7 +7,7 @@ const i = {
       value: { type: "keyword", value: "contents" }
     },
     {
-      property: "whiteSpaceCollapse",
+      property: "white-space-collapse",
       value: { type: "keyword", value: "collapse" }
     }
   ]
@@ -19,7 +19,7 @@ const i = {
   icon: t,
   presetStyle: i,
   order: 2
-}, r = {
+}, s = {
   props: {
     ...e,
     clientOnly: {
@@ -42,5 +42,5 @@ const i = {
 };
 export {
   a as meta,
-  r as propsMeta
+  s as propsMeta
 };

package/lib/image.ws.js

@@ -7,7 +7,7 @@ const a = {
     ...o,
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
     {
-      property: "maxWidth",
+      property: "max-width",
       value: { type: "unit", unit: "%", value: 100 }
     },
     // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins

package/lib/italic.ws.js

@@ -6,7 +6,7 @@ const r = {
   i: [
     ...o,
     {
-      property: "fontStyle",
+      property: "font-style",
       value: { type: "keyword", value: "italic" }
     }
   ]

package/lib/link.ws.js

@@ -12,6 +12,7 @@ const a = {
   ]
 }, l = {
   type: "container",
+  placeholder: "Link",
   icon: e,
   constraints: {
     relation: "ancestor",

package/lib/list-item.ws.js

@@ -6,6 +6,7 @@ const s = {
   li: e
 }, m = {
   type: "container",
+  placeholder: "List item",
   constraints: {
     // cannot use parent relation here
     // because list item can be put inside of collection or slot

package/lib/list.ws.js

@@ -1,42 +1,42 @@
 import { ListIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as r } from "@webstudio-is/sdk";
-import { ol as t, ul as o } from "@webstudio-is/sdk/normalize.css";
+import { defaultStates as t } from "@webstudio-is/sdk";
+import { ol as r, ul as o } from "@webstudio-is/sdk/normalize.css";
 import { props as p } from "./__generated__/list.props.js";
 const a = {
   ol: [
-    ...t,
+    ...r,
     {
-      property: "marginTop",
+      property: "margin-top",
       value: { type: "keyword", value: "0" }
     },
     {
-      property: "marginBottom",
+      property: "margin-bottom",
       value: { type: "keyword", value: "10px" }
     },
     {
-      property: "paddingLeft",
+      property: "padding-left",
       value: { type: "keyword", value: "40px" }
     }
   ],
   ul: [
     ...o,
     {
-      property: "marginTop",
+      property: "margin-top",
       value: { type: "keyword", value: "0" }
     },
     {
-      property: "marginBottom",
+      property: "margin-bottom",
       value: { type: "keyword", value: "10px" }
     },
     {
-      property: "paddingLeft",
+      property: "padding-left",
       value: { type: "keyword", value: "40px" }
     }
   ]
 }, d = {
   type: "container",
   icon: e,
-  states: r,
+  states: t,
   presetStyle: a
 }, s = {
   props: p,

package/lib/markdown-embed.ws.js

@@ -10,7 +10,7 @@ const t = {
         value: { type: "keyword", value: "contents" }
       },
       {
-        property: "whiteSpaceCollapse",
+        property: "white-space-collapse",
         value: { type: "keyword", value: "collapse" }
       }
     ]

package/lib/option.ws.js

@@ -3,7 +3,7 @@ import { props as t } from "./__generated__/option.props.js";
 const o = {
   option: [
     {
-      property: "backgroundColor",
+      property: "background-color",
       state: ":checked",
       value: {
         type: "rgb",

package/lib/paragraph.ws.js

@@ -2,22 +2,23 @@ import { TextAlignLeftIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as o } from "@webstudio-is/sdk";
 import { p as r } from "@webstudio-is/sdk/normalize.css";
 import { props as e } from "./__generated__/paragraph.props.js";
-const n = {
+const a = {
   p: r
-}, m = {
+}, c = {
   type: "container",
+  placeholder: "Paragraph",
   icon: t,
   constraints: {
     relation: "ancestor",
     component: { $neq: "Paragraph" }
   },
   states: o,
-  presetStyle: n
-}, c = {
+  presetStyle: a
+}, m = {
   props: e,
   initialProps: ["id", "className"]
 };
 export {
-  m as meta,
-  c as propsMeta
+  c as meta,
+  m as propsMeta
 };

package/lib/radio-button.ws.js

@@ -6,7 +6,7 @@ const i = {
   input: [
     ...o,
     {
-      property: "marginRight",
+      property: "margin-right",
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]

package/lib/separator.ws.js

@@ -10,23 +10,23 @@ const p = {
       value: { type: "keyword", value: "1px" }
     },
     {
-      property: "backgroundColor",
+      property: "background-color",
       value: { type: "keyword", value: "gray" }
     },
     {
-      property: "borderTopStyle",
+      property: "border-top-style",
       value: { type: "keyword", value: "none" }
     },
     {
-      property: "borderRightStyle",
+      property: "border-right-style",
       value: { type: "keyword", value: "none" }
     },
     {
-      property: "borderLeftStyle",
+      property: "border-left-style",
       value: { type: "keyword", value: "none" }
     },
     {
-      property: "borderBottomStyle",
+      property: "border-bottom-style",
       value: { type: "keyword", value: "none" }
     }
   ]
@@ -38,11 +38,11 @@ const p = {
   states: o,
   presetStyle: p,
   order: 3
-}, d = {
+}, s = {
   props: t,
   initialProps: ["id", "className"]
 };
 export {
   n as meta,
-  d as propsMeta
+  s as propsMeta
 };

package/lib/text.ws.js

@@ -6,7 +6,7 @@ const r = {
   div: [
     ...o,
     {
-      property: "minHeight",
+      property: "min-height",
       value: { type: "unit", unit: "em", value: 1 }
     }
   ]

package/lib/types/vimeo.d.ts

@@ -66,6 +66,7 @@ export type VimeoOptions = Omit<VimeoPlayerOptions, "dnt" | "interactive_params"
     /** Whether to display the video owner's portrait. Only works if either title or byline are also enabled */
     showPortrait?: VimeoPlayerOptions["portrait"];
 };
+export declare const requestFullscreen: (element: HTMLIFrameElement) => void;
 type PlayerStatus = "initial" | "loading" | "ready";
 export declare const VimeoContext: import("react").Context<{
     previewImageUrl?: URL;

package/lib/vimeo.js

@@ -1,19 +1,19 @@
-import { jsx as s, jsxs as D, Fragment as F } from "react/jsx-runtime";
-import { colord as z } from "colord";
-import { createContext as T, forwardRef as q, useState as v, useContext as G, useEffect as f } from "react";
-import { ReactSdkContext as H } from "@webstudio-is/react-sdk/runtime";
-const Y = (e) => {
+import { jsx as s, jsxs as q, Fragment as A } from "react/jsx-runtime";
+import { colord as B } from "colord";
+import { createContext as T, forwardRef as z, useState as y, useContext as G, useRef as H, useEffect as v } from "react";
+import { ReactSdkContext as Y } from "@webstudio-is/react-sdk/runtime";
+const J = (e) => {
   if (e.url === void 0)
     return;
   let t;
   try {
-    const o = new URL(e.url);
-    t = new URL(R), t.pathname = `/video${o.pathname}`;
+    const n = new URL(e.url);
+    t = new URL(M), t.pathname = `/video${n.pathname}`;
   } catch {
   }
   if (t === void 0)
     return;
-  const a = {
+  const r = {
     showPortrait: "portrait",
     showByline: "byline",
     showTitle: "title",
@@ -23,36 +23,36 @@ const Y = (e) => {
     backgroundMode: "background",
     doNotTrack: "dnt"
   };
-  let r;
-  for (r in e) {
-    const o = e[r];
-    if (r === "url" || o === void 0)
+  let o;
+  for (o in e) {
+    const n = e[o];
+    if (o === "url" || n === void 0)
       continue;
-    const i = a[r] ?? r;
-    t.searchParams.append(i, o.toString());
+    const i = r[o] ?? o;
+    t.searchParams.append(i, n.toString());
   }
   if (t.searchParams.set("autoplay", "true"), typeof e.controlsColor == "string") {
-    const o = z(e.controlsColor).toHex().replace("#", "");
-    t.searchParams.set("color", o);
+    const n = B(e.controlsColor).toHex().replace("#", "");
+    t.searchParams.set("color", n);
   }
   return e.showPortrait && t.searchParams.set("title", "true"), e.showByline && (t.searchParams.set("portrait", "true"), t.searchParams.set("title", "true")), t.toString();
-}, h = (e) => {
+}, w = (e) => {
   const t = document.createElement("link");
   t.rel = "preconnect", t.href = e, t.crossOrigin = "true", document.head.appendChild(t);
 };
-let b = !1;
-const J = "https://f.vimeocdn.com", R = "https://player.vimeo.com", U = "https://i.vimeocdn.com", K = () => {
-  b || window.matchMedia("(hover: none)").matches || (h(J), h(R), h(U), b = !0);
-}, Q = (e) => {
+let U = !1;
+const K = "https://f.vimeocdn.com", M = "https://player.vimeo.com", S = "https://i.vimeocdn.com", Q = () => {
+  U || window.matchMedia("(hover: none)").matches || (w(K), w(M), w(S), U = !0);
+}, W = (e) => {
   try {
-    const a = new URL(e).pathname.split("/")[2];
-    return a === "" || a == null ? void 0 : a;
+    const r = new URL(e).pathname.split("/")[2];
+    return r === "" || r == null ? void 0 : r;
   } catch {
   }
-}, W = async (e) => {
-  const a = `https://vimeo.com/api/v2/video/${Q(e)}.json`, o = (await (await fetch(a)).json())[0].thumbnail_large, i = o.substr(o.lastIndexOf("/") + 1).split("_")[0], n = new URL(U);
-  return n.pathname = `/video/${i}.webp`, n.searchParams.append("mw", "1100"), n.searchParams.append("mh", "619"), n.searchParams.append("q", "70"), n;
-}, X = () => /* @__PURE__ */ s(
+}, X = async (e) => {
+  const r = `https://vimeo.com/api/v2/video/${W(e)}.json`, n = (await (await fetch(r)).json())[0].thumbnail_large, i = n.substr(n.lastIndexOf("/") + 1).split("_")[0], a = new URL(S);
+  return a.pathname = `/video/${i}.webp`, a.searchParams.append("mw", "1100"), a.searchParams.append("mh", "619"), a.searchParams.append("q", "70"), a;
+}, Z = () => /* @__PURE__ */ s(
   "div",
   {
     style: {
@@ -65,141 +65,147 @@ const J = "https://f.vimeocdn.com", R = "https://player.vimeo.com", U = "https:/
     },
     children: 'Open the "Settings" panel and paste a video URL, e.g. https://vimeo.com/831343124.'
   }
-), Z = ({
+), tt = (e) => {
+  const t = "ontouchstart" in window;
+  (window.matchMedia("(max-width: 1024px)").matches || t) && e.requestFullscreen();
+}, et = ({
   title: e,
   status: t,
-  loading: a,
-  videoUrl: r,
-  previewImageUrl: o,
+  loading: r,
+  videoUrl: o,
+  previewImageUrl: n,
   autoplay: i,
-  renderer: n,
-  showPreview: d,
+  renderer: a,
+  showPreview: u,
+  playsinline: f,
   onStatusChange: c,
   onPreviewImageUrlChange: l
 }) => {
-  const [p, u] = v(0);
-  if (f(() => {
-    i && n !== "canvas" && t === "initial" && c("loading");
-  }, [i, t, n, c]), f(() => {
-    n !== "canvas" && K();
-  }, [n]), f(() => {
-    if (r !== void 0) {
-      if (d === !1) {
+  const [m, h] = y(0), d = H(null);
+  if (v(() => {
+    i && a !== "canvas" && t === "initial" && c("loading");
+  }, [i, t, a, c]), v(() => {
+    a !== "canvas" && Q();
+  }, [a]), v(() => {
+    if (o !== void 0) {
+      if (u === !1) {
         l(void 0);
         return;
       }
-      o === void 0 && W(r).then(l).catch(() => {
-        console.error(`Could not load preview image for ${r}`);
+      n === void 0 && X(o).then(l).catch(() => {
+        console.error(`Could not load preview image for ${o}`);
       });
     }
-  }, [l, d, r, o]), !(n === "canvas" || t === "initial"))
+  }, [l, u, o, n]), !(a === "canvas" || t === "initial"))
     return /* @__PURE__ */ s(
       "iframe",
       {
+        ref: d,
         title: e,
-        src: r,
-        loading: a,
+        src: o,
+        loading: r,
         allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture;",
         allowFullScreen: !0,
         style: {
           position: "absolute",
           width: "100%",
           height: "100%",
-          opacity: p,
+          opacity: m,
           transition: "opacity 1s",
           border: "none"
         },
         onLoad: () => {
-          c("ready"), u(1);
+          c("ready"), h(1), d.current && !f && !i && tt(d.current);
         }
       }
     );
-}, tt = T({
+}, ot = T({
   onInitPlayer: () => {
   },
   status: "initial"
-}), et = q(
+}), rt = z(
   ({
     url: e,
     loading: t = "lazy",
-    autoplay: a = !1,
-    autopause: r = !0,
-    showByline: o = !1,
+    autoplay: r = !1,
+    autopause: o = !0,
+    showByline: n = !1,
     showControls: i = !0,
-    doNotTrack: n = !1,
-    keyboard: d = !0,
-    loop: c = !1,
-    muted: l = !1,
-    pip: p = !1,
-    playsinline: u = !0,
-    showPortrait: S = !0,
-    quality: L = "auto",
-    responsive: k = !0,
-    speed: E = !1,
-    showTitle: _ = !1,
-    transparent: j = !0,
-    showPreview: M = !1,
-    autopip: N,
-    controlsColor: O,
-    interactiveParams: V,
-    texttrack: $,
-    children: A,
-    ...y
-  }, m) => {
-    const [w, g] = v("initial"), [P, B] = v(), { renderer: C } = G(H), I = Y({
+    doNotTrack: a = !1,
+    keyboard: u = !0,
+    loop: f = !1,
+    muted: c = !1,
+    pip: l = !1,
+    playsinline: m = !1,
+    showPortrait: h = !0,
+    quality: d = "auto",
+    responsive: L = !0,
+    speed: k = !1,
+    showTitle: E = !1,
+    transparent: _ = !0,
+    showPreview: j = !1,
+    autopip: F,
+    controlsColor: N,
+    interactiveParams: O,
+    texttrack: V,
+    children: D,
+    ...g
+  }, p) => {
+    const [P, C] = y("initial"), [x, $] = y(), { renderer: R } = G(Y), b = J({
       url: e,
-      autoplay: a,
-      autopause: r,
+      autoplay: r,
+      autopause: o,
       showControls: i,
-      controlsColor: O,
-      doNotTrack: n,
-      interactiveParams: V,
-      keyboard: d,
-      loop: c,
-      muted: l,
-      pip: p,
-      playsinline: u,
-      quality: L,
-      responsive: k,
-      speed: E,
-      texttrack: $,
-      showTitle: _,
-      transparent: j,
-      showPortrait: S,
-      autopip: N
+      controlsColor: N,
+      doNotTrack: a,
+      interactiveParams: O,
+      keyboard: u,
+      loop: f,
+      muted: c,
+      pip: l,
+      playsinline: m,
+      quality: d,
+      responsive: L,
+      speed: k,
+      texttrack: V,
+      showTitle: E,
+      transparent: _,
+      showPortrait: h,
+      autopip: F
     });
     return /* @__PURE__ */ s(
-      tt.Provider,
+      ot.Provider,
       {
         value: {
-          status: w,
-          previewImageUrl: P,
+          status: P,
+          previewImageUrl: x,
           onInitPlayer() {
-            C !== "canvas" && g("loading");
+            R !== "canvas" && C("loading");
           }
         },
         children: /* @__PURE__ */ s(
           "div",
           {
-            ...y,
-            ref: (x) => {
-              m !== null && (typeof m == "function" ? m(x) : m.current = x);
+            ...g,
+            ref: (I) => {
+              p !== null && (typeof p == "function" ? p(I) : p.current = I);
             },
-            children: I === void 0 ? /* @__PURE__ */ s(X, {}) : /* @__PURE__ */ D(F, { children: [
-              A,
+            children: b === void 0 ? /* @__PURE__ */ s(Z, {}) : /* @__PURE__ */ q(A, { children: [
+              D,
               /* @__PURE__ */ s(
-                Z,
+                et,
                 {
-                  title: y.title,
-                  autoplay: a,
-                  videoUrl: I,
-                  previewImageUrl: P,
+                  title: g.title,
+                  autoplay: r,
+                  playsinline: m,
+                  videoUrl: b,
+                  previewImageUrl: x,
                   loading: t,
-                  showPreview: M,
-                  renderer: C,
-                  status: w,
-                  onStatusChange: g,
-                  onPreviewImageUrlChange: B
+                  showPreview: j,
+                  renderer: R,
+                  status: P,
+                  onStatusChange: C,
+                  onPreviewImageUrlChange: $
                 }
               )
             ] })
@@ -209,8 +215,9 @@ const J = "https://f.vimeocdn.com", R = "https://player.vimeo.com", U = "https:/
     );
   }
 );
-et.displayName = "Vimeo";
+rt.displayName = "Vimeo";
 export {
-  et as Vimeo,
-  tt as VimeoContext
+  rt as Vimeo,
+  ot as VimeoContext,
+  tt as requestFullscreen
 };

package/lib/vimeo.ws.js

@@ -1,14 +1,14 @@
 import { VimeoIcon as o } from "@webstudio-is/icons/svg";
 import { defaultStates as t } from "@webstudio-is/sdk";
-import { div as r } from "@webstudio-is/sdk/normalize.css";
-import { props as i } from "./__generated__/vimeo.props.js";
-const n = {
-  div: r
+import { div as i } from "@webstudio-is/sdk/normalize.css";
+import { props as n } from "./__generated__/vimeo.props.js";
+const r = {
+  div: i
 }, c = {
   type: "container",
   icon: o,
   states: t,
-  presetStyle: n,
+  presetStyle: r,
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link", "Heading"] }
@@ -29,9 +29,10 @@ const n = {
   "showByline",
   "showTitle",
   "showControls",
-  "controlsColor"
+  "controlsColor",
+  "playsinline"
 ], m = {
-  props: i,
+  props: n,
   initialProps: e
 };
 export {

package/lib/webhook-form.ws.js

@@ -17,7 +17,15 @@ const n = {
     { selector: "[data-state=success]", label: "Success" }
   ]
 }, c = {
-  props: e,
+  props: {
+    ...e,
+    action: {
+      type: "resource",
+      control: "resource",
+      description: "The URI of a program that processes the information submitted via the form.",
+      required: !1
+    }
+  },
   initialProps: ["id", "className", "state", "action"]
 };
 export {

package/lib/youtube.js

@@ -1,22 +1,28 @@
-import { jsx as u, jsxs as _, Fragment as R } from "react/jsx-runtime";
-import { forwardRef as C, useState as f, useContext as I, useEffect as y } from "react";
-import { ReactSdkContext as L } from "@webstudio-is/react-sdk/runtime";
-import { VimeoContext as E } from "./vimeo.js";
-const O = "https://www.youtube-nocookie.com", x = "https://www.youtube.com", w = "https://img.youtube.com", k = (e) => {
+import { jsx as m, jsxs as _, Fragment as L } from "react/jsx-runtime";
+import { forwardRef as C, useState as p, useContext as I, useRef as E, useEffect as h } from "react";
+import { ReactSdkContext as O } from "@webstudio-is/react-sdk/runtime";
+import { VimeoContext as x, requestFullscreen as S } from "./vimeo.js";
+const T = "https://www.youtube-nocookie.com", j = "https://www.youtube.com", v = "https://img.youtube.com", R = (e) => {
   if (e)
     try {
       const a = new URL(e);
-      return a.hostname === "youtu.be" ? a.pathname.slice(1) : a.searchParams.get("v") || a.pathname.split("/").pop();
+      return a.pathname === "/embed" ? void 0 : a.hostname === "youtu.be" ? a.pathname.slice(1) : a.searchParams.get("v") || a.pathname.split("/").pop();
     } catch {
       return e;
     }
-}, S = (e, a) => {
-  var r, s;
-  const o = k(e.url);
-  if (!o)
-    return;
-  const c = new URL(`${a}/embed/${o}`), l = Object.keys(e), t = {};
-  for (const n of l)
+}, A = (e, a) => {
+  var i, c;
+  const l = R(e.url), r = new URL(a);
+  if (l)
+    r.pathname = `/embed/${l}`;
+  else if (e.url)
+    try {
+      const n = new URL(e.url);
+      r.pathname = n.pathname, r.search = n.search;
+    } catch {
+    }
+  const o = Object.keys(e), t = {};
+  for (const n of o)
     switch (n) {
       case "autoplay":
         t.autoplay = e.autoplay ? "1" : "0", e.autoplay && e.muted === void 0 && (t.mute = "1");
@@ -34,7 +40,7 @@ const O = "https://www.youtube-nocookie.com", x = "https://www.youtube.com", w =
         t.keyboard = e.keyboard ? "1" : "0";
         break;
       case "loop":
-        t.loop = e.loop ? "1" : "0", e.loop && (e.playlist ?? "").trim() === "" && (t.playlist = o);
+        t.loop = e.loop ? "1" : "0", e.loop && (e.playlist ?? "").trim() === "" && (t.playlist = l);
         break;
       case "inline":
         t.playsinline = e.inline ? "1" : "0";
@@ -52,10 +58,10 @@ const O = "https://www.youtube-nocookie.com", x = "https://www.youtube.com", w =
         t.iv_load_policy = e.showAnnotations ? "1" : "3";
         break;
       case "startTime":
-        t.start = (r = e.startTime) == null ? void 0 : r.toString();
+        t.start = (i = e.startTime) == null ? void 0 : i.toString();
         break;
       case "endTime":
-        t.end = (s = e.endTime) == null ? void 0 : s.toString();
+        t.end = (c = e.endTime) == null ? void 0 : c.toString();
         break;
       case "disableKeyboard":
         t.disablekb = e.disableKeyboard ? "1" : "0";
@@ -82,119 +88,124 @@ const O = "https://www.youtube-nocookie.com", x = "https://www.youtube.com", w =
         t.playlist = e.playlist;
         break;
     }
-  return Object.entries(t).forEach(([n, i]) => {
-    i !== void 0 && c.searchParams.append(n, i.toString());
-  }), c.toString();
-}, h = (e) => {
+  return Object.entries(t).forEach(([n, s]) => {
+    s !== void 0 && r.searchParams.append(n, s.toString());
+  }), r.toString();
+}, w = (e) => {
   const a = document.createElement("link");
   a.rel = "preconnect", a.href = e, a.crossOrigin = "true", document.head.appendChild(a);
 };
-let g = !1;
-const T = (e) => {
-  if (!(g || window.matchMedia("(hover: none)").matches)) {
+let k = !1;
+const N = (e) => {
+  if (!(k || window.matchMedia("(hover: none)").matches)) {
     try {
       const a = new URL(e);
-      h(a.origin);
+      w(a.origin);
     } catch {
     }
-    h(w), g = !0;
+    w(v), k = !0;
   }
-}, j = (e) => new URL(`${w}/vi/${e}/maxresdefault.jpg`), A = () => /* @__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' }), N = ({
+}, P = (e) => new URL(`${v}/vi/${e}/maxresdefault.jpg`), U = () => /* @__PURE__ */ m("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' }), V = ({
   title: e,
   status: a,
-  loading: o,
-  videoUrl: c,
-  previewImageUrl: l,
+  loading: l,
+  videoUrl: r,
+  previewImageUrl: o,
   autoplay: t,
-  renderer: r,
-  showPreview: s,
-  onStatusChange: n,
-  onPreviewImageUrlChange: i
+  inline: i,
+  renderer: c,
+  showPreview: n,
+  onStatusChange: s,
+  onPreviewImageUrlChange: u
 }) => {
-  const [m, b] = f(0);
-  return y(() => {
-    t && r !== "canvas" && a === "initial" && n("loading");
-  }, [t, a, r, n]), y(() => {
-    r !== "canvas" && T(c);
-  }, [r, c]), y(() => {
-    const d = k(c);
-    if (!d || !s) {
-      i(void 0);
+  const [b, f] = p(0), d = E(null);
+  return h(() => {
+    t && c !== "canvas" && a === "initial" && s("loading");
+  }, [t, a, c, s]), h(() => {
+    c !== "canvas" && N(r);
+  }, [c, r]), h(() => {
+    const y = R(r);
+    if (!y || !n) {
+      u(void 0);
       return;
     }
-    l || i(j(d));
-  }, [i, s, c, l]), r === "canvas" || a === "initial" ? null : /* @__PURE__ */ u(
+    o || u(P(y));
+  }, [u, n, r, o]), c === "canvas" || a === "initial" ? null : /* @__PURE__ */ m(
     "iframe",
     {
+      ref: d,
       title: e,
-      src: c,
-      loading: o,
+      src: r,
+      loading: l,
       allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
       allowFullScreen: !0,
       style: {
         position: "absolute",
         width: "100%",
         height: "100%",
-        opacity: m,
+        opacity: b,
         transition: "opacity 1s",
         border: "none"
       },
       onLoad: () => {
-        n("ready"), b(1);
+        s("ready"), f(1), !i && !t && d.current && S(d.current);
       }
     }
   );
-}, P = C(
+}, D = C(
   ({
     url: e,
     loading: a = "lazy",
-    autoplay: o,
-    showPreview: c,
-    children: l,
+    autoplay: l,
+    showPreview: r,
+    children: o,
     privacyEnhancedMode: t,
-    ...r
-  }, s) => {
-    const [n, i] = f("initial"), [m, b] = f(), { renderer: d } = I(L), v = t ?? !0 ? O : x, p = S(
+    inline: i = !1,
+    ...c
+  }, n) => {
+    const [s, u] = p("initial"), [b, f] = p(), { renderer: d } = I(O), y = t ?? !0 ? T : j, g = A(
       {
-        ...r,
+        ...c,
+        inline: i,
         url: e,
         autoplay: !0
       },
-      v
+      y
     );
-    return /* @__PURE__ */ u(
-      E.Provider,
+    return /* @__PURE__ */ m(
+      x.Provider,
       {
         value: {
-          status: n,
-          previewImageUrl: m,
+          status: s,
+          previewImageUrl: b,
           onInitPlayer() {
-            d !== "canvas" && i("loading");
+            d !== "canvas" && u("loading");
           }
         },
-        children: /* @__PURE__ */ u("div", { ...r, ref: s, children: p ? /* @__PURE__ */ _(R, { children: [
-          l,
-          /* @__PURE__ */ u(
-            N,
+        children: /* @__PURE__ */ m("div", { ...c, ref: n, children: g ? /* @__PURE__ */ _(L, { children: [
+          o,
+          /* @__PURE__ */ m(
+            V,
             {
-              title: r.title,
-              autoplay: o,
-              videoUrl: p,
-              previewImageUrl: m,
+              title: c.title,
+              autoplay: l,
+              videoUrl: g,
+              previewImageUrl: b,
               loading: a,
-              showPreview: c,
+              inline: i,
+              showPreview: r,
               renderer: d,
-              status: n,
-              onStatusChange: i,
-              onPreviewImageUrlChange: b
+              status: s,
+              onStatusChange: u,
+              onPreviewImageUrlChange: f
             }
           )
-        ] }) : /* @__PURE__ */ u(A, {}) })
+        ] }) : /* @__PURE__ */ m(U, {}) })
       }
     );
   }
 );
-P.displayName = "YouTube";
+D.displayName = "YouTube";
 export {
-  P as YouTube
+  D as YouTube
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.0.0-4f7bf18",
+  "version": "0.0.0-50b8685",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -44,25 +44,26 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "dependencies": {
-    "@react-aria/utils": "^3.26.0",
+    "@react-aria/utils": "^3.27.0",
     "await-interaction-response": "^0.0.2",
     "colord": "^2.9.3",
     "micromark": "^4.0.1",
     "micromark-extension-gfm-table": "^2.1.0",
-    "@webstudio-is/icons": "0.0.0-4f7bf18",
-    "@webstudio-is/image": "0.0.0-4f7bf18",
-    "@webstudio-is/sdk": "0.0.0-4f7bf18",
-    "@webstudio-is/react-sdk": "0.0.0-4f7bf18"
+    "@webstudio-is/icons": "0.0.0-50b8685",
+    "@webstudio-is/react-sdk": "0.0.0-50b8685",
+    "@webstudio-is/image": "0.0.0-50b8685",
+    "@webstudio-is/sdk": "0.0.0-50b8685"
   },
   "devDependencies": {
-    "@testing-library/react": "^14.2.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.2.0",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "vitest": "^3.0.2",
+    "vitest": "^3.0.8",
     "@webstudio-is/generate-arg-types": "0.0.0",
-    "@webstudio-is/template": "0.0.0-4f7bf18",
+    "@webstudio-is/template": "0.0.0-50b8685",
     "@webstudio-is/tsconfig": "1.0.7",
     "@webstudio-is/sdk-cli": "0.94.0"
   },