webstudio 0.267.0 → 0.268.0

package/lib/cli.js

@@ -374,7 +374,7 @@ const getApiCompatibilityPayload = (value) => {
   return findPayload(value, /* @__PURE__ */ new WeakSet());
 };
 const name = "webstudio";
-const version = "0.267.0";
+const version = "0.268.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";
@@ -386,7 +386,7 @@ const scripts = { "typecheck": "tsgo --noEmit", "build": "rm -rf lib && vite bui
 const license = "AGPL-3.0-or-later";
 const engines = { "node": ">=22" };
 const dependencies = { "@clack/prompts": "^0.10.0", "@emotion/hash": "^0.9.2", "@trpc/client": "^10.45.2", "@webstudio-is/project-migrations": "workspace:*", "@webstudio-is/trpc-interface": "workspace:*", "acorn": "^8.14.1", "acorn-walk": "^8.3.4", "change-case": "^5.4.4", "deepmerge": "^4.3.1", "env-paths": "^3.0.0", "nanoid": "^5.1.5", "p-limit": "^6.2.0", "parse5": "7.3.0", "picocolors": "^1.1.1", "reserved-identifiers": "^1.0.0", "tinyexec": "^0.3.2", "warn-once": "^0.1.1", "yargs": "^17.7.2", "zod": "^3.24.2" };
-const devDependencies = { "@cloudflare/vite-plugin": "^1.1.0", "@netlify/vite-plugin-react-router": "^1.0.1", "@react-router/dev": "^7.5.3", "@react-router/fs-routes": "^7.5.3", "@remix-run/cloudflare": "^2.16.5", "@remix-run/cloudflare-pages": "^2.16.5", "@remix-run/dev": "^2.16.5", "@remix-run/node": "^2.16.5", "@remix-run/react": "^2.16.5", "@remix-run/server-runtime": "^2.16.5", "@types/react": "^18.2.70", "@types/react-dom": "^18.2.25", "@types/yargs": "^17.0.33", "@vercel/react-router": "^1.1.0", "@vitejs/plugin-react": "^4.4.1", "@webstudio-is/css-engine": "workspace:*", "@webstudio-is/http-client": "workspace:*", "@webstudio-is/image": "workspace:*", "@webstudio-is/react-sdk": "workspace:*", "@webstudio-is/sdk": "workspace:*", "@webstudio-is/sdk-components-animation": "workspace:*", "@webstudio-is/sdk-components-react": "workspace:*", "@webstudio-is/sdk-components-react-radix": "workspace:*", "@webstudio-is/sdk-components-react-remix": "workspace:*", "@webstudio-is/sdk-components-react-router": "workspace:*", "@webstudio-is/tsconfig": "workspace:*", "h3": "^1.15.1", "ipx": "^3.0.3", "isbot": "^5.1.25", "prettier": "3.5.3", "react": "18.3.0-canary-14898b6a9-20240318", "react-dom": "18.3.0-canary-14898b6a9-20240318", "react-router": "^7.5.3", "ts-expect": "^1.3.0", "vike": "^0.4.229", "vite": "^6.3.4", "vitest": "^3.1.2", "wrangler": "^3.63.2" };
+const devDependencies = { "@cloudflare/vite-plugin": "^1.1.0", "@netlify/vite-plugin-react-router": "^1.0.1", "@react-router/dev": "^7.5.3", "@react-router/fs-routes": "^7.5.3", "@remix-run/cloudflare": "^2.16.5", "@remix-run/cloudflare-pages": "^2.16.5", "@remix-run/dev": "^2.16.5", "@remix-run/node": "^2.16.5", "@remix-run/react": "^2.16.5", "@remix-run/server-runtime": "^2.16.5", "@types/react": "^18.2.70", "@types/react-dom": "^18.2.25", "@types/yargs": "^17.0.33", "@vercel/react-router": "^1.1.0", "@vitejs/plugin-react": "^4.4.1", "@webstudio-is/css-engine": "workspace:*", "@webstudio-is/http-client": "workspace:*", "@webstudio-is/image": "workspace:*", "@webstudio-is/react-sdk": "workspace:*", "@webstudio-is/sdk": "workspace:*", "@webstudio-is/sdk-components-animation": "workspace:*", "@webstudio-is/sdk-components-react": "workspace:*", "@webstudio-is/sdk-components-react-radix": "workspace:*", "@webstudio-is/sdk-components-react-remix": "workspace:*", "@webstudio-is/sdk-components-react-router": "workspace:*", "@webstudio-is/tsconfig": "workspace:*", "@webstudio-is/wsauth": "workspace:*", "h3": "^1.15.1", "ipx": "^3.0.3", "isbot": "^5.1.25", "prettier": "3.5.3", "react": "18.3.0-canary-14898b6a9-20240318", "react-dom": "18.3.0-canary-14898b6a9-20240318", "react-router": "^7.5.3", "ts-expect": "^1.3.0", "vike": "^0.4.229", "vite": "^6.3.4", "vitest": "^3.1.2", "wrangler": "^3.63.2" };
 const packageJson = {
   name,
   version,
@@ -892,6 +892,293 @@ new Map(
     return weightData.names.map((name2) => [name2, weight]);
   }).flat()
 );
