chore: Pages.staging (#5736)

## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

.github/actions/vercel/action.yaml

@@ -20,6 +20,10 @@ inputs:
   environment:
     description: "Sha"
     required: true
+  PUBLIC_COLLAB_RELAY_URL:
+    description: "Public collaboration relay URL injected into the builder bundle"
+    required: false
+    default: ""
 
 outputs:
   domain:
@@ -75,6 +79,7 @@ runs:
       run: |
         export GITHUB_SHA=${{ inputs.sha }}
         export GITHUB_REF_NAME=${{ inputs.ref-name }}
+        export PUBLIC_COLLAB_RELAY_URL=${{ inputs.PUBLIC_COLLAB_RELAY_URL }}
 
         pnpx vercel build
       shell: bash

.github/workflows/fixtures-test.yml

@@ -3,9 +3,6 @@ name: Fixtures tests
 on:
   workflow_call:
     inputs:
-      builder-url:
-        required: true
-        type: string
       builder-host:
         required: true
         type: string
@@ -35,7 +32,6 @@ jobs:
     env:
       DATABASE_URL: postgres://
       AUTH_SECRET: test
-      BUILDER_URL_DEPRECATED: ${{ inputs.builder-url }}
       BUILDER_HOST: ${{ inputs.builder-host }}
 
     steps:

.github/workflows/vercel-deploy-staging.yml

@@ -39,7 +39,7 @@ jobs:
     if: |
       github.event_name == 'push' ||
       (github.event_name == 'pull_request_target' && github.event.action == 'labeled' && github.event.label.name == 'safe-to-deploy')
-    
+
     # Execute development and staging on staging branches
     # Execute only development on all other branches
     strategy:
@@ -86,6 +86,7 @@ jobs:
           ref-name: ${{ github.event_name == 'pull_request_target' && format('pr-{0}', github.event.pull_request.number) || github.ref_name }}
           sha: ${{ github.event_name == 'pull_request_target' && github.event.pull_request.head.sha || github.sha }}
           environment: ${{ matrix.environment }}
+          PUBLIC_COLLAB_RELAY_URL: ${{ vars.PUBLIC_COLLAB_RELAY_URL }}
 
       - name: Debug Vercel Outputs
         run: |
@@ -119,14 +120,12 @@ jobs:
             });
 
     outputs:
-      builder-url: "https://${{ steps.vercel.outputs.alias }}.${{ matrix.environment }}.webstudio.is"
       builder-host: "${{ steps.vercel.outputs.alias }}.${{ matrix.environment }}.webstudio.is"
 
   fixtures-test:
     needs: deployment
     uses: ./.github/workflows/fixtures-test.yml
     with:
-      builder-url: ${{ needs.deployment.outputs.builder-url }}
       builder-host: ${{ needs.deployment.outputs.builder-host }}
       environment: development
     secrets:

apps/builder/app/builder/builder.tsx

@@ -58,7 +58,7 @@ import type { TokenPermissions } from "@webstudio-is/authorization-token";
 import { useToastErrors } from "~/shared/error/toast-error";
 import { initBuilderApi } from "~/shared/builder-api";
 import { updateWebstudioData } from "~/shared/instance-utils";
-import { migrateWebstudioDataMutable } from "~/shared/webstudio-data-migrator";
+import { migrateWebstudioDataMutable } from "@webstudio-is/sdk/migrations/webstudio-data";
 import { Loading, LoadingBackground } from "./shared/loading";
 import { mergeRefs } from "@react-aria/utils";
 import { CommandPanel } from "./features/command-panel";

apps/builder/app/builder/features/address-bar.stories.tsx

