webstudio 0.268.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.268.0";
+const version = "0.269.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";
@@ -4207,6 +4207,14 @@ 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(),
@@ -4239,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);
@@ -4280,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({
@@ -4923,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"),
@@ -5003,6 +5035,7 @@ var PropMeta = z.union([
   Radio,
   InlineRadio,
   Select,
+  TimeZone,
   MultiSelect,
   Check,
   InlineCheck,
@@ -5906,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()) {
@@ -5958,6 +6014,24 @@ 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"],
@@ -5995,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)
       });
     },
@@ -6013,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) {
@@ -6029,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, "?.");
         }
       }
     }
@@ -6103,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();
@@ -6576,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);
     }
@@ -7293,7 +7403,7 @@ var generateJsxChildren = ({
         usedDataSources,
         scope
       });
-      generatedChildren = `{${expression}}
+      generatedChildren = `{renderText(${expression})}
 `;
       continue;
     }
@@ -7474,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
@@ -7495,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)
     };
   }
@@ -7551,6 +7663,7 @@ var migratePages = (pages) => {
     homePageId: homePage.id,
     rootFolderId: rootFolder.id,
     pages: nextPages,
+    pageTemplates: /* @__PURE__ */ new Map(),
     folders: nextFolders
   };
 };
@@ -8012,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: [
@@ -8208,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
 };
@@ -8229,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
@@ -8254,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",
@@ -8345,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
@@ -8532,7 +8645,7 @@ const e$k = {
     description: "Value of the form control"
   }
 };
-const r$a = {
+const r$9 = {
   input: [
     ...radio,
     {
@@ -8543,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
 };
@@ -9307,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,
@@ -9407,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: {
@@ -9425,6 +9555,7 @@ const r$9 = {
     "country",
     "dateStyle",
     "timeStyle",
+    "timeZone",
     "format"
   ],
   props: {
@@ -9451,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
@@ -9605,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,
@@ -9639,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,
@@ -10246,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: {
@@ -10313,7 +10461,7 @@ const C$1 = {
   presetStyle: {
     button: [button, b$2].flat()
   },
-  props: r$3
+  props: n$2
 }, H = {
   label: "Item Content",
   icon: ContentIcon,
@@ -10328,7 +10476,7 @@ const C$1 = {
   presetStyle: {
     div
   },
-  props: n$2
+  props: r$3
 };
 const e$4 = {
   defaultValue: { required: false, control: "text", type: "string" },
@@ -10927,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";
@@ -11018,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";
@@ -11107,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 = {};
@@ -11130,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)) {
@@ -11568,7 +11717,7 @@ 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}";

package/package.json

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

package/templates/cloudflare/package.json

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

package/templates/defaults/app/redirect-url.ts

@@ -0,0 +1,21 @@
+import { createPath, generatePath, parsePath } from "@remix-run/react";
+
+/**
+ * Expands route params in local redirect targets.
+ * External and protocol-relative URLs are returned unchanged because route params
+ * only apply to app paths.
+ */
+export const generateRedirectUrl = (
+  url: string,
+  params: Record<string, string | undefined>
+) => {
+  if (url.startsWith("/") === false || url.startsWith("//")) {
+    return url;
+  }
+
+  const path = parsePath(url);
+  return createPath({
+    ...path,
+    pathname: generatePath(path.pathname ?? "/", params),
+  });
+};

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

@@ -1,3 +1,4 @@
+import { type ComponentProps, memo, useMemo } from "react";
 import {
   type ServerRuntimeMetaFunction as MetaFunction,
   type LinksFunction,
@@ -328,20 +329,33 @@ export const action = async ({
   }
 };
 
+const PageBoundary = memo(
+  ({ url, system }: ComponentProps<typeof Page> & { url: string }) => {
+    // Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages
+    return <Page key={url} system={system} />;
+  },
+  // React Router can rerender the current route while the next route loaders are
+  // still pending. Keep the generated page out of that pending-navigation render
+  // path, but let URL changes remount it.
+  (prevProps, nextProps) => prevProps.url === nextProps.url
+);
+
 const Outlet = () => {
   const { system, resources, url, pageMeta, host } =
     useLoaderData<typeof loader>();
+  const sdkContext = useMemo(
+    () => ({
+      ...constants,
+      resources,
+      breakpoints,
+      onError: console.error,
+    }),
+    [resources]
+  );
+
   return (
-    <ReactSdkContext.Provider
-      value={{
-        ...constants,
-        resources,
-        breakpoints,
-        onError: console.error,
-      }}
-    >
-      {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
-      <Page key={url} system={system} />
+    <ReactSdkContext.Provider value={sdkContext}>
+      <PageBoundary url={url} system={system} />
       <PageSettingsMeta
         url={url}
         pageMeta={pageMeta}

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

@@ -1,6 +1,7 @@
-import { redirect } from "@remix-run/server-runtime";
+import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
+import { generateRedirectUrl } from "../redirect-url";
 import { url, status } from "__REDIRECT__";
 
-export const loader = () => {
-  return redirect(url, status);
+export const loader = (arg: LoaderFunctionArgs) => {
+  return redirect(generateRedirectUrl(url, arg.params), status);
 };

package/templates/defaults/package.json

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

package/templates/react-router/app/redirect-url.ts

@@ -0,0 +1,21 @@
+import { createPath, generatePath, parsePath } from "react-router";
+
+/**
+ * Expands route params in local redirect targets.
+ * External and protocol-relative URLs are returned unchanged because route params
+ * only apply to app paths.
+ */
+export const generateRedirectUrl = (
+  url: string,
+  params: Record<string, string | undefined>
+) => {
+  if (url.startsWith("/") === false || url.startsWith("//")) {
+    return url;
+  }
+
+  const path = parsePath(url);
+  return createPath({
+    ...path,
+    pathname: generatePath(path.pathname ?? "/", params),
+  });
+};

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

@@ -1,3 +1,4 @@
+import { type ComponentProps, memo, useMemo } from "react";
 import {
   type MetaFunction,
   type LinksFunction,
@@ -327,20 +328,33 @@ export const action = async ({
   }
 };
 
+const PageBoundary = memo(
+  ({ url, system }: ComponentProps<typeof Page> & { url: string }) => {
+    // Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages
+    return <Page key={url} system={system} />;
+  },
+  // React Router can rerender the current route while the next route loaders are
+  // still pending. Keep the generated page out of that pending-navigation render
+  // path, but let URL changes remount it.
+  (prevProps, nextProps) => prevProps.url === nextProps.url
+);
+
 const Outlet = () => {
   const { system, resources, url, pageMeta, host } =
     useLoaderData<typeof loader>();
+  const sdkContext = useMemo(
+    () => ({
+      ...constants,
+      resources,
+      breakpoints,
+      onError: console.error,
+    }),
+    [resources]
+  );
+
   return (
-    <ReactSdkContext.Provider
-      value={{
-        ...constants,
-        resources,
-        breakpoints,
-        onError: console.error,
-      }}
-    >
-      {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
-      <Page key={url} system={system} />
+    <ReactSdkContext.Provider value={sdkContext}>
+      <PageBoundary url={url} system={system} />
       <PageSettingsMeta
         url={url}
         pageMeta={pageMeta}

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

@@ -1,6 +1,7 @@
-import { redirect } from "react-router";
+import { type LoaderFunctionArgs, redirect } from "react-router";
+import { generateRedirectUrl } from "../redirect-url";
 import { url, status } from "__REDIRECT__";
 
-export const loader = () => {
-  throw redirect(url, status);
+export const loader = (arg: LoaderFunctionArgs) => {
+  throw redirect(generateRedirectUrl(url, arg.params), status);
 };

package/templates/react-router/package.json

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

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

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

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

@@ -1,26 +1,49 @@
+import { type ComponentProps, memo, useMemo } from "react";
 import type { PageContext } from "vike/types";
 import {
   PageSettingsMeta,
   PageSettingsTitle,
   ReactSdkContext,
 } from "@webstudio-is/react-sdk/runtime";
+import { LinkCurrentUrlContext } from "@webstudio-is/sdk-components-react";
 import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
 import { Page, breakpoints, siteName } from "__CLIENT__";
 
+const getPageKey = (url: string) => {
+  const { origin, pathname, search } = new URL(url);
+  return `${origin}${pathname}${search}`;
+};
+
+const PageBoundary = memo(
+  ({ pageKey, system }: ComponentProps<typeof Page> & { pageKey: string }) => {
+    // Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages
+    return <Page key={pageKey} system={system} />;
+  },
+  // Vike can rerender the current page during client-side navigation and
+  // hash-only URL updates. Keep the generated page out of that render path,
+  // but let actual page URL changes remount it.
+  (prevProps, nextProps) => prevProps.pageKey === nextProps.pageKey
+);
+
 const PageComponent = ({ data }: { data: PageContext["data"] }) => {
   const { system, resources, url, pageMeta } = data;
+  const pageKey = getPageKey(url);
+  const sdkContext = useMemo(
+    () => ({
+      imageLoader,
+      assetBaseUrl,
+      resources,
+      breakpoints,
+      onError: console.error,
+    }),
+    [resources]
+  );
+
   return (
-    <ReactSdkContext.Provider
-      value={{
-        imageLoader,
-        assetBaseUrl,
-        resources,
-        breakpoints,
-        onError: console.error,
-      }}
-    >
-      {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
-      <Page key={url} system={system} />
+    <ReactSdkContext.Provider value={sdkContext}>
+      <LinkCurrentUrlContext.Provider value={url}>
+        <PageBoundary pageKey={pageKey} system={system} />
+      </LinkCurrentUrlContext.Provider>
       <PageSettingsMeta
         url={url}
         pageMeta={pageMeta}

package/templates/ssg/package.json

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

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

@@ -1,4 +1,4 @@
-import { type Root, createRoot } from "react-dom/client";
+import { type Root, hydrateRoot } from "react-dom/client";
 import type { OnRenderClientSync } from "vike/types";
 
 let root: Root;
@@ -19,7 +19,8 @@ export const onRenderClient: OnRenderClientSync = (pageContext) => {
     </>
   );
   if (root === undefined) {
-    root = createRoot(document.documentElement);
+    root = hydrateRoot(document.documentElement, htmlContent);
+    return;
   }
   document.documentElement.lang = lang;
   root.render(htmlContent);