+var basicLoginErrors = (login) => {
+  const issues = [];
+  if (login.length === 0) {
+    issues.push({ path: ["login"], message: "Login is required" });
+  }
+  if (login.includes(":")) {
+    issues.push({ path: ["login"], message: "Login can't contain a colon" });
+  }
+  if (/\s/.test(login)) {
+    issues.push({
+      path: ["login"],
+      message: "Login can't contain whitespace"
+    });
+  }
+  return issues;
+};
+var basicPasswordErrors = (password) => {
+  const issues = [];
+  if (password.length === 0) {
+    issues.push({ path: ["password"], message: "Password is required" });
+  }
+  if (/\s/.test(password)) {
+    issues.push({
+      path: ["password"],
+      message: "Password can't contain whitespace"
+    });
+  }
+  return issues;
+};
+var validateBasicAuth = ({
+  login,
+  password
+}) => {
+  const issues = [...basicLoginErrors(login), ...basicPasswordErrors(password)];
+  if (issues.length > 0) {
+    const loginErrors = issues.filter((issue) => issue.path[0] === "login").map((issue) => issue.message);
+    const passwordErrors = issues.filter((issue) => issue.path[0] === "password").map((issue) => issue.message);
+    return {
+      issues,
+      errors: {
+        login: loginErrors.length > 0 ? loginErrors : void 0,
+        password: passwordErrors.length > 0 ? passwordErrors : void 0
+      }
+    };
+  }
+  return {
+    auth: {
+      method: "basic",
+      login,
+      password,
+      credentials: `${login}:${password}`
+    }
+  };
+};
+var createBasicAuthRoute = ({
+  route,
+  login,
+  password
+}) => {
+  const routeError = validateWsAuthRoute(route);
+  if (routeError) {
+    throw new Error(routeError);
+  }
+  const auth = validateBasicAuth({ login, password }).auth;
+  if (auth === void 0) {
+    throw new Error(
+      'Basic auth requires non-empty login and password; login cannot contain ":" and neither field can contain whitespace'
+    );
+  }
+  return { route, auth };
+};
+var createWsAuthRouteFromPage = ({
+  route,
+  auth
+}) => {
+  if (auth === void 0) {
+    return;
+  }
+  if ("method" in auth && auth.method !== "basic" || "type" in auth && auth.type !== "basic") {
+    throw new Error(`Unsupported auth method for route "${route}"`);
+  }
+  return createBasicAuthRoute({
+    route,
+    login: auth.login,
+    password: auth.password
+  });
+};
+var isRecord = (value) => {
+  return typeof value === "object" && value !== null && Array.isArray(value) === false;
+};
+var parameterSegment = /^:\w+[?*]?$/;
+var validateWsAuthRoute = (route) => {
+  if (route.startsWith("/") === false) {
+    return 'Route must start with "/"';
+  }
+  if (route === "/") {
+    return;
+  }
+  if (route !== "/" && route.endsWith("/")) {
+    return 'Route must not end with "/"';
+  }
+  if (route.includes("//")) {
+    return 'Route must not contain repeating "/"';
+  }
+  const segments = route.slice(1).split("/");
+  for (let index = 0; index < segments.length; index += 1) {
+    const segment = segments[index];
+    if (segment === void 0 || segment === "") {
+      return "Route contains an empty segment";
+    }
+    if (segment === "*" || /^:\w+\*$/.test(segment)) {
+      if (index !== segments.length - 1) {
+        return "Wildcard route segment must be the last segment";
+      }
+      continue;
+    }
+    if (segment.startsWith(":") && parameterSegment.test(segment) === false) {
+      return `Invalid route parameter "${segment}"`;
+    }
+    if (segment.includes("*")) {
+      return "Wildcard can only be used as * or :name*";
+    }
+  }
+};
+var parseJson = (content, errors) => {
+  if (content.trim() === "") {
+    return { version: 1, routes: {} };
+  }
+  try {
+    return JSON.parse(content);
+  } catch (error) {
+    errors.push({
+      path: "$",
+      message: error instanceof Error ? error.message : "Invalid JSON"
+    });
+  }
+};
+var parseWsAuth = (content) => {
+  const routes = [];
+  const errors = [];
+  const json = parseJson(content, errors);
+  if (json === void 0) {
+    return { routes, errors };
+  }
+  if (isRecord(json) === false) {
+    errors.push({ path: "$", message: "Auth config must be an object" });
+    return { routes, errors };
+  }
+  if (json.version !== 1) {
+    errors.push({ path: "version", message: "Version must be 1" });
+  }
+  if (isRecord(json.routes) === false) {
+    errors.push({ path: "routes", message: "Routes must be an object" });
+    return { routes, errors };
+  }
+  for (const [route, authInput] of Object.entries(json.routes)) {
+    const routeError = validateWsAuthRoute(route);
+    if (routeError) {
+      errors.push({
+        path: `routes.${JSON.stringify(route)}`,
+        message: routeError
+      });
+      continue;
+    }
+    if (isRecord(authInput) === false) {
+      errors.push({
+        path: `routes.${JSON.stringify(route)}`,
+        message: "Auth rule must be an object"
+      });
+      continue;
+    }
+    if (authInput.method !== "basic") {
+      errors.push({
+        path: `routes.${JSON.stringify(route)}.method`,
+        message: 'Auth method must be "basic"'
+      });
+      continue;
+    }
+    const login = authInput.login;
+    const password = authInput.password;
+    if (typeof login !== "string") {
+      errors.push({
+        path: `routes.${JSON.stringify(route)}.login`,
+        message: "Login must be a string"
+      });
+      continue;
+    }
+    if (typeof password !== "string") {
+      errors.push({
+        path: `routes.${JSON.stringify(route)}.password`,
+        message: "Password must be a string"
+      });
+      continue;
+    }
+    const validation = validateBasicAuth({ login, password });
+    if (validation.auth === void 0) {
+      for (const issue of validation.issues ?? []) {
+        errors.push({
+          path: `routes.${JSON.stringify(route)}.${issue.path[0]}`,
+          message: issue.message
+        });
+      }
+      continue;
+    }
+    const auth = validation.auth;
+    routes.push({ route, auth });
+  }
+  return { routes, errors };
+};
+var parseWsAuthOrThrow = (content, sourceName) => {
+  const result = parseWsAuth(content);
+  if (result.errors.length > 0) {
+    const message = result.errors.map((error) => `${sourceName}:${error.path} ${error.message}`).join("\n");
+    throw new Error(message);
+  }
+  return result.routes;
+};
+var serializeWsAuth = (routes) => {
+  const config = { version: 1, routes: {} };
+  for (const { route, auth } of routes) {
+    switch (auth.method) {
+      case "basic":
+        config.routes[route] = {
+          method: "basic",
+          login: auth.login,
+          password: auth.password
+        };
+        break;
+    }
+  }
+  return `${JSON.stringify(config, null, 2)}
+`;
+};
+var collectWsAuthRoutes = (sources) => {
+  return sources.flatMap((source) => {
+    if ("content" in source) {
+      return parseWsAuthOrThrow(source.content, source.name);
+    }
+    return source.routes;
+  });
+};
+var buildWsAuth = (sources) => {
+  const content = serializeWsAuth(collectWsAuthRoutes(sources));
+  const routes = parseWsAuthOrThrow(content, "Serialized auth config");
+  return {
+    routes,
+    content
+  };
+};
+var createWsAuthResources = ({
+  projectContent = "",
+  pages,
+  projectSourceName = "Auth",
+  generatedSourceName = "Generated page auth"
+}) => {
+  const generatedRoutes = pages.flatMap((page) => {
+    const route = createWsAuthRouteFromPage(page);
+    return route === void 0 ? [] : [route];
+  });
+  const result = buildWsAuth([
+    { name: projectSourceName, content: projectContent },
+    { name: generatedSourceName, routes: generatedRoutes }
+  ]);
+  console.info("[wsauth] create resources", {
+    projectContentLength: projectContent.length,
+    projectContent,
+    pageCount: pages.length,
+    pages,
+    generatedRouteCount: generatedRoutes.length,
+    generatedRoutes,
+    routeCount: result.routes.length,
+    routes: result.routes
+  });
+  return {
+    ...result,
+    module: [
+      `import type { WsAuthRoute } from "@webstudio-is/wsauth";`,
+      "",
+      `export const authRoutes: WsAuthRoute[] = ${JSON.stringify(
+        result.routes,
+        null,
+        2
+      )};`,
+      ""
+    ].join("\n")
+  };
+};
 function dot3(a2, b2) {
   return a2[0] * b2[0] + a2[1] * b2[1] + a2[2] * b2[2];
 }
