webstudio 0.267.0 → 0.269.0

package/lib/cli.js

@@ -374,7 +374,7 @@ const getApiCompatibilityPayload = (value) => {
   return findPayload(value, /* @__PURE__ */ new WeakSet());
 };
 const name = "webstudio";
-const version = "0.267.0";
+const version = "0.269.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";
@@ -386,7 +386,7 @@ const scripts = { "typecheck": "tsgo --noEmit", "build": "rm -rf lib && vite bui
 const license = "AGPL-3.0-or-later";
 const engines = { "node": ">=22" };
 const dependencies = { "@clack/prompts": "^0.10.0", "@emotion/hash": "^0.9.2", "@trpc/client": "^10.45.2", "@webstudio-is/project-migrations": "workspace:*", "@webstudio-is/trpc-interface": "workspace:*", "acorn": "^8.14.1", "acorn-walk": "^8.3.4", "change-case": "^5.4.4", "deepmerge": "^4.3.1", "env-paths": "^3.0.0", "nanoid": "^5.1.5", "p-limit": "^6.2.0", "parse5": "7.3.0", "picocolors": "^1.1.1", "reserved-identifiers": "^1.0.0", "tinyexec": "^0.3.2", "warn-once": "^0.1.1", "yargs": "^17.7.2", "zod": "^3.24.2" };
-const devDependencies = { "@cloudflare/vite-plugin": "^1.1.0", "@netlify/vite-plugin-react-router": "^1.0.1", "@react-router/dev": "^7.5.3", "@react-router/fs-routes": "^7.5.3", "@remix-run/cloudflare": "^2.16.5", "@remix-run/cloudflare-pages": "^2.16.5", "@remix-run/dev": "^2.16.5", "@remix-run/node": "^2.16.5", "@remix-run/react": "^2.16.5", "@remix-run/server-runtime": "^2.16.5", "@types/react": "^18.2.70", "@types/react-dom": "^18.2.25", "@types/yargs": "^17.0.33", "@vercel/react-router": "^1.1.0", "@vitejs/plugin-react": "^4.4.1", "@webstudio-is/css-engine": "workspace:*", "@webstudio-is/http-client": "workspace:*", "@webstudio-is/image": "workspace:*", "@webstudio-is/react-sdk": "workspace:*", "@webstudio-is/sdk": "workspace:*", "@webstudio-is/sdk-components-animation": "workspace:*", "@webstudio-is/sdk-components-react": "workspace:*", "@webstudio-is/sdk-components-react-radix": "workspace:*", "@webstudio-is/sdk-components-react-remix": "workspace:*", "@webstudio-is/sdk-components-react-router": "workspace:*", "@webstudio-is/tsconfig": "workspace:*", "h3": "^1.15.1", "ipx": "^3.0.3", "isbot": "^5.1.25", "prettier": "3.5.3", "react": "18.3.0-canary-14898b6a9-20240318", "react-dom": "18.3.0-canary-14898b6a9-20240318", "react-router": "^7.5.3", "ts-expect": "^1.3.0", "vike": "^0.4.229", "vite": "^6.3.4", "vitest": "^3.1.2", "wrangler": "^3.63.2" };
+const devDependencies = { "@cloudflare/vite-plugin": "^1.1.0", "@netlify/vite-plugin-react-router": "^1.0.1", "@react-router/dev": "^7.5.3", "@react-router/fs-routes": "^7.5.3", "@remix-run/cloudflare": "^2.16.5", "@remix-run/cloudflare-pages": "^2.16.5", "@remix-run/dev": "^2.16.5", "@remix-run/node": "^2.16.5", "@remix-run/react": "^2.16.5", "@remix-run/server-runtime": "^2.16.5", "@types/react": "^18.2.70", "@types/react-dom": "^18.2.25", "@types/yargs": "^17.0.33", "@vercel/react-router": "^1.1.0", "@vitejs/plugin-react": "^4.4.1", "@webstudio-is/css-engine": "workspace:*", "@webstudio-is/http-client": "workspace:*", "@webstudio-is/image": "workspace:*", "@webstudio-is/react-sdk": "workspace:*", "@webstudio-is/sdk": "workspace:*", "@webstudio-is/sdk-components-animation": "workspace:*", "@webstudio-is/sdk-components-react": "workspace:*", "@webstudio-is/sdk-components-react-radix": "workspace:*", "@webstudio-is/sdk-components-react-remix": "workspace:*", "@webstudio-is/sdk-components-react-router": "workspace:*", "@webstudio-is/tsconfig": "workspace:*", "@webstudio-is/wsauth": "workspace:*", "h3": "^1.15.1", "ipx": "^3.0.3", "isbot": "^5.1.25", "prettier": "3.5.3", "react": "18.3.0-canary-14898b6a9-20240318", "react-dom": "18.3.0-canary-14898b6a9-20240318", "react-router": "^7.5.3", "ts-expect": "^1.3.0", "vike": "^0.4.229", "vite": "^6.3.4", "vitest": "^3.1.2", "wrangler": "^3.63.2" };
 const packageJson = {
   name,
   version,
@@ -892,6 +892,293 @@ new Map(
     return weightData.names.map((name2) => [name2, weight]);
   }).flat()
 );
