webstudio 0.264.0 → 0.266.0

package/lib/cli.js

@@ -15,8 +15,9 @@ import { hideBin } from "yargs/helpers";
 import { join, dirname, normalize, basename, relative } from "node:path";
 import envPaths from "env-paths";
 import { z } from "zod";
-import { access, constants, writeFile, mkdir, readFile, rm, readdir, cp, rename } from "node:fs/promises";
+import { access, constants, writeFile, mkdir, readFile, rm, rename, readdir, cp } from "node:fs/promises";
 import { text, isCancel, cancel, log, spinner, confirm, select as select$2 } from "@clack/prompts";
+import { createTRPCUntypedClient, httpBatchLink } from "@trpc/client";
 import pc from "picocolors";
 import { existsSync, createWriteStream } from "node:fs";
 import { pipeline } from "node:stream/promises";
@@ -145,48 +146,33 @@ const loadJSONFile = async (filePath) => {
     return null;
   }
 };
-var getLatestBuildUsingProjectId = async (params) => {
-  const { origin, projectId, authToken } = params;
+var createTrpcClient = (origin, headers) => {
   const { sourceOrigin } = parseBuilderUrl(origin);
-  const url = new URL(sourceOrigin);
-  url.pathname = `/rest/buildId/${projectId}`;
-  const headers = new Headers();
-  headers.set("x-auth-token", authToken);
-  const response = await fetch(url.href, { headers });
-  if (response.ok) {
-    return await response.json();
-  }
-  const message = await response.text();
-  throw new Error(message.slice(0, 1e3));
+  const url = new URL("/trpc", sourceOrigin);
+  return createTRPCUntypedClient({
+    links: [
+      httpBatchLink({
+        url: url.href,
+        headers
+      })
+    ]
+  });
 };
 var loadProjectDataByBuildId = async (params) => {
-  const { sourceOrigin } = parseBuilderUrl(params.origin);
-  const url = new URL(sourceOrigin);
-  url.pathname = `/rest/build/${params.buildId}`;
-  const headers = new Headers();
-  if ("seviceToken" in params) {
-    headers.set("Authorization", params.seviceToken);
-  } else {
-    headers.set("x-auth-token", params.authToken);
-  }
-  const response = await fetch(url.href, {
-    headers
+  const headers = "seviceToken" in params ? { Authorization: params.seviceToken } : { "x-auth-token": params.authToken };
+  return await createTrpcClient(params.origin, {
+    ...params.headers,
+    ...headers
+  }).query("build.loadProjectDataByBuildId", {
+    buildId: params.buildId
   });
-  if (response.ok) {
-    return await response.json();
-  }
-  const message = await response.text();
-  throw new Error(message.slice(0, 1e3));
 };
 var loadProjectDataByProjectId = async (params) => {
-  const result = await getLatestBuildUsingProjectId(params);
-  if (result.buildId === null) {
-    throw new Error(`The project is not published yet`);
-  }
-  return await loadProjectDataByBuildId({
-    buildId: result.buildId,
-    origin: params.origin,
-    authToken: params.authToken
+  return await createTrpcClient(params.origin, {
+    ...params.headers,
+    "x-auth-token": params.authToken
+  }).query("build.loadProjectDataByProjectId", {
+    projectId: params.projectId
   });
 };
 var buildProjectDomainPrefix = "p-";
@@ -220,6 +206,36 @@ var parseBuilderUrl = (urlStr) => {
     sourceOrigin: sourceUrl.origin
   };
 };
+const wait = (duration) => new Promise((resolve) => setTimeout(resolve, duration));
+const withConfigLock = async (callback) => {
+  const lockPath = `${GLOBAL_CONFIG_FILE}.lock`;
+  const start = Date.now();
+  while (true) {
+    try {
+      await mkdir(lockPath);
+      break;
+    } catch (error) {
+      const code2 = error.code;
+      if (code2 !== "EEXIST") {
+        throw error;
+      }
+      if (Date.now() - start > 1e4) {
+        throw new Error(`Timed out waiting for config lock ${lockPath}`);
+      }
+      await wait(50);
+    }
+  }
+  try {
+    return await callback();
+  } finally {
+    await rm(lockPath, { recursive: true, force: true });
+  }
+};
+const writeConfigFile = async (content) => {
+  const temporaryFile = `${GLOBAL_CONFIG_FILE}.${process.pid}.tmp`;
+  await writeFile(temporaryFile, content, "utf8");
+  await rename(temporaryFile, GLOBAL_CONFIG_FILE);
+};
 const parseShareLink = (value) => {
   const url = new URL(value.replaceAll("'", ""));
   const token = url.searchParams.get("authToken");
@@ -273,16 +289,18 @@ const link = async (options) => {
     }
   }
   const { origin, projectId, token } = parseShareLink(shareLink);
-  const currentConfig = await readFile(GLOBAL_CONFIG_FILE, "utf-8");
-  const currentConfigJson = jsonToGlobalConfig(JSON.parse(currentConfig));
-  const newConfig = {
-    ...currentConfigJson,
-    [projectId]: {
-      origin,
-      token
-    }
-  };
-  await writeFile(GLOBAL_CONFIG_FILE, JSON.stringify(newConfig, null, 2));
+  await withConfigLock(async () => {
+    const currentConfig = await readFile(GLOBAL_CONFIG_FILE, "utf-8");
+    const currentConfigJson = jsonToGlobalConfig(JSON.parse(currentConfig));
+    const newConfig = {
+      ...currentConfigJson,
+      [projectId]: {
+        origin,
+        token
+      }
+    };
+    await writeConfigFile(JSON.stringify(newConfig, null, 2));
+  });
   log.info(`Saved credentials for project ${projectId}.
 You can find your config at ${GLOBAL_CONFIG_FILE}`);
   const localConfig = {
@@ -294,6 +312,128 @@ You can find your config at ${GLOBAL_CONFIG_FILE}`);
   );
   log.step("The project is linked successfully");
 };
+const apiCompatibilityErrorType = "webstudioApiCompatibilityError";
+const apiClientHeader = "x-webstudio-client";
+const apiClientVersionHeader = "x-webstudio-client-version";
+const ApiCompatibilityTarget = z.enum(["browser", "cli"]);
+z.enum(["browser", "cli", "service"]);
+const ApiCompatibilityAction = z.discriminatedUnion("type", [
+  z.object({
+    type: z.literal("reloadBrowser")
+  }),
+  z.object({
+    type: z.literal("updateCli")
+  })
+]);
+const ApiCompatibilityPayload = z.object({
+  type: z.literal(apiCompatibilityErrorType),
+  reason: z.enum(["apiRouteNotFound", "apiProcedureNotFound"]),
+  target: ApiCompatibilityTarget,
+  message: z.string(),
+  action: ApiCompatibilityAction
+});
+const isObject = (value) => typeof value === "object" && value !== null;
+const getApiCompatibilityPayload = (value) => {
+  const findPayload = (value2, seen) => {
+    const parsed = ApiCompatibilityPayload.safeParse(value2);
+    if (parsed.success) {
+      return parsed.data;
+    }
+    if (isObject(value2) === false) {
+      return;
+    }
+    if (seen.has(value2)) {
+      return;
+    }
+    seen.add(value2);
+    if (Array.isArray(value2)) {
+      for (const item of value2) {
+        const payload = findPayload(item, seen);
+        if (payload !== void 0) {
+          return payload;
+        }
+      }
+      return;
+    }
+    const candidates = [
+      value2.payload,
+      value2.error,
+      value2.data,
+      isObject(value2.data) ? value2.data.apiCompatibility : void 0,
+      isObject(value2.shape) ? value2.shape.data : void 0,
+      isObject(value2.shape) && isObject(value2.shape.data) ? value2.shape.data.apiCompatibility : void 0,
+      value2.cause
+    ];
+    for (const candidate of candidates) {
+      const payload = findPayload(candidate, seen);
+      if (payload !== void 0) {
+        return payload;
+      }
+    }
+  };
+  return findPayload(value, /* @__PURE__ */ new WeakSet());
+};
+const name = "webstudio";
+const version = "0.266.0";
+const description = "Webstudio CLI";
+const author = "Webstudio <github@webstudio.is>";
+const homepage = "https://webstudio.is";
+const type$1 = "module";
+const bin = { "webstudio-cli": "./bin.js", "webstudio": "./bin.js" };
+const imports = { "#cli": { "webstudio": "./src/cli.ts", "default": "./lib/cli.js" } };
+const files = ["lib/*", "templates/*", "bin.js", "!*.{test,stories}.*"];
+const scripts = { "typecheck": "tsgo --noEmit", "build": "rm -rf lib && vite build", "test": "vitest run" };
+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 packageJson = {
+  name,
+  version,
+  description,
+  author,
+  homepage,
+  type: type$1,
+  bin,
+  imports,
+  files,
+  scripts,
+  license,
+  engines,
+  dependencies,
+  devDependencies
+};
+class HandledCliError extends Error {
+  constructor() {
+    super("Handled CLI error");
+    this.name = "HandledCliError";
+  }
+}
+const isHandledCliError = (error) => error instanceof HandledCliError;
+const apiCompatibilityHeaders = {
+  [apiClientHeader]: "cli",
+  [apiClientVersionHeader]: packageJson.version
+};
+const updateCliCommand = "npm install -g webstudio@latest";
+const getCliCompatibilityMessage = (error) => {
+  const payload = getApiCompatibilityPayload(error);
+  if ((payload == null ? void 0 : payload.action.type) !== "updateCli") {
+    return;
+  }
+  return `${payload.message}
+
+Update the CLI with:
+  ${updateCliCommand}
+
+Or run the latest version once with:
+  npx webstudio@latest sync`;
+};
+const stopSyncingWithError = (syncing, error) => {
+  const compatibilityMessage = getCliCompatibilityMessage(error);
+  const message = error instanceof Error ? error.message : "Unable to synchronize project data";
+  syncing.stop(compatibilityMessage ?? message, 2);
+  return compatibilityMessage;
+};
 const syncOptions = (yargs) => yargs.option("buildId", {
   type: "string",
   describe: "[Experimental] Project build id to sync"
@@ -310,12 +450,21 @@ const sync = async (options) => {
   syncing.start(`Synchronizing project data`);
   if (options.buildId !== void 0 && options.origin !== void 0 && options.authToken !== void 0) {
     syncing.message(`Synchronizing project data from ${options.origin}`);
-    project = await loadProjectDataByBuildId({
-      buildId: options.buildId,
-      seviceToken: options.authToken,
-      origin: options.origin
-    });
-    project.origin = options.origin;
+    try {
+      project = await loadProjectDataByBuildId({
+        buildId: options.buildId,
+        seviceToken: options.authToken,
+        origin: options.origin,
+        headers: apiCompatibilityHeaders
+      });
+      project.origin = options.origin;
+    } catch (error) {
+      const compatibilityMessage = stopSyncingWithError(syncing, error);
+      if (compatibilityMessage !== void 0) {
+        throw new HandledCliError();
+      }
+      throw error;
+    }
   } else {
     const globalConfigText = await readFile(GLOBAL_CONFIG_FILE, "utf-8");
     const globalConfig = jsonToGlobalConfig(JSON.parse(globalConfigText));
@@ -345,15 +494,20 @@ const sync = async (options) => {
       project = options.buildId !== void 0 ? await loadProjectDataByBuildId({
         buildId: options.buildId,
         authToken: token,
-        origin
+        origin,
+        headers: apiCompatibilityHeaders
       }) : await loadProjectDataByProjectId({
         projectId: localConfig.projectId,
         authToken: token,
-        origin
+        origin,
+        headers: apiCompatibilityHeaders
       });
       project.origin = origin;
     } catch (error) {
-      syncing.stop(error.message, 2);
+      const compatibilityMessage = stopSyncingWithError(syncing, error);
+      if (compatibilityMessage !== void 0) {
+        throw new HandledCliError();
+      }
       throw error;
     }
   }
@@ -751,9 +905,9 @@ function multiply_v3_m3x3(input2, matrix, out = [0, 0, 0]) {
   return out;
 }
 function isString(str) {
-  return type$1(str) === "string";
+  return type(str) === "string";
 }
-function type$1(o2) {
+function type(o2) {
   let str = Object.prototype.toString.call(o2);
   return (str.match(/^\[object\s+(.*?)\]$/)[1] || "").toLowerCase();
 }
@@ -1532,7 +1686,7 @@ const _ColorSpace = class _ColorSpace {
     if (!space || isInstance(space, this)) {
       return space;
     }
-    let argType = type$1(space);
+    let argType = type(space);
     if (argType === "string") {
       let ret = _ColorSpace.registry[space.toLowerCase()];
       if (!ret) {
@@ -1589,7 +1743,7 @@ const _ColorSpace = class _ColorSpace {
    */
   static resolveCoord(ref, workingSpace) {
     var _a2;
-    let coordType = type$1(ref);
+    let coordType = type(ref);
     let space, coord;
     if (coordType === "string") {
       if (ref.includes(".")) {
@@ -1612,7 +1766,7 @@ const _ColorSpace = class _ColorSpace {
         `Cannot resolve coordinate reference ${ref}: No color space specified and relative references are not allowed here`
       );
     }
-    coordType = type$1(coord);
+    coordType = type(coord);
     if (coordType === "number" || coordType === "string" && coord >= 0) {
       let meta = Object.entries(space.coords)[coord];
       if (meta) {
@@ -2644,7 +2798,7 @@ var toValue = (styleValue, transformValue) => {
       case "oklch":
         return `oklch(${c1} ${c2} ${c3} / ${alpha})`;
       // Fall back to color() function for less common color spaces.
-      // Webstudio uses colorjs internal names; map to CSS predefined color space names.
+      // colorjs uses internal short names that differ from CSS predefined color space identifiers.
       case "p3":
         return `color(display-p3 ${c1} ${c2} ${c3} / ${alpha})`;
       case "a98rgb":
@@ -3687,10 +3841,6 @@ var commonPageFields = {
   )
 };
 var HomePagePath = z.string().refine((path) => path === "", "Home page path must be empty");
-var HomePage = z.object({
-  ...commonPageFields,
-  path: HomePagePath
-});
 var DefaultPagePage = z.string().refine((path) => path !== "", "Can't be empty").refine((path) => path !== "/", "Can't be just a /").refine((path) => path.endsWith("/") === false, "Can't end with a /").refine((path) => path.includes("//") === false, "Can't contain repeating /").refine(
   (path) => /^[-_a-z0-9*:?\\/.]*$/.test(path),
   "Only a-z, 0-9, -, _, /, :, ?, . and * are allowed"
@@ -3723,7 +3873,7 @@ var PagePath = DefaultPagePage.refine(
 );
 var Page = z.object({
   ...commonPageFields,
-  path: PagePath
+  path: z.union([HomePagePath, PagePath])
 });
 var ProjectMeta = z.object({
   // All fields are optional to ensure consistency and allow for the addition of new fields without requiring migration
@@ -3749,13 +3899,127 @@ var CompilerSettings = z.object({
   // All fields are optional to ensure consistency and allow for the addition of new fields without requiring migration
   atomicStyles: z.boolean().optional()
 });
-z.object({
+var Pages = z.object({
   meta: ProjectMeta.optional(),
   compiler: CompilerSettings.optional(),
   redirects: z.array(PageRedirect).optional(),
-  homePage: HomePage,
-  pages: z.array(Page),
-  folders: z.array(Folder).refine((folders) => folders.length > 0, "Folders can't be empty")
+  homePageId: PageId,
+  rootFolderId: FolderId,
+  pages: z.map(PageId, Page),
+  folders: z.map(FolderId, Folder).refine((folders) => folders.size > 0, "Folders can't be empty")
+}).superRefine((pages, context) => {
+  const homePage = pages.pages.get(pages.homePageId);
+  const rootFolder = pages.folders.get(pages.rootFolderId);
+  if (homePage === void 0) {
+    context.addIssue({
+      code: z.ZodIssueCode.custom,
+      path: ["homePageId"],
+      message: "Home page must reference an existing page"
+    });
+  }
+  if (rootFolder === void 0) {
+    context.addIssue({
+      code: z.ZodIssueCode.custom,
+      path: ["rootFolderId"],
+      message: "Root folder must reference an existing folder"
+    });
+  }
+  if (homePage !== void 0 && homePage.path !== "") {
+    context.addIssue({
+      code: z.ZodIssueCode.custom,
+      path: ["pages", pages.homePageId, "path"],
+      message: "Home page path must be empty"
+    });
+  }
+  for (const [pageId, page] of pages.pages) {
+    if (page.id !== pageId) {
+      context.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["pages", pageId, "id"],
+        message: "Page id must match its record key"
+      });
+    }
+    if (pageId !== pages.homePageId && page.path === "") {
+      context.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["pages", pageId, "path"],
+        message: "Page path can't be empty"
+      });
+    }
+  }
+  for (const [folderId, folder] of pages.folders) {
+    if (folder.id !== folderId) {
+      context.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["folders", folderId, "id"],
+        message: "Folder id must match its record key"
+      });
+    }
+    for (const [index, childId] of folder.children.entries()) {
+      if (pages.pages.has(childId) === false && pages.folders.has(childId) === false) {
+        context.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["folders", folderId, "children", index],
+          message: "Folder child must reference an existing page or folder"
+        });
+      }
+      if (childId === pages.rootFolderId) {
+        context.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["folders", folderId, "children", index],
+          message: "Root folder can't be nested"
+        });
+      }
+    }
+  }
+  if (rootFolder !== void 0 && rootFolder.children[0] !== pages.homePageId) {
+    context.addIssue({
+      code: z.ZodIssueCode.custom,
+      path: ["folders", pages.rootFolderId, "children"],
+      message: "Root folder must start with the home page"
+    });
+  }
+  const childParents = /* @__PURE__ */ new Map();
+  for (const [folderId, folder] of pages.folders) {
+    for (const [index, childId] of folder.children.entries()) {
+      const parentId = childParents.get(childId);
+      if (parentId !== void 0) {
+        context.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["folders", folderId, "children", index],
+          message: `Child is already registered in folder "${parentId}"`
+        });
+        continue;
+      }
+      childParents.set(childId, folderId);
+    }
+  }
+  const hasFolderCycle = (folderId, path = /* @__PURE__ */ new Set()) => {
+    if (path.has(folderId)) {
+      return true;
+    }
+    const folder = pages.folders.get(folderId);
+    if (folder === void 0) {
+      return false;
+    }
+    path.add(folderId);
+    for (const childId of folder.children) {
+      if (pages.folders.has(childId) && hasFolderCycle(childId, path)) {
+        return true;
+      }
+    }
+    path.delete(folderId);
+    return false;
+  };
+  for (const folderId of pages.folders.keys()) {
+    if (hasFolderCycle(folderId)) {
+      context.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["folders", folderId, "children"],
+        message: "Folders can't contain cycles"
+      });
+    }
+  }
 });
 var TextChild = z.object({
   type: z.literal("text"),
@@ -4241,7 +4505,8 @@ z.object({
 var common = {
   label: z.string().optional(),
   description: z.string().optional(),
-  required: z.boolean()
+  required: z.boolean(),
+  contentMode: z.boolean().optional()
 };
 var Tag = z.object({
   ...common,
@@ -5461,18 +5726,36 @@ var executeExpression = (expression) => {
 };
 var tokenRegex = new RegExp(":(?<name>\\w+)(?<modifier>[?*]?)|(?<wildcard>(?<!:\\w+)\\*)");
 var isPathnamePattern = (pathname) => tokenRegex.test(pathname);
+var ROOT_FOLDER_ID = "root";
+var isRootFolder = ({ id }) => id === ROOT_FOLDER_ID;
+var getPageById = (pages, pageId) => {
+  return pages.pages.get(pageId);
+};
+var getAllPages = (pages) => {
+  return Array.from(pages.pages.values());
+};
+var getAllFolders = (pages) => {
+  return Array.from(pages.folders.values());
+};
+var getHomePage = (pages) => {
+  const homePage = getPageById(pages, pages.homePageId);
+  if (homePage === void 0) {
+    throw new Error(`Home page "${pages.homePageId}" was not found.`);
+  }
+  return homePage;
+};
 var findPageByIdOrPath = (idOrPath, pages) => {
-  if (idOrPath === "" || idOrPath === "/" || idOrPath === pages.homePage.id) {
-    return pages.homePage;
+  if (idOrPath === "" || idOrPath === "/" || idOrPath === pages.homePageId) {
+    return getHomePage(pages);
   }
-  return pages.pages.find(
+  return getAllPages(pages).find(
     (page) => page.id === idOrPath || getPagePath(page.id, pages) === idOrPath
   );
 };
 var getPagePath = (id, pages) => {
   const foldersMap = /* @__PURE__ */ new Map();
   const childParentMap = /* @__PURE__ */ new Map();
-  for (const folder of pages.folders) {
+  for (const folder of getAllFolders(pages)) {
     foldersMap.set(folder.id, folder);
     for (const childId of folder.children) {
       childParentMap.set(childId, folder.id);
@@ -5480,7 +5763,7 @@ var getPagePath = (id, pages) => {
   }
   const paths = [];
   let currentId = id;
-  const allPages = [pages.homePage, ...pages.pages];
+  const allPages = getAllPages(pages);
   for (const page of allPages) {
     if (page.id === id) {
       paths.push(page.path);
@@ -5499,7 +5782,7 @@ var getPagePath = (id, pages) => {
   return paths.reverse().join("/").replace(/\/+/g, "/");
 };
 var getStaticSiteMapXml = (pages, updatedAt) => {
-  const allPages = [pages.homePage, ...pages.pages];
+  const allPages = getAllPages(pages);
   return allPages.filter((page) => (page.meta.documentType ?? "html") === "html").filter(
     (page) => executeExpression(page.meta.excludePageFromSearch) !== true
   ).filter((page) => false === isPathnamePattern(page.path)).map((page) => ({
@@ -6781,6 +7064,129 @@ var generateWebstudioComponent = ({
 `;
   return generatedComponent;
 };
+var toMap = (items, normalizeItem = (item) => item) => {
+  if (items instanceof Map) {
+    return new Map(
+      Array.from(items, ([id, item]) => [id, normalizeItem(item)])
+    );
+  }
+  const list = Array.isArray(items) ? items : Object.values(items);
+  return new Map(list.map((item) => [item.id, normalizeItem(item)]));
+};
+var normalizePage = (page) => ({
+  ...page,
+  meta: page.meta ?? {}
+});
+var isLegacyPages = (pages) => {
+  if (typeof pages !== "object" || pages === null) {
+    return false;
+  }
+  return "homePage" in pages && Array.isArray(pages.pages);
+};
+var isSerializedPages = (pages) => {
+  if (typeof pages !== "object" || pages === null) {
+    return false;
+  }
+  const candidate = pages;
+  return typeof candidate.homePageId === "string" && typeof candidate.rootFolderId === "string" && candidate.pages !== void 0 && candidate.folders !== void 0;
+};
+var removeOrphanFolderChildren = (pages, folders) => {
+  const nextFolders = /* @__PURE__ */ new Map();
+  for (const [folderId, folder] of folders) {
+    nextFolders.set(folderId, {
+      ...folder,
+      children: folder.children.filter(
+        (childId) => pages.has(childId) || folders.has(childId)
+      )
+    });
+  }
+  return nextFolders;
+};
+var migratePages = (pages) => {
+  var _a2;
+  if (isSerializedPages(pages) && pages.pages instanceof Map && pages.folders instanceof Map) {
+    const currentPages = pages;
+    const result = Pages.safeParse(currentPages);
+    if (result.success) {
+      return currentPages;
+    }
+    return {
+      ...currentPages,
+      folders: removeOrphanFolderChildren(
+        currentPages.pages,
+        currentPages.folders
+      )
+    };
+  }
+  if (isSerializedPages(pages)) {
+    const nextPages2 = toMap(pages.pages, normalizePage);
+    const nextFolders2 = toMap(pages.folders);
+    return {
+      meta: pages.meta,
+      compiler: pages.compiler,
+      redirects: pages.redirects,
+      homePageId: pages.homePageId,
+      rootFolderId: pages.rootFolderId,
+      pages: nextPages2,
+      folders: removeOrphanFolderChildren(nextPages2, nextFolders2)
+    };
+  }
+  if (isLegacyPages(pages) === false) {
+    throw new Error("Pages data has unsupported shape.");
+  }
+  const homePage = {
+    ...normalizePage(pages.homePage),
+    path: ""
+  };
+  const nextPages = /* @__PURE__ */ new Map([[homePage.id, homePage]]);
+  for (const page of pages.pages) {
+    if (page.id === homePage.id) {
+      continue;
+    }
+    nextPages.set(page.id, normalizePage(page));
+  }
+  const nextFolders = /* @__PURE__ */ new Map();
+  for (const folder of pages.folders ?? []) {
+    nextFolders.set(folder.id, { ...folder, children: [...folder.children] });
+  }
+  const rootFolder = Array.from(nextFolders.values()).find(isRootFolder) ?? ((_a2 = pages.folders) == null ? void 0 : _a2[0]) ?? {
+    id: ROOT_FOLDER_ID,
+    name: "Root",
+    slug: "",
+    children: []
+  };
+  if (nextFolders.has(rootFolder.id) === false) {
+    nextFolders.set(rootFolder.id, { ...rootFolder, children: [] });
+  }
+  const nextRootFolder = nextFolders.get(rootFolder.id);
+  if (nextRootFolder === void 0) {
+    throw new Error("Pages must include a root folder.");
+  }
+  for (const folder of nextFolders.values()) {
+    folder.children = folder.children.filter(
+      (childId) => childId !== homePage.id && (nextPages.has(childId) || nextFolders.has(childId))
+    );
+  }
+  nextRootFolder.children.unshift(homePage.id);
+  const referencedIds = new Set(
+    Array.from(nextFolders.values()).flatMap((folder) => folder.children)
+  );
+  for (const page of pages.pages) {
+    if (page.id !== homePage.id && referencedIds.has(page.id) === false) {
+      nextRootFolder.children.push(page.id);
+      referencedIds.add(page.id);
+    }
+  }
+  return {
+    meta: pages.meta,
+    compiler: pages.compiler,
+    redirects: pages.redirects,
+    homePageId: homePage.id,
+    rootFolderId: rootFolder.id,
+    pages: nextPages,
+    folders: nextFolders
+  };
+};
 const BOOLEAN_ATTRIBUTES = /* @__PURE__ */ new Set([
   "async",
   "autofocus",
@@ -6892,7 +7298,7 @@ const htmlToJsx = (html2) => {
   }
   return result;
 };
-const o$H = {
+const o$G = {
   category: "general",
   description: "Slot is a container for content that you want to reference across the project. Changes made to a Slot's children will be reflected in all other instances of that Slot.",
   icon: SlotComponentIcon,
@@ -6984,7 +7390,8 @@ const a$5 = {
       required: true,
       control: "code",
       language: "markdown",
-      type: "string"
+      type: "string",
+      contentMode: true
     }
   }
 };
@@ -7190,11 +7597,11 @@ var button = [
   { property: "text-transform", value: { type: "keyword", value: "none" } }
 ];
 var select = button;
-const o$G = {};
+const o$F = {};
 const i$9 = {
   presetStyle: { body },
   initialProps: ["id", "class"],
-  props: o$G
+  props: o$F
 };
 const t$g = {
   tag: { required: false, control: "text", type: "string" }
@@ -7283,11 +7690,11 @@ const m$8 = {
     }
   }
 };
-const o$F = {};
+const o$E = {};
 const i$8 = {
   presetStyle: { p: p$8 },
   initialProps: ["id", "class"],
-  props: o$F
+  props: o$E
 };
 const e$t = {
   download: {
@@ -7330,54 +7737,55 @@ const t$d = {
     href: {
       type: "string",
       control: "url",
-      required: false
+      required: false,
+      contentMode: true
     }
   }
 };
 const a$3 = p$7;
-const o$E = {};
+const o$D = {};
 const e$s = {
   label: "Text",
   icon: PaintBrushIcon,
   presetStyle: { span },
   initialProps: ["id", "class"],
-  props: o$E
+  props: o$D
 };
-const o$D = {};
+const o$C = {};
 const p$6 = {
   label: "Bold Text",
   presetStyle: { b: b$4 },
   initialProps: ["id", "class"],
-  props: o$D
+  props: o$C
 };
-const o$C = {};
+const o$B = {};
 const e$r = {
   label: "Italic Text",
   presetStyle: { i: i$a },
   initialProps: ["id", "class"],
-  props: o$C
+  props: o$B
 };
-const o$B = {};
-const o$A = {
+const o$A = {};
+const o$z = {
   label: "Superscript Text",
   presetStyle: { sup },
   initialProps: ["id", "class"],
-  props: o$B
+  props: o$A
 };
-const o$z = {};
-const s$4 = {
+const o$y = {};
+const s$3 = {
   label: "Subscript Text",
   presetStyle: { sub },
   initialProps: ["id", "class"],
-  props: o$z
+  props: o$y
 };
-const o$y = {};
+const o$x = {};
 const e$q = {
   presetStyle: { button },
   initialProps: ["id", "class", "type", "aria-label"],
-  props: o$y
+  props: o$x
 };
-const o$x = {};
+const o$w = {};
 const p$5 = {
   input: [
     ...input,
@@ -7386,7 +7794,7 @@ const p$5 = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, l$5 = {
+}, l$6 = {
   label: "Text Input",
   presetStyle: p$5,
   initialProps: [
@@ -7399,7 +7807,7 @@ const p$5 = {
     "required",
     "autofocus"
   ],
-  props: o$x
+  props: o$w
 };
 const e$p = {
   state: {
@@ -7432,17 +7840,17 @@ const c$4 = {
     }
   }
 };
-const o$w = {};
-const r$c = {
+const o$v = {};
+const r$d = {
   form: [
     ...form,
     { property: "min-height", value: { type: "unit", unit: "px", value: 20 } }
   ]
 }, p$4 = {
   label: "Form",
-  presetStyle: r$c,
+  presetStyle: r$d,
   initialProps: ["id", "class", "action"],
-  props: o$w
+  props: o$v
 };
 const e$o = {
   optimize: {
@@ -7454,7 +7862,7 @@ const e$o = {
   },
   quality: { required: false, control: "number", type: "number" }
 };
-const o$v = {
+const r$c = {
   img: [
     ...img,
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
@@ -7479,7 +7887,7 @@ const o$v = {
 }, i$7 = {
   category: "media",
   description: "Add an image asset to the page. Webstudio automatically converts images to WebP or AVIF format and makes them responsive for best performance.",
-  presetStyle: o$v,
+  presetStyle: r$c,
   order: 0,
   initialProps: [
     "id",
@@ -7499,7 +7907,26 @@ const o$v = {
       control: "file",
       label: "Source",
       required: false,
-      accept: "image/*"
+      accept: "image/*",
+      contentMode: true
+    },
+    width: {
+      type: "number",
+      control: "number",
+      required: false,
+      contentMode: true
+    },
+    height: {
+      type: "number",
+      control: "number",
+      required: false,
+      contentMode: true
+    },
+    alt: {
+      type: "string",
+      control: "text",
+      required: false,
+      contentMode: true
     }
   }
 };
@@ -7596,7 +8023,7 @@ const t$c = {
       value: { type: "keyword", value: "40px" }
     }
   ]
-}, l$4 = {
+}, l$5 = {
   presetStyle: t$c,
   initialProps: ["id", "class", "ordered", "start", "reversed"],
   props: e$m
@@ -7712,7 +8139,7 @@ const t$a = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, l$3 = {
+}, l$4 = {
   label: "Text Area",
   presetStyle: t$a,
   contentModel: {
@@ -7960,7 +8387,7 @@ const i$6 = [
   "showControls",
   "controlsColor",
   "playsinline"
-], s$3 = {
+], s$2 = {
   icon: VimeoIcon,
   contentModel: {
     category: "instance",
@@ -7969,7 +8396,13 @@ const i$6 = [
   },
   presetStyle: { div },
   initialProps: i$6,
-  props: e$i
+  props: {
+    ...e$i,
+    url: {
+      ...e$i.url,
+      contentMode: true
+    }
+  }
 };
 const e$h = {
   allowFullscreen: {
@@ -8136,7 +8569,7 @@ https://support.google.com/youtube/answer/171780?hl=en#zippy=%2Cturn-on-privacy-
     type: "string"
   }
 };
-const n$5 = [
+const i$5 = [
   "id",
   "className",
   "url",
@@ -8164,7 +8597,7 @@ const n$5 = [
   "language",
   "color",
   "playlist"
-], s$2 = {
+], l$3 = {
   icon: YoutubeIcon,
   contentModel: {
     category: "instance",
@@ -8172,8 +8605,14 @@ const n$5 = [
     descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
   },
   presetStyle: { div },
-  initialProps: n$5,
-  props: e$h
+  initialProps: i$5,
+  props: {
+    ...e$h,
+    url: {
+      ...e$h.url,
+      contentMode: true
+    }
+  }
 };
 const e$g = {
   optimize: {
@@ -8184,7 +8623,7 @@ const e$g = {
   },
   quality: { required: false, control: "number", type: "number" }
 };
-const i$5 = {
+const i$4 = {
   ...i$7,
   category: "hidden",
   label: "Preview Image",
@@ -8200,7 +8639,8 @@ const i$5 = {
       type: "string",
       control: "file",
       label: "Source",
-      required: false
+      required: false,
+      contentMode: true
     }
   }
 };
@@ -8620,7 +9060,35 @@ const r$9 = {
     "timeStyle",
     "format"
   ],
-  props: e$d
+  props: {
+    ...e$d,
+    datetime: {
+      type: "string",
+      control: "text",
+      required: false,
+      contentMode: true
+    },
+    language: {
+      ...e$d.language,
+      contentMode: true
+    },
+    country: {
+      ...e$d.country,
+      contentMode: true
+    },
+    dateStyle: {
+      ...e$d.dateStyle,
+      contentMode: true
+    },
+    timeStyle: {
+      ...e$d.timeStyle,
+      contentMode: true
+    },
+    format: {
+      ...e$d.format,
+      contentMode: true
+    }
+  }
 };
 const o$k = {};
 const o$j = {
@@ -8716,7 +9184,7 @@ const r$7 = {
   props: o$e
 };
 const o$d = {};
-const i$4 = {
+const n$5 = {
   icon: VideoIcon,
   contentModel: {
     category: "instance",
@@ -8751,7 +9219,20 @@ const i$4 = {
       control: "file",
       label: "Source",
       required: false,
-      accept: ".mp4,.webm,.mpg,.mpeg,.mov"
+      accept: ".mp4,.webm,.mpg,.mpeg,.mov",
+      contentMode: true
+    },
+    width: {
+      type: "number",
+      control: "number",
+      required: false,
+      contentMode: true
+    },
+    height: {
+      type: "number",
+      control: "number",
+      required: false,
+      contentMode: true
     }
   }
 };
@@ -8773,11 +9254,11 @@ const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   Heading: m$8,
   HtmlEmbed: a$6,
   Image: i$7,
-  Input: l$5,
+  Input: l$6,
   Italic: e$r,
   Label: t$b,
   Link: p$7,
-  List: l$4,
+  List: l$5,
   ListItem: p$3,
   MarkdownEmbed: a$5,
   Option: a$1,
@@ -8787,21 +9268,21 @@ const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   RichTextLink: a$3,
   Select: p$2,
   Separator: y$2,
-  Slot: o$H,
+  Slot: o$G,
   Span: e$s,
-  Subscript: s$4,
-  Superscript: o$A,
+  Subscript: s$3,
+  Superscript: o$z,
   Text: n$6,
-  Textarea: l$3,
+  Textarea: l$4,
   Time: r$9,
-  Video: i$4,
-  Vimeo: s$3,
+  Video: n$5,
+  Vimeo: s$2,
   VimeoPlayButton: c$2,
-  VimeoPreviewImage: i$5,
+  VimeoPreviewImage: i$4,
   VimeoSpinner: c$1,
   XmlNode: m$5,
   XmlTime: a$2,
-  YouTube: s$2
+  YouTube: l$3
 }, Symbol.toStringTag, { value: "Module" }));
 //! SPDX-License-Identifier: LicenseRef-Webstudio,Inc-Proprietary
 const l$1 = (n2) => new Proxy({}, { get(w2, t2) {
@@ -10381,7 +10862,7 @@ audit=false
 fund=false
 `;
 const prebuild = async (options) => {
-  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j, _k;
+  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j;
   if (options.template.length === 0) {
     log.error(
       `Template is not provided
@@ -10430,6 +10911,8 @@ Please check webstudio --help for more details`
   const usedMetas = new Map(
     Object.entries(coreMetas)
   );
+  const pages = migratePages(siteData.build.pages);
+  const allPages = getAllPages(pages);
   const siteDataByPage = {};
   const fontAssetsByPage = {};
   const backgroundImageAssetsByPage = {};
@@ -10438,10 +10921,10 @@ Please check webstudio --help for more details`
     assetBaseUrl,
     assets: new Map(siteData.assets.map((asset) => [asset.id, asset])),
     uploadingImageAssets: [],
-    pages: siteData.build.pages,
+    pages,
     source: "prebuild"
   });
-  for (const page of Object.values(siteData.pages)) {
+  for (const page of allPages) {
     const instanceMap = new Map(siteData.build.instances);
     const pageInstanceSet = findTreeInstanceIds(
       instanceMap,
@@ -10490,7 +10973,7 @@ Please check webstudio --help for more details`
         dataSources,
         resources
       },
-      pages: siteData.pages,
+      pages: allPages,
       page,
       assets: siteData.assets
     };
@@ -10547,10 +11030,10 @@ Please check webstudio --help for more details`
     // pass only used metas to not generate unused preset styles
     componentMetas: usedMetas,
     assetBaseUrl,
-    atomic: ((_g2 = siteData.build.pages.compiler) == null ? void 0 : _g2.atomicStyles) ?? true
+    atomic: ((_g2 = pages.compiler) == null ? void 0 : _g2.atomicStyles) ?? true
   });
   await createFileIfNotExists(join(generatedDir, "index.css"), cssText);
-  for (const page of Object.values(siteData.pages)) {
+  for (const page of allPages) {
     const scope = createScope([
       // manually maintained list of occupied identifiers
       "useState",
@@ -10644,13 +11127,13 @@ Please check webstudio --help for more details`
       metas: usedMetas,
       tagsOverrides: framework.tags
     });
-    const projectMeta = siteData.build.pages.meta;
+    const projectMeta = pages.meta;
     const contactEmail = (
       // fallback to user email when contact email is empty string
       (projectMeta == null ? void 0 : projectMeta.contactEmail) || ((_i2 = siteData.user) == null ? void 0 : _i2.email) || void 0
     );
     const favIconAsset = (_j = assets.get((projectMeta == null ? void 0 : projectMeta.faviconAssetId) ?? "")) == null ? void 0 : _j.name;
-    const pagePath = getPagePath(page.id, siteData.build.pages);
+    const pagePath = getPagePath(page.id, pages);
     const breakpoints = siteData.build.breakpoints.map(([_, value]) => ({
       id: value.id,
       minWidth: value.minWidth,
@@ -10770,7 +11253,7 @@ Please check webstudio --help for more details`
     join(generatedDir, "$resources.sitemap.xml.ts"),
     `
       export const sitemap = ${JSON.stringify(
-      getStaticSiteMapXml(siteData.build.pages, siteData.build.updatedAt),
+      getStaticSiteMapXml(pages, siteData.build.updatedAt),
       null,
       2
     )};
@@ -10788,7 +11271,7 @@ Please check webstudio --help for more details`
     export const assets = ${JSON.stringify(assetsById, null, 2)};
     `
   );
-  const redirects = (_k = siteData.build.pages) == null ? void 0 : _k.redirects;
+  const redirects = pages.redirects;
   if (redirects !== void 0 && redirects.length > 0) {
     for (const redirect of redirects) {
       const generatedBasename = generateRemixRoute(redirect.old);
@@ -10962,36 +11445,6 @@ const getDeploymentInstructions = (deployTarget) => {
       ].join("\n");
   }
 };
-const name = "webstudio";
-const version = "0.264.0";
-const description = "Webstudio CLI";
-const author = "Webstudio <github@webstudio.is>";
-const homepage = "https://webstudio.is";
-const type = "module";
-const bin = { "webstudio-cli": "./bin.js", "webstudio": "./bin.js" };
-const imports = { "#cli": { "webstudio": "./src/cli.ts", "default": "./lib/cli.js" } };
-const files = ["lib/*", "templates/*", "bin.js", "!*.{test,stories}.*"];
-const scripts = { "typecheck": "tsgo --noEmit", "build": "rm -rf lib && vite build", "test": "vitest run" };
-const license = "AGPL-3.0-or-later";
-const engines = { "node": ">=22" };
-const dependencies = { "@clack/prompts": "^0.10.0", "@emotion/hash": "^0.9.2", "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 packageJson = {
-  name,
-  version,
-  description,
-  author,
-  homepage,
-  type,
-  bin,
-  imports,
-  files,
-  scripts,
-  license,
-  engines,
-  dependencies,
-  devDependencies
-};
 const main = async () => {
   try {
     await createFileIfNotExists(GLOBAL_CONFIG_FILE, "{}");
@@ -11029,6 +11482,9 @@ const main = async () => {
     cmd.command(["$0", "init"], "Setup the project", buildOptions, initFlow);
     await cmd.parse();
   } catch (error) {
+    if (isHandledCliError(error)) {
+      exit(1);
+    }
     console.error(error);
     exit(1);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.264.0",
+  "version": "0.266.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -28,6 +28,7 @@
   "dependencies": {
     "@clack/prompts": "^0.10.0",
     "@emotion/hash": "^0.9.2",
+    "@trpc/client": "^10.45.2",
     "acorn": "^8.14.1",
     "acorn-walk": "^8.3.4",
     "change-case": "^5.4.4",
@@ -41,7 +42,9 @@
     "tinyexec": "^0.3.2",
     "warn-once": "^0.1.1",
     "yargs": "^17.7.2",
-    "zod": "^3.24.2"
+    "zod": "^3.24.2",
+    "@webstudio-is/project-migrations": "0.266.0",
+    "@webstudio-is/trpc-interface": "0.266.0"
   },
   "devDependencies": {
     "@cloudflare/vite-plugin": "^1.1.0",
@@ -71,16 +74,16 @@
     "vite": "^6.3.4",
     "vitest": "^3.1.2",
     "wrangler": "^3.63.2",
-    "@webstudio-is/css-engine": "0.264.0",
-    "@webstudio-is/http-client": "0.264.0",
-    "@webstudio-is/react-sdk": "0.264.0",
-    "@webstudio-is/sdk": "0.264.0",
-    "@webstudio-is/image": "0.264.0",
-    "@webstudio-is/sdk-components-animation": "0.264.0",
-    "@webstudio-is/sdk-components-react": "0.264.0",
-    "@webstudio-is/sdk-components-react-radix": "0.264.0",
-    "@webstudio-is/sdk-components-react-remix": "0.264.0",
-    "@webstudio-is/sdk-components-react-router": "0.264.0",
+    "@webstudio-is/css-engine": "0.266.0",
+    "@webstudio-is/http-client": "0.266.0",
+    "@webstudio-is/image": "0.266.0",
+    "@webstudio-is/sdk": "0.266.0",
+    "@webstudio-is/sdk-components-animation": "0.266.0",
+    "@webstudio-is/sdk-components-react-radix": "0.266.0",
+    "@webstudio-is/sdk-components-react": "0.266.0",
+    "@webstudio-is/react-sdk": "0.266.0",
+    "@webstudio-is/sdk-components-react-remix": "0.266.0",
+    "@webstudio-is/sdk-components-react-router": "0.266.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {

package/templates/defaults/package.json

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

package/templates/react-router/package.json

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

package/templates/ssg/package.json

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