@webstudio-is/react-sdk 0.144.1-89bca38.0 → 0.151.0

package/lib/index.js

@@ -214,7 +214,7 @@ var getPresetStyleRules = (component, presetStyle) => {
 // src/css/css.ts
 import {
   createRegularStyleSheet,
-  createAtomicStyleSheet
+  generateAtomic
 } from "@webstudio-is/css-engine";
 var createImageValueTransformer = (assets, { assetBaseUrl }) => (styleValue) => {
   if (styleValue.type === "image" && styleValue.value.type === "asset") {
@@ -242,12 +242,10 @@ var generateCss = ({
   assetBaseUrl,
   atomic
 }) => {
-  const classesMap = /* @__PURE__ */ new Map();
-  const regularSheet = createRegularStyleSheet({ name: "ssr-regular" });
-  const atomicSheet = atomic ? createAtomicStyleSheet({ name: "ssr-atomic" }) : void 0;
-  addGlobalRules(regularSheet, { assets, assetBaseUrl });
+  const sheet = createRegularStyleSheet({ name: "ssr" });
+  addGlobalRules(sheet, { assets, assetBaseUrl });
   for (const breakpoint of breakpoints.values()) {
-    (atomicSheet ?? regularSheet).addMediaRule(breakpoint.id, breakpoint);
+    sheet.addMediaRule(breakpoint.id, breakpoint);
   }
   for (const [component, meta] of componentMetas) {
     const presetStyle = meta.presetStyle;
@@ -256,35 +254,37 @@ var generateCss = ({
     }
     const rules = getPresetStyleRules(component, presetStyle);
     for (const [selector, style] of rules) {
-      regularSheet.addStyleRule({ style }, selector);
+      sheet.addStyleRule({ style }, selector);
     }
   }
-  const styleRules = getStyleRules(styles, styleSourceSelections);
   const imageValueTransformer = createImageValueTransformer(assets, {
     assetBaseUrl
   });
-  for (const { breakpointId, instanceId, state, style } of styleRules) {
-    if (atomicSheet) {
-      const { classes } = atomicSheet.addStyleRule(
-        { breakpoint: breakpointId, style },
-        state,
-        imageValueTransformer
-      );
-      classesMap.set(instanceId, [
-        ...classesMap.get(instanceId) ?? [],
-        ...classes
-      ]);
-      continue;
-    }
-    regularSheet.addStyleRule(
-      { breakpoint: breakpointId, style },
-      `[${idAttribute}="${instanceId}"]${state ?? ""}`,
-      imageValueTransformer
-    );
+  sheet.setTransformer(imageValueTransformer);
+  for (const styleDecl of styles.values()) {
+    const rule = sheet.addMixinRule(styleDecl.styleSourceId);
+    rule.setDeclaration({
+      breakpoint: styleDecl.breakpointId,
+      selector: styleDecl.state ?? "",
+      property: styleDecl.property,
+      value: styleDecl.value
+    });
+  }
+  const instanceByRule = /* @__PURE__ */ new Map();
+  for (const { instanceId, values } of styleSourceSelections.values()) {
+    const rule = sheet.addNestingRule(`[${idAttribute}="${instanceId}"]`);
+    rule.applyMixins(values);
+    instanceByRule.set(rule, instanceId);
+  }
+  if (atomic) {
+    return generateAtomic(sheet, {
+      getKey: (rule) => instanceByRule.get(rule) ?? "",
+      transformValue: imageValueTransformer
+    });
   }
   return {
-    cssText: regularSheet.cssText + (atomicSheet?.cssText ?? ""),
-    classesMap
+    cssText: sheet.cssText,
+    classesMap: /* @__PURE__ */ new Map()
   };
 };
 
@@ -498,12 +498,10 @@ var Code = z.object({
   ...common,
   control: z.literal("code"),
   type: z.literal("string"),
-  defaultValue: z.string().optional(),
-  /**
-   * The number of rows in <textarea>. If set to 0 an <input> will be used instead.
-   * In line with Storybook team's plan: https://github.com/storybookjs/storybook/issues/21100
-   */
-  rows: z.number().optional()
+  defaultValue: z.string().optional()
+});
+var CodeText = Code.extend({
+  control: z.literal("codetext")
 });
 var Color = z.object({
   ...common,
@@ -604,6 +602,7 @@ var PropMeta = z.union([
   Range,
   Text,
   Code,
+  CodeText,
   Color,
   Boolean,
   Radio,
@@ -1011,6 +1010,7 @@ var componentCategories = [
   "media",
   "forms",
   "radix",
+  "xml",
   "hidden"
 ];
 var stateCategories = ["states", "component-states"];

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

@@ -3,325 +3,22 @@ import type { IndexesWithinAncestors } from "./instance-utils";
 export declare const generateJsxElement: ({ scope, instance, props, dataSources, usedDataSources, indexesWithinAncestors, children, classesMap, }: {
     scope: Scope;
     instance: Instance;
-    props: Map<string, {
-        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: 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;
-    }>;
-    usedDataSources: 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;
-    }>;
+    props: Props;
+    dataSources: DataSources;
+    usedDataSources: DataSources;
     indexesWithinAncestors: IndexesWithinAncestors;
     children: string;
-    classesMap?: Map<string, string[]> | undefined;
+    classesMap?: Map<string, Array<string>>;
 }) => string;
 export declare const generateJsxChildren: ({ scope, children, instances, props, dataSources, usedDataSources, indexesWithinAncestors, classesMap, }: {
     scope: Scope;
     children: Instance["children"];
-    instances: Map<string, {
-        type: "instance";
-        id: string;
-        children: ({
-            value: string;
-            type: "text";
-        } | {
-            value: string;
-            type: "id";
-        } | {
-            value: string;
-            type: "expression";
-        })[];
-        component: string;
-        label?: string | undefined;
-    }>;
-    props: Map<string, {
-        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: 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;
-    }>;
-    usedDataSources: 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;
-    }>;
+    instances: Instances;
+    props: Props;
+    dataSources: DataSources;
+    usedDataSources: DataSources;
     indexesWithinAncestors: IndexesWithinAncestors;
-    classesMap?: Map<string, string[]> | undefined;
+    classesMap?: Map<string, Array<string>>;
 }) => string;
 export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId, parameters, instances, props, dataSources, indexesWithinAncestors, classesMap, }: {
     scope: Scope;
@@ -330,136 +27,9 @@ export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId,
     parameters: Extract<Prop, {
         type: "parameter";
     }>[];
-    instances: Map<string, {
-        type: "instance";
-        id: string;
-        children: ({
-            value: string;
-            type: "text";
-        } | {
-            value: string;
-            type: "id";
-        } | {
-            value: string;
-            type: "expression";
-        })[];
-        component: string;
-        label?: string | undefined;
-    }>;
-    props: Map<string, {
-        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: 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;
-    }>;
+    instances: Instances;
+    props: Props;
+    dataSources: DataSources;
     indexesWithinAncestors: IndexesWithinAncestors;
     classesMap: Map<string, Array<string>>;
 }) => string;

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

@@ -73,7 +73,6 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         control: z.ZodLiteral<"code">;
         type: z.ZodLiteral<"string">;
         defaultValue: z.ZodOptional<z.ZodString>;
-        rows: z.ZodOptional<z.ZodNumber>;
         label: z.ZodOptional<z.ZodString>;
         description: z.ZodOptional<z.ZodString>;
         required: z.ZodBoolean;
@@ -82,7 +81,6 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         required: boolean;
         control: "code";
         defaultValue?: string | undefined;
-        rows?: number | undefined;
         label?: string | undefined;
         description?: string | undefined;
     }, {
@@ -90,9 +88,29 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         required: boolean;
         control: "code";
         defaultValue?: string | undefined;
-        rows?: number | undefined;
         label?: string | undefined;
         description?: string | undefined;
+    }>, z.ZodObject<{
+        type: z.ZodLiteral<"string">;
+        required: z.ZodBoolean;
+        description: z.ZodOptional<z.ZodString>;
+        label: z.ZodOptional<z.ZodString>;
+        defaultValue: z.ZodOptional<z.ZodString>;
+        control: z.ZodLiteral<"codetext">;
+    }, "strip", z.ZodTypeAny, {
+        type: "string";
+        required: boolean;
+        control: "codetext";
+        description?: string | undefined;
+        label?: string | undefined;
+        defaultValue?: string | undefined;
+    }, {
+        type: "string";
+        required: boolean;
+        control: "codetext";
+        description?: string | undefined;
+        label?: string | undefined;
+        defaultValue?: string | undefined;
     }>, z.ZodObject<{
         control: z.ZodLiteral<"color">;
         type: z.ZodLiteral<"string">;
@@ -438,9 +456,15 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         required: boolean;
         control: "code";
         defaultValue?: string | undefined;
-        rows?: number | undefined;
         label?: string | undefined;
         description?: string | undefined;
+    } | {
+        type: "string";
+        required: boolean;
+        control: "codetext";
+        description?: string | undefined;
+        label?: string | undefined;
+        defaultValue?: string | undefined;
     } | {
         type: "string";
         required: boolean;
@@ -576,9 +600,15 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         required: boolean;
         control: "code";
         defaultValue?: string | undefined;
-        rows?: number | undefined;
         label?: string | undefined;
         description?: string | undefined;
+    } | {
+        type: "string";
+        required: boolean;
+        control: "codetext";
+        description?: string | undefined;
+        label?: string | undefined;
+        defaultValue?: string | undefined;
     } | {
         type: "string";
         required: boolean;
@@ -688,7 +718,7 @@ declare const WsComponentPropsMeta: z.ZodObject<{
     initialProps?: string[] | undefined;
 }>;
 export type WsComponentPropsMeta = z.infer<typeof WsComponentPropsMeta>;
-export declare const componentCategories: readonly ["general", "text", "data", "media", "forms", "radix", "hidden"];
+export declare const componentCategories: readonly ["general", "text", "data", "media", "forms", "radix", "xml", "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 +736,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", "data", "media", "forms", "radix", "hidden"]>>;
+    category: z.ZodOptional<z.ZodEnum<["general", "text", "data", "media", "forms", "radix", "xml", "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">>;
@@ -3355,7 +3385,7 @@ export declare const WsComponentMeta: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     type: "embed" | "control" | "container" | "rich-text-child";
     icon: string;
-    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
+    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "xml" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;
@@ -4248,7 +4278,7 @@ export declare const WsComponentMeta: z.ZodObject<{
 }, {
     type: "embed" | "control" | "container" | "rich-text-child";
     icon: string;
-    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
+    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "xml" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;

package/lib/types/core-components.d.ts

@@ -33,9 +33,15 @@ export declare const corePropsMetas: {
             required: boolean;
             control: "code";
             defaultValue?: string | undefined;
-            rows?: number | undefined;
             label?: string | undefined;
             description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "codetext";
+            description?: string | undefined;
+            label?: string | undefined;
+            defaultValue?: string | undefined;
         } | {
             type: "string";
             required: boolean;

package/lib/types/css/global-rules.d.ts

@@ -1,53 +1,6 @@
-import type { StyleSheetAtomic, StyleSheetRegular } from "@webstudio-is/css-engine";
+import type { StyleSheetRegular } from "@webstudio-is/css-engine";
 import type { Assets } from "@webstudio-is/sdk";
-export declare const addGlobalRules: (sheet: StyleSheetRegular | StyleSheetAtomic, { assets, assetBaseUrl }: {
-    assets: Map<string, {
-        type: "font";
-        name: string;
-        format: "ttf" | "woff" | "woff2" | "otf";
-        meta: ({
-            family: string;
-            style: "normal" | "italic" | "oblique";
-            weight: number;
-        } | {
-            family: string;
-            variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
-                name: string;
-                min: number;
-                default: number;
-                max: number;
-            }>>;
-        }) & ({
-            family: string;
-            style: "normal" | "italic" | "oblique";
-            weight: number;
-        } | {
-            family: string;
-            variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
-                name: string;
-                min: number;
-                default: number;
-                max: number;
-            }>>;
-        } | undefined);
-        id: string;
-        projectId: string;
-        size: number;
-        description: string | null;
-        createdAt: string;
-    } | {
-        type: "image";
-        name: string;
-        format: string;
-        meta: {
-            width: number;
-            height: number;
-        };
-        id: string;
-        projectId: string;
-        size: number;
-        description: string | null;
-        createdAt: string;
-    }>;
+export declare const addGlobalRules: (sheet: StyleSheetRegular, { assets, assetBaseUrl }: {
+    assets: Assets;
     assetBaseUrl: string;
 }) => void;

package/lib/types/css/style-rules.d.ts

@@ -10,6 +10,8 @@ type StyleRule = {
 /**
  * Merge styles from different style sources
  * and group by instance and breakpoint
+ *
+ * @deprecated
  */
 export declare const getStyleRules: (styles: Styles, styleSourceSelections: Map<string, {
     values: string[];

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

@@ -10706,7 +10706,7 @@ export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, c
         value: string;
         type: "expression";
     } | EmbedTemplateInstance)[] | undefined;
-    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
+    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "xml" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;

package/lib/types/prop-meta.d.ts

@@ -73,11 +73,6 @@ export declare const PropMeta: z.ZodUnion<[z.ZodObject<{
     control: z.ZodLiteral<"code">;
     type: z.ZodLiteral<"string">;
     defaultValue: z.ZodOptional<z.ZodString>;
-    /**
-     * The number of rows in <textarea>. If set to 0 an <input> will be used instead.
-     * In line with Storybook team's plan: https://github.com/storybookjs/storybook/issues/21100
-     */
-    rows: z.ZodOptional<z.ZodNumber>;
     label: z.ZodOptional<z.ZodString>;
     description: z.ZodOptional<z.ZodString>;
     required: z.ZodBoolean;
@@ -86,7 +81,6 @@ export declare const PropMeta: z.ZodUnion<[z.ZodObject<{
     required: boolean;
     control: "code";
     defaultValue?: string | undefined;
-    rows?: number | undefined;
     label?: string | undefined;
     description?: string | undefined;
 }, {
@@ -94,9 +88,29 @@ export declare const PropMeta: z.ZodUnion<[z.ZodObject<{
     required: boolean;
     control: "code";
     defaultValue?: string | undefined;
-    rows?: number | undefined;
     label?: string | undefined;
     description?: string | undefined;
+}>, z.ZodObject<{
+    type: z.ZodLiteral<"string">;
+    required: z.ZodBoolean;
+    description: z.ZodOptional<z.ZodString>;
+    label: z.ZodOptional<z.ZodString>;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    control: z.ZodLiteral<"codetext">;
+}, "strip", z.ZodTypeAny, {
+    type: "string";
+    required: boolean;
+    control: "codetext";
+    description?: string | undefined;
+    label?: string | undefined;
+    defaultValue?: string | undefined;
+}, {
+    type: "string";
+    required: boolean;
+    control: "codetext";
+    description?: string | undefined;
+    label?: string | undefined;
+    defaultValue?: string | undefined;
 }>, z.ZodObject<{
     control: z.ZodLiteral<"color">;
     type: z.ZodLiteral<"string">;

package/lib/types/props.d.ts

@@ -2,54 +2,7 @@ import { type Prop, type Assets, type Pages } from "@webstudio-is/sdk";
 export declare const normalizeProps: ({ props, assetBaseUrl, assets, pages, }: {
     props: Prop[];
     assetBaseUrl: string;
-    assets: Map<string, {
-        type: "font";
-        name: string;
-        format: "ttf" | "woff" | "woff2" | "otf";
-        meta: ({
-            family: string;
-            style: "normal" | "italic" | "oblique";
-            weight: number;
-        } | {
-            family: string;
-            variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
-                name: string;
-                min: number;
-                default: number;
-                max: number;
-            }>>;
-        }) & ({
-            family: string;
-            style: "normal" | "italic" | "oblique";
-            weight: number;
-        } | {
-            family: string;
-            variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
-                name: string;
-                min: number;
-                default: number;
-                max: number;
-            }>>;
-        } | undefined);
-        id: string;
-        projectId: string;
-        size: number;
-        description: string | null;
-        createdAt: string;
-    } | {
-        type: "image";
-        name: string;
-        format: string;
-        meta: {
-            width: number;
-            height: number;
-        };
-        id: string;
-        projectId: string;
-        size: number;
-        description: string | null;
-        createdAt: string;
-    }>;
+    assets: Assets;
     pages: Pages;
 }) => ({
     value: number;

package/lib/types/tree/create-elements-tree.d.ts

@@ -10,44 +10,14 @@ export type WebstudioComponentProps = {
     components: Components;
 };
 export declare const createElementsTree: ({ renderer, assetBaseUrl, imageBaseUrl, imageLoader, instances, rootInstanceId, Component, components, }: Params & {
-    instances: Map<string, {
-        type: "instance";
-        id: string;
-        children: ({
-            value: string;
-            type: "text";
-        } | {
-            value: string;
-            type: "id";
-        } | {
-            value: string;
-            type: "expression";
-        })[];
-        component: string;
-        label?: string | undefined;
-    }>;
+    instances: Instances;
     imageLoader: ImageLoader;
     rootInstanceId: Instance["id"];
     Component: ForwardRefExoticComponent<WebstudioComponentProps & RefAttributes<HTMLElement>>;
     components: Components;
 }) => import("react/jsx-runtime").JSX.Element | null;
 export declare const createInstanceChildrenElements: ({ instances, instanceSelector, children, Component, components, }: {
-    instances: Map<string, {
-        type: "instance";
-        id: string;
-        children: ({
-            value: string;
-            type: "text";
-        } | {
-            value: string;
-            type: "id";
-        } | {
-            value: string;
-            type: "expression";
-        })[];
-        component: string;
-        label?: string | undefined;
-    }>;
+    instances: Instances;
     instanceSelector: InstanceSelector;
     children: Instance["children"];
     Component: ForwardRefExoticComponent<WebstudioComponentProps & RefAttributes<HTMLElement>>;

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.144.1-89bca38.0",
+  "version": "0.151.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "@types/react": "^18.2.70",
+    "@types/react-dom": "^18.2.25",
+    "react": "18.3.0-canary-14898b6a9-20240318",
+    "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "strip-indent": "^4.0.0",
     "type-fest": "^4.3.1",
-    "typescript": "5.2.2",
+    "typescript": "5.4.5",
     "zod": "^3.22.4",
-    "@webstudio-is/jest-config": "1.0.8-89bca38.0",
-    "@webstudio-is/tsconfig": "1.0.8-89bca38.0"
+    "@webstudio-is/jest-config": "1.0.7",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "18.3.0-canary-14898b6a9-20240318",
+    "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "zod": "^3.19.1"
   },
   "dependencies": {
@@ -28,11 +28,11 @@
     "html-tags": "^3.3.1",
     "nanoid": "^5.0.1",
     "title-case": "^4.1.0",
-    "@webstudio-is/icons": "^0.144.1-89bca38.0",
-    "@webstudio-is/css-engine": "0.144.1-89bca38.0",
-    "@webstudio-is/image": "0.144.1-89bca38.0",
-    "@webstudio-is/sdk": "0.144.1-89bca38.0",
-    "@webstudio-is/fonts": "0.144.1-89bca38.0"
+    "@webstudio-is/css-engine": "0.151.0",
+    "@webstudio-is/icons": "^0.151.0",
+    "@webstudio-is/image": "0.151.0",
+    "@webstudio-is/fonts": "0.151.0",
+    "@webstudio-is/sdk": "0.151.0"
   },
   "exports": {
     ".": {