webstudio 0.238.0 → 0.252.2

package/README.md

@@ -16,10 +16,10 @@ To install Node.js using NVM, first install NVM by running:
 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
 ```
 
-Once NVM is installed, you can install Node.js version 18 by running:
+Once NVM is installed, you can install Node.js version 22 by running:
 
 ```bash
-nvm install 18
+nvm install 22
 ```
 
 Verify your Node.js installation by checking its version:

package/lib/cli.js

@@ -24,6 +24,7 @@ import { pathToFileURL, fileURLToPath } from "node:url";
 import pLimit from "p-limit";
 import merge from "deepmerge";
 import hash from "@emotion/hash";
+import "warn-once";
 import { parseExpressionAt } from "acorn";
 import { simple } from "acorn-walk";
 import reservedIdentifiers from "reserved-identifiers";
@@ -1437,12 +1438,16 @@ var MediaRule = (_c = class {
       return "";
     }
     let conditionText = "";
-    const { minWidth, maxWidth } = this.options;
-    if (minWidth !== void 0) {
-      conditionText = ` and (min-width: ${minWidth}px)`;
-    }
-    if (maxWidth !== void 0) {
-      conditionText += ` and (max-width: ${maxWidth}px)`;
+    const { minWidth, maxWidth, condition } = this.options;
+    if (condition !== void 0) {
+      conditionText = ` and (${condition})`;
+    } else {
+      if (minWidth !== void 0) {
+        conditionText = ` and (min-width: ${minWidth}px)`;
+      }
+      if (maxWidth !== void 0) {
+        conditionText += ` and (max-width: ${maxWidth}px)`;
+      }
     }
     return `@media ${__privateGet(this, _mediaType)}${conditionText} {
 ${rules.join(
@@ -1492,6 +1497,21 @@ var FontFaceRule = (_d = class {
   }
 }, _cached = new WeakMap(), _options = new WeakMap(), _d);
 var compareMedia = (optionA, optionB) => {
+  if (optionA.condition !== void 0 && optionB.condition !== void 0) {
+    return optionA.condition.localeCompare(optionB.condition);
+  }
+  if (optionA.condition !== void 0) {
+    if (optionB.minWidth === void 0 && optionB.maxWidth === void 0) {
+      return 1;
+    }
+    return -1;
+  }
+  if (optionB.condition !== void 0) {
+    if (optionA.minWidth === void 0 && optionA.maxWidth === void 0) {
+      return -1;
+    }
+    return 1;
+  }
   if (optionA.minWidth === void 0 && optionA.maxWidth === void 0) {
     return -1;
   }
@@ -1660,7 +1680,7 @@ var StyleSheet = (_f = class {
 var StyleSheetRegular = class extends StyleSheet {
 };
 var createRegularStyleSheet = (options) => {
-  const element = new StyleElement(options == null ? void 0 : options.name);
+  const element = (options == null ? void 0 : options.element) ?? new StyleElement(options == null ? void 0 : options.name);
   return new StyleSheetRegular(element);
 };
 var generateAtomic = (sheet, options) => {
@@ -1783,7 +1803,13 @@ var ImageAsset = z.object({
   meta: ImageMeta,
   type: z.literal("image")
 });
-var Asset = z.union([FontAsset, ImageAsset]);
+var FileAsset = z.object({
+  ...baseAsset,
+  format: z.string(),
+  meta: z.object({}),
+  type: z.literal("file")
+});
+var Asset = z.union([FontAsset, ImageAsset, FileAsset]);
 z.map(AssetId, Asset);
 var MIN_TITLE_LENGTH = 2;
 var PageId = z.string();
@@ -2303,14 +2329,23 @@ var Breakpoint = z.object({
   id: BreakpointId,
   label: z.string(),
   minWidth: z.number().optional(),
-  maxWidth: z.number().optional()
-}).refine(({ minWidth, maxWidth }) => {
+  maxWidth: z.number().optional(),
+  condition: z.string().optional()
+}).transform((data) => {
+  if (data.condition !== void 0 && data.condition.trim() === "") {
+    return { ...data, condition: void 0 };
+  }
+  return data;
+}).refine(({ minWidth, maxWidth, condition }) => {
+  if (condition !== void 0) {
+    return minWidth === void 0 && maxWidth === void 0;
+  }
   return (
     // Either min or max width have to be defined
     minWidth !== void 0 && maxWidth === void 0 || minWidth === void 0 && maxWidth !== void 0 || // This is a base breakpoint
     minWidth === void 0 && maxWidth === void 0
   );
-}, "Either minWidth or maxWidth should be defined");
+}, "Either minWidth, maxWidth, or condition should be defined, but not both");
 z.map(BreakpointId, Breakpoint);
 var StyleSourceId = z.string();
 var StyleSourceToken = z.object({
@@ -2617,6 +2652,170 @@ z.object({
   initialProps: z.array(z.string()).optional(),
   props: z.record(PropMeta).optional()
 });
+var ALLOWED_FILE_TYPES = {
+  // Documents
+  pdf: "application/pdf",
+  doc: "application/msword",
+  docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  xls: "application/vnd.ms-excel",
+  xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  csv: "text/csv",
+  ppt: "application/vnd.ms-powerpoint",
+  pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  // Code
+  txt: "text/plain",
+  md: "text/markdown",
+  js: "text/javascript",
+  css: "text/css",
+  json: "application/json",
+  html: "text/html",
+  xml: "application/xml",
+  // Archives
+  zip: "application/zip",
+  rar: "application/vnd.rar",
+  // Audio
+  mp3: "audio/mpeg",
+  wav: "audio/wav",
+  ogg: "audio/ogg",
+  m4a: "audio/mp4",
+  // Video
+  mp4: "video/mp4",
+  mov: "video/quicktime",
+  avi: "video/x-msvideo",
+  webm: "video/webm",
+  // Images
+  // Note: Cloudflare Image Resizing supports: jpg, jpeg, png, gif, webp, svg, avif
+  // Other formats (bmp, ico, tif, tiff) are served as-is without optimization
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  png: "image/png",
+  gif: "image/gif",
+  svg: "image/svg+xml",
+  webp: "image/webp",
+  avif: "image/avif",
+  ico: "image/vnd.microsoft.icon",
+  // Used for favicons
+  bmp: "image/bmp",
+  // Served without optimization
+  tif: "image/tiff",
+  // Served without optimization
+  tiff: "image/tiff",
+  // Served without optimization
+  // Fonts
+  woff: "font/woff",
+  woff2: "font/woff2",
+  ttf: "font/ttf",
+  otf: "font/otf"
+};
+new Set(
+  Object.keys(ALLOWED_FILE_TYPES)
+);
+var MIME_CATEGORIES = [
+  "image",
+  "video",
+  "audio",
+  "font",
+  "text",
+  "application"
+];
+var FILE_EXTENSIONS_BY_CATEGORY = (() => {
+  const categories = Object.fromEntries(
+    MIME_CATEGORIES.map((category) => [category, []])
+  );
+  Object.entries(ALLOWED_FILE_TYPES).forEach(([ext, mimeType]) => {
+    const [category] = mimeType.split("/");
+    if (category in categories) {
+      categories[category].push(ext);
+    }
+  });
+  return categories;
+})();
+var extensionToMime = new Map(
+  Object.entries(ALLOWED_FILE_TYPES).map(([ext, mime]) => [`.${ext}`, mime])
+);
+var mimeTypes = new Set(extensionToMime.values());
+/* @__PURE__ */ new Set([
+  ...mimeTypes.values(),
+  ...MIME_CATEGORIES.map((category) => `${category}/*`)
+]);
+var IMAGE_EXTENSIONS = FILE_EXTENSIONS_BY_CATEGORY.image;
+IMAGE_EXTENSIONS.map(
+  (ext) => ALLOWED_FILE_TYPES[ext]
+);
+var VIDEO_EXTENSIONS = FILE_EXTENSIONS_BY_CATEGORY.video;
+VIDEO_EXTENSIONS.map(
+  (ext) => ALLOWED_FILE_TYPES[ext]
+);
+var FONT_EXTENSIONS = FILE_EXTENSIONS_BY_CATEGORY.font;
+var detectAssetType = (fileName) => {
+  var _a2;
+  const ext = (_a2 = fileName.split(".").pop()) == null ? void 0 : _a2.toLowerCase();
+  if (!ext) {
+    return "file";
+  }
+  if (IMAGE_EXTENSIONS.includes(ext)) {
+    return "image";
+  }
+  if (FONT_EXTENSIONS.includes(ext)) {
+    return "font";
+  }
+  if (VIDEO_EXTENSIONS.includes(ext)) {
+    return "video";
+  }
+  return "file";
+};
+var getAssetUrl = (asset, origin) => {
+  let path;
+  const assetType = detectAssetType(asset.name);
+  if (assetType === "image") {
+    path = `/cgi/image/${asset.name}?format=raw`;
+  } else {
+    path = `/cgi/asset/${asset.name}?format=raw`;
+  }
+  return new URL(path, origin);
+};
+var extractImageMetadata = (asset) => {
+  if (asset.type !== "image") {
+    return;
+  }
+  if (asset.meta.width && asset.meta.height) {
+    return {
+      width: asset.meta.width,
+      height: asset.meta.height
+    };
+  }
+};
+var extractFontMetadata = (asset) => {
+  if (asset.type !== "font") {
+    return;
+  }
+  const metadata = {
+    family: asset.meta.family
+  };
+  if ("style" in asset.meta) {
+    metadata.style = asset.meta.style;
+    metadata.weight = asset.meta.weight;
+  }
+  return metadata;
+};
+var extractFileMetadata = (_asset) => {
+  return;
+};
+var metadataExtractors = {
+  image: extractImageMetadata,
+  font: extractFontMetadata,
+  file: extractFileMetadata
+};
+var toRuntimeAsset = (asset, origin) => {
+  const extractor = metadataExtractors[asset.type];
+  const metadata = extractor(asset);
+  const url = getAssetUrl(asset, origin);
+  const relativeUrl = url.pathname + url.search;
+  return {
+    url: relativeUrl,
+    ...metadata
+  };
+};
 var normalize_css_exports = {};
 __export(normalize_css_exports, {
   a: () => a$7,
@@ -3171,6 +3370,16 @@ var collectionMeta = {
       required: true,
       control: "json",
       type: "json"
+    },
+    item: {
+      required: false,
+      control: "text",
+      type: "string"
+    },
+    itemKey: {
+      required: false,
+      control: "text",
+      type: "string"
     }
   }
 };
@@ -4199,6 +4408,18 @@ var isAttributeNameSafe = (attributeName) => {
   illegalAttributeNameCache.set(attributeName, true);
   return false;
 };
+var generateCollectionIterationCode = ({
+  dataExpression,
+  keyVariable,
+  itemVariable
+}) => {
+  return `Object.entries(
+  // @ts-ignore
+  ${dataExpression} ?? {}
+).map(([_key, ${itemVariable}]: any) => {
+  const ${keyVariable} = Array.isArray(${dataExpression}) ? Number(_key) : _key;
+  return`;
+};
 var standardAttributesToReactProps = {
   "accept-charset": "acceptCharset",
   accesskey: "accessKey",
@@ -4427,6 +4648,7 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
   let conditionValue;
   let collectionDataValue;
   let collectionItemValue;
+  let collectionItemKeyValue;
   let classNameValue;
   for (const prop of props.values()) {
     if (prop.instanceId !== instance.id) {
@@ -4462,6 +4684,9 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
       if (prop.name === "item") {
         collectionItemValue = propValue;
       }
+      if (prop.name === "itemKey") {
+        collectionItemKeyValue = propValue;
+      }
       continue;
     }
     if (name2 === "className" && propValue !== void 0) {
@@ -4493,14 +4718,23 @@ ${name2}={${propValue}}`;
       return "";
     }
     const indexVariable = scope.getName(`${instance.id}-index`, "index");
-    generatedElement += `{${collectionDataValue}?.map?.((${collectionItemValue}: any, ${indexVariable}: number) =>
+    const keyVariable = collectionItemKeyValue ?? indexVariable;
+    generatedElement += `{${generateCollectionIterationCode({
+      dataExpression: collectionDataValue,
+      keyVariable,
+      itemVariable: collectionItemValue
+    })} (
 `;
-    generatedElement += `<Fragment key={${indexVariable}}>
+    generatedElement += `<Fragment key={${keyVariable}}>
 `;
     generatedElement += children;
     generatedElement += `</Fragment>
 `;
-    generatedElement += `)}
+    generatedElement += `)
+`;
+    generatedElement += `})
+`;
+    generatedElement += `}
 `;
   } else if (instance.component === blockComponent) {
     generatedElement += children;
@@ -5437,7 +5671,8 @@ const o$v = {
       type: "string",
       control: "file",
       label: "Source",
-      required: false
+      required: false,
+      accept: "image/*"
     }
   }
 };
@@ -8358,29 +8593,19 @@ Please check webstudio --help for more details`
   const assetsToDownload = [];
   if (options.assets === true) {
     const assetOrigin = siteData.origin;
+    if (!assetOrigin) {
+      console.warn("Warning: Asset origin is not defined in project data.");
+    }
     for (const asset of siteData.assets) {
-      if (asset.type === "image") {
-        assetsToDownload.push(
-          limit(
-            () => downloadAsset(
-              `${assetOrigin}/cgi/image/${asset.name}?format=raw`,
-              asset.name,
-              assetBaseUrl
-            )
-          )
-        );
-      }
-      if (asset.type === "font") {
-        assetsToDownload.push(
-          limit(
-            () => downloadAsset(
-              `${assetOrigin}/cgi/asset/${asset.name}`,
-              asset.name,
-              assetBaseUrl
-            )
+      assetsToDownload.push(
+        limit(
+          () => downloadAsset(
+            getAssetUrl(asset, assetOrigin || "").href,
+            asset.name,
+            assetBaseUrl
           )
-        );
-      }
+        )
+      );
     }
   }
   const assets = new Map(siteData.assets.map((asset) => [asset.id, asset]));
@@ -8590,6 +8815,9 @@ Please check webstudio --help for more details`
       const content = template.replaceAll("__CONSTANTS__", importFrom("./app/constants.mjs", file)).replaceAll(
         "__SITEMAP__",
         importFrom(`./app/__generated__/$resources.sitemap.xml`, file)
+      ).replaceAll(
+        "__ASSETS__",
+        importFrom(`./app/__generated__/$resources.assets`, file)
       ).replaceAll(
         "__CLIENT__",
         importFrom(`./app/__generated__/${generatedBasename}`, file)
@@ -8620,6 +8848,18 @@ Please check webstudio --help for more details`
     )};
     `
   );
+  const assetsById = Object.fromEntries(
+    siteData.assets.map((asset) => [
+      asset.id,
+      toRuntimeAsset(asset, "https://placeholder.local")
+    ])
+  );
+  await createFileIfNotExists(
+    join(generatedDir, "$resources.assets.ts"),
+    `
+    export const assets = ${JSON.stringify(assetsById, null, 2)};
+    `
+  );
   const redirects = (_k = siteData.build.pages) == null ? void 0 : _k.redirects;
   if (redirects !== void 0 && redirects.length > 0) {
     for (const redirect of redirects) {
@@ -8795,7 +9035,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.238.0";
+const version = "0.252.2";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";
@@ -8803,10 +9043,10 @@ 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": "tsc", "build": "rm -rf lib && vite build", "test": "vitest run" };
+const scripts = { "typecheck": "tsgo --noEmit", "build": "rm -rf lib && vite build", "test": "vitest run" };
 const license = "AGPL-3.0-or-later";
-const engines = { "node": ">=20.12" };
-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", "yargs": "^17.7.2", "zod": "^3.24.2" };
+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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.238.0",
+  "version": "0.252.2",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -23,7 +23,7 @@
   ],
   "license": "AGPL-3.0-or-later",
   "engines": {
-    "node": ">=20.12"
+    "node": ">=22"
   },
   "dependencies": {
     "@clack/prompts": "^0.10.0",
@@ -39,6 +39,7 @@
     "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"
   },
@@ -70,20 +71,20 @@
     "vite": "^6.3.4",
     "vitest": "^3.1.2",
     "wrangler": "^3.63.2",
-    "@webstudio-is/css-engine": "0.238.0",
-    "@webstudio-is/http-client": "0.238.0",
-    "@webstudio-is/sdk": "0.238.0",
-    "@webstudio-is/react-sdk": "0.238.0",
-    "@webstudio-is/image": "0.238.0",
-    "@webstudio-is/sdk-components-animation": "0.238.0",
-    "@webstudio-is/sdk-components-react": "0.238.0",
-    "@webstudio-is/sdk-components-react-radix": "0.238.0",
-    "@webstudio-is/sdk-components-react-router": "0.238.0",
-    "@webstudio-is/sdk-components-react-remix": "0.238.0",
+    "@webstudio-is/css-engine": "0.252.2",
+    "@webstudio-is/http-client": "0.252.2",
+    "@webstudio-is/image": "0.252.2",
+    "@webstudio-is/sdk": "0.252.2",
+    "@webstudio-is/react-sdk": "0.252.2",
+    "@webstudio-is/sdk-components-animation": "0.252.2",
+    "@webstudio-is/sdk-components-react-radix": "0.252.2",
+    "@webstudio-is/sdk-components-react-remix": "0.252.2",
+    "@webstudio-is/sdk-components-react": "0.252.2",
+    "@webstudio-is/sdk-components-react-router": "0.252.2",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
-    "typecheck": "tsc",
+    "typecheck": "tsgo --noEmit",
     "build": "rm -rf lib && vite build",
     "test": "vitest run"
   }

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

@@ -41,6 +41,7 @@ import {
 import * as constants from "__CONSTANTS__";
 import css from "__CSS__?url";
 import { sitemap } from "__SITEMAP__";
+import { assets } from "__ASSETS__";
 
 const customFetch: typeof fetch = (input, init) => {
   if (typeof input !== "string") {
@@ -72,6 +73,12 @@ const customFetch: typeof fetch = (input, init) => {
     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 cachedFetch(projectId, input, init);
 };
 
@@ -238,16 +245,21 @@ export const action = async ({
       throw new Error("Form bot field not found");
     }
 
-    const submitTime = parseInt(formBotValue, 16);
-    // Assumes that the difference between the server time and the form submission time,
-    // including any client-server time drift, is within a 5-minute range.
-    // Note: submitTime might be NaN because formBotValue can be any string used for logging purposes.
-    // Example: `formBotValue: jsdom`, or `formBotValue: headless-env`
-    if (
-      Number.isNaN(submitTime) ||
-      Math.abs(Date.now() - submitTime) > 1000 * 60 * 5
-    ) {
-      throw new Error(`Form bot value invalid ${formBotValue}`);
+    // Skip timestamp validation for Brave browser
+    // Brave Shields blocks matchMedia fingerprinting detection used in bot protection
+    // See: https://github.com/brave/brave-browser/issues/46541
+    if (formBotValue !== "brave") {
+      const submitTime = parseInt(formBotValue, 16);
+      // Assumes that the difference between the server time and the form submission time,
+      // including any client-server time drift, is within a 5-minute range.
+      // Note: submitTime might be NaN because formBotValue can be any string used for logging purposes.
+      // Example: `formBotValue: jsdom`, or `formBotValue: headless-env`
+      if (
+        Number.isNaN(submitTime) ||
+        Math.abs(Date.now() - submitTime) > 1000 * 60 * 5
+      ) {
+        throw new Error(`Form bot value invalid ${formBotValue}`);
+      }
     }
 
     formData.delete(formIdFieldName);

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

@@ -9,6 +9,7 @@ import { Page, breakpoints } from "__CLIENT__";
 import { getPageMeta, getRemixParams, getResources } from "__SERVER__";
 import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
 import { sitemap } from "__SITEMAP__";
+import { assets } from "__ASSETS__";
 
 const customFetch: typeof fetch = (input, init) => {
   if (typeof input !== "string") {
@@ -40,6 +41,12 @@ const customFetch: typeof fetch = (input, init) => {
     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);
 };
 

package/templates/defaults/package.json

@@ -5,19 +5,19 @@
   "scripts": {
     "build": "remix vite:build",
     "dev": "remix vite:dev",
-    "typecheck": "tsc"
+    "typecheck": "tsgo --noEmit"
   },
   "dependencies": {
     "@remix-run/node": "2.16.5",
     "@remix-run/react": "2.16.5",
     "@remix-run/server-runtime": "2.16.5",
-    "@webstudio-is/image": "0.238.0",
-    "@webstudio-is/react-sdk": "0.238.0",
-    "@webstudio-is/sdk": "0.238.0",
-    "@webstudio-is/sdk-components-react": "0.238.0",
-    "@webstudio-is/sdk-components-animation": "0.238.0",
-    "@webstudio-is/sdk-components-react-radix": "0.238.0",
-    "@webstudio-is/sdk-components-react-remix": "0.238.0",
+    "@webstudio-is/image": "0.252.2",
+    "@webstudio-is/react-sdk": "0.252.2",
+    "@webstudio-is/sdk": "0.252.2",
+    "@webstudio-is/sdk-components-react": "0.252.2",
+    "@webstudio-is/sdk-components-animation": "0.252.2",
+    "@webstudio-is/sdk-components-react-radix": "0.252.2",
+    "@webstudio-is/sdk-components-react-remix": "0.252.2",
     "isbot": "^5.1.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
@@ -30,6 +30,6 @@
     "vite": "^6.3.4"
   },
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=22"
   }
 }

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

@@ -40,6 +40,7 @@ import {
 import * as constants from "__CONSTANTS__";
 import css from "__CSS__?url";
 import { sitemap } from "__SITEMAP__";
+import { assets } from "__ASSETS__";
 
 const customFetch: typeof fetch = (input, init) => {
   if (typeof input !== "string") {
@@ -71,6 +72,12 @@ const customFetch: typeof fetch = (input, init) => {
     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 cachedFetch(projectId, input, init);
 };
 
@@ -237,16 +244,21 @@ export const action = async ({
       throw new Error("Form bot field not found");
     }
 
-    const submitTime = parseInt(formBotValue, 16);
-    // Assumes that the difference between the server time and the form submission time,
-    // including any client-server time drift, is within a 5-minute range.
-    // Note: submitTime might be NaN because formBotValue can be any string used for logging purposes.
-    // Example: `formBotValue: jsdom`, or `formBotValue: headless-env`
-    if (
-      Number.isNaN(submitTime) ||
-      Math.abs(Date.now() - submitTime) > 1000 * 60 * 5
-    ) {
-      throw new Error(`Form bot value invalid ${formBotValue}`);
+    // Skip timestamp validation for Brave browser
+    // Brave Shields blocks matchMedia fingerprinting detection used in bot protection
+    // See: https://github.com/brave/brave-browser/issues/46541
+    if (formBotValue !== "brave") {
+      const submitTime = parseInt(formBotValue, 16);
+      // Assumes that the difference between the server time and the form submission time,
+      // including any client-server time drift, is within a 5-minute range.
+      // Note: submitTime might be NaN because formBotValue can be any string used for logging purposes.
+      // Example: `formBotValue: jsdom`, or `formBotValue: headless-env`
+      if (
+        Number.isNaN(submitTime) ||
+        Math.abs(Date.now() - submitTime) > 1000 * 60 * 5
+      ) {
+        throw new Error(`Form bot value invalid ${formBotValue}`);
+      }
     }
 
     formData.delete(formIdFieldName);

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

@@ -9,6 +9,7 @@ import { Page, breakpoints } from "__CLIENT__";
 import { getPageMeta, getRemixParams, getResources } from "__SERVER__";
 import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
 import { sitemap } from "__SITEMAP__";
+import { assets } from "__ASSETS__";
 
 const customFetch: typeof fetch = (input, init) => {
   if (typeof input !== "string") {
@@ -40,6 +41,12 @@ const customFetch: typeof fetch = (input, init) => {
     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);
 };
 

package/templates/react-router/package.json

@@ -5,18 +5,18 @@
   "scripts": {
     "build": "react-router build",
     "dev": "react-router dev",
-    "typecheck": "tsc"
+    "typecheck": "tsgo --noEmit"
   },
   "dependencies": {
     "@react-router/dev": "^7.5.3",
     "@react-router/fs-routes": "^7.5.3",
-    "@webstudio-is/image": "0.238.0",
-    "@webstudio-is/react-sdk": "0.238.0",
-    "@webstudio-is/sdk": "0.238.0",
-    "@webstudio-is/sdk-components-animation": "0.238.0",
-    "@webstudio-is/sdk-components-react-radix": "0.238.0",
-    "@webstudio-is/sdk-components-react-router": "0.238.0",
-    "@webstudio-is/sdk-components-react": "0.238.0",
+    "@webstudio-is/image": "0.252.2",
+    "@webstudio-is/react-sdk": "0.252.2",
+    "@webstudio-is/sdk": "0.252.2",
+    "@webstudio-is/sdk-components-animation": "0.252.2",
+    "@webstudio-is/sdk-components-react-radix": "0.252.2",
+    "@webstudio-is/sdk-components-react-router": "0.252.2",
+    "@webstudio-is/sdk-components-react": "0.252.2",
     "isbot": "^5.1.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
@@ -29,6 +29,6 @@
     "typescript": "5.8.2"
   },
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=22"
   }
 }

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

@@ -1,6 +1,6 @@
 {
   "scripts": {
-    "typecheck": "wrangler types && tsc",
+    "typecheck": "wrangler types && tsgo",
     "typegen": "wrangler types",
     "preview": "react-router build && vite preview",
     "deploy": "react-router build && wrangler deploy"

package/templates/ssg/app/route-templates/html/+Head.tsx

@@ -8,42 +8,14 @@ import {
 } from "__CLIENT__";
 import "__CSS__";
 
-export const Head = ({ data }: { data: PageContext["data"] }) => {
-  const { pageMeta } = data;
-  const { origin } = new URL(data.url);
+export const Head = ({}: { data: PageContext["data"] }) => {
   const ldJson = {
     "@context": "https://schema.org",
     "@type": "WebSite",
     name: siteName,
-    url: origin,
   };
-  let socialImageUrl = pageMeta.socialImageUrl;
-  if (pageMeta.socialImageAssetName) {
-    socialImageUrl = `${origin}${imageLoader({
-      src: `${assetBaseUrl}/${pageMeta.socialImageAssetName}`,
-      // Do not transform social image (not enough information do we need to do this)
-      format: "raw",
-    })}`;
-  }
-  const isTwitterCardSizeDefined = pageMeta.custom.some(
-    (meta) => meta.property === "twitter:card"
-  );
   return (
     <>
-      {data.url && <meta property="og:url" content={data.url} />}
-      <title>{pageMeta.title}</title>
-      <meta property="og:title" content={pageMeta.title} />
-      {pageMeta.description && (
-        <>
-          <meta name="description" content={pageMeta.description} />
-          <meta property="og:description" content={pageMeta.description} />
-        </>
-      )}
-      <meta property="og:type" content="website" />
-      {siteName && <meta property="og:site_name" content={siteName} />}
-      {socialImageUrl && (
-        <meta property="og:image" content={pageMeta.socialImageUrl} />
-      )}
       {siteName && (
         <script
           type="application/ld+json"
@@ -52,18 +24,6 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
           }}
         ></script>
       )}
-      {pageMeta.excludePageFromSearch && (
-        <meta name="robots" content="noindex, nofollow" />
-      )}
-      {pageMeta.custom.map(({ property, content }) => (
-        <meta key={property} property={property} content={content} />
-      ))}
-      {(pageMeta.socialImageAssetName !== undefined ||
-        pageMeta.socialImageUrl !== undefined) &&
-        isTwitterCardSizeDefined === false && (
-          <meta property="twitter:card" content="summary_large_image" />
-        )}
-
       {favIconAsset && (
         <link
           rel="icon"

package/templates/ssg/app/route-templates/html/+Page.tsx

@@ -1,10 +1,14 @@
 import type { PageContext } from "vike/types";
-import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
+import {
+  PageSettingsMeta,
+  PageSettingsTitle,
+  ReactSdkContext,
+} from "@webstudio-is/react-sdk/runtime";
 import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
-import { Page, breakpoints } from "__CLIENT__";
+import { Page, breakpoints, siteName } from "__CLIENT__";
 
 const PageComponent = ({ data }: { data: PageContext["data"] }) => {
-  const { system, resources, url } = data;
+  const { system, resources, url, pageMeta } = data;
   return (
     <ReactSdkContext.Provider
       value={{
@@ -17,6 +21,14 @@ const PageComponent = ({ data }: { data: PageContext["data"] }) => {
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
       <Page key={url} system={system} />
+      <PageSettingsMeta
+        url={url}
+        pageMeta={pageMeta}
+        siteName={siteName}
+        imageLoader={imageLoader}
+        assetBaseUrl={assetBaseUrl}
+      />
+      <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
     </ReactSdkContext.Provider>
   );
 };

package/templates/ssg/app/route-templates/html/+data.ts

@@ -1,7 +1,7 @@
 import type { PageContextServer } from "vike/types";
-import { redirect } from "vike/abort";
 import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
 import { getPageMeta, getResources } from "__SERVER__";
+import { assets } from "__ASSETS__";
 
 const customFetch: typeof fetch = (input, init) => {
   if (typeof input !== "string") {
@@ -26,6 +26,12 @@ const customFetch: typeof fetch = (input, init) => {
     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);
 };
 
@@ -50,14 +56,6 @@ export const data = async (pageContext: PageContextServer) => {
   );
   const pageMeta = getPageMeta({ system, resources });
 
-  if (pageMeta.redirect) {
-    const status =
-      pageMeta.status === 301 || pageMeta.status === 302
-        ? pageMeta.status
-        : 302;
-    throw redirect(pageMeta.redirect, status);
-  }
-
   return {
     url: url.href,
     system,

package/templates/ssg/package.json

@@ -5,15 +5,15 @@
   "scripts": {
     "build": "vite build",
     "dev": "vite dev",
-    "typecheck": "tsc"
+    "typecheck": "tsgo --noEmit"
   },
   "dependencies": {
-    "@webstudio-is/image": "0.238.0",
-    "@webstudio-is/react-sdk": "0.238.0",
-    "@webstudio-is/sdk": "0.238.0",
-    "@webstudio-is/sdk-components-react": "0.238.0",
-    "@webstudio-is/sdk-components-animation": "0.238.0",
-    "@webstudio-is/sdk-components-react-radix": "0.238.0",
+    "@webstudio-is/image": "0.252.2",
+    "@webstudio-is/react-sdk": "0.252.2",
+    "@webstudio-is/sdk": "0.252.2",
+    "@webstudio-is/sdk-components-react": "0.252.2",
+    "@webstudio-is/sdk-components-animation": "0.252.2",
+    "@webstudio-is/sdk-components-react-radix": "0.252.2",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vike": "^0.4.229"
@@ -26,6 +26,6 @@
     "vite": "^6.3.4"
   },
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=22"
   }
 }

package/templates/ssg/renderer/+onRenderClient.tsx

@@ -1,9 +1,5 @@
 import { type Root, createRoot } from "react-dom/client";
 import type { OnRenderClientSync } from "vike/types";
-// @todo think about how to make __generated__ typeable
-/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
-// @ts-ignore
-import { CustomCode } from "../app/__generated__/_index";
 
 let root: Root;
 
@@ -17,7 +13,7 @@ export const onRenderClient: OnRenderClientSync = (pageContext) => {
         <meta charSet="UTF-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Head data={pageContext.data} />
-        <CustomCode />
+        {/* avoid hydrating custom code on client, it will duplicate all scripts */}
       </head>
       <Page data={pageContext.data} />
     </>