Merge branch 'main' into release-14-10-2026.staging

Author: kof

apps/builder/app/builder/features/settings-panel/variable-menu.tsx

@@ -29,12 +29,15 @@ import {
 } from "~/shared/sync/data-stores";
 import { serverSyncStore } from "~/shared/sync/sync-stores";
 import { readClipboardText } from "~/shared/clipboard";
+import {
+  serializeVariable,
+  deserializeVariable,
+} from "~/shared/copy-paste/variable-clipboard";
 import {
   DeleteDataVariableDialog,
   deleteDataVariable,
   validateDataVariableName,
 } from "~/builder/shared/data-variable-utils";
-import { serializeVariable, deserializeVariable } from "./variable-clipboard";
 
 type VariableToDelete = { id: string; name: string; usages: number };
 

apps/builder/app/shared/copy-paste/copy-paste.ts

@@ -18,6 +18,15 @@ import { webflow } from "./plugin-webflow/plugin-webflow";
 import { designTokens } from "./plugin-design-tokens";
 import { builderApi } from "../builder-api";
 import { readClipboardText } from "../clipboard";
+import { $selectedInstance } from "../nano-states";
+import { $dataSources, $instances, $resources } from "../sync/data-stores";
+import { serverSyncStore } from "../sync/sync-stores";
+import { findAvailableVariables } from "@webstudio-is/project-build/runtime";
+import { validateDataVariableName } from "~/builder/shared/data-variable-utils";
+import {
+  deserializeVariable,
+  isVariableClipboardData,
+} from "./variable-clipboard";
 
 const isTextEditing = (event: ClipboardEvent) => {
   // Text is edited on the Canvas using the default Canvas text editor settings.
@@ -114,6 +123,70 @@ const reportPasteResult = (result: PasteResult) => {
 
 const textMimeType = "text/plain";
 
+const variableClipboard: Plugin = {
+  name: "variable",
+  mimeType: textMimeType,
+  onPaste: (text) => {
+    if (isVariableClipboardData(text) === false) {
+      return pasteIgnored;
+    }
+    const instance = $selectedInstance.get();
+    if (!instance) {
+      return pasteHandled;
+    }
+    try {
+      const copied = deserializeVariable(
+        text,
+        instance.id,
+        new Map(
+          findAvailableVariables({
+            startingInstanceId: instance.id,
+            instances: $instances.get(),
+            dataSources: $dataSources.get(),
+          }).map((variable) => [variable.id, variable])
+        )
+      );
+      const originalName = copied.variable.name;
+      let suffix = 2;
+      let error = validateDataVariableName(
+        copied.variable.name,
+        undefined,
+        instance.id
+      );
+      while (error?.type === "duplicate") {
+        copied.variable.name = `${originalName} ${suffix++}`;
+        error = validateDataVariableName(
+          copied.variable.name,
+          undefined,
+          instance.id
+        );
+      }
+      if (error) {
+        return { success: false, error: error.message };
+      }
+      if (copied.resource) {
+        copied.resource.name = copied.variable.name;
+      }
+      serverSyncStore.createTransaction(
+        [$dataSources, $resources],
+        (dataSources, resources) => {
+          dataSources.set(copied.variable.id, copied.variable);
+          if (copied.resource) {
+            resources.set(copied.resource.id, copied.resource);
+          }
+        }
+      );
+      return pasteHandled;
+    } catch (error) {
+      return {
+        success: false,
+        error:
+          error instanceof Error ? error.message : "Unable to paste variable",
+      };
+    }
+  },
+};
+
 const readClipboardData = (
   mimeTypes: Array<string>,
   clipboardData: null | DataTransfer
@@ -255,6 +328,7 @@ const initPlugins = ({
 export const initCopyPaste = ({ signal }: { signal: AbortSignal }) => {
   initPlugins({
     plugins: [
+      variableClipboard,
       pageText,
       instanceJson,
       instanceText,

…ettings-panel/variable-clipboard.test.ts …ed/copy-paste/variable-clipboard.test.tsapps/builder/app/builder/features/settings-panel/variable-clipboard.test.ts renamed to apps/builder/app/shared/copy-paste/variable-clipboard.test.ts apps/builder/app/builder/features/settings-panel/variable-clipboard.test.ts renamed to apps/builder/app/shared/copy-paste/variable-clipboard.test.ts

@@ -22,6 +22,14 @@ const payload = z.object({
   references: z.array(z.object({ id: z.string(), name: z.string() })),
 });
 
+export const isVariableClipboardData = (text: string) => {
+  try {
+    return Object.hasOwn(JSON.parse(text), namespace);
+  } catch {
+    return false;
+  }
+};
+
 export const serializeVariable = (
   variable: DataSource,
   resources: ReadonlyMap<string, Resource>,

…res/settings-panel/variable-clipboard.ts …/shared/copy-paste/variable-clipboard.tsapps/builder/app/builder/features/settings-panel/variable-clipboard.ts renamed to apps/builder/app/shared/copy-paste/variable-clipboard.ts apps/builder/app/builder/features/settings-panel/variable-clipboard.ts renamed to apps/builder/app/shared/copy-paste/variable-clipboard.ts

@@ -529,7 +529,7 @@ const SharedLinkItem = ({
       role="group"
       aria-label={`Share link ${currentLink.name}`}
     >
-      <Label css={{ flexGrow: 1 }}>{currentLink.name}</Label>
+      <Label truncate>{currentLink.name}</Label>
       <CopyToClipboard
         text={builderUrl({
           authToken: currentLink.token,

apps/builder/app/shared/share-project/share-project.tsx

@@ -23,7 +23,7 @@
   * [🖌️ Design tokens](university/foundations/design-tokens.md)
   * [🎨 Style panel](university/foundations/style-panel.md)
   * [🎯 States and selectors](university/foundations/states-and-selectors.md)
-  * [🔡 Data variables](university/foundations/variables.md)
+  * [🔡 Variables](university/foundations/variables.md)
   * [➕ Expression editor](university/foundations/expression-editor.md)
   * [🎨 Custom classes & attributes](university/foundations/custom-classes-and-attributes.md)
   * [🔄 Transforms](university/foundations/transforms.md)

docs/SUMMARY.md

@@ -19,7 +19,7 @@ The Head Slot provides a visual interface for controlling your website's `<head>
 
 ## Key information
 
-- Even though the Head Slot is visually in the Body instance, the contents of Head Slot are added to the `<head>`. This hierarchy enables [Data variables](../foundations/variables.md) defined on the Body to be used in the head.
+- Even though the Head Slot is visually in the Body instance, the contents of Head Slot are added to the `<head>`. This hierarchy enables [data variables](../foundations/variables.md) defined on the Body to be used in the head.
 - If Head Slot and Page Settings define the same data, such as meta title, Head Slot will take priority. Similarly, a default canonical is output on every page and references the current path. By specifying a canonical in Head Slot, the default canonical will not be displayed on the page.
 - Head Slot comes with an instance for Title, Link, and Meta. These can be duplicated. If you remove them and later need to add them back, you can copy them from a new Head Slot instance.
 

docs/university/core-components/head-slot.md

@@ -36,10 +36,7 @@ To include the static sitemap data in your custom sitemap, follow these steps:
 1. Create a page
 2. In the page settings, set the Document Type to XML 
 3. Set the page path to /sitemap.xml. This will override the default sitemap.
-4. Fetch the static data by clicking Create Variable > System Resource (Type) > Sitemap (Resource) 
-
-   <figure><img src="../../.gitbook/assets/static-sitemap-data.png" alt="Sitemap System Resource selected in Dynamic data"><figcaption></figcaption></figure>
-
+4. In **Settings > Variables**, add a variable and choose **Sitemap resource** in the **New variable** dialog.
 
 5. Use a [Collection](collection.md) to iterate over the static sitemap data
 

docs/university/core-components/xml-node.md

@@ -180,7 +180,7 @@ The order of tokens in the Style Source Input matters. When multiple Tokens have
 
 ## Settings panel
 
-The Settings Panel is on the right side of your canvas. You can use this panel to access and edit component-specific properties (such as ID or class) and [Data variables](variables.md) for a selected instance, enabling you to store reusable content and fetch APIs — a building block of [CMS](cms.md).
+The Settings Panel is on the right side of your canvas. You can use this panel to access and edit component-specific properties (such as ID or class) and [Variables](variables.md) for a selected instance, enabling you to store reusable content and fetch APIs — a building block of [CMS](cms.md).
 
 ---
 

docs/university/foundations/anatomy-of-the-webstudio-builder.md

@@ -194,7 +194,7 @@ This approach is simpler — no need to conditionally show/hide content — but
 
 - [Webstudio CMS](https://webstudio.is/cms) – Learn more about CMS capabilities in Webstudio
 - [Headless CMS Finder](https://webstudio.is/tools/headless-cms-finder) – Compare and find the right headless CMS
-- [Data variables](variables.md) – Define Resources to fetch CMS data
+- [Variables](variables.md) – Define Resources to fetch CMS data
 - [Expression editor](expression-editor.md) – Bind CMS data to components
 - [Collection](../core-components/collection.md) – Iterate over CMS data to create lists
 - [Content Embed](../core-components/content-embed.md) – Display rich text HTML from your CMS