@webstudio-is/react-sdk 0.87.1 → 0.88.0

package/lib/types/embed-template.d.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { Breakpoint } from "@webstudio-is/project-build";
+import { Instance, Breakpoint } from "@webstudio-is/project-build";
 import { type StyleProperty } from "@webstudio-is/css-data";
 import type { Simplify } from "type-fest";
 import type { WsComponentMeta } from "./components/component-meta";
@@ -2177,6 +2177,7 @@ export type EmbedTemplateInstance = {
     label?: string;
     dataSources?: Record<string, EmbedTemplateDataSource>;
     props?: EmbedTemplateProp[];
+    tokens?: string[];
     styles?: EmbedTemplateStyleDecl[];
     children: Array<EmbedTemplateInstance | EmbedTemplateText>;
 };
@@ -2195,7 +2196,7 @@ export type WsEmbedTemplate = z.infer<typeof WsEmbedTemplate>;
 export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
     type: "text";
     value: string;
-} | EmbedTemplateInstance)[], defaultBreakpointId: Breakpoint["id"]) => {
+} | EmbedTemplateInstance)[], metas: Map<Instance["component"], WsComponentMeta>, defaultBreakpointId: Breakpoint["id"]) => {
     children: ({
         type: "text";
         value: string;
@@ -2553,6 +2554,222 @@ export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, c
     stylable?: boolean | undefined;
     detachable?: boolean | undefined;
     icon: string;
+    presetTokens?: Record<string, {
+        styles: {
+            value: {
+                type: "unit";
+                value: number;
+                unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+            } | {
+                type: "keyword";
+                value: string;
+            } | {
+                type: "unparsed";
+                value: string;
+                hidden?: boolean | undefined;
+            } | {
+                type: "fontFamily";
+                value: string[];
+            } | {
+                type: "rgb";
+                alpha: number;
+                r: number;
+                g: number;
+                b: number;
+            } | {
+                type: "image";
+                value: {
+                    type: "asset";
+                    value: string;
+                } | {
+                    type: "url";
+                    url: string;
+                };
+                hidden?: boolean | undefined;
+            } | {
+                type: "invalid";
+                value: string;
+            } | {
+                type: "unset";
+                value: "";
+            } | {
+                type: "tuple";
+                value: ({
+                    type: "unit";
+                    value: number;
+                    unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+                } | {
+                    type: "keyword";
+                    value: string;
+                } | {
+                    type: "unparsed";
+                    value: string;
+                    hidden?: boolean | undefined;
+                } | {
+                    type: "rgb";
+                    alpha: number;
+                    r: number;
+                    g: number;
+                    b: number;
+                })[];
+                hidden?: boolean | undefined;
+            } | {
+                type: "layers";
+                value: ({
+                    type: "unit";
+                    value: number;
+                    unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+                } | {
+                    type: "keyword";
+                    value: string;
+                } | {
+                    type: "unparsed";
+                    value: string;
+                    hidden?: boolean | undefined;
+                } | {
+                    type: "image";
+                    value: {
+                        type: "asset";
+                        value: string;
+                    } | {
+                        type: "url";
+                        url: string;
+                    };
+                    hidden?: boolean | undefined;
+                } | {
+                    type: "invalid";
+                    value: string;
+                } | {
+                    type: "tuple";
+                    value: ({
+                        type: "unit";
+                        value: number;
+                        unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+                    } | {
+                        type: "keyword";
+                        value: string;
+                    } | {
+                        type: "unparsed";
+                        value: string;
+                        hidden?: boolean | undefined;
+                    } | {
+                        type: "rgb";
+                        alpha: number;
+                        r: number;
+                        g: number;
+                        b: number;
+                    })[];
+                    hidden?: boolean | undefined;
+                })[];
+            } | {
+                type: "var";
+                value: string;
+                fallbacks: ({
+                    type: "unit";
+                    value: number;
+                    unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+                } | {
+                    type: "keyword";
+                    value: string;
+                } | {
+                    type: "unparsed";
+                    value: string;
+                    hidden?: boolean | undefined;
+                } | {
+                    type: "fontFamily";
+                    value: string[];
+                } | {
+                    type: "rgb";
+                    alpha: number;
+                    r: number;
+                    g: number;
+                    b: number;
+                } | {
+                    type: "image";
+                    value: {
+                        type: "asset";
+                        value: string;
+                    } | {
+                        type: "url";
+                        url: string;
+                    };
+                    hidden?: boolean | undefined;
+                } | {
+                    type: "tuple";
+                    value: ({
+                        type: "unit";
+                        value: number;
+                        unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+                    } | {
+                        type: "keyword";
+                        value: string;
+                    } | {
+                        type: "unparsed";
+                        value: string;
+                        hidden?: boolean | undefined;
+                    } | {
+                        type: "rgb";
+                        alpha: number;
+                        r: number;
+                        g: number;
+                        b: number;
+                    })[];
+                    hidden?: boolean | undefined;
+                } | {
+                    type: "layers";
+                    value: ({
+                        type: "unit";
+                        value: number;
+                        unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+                    } | {
+                        type: "keyword";
+                        value: string;
+                    } | {
+                        type: "unparsed";
+                        value: string;
+                        hidden?: boolean | undefined;
+                    } | {
+                        type: "image";
+                        value: {
+                            type: "asset";
+                            value: string;
+                        } | {
+                            type: "url";
+                            url: string;
+                        };
+                        hidden?: boolean | undefined;
+                    } | {
+                        type: "invalid";
+                        value: string;
+                    } | {
+                        type: "tuple";
+                        value: ({
+                            type: "unit";
+                            value: number;
+                            unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
+                        } | {
+                            type: "keyword";
+                            value: string;
+                        } | {
+                            type: "unparsed";
+                            value: string;
+                            hidden?: boolean | undefined;
+                        } | {
+                            type: "rgb";
+                            alpha: number;
+                            r: number;
+                            g: number;
+                            b: number;
+                        })[];
+                        hidden?: boolean | undefined;
+                    })[];
+                })[];
+            };
+            state?: string | undefined;
+            property: StyleProperty;
+        }[];
+        variant?: string | undefined;
+    }> | undefined;
     states?: {
         label: string;
         selector: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.87.1",
+  "version": "0.88.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -34,12 +34,14 @@
     "nanoevents": "^8.0.0",
     "nanoid": "^4.0.2",
     "nanostores": "^0.9.3",
-    "@webstudio-is/asset-uploader": "^0.87.1",
-    "@webstudio-is/css-data": "^0.87.1",
-    "@webstudio-is/css-engine": "^0.87.1",
-    "@webstudio-is/fonts": "^0.87.1",
-    "@webstudio-is/generate-arg-types": "^0.87.1",
-    "@webstudio-is/project-build": "^0.87.1"
+    "no-case": "^3.0.4",
+    "title-case": "^3.0.3",
+    "@webstudio-is/asset-uploader": "^0.88.0",
+    "@webstudio-is/css-data": "^0.88.0",
+    "@webstudio-is/css-engine": "^0.88.0",
+    "@webstudio-is/fonts": "^0.88.0",
+    "@webstudio-is/generate-arg-types": "^0.88.0",
+    "@webstudio-is/project-build": "^0.88.0"
   },
   "exports": {
     ".": {

package/src/component-renderer.tsx

@@ -56,7 +56,7 @@ export const renderComponentTemplate = ({
     });
   }
 
-  const data = generateDataFromEmbedTemplate(template, "base");
+  const data = generateDataFromEmbedTemplate(template, metas, "base");
 
   const instances: [Instance["id"], Instance][] = [
     [

package/src/components/component-meta.ts

@@ -36,6 +36,11 @@ export const ComponentState = z.object({
 
 export type ComponentState = z.infer<typeof ComponentState>;
 
+const ComponentToken = z.object({
+  variant: z.optional(z.string()),
+  styles: z.array(EmbedTemplateStyleDecl),
+});
+
 export const defaultStates: ComponentState[] = [
   { selector: ":hover", label: "Hover" },
   { selector: ":active", label: "Active" },
@@ -67,6 +72,7 @@ const WsComponentMeta = z.object({
   description: z.string().optional(),
   icon: z.string(),
   presetStyle: z.optional(z.record(z.string(), EmbedTemplateStyleDecl)),
+  presetTokens: z.optional(z.record(z.string(), ComponentToken)),
   states: z.optional(z.array(ComponentState)),
   template: z.optional(WsEmbedTemplate),
   order: z.number().optional(),

package/src/embed-template.test.ts

@@ -1,6 +1,7 @@
 import { expect, test } from "@jest/globals";
 import { generateDataFromEmbedTemplate, namespaceMeta } from "./embed-template";
 import { showAttribute } from "./tree";
+import type { WsComponentMeta } from "./components/component-meta";
 
 const expectString = expect.any(String);
 
@@ -20,6 +21,7 @@ test("generate data for embedding from instances and text", () => {
           ],
         },
       ],
+      new Map(),
       defaultBreakpointId
     )
   ).toEqual({
@@ -73,6 +75,7 @@ test("generate data for embedding from props", () => {
           ],
         },
       ],
+      new Map(),
       defaultBreakpointId
     )
   ).toEqual({
@@ -147,6 +150,7 @@ test("generate data for embedding from styles", () => {
           ],
         },
       ],
+      new Map(),
       defaultBreakpointId
     )
   ).toEqual({
@@ -245,6 +249,7 @@ test("generate data for embedding from props bound to data source variables", ()
           children: [],
         },
       ],
+      new Map(),
       defaultBreakpointId
     )
   ).toEqual({
@@ -326,6 +331,7 @@ test("generate data for embedding from props bound to data source expressions",
           children: [],
         },
       ],
+      new Map(),
       defaultBreakpointId
     )
   ).toEqual({
@@ -422,6 +428,7 @@ test("generate data for embedding from action props", () => {
           ],
         },
       ],
+      new Map(),
       defaultBreakpointId
     )
   ).toEqual({
@@ -488,6 +495,93 @@ test("generate data for embedding from action props", () => {
   });
 });
 
+test("generate styles from tokens", () => {
+  const presetTokens: WsComponentMeta["presetTokens"] = {
+    box: {
+      styles: [
+        {
+          property: "width",
+          value: { type: "keyword", value: "max-content" },
+        },
+        {
+          property: "height",
+          value: { type: "keyword", value: "max-content" },
+        },
+      ],
+    },
+    boxBright: {
+      styles: [
+        {
+          property: "color",
+          value: { type: "keyword", value: "red" },
+        },
+        {
+          property: "backgroundColor",
+          value: { type: "keyword", value: "pink" },
+        },
+      ],
+    },
+    boxNone: {
+      styles: [
+        {
+          property: "color",
+          value: { type: "keyword", value: "transparent" },
+        },
+        {
+          property: "backgroundColor",
+          value: { type: "keyword", value: "transparent" },
+        },
+      ],
+    },
+  };
+  const { styleSourceSelections, styleSources, styles } =
+    generateDataFromEmbedTemplate(
+      [
+        {
+          type: "instance",
+          component: "Box",
+          tokens: ["box", "boxBright"],
+          children: [],
+        },
+      ],
+      new Map([["Box", { type: "container", icon: "", presetTokens }]]),
+      defaultBreakpointId
+    );
+  expect(styleSources).toEqual([
+    { id: "Box:box", name: "Box", type: "token" },
+    { id: "Box:boxBright", name: "Box Bright", type: "token" },
+  ]);
+  expect(styleSourceSelections).toEqual([
+    { instanceId: expectString, values: ["Box:box", "Box:boxBright"] },
+  ]);
+  expect(styles).toEqual([
+    {
+      breakpointId: "base",
+      property: "width",
+      styleSourceId: "Box:box",
+      value: { type: "keyword", value: "max-content" },
+    },
+    {
+      breakpointId: "base",
+      property: "height",
+      styleSourceId: "Box:box",
+      value: { type: "keyword", value: "max-content" },
+    },
+    {
+      breakpointId: "base",
+      property: "color",
+      styleSourceId: "Box:boxBright",
+      value: { type: "keyword", value: "red" },
+    },
+    {
+      breakpointId: "base",
+      property: "backgroundColor",
+      styleSourceId: "Box:boxBright",
+      value: { type: "keyword", value: "pink" },
+    },
+  ]);
+});
+
 test("add namespace to selected components in embed template", () => {
   expect(
     namespaceMeta(
@@ -498,10 +592,16 @@ test("add namespace to selected components in embed template", () => {
         requiredAncestors: ["Button", "Box"],
         invalidAncestors: ["Tooltip"],
         indexWithinAncestor: "Tooltip",
+        presetTokens: {
+          base: { styles: [] },
+          small: { styles: [] },
+          large: { styles: [] },
+        },
         template: [
           {
             type: "instance",
             component: "Tooltip",
+            tokens: ["base", "small"],
             children: [
               { type: "text", value: "Some text" },
               {
@@ -529,10 +629,16 @@ test("add namespace to selected components in embed template", () => {
     requiredAncestors: ["my-namespace:Button", "Box"],
     invalidAncestors: ["my-namespace:Tooltip"],
     indexWithinAncestor: "my-namespace:Tooltip",
+    presetTokens: {
+      base: { styles: [] },
+      small: { styles: [] },
+      large: { styles: [] },
+    },
     template: [
       {
         type: "instance",
         component: "my-namespace:Tooltip",
+        tokens: ["base", "small"],
         children: [
           { type: "text", value: "Some text" },
           {

package/src/embed-template.ts

@@ -1,5 +1,7 @@
 import { z } from "zod";
 import { nanoid } from "nanoid";
+import { titleCase } from "title-case";
+import { noCase } from "no-case";
 import {
   Instance,
   type InstancesList,
@@ -103,6 +105,7 @@ export type EmbedTemplateInstance = {
   label?: string;
   dataSources?: Record<string, EmbedTemplateDataSource>;
   props?: EmbedTemplateProp[];
+  tokens?: string[];
   styles?: EmbedTemplateStyleDecl[];
   children: Array<EmbedTemplateInstance | EmbedTemplateText>;
 };
@@ -115,6 +118,7 @@ export const EmbedTemplateInstance: z.ZodType<EmbedTemplateInstance> = z.lazy(
       label: z.optional(z.string()),
       dataSources: z.optional(z.record(z.string(), EmbedTemplateDataSource)),
       props: z.optional(z.array(EmbedTemplateProp)),
+      tokens: z.optional(z.array(z.string())),
       styles: z.optional(z.array(EmbedTemplateStyleDecl)),
       children: WsEmbedTemplate,
     })
@@ -153,6 +157,7 @@ const createInstancesFromTemplate = (
   styleSourceSelections: StyleSourceSelectionsList,
   styleSources: StyleSourcesList,
   styles: StylesList,
+  metas: Map<Instance["component"], WsComponentMeta>,
   defaultBreakpointId: Breakpoint["id"]
 ) => {
   const parentChildren: Instance["children"] = [];
@@ -243,6 +248,36 @@ const createInstancesFromTemplate = (
         }
       }
 
+      const styleSourceIds: string[] = [];
+
+      // convert tokens into style sources and styles
+      if (item.tokens) {
+        const meta = metas.get(item.component);
+        if (meta?.presetTokens) {
+          for (const name of item.tokens) {
+            const tokenValue = meta.presetTokens[name];
+            if (tokenValue) {
+              const styleSourceId = `${item.component}:${name}`;
+              styleSourceIds.push(styleSourceId);
+              styleSources.push({
+                type: "token",
+                id: styleSourceId,
+                name: titleCase(noCase(name)),
+              });
+              for (const styleDecl of tokenValue.styles) {
+                styles.push({
+                  breakpointId: defaultBreakpointId,
+                  styleSourceId,
+                  state: styleDecl.state,
+                  property: styleDecl.property,
+                  value: styleDecl.value,
+                });
+              }
+            }
+          }
+        }
+      }
+
       // populate styles
       if (item.styles) {
         const styleSourceId = nanoid();
@@ -250,10 +285,7 @@ const createInstancesFromTemplate = (
           type: "local",
           id: styleSourceId,
         });
-        styleSourceSelections.push({
-          instanceId,
-          values: [styleSourceId],
-        });
+        styleSourceIds.push(styleSourceId);
         for (const styleDecl of item.styles) {
           styles.push({
             breakpointId: defaultBreakpointId,
@@ -265,6 +297,13 @@ const createInstancesFromTemplate = (
         }
       }
 
+      if (styleSourceIds.length > 0) {
+        styleSourceSelections.push({
+          instanceId,
+          values: styleSourceIds,
+        });
+      }
+
       // populate instances
       const instance: Instance = {
         type: "instance",
@@ -283,6 +322,7 @@ const createInstancesFromTemplate = (
         styleSourceSelections,
         styleSources,
         styles,
+        metas,
         defaultBreakpointId
       );
       parentChildren.push({
@@ -303,6 +343,7 @@ const createInstancesFromTemplate = (
 
 export const generateDataFromEmbedTemplate = (
   treeTemplate: WsEmbedTemplate,
+  metas: Map<Instance["component"], WsComponentMeta>,
   defaultBreakpointId: Breakpoint["id"]
 ) => {
   const instances: InstancesList = [];
@@ -320,6 +361,7 @@ export const generateDataFromEmbedTemplate = (
     styleSourceSelections,
     styleSources,
     styles,
+    metas,
     defaultBreakpointId
   );
 

package/src/props.test.ts

@@ -87,6 +87,24 @@ describe("resolveUrlProp", () => {
     value: unique(),
   };
 
+  const duplicatePropName = unique();
+
+  const duplicateUrlPropFirst: Prop = {
+    type: "string",
+    id: unique(),
+    instanceId,
+    name: duplicatePropName,
+    value: unique(),
+  };
+
+  const duplicateUrlPropSecond: Prop = {
+    type: "string",
+    id: unique(),
+    instanceId,
+    name: duplicatePropName,
+    value: unique(),
+  };
+
   const props: PropsByInstanceId = new Map([
     [
       instanceId,
@@ -96,6 +114,8 @@ describe("resolveUrlProp", () => {
         arbitraryUrlProp,
         assetProp,
         pageSectionProp,
+        duplicateUrlPropFirst,
+        duplicateUrlPropSecond,
       ],
     ],
     [instnaceIdProp.instanceId, [instnaceIdProp]],
@@ -156,4 +176,13 @@ describe("resolveUrlProp", () => {
       url: arbitraryUrlProp.value,
     });
   });
+
+  // We had a bug that some props were duplicated https://github.com/webstudio-is/webstudio-builder/pull/2170
+  // Use the latest prop to ensure consistency with the builder settings panel.
+  test("duplicate prop name", () => {
+    expect(resolveUrlProp(instanceId, duplicatePropName, stores)).toEqual({
+      type: "string",
+      url: duplicateUrlPropSecond.value,
+    });
+  });
 });