@webstudio-is/react-sdk 0.114.0 → 0.116.0

package/lib/index.js

@@ -460,97 +460,61 @@ import { StyleValue } from "@webstudio-is/css-engine";
 // src/expression.ts
 import jsep from "jsep";
 import jsepAssignment from "@jsep-plugin/assignment";
+import jsepObject from "@jsep-plugin/object";
 jsep.plugins.register(jsepAssignment);
-var generateCode = (node, failOnForbidden, effectful, transformIdentifier) => {
+jsep.plugins.register(jsepObject);
+var generateCode = (node, failOnForbidden, options) => {
   if (node.type === "Identifier") {
-    return transformIdentifier(node.name, false);
+    return options.transformIdentifier(node.name, false);
   }
   if (node.type === "MemberExpression") {
-    if (failOnForbidden) {
-      const object2 = generateCode(
-        node.object,
-        false,
-        effectful,
-        transformIdentifier
-      );
-      const property2 = generateCode(
-        node.property,
-        false,
-        effectful,
-        transformIdentifier
-      );
-      throw Error(`Cannot access "${property2}" of "${object2}"`);
+    const object = generateCode(node.object, failOnForbidden, options);
+    const property = node.property;
+    let propertyString;
+    if (property.type === "Identifier" && node.computed === false) {
+      propertyString = property.name;
+    } else {
+      propertyString = generateCode(property, failOnForbidden, options);
+    }
+    if (node.computed) {
+      if (options.optional) {
+        return `${object}?.[${propertyString}]`;
+      } else {
+        return `${object}[${propertyString}]`;
+      }
+    }
+    if (options.optional) {
+      return `${object}?.${propertyString}`;
+    } else {
+      return `${object}.${propertyString}`;
     }
-    const object = generateCode(
-      node.object,
-      failOnForbidden,
-      effectful,
-      transformIdentifier
-    );
-    const property = generateCode(
-      node.property,
-      failOnForbidden,
-      effectful,
-      transformIdentifier
-    );
-    return `${object}.${property}`;
   }
   if (node.type === "Literal") {
     return node.raw;
   }
   if (node.type === "UnaryExpression") {
-    const arg = generateCode(
-      node.argument,
-      failOnForbidden,
-      effectful,
-      transformIdentifier
-    );
+    const arg = generateCode(node.argument, failOnForbidden, options);
     return `${node.operator}${arg}`;
   }
   if (node.type === "BinaryExpression") {
-    const left = generateCode(
-      node.left,
-      failOnForbidden,
-      effectful,
-      transformIdentifier
-    );
-    const right = generateCode(
-      node.right,
-      failOnForbidden,
-      effectful,
-      transformIdentifier
-    );
+    const left = generateCode(node.left, failOnForbidden, options);
+    const right = generateCode(node.right, failOnForbidden, options);
     return `${left} ${node.operator} ${right}`;
   }
   if (node.type === "ArrayExpression") {
     const elements = node.elements.map(
-      (element) => generateCode(
-        element,
-        failOnForbidden,
-        effectful,
-        transformIdentifier
-      )
+      (element) => generateCode(element, failOnForbidden, options)
     );
     return `[${elements.join(", ")}]`;
   }
   if (node.type === "CallExpression") {
     if (failOnForbidden) {
-      const callee2 = generateCode(
-        node.callee,
-        false,
-        effectful,
-        transformIdentifier
-      );
+      const callee2 = generateCode(node.callee, false, options);
       throw Error(`Cannot call "${callee2}"`);
     }
-    const callee = generateCode(
-      node.callee,
-      failOnForbidden,
-      effectful,
-      transformIdentifier
-    );
+    const callee = generateCode(node.callee, failOnForbidden, options);
     const args = node.arguments.map(
-      (arg) => generateCode(arg, failOnForbidden, effectful, transformIdentifier)
+      (arg) => generateCode(arg, failOnForbidden, options)
     );
     return `${callee}(${args.join(", ")})`;
   }
@@ -570,82 +534,55 @@ var generateCode = (node, failOnForbidden, effectful, transformIdentifier) => {
     if (node.operator !== "=") {
       throw Error(`Only "=" assignment operator is supported`);
     }
-    if (effectful === false) {
+    if (options.effectful === false) {
       throw Error(`Cannot use assignment in this expression`);
     }
-    const left = generateCode(
-      node.left,
-      failOnForbidden,
-      effectful,
+    const left = generateCode(node.left, failOnForbidden, {
+      ...options,
       // override and mark all identifiers inside of left expression as assignee
-      (id) => transformIdentifier(id, true)
-    );
-    const right = generateCode(
-      node.right,
-      failOnForbidden,
-      effectful,
-      transformIdentifier
-    );
+      transformIdentifier: (id) => options.transformIdentifier(id, true)
+    });
+    const right = generateCode(node.right, failOnForbidden, options);
     return `${left} ${node.operator} ${right}`;
   }
   if (node.type === "UpdateExpression") {
     throw Error(`"${node.operator}" operator is not supported`);
   }
+  if (node.type === "ObjectExpression") {
+    const properties = node.properties.map(
+      (property) => generateCode(property, failOnForbidden, options)
+    );
+    return `{${properties.join(", ")}}`;
+  }
+  if (node.type === "Property") {
+    const key = node.key;
+    let keyString;
+    if (key.type === "Identifier" && node.computed === false) {
+      keyString = key.name;
+    } else {
+      keyString = generateCode(key, failOnForbidden, options);
+    }
+    const value = generateCode(node.value, failOnForbidden, options);
+    if (node.computed) {
+      return `[${keyString}]: ${value}`;
+    }
+    return `${keyString}: ${value}`;
+  }
   node;
   return "";
 };
 var validateExpression = (code, options) => {
-  const { effectful = false, transformIdentifier = (id) => id } = options ?? {};
+  const {
+    effectful = false,
+    optional = false,
+    transformIdentifier = (id) => id
+  } = options ?? {};
   const expression = jsep(code);
-  return generateCode(expression, true, effectful, transformIdentifier);
-};
-var sortTopologically = (list, depsById, explored = /* @__PURE__ */ new Set(), sorted = []) => {
-  for (const id of list) {
-    if (explored.has(id)) {
-      continue;
-    }
-    explored.add(id);
-    const deps = depsById.get(id);
-    if (deps) {
-      sortTopologically(deps, depsById, explored, sorted);
-    }
-    sorted.push(id);
-  }
-  return sorted;
-};
-var computeExpressionDependencies = (expressions, expressionId, dependencies) => {
-  const depsById = dependencies.get(expressionId);
-  if (depsById) {
-    return depsById;
-  }
-  const parentDeps = /* @__PURE__ */ new Set();
-  const code = expressions.get(expressionId);
-  if (code === void 0) {
-    return parentDeps;
-  }
-  dependencies.set(expressionId, parentDeps);
-  validateExpression(code, {
-    transformIdentifier: (id) => {
-      parentDeps.add(id);
-      const childDeps = computeExpressionDependencies(
-        expressions,
-        id,
-        dependencies
-      );
-      for (const depId of childDeps) {
-        parentDeps.add(depId);
-      }
-      return id;
-    }
+  return generateCode(expression, true, {
+    effectful,
+    optional,
+    transformIdentifier
   });
-  return parentDeps;
-};
-var computeExpressionsDependencies = (expressions) => {
-  const dependencies = /* @__PURE__ */ new Map();
-  for (const id of expressions.keys()) {
-    computeExpressionDependencies(expressions, id, dependencies);
-  }
-  return dependencies;
 };
 var dataSourceVariablePrefix = "$ws$dataSource$";
 var encodeDataSourceVariable = (id) => {
@@ -668,102 +605,108 @@ var generateDataSources = ({
   const variables = /* @__PURE__ */ new Map();
   let body = "";
   const output = /* @__PURE__ */ new Map();
-  const depsById = /* @__PURE__ */ new Map();
-  const codeById = /* @__PURE__ */ new Map();
   for (const dataSource of dataSources.values()) {
-    if (dataSource.type === "expression") {
-      const deps = /* @__PURE__ */ new Set();
-      const newCode = validateExpression(dataSource.code, {
+    if (dataSource.type === "variable") {
+      const valueName = scope.getName(dataSource.id, dataSource.name);
+      const setterName = scope.getName(
+        `set$${dataSource.id}`,
+        `set$${dataSource.name}`
+      );
+      const initialValue = dataSource.value.value;
+      output.set(dataSource.id, valueName);
+      variables.set(dataSource.id, { valueName, setterName, initialValue });
+    }
+  }
+  for (const prop of props.values()) {
+    if (prop.type === "dataSource") {
+      const dataSource = dataSources.get(prop.value);
+      if (dataSource?.type !== "expression") {
+        continue;
+      }
+      const name = scope.getName(prop.id, prop.name);
+      output.set(prop.id, name);
+      const code = validateExpression(dataSource.code, {
+        optional: true,
         transformIdentifier: (identifier) => {
           const depId = decodeDataSourceVariable(identifier);
           const dep = depId ? dataSources.get(depId) : void 0;
           if (dep) {
-            deps.add(dep.id);
             return scope.getName(dep.id, dep.name);
           }
           console.error(`Unknown dependency "${identifier}"`);
           return identifier;
         }
       });
-      depsById.set(dataSource.id, deps);
-      codeById.set(dataSource.id, newCode);
-    }
-  }
-  const sortedDataSources = sortTopologically(
-    new Set(dataSources.keys()),
-    depsById
-  );
-  for (const dataSourceId of sortedDataSources) {
-    const dataSource = dataSources.get(dataSourceId);
-    if (dataSource?.type === "variable") {
-      const valueName = scope.getName(dataSource.id, dataSource.name);
-      const setterName = scope.getName(
-        `set$${dataSource.id}`,
-        `set$${dataSource.name}`
-      );
-      const initialValue = dataSource.value.value;
-      output.set(dataSource.id, valueName);
-      variables.set(dataSource.id, { valueName, setterName, initialValue });
-    }
-    if (dataSource?.type === "expression") {
-      const name = scope.getName(dataSource.id, dataSource.name);
-      const code = codeById.get(dataSourceId);
-      output.set(dataSource.id, name);
       body += `let ${name} = (${code});
 `;
     }
-  }
-  for (const prop of props.values()) {
-    if (prop.type !== "action") {
-      continue;
-    }
-    const name = scope.getName(prop.id, prop.name);
-    output.set(prop.id, name);
-    const setters = /* @__PURE__ */ new Set();
-    let args = void 0;
-    let newCode = "";
-    for (const value of prop.value) {
-      args = value.args;
-      newCode += validateExpression(value.code, {
-        effectful: true,
-        transformIdentifier: (identifier, assignee) => {
-          if (args?.includes(identifier)) {
-            return identifier;
-          }
+    if (prop.type === "expression") {
+      const name = scope.getName(prop.id, prop.name);
+      output.set(prop.id, name);
+      const code = validateExpression(prop.value, {
+        transformIdentifier: (identifier) => {
           const depId = decodeDataSourceVariable(identifier);
           const dep = depId ? dataSources.get(depId) : void 0;
           if (dep) {
-            const name2 = scope.getName(dep.id, dep.name);
-            if (assignee) {
-              setters.add(dep.id);
-            }
-            return name2;
+            return scope.getName(dep.id, dep.name);
           }
           console.error(`Unknown dependency "${identifier}"`);
           return identifier;
         }
       });
-      newCode += `
+      body += `let ${name} = (${code});
 `;
     }
-    if (args === void 0) {
-      continue;
-    }
-    if (typed) {
-      args = args.map((arg) => `${arg}: any`);
-    }
-    body += `let ${name} = (${args.join(", ")}) => {
+    if (prop.type === "action") {
+      const name = scope.getName(prop.id, prop.name);
+      output.set(prop.id, name);
+      const setters = /* @__PURE__ */ new Set();
+      let args = void 0;
+      let newCode = "";
+      for (const value of prop.value) {
+        args = value.args;
+        newCode += validateExpression(value.code, {
+          optional: true,
+          effectful: true,
+          transformIdentifier: (identifier, assignee) => {
+            if (args?.includes(identifier)) {
+              return identifier;
+            }
+            const depId = decodeDataSourceVariable(identifier);
+            const dep = depId ? dataSources.get(depId) : void 0;
+            if (dep) {
+              const name2 = scope.getName(dep.id, dep.name);
+              if (assignee) {
+                setters.add(dep.id);
+              }
+              return name2;
+            }
+            console.error(`Unknown dependency "${identifier}"`);
+            return identifier;
+          }
+        });
+        newCode += `
 `;
-    body += newCode;
-    for (const dataSourceId of setters.values()) {
-      const variable = variables.get(dataSourceId);
-      if (variable) {
-        body += `${variable.setterName}(${variable.valueName})
+      }
+      if (args === void 0) {
+        continue;
+      }
+      if (typed) {
+        args = args.map((arg) => `${arg}: any`);
+      }
+      body += `let ${name} = (${args.join(", ")}) => {
 `;
+      body += newCode;
+      for (const dataSourceId of setters.values()) {
+        const variable = variables.get(dataSourceId);
+        if (variable) {
+          body += `${variable.setterName}(${variable.valueName})
+`;
+        }
       }
-    }
-    body += `}
+      body += `}
 `;
+    }
   }
   return {
     variables,
@@ -884,26 +827,18 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
         for (const prop of item.props) {
           const propId = generateId();
           if (prop.type === "expression") {
-            const dataSource = {
+            props.push({
+              id: propId,
+              instanceId,
+              name: prop.name,
               type: "expression",
-              id: generateId(),
-              scopeInstanceId: instanceId,
-              name: "expression",
               // replace all references with variable names
-              code: validateExpression(prop.code, {
+              value: validateExpression(prop.code, {
                 transformIdentifier: (ref) => {
                   const id = dataSourceByRef.get(ref)?.id ?? ref;
                   return encodeDataSourceVariable(id);
                 }
               })
-            };
-            dataSourceByRef.set(propId, dataSource);
-            props.push({
-              id: propId,
-              instanceId,
-              type: "dataSource",
-              name: prop.name,
-              value: dataSource.id
             });
             continue;
           }
@@ -1365,11 +1300,19 @@ ${indexAttribute}="${index}"`;
         if (dataSource === void 0) {
           continue;
         }
-        conditionVariableName = scope.getName(dataSource.id, dataSource.name);
+        if (dataSource.type === "variable") {
+          conditionVariableName = scope.getName(dataSource.id, dataSource.name);
+        }
+        if (dataSource.type === "expression") {
+          conditionVariableName = scope.getName(prop.id, prop.name);
+        }
+      }
+      if (prop.type === "expression") {
+        conditionVariableName = scope.getName(prop.id, prop.name);
       }
       continue;
     }
-    if (prop.type === "string" || prop.type === "number" || prop.type === "boolean" || prop.type === "string[]") {
+    if (prop.type === "string" || prop.type === "number" || prop.type === "boolean" || prop.type === "string[]" || prop.type === "json") {
       generatedProps += `
 ${prop.name}={${JSON.stringify(prop.value)}}`;
       continue;
@@ -1383,9 +1326,25 @@ ${prop.name}={${JSON.stringify(prop.value)}}`;
       if (dataSource === void 0) {
         continue;
       }
-      const dataSourceVariable = scope.getName(dataSource.id, dataSource.name);
-      generatedProps += `
+      if (dataSource.type === "variable") {
+        const dataSourceVariable = scope.getName(
+          dataSource.id,
+          dataSource.name
+        );
+        generatedProps += `
+${prop.name}={${dataSourceVariable}}`;
+      }
+      if (dataSource.type === "expression") {
+        const dataSourceVariable = scope.getName(prop.id, prop.name);
+        generatedProps += `
 ${prop.name}={${dataSourceVariable}}`;
+      }
+      continue;
+    }
+    if (prop.type === "expression") {
+      const propVariable = scope.getName(prop.id, prop.name);
+      generatedProps += `
+${prop.name}={${propVariable}}`;
       continue;
     }
     if (prop.type === "action") {
@@ -1524,7 +1483,6 @@ export {
   collapsedAttribute,
   componentAttribute,
   componentCategories,
-  computeExpressionsDependencies,
   createElementsTree,
   createImageValueTransformer,
   decodeDataSourceVariable,

package/lib/types/component-generator.d.ts

@@ -24,6 +24,13 @@ export declare const generateJsxElement: ({ scope, instance, props, dataSources,
         id: string;
         instanceId: string;
         required?: boolean | undefined;
+    } | {
+        type: "json";
+        name: string;
+        id: string;
+        instanceId: string;
+        value?: unknown;
+        required?: boolean | undefined;
     } | {
         value: string;
         type: "asset";
@@ -58,6 +65,13 @@ export declare const generateJsxElement: ({ scope, instance, props, dataSources,
         id: string;
         instanceId: string;
         required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "expression";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
     } | {
         value: {
             code: string;
@@ -83,6 +97,9 @@ export declare const generateJsxElement: ({ scope, instance, props, dataSources,
         } | {
             value: string[];
             type: "string[]";
+        } | {
+            type: "json";
+            value?: unknown;
         };
         type: "variable";
         name: string;
@@ -139,6 +156,13 @@ export declare const generateJsxChildren: ({ scope, children, instances, props,
         id: string;
         instanceId: string;
         required?: boolean | undefined;
+    } | {
+        type: "json";
+        name: string;
+        id: string;
+        instanceId: string;
+        value?: unknown;
+        required?: boolean | undefined;
     } | {
         value: string;
         type: "asset";
@@ -173,6 +197,13 @@ export declare const generateJsxChildren: ({ scope, children, instances, props,
         id: string;
         instanceId: string;
         required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "expression";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
     } | {
         value: {
             code: string;
@@ -198,6 +229,9 @@ export declare const generateJsxChildren: ({ scope, children, instances, props,
         } | {
             value: string[];
             type: "string[]";
+        } | {
+            type: "json";
+            value?: unknown;
         };
         type: "variable";
         name: string;
@@ -249,6 +283,13 @@ export declare const generatePageComponent: ({ scope, rootInstanceId, instances,
         id: string;
         instanceId: string;
         required?: boolean | undefined;
+    } | {
+        type: "json";
+        name: string;
+        id: string;
+        instanceId: string;
+        value?: unknown;
+        required?: boolean | undefined;
     } | {
         value: string;
         type: "asset";
@@ -283,6 +324,13 @@ export declare const generatePageComponent: ({ scope, rootInstanceId, instances,
         id: string;
         instanceId: string;
         required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "expression";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
     } | {
         value: {
             code: string;
@@ -308,6 +356,9 @@ export declare const generatePageComponent: ({ scope, rootInstanceId, instances,
         } | {
             value: string[];
             type: "string[]";
+        } | {
+            type: "json";
+            value?: unknown;
         };
         type: "variable";
         name: string;

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

@@ -2226,6 +2226,13 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
         id: string;
         instanceId: string;
         required?: boolean | undefined;
+    } | {
+        type: "json";
+        name: string;
+        id: string;
+        instanceId: string;
+        value?: unknown;
+        required?: boolean | undefined;
     } | {
         value: string;
         type: "asset";
@@ -2260,6 +2267,13 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
         id: string;
         instanceId: string;
         required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "expression";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
     } | {
         value: {
             code: string;
@@ -2285,6 +2299,9 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
         } | {
             value: string[];
             type: "string[]";
+        } | {
+            type: "json";
+            value?: unknown;
         };
         type: "variable";
         name: string;

package/lib/types/expression.d.ts

@@ -1,10 +1,17 @@
 import type { DataSources, Props, Scope } from "@webstudio-is/sdk";
 type TransformIdentifier = (id: string, assignee: boolean) => string;
 export declare const validateExpression: (code: string, options?: {
+    /**
+     * Enable assignment operator for actions
+     */
     effectful?: boolean;
+    /**
+     * Add optional chaining to access nested properties safely
+     * and without checks even when not exist
+     */
+    optional?: boolean;
     transformIdentifier?: TransformIdentifier;
 }) => string;
-export declare const computeExpressionsDependencies: (expressions: Map<string, string>) => Map<string, Set<string>>;
 export declare const encodeDataSourceVariable: (id: string) => string;
 export declare const decodeDataSourceVariable: (name: string) => string | undefined;
 type VariableName = string;
@@ -24,6 +31,9 @@ export declare const generateDataSources: ({ scope, typed, dataSources, props, }
         } | {
             value: string[];
             type: "string[]";
+        } | {
+            type: "json";
+            value?: unknown;
         };
         type: "variable";
         name: string;
@@ -57,6 +67,13 @@ export declare const generateDataSources: ({ scope, typed, dataSources, props, }
         id: string;
         instanceId: string;
         required?: boolean | undefined;
+    } | {
+        type: "json";
+        name: string;
+        id: string;
+        instanceId: string;
+        value?: unknown;
+        required?: boolean | undefined;
     } | {
         value: string;
         type: "asset";
@@ -91,6 +108,13 @@ export declare const generateDataSources: ({ scope, typed, dataSources, props, }
         id: string;
         instanceId: string;
         required?: boolean | undefined;
+    } | {
+        value: string;
+        type: "expression";
+        name: string;
+        id: string;
+        instanceId: string;
+        required?: boolean | undefined;
     } | {
         value: {
             code: string;

package/lib/types/index.d.ts

@@ -7,7 +7,7 @@ export { type WsComponentPropsMeta, type ComponentState, type PresetStyle, WsCom
 export * from "./embed-template";
 export { normalizeProps, getPropsByInstanceId, getInstanceIdFromComponentProps, getIndexWithinAncestorFromComponentProps, } from "./props";
 export { type Params, ReactSdkContext } from "./context";
-export { validateExpression, computeExpressionsDependencies, encodeDataSourceVariable, decodeDataSourceVariable, generateDataSources, } from "./expression";
+export { validateExpression, encodeDataSourceVariable, decodeDataSourceVariable, generateDataSources, } from "./expression";
 export { getIndexesWithinAncestors } from "./instance-utils";
 export * from "./hook";
 export { generateUtilsExport } from "./generator";

package/lib/types/props.d.ts

@@ -74,6 +74,13 @@ export declare const normalizeProps: ({ props, assetBaseUrl, assets, pages, }: {
     id: string;
     instanceId: string;
     required?: boolean | undefined;
+} | {
+    type: "json";
+    name: string;
+    id: string;
+    instanceId: string;
+    value?: unknown;
+    required?: boolean | undefined;
 } | {
     value: string;
     type: "asset";
@@ -108,6 +115,13 @@ export declare const normalizeProps: ({ props, assetBaseUrl, assets, pages, }: {
     id: string;
     instanceId: string;
     required?: boolean | undefined;
+} | {
+    value: string;
+    type: "expression";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
 } | {
     value: {
         code: string;
@@ -141,6 +155,13 @@ export declare const getPropsByInstanceId: (props: Map<string, {
     id: string;
     instanceId: string;
     required?: boolean | undefined;
+} | {
+    type: "json";
+    name: string;
+    id: string;
+    instanceId: string;
+    value?: unknown;
+    required?: boolean | undefined;
 } | {
     value: string;
     type: "asset";
@@ -175,6 +196,13 @@ export declare const getPropsByInstanceId: (props: Map<string, {
     id: string;
     instanceId: string;
     required?: boolean | undefined;
+} | {
+    value: string;
+    type: "expression";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
 } | {
     value: {
         code: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.114.0",
+  "version": "0.116.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -27,15 +27,16 @@
   },
   "dependencies": {
     "@jsep-plugin/assignment": "^1.2.1",
+    "@jsep-plugin/object": "^1.2.1",
     "change-case": "^5.0.2",
     "html-tags": "^3.3.1",
     "jsep": "^1.3.8",
     "nanoid": "^5.0.1",
     "title-case": "^4.1.0",
-    "@webstudio-is/css-engine": "0.114.0",
-    "@webstudio-is/fonts": "0.114.0",
-    "@webstudio-is/image": "0.114.0",
-    "@webstudio-is/sdk": "0.114.0"
+    "@webstudio-is/css-engine": "0.116.0",
+    "@webstudio-is/fonts": "0.116.0",
+    "@webstudio-is/image": "0.116.0",
+    "@webstudio-is/sdk": "0.116.0"
   },
   "exports": {
     ".": {