@webstudio-is/react-sdk 0.151.0 → 0.167.0

package/lib/css/normalize.js

@@ -60,6 +60,7 @@ var nav = baseStyle;
 var section = baseStyle;
 var form = baseStyle;
 var label = baseStyle;
+var time = baseStyle;
 var h1 = baseStyle;
 var h2 = baseStyle;
 var h3 = baseStyle;
@@ -375,5 +376,6 @@ export {
   sup,
   table,
   textarea,
+  time,
   ul
 };

package/lib/index.js

@@ -216,6 +216,106 @@ import {
   createRegularStyleSheet,
   generateAtomic
 } from "@webstudio-is/css-engine";
+
+// src/core-components.ts
+import { ListViewIcon, PaintBrushIcon } from "@webstudio-is/icons/svg";
+var portalComponent = "Slot";
+var collectionComponent = "ws:collection";
+var collectionMeta = {
+  category: "data",
+  order: 2,
+  type: "container",
+  label: "Collection",
+  icon: ListViewIcon,
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: collectionComponent,
+      props: [
+        {
+          name: "data",
+          type: "json",
+          value: [
+            "Collection Item 1",
+            "Collection Item 2",
+            "Collection Item 3"
+          ]
+        },
+        {
+          name: "item",
+          type: "parameter",
+          variableName: "collectionItem",
+          variableAlias: "Collection Item"
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "Box",
+          children: [{ type: "expression", value: "collectionItem" }]
+        }
+      ]
+    }
+  ]
+};
+var collectionPropsMeta = {
+  props: {
+    data: {
+      required: true,
+      control: "json",
+      type: "json"
+    }
+  },
+  initialProps: ["data"]
+};
+var descendantComponent = "ws:descendant";
+var descendantMeta = {
+  category: "internal",
+  type: "control",
+  label: "Descendant",
+  icon: PaintBrushIcon,
+  detachable: false
+};
+var descendantPropsMeta = {
+  props: {
+    selector: {
+      required: true,
+      type: "string",
+      control: "select",
+      options: [
+        " p",
+        " h1",
+        " h2",
+        " h3",
+        " h4",
+        " h5",
+        " h6",
+        " :where(strong, b)",
+        " :where(em, i)",
+        " a",
+        " img",
+        " blockquote",
+        " code",
+        " :where(ul, ol)",
+        " li",
+        " hr"
+      ]
+    }
+  },
+  initialProps: ["selector"]
+};
+var coreMetas = {
+  [collectionComponent]: collectionMeta,
+  [descendantComponent]: descendantMeta
+};
+var corePropsMetas = {
+  [collectionComponent]: collectionPropsMeta,
+  [descendantComponent]: descendantPropsMeta
+};
+var isCoreComponent = (component) => component === collectionComponent || component === descendantComponent;
+
+// src/css/css.ts
 var createImageValueTransformer = (assets, { assetBaseUrl }) => (styleValue) => {
   if (styleValue.type === "image" && styleValue.value.type === "asset") {
     const asset = assets.get(styleValue.value.value);
@@ -235,6 +335,8 @@ var createImageValueTransformer = (assets, { assetBaseUrl }) => (styleValue) =>
 };
 var generateCss = ({
   assets,
+  instances,
+  props,
   breakpoints,
   styles,
   styleSourceSelections,
@@ -243,6 +345,20 @@ var generateCss = ({
   atomic
 }) => {
   const sheet = createRegularStyleSheet({ name: "ssr" });
+  const parentIdByInstanceId = /* @__PURE__ */ new Map();
+  for (const instance of instances.values()) {
+    for (const child of instance.children) {
+      if (child.type === "id") {
+        parentIdByInstanceId.set(child.value, instance.id);
+      }
+    }
+  }
+  const descendantSelectorByInstanceId = /* @__PURE__ */ new Map();
+  for (const prop of props.values()) {
+    if (prop.name === "selector" && prop.type === "string") {
+      descendantSelectorByInstanceId.set(prop.instanceId, prop.value);
+    }
+  }
   addGlobalRules(sheet, { assets, assetBaseUrl });
   for (const breakpoint of breakpoints.values()) {
     sheet.addMediaRule(breakpoint.id, breakpoint);
@@ -271,8 +387,23 @@ var generateCss = ({
     });
   }
   const instanceByRule = /* @__PURE__ */ new Map();
-  for (const { instanceId, values } of styleSourceSelections.values()) {
-    const rule = sheet.addNestingRule(`[${idAttribute}="${instanceId}"]`);
+  for (const selection of styleSourceSelections.values()) {
+    let { instanceId } = selection;
+    const { values } = selection;
+    let descendantSuffix = "";
+    const instance = instances.get(instanceId);
+    if (instance?.component === descendantComponent) {
+      const parentId = parentIdByInstanceId.get(instanceId);
+      const descendantSelector = descendantSelectorByInstanceId.get(instanceId);
+      if (parentId && descendantSelector) {
+        descendantSuffix = descendantSelector;
+        instanceId = parentId;
+      }
+    }
+    const rule = sheet.addNestingRule(
+      `[${idAttribute}="${instanceId}"]`,
+      descendantSuffix
+    );
     rule.applyMixins(values);
     instanceByRule.set(rule, instanceId);
   }
@@ -405,65 +536,6 @@ var createInstanceElement = ({
   );
 };
 
-// src/core-components.ts
-import { ListViewIcon } from "@webstudio-is/icons/svg";
-var portalComponent = "Slot";
-var collectionComponent = "ws:collection";
-var collectionMeta = {
-  category: "data",
-  order: 7,
-  type: "container",
-  label: "Collection",
-  icon: ListViewIcon,
-  stylable: false,
-  template: [
-    {
-      type: "instance",
-      component: collectionComponent,
-      props: [
-        {
-          name: "data",
-          type: "json",
-          value: [
-            "Collection Item 1",
-            "Collection Item 2",
-            "Collection Item 3"
-          ]
-        },
-        {
-          name: "item",
-          type: "parameter",
-          variableName: "collectionItem",
-          variableAlias: "Collection Item"
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "Box",
-          children: [{ type: "expression", value: "collectionItem" }]
-        }
-      ]
-    }
-  ]
-};
-var collectionPropsMeta = {
-  props: {
-    data: {
-      required: true,
-      control: "json",
-      type: "json"
-    }
-  },
-  initialProps: ["data"]
-};
-var coreMetas = {
-  [collectionComponent]: collectionMeta
-};
-var corePropsMetas = {
-  [collectionComponent]: collectionPropsMeta
-};
-
 // src/prop-meta.ts
 import { z } from "zod";
 var common = {
@@ -634,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"),
@@ -897,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") {
@@ -1011,7 +1085,8 @@ var componentCategories = [
   "forms",
   "radix",
   "xml",
-  "hidden"
+  "hidden",
+  "internal"
 ];
 var stateCategories = ["states", "component-states"];
 var ComponentState = z3.object({
@@ -1314,6 +1389,9 @@ className=${JSON.stringify(classes.join(" "))}`;
 `;
     }
   }
+  if (instance.component === descendantComponent) {
+    return "";
+  }
   if (conditionValue) {
     generatedElement += `}
 `;
@@ -1328,11 +1406,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 />
 `);
@@ -1371,7 +1453,8 @@ var generateJsxChildren = ({
           props,
           dataSources,
           usedDataSources,
-          indexesWithinAncestors
+          indexesWithinAncestors,
+          excludePlaceholders
         })
       });
       continue;
@@ -1483,6 +1566,7 @@ export {
   createImageValueTransformer,
   createInstanceChildrenElements,
   defaultStates,
+  descendantComponent,
   generateCss,
   generateDataFromEmbedTemplate,
   generateJsxChildren,
@@ -1498,6 +1582,7 @@ export {
   getStyleRules,
   idAttribute,
   indexAttribute,
+  isCoreComponent,
   namespaceMeta,
   normalizeProps,
   portalComponent,

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

@@ -718,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", "xml", "hidden"];
+export declare const componentCategories: readonly ["general", "text", "data", "media", "forms", "radix", "xml", "hidden", "internal"];
 export declare const stateCategories: readonly ["states", "component-states"];
 export declare const ComponentState: z.ZodObject<{
     category: z.ZodOptional<z.ZodEnum<["states", "component-states"]>>;
@@ -736,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", "xml", "hidden"]>>;
+    category: z.ZodOptional<z.ZodEnum<["general", "text", "data", "media", "forms", "radix", "xml", "hidden", "internal"]>>;
     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">>;
@@ -3365,12 +3365,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;
@@ -3383,9 +3386,9 @@ export declare const WsComponentMeta: z.ZodObject<{
     }>]>, "many">>>;
     order: z.ZodOptional<z.ZodNumber>;
 }, "strip", z.ZodTypeAny, {
-    type: "embed" | "control" | "container" | "rich-text-child";
+    type: "control" | "embed" | "container" | "rich-text-child";
     icon: string;
-    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "xml" | undefined;
+    category?: "data" | "xml" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "internal" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;
@@ -4270,15 +4273,16 @@ export declare const WsComponentMeta: z.ZodObject<{
     template?: ({
         value: string;
         type: "text";
+        placeholder?: boolean | undefined;
     } | {
         value: string;
         type: "expression";
     } | import("../embed-template").EmbedTemplateInstance)[] | undefined;
     order?: number | undefined;
 }, {
-    type: "embed" | "control" | "container" | "rich-text-child";
+    type: "control" | "embed" | "container" | "rich-text-child";
     icon: string;
-    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "xml" | undefined;
+    category?: "data" | "xml" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "internal" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;
@@ -5163,6 +5167,7 @@ export declare const WsComponentMeta: z.ZodObject<{
     template?: ({
         value: string;
         type: "text";
+        placeholder?: boolean | undefined;
     } | {
         value: string;
         type: "expression";

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

@@ -1,8 +1,10 @@
 import type { WsComponentMeta } from "./components/component-meta";
 export declare const portalComponent = "Slot";
 export declare const collectionComponent = "ws:collection";
+export declare const descendantComponent = "ws:descendant";
 export declare const coreMetas: {
     "ws:collection": WsComponentMeta;
+    "ws:descendant": WsComponentMeta;
 };
 export declare const corePropsMetas: {
     "ws:collection": {
@@ -150,4 +152,150 @@ export declare const corePropsMetas: {
         }>;
         initialProps?: string[] | undefined;
     };
+    "ws:descendant": {
+        props: Record<string, {
+            type: "number";
+            required: boolean;
+            control: "number";
+            defaultValue?: number | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "number";
+            required: boolean;
+            control: "range";
+            defaultValue?: number | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "text";
+            defaultValue?: string | undefined;
+            rows?: number | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "code";
+            defaultValue?: string | 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;
+            control: "color";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "boolean";
+            required: boolean;
+            control: "boolean";
+            defaultValue?: boolean | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string";
+            required: boolean;
+            control: "radio";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string";
+            required: boolean;
+            control: "inline-radio";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string";
+            required: boolean;
+            control: "select";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string[]";
+            required: boolean;
+            control: "check";
+            defaultValue?: string[] | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string[]";
+            required: boolean;
+            control: "inline-check";
+            defaultValue?: string[] | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string[]";
+            required: boolean;
+            control: "multi-select";
+            defaultValue?: string[] | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "file";
+            defaultValue?: string | undefined;
+            accept?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "url";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "json";
+            required: boolean;
+            control: "json";
+            defaultValue?: unknown;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "date";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "action";
+            required: boolean;
+            control: "action";
+            defaultValue?: undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "textContent";
+            defaultValue?: string | undefined;
+            label?: string | undefined;
+            description?: string | undefined;
+        }>;
+        initialProps?: string[] | undefined;
+    };
 };
+export declare const isCoreComponent: (component: string) => boolean;

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

@@ -1,8 +1,10 @@
 import { type TransformValue } from "@webstudio-is/css-engine";
-import type { Assets, Breakpoints, StyleSourceSelections, Styles } from "@webstudio-is/sdk";
+import type { Assets, Breakpoints, Instances, Props, StyleSourceSelections, Styles } from "@webstudio-is/sdk";
 import type { WsComponentMeta } from "../components/component-meta";
 export type CssConfig = {
     assets: Assets;
+    instances: Instances;
+    props: Props;
     breakpoints: Breakpoints;
     styles: Styles;
     styleSourceSelections: StyleSourceSelections;
@@ -13,7 +15,7 @@ export type CssConfig = {
 export declare const createImageValueTransformer: (assets: Map<string, {
     type: "font";
     name: string;
-    format: "ttf" | "woff" | "woff2" | "otf";
+    format: "ttf" | "woff" | "woff2";
     meta: ({
         family: string;
         style: "normal" | "italic" | "oblique";
@@ -60,7 +62,7 @@ export declare const createImageValueTransformer: (assets: Map<string, {
 }>, { assetBaseUrl }: {
     assetBaseUrl: string;
 }) => TransformValue;
-export declare const generateCss: ({ assets, breakpoints, styles, styleSourceSelections, componentMetas, assetBaseUrl, atomic, }: CssConfig) => {
+export declare const generateCss: ({ assets, instances, props, breakpoints, styles, styleSourceSelections, componentMetas, assetBaseUrl, atomic, }: CssConfig) => {
     cssText: string;
     classesMap: Map<string, string[]>;
 };

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

@@ -5284,6 +5284,445 @@ export declare const label: ({
         value: string;
     };
 })[];
+export declare const time: ({
+    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;
+    } | {
+        type: "function";
+        name: string;
+        args: {
+            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;
+        } | any | {
+            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;
+            } | any)[];
+            type: "tuple";
+            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;
+            } | any | {
+                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;
+                } | any)[];
+                type: "tuple";
+                hidden?: boolean | undefined;
+            } | {
+                value: string;
+                type: "invalid";
+            })[];
+            type: "layers";
+        } | {
+            type: "guaranteedInvalid";
+        } | {
+            value: "";
+            type: "unset";
+        } | {
+            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;
+            } | any | {
+                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;
+                } | any)[];
+                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;
+                } | any | {
+                    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;
+                    } | any)[];
+                    type: "tuple";
+                    hidden?: boolean | undefined;
+                } | {
+                    value: string;
+                    type: "invalid";
+                })[];
+                type: "layers";
+            } | {
+                type: "guaranteedInvalid";
+            })[];
+        };
+    } | {
+        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;
+        } | any)[];
+        type: "tuple";
+        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;
+        } | any | {
+            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;
+            } | any)[];
+            type: "tuple";
+            hidden?: boolean | undefined;
+        } | {
+            value: string;
+            type: "invalid";
+        })[];
+        type: "layers";
+    } | {
+        type: "guaranteedInvalid";
+    } | {
+        value: "";
+        type: "unset";
+    } | {
+        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;
+        } | any | {
+            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;
+            } | any)[];
+            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;
+            } | any | {
+                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;
+                } | any)[];
+                type: "tuple";
+                hidden?: boolean | undefined;
+            } | {
+                value: string;
+                type: "invalid";
+            })[];
+            type: "layers";
+        } | {
+            type: "guaranteedInvalid";
+        })[];
+    };
+    state?: string | undefined;
+    property: import("@webstudio-is/css-engine").StyleProperty;
+} | {
+    property: "boxSizing";
+    value: {
+        type: "keyword";
+        value: string;
+    };
+})[];
 export declare const h1: ({
     value: {
         value: number;

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<{
@@ -10670,12 +10673,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,23 +10696,25 @@ export type WsEmbedTemplate = z.infer<typeof WsEmbedTemplate>;
 export declare const generateDataFromEmbedTemplate: (treeTemplate: ({
     value: string;
     type: "text";
+    placeholder?: boolean | undefined;
 } | {
     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";
+    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" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "xml" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;

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.151.0",
+  "version": "0.167.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -28,24 +28,22 @@
     "html-tags": "^3.3.1",
     "nanoid": "^5.0.1",
     "title-case": "^4.1.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"
+    "@webstudio-is/css-engine": "0.167.0",
+    "@webstudio-is/fonts": "0.167.0",
+    "@webstudio-is/icons": "^0.167.0",
+    "@webstudio-is/image": "0.167.0",
+    "@webstudio-is/sdk": "0.167.0"
   },
   "exports": {
     ".": {
       "webstudio": "./src/index.ts",
       "types": "./lib/types/index.d.ts",
-      "import": "./lib/index.js",
-      "require": "./lib/index.js"
+      "import": "./lib/index.js"
     },
     "./css-normalize": {
       "webstudio": "./src/css/normalize.ts",
       "types": "./lib/types/css/normalize.d.ts",
-      "import": "./lib/css/normalize.js",
-      "require": "./lib/css/normalize.js"
+      "import": "./lib/css/normalize.js"
     }
   },
   "files": [