webstudio 0.264.0 → 0.265.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,30 @@ const loadJSONFile = async (filePath) => {
     return null;
   }
 };
-var getLatestBuildUsingProjectId = async (params) => {
-  const { origin, projectId, authToken } = params;
-  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));
-};
 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, headers).query(
+    "build.loadProjectDataByBuildId",
+    { buildId: params.buildId }
+  );
+};
+var createTrpcClient = (origin, headers) => {
+  const { sourceOrigin } = parseBuilderUrl(origin);
+  const url = new URL("/trpc", sourceOrigin);
+  return createTRPCUntypedClient({
+    links: [
+      httpBatchLink({
+        url: url.href,
+        headers
+      })
+    ]
   });
-  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, {
+    "x-auth-token": params.authToken
+  }).query("build.loadProjectDataByProjectId", {
+    projectId: params.projectId
   });
 };
 var buildProjectDomainPrefix = "p-";
@@ -220,6 +203,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 +286,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 = {
@@ -2644,7 +2659,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 +3702,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 +3734,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
@@ -3753,9 +3764,123 @@ 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 +4366,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 +5587,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 +5624,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 +5643,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) => ({
@@ -5507,6 +5651,104 @@ var getStaticSiteMapXml = (pages, updatedAt) => {
     lastModified: updatedAt.split("T")[0]
   }));
 };
+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 migratePages = (pages) => {
+  var _a2;
+  if (isSerializedPages(pages) && pages.pages instanceof Map && pages.folders instanceof Map) {
+    return pages;
+  }
+  if (isSerializedPages(pages)) {
+    return {
+      meta: pages.meta,
+      compiler: pages.compiler,
+      redirects: pages.redirects,
+      homePageId: pages.homePageId,
+      rootFolderId: pages.rootFolderId,
+      pages: toMap(pages.pages, normalizePage),
+      folders: toMap(pages.folders)
+    };
+  }
+  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
+    );
+  }
+  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
+  };
+};
 var identifiers = reservedIdentifiers({ includeGlobalProperties: true });
 var isReserved = (identifier) => identifiers.has(identifier);
 var normalizeJsName = (name2) => {
@@ -6892,7 +7134,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 +7226,8 @@ const a$5 = {
       required: true,
       control: "code",
       language: "markdown",
-      type: "string"
+      type: "string",
+      contentMode: true
     }
   }
 };
@@ -7190,11 +7433,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 +7526,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 +7573,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 +7630,7 @@ const p$5 = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, l$5 = {
+}, l$6 = {
   label: "Text Input",
   presetStyle: p$5,
   initialProps: [
@@ -7399,7 +7643,7 @@ const p$5 = {
     "required",
     "autofocus"
   ],
-  props: o$x
+  props: o$w
 };
 const e$p = {
   state: {
@@ -7432,17 +7676,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 +7698,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 +7723,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 +7743,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 +7859,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 +7975,7 @@ const t$a = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, l$3 = {
+}, l$4 = {
   label: "Text Area",
   presetStyle: t$a,
   contentModel: {
@@ -7960,7 +8223,7 @@ const i$6 = [
   "showControls",
   "controlsColor",
   "playsinline"
-], s$3 = {
+], s$2 = {
   icon: VimeoIcon,
   contentModel: {
     category: "instance",
@@ -7969,7 +8232,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 +8405,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 +8433,7 @@ const n$5 = [
   "language",
   "color",
   "playlist"
-], s$2 = {
+], l$3 = {
   icon: YoutubeIcon,
   contentModel: {
     category: "instance",
@@ -8172,8 +8441,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 +8459,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 +8475,8 @@ const i$5 = {
       type: "string",
       control: "file",
       label: "Source",
-      required: false
+      required: false,
+      contentMode: true
     }
   }
 };
@@ -8620,7 +8896,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 +9020,7 @@ const r$7 = {
   props: o$e
 };
 const o$d = {};
-const i$4 = {
+const n$5 = {
   icon: VideoIcon,
   contentModel: {
     category: "instance",
@@ -8751,7 +9055,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 +9090,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 +9104,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 +10698,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 +10747,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 +10757,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 +10809,7 @@ Please check webstudio --help for more details`
         dataSources,
         resources
       },
-      pages: siteData.pages,
+      pages: allPages,
       page,
       assets: siteData.assets
     };
@@ -10547,10 +10866,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 +10963,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 +11089,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 +11107,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);
@@ -10963,7 +11282,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.264.0";
+const version = "0.265.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";
@@ -10974,7 +11293,7 @@ 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 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", "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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.264.0",
+  "version": "0.265.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",
@@ -71,16 +72,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.265.0",
+    "@webstudio-is/react-sdk": "0.265.0",
+    "@webstudio-is/image": "0.265.0",
+    "@webstudio-is/sdk": "0.265.0",
+    "@webstudio-is/sdk-components-animation": "0.265.0",
+    "@webstudio-is/sdk-components-react": "0.265.0",
+    "@webstudio-is/sdk-components-react-radix": "0.265.0",
+    "@webstudio-is/sdk-components-react-remix": "0.265.0",
+    "@webstudio-is/http-client": "0.265.0",
+    "@webstudio-is/sdk-components-react-router": "0.265.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.265.0",
+    "@webstudio-is/react-sdk": "0.265.0",
+    "@webstudio-is/sdk": "0.265.0",
+    "@webstudio-is/sdk-components-react": "0.265.0",
+    "@webstudio-is/sdk-components-animation": "0.265.0",
+    "@webstudio-is/sdk-components-react-radix": "0.265.0",
+    "@webstudio-is/sdk-components-react-remix": "0.265.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.265.0",
+    "@webstudio-is/react-sdk": "0.265.0",
+    "@webstudio-is/sdk": "0.265.0",
+    "@webstudio-is/sdk-components-animation": "0.265.0",
+    "@webstudio-is/sdk-components-react-radix": "0.265.0",
+    "@webstudio-is/sdk-components-react-router": "0.265.0",
+    "@webstudio-is/sdk-components-react": "0.265.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.265.0",
+    "@webstudio-is/react-sdk": "0.265.0",
+    "@webstudio-is/sdk": "0.265.0",
+    "@webstudio-is/sdk-components-react": "0.265.0",
+    "@webstudio-is/sdk-components-animation": "0.265.0",
+    "@webstudio-is/sdk-components-react-radix": "0.265.0",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vike": "^0.4.229"