@@ -16,32 +16,43 @@ registerContainers();
 $dataSources.set(new Map());
 
 $pages.set({
-  folders: [
-    {
-      id: "rootId",
-      name: "",
-      slug: "",
-      children: ["homeId", "dynamicId"],
-    },
-  ],
-  homePage: {
-    id: "homeId",
-    path: "",
-    name: "",
-    title: "",
-    meta: {},
-    rootInstanceId: "",
-  },
-  pages: [
-    {
-      id: "dynamicId",
-      path: "/blog/:date/post/:slug",
-      name: "",
-      title: "",
-      meta: {},
-      rootInstanceId: "rootInstanceId",
-    },
-  ],
+  homePageId: "homeId",
+  rootFolderId: "rootId",
+  folders: new Map([
+    [
+      "rootId",
+      {
+        id: "rootId",
+        name: "",
+        slug: "",
+        children: ["homeId", "dynamicId"],
+      },
+    ],
+  ]),
+  pages: new Map([
+    [
+      "homeId",
+      {
+        id: "homeId",
+        path: "",
+        name: "",
+        title: "",
+        meta: {},
+        rootInstanceId: "",
+      },
+    ],
+    [
+      "dynamicId",
+      {
+        id: "dynamicId",
+        path: "/blog/:date/post/:slug",
+        name: "",
+        title: "",
+        meta: {},
+        rootInstanceId: "rootInstanceId",
+      },
+    ],
+  ]),
 });
 
 const SystemInspect = () => {

apps/builder/app/builder/features/command-panel/command-panel.stories.tsx

@@ -38,15 +38,15 @@ $breakpoints.set(
 );
 
 const pages = createDefaultPages({ rootInstanceId: "" });
-pages.pages.push({
+pages.pages.set("page2", {
   id: "page2",
   path: "",
   name: "Second Page",
   rootInstanceId: "",
   title: "",
   meta: {},
 });
-pages.pages.push({
+pages.pages.set("page3", {
   id: "page3",
   path: "",
   name: "Thrid Page",
@@ -55,7 +55,7 @@ pages.pages.push({
   meta: {},
 });
 $pages.set(pages);
-$selectedPageId.set(pages.homePage.id);
+$selectedPageId.set(pages.homePageId);
 
 export const CommandPanel: StoryFn = () => {
   useEffect(() => {

apps/builder/app/builder/features/command-panel/groups/pages-group.tsx

@@ -6,7 +6,7 @@ import {
   useSelectedAction,
 } from "@webstudio-is/design-system";
 import { computed } from "nanostores";
-import type { Page } from "@webstudio-is/sdk";
+import { getAllPages, type Page } from "@webstudio-is/sdk";
 import { $pages } from "~/shared/sync/data-stores";
 import { $editingPageId } from "~/shared/nano-states";
 import { $selectedPage } from "~/shared/nano-states";
@@ -28,7 +28,7 @@ export const $pageOptions = computed(
     }
     const pageOptions: PageOption[] = [];
     if (pages) {
-      for (const page of [pages.homePage, ...pages.pages]) {
+      for (const page of getAllPages(pages)) {
         if (page.id === selectedPage?.id) {
           continue;
         }

apps/builder/app/builder/features/command-panel/shared/instance-list.tsx

@@ -13,7 +13,7 @@ import {
   useSelectedAction,
   useCommandState,
 } from "@webstudio-is/design-system";
-import type { Instance } from "@webstudio-is/sdk";
+import { getPageById, type Instance } from "@webstudio-is/sdk";
 import { $instances, $pages } from "~/shared/sync/data-stores";
 import { getInstanceLabel } from "~/builder/shared/instance-label";
 import { buildInstancePath } from "~/shared/instance-utils";
@@ -61,7 +61,7 @@ export const InstanceList = ({
       instances,
       instanceId
     );
-    const page = pages.pages.find((p) => p.id === awareness.pageId);
+    const page = getPageById(pages, awareness.pageId);
     usedInInstances.push({
       label: getInstanceLabel(instance),
       id: instance.id,

apps/builder/app/builder/features/marketplace/templates.tsx

@@ -13,6 +13,7 @@ import {
 import { ChevronLeftIcon, ExternalLinkIcon } from "@webstudio-is/icons";
 import {
   elementComponent,
+  getAllPages,
   Instance,
   ROOT_FOLDER_ID,
   type Asset,
@@ -116,7 +117,7 @@ const getTemplatesDataByCategory = (
   if (data === undefined) {
     return new Map();
   }
-  const pages = [data.pages.homePage, ...data.pages.pages]
+  const pages = getAllPages(data.pages)
     .filter((page) => page.marketplace?.include)
     .map((page) => {
       // category can be empty string

apps/builder/app/builder/features/marketplace/utils.ts

@@ -1,6 +1,8 @@
 import {
   getStyleDeclKey,
+  migratePages,
   type Asset,
+  type SerializedPages,
   type WebstudioData,
 } from "@webstudio-is/sdk";
 import type { CompactBuild } from "@webstudio-is/project-build";
@@ -9,14 +11,17 @@ const getPair = <Item extends { id: string }>(item: Item) =>
   [item.id, item] as const;
 
 export const toWebstudioData = (
-  data: CompactBuild & { assets: Asset[] }
+  data: Omit<CompactBuild, "pages"> & {
+    assets: Asset[];
+    pages: SerializedPages;
+  }
 ): WebstudioData => ({
   assets: new Map(data.assets.map(getPair)),
   instances: new Map(data.instances.map(getPair)),
   dataSources: new Map(data.dataSources.map(getPair)),
   resources: new Map(data.resources.map(getPair)),
   props: new Map(data.props.map(getPair)),
-  pages: data.pages,
+  pages: migratePages(data.pages),
   breakpoints: new Map(data.breakpoints.map(getPair)),
   styleSources: new Map(data.styleSources.map(getPair)),
   styleSourceSelections: new Map(