+var basicLoginErrors = (login) => {
+  const issues = [];
+  if (login.length === 0) {
+    issues.push({ path: ["login"], message: "Login is required" });
+  }
+  if (login.includes(":")) {
+    issues.push({ path: ["login"], message: "Login can't contain a colon" });
+  }
+  if (/\s/.test(login)) {
+    issues.push({
+      path: ["login"],
+      message: "Login can't contain whitespace"
+    });
+  }
+  return issues;
+};
+var basicPasswordErrors = (password) => {
+  const issues = [];
+  if (password.length === 0) {
+    issues.push({ path: ["password"], message: "Password is required" });
+  }
+  if (/\s/.test(password)) {
+    issues.push({
+      path: ["password"],
+      message: "Password can't contain whitespace"
+    });
+  }
+  return issues;
+};
+var validateBasicAuth = ({
+  login,
+  password
+}) => {
+  const issues = [...basicLoginErrors(login), ...basicPasswordErrors(password)];
+  if (issues.length > 0) {
+    const loginErrors = issues.filter((issue) => issue.path[0] === "login").map((issue) => issue.message);
+    const passwordErrors = issues.filter((issue) => issue.path[0] === "password").map((issue) => issue.message);
+    return {
+      issues,
+      errors: {
+        login: loginErrors.length > 0 ? loginErrors : void 0,
+        password: passwordErrors.length > 0 ? passwordErrors : void 0
+      }
+    };
+  }
+  return {
+    auth: {
+      method: "basic",
+      login,
+      password,
+      credentials: `${login}:${password}`
+    }
+  };
+};
+var createBasicAuthRoute = ({
+  route,
+  login,
+  password
+}) => {
+  const routeError = validateWsAuthRoute(route);
+  if (routeError) {
+    throw new Error(routeError);
+  }
+  const auth = validateBasicAuth({ login, password }).auth;
+  if (auth === void 0) {
+    throw new Error(
+      'Basic auth requires non-empty login and password; login cannot contain ":" and neither field can contain whitespace'
+    );
+  }
+  return { route, auth };
+};
+var createWsAuthRouteFromPage = ({
+  route,
+  auth
+}) => {
+  if (auth === void 0) {
+    return;
+  }
+  if ("method" in auth && auth.method !== "basic" || "type" in auth && auth.type !== "basic") {
+    throw new Error(`Unsupported auth method for route "${route}"`);
+  }
+  return createBasicAuthRoute({
+    route,
+    login: auth.login,
+    password: auth.password
+  });
+};
+var isRecord = (value) => {
+  return typeof value === "object" && value !== null && Array.isArray(value) === false;
+};
+var parameterSegment = /^:\w+[?*]?$/;
+var validateWsAuthRoute = (route) => {
+  if (route.startsWith("/") === false) {
+    return 'Route must start with "/"';
+  }
+  if (route === "/") {
+    return;
+  }
+  if (route !== "/" && route.endsWith("/")) {
+    return 'Route must not end with "/"';
+  }
+  if (route.includes("//")) {
+    return 'Route must not contain repeating "/"';
+  }
+  const segments = route.slice(1).split("/");
+  for (let index = 0; index < segments.length; index += 1) {
+    const segment = segments[index];
+    if (segment === void 0 || segment === "") {
+      return "Route contains an empty segment";
+    }
+    if (segment === "*" || /^:\w+\*$/.test(segment)) {
+      if (index !== segments.length - 1) {
+        return "Wildcard route segment must be the last segment";
+      }
+      continue;
+    }
+    if (segment.startsWith(":") && parameterSegment.test(segment) === false) {
+      return `Invalid route parameter "${segment}"`;
+    }
+    if (segment.includes("*")) {
+      return "Wildcard can only be used as * or :name*";
+    }
+  }
+};
+var parseJson = (content, errors) => {
+  if (content.trim() === "") {
+    return { version: 1, routes: {} };
+  }
+  try {
+    return JSON.parse(content);
+  } catch (error) {
+    errors.push({
+      path: "$",
+      message: error instanceof Error ? error.message : "Invalid JSON"
+    });
+  }
+};
+var parseWsAuth = (content) => {
+  const routes = [];
+  const errors = [];
+  const json = parseJson(content, errors);
+  if (json === void 0) {
+    return { routes, errors };
+  }
+  if (isRecord(json) === false) {
+    errors.push({ path: "$", message: "Auth config must be an object" });
+    return { routes, errors };
+  }
+  if (json.version !== 1) {
+    errors.push({ path: "version", message: "Version must be 1" });
+  }
+  if (isRecord(json.routes) === false) {
+    errors.push({ path: "routes", message: "Routes must be an object" });
+    return { routes, errors };
+  }
+  for (const [route, authInput] of Object.entries(json.routes)) {
+    const routeError = validateWsAuthRoute(route);
+    if (routeError) {
+      errors.push({
+        path: `routes.${JSON.stringify(route)}`,
+        message: routeError
+      });
+      continue;
+    }
+    if (isRecord(authInput) === false) {
+      errors.push({
+        path: `routes.${JSON.stringify(route)}`,
+        message: "Auth rule must be an object"
+      });
+      continue;
+    }
+    if (authInput.method !== "basic") {
+      errors.push({
+        path: `routes.${JSON.stringify(route)}.method`,
+        message: 'Auth method must be "basic"'
+      });
+      continue;
+    }
+    const login = authInput.login;
+    const password = authInput.password;
+    if (typeof login !== "string") {
+      errors.push({
+        path: `routes.${JSON.stringify(route)}.login`,
+        message: "Login must be a string"
+      });
+      continue;
+    }
+    if (typeof password !== "string") {
+      errors.push({
+        path: `routes.${JSON.stringify(route)}.password`,
+        message: "Password must be a string"
+      });
+      continue;
+    }
+    const validation = validateBasicAuth({ login, password });
+    if (validation.auth === void 0) {
+      for (const issue of validation.issues ?? []) {
+        errors.push({
+          path: `routes.${JSON.stringify(route)}.${issue.path[0]}`,
+          message: issue.message
+        });
+      }
+      continue;
+    }
+    const auth = validation.auth;
+    routes.push({ route, auth });
+  }
+  return { routes, errors };
+};
+var parseWsAuthOrThrow = (content, sourceName) => {
+  const result = parseWsAuth(content);
+  if (result.errors.length > 0) {
+    const message = result.errors.map((error) => `${sourceName}:${error.path} ${error.message}`).join("\n");
+    throw new Error(message);
+  }
+  return result.routes;
+};
+var serializeWsAuth = (routes) => {
+  const config = { version: 1, routes: {} };
+  for (const { route, auth } of routes) {
+    switch (auth.method) {
+      case "basic":
+        config.routes[route] = {
+          method: "basic",
+          login: auth.login,
+          password: auth.password
+        };
+        break;
+    }
+  }
+  return `${JSON.stringify(config, null, 2)}
+`;
+};
+var collectWsAuthRoutes = (sources) => {
+  return sources.flatMap((source) => {
+    if ("content" in source) {
+      return parseWsAuthOrThrow(source.content, source.name);
+    }
+    return source.routes;
+  });
+};
+var buildWsAuth = (sources) => {
+  const content = serializeWsAuth(collectWsAuthRoutes(sources));
+  const routes = parseWsAuthOrThrow(content, "Serialized auth config");
+  return {
+    routes,
+    content
+  };
+};
+var createWsAuthResources = ({
+  projectContent = "",
+  pages,
+  projectSourceName = "Auth",
+  generatedSourceName = "Generated page auth"
+}) => {
+  const generatedRoutes = pages.flatMap((page) => {
+    const route = createWsAuthRouteFromPage(page);
+    return route === void 0 ? [] : [route];
+  });
+  const result = buildWsAuth([
+    { name: projectSourceName, content: projectContent },
+    { name: generatedSourceName, routes: generatedRoutes }
+  ]);
+  console.info("[wsauth] create resources", {
+    projectContentLength: projectContent.length,
+    projectContent,
+    pageCount: pages.length,
+    pages,
+    generatedRouteCount: generatedRoutes.length,
+    generatedRoutes,
+    routeCount: result.routes.length,
+    routes: result.routes
+  });
+  return {
+    ...result,
+    module: [
+      `import type { WsAuthRoute } from "@webstudio-is/wsauth";`,
+      "",
+      `export const authRoutes: WsAuthRoute[] = ${JSON.stringify(
+        result.routes,
+        null,
+        2
+      )};`,
+      ""
+    ].join("\n")
+  };
+};
 function dot3(a2, b2) {
   return a2[0] * b2[0] + a2[1] * b2[1] + a2[2] * b2[2];
 }
