@webstudio-is/react-sdk 0.195.0 → 0.196.0

package/lib/index.js

@@ -82,7 +82,7 @@ import {
 
 // src/core-components.ts
 import {
-  EditIcon,
+  ContentBlockIcon,
   ListViewIcon,
   PaintBrushIcon,
   SettingsIcon,
@@ -214,11 +214,10 @@ var blockTemplatePropsMeta = {
   initialProps: []
 };
 var blockMeta = {
-  category: "data",
-  order: 2,
+  category: "typography",
   type: "container",
   label: "Content Block",
-  icon: EditIcon,
+  icon: ContentBlockIcon,
   constraints: [
     {
       relation: "ancestor",
@@ -332,17 +331,7 @@ var blockMeta = {
                 {
                   component: "ListItem",
                   type: "instance",
-                  children: [{ type: "text", value: "list item you can edit" }]
-                },
-                {
-                  component: "ListItem",
-                  type: "instance",
-                  children: [{ type: "text", value: "list item you can edit" }]
-                },
-                {
-                  component: "ListItem",
-                  type: "instance",
-                  children: [{ type: "text", value: "list item you can edit" }]
+                  children: []
                 }
               ]
             },
@@ -361,17 +350,7 @@ var blockMeta = {
                 {
                   component: "ListItem",
                   type: "instance",
-                  children: [{ type: "text", value: "list item you can edit" }]
-                },
-                {
-                  component: "ListItem",
-                  type: "instance",
-                  children: [{ type: "text", value: "list item you can edit" }]
-                },
-                {
-                  component: "ListItem",
-                  type: "instance",
-                  children: [{ type: "text", value: "list item you can edit" }]
+                  children: []
                 }
               ]
             },
@@ -773,6 +752,8 @@ var showAttribute = "data-ws-show";
 var indexAttribute = "data-ws-index";
 var collapsedAttribute = "data-ws-collapsed";
 var textContentAttribute = "data-ws-text-content";
+var editablePlaceholderVariable = "--data-ws-editable-placeholder";
+var editingPlaceholderVariable = "--data-ws-editing-placeholder";
 var attributeNameStartChar = "A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD";
 var attributeNameChar = attributeNameStartChar + ":\\-0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040";
 var validAttributeNameRegex = new RegExp(
@@ -1226,13 +1207,14 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
   }
   return parentChildren;
 };
-var generateDataFromEmbedTemplate = (treeTemplate, metas, defaultBreakpointId, generateId = nanoid) => {
+var generateDataFromEmbedTemplate = (treeTemplate, metas, generateId = nanoid) => {
   const instances = [];
   const props = [];
   const dataSourceByRef = /* @__PURE__ */ new Map();
   const styleSourceSelections = [];
   const styleSources = [];
   const styles = [];
+  const baseBreakpointId = generateId();
   const children = createInstancesFromTemplate(
     treeTemplate,
     instances,
@@ -1242,9 +1224,16 @@ var generateDataFromEmbedTemplate = (treeTemplate, metas, defaultBreakpointId, g
     styleSources,
     styles,
     metas,
-    defaultBreakpointId,
+    baseBreakpointId,
     generateId
   );
+  const breakpoints = [];
+  if (styles.length > 0) {
+    breakpoints.push({
+      id: baseBreakpointId,
+      label: ""
+    });
+  }
   return {
     children,
     instances,
@@ -1253,8 +1242,8 @@ var generateDataFromEmbedTemplate = (treeTemplate, metas, defaultBreakpointId, g
     styleSourceSelections,
     styleSources,
     styles,
+    breakpoints,
     assets: [],
-    breakpoints: [],
     resources: []
   };
 };
@@ -1334,10 +1323,11 @@ var WsComponentPropsMeta = z3.object({
 });
 var componentCategories = [
   "general",
-  "text",
-  "data",
+  "typography",
   "media",
+  "data",
   "forms",
+  "localization",
   "radix",
   "xml",
   "hidden",
@@ -1819,6 +1809,8 @@ export {
   createImageValueTransformer,
   defaultStates,
   descendantComponent,
+  editablePlaceholderVariable,
+  editingPlaceholderVariable,
   generateCss,
   generateDataFromEmbedTemplate,
   generateJsxChildren,

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

@@ -723,7 +723,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", "internal"];
+export declare const componentCategories: readonly ["general", "typography", "media", "data", "forms", "localization", "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"]>>;
@@ -741,7 +741,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", "internal"]>>;
+    category: z.ZodOptional<z.ZodEnum<["general", "typography", "media", "data", "forms", "localization", "radix", "xml", "hidden", "internal"]>>;
     type: z.ZodEnum<["container", "control", "embed", "rich-text-child"]>;
     constraints: z.ZodOptional<z.ZodUnion<[z.ZodObject<{
         relation: z.ZodUnion<[z.ZodLiteral<"ancestor">, z.ZodLiteral<"parent">, z.ZodLiteral<"self">, z.ZodLiteral<"child">, z.ZodLiteral<"descendant">]>;
@@ -1463,7 +1463,7 @@ export declare const WsComponentMeta: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     type: "control" | "embed" | "container" | "rich-text-child";
     icon: string;
-    category?: "data" | "xml" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "internal" | undefined;
+    category?: "data" | "xml" | "hidden" | "media" | "general" | "typography" | "forms" | "radix" | "internal" | "localization" | undefined;
     constraints?: {
         relation: "ancestor" | "parent" | "self" | "child" | "descendant";
         component?: {
@@ -1790,7 +1790,7 @@ export declare const WsComponentMeta: z.ZodObject<{
 }, {
     type: "control" | "embed" | "container" | "rich-text-child";
     icon: string;
-    category?: "data" | "xml" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "internal" | undefined;
+    category?: "data" | "xml" | "hidden" | "media" | "general" | "typography" | "forms" | "radix" | "internal" | "localization" | undefined;
     constraints?: {
         relation: "ancestor" | "parent" | "self" | "child" | "descendant";
         component?: {

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

@@ -1,6 +1,6 @@
 import { z } from "zod";
 import type { Simplify } from "type-fest";
-import type { Instance, Breakpoint, WebstudioFragment } from "@webstudio-is/sdk";
+import type { Instance, WebstudioFragment } from "@webstudio-is/sdk";
 import { StyleValue, type StyleProperty } from "@webstudio-is/css-engine";
 import type { WsComponentMeta } from "./components/component-meta";
 declare const EmbedTemplateText: z.ZodObject<{
@@ -2249,11 +2249,11 @@ export declare const WsEmbedTemplate: z.ZodLazy<z.ZodArray<z.ZodUnion<[z.ZodType
     type: "expression";
 }>]>, "many">>;
 export type WsEmbedTemplate = z.infer<typeof WsEmbedTemplate>;
-export declare const generateDataFromEmbedTemplate: (treeTemplate: WsEmbedTemplate, metas: Map<Instance["component"], WsComponentMeta>, defaultBreakpointId: Breakpoint["id"], generateId?: () => string) => WebstudioFragment;
+export declare const generateDataFromEmbedTemplate: (treeTemplate: WsEmbedTemplate, metas: Map<Instance["component"], WsComponentMeta>, generateId?: () => string) => WebstudioFragment;
 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;
+    category?: "data" | "xml" | "hidden" | "media" | "general" | "typography" | "forms" | "radix" | "internal" | "localization" | undefined;
     label?: string | undefined;
     order?: number | undefined;
     template?: ({
@@ -2264,6 +2264,7 @@ export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, c
         value: string;
         type: "expression";
     } | EmbedTemplateInstance)[] | undefined;
+    icon: string;
     constraints?: {
         relation: "ancestor" | "parent" | "self" | "child" | "descendant";
         component?: {
@@ -2295,7 +2296,6 @@ export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, c
     }[] | undefined;
     indexWithinAncestor?: string | undefined;
     stylable?: boolean | undefined;
-    icon: string;
     states?: {
         label: string;
         selector: string;

package/lib/types/props.d.ts

@@ -101,4 +101,6 @@ export declare const showAttribute: "data-ws-show";
 export declare const indexAttribute: "data-ws-index";
 export declare const collapsedAttribute: "data-ws-collapsed";
 export declare const textContentAttribute: "data-ws-text-content";
+export declare const editablePlaceholderVariable: "--data-ws-editable-placeholder";
+export declare const editingPlaceholderVariable: "--data-ws-editing-placeholder";
 export declare const isAttributeNameSafe: (attributeName: string) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.195.0",
+  "version": "0.196.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -14,6 +14,7 @@
     "type-fest": "^4.28.0",
     "vitest": "^2.1.8",
     "zod": "^3.22.4",
+    "@webstudio-is/template": "0.196.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "peerDependencies": {
@@ -25,12 +26,11 @@
     "change-case": "^5.4.4",
     "html-tags": "^4.0.0",
     "nanoid": "^5.0.8",
-    "@webstudio-is/css-engine": "0.195.0",
-    "@webstudio-is/fonts": "0.195.0",
-    "@webstudio-is/icons": "^0.195.0",
-    "@webstudio-is/image": "0.195.0",
-    "@webstudio-is/template": "0.195.0",
-    "@webstudio-is/sdk": "0.195.0"
+    "@webstudio-is/css-engine": "0.196.0",
+    "@webstudio-is/icons": "^0.196.0",
+    "@webstudio-is/fonts": "0.196.0",
+    "@webstudio-is/sdk": "0.196.0",
+    "@webstudio-is/image": "0.196.0"
   },
   "exports": {
     ".": {