webstudio 0.304.0 → 0.306.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.304.0",
+  "version": "0.306.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -53,10 +53,10 @@
     "which": "^5.0.0",
     "yargs": "^17.7.2",
     "zod": "^4.4.3",
-    "@webstudio-is/http-client": "0.304.0",
-    "@webstudio-is/project-migrations": "0.304.0",
-    "@webstudio-is/sync-client": "0.0.0",
-    "@webstudio-is/protocol": "0.304.0"
+    "@webstudio-is/project-migrations": "0.306.0",
+    "@webstudio-is/http-client": "0.306.0",
+    "@webstudio-is/protocol": "0.306.0",
+    "@webstudio-is/sync-client": "0.0.0"
   },
   "devDependencies": {
     "@cloudflare/vite-plugin": "^1.1.0",
@@ -80,7 +80,7 @@
     "@types/which": "^3.0.4",
     "@types/yargs": "^17.0.33",
     "@vercel/react-router": "^1.1.0",
-    "@vitejs/plugin-react": "^4.4.1",
+    "@vitejs/plugin-react": "^4.7.0",
     "h3": "^1.15.1",
     "ipx": "^3.0.3",
     "isbot": "^5.1.25",
@@ -95,28 +95,28 @@
     "shiki": "4.4.1",
     "ts-expect": "^1.3.0",
     "typescript": "7.0.2",
-    "vike": "^0.4.229",
-    "vite": "^6.3.4",
+    "vike": "0.4.267-commit-feffb0f",
+    "vite": "7.1.12",
     "vitest": "^3.1.2",
     "wrangler": "4.130.0",
-    "@webstudio-is/css-engine": "0.304.0",
-    "@webstudio-is/expression": "0.304.0",
-    "@webstudio-is/content-engine": "0.304.0",
-    "@webstudio-is/fonts": "0.304.0",
-    "@webstudio-is/image": "0.304.0",
+    "@webstudio-is/css-engine": "0.306.0",
+    "@webstudio-is/content-engine": "0.306.0",
+    "@webstudio-is/expression": "0.306.0",
+    "@webstudio-is/fonts": "0.306.0",
+    "@webstudio-is/image": "0.306.0",
+    "@webstudio-is/react-sdk": "0.306.0",
+    "@webstudio-is/query-builder": "0.306.0",
+    "@webstudio-is/sdk": "0.306.0",
     "@webstudio-is/project-build": "0.0.0",
-    "@webstudio-is/query-builder": "0.304.0",
-    "@webstudio-is/sdk-components-react-radix": "0.304.0",
-    "@webstudio-is/sdk-components-react-remix": "0.304.0",
-    "@webstudio-is/sdk-components-react": "0.304.0",
-    "@webstudio-is/sdk-components-react-router": "0.304.0",
-    "@webstudio-is/vision": "0.0.0",
-    "@webstudio-is/sdk-components-animation": "0.304.0",
-    "@webstudio-is/sdk-components-registry": "0.304.0",
+    "@webstudio-is/sdk-components-react": "0.306.0",
+    "@webstudio-is/sdk-components-animation": "0.306.0",
+    "@webstudio-is/sdk-components-react-radix": "0.306.0",
+    "@webstudio-is/sdk-components-registry": "0.306.0",
     "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/react-sdk": "0.304.0",
-    "@webstudio-is/sdk": "0.304.0",
-    "@webstudio-is/wsauth": "0.304.0"
+    "@webstudio-is/sdk-components-react-remix": "0.306.0",
+    "@webstudio-is/sdk-components-react-router": "0.306.0",
+    "@webstudio-is/wsauth": "0.306.0",
+    "@webstudio-is/vision": "0.0.0"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",

package/templates/cloudflare/package.json

@@ -12,7 +12,7 @@
     "build-cf-types": "wrangler types"
   },
   "dependencies": {
-    "@webstudio-is/wsauth": "0.304.0",
+    "@webstudio-is/wsauth": "0.306.0",
     "@remix-run/cloudflare": "2.16.5",
     "@remix-run/cloudflare-pages": "2.16.5"
   },

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

