@webstudio-is/react-sdk 0.125.0 → 0.127.0

package/lib/index.js

@@ -69,6 +69,10 @@ var addGlobalRules = (sheet, { assets, assetBaseUrl }) => {
 };
 
 // src/props.ts
+import {
+  getPagePath,
+  findPageByIdOrPath
+} from "@webstudio-is/sdk";
 var normalizeProps = ({
   props,
   assetBaseUrl,
@@ -94,22 +98,20 @@ var normalizeProps = ({
       continue;
     }
     if (prop.type === "page") {
-      let page;
       let idProp;
-      if (typeof prop.value === "string") {
-        const pageId = prop.value;
-        page = pages.get(pageId);
-      } else {
-        const { pageId, instanceId } = prop.value;
-        page = pages.get(pageId);
+      const pageId = typeof prop.value === "string" ? prop.value : prop.value.pageId;
+      const page = findPageByIdOrPath(pageId, pages);
+      if (page === void 0) {
+        continue;
+      }
+      if (typeof prop.value !== "string") {
+        const { instanceId } = prop.value;
         idProp = props.find(
           (prop2) => prop2.instanceId === instanceId && prop2.name === "id"
         );
       }
-      if (page === void 0) {
-        continue;
-      }
-      const url = new URL(page.path, "https://any-valid.url");
+      const path = getPagePath(page.id, pages);
+      const url = new URL(path, "https://any-valid.url");
       let value = url.pathname;
       if (idProp?.type === "string") {
         const hash = idProp.value;
@@ -286,13 +288,18 @@ import {
 } from "react";
 
 // src/context.tsx
-import { createContext } from "react";
+import { createContext, useContext } from "react";
 var ReactSdkContext = createContext({
   assetBaseUrl: "/",
   imageBaseUrl: "/",
   imageLoader: ({ src }) => src,
-  pagesPaths: /* @__PURE__ */ new Set()
+  pagesPaths: /* @__PURE__ */ new Set(),
+  resources: {}
 });
+var useResource = (name) => {
+  const { resources } = useContext(ReactSdkContext);
+  return resources[name];
+};
 
 // src/tree/create-elements-tree.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -325,7 +332,8 @@ var createElementsTree = ({
         imageLoader,
         pagesPaths: /* @__PURE__ */ new Set(),
         assetBaseUrl,
-        imageBaseUrl
+        imageBaseUrl,
+        resources: {}
       },
       children: root
     }
@@ -415,7 +423,7 @@ import { ListViewIcon } from "@webstudio-is/icons/svg";
 var portalComponent = "Slot";
 var collectionComponent = "ws:collection";
 var collectionMeta = {
-  category: "general",
+  category: "data",
   order: 7,
   type: "container",
   label: "Collection",
@@ -429,24 +437,24 @@ var collectionMeta = {
         {
           name: "data",
           type: "json",
-          value: ["apple", "orange", "banana"]
+          value: [
+            "Collection Item 1",
+            "Collection Item 2",
+            "Collection Item 3"
+          ]
         },
-        { name: "item", type: "parameter", variableName: "collectionItem" }
+        {
+          name: "item",
+          type: "parameter",
+          variableName: "collectionItem",
+          variableAlias: "Collection Item"
+        }
       ],
       children: [
         {
           type: "instance",
           component: "Box",
-          children: [
-            {
-              type: "instance",
-              component: "HtmlEmbed",
-              props: [
-                { name: "code", type: "expression", code: "collectionItem" }
-              ],
-              children: []
-            }
-          ]
+          children: [{ type: "expression", value: "collectionItem" }]
         }
       ]
     }
@@ -876,7 +884,12 @@ var EmbedTemplateText = z2.object({
   type: z2.literal("text"),
   value: z2.string()
 });
+var EmbedTemplateExpression = z2.object({
+  type: z2.literal("expression"),
+  value: z2.string()
+});
 var EmbedTemplateVariable = z2.object({
+  alias: z2.optional(z2.string()),
   initialValue: z2.unknown()
 });
 var EmbedTemplateProp = z2.union([
@@ -913,7 +926,8 @@ var EmbedTemplateProp = z2.union([
   z2.object({
     type: z2.literal("parameter"),
     name: z2.string(),
-    variableName: z2.string()
+    variableName: z2.string(),
+    variableAlias: z2.optional(z2.string())
   }),
   z2.object({
     type: z2.literal("action"),
@@ -947,7 +961,9 @@ var EmbedTemplateInstance = z2.lazy(
   })
 );
 var WsEmbedTemplate = z2.lazy(
-  () => z2.array(z2.union([EmbedTemplateInstance, EmbedTemplateText]))
+  () => z2.array(
+    z2.union([EmbedTemplateInstance, EmbedTemplateText, EmbedTemplateExpression])
+  )
 );
 var getVariablValue = (value) => {
   if (typeof value === "string") {
@@ -978,7 +994,7 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
             type: "variable",
             id: generateId(),
             scopeInstanceId: instanceId,
-            name,
+            name: variable.alias ?? name,
             value: getVariablValue(variable.initialValue)
           });
         }
@@ -1035,7 +1051,7 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
               type: "parameter",
               id: dataSourceId,
               scopeInstanceId: instanceId,
-              name: prop.variableName
+              name: prop.variableAlias ?? prop.variableName
             });
             props.push({
               id: propId,
@@ -1131,6 +1147,18 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
         value: item.value
       });
     }
+    if (item.type === "expression") {
+      parentChildren.push({
+        type: "expression",
+        // replace all references with variable names
+        value: validateExpression(item.value, {
+          transformIdentifier: (ref) => {
+            const id = dataSourceByRef.get(ref)?.id ?? ref;
+            return encodeDataSourceVariable(id);
+          }
+        })
+      });
+    }
   }
   return parentChildren;
 };
@@ -1160,7 +1188,10 @@ var generateDataFromEmbedTemplate = (treeTemplate, metas, defaultBreakpointId, g
     dataSources: Array.from(dataSourceByRef.values()),
     styleSourceSelections,
     styleSources,
-    styles
+    styles,
+    assets: [],
+    breakpoints: [],
+    resources: []
   };
 };
 var namespaceEmbedTemplateComponents = (template, namespace, components) => {
@@ -1168,6 +1199,9 @@ var namespaceEmbedTemplateComponents = (template, namespace, components) => {
     if (item.type === "text") {
       return item;
     }
+    if (item.type === "expression") {
+      return item;
+    }
     if (item.type === "instance") {
       const prefix = components.has(item.component) ? `${namespace}:` : "";
       return {
@@ -1218,6 +1252,7 @@ var WsComponentPropsMeta = z3.object({
 var componentCategories = [
   "general",
   "text",
+  "data",
   "media",
   "forms",
   "radix",
@@ -1329,10 +1364,12 @@ var getClosestInstance = (instancePath, currentInstance, closestComponent) => {
 };
 
 // src/generator.ts
+import { getPagePath as getPagePath2 } from "@webstudio-is/sdk";
 var generateUtilsExport = (siteData) => {
   const pagesPaths = [siteData.pages.homePage.path];
   for (const page of siteData.pages.pages) {
-    pagesPaths.push(page.path);
+    const path = getPagePath2(page.id, siteData.pages);
+    pagesPaths.push(path);
   }
   const generatedPagesPaths = `export const pagesPaths = new Set(${JSON.stringify(
     pagesPaths
@@ -1596,7 +1633,8 @@ var generatePageComponent = ({
         dataSource.resourceId,
         dataSource.name
       );
-      generatedDataSources += `let ${valueName}: any = _props.resources["${resourceName}"]
+      const resourceNameString = JSON.stringify(resourceName);
+      generatedDataSources += `let ${valueName} = useResource(${resourceNameString})
 `;
     }
   }
@@ -1621,9 +1659,7 @@ var generatePageComponent = ({
   let generatedComponent = "";
   generatedComponent += `type Params = Record<string, string | undefined>
 `;
-  generatedComponent += `type Resources = Record<string, unknown>
-`;
-  generatedComponent += `const Page = (_props: { params: Params, resources: Resources }) => {
+  generatedComponent += `const Page = (_props: { params: Params }) => {
 `;
   generatedComponent += `${generatedDataSources}`;
   generatedComponent += `return ${generatedJsx}`;
@@ -1784,5 +1820,6 @@ export {
   showAttribute,
   stateCategories,
   textContentAttribute,
+  useResource,
   validateExpression
 };

package/lib/types/components/component-meta.d.ts

@@ -688,7 +688,7 @@ declare const WsComponentPropsMeta: z.ZodObject<{
     initialProps?: string[] | undefined;
 }>;
 export type WsComponentPropsMeta = z.infer<typeof WsComponentPropsMeta>;
-export declare const componentCategories: readonly ["general", "text", "media", "forms", "radix", "hidden"];
+export declare const componentCategories: readonly ["general", "text", "data", "media", "forms", "radix", "hidden"];
 export declare const stateCategories: readonly ["states", "component-states"];
 export declare const ComponentState: z.ZodObject<{
     category: z.ZodOptional<z.ZodEnum<["states", "component-states"]>>;
@@ -706,7 +706,7 @@ export declare const ComponentState: z.ZodObject<{
 export type ComponentState = z.infer<typeof ComponentState>;
 export declare const defaultStates: ComponentState[];
 export declare const WsComponentMeta: z.ZodObject<{
-    category: z.ZodOptional<z.ZodEnum<["general", "text", "media", "forms", "radix", "hidden"]>>;
+    category: z.ZodOptional<z.ZodEnum<["general", "text", "data", "media", "forms", "radix", "hidden"]>>;
     type: z.ZodEnum<["container", "control", "embed", "rich-text-child"]>;
     requiredAncestors: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
     invalidAncestors: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
@@ -2021,12 +2021,21 @@ export declare const WsComponentMeta: z.ZodObject<{
     }, {
         value: string;
         type: "text";
+    }>, z.ZodObject<{
+        type: z.ZodLiteral<"expression">;
+        value: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        value: string;
+        type: "expression";
+    }, {
+        value: string;
+        type: "expression";
     }>]>, "many">>>;
     order: z.ZodOptional<z.ZodNumber>;
 }, "strip", z.ZodTypeAny, {
     type: "embed" | "control" | "container" | "rich-text-child";
     icon: string;
-    category?: "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
+    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;
@@ -2471,12 +2480,15 @@ export declare const WsComponentMeta: z.ZodObject<{
     template?: ({
         value: string;
         type: "text";
+    } | {
+        value: string;
+        type: "expression";
     } | import("../embed-template").EmbedTemplateInstance)[] | undefined;
     order?: number | undefined;
 }, {
     type: "embed" | "control" | "container" | "rich-text-child";
     icon: string;
-    category?: "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
+    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;
@@ -2921,6 +2933,9 @@ export declare const WsComponentMeta: z.ZodObject<{
     template?: ({
         value: string;
         type: "text";
+    } | {
+        value: string;
+        type: "expression";
     } | import("../embed-template").EmbedTemplateInstance)[] | undefined;
     order?: number | undefined;
 }>;

package/lib/types/context.d.ts

@@ -35,4 +35,6 @@ export declare const ReactSdkContext: import("react").Context<Params & {
      * always empty for builder which handle anchor clicks globally
      */
     pagesPaths: Set<Page["path"]>;
+    resources: Record<string, any>;
 }>;
+export declare const useResource: (name: string) => any;

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

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import type { Instance, Breakpoint } from "@webstudio-is/sdk";
+import type { Instance, Breakpoint, WebstudioFragment } from "@webstudio-is/sdk";
 import { type StyleProperty } from "@webstudio-is/css-engine";
 import type { Simplify } from "type-fest";
 import type { WsComponentMeta } from "./components/component-meta";
@@ -14,11 +14,25 @@ declare const EmbedTemplateText: z.ZodObject<{
     type: "text";
 }>;
 type EmbedTemplateText = z.infer<typeof EmbedTemplateText>;
+declare const EmbedTemplateExpression: z.ZodObject<{
+    type: z.ZodLiteral<"expression">;
+    value: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    value: string;
+    type: "expression";
+}, {
+    value: string;
+    type: "expression";
+}>;
+type EmbedTemplateExpression = z.infer<typeof EmbedTemplateExpression>;
 declare const EmbedTemplateVariable: z.ZodObject<{
+    alias: z.ZodOptional<z.ZodString>;
     initialValue: z.ZodUnknown;
 }, "strip", z.ZodTypeAny, {
+    alias?: string | undefined;
     initialValue?: unknown;
 }, {
+    alias?: string | undefined;
     initialValue?: unknown;
 }>;
 type EmbedTemplateVariable = z.infer<typeof EmbedTemplateVariable>;
@@ -98,14 +112,17 @@ export declare const EmbedTemplateProp: z.ZodUnion<[z.ZodObject<{
     type: z.ZodLiteral<"parameter">;
     name: z.ZodString;
     variableName: z.ZodString;
+    variableAlias: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     type: "parameter";
     name: string;
     variableName: string;
+    variableAlias?: string | undefined;
 }, {
     type: "parameter";
     name: string;
     variableName: string;
+    variableAlias?: string | undefined;
 }>, z.ZodObject<{
     type: z.ZodLiteral<"action">;
     name: z.ZodString;
@@ -2191,7 +2208,7 @@ export type EmbedTemplateInstance = {
     props?: EmbedTemplateProp[];
     tokens?: string[];
     styles?: EmbedTemplateStyleDecl[];
-    children: Array<EmbedTemplateInstance | EmbedTemplateText>;
+    children: Array<EmbedTemplateInstance | EmbedTemplateText | EmbedTemplateExpression>;
 };
 export declare const EmbedTemplateInstance: z.ZodType<EmbedTemplateInstance>;
 export declare const WsEmbedTemplate: z.ZodLazy<z.ZodArray<z.ZodUnion<[z.ZodType<EmbedTemplateInstance, z.ZodTypeDef, EmbedTemplateInstance>, z.ZodObject<{
@@ -2203,381 +2220,24 @@ export declare const WsEmbedTemplate: z.ZodLazy<z.ZodArray<z.ZodUnion<[z.ZodType
 }, {
     value: string;
     type: "text";
+}>, z.ZodObject<{
+    type: z.ZodLiteral<"expression">;
+    value: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    value: string;
+    type: "expression";
+}, {
+    value: string;
+    type: "expression";
 }>]>, "many">>;
 export type WsEmbedTemplate = z.infer<typeof WsEmbedTemplate>;
 export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
     value: string;
     type: "text";
-} | EmbedTemplateInstance)[], metas: Map<Instance["component"], WsComponentMeta>, defaultBreakpointId: Breakpoint["id"], generateId?: () => string) => {
-    children: ({
-        value: string;
-        type: "text";
-    } | {
-        value: string;
-        type: "id";
-    } | {
-        value: string;
-        type: "expression";
-    })[];
-    instances: {
-        type: "instance";
-        id: string;
-        children: ({
-            value: string;
-            type: "text";
-        } | {
-            value: string;
-            type: "id";
-        } | {
-            value: string;
-            type: "expression";
-        })[];
-        component: string;
-        label?: string | undefined;
-    }[];
-    props: ({
-        value: number;
-        type: "number";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: string;
-        type: "string";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: boolean;
-        type: "boolean";
-        name: 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";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: (string | {
-            instanceId: string;
-            pageId: string;
-        }) & (string | {
-            instanceId: string;
-            pageId: string;
-        } | undefined);
-        type: "page";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: string[];
-        type: "string[]";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: string;
-        type: "parameter";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: string;
-        type: "expression";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: {
-            code: string;
-            type: "execute";
-            args: string[];
-        }[];
-        type: "action";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    })[];
-    dataSources: ({
-        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;
-    })[];
-    styleSourceSelections: {
-        values: string[];
-        instanceId: string;
-    }[];
-    styleSources: ({
-        type: "token";
-        name: string;
-        id: string;
-    } | {
-        type: "local";
-        id: string;
-    })[];
-    styles: {
-        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";
-            })[];
-        };
-        styleSourceId: string;
-        breakpointId: string;
-        state?: string | undefined;
-        property: StyleProperty;
-    }[];
-};
-export type EmbedTemplateData = ReturnType<typeof generateDataFromEmbedTemplate>;
+} | {
+    value: string;
+    type: "expression";
+} | EmbedTemplateInstance)[], metas: Map<Instance["component"], WsComponentMeta>, defaultBreakpointId: Breakpoint["id"], generateId?: () => string) => WebstudioFragment;
 export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, components: Set<EmbedTemplateInstance["component"]>) => {
     type: "embed" | "control" | "container" | "rich-text-child";
     description?: string | undefined;
@@ -2586,8 +2246,11 @@ export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, c
     template?: ({
         value: string;
         type: "text";
+    } | {
+        value: string;
+        type: "expression";
     } | EmbedTemplateInstance)[] | undefined;
-    category?: "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
+    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;

package/lib/types/generator.d.ts

@@ -1,4 +1,4 @@
-import type { Pages, Props } from "@webstudio-is/sdk";
+import { type Pages, type Props } from "@webstudio-is/sdk";
 type PageData = {
     pages: Pages;
     props: Props;

package/lib/types/index.d.ts

@@ -8,7 +8,7 @@ export { PropMeta } from "./prop-meta";
 export { type WsComponentPropsMeta, type ComponentState, type PresetStyle, WsComponentMeta, componentCategories, stateCategories, defaultStates, } from "./components/component-meta";
 export * from "./embed-template";
 export * from "./props";
-export { type Params, ReactSdkContext } from "./context";
+export * from "./context";
 export { validateExpression, encodeDataSourceVariable, decodeDataSourceVariable, generateDataSources, } from "./expression";
 export { getIndexesWithinAncestors } from "./instance-utils";
 export * from "./hook";

package/lib/types/props.d.ts

@@ -1,5 +1,4 @@
-import type { Page, Prop, Assets } from "@webstudio-is/sdk";
-export type Pages = Map<Page["id"], Page>;
+import { type Prop, type Assets, type Pages } from "@webstudio-is/sdk";
 export declare const normalizeProps: ({ props, assetBaseUrl, assets, pages, }: {
     props: Prop[];
     assetBaseUrl: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.125.0",
+  "version": "0.127.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -16,8 +16,8 @@
     "type-fest": "^4.3.1",
     "typescript": "5.2.2",
     "zod": "^3.21.4",
-    "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/jest-config": "1.0.7"
+    "@webstudio-is/jest-config": "1.0.7",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "peerDependencies": {
     "@remix-run/react": "^1.19.1",
@@ -33,11 +33,11 @@
     "jsep": "^1.3.8",
     "nanoid": "^5.0.1",
     "title-case": "^4.1.0",
-    "@webstudio-is/fonts": "0.125.0",
-    "@webstudio-is/icons": "^0.125.0",
-    "@webstudio-is/image": "0.125.0",
-    "@webstudio-is/sdk": "0.125.0",
-    "@webstudio-is/css-engine": "0.125.0"
+    "@webstudio-is/css-engine": "0.127.0",
+    "@webstudio-is/fonts": "0.127.0",
+    "@webstudio-is/image": "0.127.0",
+    "@webstudio-is/sdk": "0.127.0",
+    "@webstudio-is/icons": "^0.127.0"
   },
   "exports": {
     ".": {