@@ -2687,8 +2974,19 @@ const oklch = new ColorSpace({
     }
   }
 });
+var isKeyword = (value, keyword) => {
+  if (value.type === "keyword") {
+    return value.value === keyword;
+  }
+  if (value.type === "layers") {
+    return value.value.some((layer) => isKeyword(layer, keyword));
+  }
+  return false;
+};
 var prefixStyles = (styleMap) => {
   const newStyleMap = /* @__PURE__ */ new Map();
+  const backgroundClip = styleMap.get("background-clip");
+  const hasTextBackgroundClip = backgroundClip !== void 0 && isKeyword(backgroundClip, "text");
   for (const [property, value] of styleMap) {
     if (property === "background-clip") {
       newStyleMap.set("-webkit-background-clip", value);
@@ -2702,6 +3000,9 @@ var prefixStyles = (styleMap) => {
     if (property === "backdrop-filter") {
       newStyleMap.set("-webkit-backdrop-filter", value);
     }
+    if (property === "color" && hasTextBackgroundClip && isKeyword(value, "transparent")) {
+      newStyleMap.set("-webkit-text-fill-color", value);
+    }
     if (property === "view-timeline-name" || property === "scroll-timeline-name" || property === "view-timeline-inset") {
       newStyleMap.set(`--${property}`, value);
     }
@@ -3807,7 +4108,36 @@ var PageTitle = z.string().refine(
   (val) => val.length >= MIN_TITLE_LENGTH,
   `Minimum ${MIN_TITLE_LENGTH} characters required`
 );
-var documentTypes = ["html", "xml"];
+var documentTypes = ["html", "xml", "text"];
+var BasicAuthFields = {
+  login: z.string(),
+  password: z.string()
+};
+var validateBasicAuthFields = ({
+  login,
+  password
+}, context) => {
+  for (const issue of validateBasicAuth({ login, password }).issues ?? []) {
+    context.addIssue({
+      code: z.ZodIssueCode.custom,
+      path: issue.path,
+      message: issue.message
+    });
+  }
+};
+var PageBasicAuth = z.object({
+  method: z.literal("basic"),
+  ...BasicAuthFields
+}).superRefine(validateBasicAuthFields);
+var LegacyPageBasicAuth = z.object({
+  type: z.literal("basic"),
+  ...BasicAuthFields
+}).superRefine(validateBasicAuthFields).transform(({ login, password }) => ({
+  method: "basic",
+  login,
+  password
+}));
+var PageAuth = z.union([PageBasicAuth, LegacyPageBasicAuth]);
 var commonPageFields = {
   id: PageId,
   name: PageName,
@@ -3825,6 +4155,8 @@ var commonPageFields = {
     status: z.string().optional(),
     redirect: z.string().optional(),
     documentType: z.optional(z.enum(documentTypes)),
+    content: z.string().optional(),
+    auth: PageAuth.optional(),
     custom: z.array(
       z.object({
         property: z.string(),
@@ -3875,12 +4207,21 @@ var Page = z.object({
   ...commonPageFields,
   path: z.union([HomePagePath, PagePath])
 });
+var PageTemplate = z.object({
+  id: PageId,
+  name: PageName,
+  title: PageTitle,
+  rootInstanceId: z.string(),
+  systemDataSourceId: z.string().optional(),
+  meta: commonPageFields.meta
+});
 var ProjectMeta = z.object({
   // All fields are optional to ensure consistency and allow for the addition of new fields without requiring migration
   siteName: z.string().optional(),
   contactEmail: z.string().optional(),
   faviconAssetId: z.string().optional(),
-  code: z.string().optional()
+  code: z.string().optional(),
+  auth: z.string().optional()
 });
 var ProjectNewRedirectPath = z.string().min(1, "Path is required").refine((data) => {
   try {
@@ -3906,6 +4247,7 @@ var Pages = z.object({
   homePageId: PageId,
   rootFolderId: FolderId,
   pages: z.map(PageId, Page),
+  pageTemplates: z.map(PageId, PageTemplate).optional(),
   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);
@@ -3947,6 +4289,22 @@ var Pages = z.object({
       });
     }
   }
+  for (const [templateId, template] of pages.pageTemplates ?? []) {
+    if (template.id !== templateId) {
+      context.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["pageTemplates", templateId, "id"],
+        message: "Page template id must match its record key"
+      });
+    }
+    if (pages.pages.has(templateId)) {
+      context.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["pageTemplates", templateId, "id"],
+        message: "Page template id must not match an existing page id"
+      });
+    }
+  }
   for (const [folderId, folder] of pages.folders) {
     if (folder.id !== folderId) {
       context.addIssue({
@@ -4590,6 +4948,13 @@ var Select = z.object({
   defaultValue: z.string().optional(),
   options: z.array(z.string())
 });
+var TimeZone = z.object({
+  ...common,
+  control: z.literal("timeZone"),
+  type: z.literal("string"),
+  defaultValue: z.string().optional(),
+  options: z.array(z.string())
+});
 var Check = z.object({
   ...common,
   control: z.literal("check"),
@@ -4670,6 +5035,7 @@ var PropMeta = z.union([
   Radio,
   InlineRadio,
   Select,
+  TimeZone,
   MultiSelect,
   Check,
   InlineCheck,
@@ -4697,6 +5063,7 @@ var componentCategories = [
   "localization",
   "radix",
   "xml",
+  "text",
   "other",
   "hidden",
   "internal"
@@ -5572,6 +5939,29 @@ var parseComponentName = (componentName) => {
   }
   return [namespace, name2];
 };
+var getHtmlTagsFromProps = (props) => {
+  const tags2 = /* @__PURE__ */ new Map();
+  for (const prop of props.values()) {
+    if (prop.type === "string" && prop.name === "tag") {
+      tags2.set(prop.instanceId, prop.value);
+    }
+  }
+  return tags2;
+};
+var getHtmlTagFromInstance = ({
+  instance: instance2,
+  metas,
+  props,
+  htmlTagsByInstanceId
+}) => {
+  if (instance2.component === "XmlNode") {
+    return;
+  }
+  const meta = metas.get(instance2.component);
+  const metaTag = Object.keys((meta == null ? void 0 : meta.presetStyle) ?? {}).at(0);
+  const propTag = (htmlTagsByInstanceId == null ? void 0 : htmlTagsByInstanceId.get(instance2.id)) ?? getHtmlTagsFromProps(props).get(instance2.id);
+  return instance2.tag ?? propTag ?? metaTag;
+};
 var getIndexesWithinAncestors = (metas, instances, rootIds) => {
   const ancestors = /* @__PURE__ */ new Set();
   for (const meta of metas.values()) {
@@ -5624,6 +6014,49 @@ var systemParameter = {
   type: "parameter",
   name: "system"
 };
+var walkAssignmentTarget = (node, visitor) => {
+  var _a2, _b2, _c2, _d2;
+  if (node.type === "Identifier") {
+    (_a2 = visitor.Identifier) == null ? void 0 : _a2.call(visitor, node, "binding");
+    return;
+  }
+  if (node.type === "MemberExpression") {
+    (_b2 = visitor.MemberExpression) == null ? void 0 : _b2.call(visitor, node);
+    const { object } = node;
+    if (object.type === "Identifier") {
+      (_c2 = visitor.Identifier) == null ? void 0 : _c2.call(visitor, object, "memberObject");
+    } else if (object.type === "MemberExpression") {
+      walkAssignmentTarget(object, visitor);
+    }
+    return;
+  }
+  (_d2 = visitor.UnsupportedPattern) == null ? void 0 : _d2.call(visitor, node);
+};
+var stringMethodReturnKindByName = /* @__PURE__ */ new Map([
+  ["toLowerCase", "string"],
+  ["replace", "string"],
+  ["split", "array"],
+  ["slice", "string"],
+  ["at", "unknown"],
+  ["endsWith", "boolean"],
+  ["includes", "boolean"],
+  ["startsWith", "boolean"],
+  ["toString", "string"],
+  ["toUpperCase", "string"],
+  ["toLocaleLowerCase", "string"],
+  ["toLocaleUpperCase", "string"]
+]);
+var arrayMethodReturnKindByName = /* @__PURE__ */ new Map([
+  ["at", "unknown"],
+  ["includes", "boolean"],
+  ["join", "string"],
+  ["slice", "array"],
+  ["toString", "string"]
+]);
+new Set(
+  stringMethodReturnKindByName.keys()
+);
+new Set(arrayMethodReturnKindByName.keys());
 var transpileExpression = ({
   expression,
   executable = false,
@@ -5636,17 +6069,44 @@ var transpileExpression = ({
     const message = error.message;
     throw Error(`${message} in ${JSON.stringify(expression)}`);
   }
+  const assignmentTargetMemberRanges = [];
+  if (executable) {
+    simple(root, {
+      AssignmentExpression(node) {
+        walkAssignmentTarget(node.left, {
+          MemberExpression(node2) {
+            assignmentTargetMemberRanges.push([node2.start, node2.end]);
+          }
+        });
+      }
+    });
+  }
   const replacements = [];
+  const replacementIndexByRange = /* @__PURE__ */ new Map();
+  const addReplacement = (start, end, fragment, { replaceExisting = false } = {}) => {
+    const range = `${start}:${end}`;
+    const existingIndex = replacementIndexByRange.get(range);
+    if (existingIndex !== void 0) {
+      if (replaceExisting) {
+        replacements[existingIndex] = [start, end, fragment];
+      }
+      return;
+    }
+    replacementIndexByRange.set(range, replacements.length);
+    replacements.push([start, end, fragment]);
+  };
   const replaceIdentifier = (node, assignee) => {
     const newName = replaceVariable == null ? void 0 : replaceVariable(node.name, assignee);
     if (newName) {
-      replacements.push([node.start, node.end, newName]);
+      addReplacement(node.start, node.end, newName, {
+        replaceExisting: assignee
+      });
     }
   };
   simple(root, {
     Identifier: (node) => replaceIdentifier(node, false),
     AssignmentExpression(node) {
-      simple(node.left, {
+      walkAssignmentTarget(node.left, {
         Identifier: (node2) => replaceIdentifier(node2, true)
       });
     },
@@ -5654,13 +6114,18 @@ var transpileExpression = ({
       if (executable === false || node.optional) {
         return;
       }
+      if (assignmentTargetMemberRanges.some(
+        ([start, end]) => start === node.start && end === node.end
+      )) {
+        return;
+      }
       if (node.computed === false) {
         const dotIndex = expression.indexOf(".", node.object.end);
-        replacements.push([dotIndex, dotIndex, "?"]);
+        addReplacement(dotIndex, dotIndex, "?");
       }
       if (node.computed === true) {
         const dotIndex = expression.indexOf("[", node.object.end);
-        replacements.push([dotIndex, dotIndex, "?."]);
+        addReplacement(dotIndex, dotIndex, "?.");
       }
     },
     CallExpression(node) {
@@ -5670,7 +6135,7 @@ var transpileExpression = ({
       if (node.callee.type === "MemberExpression") {
         const openParenIndex = expression.indexOf("(", node.callee.end);
         if (openParenIndex !== -1) {
-          replacements.push([openParenIndex, openParenIndex, "?."]);
+          addReplacement(openParenIndex, openParenIndex, "?.");
         }
       }
     }
@@ -5744,14 +6209,21 @@ var getHomePage = (pages) => {
   }
   return homePage;
 };
-var findPageByIdOrPath = (idOrPath, pages) => {
+function findPageByIdOrPath(idOrPath, pages, options = {}) {
+  var _a2;
   if (idOrPath === "" || idOrPath === "/" || idOrPath === pages.homePageId) {
     return getHomePage(pages);
   }
-  return getAllPages(pages).find(
+  const found = getAllPages(pages).find(
     (page) => page.id === idOrPath || getPagePath(page.id, pages) === idOrPath
   );
-};
+  if (found) {
+    return found;
+  }
+  if (options.includeTemplates) {
+    return (_a2 = pages.pageTemplates) == null ? void 0 : _a2.get(idOrPath);
+  }
+}
 var getPagePath = (id, pages) => {
   const foldersMap = /* @__PURE__ */ new Map();
   const childParentMap = /* @__PURE__ */ new Map();
@@ -6063,6 +6535,12 @@ var generatePageMeta = ({
     usedDataSources,
     scope: localScope
   });
+  const contentExpression = generateExpression({
+    expression: page.meta.content ?? "undefined",
+    dataSources,
+    usedDataSources,
+    scope: localScope
+  });
   let customExpression = "";
   customExpression += `[
 `;
@@ -6071,7 +6549,7 @@ var generatePageMeta = ({
       continue;
     }
     const propertyExpression = JSON.stringify(customMeta.property);
-    const contentExpression = generateExpression({
+    const contentExpression2 = generateExpression({
       expression: customMeta.content,
       dataSources,
       usedDataSources,
@@ -6081,7 +6559,7 @@ var generatePageMeta = ({
 `;
     customExpression += `        property: ${propertyExpression},
 `;
-    customExpression += `        content: ${contentExpression},
+    customExpression += `        content: ${contentExpression2},
 `;
     customExpression += `      },
 `;
@@ -6146,6 +6624,8 @@ var generatePageMeta = ({
   generated += `    status: ${statusExpression},
 `;
   generated += `    redirect: ${redirectExpression},
+`;
+  generated += `    content: ${contentExpression},
 `;
   generated += `    custom: ${customExpression},
 `;
@@ -6209,22 +6689,19 @@ var generateCss = ({
   const scope = createScope([], normalizeClassName, "-");
   const tagsByComponent = /* @__PURE__ */ new Map();
   tagsByComponent.set(rootComponent, /* @__PURE__ */ new Set(["html"]));
-  const tagByInstanceId = /* @__PURE__ */ new Map();
-  for (const prop of props.values()) {
-    if (prop.type === "string" && prop.name === "tag") {
-      tagByInstanceId.set(prop.instanceId, prop.value);
-    }
-  }
+  const htmlTagsByInstanceId = getHtmlTagsFromProps(props);
   for (const instance2 of instances.values()) {
-    const propTag = tagByInstanceId.get(instance2.id);
-    const meta = componentMetas.get(instance2.component);
-    const metaTag = Object.keys((meta == null ? void 0 : meta.presetStyle) ?? {}).at(0);
     let componentTags = tagsByComponent.get(instance2.component);
     if (componentTags === void 0) {
       componentTags = /* @__PURE__ */ new Set();
       tagsByComponent.set(instance2.component, componentTags);
     }
-    const tag = instance2.tag ?? propTag ?? metaTag;
+    const tag = getHtmlTagFromInstance({
+      instance: instance2,
+      metas: componentMetas,
+      props,
+      htmlTagsByInstanceId
+    });
     if (tag) {
       componentTags.add(tag);
     }
@@ -6926,7 +7403,7 @@ var generateJsxChildren = ({
         usedDataSources,
         scope
       });
-      generatedChildren = `{${expression}}
+      generatedChildren = `{renderText(${expression})}
 `;
       continue;
     }
@@ -7107,11 +7584,12 @@ var migratePages = (pages) => {
   if (isSerializedPages(pages) && pages.pages instanceof Map && pages.folders instanceof Map) {
     const currentPages = pages;
     const result = Pages.safeParse(currentPages);
-    if (result.success) {
+    if (result.success && currentPages.pageTemplates !== void 0) {
       return currentPages;
     }
     return {
       ...currentPages,
+      pageTemplates: currentPages.pageTemplates ?? /* @__PURE__ */ new Map(),
       folders: removeOrphanFolderChildren(
         currentPages.pages,
         currentPages.folders
@@ -7128,6 +7606,7 @@ var migratePages = (pages) => {
       homePageId: pages.homePageId,
       rootFolderId: pages.rootFolderId,
       pages: nextPages2,
+      pageTemplates: pages.pageTemplates === void 0 ? /* @__PURE__ */ new Map() : toMap(pages.pageTemplates),
       folders: removeOrphanFolderChildren(nextPages2, nextFolders2)
     };
   }
@@ -7184,6 +7663,7 @@ var migratePages = (pages) => {
     homePageId: homePage.id,
     rootFolderId: rootFolder.id,
     pages: nextPages,
+    pageTemplates: /* @__PURE__ */ new Map(),
     folders: nextFolders
   };
 };
@@ -7645,7 +8125,7 @@ const g$3 = {
 const t$f = {
   tag: { required: false, control: "text", type: "string" }
 };
-const n$6 = {
+const n$7 = {
   icon: TextIcon,
   presetStyle: {
     div: [
@@ -7841,14 +8321,14 @@ const c$4 = {
   }
 };
 const o$v = {};
-const r$d = {
+const r$c = {
   form: [
     ...form,
     { property: "min-height", value: { type: "unit", unit: "px", value: 20 } }
   ]
 }, p$4 = {
   label: "Form",
-  presetStyle: r$d,
+  presetStyle: r$c,
   initialProps: ["id", "class", "action"],
   props: o$v
 };
@@ -7862,7 +8342,7 @@ const e$o = {
   },
   quality: { required: false, control: "number", type: "number" }
 };
-const r$c = {
+const r$b = {
   img: [
     ...img,
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
@@ -7887,7 +8367,7 @@ const r$c = {
 }, 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: r$c,
+  presetStyle: r$b,
   order: 0,
   initialProps: [
     "id",
@@ -7978,7 +8458,7 @@ const e$n = {
       value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
     }
   ]
-}, r$b = {
+}, r$a = {
   presetStyle: e$n,
   initialProps: ["id", "class", "cite"],
   props: o$u
@@ -8165,7 +8645,7 @@ const e$k = {
     description: "Value of the form control"
   }
 };
-const r$a = {
+const r$9 = {
   input: [
     ...radio,
     {
@@ -8176,7 +8656,7 @@ const r$a = {
 }, m$7 = {
   label: "Radio",
   icon: RadioCheckedIcon,
-  presetStyle: r$a,
+  presetStyle: r$9,
   initialProps: ["id", "class", "name", "value", "required", "checked"],
   props: e$k
 };
@@ -8940,15 +9420,22 @@ const e$d = {
     defaultValue: "medium",
     options: ["full", "long", "medium", "short", "none"]
   },
+  datetime: {
+    required: false,
+    control: "text",
+    type: "string",
+    defaultValue: "dateTime attribute is not set",
+    description: "Machine-readable value"
+  },
   format: {
     description: `Custom format template. Overrides Date Style and Time Style.
 
 Tokens: YYYY/YY (year), MMMM/MMM/MM/M (month), DDDD/DDD/DD/D (day), HH/H (hours), mm/m (minutes), ss/s (seconds)
 
 Examples:
-"YYYY-MM-DD" → 2025-11-03
-"DDDD, MMMM D" → Monday, November 3
-"DDD, D. MMM YYYY" → Mon, 3. Nov 2025
+- "YYYY-MM-DD" → 2025-11-03
+- "DDDD, MMMM D" → Monday, November 3
+- "DDD, D. MMM YYYY" → Mon, 3. Nov 2025
 
 Day and month names use the selected language.`,
     required: false,
@@ -9040,9 +9527,19 @@ Day and month names use the selected language.`,
     type: "string",
     defaultValue: "none",
     options: ["full", "long", "medium", "short", "none"]
+  },
+  timeZone: {
+    description: `Time zone used to format the date.
+
+Use "UTC" for deterministic UTC output, "visitor" to use the browser time
+zone after hydration, or an IANA time zone like "Europe/Berlin".`,
+    required: false,
+    control: "text",
+    type: "string",
+    defaultValue: "UTC"
   }
 };
-const r$9 = {
+const n$6 = {
   category: "localization",
   description: "Converts machine-readable date and time to a human-readable format.",
   contentModel: {
@@ -9058,6 +9555,7 @@ const r$9 = {
     "country",
     "dateStyle",
     "timeStyle",
+    "timeZone",
     "format"
   ],
   props: {
@@ -9084,6 +9582,15 @@ const r$9 = {
       ...e$d.timeStyle,
       contentMode: true
     },
+    timeZone: {
+      required: false,
+      control: "timeZone",
+      type: "string",
+      defaultValue: "UTC",
+      options: ["UTC", "visitor"],
+      description: 'Timezone used to display the date. Use "visitor" to display each visitor’s browser timezone after the page loads, or select/type an IANA timezone like "Europe/Berlin".',
+      contentMode: true
+    },
     format: {
       ...e$d.format,
       contentMode: true
@@ -9238,7 +9745,7 @@ const n$5 = {
 };
 const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Blockquote: r$b,
+  Blockquote: r$a,
   Body: i$9,
   Bold: p$6,
   Box: g$3,
@@ -9272,9 +9779,9 @@ const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   Span: e$s,
   Subscript: s$3,
   Superscript: o$z,
-  Text: n$6,
+  Text: n$7,
   Textarea: l$4,
-  Time: r$9,
+  Time: n$6,
   Video: n$5,
   Vimeo: s$2,
   VimeoPlayButton: c$2,
@@ -9879,7 +10386,15 @@ const e$5 = {
     type: "string",
     description: "Current value of the element"
   }
-}, t$2 = {}, r$3 = {}, n$2 = {};
+}, t$2 = {}, n$2 = {}, r$3 = {
+  forceMount: {
+    description: "Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries or keeping content available in the DOM.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: true
+  }
+};
 const C$1 = {
   icon: AccordionIcon,
   contentModel: {
@@ -9946,7 +10461,7 @@ const C$1 = {
   presetStyle: {
     button: [button, b$2].flat()
   },
-  props: r$3
+  props: n$2
 }, H = {
   label: "Item Content",
   icon: ContentIcon,
@@ -9961,7 +10476,7 @@ const C$1 = {
   presetStyle: {
     div
   },
-  props: n$2
+  props: r$3
 };
 const e$4 = {
   defaultValue: { required: false, control: "text", type: "string" },
@@ -10547,6 +11062,10 @@ const createFramework$2 = async () => {
     join(routeTemplatesDir, "xml.tsx"),
     "utf8"
   );
+  const textTemplate = await readFile(
+    join(routeTemplatesDir, "text.tsx"),
+    "utf8"
+  );
   const defaultSitemapTemplate = await readFile(
     join(routeTemplatesDir, "default-sitemap.tsx"),
     "utf8"
@@ -10556,7 +11075,7 @@ const createFramework$2 = async () => {
     "utf8"
   );
   await rm(routeTemplatesDir, { recursive: true, force: true });
-  const base = "@webstudio-is/sdk-components-react";
+  const base = "@webstudio-is/sdk-components-react/components";
   const remix = "@webstudio-is/sdk-components-react-remix";
   const reactRadix = "@webstudio-is/sdk-components-react-radix";
   const animation = "@webstudio-is/sdk-components-animation";
@@ -10600,6 +11119,12 @@ const createFramework$2 = async () => {
         template: xmlTemplate
       }
     ],
+    text: ({ pagePath }) => [
+      {
+        file: join("app", "routes", `${generateRemixRoute(pagePath)}.tsx`),
+        template: textTemplate
+      }
+    ],
     redirect: ({ pagePath }) => [
       {
         file: join("app", "routes", `${generateRemixRoute(pagePath)}.ts`),
@@ -10628,6 +11153,10 @@ const createFramework$1 = async () => {
     join(routeTemplatesDir, "xml.tsx"),
     "utf8"
   );
+  const textTemplate = await readFile(
+    join(routeTemplatesDir, "text.tsx"),
+    "utf8"
+  );
   const defaultSitemapTemplate = await readFile(
     join(routeTemplatesDir, "default-sitemap.tsx"),
     "utf8"
@@ -10637,7 +11166,7 @@ const createFramework$1 = async () => {
     "utf8"
   );
   await rm(routeTemplatesDir, { recursive: true, force: true });
-  const base = "@webstudio-is/sdk-components-react";
+  const base = "@webstudio-is/sdk-components-react/components";
   const reactRouter = "@webstudio-is/sdk-components-react-router";
   const reactRadix = "@webstudio-is/sdk-components-react-radix";
   const animation = "@webstudio-is/sdk-components-animation";
@@ -10681,6 +11210,12 @@ const createFramework$1 = async () => {
         template: xmlTemplate
       }
     ],
+    text: ({ pagePath }) => [
+      {
+        file: join("app", "routes", `${generateRemixRoute(pagePath)}.tsx`),
+        template: textTemplate
+      }
+    ],
     redirect: ({ pagePath }) => [
       {
         file: join("app", "routes", `${generateRemixRoute(pagePath)}.ts`),
@@ -10720,7 +11255,7 @@ const createFramework = async () => {
     "utf8"
   );
   await rm(routeTemplatesDir, { recursive: true, force: true });
-  const base = "@webstudio-is/sdk-components-react";
+  const base = "@webstudio-is/sdk-components-react/components";
   const reactRadix = "@webstudio-is/sdk-components-react-radix";
   const animation = "@webstudio-is/sdk-components-animation";
   const components = {};
@@ -10743,7 +11278,8 @@ const createFramework = async () => {
     tags: {
       textarea: `${base}:Textarea`,
       input: `${base}:Input`,
-      select: `${base}:Select`
+      select: `${base}:Select`,
+      a: `${base}:Link`
     },
     html: ({ pagePath }) => {
       if (isPathnamePattern(pagePath)) {
@@ -10765,11 +11301,13 @@ const createFramework = async () => {
       ];
     },
     xml: () => [],
+    text: () => [],
     redirect: () => [],
     defaultSitemap: () => []
   };
 };
 const limit = pLimit(10);
+const wsAuthFile = ".webstudio/auth.json";
 const downloadAsset = async (url, name2, assetBaseUrl) => {
   const assetPath = join("public", assetBaseUrl, name2);
   const tempAssetPath = `${assetPath}.tmp`;
@@ -10813,6 +11351,40 @@ const mergeJsonInto = async (sourcePath, destinationPath) => {
   );
   await writeFile(destinationPath, content, "utf8");
 };
+const writeWsAuthResources = async (generatedDir, pages) => {
+  var _a2, _b2, _c2, _d2;
+  console.info("[wsauth] prebuild create auth config", {
+    file: wsAuthFile,
+    projectAuthContentLength: ((_b2 = (_a2 = pages.meta) == null ? void 0 : _a2.auth) == null ? void 0 : _b2.length) ?? 0,
+    projectAuthContent: (_c2 = pages.meta) == null ? void 0 : _c2.auth,
+    pages: getAllPages(pages).map((page) => ({
+      id: page.id,
+      name: page.name,
+      route: getPagePath(page.id, pages),
+      auth: page.meta.auth
+    }))
+  });
+  const { content, module } = createWsAuthResources({
+    projectContent: (_d2 = pages.meta) == null ? void 0 : _d2.auth,
+    pages: getAllPages(pages).map((page) => ({
+      route: getPagePath(page.id, pages),
+      auth: page.meta.auth
+    }))
+  });
+  console.info("[wsauth] prebuild write auth config", {
+    file: wsAuthFile,
+    contentLength: content.length,
+    content,
+    generatedModulePath: join(generatedDir, "$resources.wsauth.server.ts"),
+    generatedModule: module
+  });
+  await createFolderIfNotExists(dirname(wsAuthFile));
+  await writeFile(wsAuthFile, content);
+  await createFileIfNotExists(
+    join(generatedDir, "$resources.wsauth.server.ts"),
+    module
+  );
+};
 const isCliTemplate = async (template) => {
   const currentPath = fileURLToPath(new URL(import.meta.url));
   const templatesPath = normalize(
@@ -10913,6 +11485,7 @@ Please check webstudio --help for more details`
   );
   const pages = migratePages(siteData.build.pages);
   const allPages = getAllPages(pages);
+  await writeWsAuthResources(generatedDir, pages);
   const siteDataByPage = {};
   const fontAssetsByPage = {};
   const backgroundImageAssetsByPage = {};
@@ -11144,11 +11717,13 @@ Please check webstudio --help for more details`
 
 
       import { Fragment, useState } from "react";
-      import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime";
+      import { renderText, useResource, useVariableState } from "@webstudio-is/react-sdk/runtime";
       ${importsString}
 
       export const projectId = "${siteData.build.projectId}";
 
+      export const projectDomain = ${JSON.stringify(siteData.projectDomain)};
+
       export const lastPublished = "${new Date(siteData.build.createdAt).toISOString()}";
 
       export const siteName = ${JSON.stringify(projectMeta == null ? void 0 : projectMeta.siteName)};
@@ -11221,7 +11796,7 @@ Please check webstudio --help for more details`
     await createFileIfNotExists(clientFile, pageExports);
     const serverFile = join(generatedDir, `${generatedBasename}.server.tsx`);
     await createFileIfNotExists(serverFile, serverExports);
-    const getTemplates = documentType === "html" ? framework.html : framework.xml;
+    const getTemplates = framework[documentType];
     for (const { file, template } of getTemplates({ pagePath })) {
       const content = template.replaceAll("__CONSTANTS__", importFrom("./app/constants.mjs", file)).replaceAll(
         "__SITEMAP__",
@@ -11229,6 +11804,9 @@ Please check webstudio --help for more details`
       ).replaceAll(
         "__ASSETS__",
         importFrom(`./app/__generated__/$resources.assets`, file)
+      ).replaceAll(
+        "__AUTH__",
+        importFrom(`./app/__generated__/$resources.wsauth.server`, file)
       ).replaceAll(
         "__CLIENT__",
         importFrom(`./app/__generated__/${generatedBasename}`, file)