@@ -12,12 +12,24 @@ import {
 import { useLoaderData } from "@remix-run/react";
 import {
   isLocalResource,
-  loadResource,
   loadResources,
+  loadResourceWithEmail,
+  loadResourcesWithEmail,
   cachedFetch,
+  getSystemSearch,
+} from "@webstudio-is/sdk/runtime";
+import {
+  handleManagedFormSubmission,
+  getManagedFormFailure,
+  readFormDataWithLimit,
+  type ManagedFormResponse,
+} from "@webstudio-is/sdk/form/server";
+import {
+  managedFormRequestParamName,
   formIdFieldName,
+  managedFormIdFieldName,
   formBotFieldName,
-} from "@webstudio-is/sdk/runtime";
+} from "@webstudio-is/sdk/form";
 import { authenticateRequest } from "@webstudio-is/wsauth";
 import {
   ReactSdkContext,
@@ -37,6 +49,8 @@ import {
 } from "__CLIENT__";
 import {
   getResources,
+  getManagedFormSubmissions,
+  getManagedFormResourceGraph,
   getPageMeta,
   getRemixParams,
   contactEmail,
@@ -46,6 +60,11 @@ import css from "__CSS__?url";
 import { sitemap } from "__SITEMAP__";
 import { authRoutes } from "__AUTH__";
 import { createGeneratedAssetResourceFetch } from "__ASSET_QUERY_RUNTIME__";
+import {
+  createManagedFormEmailSender,
+  createManagedFormResourceFetch,
+  validateManagedFormEmail,
+} from "__MANAGED_FORM_FETCH__";
 import { assetUrlsByPath } from "__ASSETS__";
 
 const authenticateProductionRequest = (request: Request) => {
@@ -113,7 +132,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
   const params = getRemixParams(arg.params);
   const system = {
     params,
-    search: Object.fromEntries(url.searchParams),
+    ...getSystemSearch(url.searchParams),
     origin: url.origin,
     pathname: url.pathname,
   };
@@ -257,24 +276,66 @@ const getRequestHost = (request: Request): string =>
 export const action = async ({
   request,
   context,
+  params,
 }: ActionFunctionArgs): Promise<
-  { success: true } | { success: false; errors: string[] }
+  { success: true } | { success: false; errors: string[] } | ManagedFormResponse
 > => {
   authenticateProductionRequest(request);
 
+  let isManagedFormRequest = false;
   try {
     const url = new URL(request.url);
-    url.host = getRequestHost(request);
-
-    const formData = await request.formData();
+    isManagedFormRequest =
+      url.searchParams.get(managedFormRequestParamName) === "1";
+    url.searchParams.delete(managedFormRequestParamName);
+    if (!isManagedFormRequest) {
+      url.host = getRequestHost(request);
+    }
+    const formData = isManagedFormRequest
+      ? await readFormDataWithLimit(request)
+      : await request.formData();
 
     const system = {
-      params: {},
-      search: {},
+      params: getRemixParams(params ?? {}),
+      ...getSystemSearch(url.searchParams),
       origin: url.origin,
       pathname: url.pathname,
     };
 
+    const managedFormIds = formData.getAll(managedFormIdFieldName);
+    if (!isManagedFormRequest && managedFormIds.length > 0) {
+      throw new Error("Invalid Form submission");
+    }
+    if (isManagedFormRequest) {
+      if (managedFormIds.length !== 1 || formData.has(formIdFieldName)) {
+        throw new Error("Invalid Form submission");
+      }
+      const protectedFetch = createManagedFormResourceFetch({
+        request,
+        context,
+        projectDomain,
+      });
+      return await handleManagedFormSubmission({
+        request,
+        formData,
+        url,
+        system,
+        configuration: (id) => getManagedFormSubmissions().get(id),
+        getGraph: (id, values) => getManagedFormResourceGraph(id, values),
+        createEmailSender: (data) =>
+          createManagedFormEmailSender({ context, formData: data, projectId }),
+        validateEmail: validateManagedFormEmail,
+        resourceFetch: protectedFetch,
+        validateDestination: protectedFetch.validateDestination,
+        trustedIp:
+          typeof context === "object" &&
+          context !== null &&
+          "cloudflare" in context
+            ? request.headers.get("cf-connecting-ip") ?? undefined
+            : undefined,
+      });
+    }
+
     const resourceName = formData.get(formIdFieldName);
     const generatedResources = getResources({ system });
     const actionResource =
@@ -308,7 +369,7 @@ export const action = async ({
     formData.delete(formIdFieldName);
     formData.delete(formBotFieldName);
 
-    let result: Awaited<ReturnType<typeof loadResource>>;
+    let result: Awaited<ReturnType<typeof loadResourceWithEmail>>;
     if (actionResource === undefined) {
       if (contactEmail === undefined) {
         throw new Error("Contact email not found");
@@ -322,14 +383,14 @@ export const action = async ({
       if (resource === undefined) {
         throw Error("Resource not found");
       }
-      result = await loadResource(fetch, resource);
+      result = await loadResourceWithEmail(fetch, resource);
     } else {
       const actionFetch = await createGeneratedAssetResourceFetch({
         request,
         context,
         fallback: customFetch,
       });
-      const results = await loadResources(
+      const results = await loadResourcesWithEmail(
         actionFetch,
         {
           ...generatedResources.data,
@@ -348,7 +409,7 @@ export const action = async ({
       if (actionResult === undefined) {
         throw Error("Resource not found");
       }
-      result = actionResult as Awaited<ReturnType<typeof loadResource>>;
+      result = actionResult as Awaited<ReturnType<typeof loadResourceWithEmail>>;
     }
     const { ok, statusText } = result;
     if (ok) {
@@ -358,6 +419,11 @@ export const action = async ({
   } catch (error) {
     console.error(error);
 
+    if (isManagedFormRequest) {
+      return getManagedFormFailure(
+        error instanceof Error ? error.message : "Unknown error"
+      );
+    }
     return {
       success: false,
       errors: [error instanceof Error ? error.message : "Unknown error"],

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

@@ -1,5 +1,5 @@
 import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
-import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
+import { isLocalResource, loadResources, getSystemSearch } from "@webstudio-is/sdk/runtime";
 import { authenticateRequest } from "@webstudio-is/wsauth";
 import { projectDomain } from "__CLIENT__";
 import { getPageMeta, getRemixParams, getResources } from "__SERVER__";
@@ -71,7 +71,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
 
   const system = {
     params,
-    search: Object.fromEntries(url.searchParams),
+    ...getSystemSearch(url.searchParams),
     origin: url.origin,
     pathname: url.pathname,
   };

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

@@ -1,6 +1,6 @@
 import { renderToString } from "react-dom/server";
 import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
-import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
+import { isLocalResource, loadResources, getSystemSearch } from "@webstudio-is/sdk/runtime";
 import { authenticateRequest } from "@webstudio-is/wsauth";
 import {
   ReactSdkContext,
@@ -79,7 +79,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
 
   const system = {
     params,
-    search: Object.fromEntries(url.searchParams),
+    ...getSystemSearch(url.searchParams),
     origin: url.origin,
     pathname: url.pathname,
   };

package/templates/defaults/package.json

@@ -13,14 +13,14 @@
     "@remix-run/node": "2.16.5",
     "@remix-run/react": "2.16.5",
     "@remix-run/server-runtime": "2.16.5",
-    "@webstudio-is/image": "0.304.0",
-    "@webstudio-is/react-sdk": "0.304.0",
-    "@webstudio-is/sdk": "0.304.0",
-    "@webstudio-is/sdk-components-react": "0.304.0",
-    "@webstudio-is/sdk-components-animation": "0.304.0",
-    "@webstudio-is/sdk-components-react-radix": "0.304.0",
-    "@webstudio-is/sdk-components-react-remix": "0.304.0",
-    "@webstudio-is/wsauth": "0.304.0",
+    "@webstudio-is/image": "0.306.0",
+    "@webstudio-is/react-sdk": "0.306.0",
+    "@webstudio-is/sdk": "0.306.0",
+    "@webstudio-is/sdk-components-react": "0.306.0",
+    "@webstudio-is/sdk-components-animation": "0.306.0",
+    "@webstudio-is/sdk-components-react-radix": "0.306.0",
+    "@webstudio-is/sdk-components-react-remix": "0.306.0",
+    "@webstudio-is/wsauth": "0.306.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

@@ -12,13 +12,25 @@ import {
 } from "react-router";
 import {
   isLocalResource,
-  loadResource,
   loadResources,
-  formIdFieldName,
-  formBotFieldName,
+  loadResourceWithEmail,
+  loadResourcesWithEmail,
+  getSystemSearch,
   cachedFetch,
 } from "@webstudio-is/sdk/runtime";
-import { authenticateRequest } from "@webstudio-is/wsauth";
+import {
+  handleManagedFormSubmission,
+  getManagedFormFailure,
+  readFormDataWithLimit,
+  type ManagedFormResponse,
+} from "@webstudio-is/sdk/form/server";
+import {
+  managedFormRequestParamName,
+  formIdFieldName,
+  managedFormIdFieldName,
+  formBotFieldName,
+} from "@webstudio-is/sdk/form";
+import { authenticateProjectRequest } from "@webstudio-is/wsauth";
 import {
   ReactSdkContext,
   PageSettingsMeta,
@@ -36,6 +48,8 @@ import {
 } from "__CLIENT__";
 import {
   getResources,
+  getManagedFormSubmissions,
+  getManagedFormResourceGraph,
   getPageMeta,
   getRemixParams,
   contactEmail,
@@ -45,26 +59,13 @@ import css from "__CSS__?url";
 import { sitemap } from "__SITEMAP__";
 import { authRoutes } from "__AUTH__";
 import { createGeneratedAssetResourceFetch } from "__ASSET_QUERY_RUNTIME__";
+import {
+  createManagedFormEmailSender,
+  createManagedFormResourceFetch,
+  validateManagedFormEmail,
+} from "__MANAGED_FORM_FETCH__";
 import { assetUrlsByPath } from "__ASSETS__";
 
-const authenticateProductionRequest = (request: Request) => {
-  const host =
-    request.headers.get("x-forwarded-host") ||
-    request.headers.get("host") ||
-    "";
-
-  const requestHost = host.split(":")[0];
-  if (
-    projectDomain !== undefined &&
-    (requestHost === projectDomain ||
-      requestHost.startsWith(`${projectDomain}.`))
-  ) {
-    return;
-  }
-
-  return authenticateRequest(request, authRoutes);
-};
-
 const customFetch: typeof fetch = (input, init) => {
   if (typeof input !== "string") {
     return cachedFetch(projectId, input, init);
@@ -99,7 +100,11 @@ const customFetch: typeof fetch = (input, init) => {
 };
 
 export const loader = async (arg: LoaderFunctionArgs) => {
-  const authRoute = authenticateProductionRequest(arg.request);
+  const authRoute = authenticateProjectRequest(
+    arg.request,
+    authRoutes,
+    projectDomain
+  );
 
   const url = new URL(arg.request.url);
   const host =
@@ -112,7 +117,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
   const params = getRemixParams(arg.params);
   const system = {
     params,
-    search: Object.fromEntries(url.searchParams),
+    ...getSystemSearch(url.searchParams),
     origin: url.origin,
     pathname: url.pathname,
   };
@@ -256,24 +261,66 @@ const getRequestHost = (request: Request): string =>
 export const action = async ({
   request,
   context,
+  params,
 }: ActionFunctionArgs): Promise<
-  { success: true } | { success: false; errors: string[] }
+  { success: true } | { success: false; errors: string[] } | ManagedFormResponse
 > => {
-  authenticateProductionRequest(request);
+  authenticateProjectRequest(request, authRoutes, projectDomain);
 
+  let isManagedFormRequest = false;
   try {
     const url = new URL(request.url);
-    url.host = getRequestHost(request);
-
-    const formData = await request.formData();
+    isManagedFormRequest =
+      url.searchParams.get(managedFormRequestParamName) === "1";
+    url.searchParams.delete(managedFormRequestParamName);
+    if (!isManagedFormRequest) {
+      url.host = getRequestHost(request);
+    }
+    const formData = isManagedFormRequest
+      ? await readFormDataWithLimit(request)
+      : await request.formData();
 
     const system = {
-      params: {},
-      search: {},
+      params: getRemixParams(params ?? {}),
+      ...getSystemSearch(url.searchParams),
       origin: url.origin,
       pathname: url.pathname,
     };
 
+    const managedFormIds = formData.getAll(managedFormIdFieldName);
+    if (!isManagedFormRequest && managedFormIds.length > 0) {
+      throw new Error("Invalid Form submission");
+    }
+    if (isManagedFormRequest) {
+      if (managedFormIds.length !== 1 || formData.has(formIdFieldName)) {
+        throw new Error("Invalid Form submission");
+      }
+      const protectedFetch = createManagedFormResourceFetch({
+        request,
+        context,
+        projectDomain,
+      });
+      return await handleManagedFormSubmission({
+        request,
+        formData,
+        url,
+        system,
+        configuration: (formId) => getManagedFormSubmissions().get(formId),
+        getGraph: getManagedFormResourceGraph,
+        createEmailSender: (formData) =>
+          createManagedFormEmailSender({ context, formData, projectId }),
+        validateEmail: validateManagedFormEmail,
+        resourceFetch: protectedFetch,
+        validateDestination: protectedFetch.validateDestination,
+        trustedIp:
+          typeof context === "object" &&
+          context !== null &&
+          "cloudflare" in context
+            ? request.headers.get("cf-connecting-ip") ?? undefined
+            : undefined,
+      });
+    }
+
     const resourceName = formData.get(formIdFieldName);
     const generatedResources = getResources({ system });
     const actionResource =
@@ -307,7 +354,7 @@ export const action = async ({
     formData.delete(formIdFieldName);
     formData.delete(formBotFieldName);
 
-    let result: Awaited<ReturnType<typeof loadResource>>;
+    let result: Awaited<ReturnType<typeof loadResourceWithEmail>>;
     if (actionResource === undefined) {
       if (contactEmail === undefined) {
         throw new Error("Contact email not found");
@@ -321,14 +368,14 @@ export const action = async ({
       if (resource === undefined) {
         throw Error("Resource not found");
       }
-      result = await loadResource(fetch, resource);
+      result = await loadResourceWithEmail(fetch, resource);
     } else {
       const actionFetch = await createGeneratedAssetResourceFetch({
         request,
         context,
         fallback: customFetch,
       });
-      const results = await loadResources(
+      const results = await loadResourcesWithEmail(
         actionFetch,
         {
           ...generatedResources.data,
@@ -347,7 +394,7 @@ export const action = async ({
       if (actionResult === undefined) {
         throw Error("Resource not found");
       }
-      result = actionResult as Awaited<ReturnType<typeof loadResource>>;
+      result = actionResult as Awaited<ReturnType<typeof loadResourceWithEmail>>;
     }
     const { ok, statusText } = result;
     if (ok) {
@@ -357,6 +404,11 @@ export const action = async ({
   } catch (error) {
     console.error(error);
 
+    if (isManagedFormRequest) {
+      return getManagedFormFailure(
+        error instanceof Error ? error.message : "Unknown error"
+      );
+    }
     return {
       success: false,
       errors: [error instanceof Error ? error.message : "Unknown error"],

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

@@ -1,30 +1,12 @@
 import { type LoaderFunctionArgs, redirect } from "react-router";
-import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
-import { authenticateRequest } from "@webstudio-is/wsauth";
+import { isLocalResource, loadResources, getSystemSearch } from "@webstudio-is/sdk/runtime";
+import { authenticateProjectRequest } from "@webstudio-is/wsauth";
 import { projectDomain } from "__CLIENT__";
 import { getPageMeta, getRemixParams, getResources } from "__SERVER__";
 import { sitemap } from "__SITEMAP__";
 import { authRoutes } from "__AUTH__";
 import { createGeneratedAssetResourceFetch } from "__ASSET_QUERY_RUNTIME__";
 
-const authenticateProductionRequest = (request: Request) => {
-  const host =
-    request.headers.get("x-forwarded-host") ||
-    request.headers.get("host") ||
-    "";
-
-  const requestHost = host.split(":")[0];
-  if (
-    projectDomain !== undefined &&
-    (requestHost === projectDomain ||
-      requestHost.startsWith(`${projectDomain}.`))
-  ) {
-    return;
-  }
-
-  return authenticateRequest(request, authRoutes);
-};
-
 const customFetch: typeof fetch = (input, init) => {
   if (typeof input !== "string") {
     return fetch(input, init);
@@ -57,7 +39,11 @@ const customFetch: typeof fetch = (input, init) => {
 };
 
 export const loader = async (arg: LoaderFunctionArgs) => {
-  const authRoute = authenticateProductionRequest(arg.request);
+  const authRoute = authenticateProjectRequest(
+    arg.request,
+    authRoutes,
+    projectDomain
+  );
 
   const url = new URL(arg.request.url);
   const host =
@@ -71,7 +57,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
 
   const system = {
     params,
-    search: Object.fromEntries(url.searchParams),
+    ...getSystemSearch(url.searchParams),
     origin: url.origin,
     pathname: url.pathname,
   };

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

@@ -1,7 +1,7 @@
 import { renderToString } from "react-dom/server";
 import { type LoaderFunctionArgs, redirect } from "react-router";
-import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
-import { authenticateRequest } from "@webstudio-is/wsauth";
+import { isLocalResource, loadResources, getSystemSearch } from "@webstudio-is/sdk/runtime";
+import { authenticateProjectRequest } from "@webstudio-is/wsauth";
 import {
   ReactSdkContext,
   xmlNodeTagSuffix,
@@ -13,24 +13,6 @@ import { sitemap } from "__SITEMAP__";
 import { authRoutes } from "__AUTH__";
 import { createGeneratedAssetResourceFetch } from "__ASSET_QUERY_RUNTIME__";
 
-const authenticateProductionRequest = (request: Request) => {
-  const host =
-    request.headers.get("x-forwarded-host") ||
-    request.headers.get("host") ||
-    "";
-
-  const requestHost = host.split(":")[0];
-  if (
-    projectDomain !== undefined &&
-    (requestHost === projectDomain ||
-      requestHost.startsWith(`${projectDomain}.`))
-  ) {
-    return;
-  }
-
-  return authenticateRequest(request, authRoutes);
-};
-
 const customFetch: typeof fetch = (input, init) => {
   if (typeof input !== "string") {
     return fetch(input, init);
@@ -65,7 +47,11 @@ const customFetch: typeof fetch = (input, init) => {
 };
 
 export const loader = async (arg: LoaderFunctionArgs) => {
-  const authRoute = authenticateProductionRequest(arg.request);
+  const authRoute = authenticateProjectRequest(
+    arg.request,
+    authRoutes,
+    projectDomain
+  );
 
   const url = new URL(arg.request.url);
   const host =
@@ -79,7 +65,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
 
   const system = {
     params,
-    search: Object.fromEntries(url.searchParams),
+    ...getSystemSearch(url.searchParams),
     origin: url.origin,
     pathname: url.pathname,
   };

package/templates/react-router/package.json

@@ -15,14 +15,14 @@
     "@react-router/fs-routes": "^7.5.3",
     "@react-router/node": "^7.5.3",
     "@react-router/serve": "^7.5.3",
-    "@webstudio-is/image": "0.304.0",
-    "@webstudio-is/react-sdk": "0.304.0",
-    "@webstudio-is/sdk": "0.304.0",
-    "@webstudio-is/sdk-components-animation": "0.304.0",
-    "@webstudio-is/sdk-components-react-radix": "0.304.0",
-    "@webstudio-is/sdk-components-react-router": "0.304.0",
-    "@webstudio-is/sdk-components-react": "0.304.0",
-    "@webstudio-is/wsauth": "0.304.0",
+    "@webstudio-is/image": "0.306.0",
+    "@webstudio-is/react-sdk": "0.306.0",
+    "@webstudio-is/sdk": "0.306.0",
+    "@webstudio-is/sdk-components-animation": "0.306.0",
+    "@webstudio-is/sdk-components-react-radix": "0.306.0",
+    "@webstudio-is/sdk-components-react-router": "0.306.0",
+    "@webstudio-is/sdk-components-react": "0.306.0",
+    "@webstudio-is/wsauth": "0.306.0",
     "isbot": "^5.1.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",