@@ -2687,8 +2974,19 @@ const oklch = new ColorSpace({
     }
   }
 });
+var isKeyword = (value, keyword) => {
+  if (value.type === "keyword") {
+    return value.value === keyword;
+  }
+  if (value.type === "layers") {
+    return value.value.some((layer) => isKeyword(layer, keyword));
+  }
+  return false;
+};
 var prefixStyles = (styleMap) => {
   const newStyleMap = /* @__PURE__ */ new Map();
+  const backgroundClip = styleMap.get("background-clip");
+  const hasTextBackgroundClip = backgroundClip !== void 0 && isKeyword(backgroundClip, "text");
   for (const [property, value] of styleMap) {
     if (property === "background-clip") {
       newStyleMap.set("-webkit-background-clip", value);
@@ -2702,6 +3000,9 @@ var prefixStyles = (styleMap) => {
     if (property === "backdrop-filter") {
       newStyleMap.set("-webkit-backdrop-filter", value);
     }
+    if (property === "color" && hasTextBackgroundClip && isKeyword(value, "transparent")) {
+      newStyleMap.set("-webkit-text-fill-color", value);
+    }
     if (property === "view-timeline-name" || property === "scroll-timeline-name" || property === "view-timeline-inset") {
       newStyleMap.set(`--${property}`, value);
     }
@@ -3807,7 +4108,36 @@ var PageTitle = z.string().refine(
   (val) => val.length >= MIN_TITLE_LENGTH,
   `Minimum ${MIN_TITLE_LENGTH} characters required`
 );
-var documentTypes = ["html", "xml"];
+var documentTypes = ["html", "xml", "text"];
+var BasicAuthFields = {
+  login: z.string(),
+  password: z.string()
+};
+var validateBasicAuthFields = ({
+  login,
+  password
+}, context) => {
+  for (const issue of validateBasicAuth({ login, password }).issues ?? []) {
+    context.addIssue({
+      code: z.ZodIssueCode.custom,
+      path: issue.path,
+      message: issue.message
+    });
+  }
+};
+var PageBasicAuth = z.object({
+  method: z.literal("basic"),
+  ...BasicAuthFields
+}).superRefine(validateBasicAuthFields);
+var LegacyPageBasicAuth = z.object({
+  type: z.literal("basic"),
+  ...BasicAuthFields
+}).superRefine(validateBasicAuthFields).transform(({ login, password }) => ({
+  method: "basic",
+  login,
+  password
+}));
+var PageAuth = z.union([PageBasicAuth, LegacyPageBasicAuth]);
 var commonPageFields = {
   id: PageId,
   name: PageName,
@@ -3825,6 +4155,8 @@ var commonPageFields = {
     status: z.string().optional(),
     redirect: z.string().optional(),
     documentType: z.optional(z.enum(documentTypes)),
+    content: z.string().optional(),
+    auth: PageAuth.optional(),
     custom: z.array(
       z.object({
         property: z.string(),
@@ -3880,7 +4212,8 @@ var ProjectMeta = z.object({
   siteName: z.string().optional(),
   contactEmail: z.string().optional(),
   faviconAssetId: z.string().optional(),
-  code: z.string().optional()
+  code: z.string().optional(),
+  auth: z.string().optional()
 });
 var ProjectNewRedirectPath = z.string().min(1, "Path is required").refine((data) => {
   try {
@@ -4697,6 +5030,7 @@ var componentCategories = [
   "localization",
   "radix",
   "xml",
+  "text",
   "other",
   "hidden",
   "internal"
@@ -5624,6 +5958,31 @@ var systemParameter = {
   type: "parameter",
   name: "system"
 };
+var stringMethodReturnKindByName = /* @__PURE__ */ new Map([
+  ["toLowerCase", "string"],
+  ["replace", "string"],
+  ["split", "array"],
+  ["slice", "string"],
+  ["at", "unknown"],
+  ["endsWith", "boolean"],
+  ["includes", "boolean"],
+  ["startsWith", "boolean"],
+  ["toString", "string"],
+  ["toUpperCase", "string"],
+  ["toLocaleLowerCase", "string"],
+  ["toLocaleUpperCase", "string"]
+]);
+var arrayMethodReturnKindByName = /* @__PURE__ */ new Map([
+  ["at", "unknown"],
+  ["includes", "boolean"],
+  ["join", "string"],
+  ["slice", "array"],
+  ["toString", "string"]
+]);
+new Set(
+  stringMethodReturnKindByName.keys()
+);
+new Set(arrayMethodReturnKindByName.keys());
 var transpileExpression = ({
   expression,
   executable = false,
@@ -6063,6 +6422,12 @@ var generatePageMeta = ({
     usedDataSources,
     scope: localScope
   });
+  const contentExpression = generateExpression({
+    expression: page.meta.content ?? "undefined",
+    dataSources,
+    usedDataSources,
+    scope: localScope
+  });
   let customExpression = "";
   customExpression += `[
 `;
@@ -6071,7 +6436,7 @@ var generatePageMeta = ({
       continue;
     }
     const propertyExpression = JSON.stringify(customMeta.property);
-    const contentExpression = generateExpression({
+    const contentExpression2 = generateExpression({
       expression: customMeta.content,
       dataSources,
       usedDataSources,
@@ -6081,7 +6446,7 @@ var generatePageMeta = ({
 `;
     customExpression += `        property: ${propertyExpression},
 `;
-    customExpression += `        content: ${contentExpression},
+    customExpression += `        content: ${contentExpression2},
 `;
     customExpression += `      },
 `;
@@ -6146,6 +6511,8 @@ var generatePageMeta = ({
   generated += `    status: ${statusExpression},
 `;
   generated += `    redirect: ${redirectExpression},
+`;
+  generated += `    content: ${contentExpression},
 `;
   generated += `    custom: ${customExpression},
 `;
@@ -10547,6 +10914,10 @@ const createFramework$2 = async () => {
     join(routeTemplatesDir, "xml.tsx"),
     "utf8"
   );
+  const textTemplate = await readFile(
+    join(routeTemplatesDir, "text.tsx"),
+    "utf8"
+  );
   const defaultSitemapTemplate = await readFile(
     join(routeTemplatesDir, "default-sitemap.tsx"),
     "utf8"
@@ -10600,6 +10971,12 @@ const createFramework$2 = async () => {
         template: xmlTemplate
       }
     ],
+    text: ({ pagePath }) => [
+      {
+        file: join("app", "routes", `${generateRemixRoute(pagePath)}.tsx`),
+        template: textTemplate
+      }
+    ],
     redirect: ({ pagePath }) => [
       {
         file: join("app", "routes", `${generateRemixRoute(pagePath)}.ts`),
@@ -10628,6 +11005,10 @@ const createFramework$1 = async () => {
     join(routeTemplatesDir, "xml.tsx"),
     "utf8"
   );
+  const textTemplate = await readFile(
+    join(routeTemplatesDir, "text.tsx"),
+    "utf8"
+  );
   const defaultSitemapTemplate = await readFile(
     join(routeTemplatesDir, "default-sitemap.tsx"),
     "utf8"
@@ -10681,6 +11062,12 @@ const createFramework$1 = async () => {
         template: xmlTemplate
       }
     ],
+    text: ({ pagePath }) => [
+      {
+        file: join("app", "routes", `${generateRemixRoute(pagePath)}.tsx`),
+        template: textTemplate
+      }
+    ],
     redirect: ({ pagePath }) => [
       {
         file: join("app", "routes", `${generateRemixRoute(pagePath)}.ts`),
@@ -10765,11 +11152,13 @@ const createFramework = async () => {
       ];
     },
     xml: () => [],
+    text: () => [],
     redirect: () => [],
     defaultSitemap: () => []
   };
 };
 const limit = pLimit(10);
+const wsAuthFile = ".webstudio/auth.json";
 const downloadAsset = async (url, name2, assetBaseUrl) => {
   const assetPath = join("public", assetBaseUrl, name2);
   const tempAssetPath = `${assetPath}.tmp`;
@@ -10813,6 +11202,40 @@ const mergeJsonInto = async (sourcePath, destinationPath) => {
   );
   await writeFile(destinationPath, content, "utf8");
 };
+const writeWsAuthResources = async (generatedDir, pages) => {
+  var _a2, _b2, _c2, _d2;
+  console.info("[wsauth] prebuild create auth config", {
+    file: wsAuthFile,
+    projectAuthContentLength: ((_b2 = (_a2 = pages.meta) == null ? void 0 : _a2.auth) == null ? void 0 : _b2.length) ?? 0,
+    projectAuthContent: (_c2 = pages.meta) == null ? void 0 : _c2.auth,
+    pages: getAllPages(pages).map((page) => ({
+      id: page.id,
+      name: page.name,
+      route: getPagePath(page.id, pages),
+      auth: page.meta.auth
+    }))
+  });
+  const { content, module } = createWsAuthResources({
+    projectContent: (_d2 = pages.meta) == null ? void 0 : _d2.auth,
+    pages: getAllPages(pages).map((page) => ({
+      route: getPagePath(page.id, pages),
+      auth: page.meta.auth
+    }))
+  });
+  console.info("[wsauth] prebuild write auth config", {
+    file: wsAuthFile,
+    contentLength: content.length,
+    content,
+    generatedModulePath: join(generatedDir, "$resources.wsauth.server.ts"),
+    generatedModule: module
+  });
+  await createFolderIfNotExists(dirname(wsAuthFile));
+  await writeFile(wsAuthFile, content);
+  await createFileIfNotExists(
+    join(generatedDir, "$resources.wsauth.server.ts"),
+    module
+  );
+};
 const isCliTemplate = async (template) => {
   const currentPath = fileURLToPath(new URL(import.meta.url));
   const templatesPath = normalize(
@@ -10913,6 +11336,7 @@ Please check webstudio --help for more details`
   );
   const pages = migratePages(siteData.build.pages);
   const allPages = getAllPages(pages);
+  await writeWsAuthResources(generatedDir, pages);
   const siteDataByPage = {};
   const fontAssetsByPage = {};
   const backgroundImageAssetsByPage = {};
@@ -11149,6 +11573,8 @@ Please check webstudio --help for more details`
 
       export const projectId = "${siteData.build.projectId}";
 
+      export const projectDomain = ${JSON.stringify(siteData.projectDomain)};
+
       export const lastPublished = "${new Date(siteData.build.createdAt).toISOString()}";
 
       export const siteName = ${JSON.stringify(projectMeta == null ? void 0 : projectMeta.siteName)};
@@ -11221,7 +11647,7 @@ Please check webstudio --help for more details`
     await createFileIfNotExists(clientFile, pageExports);
     const serverFile = join(generatedDir, `${generatedBasename}.server.tsx`);
     await createFileIfNotExists(serverFile, serverExports);
-    const getTemplates = documentType === "html" ? framework.html : framework.xml;
+    const getTemplates = framework[documentType];
     for (const { file, template } of getTemplates({ pagePath })) {
       const content = template.replaceAll("__CONSTANTS__", importFrom("./app/constants.mjs", file)).replaceAll(
         "__SITEMAP__",
@@ -11229,6 +11655,9 @@ Please check webstudio --help for more details`
       ).replaceAll(
         "__ASSETS__",
         importFrom(`./app/__generated__/$resources.assets`, file)
+      ).replaceAll(
+        "__AUTH__",
+        importFrom(`./app/__generated__/$resources.wsauth.server`, file)
       ).replaceAll(
         "__CLIENT__",
         importFrom(`./app/__generated__/${generatedBasename}`, file)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.267.0",
+  "version": "0.268.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -43,8 +43,8 @@
     "warn-once": "^0.1.1",
     "yargs": "^17.7.2",
     "zod": "^3.24.2",
-    "@webstudio-is/project-migrations": "0.267.0",
-    "@webstudio-is/trpc-interface": "0.267.0"
+    "@webstudio-is/trpc-interface": "0.268.0",
+    "@webstudio-is/project-migrations": "0.268.0"
   },
   "devDependencies": {
     "@cloudflare/vite-plugin": "^1.1.0",
@@ -74,16 +74,17 @@
     "vite": "^6.3.4",
     "vitest": "^3.1.2",
     "wrangler": "^3.63.2",
-    "@webstudio-is/css-engine": "0.267.0",
-    "@webstudio-is/http-client": "0.267.0",
-    "@webstudio-is/react-sdk": "0.267.0",
-    "@webstudio-is/image": "0.267.0",
-    "@webstudio-is/sdk": "0.267.0",
-    "@webstudio-is/sdk-components-animation": "0.267.0",
-    "@webstudio-is/sdk-components-react": "0.267.0",
-    "@webstudio-is/sdk-components-react-radix": "0.267.0",
-    "@webstudio-is/sdk-components-react-router": "0.267.0",
-    "@webstudio-is/sdk-components-react-remix": "0.267.0",
+    "@webstudio-is/css-engine": "0.268.0",
+    "@webstudio-is/http-client": "0.268.0",
+    "@webstudio-is/image": "0.268.0",
+    "@webstudio-is/react-sdk": "0.268.0",
+    "@webstudio-is/sdk": "0.268.0",
+    "@webstudio-is/sdk-components-animation": "0.268.0",
+    "@webstudio-is/sdk-components-react-radix": "0.268.0",
+    "@webstudio-is/sdk-components-react-remix": "0.268.0",
+    "@webstudio-is/sdk-components-react-router": "0.268.0",
+    "@webstudio-is/sdk-components-react": "0.268.0",
+    "@webstudio-is/wsauth": "0.268.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {

package/templates/cloudflare/package.json

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

package/templates/defaults/app/root.tsx

@@ -1,10 +1,19 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 
 import { Links, Meta, Outlet, useMatches } from "@remix-run/react";
+import type { HeadersFunction } from "@remix-run/server-runtime";
 // @todo think about how to make __generated__ typeable
 // @ts-ignore
 import { CustomCode, projectId, lastPublished } from "./__generated__/_index";
 
+export const headers: HeadersFunction = ({ errorHeaders }) => {
+  if (errorHeaders) {
+    return errorHeaders;
+  }
+
+  return {};
+};
+
 const Root = () => {
   // Get language from matches
   const matches = useMatches();

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

@@ -17,6 +17,7 @@ import {
   formIdFieldName,
   formBotFieldName,
 } from "@webstudio-is/sdk/runtime";
+import { authenticateRequest } from "@webstudio-is/wsauth";
 import {
   ReactSdkContext,
   PageSettingsMeta,
@@ -25,6 +26,7 @@ import {
 } from "@webstudio-is/react-sdk/runtime";
 import {
   projectId,
+  projectDomain,
   Page,
   siteName,
   favIconAsset,
@@ -42,6 +44,25 @@ import * as constants from "__CONSTANTS__";
 import css from "__CSS__?url";
 import { sitemap } from "__SITEMAP__";
 import { assets } from "__ASSETS__";
+import { authRoutes } from "__AUTH__";
+
+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") {
@@ -83,6 +104,8 @@ const customFetch: typeof fetch = (input, init) => {
 };
 
 export const loader = async (arg: LoaderFunctionArgs) => {
+  const authRoute = authenticateProductionRequest(arg.request);
+
   const url = new URL(arg.request.url);
   const host =
     arg.request.headers.get("x-forwarded-host") ||
@@ -133,13 +156,18 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     {
       status: pageMeta.status,
       headers: {
-        "Cache-Control": "public, max-age=600",
+        "Cache-Control":
+          authRoute === undefined ? "public, max-age=600" : "private, no-store",
       },
     }
   );
 };
 
-export const headers: HeadersFunction = () => {
+export const headers: HeadersFunction = ({ errorHeaders }) => {
+  if (errorHeaders) {
+    return errorHeaders;
+  }
+
   return {
     "Cache-Control": "public, max-age=0, must-revalidate",
   };
@@ -220,6 +248,8 @@ export const action = async ({
 }: ActionFunctionArgs): Promise<
   { success: true } | { success: false; errors: string[] }
 > => {
+  authenticateProductionRequest(request);
+
   try {
     const url = new URL(request.url);
     url.host = getRequestHost(request);

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

@@ -0,0 +1,107 @@
+import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
+import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
+import { authenticateRequest } from "@webstudio-is/wsauth";
+import { projectDomain } from "__CLIENT__";
+import { getPageMeta, getRemixParams, getResources } from "__SERVER__";
+import { sitemap } from "__SITEMAP__";
+import { assets } from "__ASSETS__";
+import { authRoutes } from "__AUTH__";
+
+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);
+  }
+
+  if (isLocalResource(input, "sitemap.xml")) {
+    const response = new Response(JSON.stringify(sitemap));
+    response.headers.set("content-type", "application/json; charset=utf-8");
+    return Promise.resolve(response);
+  }
+
+  if (isLocalResource(input, "current-date")) {
+    const now = new Date();
+    const startOfDay = new Date(
+      Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())
+    );
+    const data = {
+      iso: startOfDay.toISOString(),
+      year: startOfDay.getUTCFullYear(),
+      month: startOfDay.getUTCMonth() + 1,
+      day: startOfDay.getUTCDate(),
+      timestamp: startOfDay.getTime(),
+    };
+    const response = new Response(JSON.stringify(data));
+    response.headers.set("content-type", "application/json; charset=utf-8");
+    return Promise.resolve(response);
+  }
+
+  if (isLocalResource(input, "assets")) {
+    const response = new Response(JSON.stringify(assets));
+    response.headers.set("content-type", "application/json; charset=utf-8");
+    return Promise.resolve(response);
+  }
+
+  return fetch(input, init);
+};
+
+export const loader = async (arg: LoaderFunctionArgs) => {
+  const authRoute = authenticateProductionRequest(arg.request);
+
+  const url = new URL(arg.request.url);
+  const host =
+    arg.request.headers.get("x-forwarded-host") ||
+    arg.request.headers.get("host") ||
+    "";
+  url.host = host;
+  url.protocol = "https";
+
+  const params = getRemixParams(arg.params);
+
+  const system = {
+    params,
+    search: Object.fromEntries(url.searchParams),
+    origin: url.origin,
+    pathname: url.pathname,
+  };
+
+  const resources = await loadResources(
+    customFetch,
+    getResources({ system }).data
+  );
+  const pageMeta = getPageMeta({ system, resources });
+
+  if (pageMeta.redirect) {
+    const status =
+      pageMeta.status === 301 || pageMeta.status === 302
+        ? pageMeta.status
+        : 302;
+    return redirect(pageMeta.redirect, status);
+  }
+
+  return new Response(pageMeta.content ?? "", {
+    status: pageMeta.status,
+    headers: {
+      "Content-Type": "text/plain; charset=utf-8",
+      "Cache-Control":
+        authRoute === undefined ? "public, max-age=600" : "private, no-store",
+    },
+  });
+};

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

@@ -1,15 +1,35 @@
 import { renderToString } from "react-dom/server";
 import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
 import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
+import { authenticateRequest } from "@webstudio-is/wsauth";
 import {
   ReactSdkContext,
   xmlNodeTagSuffix,
 } from "@webstudio-is/react-sdk/runtime";
-import { Page, breakpoints } from "__CLIENT__";
+import { Page, breakpoints, projectDomain } from "__CLIENT__";
 import { getPageMeta, getRemixParams, getResources } from "__SERVER__";
 import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
 import { sitemap } from "__SITEMAP__";
 import { assets } from "__ASSETS__";
+import { authRoutes } from "__AUTH__";
+
+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") {
@@ -51,6 +71,8 @@ const customFetch: typeof fetch = (input, init) => {
 };
 
 export const loader = async (arg: LoaderFunctionArgs) => {
+  const authRoute = authenticateProductionRequest(arg.request);
+
   const url = new URL(arg.request.url);
   const host =
     arg.request.headers.get("x-forwarded-host") ||
@@ -104,6 +126,10 @@ export const loader = async (arg: LoaderFunctionArgs) => {
   text = text.replaceAll(xmlNodeTagSuffix, "");
 
   return new Response(`<?xml version="1.0" encoding="UTF-8"?>\n${text}`, {
-    headers: { "Content-Type": "application/xml" },
+    headers: {
+      "Content-Type": "application/xml",
+      "Cache-Control":
+        authRoute === undefined ? "public, max-age=600" : "private, no-store",
+    },
   });
 };

package/templates/defaults/package.json

@@ -11,13 +11,14 @@
     "@remix-run/node": "2.16.5",
     "@remix-run/react": "2.16.5",
     "@remix-run/server-runtime": "2.16.5",
-    "@webstudio-is/image": "0.267.0",
-    "@webstudio-is/react-sdk": "0.267.0",
-    "@webstudio-is/sdk": "0.267.0",
-    "@webstudio-is/sdk-components-react": "0.267.0",
-    "@webstudio-is/sdk-components-animation": "0.267.0",
-    "@webstudio-is/sdk-components-react-radix": "0.267.0",
-    "@webstudio-is/sdk-components-react-remix": "0.267.0",
+    "@webstudio-is/image": "0.268.0",
+    "@webstudio-is/react-sdk": "0.268.0",
+    "@webstudio-is/sdk": "0.268.0",
+    "@webstudio-is/sdk-components-react": "0.268.0",
+    "@webstudio-is/sdk-components-animation": "0.268.0",
+    "@webstudio-is/sdk-components-react-radix": "0.268.0",
+    "@webstudio-is/sdk-components-react-remix": "0.268.0",
+    "@webstudio-is/wsauth": "0.268.0",
     "isbot": "^5.1.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"

package/templates/internal/package.json

@@ -6,6 +6,7 @@
     "@webstudio-is/sdk-components-animation": "workspace:*",
     "@webstudio-is/sdk-components-react": "workspace:*",
     "@webstudio-is/sdk-components-react-radix": "workspace:*",
-    "@webstudio-is/sdk-components-react-remix": "workspace:*"
+    "@webstudio-is/sdk-components-react-remix": "workspace:*",
+    "@webstudio-is/wsauth": "workspace:*"
   }
 }

package/templates/react-router/app/root.tsx

@@ -1,10 +1,24 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 
-import { Links, Meta, Outlet, useMatches } from "react-router";
+import {
+  type HeadersFunction,
+  Links,
+  Meta,
+  Outlet,
+  useMatches,
+} from "react-router";
 // @todo think about how to make __generated__ typeable
 // @ts-ignore
 import { CustomCode, projectId, lastPublished } from "./__generated__/_index";
 
+export const headers: HeadersFunction = ({ errorHeaders }) => {
+  if (errorHeaders) {
+    return errorHeaders;
+  }
+
+  return {};
+};
+
 const Root = () => {
   // Get language from matches
   const matches = useMatches();

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

@@ -17,6 +17,7 @@ import {
   formBotFieldName,
   cachedFetch,
 } from "@webstudio-is/sdk/runtime";
+import { authenticateRequest } from "@webstudio-is/wsauth";
 import {
   ReactSdkContext,
   PageSettingsMeta,
@@ -24,6 +25,7 @@ import {
 } from "@webstudio-is/react-sdk/runtime";
 import {
   projectId,
+  projectDomain,
   Page,
   siteName,
   favIconAsset,
@@ -41,6 +43,25 @@ import * as constants from "__CONSTANTS__";
 import css from "__CSS__?url";
 import { sitemap } from "__SITEMAP__";
 import { assets } from "__ASSETS__";
+import { authRoutes } from "__AUTH__";
+
+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") {
@@ -82,6 +103,8 @@ const customFetch: typeof fetch = (input, init) => {
 };
 
 export const loader = async (arg: LoaderFunctionArgs) => {
+  const authRoute = authenticateProductionRequest(arg.request);
+
   const url = new URL(arg.request.url);
   const host =
     arg.request.headers.get("x-forwarded-host") ||
@@ -132,13 +155,18 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     {
       status: pageMeta.status,
       headers: {
-        "Cache-Control": "public, max-age=600",
+        "Cache-Control":
+          authRoute === undefined ? "public, max-age=600" : "private, no-store",
       },
     }
   );
 };
 
-export const headers: HeadersFunction = () => {
+export const headers: HeadersFunction = ({ errorHeaders }) => {
+  if (errorHeaders) {
+    return errorHeaders;
+  }
+
   return {
     "Cache-Control": "public, max-age=0, must-revalidate",
   };
@@ -219,6 +247,8 @@ export const action = async ({
 }: ActionFunctionArgs): Promise<
   { success: true } | { success: false; errors: string[] }
 > => {
+  authenticateProductionRequest(request);
+
   try {
     const url = new URL(request.url);
     url.host = getRequestHost(request);

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

@@ -0,0 +1,107 @@
+import { type LoaderFunctionArgs, redirect } from "react-router";
+import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
+import { authenticateRequest } from "@webstudio-is/wsauth";
+import { projectDomain } from "__CLIENT__";
+import { getPageMeta, getRemixParams, getResources } from "__SERVER__";
+import { sitemap } from "__SITEMAP__";
+import { assets } from "__ASSETS__";
+import { authRoutes } from "__AUTH__";
+
+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);
+  }
+
+  if (isLocalResource(input, "sitemap.xml")) {
+    const response = new Response(JSON.stringify(sitemap));
+    response.headers.set("content-type", "application/json; charset=utf-8");
+    return Promise.resolve(response);
+  }
+
+  if (isLocalResource(input, "current-date")) {
+    const now = new Date();
+    const startOfDay = new Date(
+      Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())
+    );
+    const data = {
+      iso: startOfDay.toISOString(),
+      year: startOfDay.getUTCFullYear(),
+      month: startOfDay.getUTCMonth() + 1,
+      day: startOfDay.getUTCDate(),
+      timestamp: startOfDay.getTime(),
+    };
+    const response = new Response(JSON.stringify(data));
+    response.headers.set("content-type", "application/json; charset=utf-8");
+    return Promise.resolve(response);
+  }
+
+  if (isLocalResource(input, "assets")) {
+    const response = new Response(JSON.stringify(assets));
+    response.headers.set("content-type", "application/json; charset=utf-8");
+    return Promise.resolve(response);
+  }
+
+  return fetch(input, init);
+};
+
+export const loader = async (arg: LoaderFunctionArgs) => {
+  const authRoute = authenticateProductionRequest(arg.request);
+
+  const url = new URL(arg.request.url);
+  const host =
+    arg.request.headers.get("x-forwarded-host") ||
+    arg.request.headers.get("host") ||
+    "";
+  url.host = host;
+  url.protocol = "https";
+
+  const params = getRemixParams(arg.params);
+
+  const system = {
+    params,
+    search: Object.fromEntries(url.searchParams),
+    origin: url.origin,
+    pathname: url.pathname,
+  };
+
+  const resources = await loadResources(
+    customFetch,
+    getResources({ system }).data
+  );
+  const pageMeta = getPageMeta({ system, resources });
+
+  if (pageMeta.redirect) {
+    const status =
+      pageMeta.status === 301 || pageMeta.status === 302
+        ? pageMeta.status
+        : 302;
+    return redirect(pageMeta.redirect, status);
+  }
+
+  return new Response(pageMeta.content ?? "", {
+    status: pageMeta.status,
+    headers: {
+      "Content-Type": "text/plain; charset=utf-8",
+      "Cache-Control":
+        authRoute === undefined ? "public, max-age=600" : "private, no-store",
+    },
+  });
+};

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

@@ -1,15 +1,35 @@
 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 {
   ReactSdkContext,
   xmlNodeTagSuffix,
 } from "@webstudio-is/react-sdk/runtime";
-import { Page, breakpoints } from "__CLIENT__";
+import { Page, breakpoints, projectDomain } from "__CLIENT__";
 import { getPageMeta, getRemixParams, getResources } from "__SERVER__";
 import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
 import { sitemap } from "__SITEMAP__";
 import { assets } from "__ASSETS__";
+import { authRoutes } from "__AUTH__";
+
+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") {
@@ -51,6 +71,8 @@ const customFetch: typeof fetch = (input, init) => {
 };
 
 export const loader = async (arg: LoaderFunctionArgs) => {
+  const authRoute = authenticateProductionRequest(arg.request);
+
   const url = new URL(arg.request.url);
   const host =
     arg.request.headers.get("x-forwarded-host") ||
@@ -108,6 +130,10 @@ export const loader = async (arg: LoaderFunctionArgs) => {
   text = text.replaceAll(xmlNodeTagSuffix, "");
 
   return new Response(`<?xml version="1.0" encoding="UTF-8"?>\n${text}`, {
-    headers: { "Content-Type": "application/xml" },
+    headers: {
+      "Content-Type": "application/xml",
+      "Cache-Control":
+        authRoute === undefined ? "public, max-age=600" : "private, no-store",
+    },
   });
 };

package/templates/react-router/package.json

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

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

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "@cloudflare/vite-plugin": "^1.1.0",
+    "@webstudio-is/wsauth": "0.268.0",
     "wrangler": "^4.14.1"
   }
 }

package/templates/ssg/package.json

@@ -8,12 +8,12 @@
     "typecheck": "tsgo --noEmit"
   },
   "dependencies": {
-    "@webstudio-is/image": "0.267.0",
-    "@webstudio-is/react-sdk": "0.267.0",
-    "@webstudio-is/sdk": "0.267.0",
-    "@webstudio-is/sdk-components-react": "0.267.0",
-    "@webstudio-is/sdk-components-animation": "0.267.0",
-    "@webstudio-is/sdk-components-react-radix": "0.267.0",
+    "@webstudio-is/image": "0.268.0",
+    "@webstudio-is/react-sdk": "0.268.0",
+    "@webstudio-is/sdk": "0.268.0",
+    "@webstudio-is/sdk-components-react": "0.268.0",
+    "@webstudio-is/sdk-components-animation": "0.268.0",
+    "@webstudio-is/sdk-components-react-radix": "0.268.0",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vike": "^0.4.229"