@webstudio-is/react-sdk 0.163.0 → 0.168.0

package/lib/index.js

@@ -706,7 +706,8 @@ import {
 import { StyleValue } from "@webstudio-is/css-engine";
 var EmbedTemplateText = z2.object({
   type: z2.literal("text"),
-  value: z2.string()
+  value: z2.string(),
+  placeholder: z2.boolean().optional()
 });
 var EmbedTemplateExpression = z2.object({
   type: z2.literal("expression"),
@@ -969,7 +970,8 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
     if (item.type === "text") {
       parentChildren.push({
         type: "text",
-        value: item.value
+        value: item.value,
+        placeholder: item.placeholder
       });
     }
     if (item.type === "expression") {
@@ -1294,6 +1296,9 @@ var generateJsxElement = ({
   children,
   classesMap
 }) => {
+  if (instance.component === descendantComponent) {
+    return "";
+  }
   let generatedProps = "";
   generatedProps += `
 ${idAttribute}=${JSON.stringify(instance.id)}`;
@@ -1355,10 +1360,6 @@ ${prop.name}={${propValue}}`;
 className=${JSON.stringify(classes.join(" "))}`;
   }
   let generatedElement = "";
-  if (conditionValue) {
-    generatedElement += `{(${conditionValue}) &&
-`;
-  }
   if (instance.component === collectionComponent) {
     if (collectionDataValue === void 0 || collectionItemValue === void 0) {
       return "";
@@ -1387,12 +1388,20 @@ className=${JSON.stringify(classes.join(" "))}`;
 `;
     }
   }
-  if (instance.component === descendantComponent) {
-    return "";
-  }
   if (conditionValue) {
-    generatedElement += `}
+    let conditionalElement = "";
+    conditionalElement += `{(${conditionValue}) &&
+`;
+    if (instance.component === collectionComponent) {
+      conditionalElement += "<>\n";
+      conditionalElement += generatedElement;
+      conditionalElement += "</>\n";
+    } else {
+      conditionalElement += generatedElement;
+    }
+    conditionalElement += `}
 `;
+    return conditionalElement;
   }
   return generatedElement;
 };
@@ -1404,11 +1413,15 @@ var generateJsxChildren = ({
   dataSources,
   usedDataSources,
   indexesWithinAncestors,
-  classesMap
+  classesMap,
+  excludePlaceholders
 }) => {
   let generatedChildren = "";
   for (const child of children) {
     if (child.type === "text") {
+      if (excludePlaceholders && child.placeholder === true) {
+        continue;
+      }
       generatedChildren += child.value.split("\n").map((line) => `{${JSON.stringify(line)}}
 `).join(`<br />
 `);
@@ -1447,7 +1460,8 @@ var generateJsxChildren = ({
           props,
           dataSources,
           usedDataSources,
-          indexesWithinAncestors
+          indexesWithinAncestors,
+          excludePlaceholders
         })
       });
       continue;

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

@@ -10,7 +10,7 @@ export declare const generateJsxElement: ({ scope, instance, props, dataSources,
     children: string;
     classesMap?: Map<string, Array<string>>;
 }) => string;
-export declare const generateJsxChildren: ({ scope, children, instances, props, dataSources, usedDataSources, indexesWithinAncestors, classesMap, }: {
+export declare const generateJsxChildren: ({ scope, children, instances, props, dataSources, usedDataSources, indexesWithinAncestors, classesMap, excludePlaceholders, }: {
     scope: Scope;
     children: Instance["children"];
     instances: Instances;
@@ -19,6 +19,7 @@ export declare const generateJsxChildren: ({ scope, children, instances, props,
     usedDataSources: DataSources;
     indexesWithinAncestors: IndexesWithinAncestors;
     classesMap?: Map<string, Array<string>>;
+    excludePlaceholders?: boolean;
 }) => string;
 export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId, parameters, instances, props, dataSources, indexesWithinAncestors, classesMap, }: {
     scope: Scope;

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

@@ -983,6 +983,7 @@ export declare const WsComponentMeta: z.ZodObject<{
                     type: "guaranteedInvalid";
                 })[];
             };
+            hidden?: boolean | undefined;
         } | {
             value: {
                 value: string;
@@ -1415,6 +1416,7 @@ export declare const WsComponentMeta: z.ZodObject<{
                     type: "guaranteedInvalid";
                 })[];
             };
+            hidden?: boolean | undefined;
         } | {
             value: {
                 value: string;
@@ -1850,6 +1852,7 @@ export declare const WsComponentMeta: z.ZodObject<{
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             } | {
                 value: {
                     value: string;
@@ -2282,6 +2285,7 @@ export declare const WsComponentMeta: z.ZodObject<{
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             } | {
                 value: {
                     value: string;
@@ -2716,6 +2720,7 @@ export declare const WsComponentMeta: z.ZodObject<{
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             } | {
                 value: {
                     value: string;
@@ -3151,6 +3156,7 @@ export declare const WsComponentMeta: z.ZodObject<{
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             } | {
                 value: {
                     value: string;
@@ -3365,12 +3371,15 @@ export declare const WsComponentMeta: z.ZodObject<{
     template: z.ZodOptional<z.ZodLazy<z.ZodArray<z.ZodUnion<[z.ZodType<import("../embed-template").EmbedTemplateInstance, z.ZodTypeDef, import("../embed-template").EmbedTemplateInstance>, z.ZodObject<{
         type: z.ZodLiteral<"text">;
         value: z.ZodString;
+        placeholder: z.ZodOptional<z.ZodBoolean>;
     }, "strip", z.ZodTypeAny, {
         value: string;
         type: "text";
+        placeholder?: boolean | undefined;
     }, {
         value: string;
         type: "text";
+        placeholder?: boolean | undefined;
     }>, z.ZodObject<{
         type: z.ZodLiteral<"expression">;
         value: z.ZodString;
@@ -3630,6 +3639,7 @@ export declare const WsComponentMeta: z.ZodObject<{
                     type: "guaranteedInvalid";
                 })[];
             };
+            hidden?: boolean | undefined;
         } | {
             value: {
                 value: string;
@@ -4064,6 +4074,7 @@ export declare const WsComponentMeta: z.ZodObject<{
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             } | {
                 value: {
                     value: string;
@@ -4270,6 +4281,7 @@ export declare const WsComponentMeta: z.ZodObject<{
     template?: ({
         value: string;
         type: "text";
+        placeholder?: boolean | undefined;
     } | {
         value: string;
         type: "expression";
@@ -4523,6 +4535,7 @@ export declare const WsComponentMeta: z.ZodObject<{
                     type: "guaranteedInvalid";
                 })[];
             };
+            hidden?: boolean | undefined;
         } | {
             value: {
                 value: string;
@@ -4957,6 +4970,7 @@ export declare const WsComponentMeta: z.ZodObject<{
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             } | {
                 value: {
                     value: string;
@@ -5163,6 +5177,7 @@ export declare const WsComponentMeta: z.ZodObject<{
     template?: ({
         value: string;
         type: "text";
+        placeholder?: boolean | undefined;
     } | {
         value: string;
         type: "expression";

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

@@ -253,6 +253,7 @@ export declare const div: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -692,6 +693,7 @@ export declare const address: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -1131,6 +1133,7 @@ export declare const article: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -1570,6 +1573,7 @@ export declare const aside: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -2009,6 +2013,7 @@ export declare const figure: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -2448,6 +2453,7 @@ export declare const footer: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -2887,6 +2893,7 @@ export declare const header: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -3326,6 +3333,7 @@ export declare const main: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -3765,6 +3773,7 @@ export declare const nav: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -4204,6 +4213,7 @@ export declare const section: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -4643,6 +4653,7 @@ export declare const form: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -5082,6 +5093,7 @@ export declare const label: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -5521,6 +5533,7 @@ export declare const time: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -5960,6 +5973,7 @@ export declare const h1: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -6399,6 +6413,7 @@ export declare const h2: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -6838,6 +6853,7 @@ export declare const h3: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -7277,6 +7293,7 @@ export declare const h4: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -7716,6 +7733,7 @@ export declare const h5: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -8155,6 +8173,7 @@ export declare const h6: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -8594,6 +8613,7 @@ export declare const i: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -9033,6 +9053,7 @@ export declare const img: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -9472,6 +9493,7 @@ export declare const a: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -9911,6 +9933,7 @@ export declare const li: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -10350,6 +10373,7 @@ export declare const ul: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -10789,6 +10813,7 @@ export declare const ol: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -11228,6 +11253,7 @@ export declare const p: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -11667,6 +11693,7 @@ export declare const span: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -12111,6 +12138,7 @@ export declare const html: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -12554,6 +12582,7 @@ export declare const body: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -12997,6 +13026,7 @@ export declare const hr: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -13448,6 +13478,7 @@ export declare const b: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -13887,6 +13918,7 @@ export declare const strong: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -14330,6 +14362,7 @@ export declare const code: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -14769,6 +14802,7 @@ export declare const kbd: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -15208,6 +15242,7 @@ export declare const samp: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -15647,6 +15682,7 @@ export declare const pre: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -16089,6 +16125,7 @@ export declare const small: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -16528,6 +16565,7 @@ export declare const sub: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -16967,6 +17005,7 @@ export declare const sup: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -17410,6 +17449,7 @@ export declare const table: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -17849,6 +17889,7 @@ export declare const input: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -18288,6 +18329,7 @@ export declare const textarea: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -18727,6 +18769,7 @@ export declare const optgroup: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -19166,6 +19209,7 @@ export declare const radio: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -19605,6 +19649,7 @@ export declare const checkbox: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -20047,6 +20092,7 @@ export declare const button: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -20486,6 +20532,7 @@ export declare const select: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -20969,6 +21016,7 @@ export declare const legend: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -21411,6 +21459,7 @@ export declare const progress: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -21894,6 +21943,7 @@ export declare const summary: ({
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;

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

@@ -6,12 +6,15 @@ import type { WsComponentMeta } from "./components/component-meta";
 declare const EmbedTemplateText: z.ZodObject<{
     type: z.ZodLiteral<"text">;
     value: z.ZodString;
+    placeholder: z.ZodOptional<z.ZodBoolean>;
 }, "strip", z.ZodTypeAny, {
     value: string;
     type: "text";
+    placeholder?: boolean | undefined;
 }, {
     value: string;
     type: "text";
+    placeholder?: boolean | undefined;
 }>;
 type EmbedTemplateText = z.infer<typeof EmbedTemplateText>;
 declare const EmbedTemplateExpression: z.ZodObject<{
@@ -548,6 +551,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             }, z.ZodTypeDef, {
                 type: "function";
                 name: string;
@@ -764,6 +768,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             }>]>, "many">;
             hidden: z.ZodOptional<z.ZodBoolean>;
         }, "strip", z.ZodTypeAny, {
@@ -1021,6 +1026,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             })[];
             type: "tuple";
             hidden?: boolean | undefined;
@@ -1249,6 +1255,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                     type: "guaranteedInvalid";
                 })[];
             };
+            hidden?: boolean | undefined;
         }, z.ZodTypeDef, {
             type: "function";
             name: string;
@@ -1465,6 +1472,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                     type: "guaranteedInvalid";
                 })[];
             };
+            hidden?: boolean | undefined;
         }>]>, "many">;
     }, "strip", z.ZodTypeAny, {
         value: ({
@@ -1742,6 +1750,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                     type: "guaranteedInvalid";
                 })[];
             };
+            hidden?: boolean | undefined;
         } | {
             value: {
                 value: string;
@@ -1986,6 +1995,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             })[];
             type: "tuple";
             hidden?: boolean | undefined;
@@ -2323,6 +2333,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                     type: "guaranteedInvalid";
                 })[];
             };
+            hidden?: boolean | undefined;
         }, z.ZodTypeDef, {
             type: "function";
             name: string;
@@ -2539,6 +2550,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                     type: "guaranteedInvalid";
                 })[];
             };
+            hidden?: boolean | undefined;
         }>]>, "many">;
         hidden: z.ZodOptional<z.ZodBoolean>;
     }, "strip", z.ZodTypeAny, {
@@ -2796,6 +2808,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                     type: "guaranteedInvalid";
                 })[];
             };
+            hidden?: boolean | undefined;
         })[];
         type: "tuple";
         hidden?: boolean | undefined;
@@ -3015,6 +3028,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     }, z.ZodTypeDef, {
         type: "function";
         name: string;
@@ -3231,6 +3245,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     }>, z.ZodObject<{
         type: z.ZodLiteral<"guaranteedInvalid">;
     }, "strip", z.ZodTypeAny, {
@@ -3646,6 +3661,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                             type: "guaranteedInvalid";
                         })[];
                     };
+                    hidden?: boolean | undefined;
                 }, z.ZodTypeDef, {
                     type: "function";
                     name: string;
@@ -3862,6 +3878,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                             type: "guaranteedInvalid";
                         })[];
                     };
+                    hidden?: boolean | undefined;
                 }>]>, "many">;
                 hidden: z.ZodOptional<z.ZodBoolean>;
             }, "strip", z.ZodTypeAny, {
@@ -4119,6 +4136,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                             type: "guaranteedInvalid";
                         })[];
                     };
+                    hidden?: boolean | undefined;
                 })[];
                 type: "tuple";
                 hidden?: boolean | undefined;
@@ -4347,6 +4365,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             }, z.ZodTypeDef, {
                 type: "function";
                 name: string;
@@ -4563,6 +4582,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             }>]>, "many">;
         }, "strip", z.ZodTypeAny, {
             value: ({
@@ -4840,6 +4860,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             } | {
                 value: {
                     value: string;
@@ -5084,6 +5105,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                             type: "guaranteedInvalid";
                         })[];
                     };
+                    hidden?: boolean | undefined;
                 })[];
                 type: "tuple";
                 hidden?: boolean | undefined;
@@ -5421,6 +5443,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             }, z.ZodTypeDef, {
                 type: "function";
                 name: string;
@@ -5637,6 +5660,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             }>]>, "many">;
             hidden: z.ZodOptional<z.ZodBoolean>;
         }, "strip", z.ZodTypeAny, {
@@ -5894,6 +5918,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             })[];
             type: "tuple";
             hidden?: boolean | undefined;
@@ -6113,6 +6138,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                     type: "guaranteedInvalid";
                 })[];
             };
+            hidden?: boolean | undefined;
         }, z.ZodTypeDef, {
             type: "function";
             name: string;
@@ -6329,6 +6355,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                     type: "guaranteedInvalid";
                 })[];
             };
+            hidden?: boolean | undefined;
         }>, z.ZodObject<{
             type: z.ZodLiteral<"guaranteedInvalid">;
         }, "strip", z.ZodTypeAny, {
@@ -6680,6 +6707,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                     type: "guaranteedInvalid";
                 })[];
             };
+            hidden?: boolean | undefined;
         } | {
             value: {
                 value: string;
@@ -6924,6 +6952,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             })[];
             type: "tuple";
             hidden?: boolean | undefined;
@@ -7155,6 +7184,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             } | {
                 value: {
                     value: string;
@@ -7399,6 +7429,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                             type: "guaranteedInvalid";
                         })[];
                     };
+                    hidden?: boolean | undefined;
                 })[];
                 type: "tuple";
                 hidden?: boolean | undefined;
@@ -7648,6 +7679,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -8080,6 +8112,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -8324,6 +8357,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                     type: "guaranteedInvalid";
                 })[];
             };
+            hidden?: boolean | undefined;
         })[];
         type: "tuple";
         hidden?: boolean | undefined;
@@ -8558,6 +8592,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                     type: "guaranteedInvalid";
                 })[];
             };
+            hidden?: boolean | undefined;
         } | {
             value: {
                 value: string;
@@ -8802,6 +8837,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             })[];
             type: "tuple";
             hidden?: boolean | undefined;
@@ -9054,6 +9090,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                     type: "guaranteedInvalid";
                 })[];
             };
+            hidden?: boolean | undefined;
         } | {
             value: {
                 value: string;
@@ -9298,6 +9335,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             })[];
             type: "tuple";
             hidden?: boolean | undefined;
@@ -9529,6 +9567,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             } | {
                 value: {
                     value: string;
@@ -9773,6 +9812,7 @@ declare const EmbedTemplateStyleDeclRaw: z.ZodObject<{
                             type: "guaranteedInvalid";
                         })[];
                     };
+                    hidden?: boolean | undefined;
                 })[];
                 type: "tuple";
                 hidden?: boolean | undefined;
@@ -10028,6 +10068,7 @@ export declare const EmbedTemplateStyleDecl: z.ZodType<{
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -10460,6 +10501,7 @@ export declare const EmbedTemplateStyleDecl: z.ZodType<{
                 type: "guaranteedInvalid";
             })[];
         };
+        hidden?: boolean | undefined;
     } | {
         value: {
             value: string;
@@ -10670,12 +10712,15 @@ 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<{
     type: z.ZodLiteral<"text">;
     value: z.ZodString;
+    placeholder: z.ZodOptional<z.ZodBoolean>;
 }, "strip", z.ZodTypeAny, {
     value: string;
     type: "text";
+    placeholder?: boolean | undefined;
 }, {
     value: string;
     type: "text";
+    placeholder?: boolean | undefined;
 }>, z.ZodObject<{
     type: z.ZodLiteral<"expression">;
     value: z.ZodString;
@@ -10690,6 +10735,7 @@ export type WsEmbedTemplate = z.infer<typeof WsEmbedTemplate>;
 export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
     value: string;
     type: "text";
+    placeholder?: boolean | undefined;
 } | {
     value: string;
     type: "expression";
@@ -10697,16 +10743,17 @@ export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
 export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, components: Set<EmbedTemplateInstance["component"]>) => {
     type: "control" | "embed" | "container" | "rich-text-child";
     description?: string | undefined;
+    category?: "data" | "xml" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "internal" | undefined;
     label?: string | undefined;
     order?: number | undefined;
     template?: ({
         value: string;
         type: "text";
+        placeholder?: boolean | undefined;
     } | {
         value: string;
         type: "expression";
     } | EmbedTemplateInstance)[] | undefined;
-    category?: "data" | "xml" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "internal" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;
@@ -10951,6 +10998,7 @@ export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, c
                         type: "guaranteedInvalid";
                     })[];
                 };
+                hidden?: boolean | undefined;
             } | {
                 value: {
                     value: string;
@@ -11391,6 +11439,7 @@ export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, c
                     type: "guaranteedInvalid";
                 })[];
             };
+            hidden?: boolean | undefined;
         } | {
             value: {
                 value: string;

package/lib/types/hook.d.ts

@@ -31,6 +31,7 @@ export declare const getClosestInstance: (instancePath: InstancePath, currentIns
     children: ({
         value: string;
         type: "text";
+        placeholder?: boolean | undefined;
     } | {
         value: string;
         type: "id";

package/lib/types/instance-utils.d.ts

@@ -7,6 +7,7 @@ export declare const getIndexesWithinAncestors: (metas: Map<Instance["component"
     children: ({
         value: string;
         type: "text";
+        placeholder?: boolean | undefined;
     } | {
         value: string;
         type: "id";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.163.0",
+  "version": "0.168.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -24,15 +24,15 @@
     "zod": "^3.19.1"
   },
   "dependencies": {
-    "change-case": "^5.0.2",
+    "change-case": "^5.4.4",
     "html-tags": "^3.3.1",
     "nanoid": "^5.0.1",
     "title-case": "^4.1.0",
-    "@webstudio-is/css-engine": "0.163.0",
-    "@webstudio-is/fonts": "0.163.0",
-    "@webstudio-is/image": "0.163.0",
-    "@webstudio-is/icons": "^0.163.0",
-    "@webstudio-is/sdk": "0.163.0"
+    "@webstudio-is/css-engine": "0.168.0",
+    "@webstudio-is/sdk": "0.168.0",
+    "@webstudio-is/icons": "^0.168.0",
+    "@webstudio-is/image": "0.168.0",
+    "@webstudio-is/fonts": "0.168.0"
   },
   "exports": {
     ".": {