@webstudio-is/react-sdk 0.128.0 → 0.130.0

package/lib/css/normalize.js

@@ -1,5 +1,5 @@
 // src/css/presets.ts
-var borders = [
+var borderWidth = [
   {
     property: "borderTopWidth",
     value: { type: "unit", value: 1, unit: "px" }
@@ -23,13 +23,31 @@ var outline = [
     value: { type: "unit", value: 1, unit: "px" }
   }
 ];
+var borderStyle = (value) => [
+  {
+    property: "borderTopStyle",
+    value: { type: "keyword", value }
+  },
+  {
+    property: "borderRightStyle",
+    value: { type: "keyword", value }
+  },
+  {
+    property: "borderBottomStyle",
+    value: { type: "keyword", value }
+  },
+  {
+    property: "borderLeftStyle",
+    value: { type: "keyword", value }
+  }
+];
 
 // src/css/normalize.ts
 var boxSizing = {
   property: "boxSizing",
   value: { type: "keyword", value: "border-box" }
 };
-var baseStyle = [boxSizing, ...borders, ...outline];
+var baseStyle = [boxSizing, ...borderWidth, ...outline];
 var div = baseStyle;
 var address = baseStyle;
 var article = baseStyle;
@@ -73,7 +91,7 @@ var html = [
     value: { type: "unit", value: 4, unit: "number" }
   },
   boxSizing,
-  ...borders
+  ...borderWidth
 ];
 var body = [
   /* 1 */
@@ -110,7 +128,7 @@ var body = [
     value: { type: "unit", unit: "number", value: 1.2 }
   },
   boxSizing,
-  ...borders
+  ...borderWidth
 ];
 var hr = [
   /* 1 */
@@ -124,7 +142,7 @@ var hr = [
     value: { type: "keyword", value: "inherit" }
   },
   boxSizing,
-  ...borders
+  ...borderWidth
 ];
 var b = [
   {
@@ -132,7 +150,7 @@ var b = [
     value: { type: "keyword", value: "700" }
   },
   boxSizing,
-  ...borders
+  ...borderWidth
 ];
 var strong = b;
 var code = [
@@ -150,7 +168,7 @@ var code = [
     value: { type: "unit", value: 1, unit: "em" }
   },
   boxSizing,
-  ...borders
+  ...borderWidth
 ];
 var kbd = code;
 var samp = code;
@@ -161,7 +179,7 @@ var small = [
     value: { type: "unit", value: 80, unit: "%" }
   },
   boxSizing,
-  ...borders
+  ...borderWidth
 ];
 var subSupBase = [
   {
@@ -181,7 +199,7 @@ var subSupBase = [
     value: { type: "keyword", value: "baseline" }
   },
   boxSizing,
-  ...borders
+  ...borderWidth
 ];
 var sub = [
   ...subSupBase,
@@ -203,7 +221,7 @@ var table = [
     property: "textIndent",
     value: { type: "unit", value: 0, unit: "number" }
   },
-  ...borders,
+  ...borderWidth,
   /* 2 */
   {
     property: "borderTopColor",
@@ -255,13 +273,17 @@ var buttonBase = [
     value: { type: "unit", value: 0, unit: "number" }
   },
   boxSizing,
-  ...borders
+  ...borderWidth
 ];
-var input = buttonBase;
+var input = [...buttonBase, ...borderStyle("solid")];
+var textarea = input;
 var optgroup = buttonBase;
-var textarea = buttonBase;
+var radio = [...buttonBase, ...borderStyle("none")];
+var checkbox = [...buttonBase, ...borderStyle("none")];
 var button = [
   ...buttonBase,
+  // Button uses border style outset by default, wich we don't support in style panel.
+  ...borderStyle("solid"),
   {
     property: "textTransform",
     value: { type: "keyword", value: "none" }
@@ -286,7 +308,7 @@ var legend = [
     value: { type: "unit", value: 0, unit: "number" }
   },
   boxSizing,
-  ...borders
+  ...borderWidth
 ];
 var progress = [
   {
@@ -294,7 +316,7 @@ var progress = [
     value: { type: "keyword", value: "baseline" }
   },
   boxSizing,
-  ...borders
+  ...borderWidth
 ];
 var summary = [
   {
@@ -302,7 +324,7 @@ var summary = [
     value: { type: "keyword", value: "list-item" }
   },
   boxSizing,
-  ...borders
+  ...borderWidth
 ];
 export {
   a,
@@ -312,6 +334,7 @@ export {
   b,
   body,
   button,
+  checkbox,
   code,
   div,
   figure,
@@ -340,6 +363,7 @@ export {
   p,
   pre,
   progress,
+  radio,
   samp,
   section,
   select,

package/lib/index.js

@@ -31,6 +31,8 @@ var generateRemixRoute = (pathname) => {
 var generateRemixParams = (pathname) => {
   const name = pathname.match(/:(?<name>\w+)\*$/)?.groups?.name;
   let generated = "";
+  generated += `type Params = Record<string, string | undefined>;
+`;
   generated += `export const getRemixParams = ({ ...params }: Params): Params => {
 `;
   if (name) {
@@ -802,6 +804,13 @@ var generateExpression = ({
     }
   });
 };
+var executeExpression = (expression) => {
+  try {
+    const fn = new Function(`return (${expression})`);
+    return fn();
+  } catch {
+  }
+};
 
 // src/embed-template.ts
 var EmbedTemplateText = z2.object({
@@ -1564,19 +1573,38 @@ var generateJsxChildren = ({
   }
   return generatedChildren;
 };
-var generatePageComponent = ({
+var generateWebstudioComponent = ({
   scope,
-  page,
+  name,
+  rootInstanceId,
+  parameters,
   instances,
   props,
   dataSources,
   indexesWithinAncestors,
   classesMap
 }) => {
-  const instance = instances.get(page.rootInstanceId);
+  const instance = instances.get(rootInstanceId);
   if (instance === void 0) {
     return "";
   }
+  let generatedProps = "";
+  if (parameters.length > 0) {
+    let generatedPropsValue = "{ ";
+    let generatedPropsType = "{ ";
+    for (const parameter of parameters) {
+      const dataSource = dataSources.get(parameter.value);
+      if (dataSource === void 0) {
+        continue;
+      }
+      const valueName = scope.getName(dataSource.id, dataSource.name);
+      generatedPropsValue += `${parameter.name}: ${valueName}, `;
+      generatedPropsType += `${parameter.name}: any; `;
+    }
+    generatedPropsValue += `}`;
+    generatedPropsType += `}`;
+    generatedProps = `${generatedPropsValue}: ${generatedPropsType}`;
+  }
   let generatedDataSources = "";
   for (const dataSource of dataSources.values()) {
     if (dataSource.type === "variable") {
@@ -1590,13 +1618,6 @@ var generatePageComponent = ({
       generatedDataSources += `let [${valueName}, ${setterName}] = useState<any>(${initialValueString})
 `;
     }
-    if (dataSource.type === "parameter") {
-      if (dataSource.id === page.pathVariableId) {
-        const valueName = scope.getName(dataSource.id, dataSource.name);
-        generatedDataSources += `let ${valueName} = _props.params
-`;
-      }
-    }
     if (dataSource.type === "resource") {
       const valueName = scope.getName(dataSource.id, dataSource.name);
       const resourceName = scope.getName(
@@ -1626,9 +1647,7 @@ var generatePageComponent = ({
     })
   });
   let generatedComponent = "";
-  generatedComponent += `type Params = Record<string, string | undefined>
-`;
-  generatedComponent += `const Page = (_props: { params: Params }) => {
+  generatedComponent += `const ${name} = (${generatedProps}) => {
 `;
   generatedComponent += `${generatedDataSources}`;
   generatedComponent += `return ${generatedJsx}`;
@@ -1742,6 +1761,88 @@ var generateResourcesLoader = ({
 `;
   return generated;
 };
+
+// src/page-meta-generator.ts
+var generatePageMeta = ({
+  scope,
+  page,
+  dataSources
+}) => {
+  const titleExpression = generateExpression({
+    expression: page.title,
+    dataSources,
+    scope
+  });
+  const descriptionExpression = generateExpression({
+    expression: page.meta.description ?? "undefined",
+    dataSources,
+    scope
+  });
+  const excludePageFromSearchExpression = generateExpression({
+    expression: page.meta.excludePageFromSearch ?? "undefined",
+    dataSources,
+    scope
+  });
+  const socialImageAssetIdExpression = JSON.stringify(
+    page.meta.socialImageAssetId
+  );
+  const socialImageUrlExpression = generateExpression({
+    expression: page.meta.socialImageUrl ?? "undefined",
+    dataSources,
+    scope
+  });
+  let generated = "";
+  generated += `export const getPageMeta = ({}: {
+`;
+  generated += `  params: Record<string, undefined | string>;
+`;
+  generated += `  resources: Record<string, any>;
+`;
+  generated += `}): PageMeta => {
+`;
+  generated += `  return {
+`;
+  generated += `    title: ${titleExpression},
+`;
+  generated += `    description: ${descriptionExpression},
+`;
+  generated += `    excludePageFromSearch: ${excludePageFromSearchExpression},
+`;
+  generated += `    socialImageAssetId: ${socialImageAssetIdExpression},
+`;
+  generated += `    socialImageUrl: ${socialImageUrlExpression},
+`;
+  generated += `    custom: [
+`;
+  if (page.meta.custom) {
+    for (const customMeta of page.meta.custom) {
+      if (customMeta.property.trim().length === 0) {
+        continue;
+      }
+      const propertyExpression = JSON.stringify(customMeta.property);
+      const contentExpression = generateExpression({
+        scope,
+        dataSources,
+        expression: customMeta.content
+      });
+      generated += `      {
+`;
+      generated += `        property: ${propertyExpression},
+`;
+      generated += `        content: ${contentExpression},
+`;
+      generated += `      },
+`;
+    }
+  }
+  generated += `    ],
+`;
+  generated += `  };
+`;
+  generated += `};
+`;
+  return generated;
+};
 export {
   EmbedTemplateInstance,
   EmbedTemplateProp,
@@ -1764,15 +1865,17 @@ export {
   decodeDataSourceVariable,
   defaultStates,
   encodeDataSourceVariable,
+  executeExpression,
   generateCss,
   generateDataFromEmbedTemplate,
   generateJsxChildren,
   generateJsxElement,
-  generatePageComponent,
+  generatePageMeta,
   generateRemixParams,
   generateRemixRoute,
   generateResourcesLoader,
   generateUtilsExport,
+  generateWebstudioComponent,
   getClosestInstance,
   getIndexWithinAncestorFromComponentProps,
   getIndexesWithinAncestors,

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

@@ -1,4 +1,4 @@
-import type { Instances, Instance, Props, Scope, DataSources, Page } from "@webstudio-is/sdk";
+import type { Instances, Instance, Props, Scope, DataSources, Prop } from "@webstudio-is/sdk";
 import type { IndexesWithinAncestors } from "./instance-utils";
 export declare const generateJsxElement: ({ scope, instance, props, dataSources, indexesWithinAncestors, children, classesMap, }: {
     scope: Scope;
@@ -257,9 +257,13 @@ export declare const generateJsxChildren: ({ scope, children, instances, props,
     indexesWithinAncestors: IndexesWithinAncestors;
     classesMap?: Map<string, string[]> | undefined;
 }) => string;
-export declare const generatePageComponent: ({ scope, page, instances, props, dataSources, indexesWithinAncestors, classesMap, }: {
+export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId, parameters, instances, props, dataSources, indexesWithinAncestors, classesMap, }: {
     scope: Scope;
-    page: Page;
+    name: string;
+    rootInstanceId: Instance["id"];
+    parameters: Extract<Prop, {
+        type: "parameter";
+    }>[];
     instances: Map<string, {
         type: "instance";
         id: string;

package/lib/types/css/normalize.d.ts

@@ -5711,10 +5711,10 @@ export declare const span: ({
     };
 })[];
 /**
-1. Correct the line height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-3. Use a more readable tab size (opinionated).
-*/
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ * 3. Use a more readable tab size (opinionated).
+ */
 export declare const html: ({
     value: {
         value: number;
@@ -5935,9 +5935,9 @@ export declare const html: ({
     };
 })[];
 /**
-1. Remove the margin in all browsers.
-2. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
-*/
+ * 1. Remove the margin in all browsers.
+ * 2. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+ */
 export declare const body: ({
     value: {
         value: number;
@@ -6158,9 +6158,9 @@ export declare const body: ({
     };
 })[];
 /**
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-*/
+ * 1. Add the correct height in Firefox.
+ * 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+ */
 export declare const hr: ({
     value: {
         value: number;
@@ -6390,8 +6390,8 @@ abbr[title] {
 }
 */
 /**
-Add the correct font weight in Edge and Safari.
-*/
+ * Add the correct font weight in Edge and Safari.
+ */
 export declare const b: ({
     value: {
         value: number;
@@ -6831,9 +6831,9 @@ export declare const strong: ({
     };
 })[];
 /**
-1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
-2. Correct the odd 'em' font sizing in all browsers.
-*/
+ * 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+ * 2. Correct the odd 'em' font sizing in all browsers.
+ */
 export declare const code: ({
     value: {
         value: number;
@@ -7711,8 +7711,8 @@ export declare const pre: ({
     };
 })[];
 /**
-Add the correct font size in all browsers.
-*/
+ * Add the correct font size in all browsers.
+ */
 export declare const small: ({
     value: {
         value: number;
@@ -8371,9 +8371,9 @@ export declare const sup: ({
     };
 })[];
 /**
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-*/
+ * 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+ * 2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+ */
 export declare const table: ({
     value: {
         value: number;
@@ -8812,6 +8812,225 @@ export declare const input: ({
         value: string;
     };
 })[];
+export declare const textarea: ({
+    value: {
+        value: number;
+        type: "unit";
+        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";
+    } | {
+        value: string;
+        type: "keyword";
+    } | {
+        value: string;
+        type: "unparsed";
+        hidden?: boolean | undefined;
+    } | {
+        value: string[];
+        type: "fontFamily";
+    } | {
+        type: "rgb";
+        r: number;
+        g: number;
+        b: number;
+        alpha: number;
+    } | {
+        value: {
+            value: string;
+            type: "asset";
+        } | {
+            type: "url";
+            url: string;
+        };
+        type: "image";
+        hidden?: boolean | undefined;
+    } | {
+        value: string;
+        type: "invalid";
+    } | {
+        value: "";
+        type: "unset";
+    } | {
+        value: ({
+            value: number;
+            type: "unit";
+            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";
+        } | {
+            value: string;
+            type: "keyword";
+        } | {
+            value: string;
+            type: "unparsed";
+            hidden?: boolean | undefined;
+        } | {
+            type: "rgb";
+            r: number;
+            g: number;
+            b: number;
+            alpha: number;
+        })[];
+        type: "tuple";
+        hidden?: boolean | undefined;
+    } | {
+        value: ({
+            value: number;
+            type: "unit";
+            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";
+        } | {
+            value: string;
+            type: "keyword";
+        } | {
+            value: string;
+            type: "unparsed";
+            hidden?: boolean | undefined;
+        } | {
+            value: {
+                value: string;
+                type: "asset";
+            } | {
+                type: "url";
+                url: string;
+            };
+            type: "image";
+            hidden?: boolean | undefined;
+        } | {
+            value: string;
+            type: "invalid";
+        } | {
+            value: ({
+                value: number;
+                type: "unit";
+                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";
+            } | {
+                value: string;
+                type: "keyword";
+            } | {
+                value: string;
+                type: "unparsed";
+                hidden?: boolean | undefined;
+            } | {
+                type: "rgb";
+                r: number;
+                g: number;
+                b: number;
+                alpha: number;
+            })[];
+            type: "tuple";
+            hidden?: boolean | undefined;
+        })[];
+        type: "layers";
+    } | {
+        value: string;
+        type: "var";
+        fallbacks: ({
+            value: number;
+            type: "unit";
+            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";
+        } | {
+            value: string;
+            type: "keyword";
+        } | {
+            value: string;
+            type: "unparsed";
+            hidden?: boolean | undefined;
+        } | {
+            value: string[];
+            type: "fontFamily";
+        } | {
+            type: "rgb";
+            r: number;
+            g: number;
+            b: number;
+            alpha: number;
+        } | {
+            value: {
+                value: string;
+                type: "asset";
+            } | {
+                type: "url";
+                url: string;
+            };
+            type: "image";
+            hidden?: boolean | undefined;
+        } | {
+            value: ({
+                value: number;
+                type: "unit";
+                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";
+            } | {
+                value: string;
+                type: "keyword";
+            } | {
+                value: string;
+                type: "unparsed";
+                hidden?: boolean | undefined;
+            } | {
+                type: "rgb";
+                r: number;
+                g: number;
+                b: number;
+                alpha: number;
+            })[];
+            type: "tuple";
+            hidden?: boolean | undefined;
+        } | {
+            value: ({
+                value: number;
+                type: "unit";
+                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";
+            } | {
+                value: string;
+                type: "keyword";
+            } | {
+                value: string;
+                type: "unparsed";
+                hidden?: boolean | undefined;
+            } | {
+                value: {
+                    value: string;
+                    type: "asset";
+                } | {
+                    type: "url";
+                    url: string;
+                };
+                type: "image";
+                hidden?: boolean | undefined;
+            } | {
+                value: string;
+                type: "invalid";
+            } | {
+                value: ({
+                    value: number;
+                    type: "unit";
+                    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";
+                } | {
+                    value: string;
+                    type: "keyword";
+                } | {
+                    value: string;
+                    type: "unparsed";
+                    hidden?: boolean | undefined;
+                } | {
+                    type: "rgb";
+                    r: number;
+                    g: number;
+                    b: number;
+                    alpha: number;
+                })[];
+                type: "tuple";
+                hidden?: boolean | undefined;
+            })[];
+            type: "layers";
+        })[];
+    };
+    state?: string | undefined;
+    property: import("@webstudio-is/css-engine").StyleProperty;
+} | {
+    property: "boxSizing";
+    value: {
+        type: "keyword";
+        value: string;
+    };
+})[];
 export declare const optgroup: ({
     value: {
         value: number;
@@ -9031,7 +9250,226 @@ export declare const optgroup: ({
         value: string;
     };
 })[];
-export declare const textarea: ({
+export declare const radio: ({
+    value: {
+        value: number;
+        type: "unit";
+        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";
+    } | {
+        value: string;
+        type: "keyword";
+    } | {
+        value: string;
+        type: "unparsed";
+        hidden?: boolean | undefined;
+    } | {
+        value: string[];
+        type: "fontFamily";
+    } | {
+        type: "rgb";
+        r: number;
+        g: number;
+        b: number;
+        alpha: number;
+    } | {
+        value: {
+            value: string;
+            type: "asset";
+        } | {
+            type: "url";
+            url: string;
+        };
+        type: "image";
+        hidden?: boolean | undefined;
+    } | {
+        value: string;
+        type: "invalid";
+    } | {
+        value: "";
+        type: "unset";
+    } | {
+        value: ({
+            value: number;
+            type: "unit";
+            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";
+        } | {
+            value: string;
+            type: "keyword";
+        } | {
+            value: string;
+            type: "unparsed";
+            hidden?: boolean | undefined;
+        } | {
+            type: "rgb";
+            r: number;
+            g: number;
+            b: number;
+            alpha: number;
+        })[];
+        type: "tuple";
+        hidden?: boolean | undefined;
+    } | {
+        value: ({
+            value: number;
+            type: "unit";
+            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";
+        } | {
+            value: string;
+            type: "keyword";
+        } | {
+            value: string;
+            type: "unparsed";
+            hidden?: boolean | undefined;
+        } | {
+            value: {
+                value: string;
+                type: "asset";
+            } | {
+                type: "url";
+                url: string;
+            };
+            type: "image";
+            hidden?: boolean | undefined;
+        } | {
+            value: string;
+            type: "invalid";
+        } | {
+            value: ({
+                value: number;
+                type: "unit";
+                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";
+            } | {
+                value: string;
+                type: "keyword";
+            } | {
+                value: string;
+                type: "unparsed";
+                hidden?: boolean | undefined;
+            } | {
+                type: "rgb";
+                r: number;
+                g: number;
+                b: number;
+                alpha: number;
+            })[];
+            type: "tuple";
+            hidden?: boolean | undefined;
+        })[];
+        type: "layers";
+    } | {
+        value: string;
+        type: "var";
+        fallbacks: ({
+            value: number;
+            type: "unit";
+            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";
+        } | {
+            value: string;
+            type: "keyword";
+        } | {
+            value: string;
+            type: "unparsed";
+            hidden?: boolean | undefined;
+        } | {
+            value: string[];
+            type: "fontFamily";
+        } | {
+            type: "rgb";
+            r: number;
+            g: number;
+            b: number;
+            alpha: number;
+        } | {
+            value: {
+                value: string;
+                type: "asset";
+            } | {
+                type: "url";
+                url: string;
+            };
+            type: "image";
+            hidden?: boolean | undefined;
+        } | {
+            value: ({
+                value: number;
+                type: "unit";
+                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";
+            } | {
+                value: string;
+                type: "keyword";
+            } | {
+                value: string;
+                type: "unparsed";
+                hidden?: boolean | undefined;
+            } | {
+                type: "rgb";
+                r: number;
+                g: number;
+                b: number;
+                alpha: number;
+            })[];
+            type: "tuple";
+            hidden?: boolean | undefined;
+        } | {
+            value: ({
+                value: number;
+                type: "unit";
+                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";
+            } | {
+                value: string;
+                type: "keyword";
+            } | {
+                value: string;
+                type: "unparsed";
+                hidden?: boolean | undefined;
+            } | {
+                value: {
+                    value: string;
+                    type: "asset";
+                } | {
+                    type: "url";
+                    url: string;
+                };
+                type: "image";
+                hidden?: boolean | undefined;
+            } | {
+                value: string;
+                type: "invalid";
+            } | {
+                value: ({
+                    value: number;
+                    type: "unit";
+                    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";
+                } | {
+                    value: string;
+                    type: "keyword";
+                } | {
+                    value: string;
+                    type: "unparsed";
+                    hidden?: boolean | undefined;
+                } | {
+                    type: "rgb";
+                    r: number;
+                    g: number;
+                    b: number;
+                    alpha: number;
+                })[];
+                type: "tuple";
+                hidden?: boolean | undefined;
+            })[];
+            type: "layers";
+        })[];
+    };
+    state?: string | undefined;
+    property: import("@webstudio-is/css-engine").StyleProperty;
+} | {
+    property: "boxSizing";
+    value: {
+        type: "keyword";
+        value: string;
+    };
+})[];
+export declare const checkbox: ({
     value: {
         value: number;
         type: "unit";
@@ -9251,8 +9689,8 @@ export declare const textarea: ({
     };
 })[];
 /**
-Remove the inheritance of text transform in Edge and Firefox.
-*/
+ * Remove the inheritance of text transform in Edge and Firefox.
+ */
 export declare const button: ({
     value: {
         value: number;
@@ -9733,8 +10171,8 @@ See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d4
 }
 */
 /**
-Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
-*/
+ * Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+ */
 export declare const legend: ({
     value: {
         value: number;
@@ -9955,8 +10393,8 @@ export declare const legend: ({
     };
 })[];
 /**
-Add the correct vertical alignment in Chrome and Firefox.
-*/
+ * Add the correct vertical alignment in Chrome and Firefox.
+ */
 export declare const progress: ({
     value: {
         value: number;
@@ -10217,6 +10655,9 @@ Remove the inner padding in Chrome and Safari on macOS.
  font: inherit;
 }
 */
+/**
+ * Add the correct display in Chrome and Safari.
+ */
 export declare const summary: ({
     value: {
         value: number;

package/lib/types/css/presets.d.ts

@@ -1,3 +1,4 @@
 import type { Styles } from "./normalize";
-export declare const borders: Styles;
+export declare const borderWidth: Styles;
 export declare const outline: Styles;
+export declare const borderStyle: (value: string) => Styles;

package/lib/types/expression.d.ts

@@ -51,4 +51,5 @@ export declare const generateExpression: ({ expression, dataSources, scope, }: {
     }>;
     scope: Scope;
 }) => string;
+export declare const executeExpression: (expression: undefined | string) => any;
 export {};

package/lib/types/index.d.ts

@@ -9,9 +9,10 @@ export { type WsComponentPropsMeta, type ComponentState, type PresetStyle, WsCom
 export * from "./embed-template";
 export * from "./props";
 export * from "./context";
-export { validateExpression, encodeDataSourceVariable, decodeDataSourceVariable, } from "./expression";
+export { validateExpression, encodeDataSourceVariable, decodeDataSourceVariable, executeExpression, } from "./expression";
 export { getIndexesWithinAncestors } from "./instance-utils";
 export * from "./hook";
 export { generateUtilsExport } from "./generator";
-export { generatePageComponent, generateJsxElement, generateJsxChildren, } from "./component-generator";
+export { generateWebstudioComponent, generateJsxElement, generateJsxChildren, } from "./component-generator";
 export { generateResourcesLoader } from "./resources-generator";
+export * from "./page-meta-generator";

package/lib/types/page-meta-generator.d.ts

@@ -0,0 +1,49 @@
+import type { Asset, DataSources, Page, Scope } from "@webstudio-is/sdk";
+export type PageMeta = {
+    title: string;
+    description?: string;
+    excludePageFromSearch?: boolean;
+    socialImageAssetId?: Asset["id"];
+    socialImageUrl?: string;
+    custom: Array<{
+        property: string;
+        content: string;
+    }>;
+};
+export declare const generatePageMeta: ({ scope, page, dataSources, }: {
+    scope: Scope;
+    page: Page;
+    dataSources: Map<string, {
+        value: {
+            value: number;
+            type: "number";
+        } | {
+            value: string;
+            type: "string";
+        } | {
+            value: boolean;
+            type: "boolean";
+        } | {
+            value: string[];
+            type: "string[]";
+        } | {
+            type: "json";
+            value?: unknown;
+        };
+        type: "variable";
+        name: string;
+        id: string;
+        scopeInstanceId?: string | undefined;
+    } | {
+        type: "parameter";
+        name: string;
+        id: string;
+        scopeInstanceId?: string | undefined;
+    } | {
+        type: "resource";
+        name: string;
+        id: string;
+        resourceId: string;
+        scopeInstanceId?: string | undefined;
+    }>;
+}) => string;

package/lib/types/page-meta-generator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.128.0",
+  "version": "0.130.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -33,11 +33,11 @@
     "jsep": "^1.3.8",
     "nanoid": "^5.0.1",
     "title-case": "^4.1.0",
-    "@webstudio-is/fonts": "0.128.0",
-    "@webstudio-is/css-engine": "0.128.0",
-    "@webstudio-is/icons": "^0.128.0",
-    "@webstudio-is/image": "0.128.0",
-    "@webstudio-is/sdk": "0.128.0"
+    "@webstudio-is/css-engine": "0.130.0",
+    "@webstudio-is/icons": "^0.130.0",
+    "@webstudio-is/image": "0.130.0",
+    "@webstudio-is/sdk": "0.130.0",
+    "@webstudio-is/fonts": "0.130.0"
   },
   "exports": {
     ".": {