@webstudio-is/react-sdk 0.195.0 → 0.197.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: []
                 }
               ]
             },
@@ -632,7 +611,10 @@ var generateCss = ({
     }
     let descendantSuffix = "";
     const instance = instances.get(instanceId);
-    if (instance?.component === descendantComponent) {
+    if (instance === void 0) {
+      continue;
+    }
+    if (instance.component === descendantComponent) {
       const parentId = parentIdByInstanceId.get(instanceId);
       const descendantSelector = descendantSelectorByInstanceId.get(instanceId);
       if (parentId && descendantSelector) {
@@ -640,8 +622,9 @@ var generateCss = ({
         instanceId = parentId;
       }
     }
-    const meta = instance ? componentMetas.get(instance.component) : void 0;
-    const baseName = instance?.label ?? meta?.label ?? instance?.component ?? instanceId;
+    const meta = componentMetas.get(instance.component);
+    const [_namespace, shortName] = parseComponentName(instance.component);
+    const baseName = instance.label ?? meta?.label ?? shortName;
     const className = `w-${scope.getName(instanceId, baseName)}`;
     if (atomic === false) {
       let classList = classes.get(instanceId);
@@ -773,6 +756,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(
@@ -796,262 +781,12 @@ var isAttributeNameSafe = (attributeName) => {
   return false;
 };
 
-// src/prop-meta.ts
-import { z } from "zod";
-var common = {
-  label: z.string().optional(),
-  description: z.string().optional(),
-  required: z.boolean()
-};
-var Number = z.object({
-  ...common,
-  control: z.literal("number"),
-  type: z.literal("number"),
-  defaultValue: z.number().optional()
-});
-var Range = z.object({
-  ...common,
-  control: z.literal("range"),
-  type: z.literal("number"),
-  defaultValue: z.number().optional()
-});
-var Text = z.object({
-  ...common,
-  control: z.literal("text"),
-  type: z.literal("string"),
-  defaultValue: z.string().optional(),
-  /**
-   * The number of rows in <textarea>. If set to 0 an <input> will be used instead.
-   * In line with Storybook team's plan: https://github.com/storybookjs/storybook/issues/21100
-   */
-  rows: z.number().optional()
-});
-var Code = z.object({
-  ...common,
-  control: z.literal("code"),
-  type: z.literal("string"),
-  language: z.union([z.literal("html"), z.literal("markdown")]),
-  defaultValue: z.string().optional()
-});
-var CodeText = z.object({
-  ...common,
-  control: z.literal("codetext"),
-  type: z.literal("string"),
-  defaultValue: z.string().optional()
-});
-var Color = z.object({
-  ...common,
-  control: z.literal("color"),
-  type: z.literal("string"),
-  defaultValue: z.string().optional()
-});
-var Boolean = z.object({
-  ...common,
-  control: z.literal("boolean"),
-  type: z.literal("boolean"),
-  defaultValue: z.boolean().optional()
-});
-var Radio = z.object({
-  ...common,
-  control: z.literal("radio"),
-  type: z.literal("string"),
-  defaultValue: z.string().optional(),
-  options: z.array(z.string())
-});
-var InlineRadio = z.object({
-  ...common,
-  control: z.literal("inline-radio"),
-  type: z.literal("string"),
-  defaultValue: z.string().optional(),
-  options: z.array(z.string())
-});
-var Select = z.object({
-  ...common,
-  control: z.literal("select"),
-  type: z.literal("string"),
-  defaultValue: z.string().optional(),
-  options: z.array(z.string())
-});
-var Check = z.object({
-  ...common,
-  control: z.literal("check"),
-  type: z.literal("string[]"),
-  defaultValue: z.array(z.string()).optional(),
-  options: z.array(z.string())
-});
-var InlineCheck = z.object({
-  ...common,
-  control: z.literal("inline-check"),
-  type: z.literal("string[]"),
-  defaultValue: z.array(z.string()).optional(),
-  options: z.array(z.string())
-});
-var MultiSelect = z.object({
-  ...common,
-  control: z.literal("multi-select"),
-  type: z.literal("string[]"),
-  defaultValue: z.array(z.string()).optional(),
-  options: z.array(z.string())
-});
-var File = z.object({
-  ...common,
-  control: z.literal("file"),
-  type: z.literal("string"),
-  defaultValue: z.string().optional(),
-  /** https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept */
-  accept: z.string().optional()
-});
-var Url = z.object({
-  ...common,
-  control: z.literal("url"),
-  type: z.literal("string"),
-  defaultValue: z.string().optional()
-});
-var Json = z.object({
-  ...common,
-  control: z.literal("json"),
-  type: z.literal("json"),
-  defaultValue: z.unknown().optional()
-});
-var Date = z.object({
-  ...common,
-  control: z.literal("date"),
-  // @todo not sure what type should be here
-  // (we don't support Date yet, added for completeness)
-  type: z.literal("string"),
-  defaultValue: z.string().optional()
-});
-var Action = z.object({
-  ...common,
-  control: z.literal("action"),
-  type: z.literal("action"),
-  defaultValue: z.undefined().optional()
-});
-var TextContent = z.object({
-  ...common,
-  control: z.literal("textContent"),
-  type: z.literal("string"),
-  defaultValue: z.string().optional()
-});
-var PropMeta = z.union([
-  Number,
-  Range,
-  Text,
-  Code,
-  CodeText,
-  Color,
-  Boolean,
-  Radio,
-  InlineRadio,
-  Select,
-  MultiSelect,
-  Check,
-  InlineCheck,
-  File,
-  Url,
-  Json,
-  Date,
-  Action,
-  TextContent
-]);
-
-// src/components/component-meta.ts
-import { z as z3 } from "zod";
-import { Matchers } from "@webstudio-is/sdk";
-
 // src/embed-template.ts
-import { z as z2 } from "zod";
 import { nanoid } from "nanoid";
 import {
   encodeDataSourceVariable,
   transpileExpression
 } from "@webstudio-is/sdk";
-import { StyleValue } from "@webstudio-is/css-engine";
-var EmbedTemplateText = z2.object({
-  type: z2.literal("text"),
-  value: z2.string(),
-  placeholder: z2.boolean().optional()
-});
-var EmbedTemplateExpression = z2.object({
-  type: z2.literal("expression"),
-  value: z2.string()
-});
-var EmbedTemplateVariable = z2.object({
-  alias: z2.optional(z2.string()),
-  initialValue: z2.unknown()
-});
-var EmbedTemplateProp = z2.union([
-  z2.object({
-    type: z2.literal("number"),
-    name: z2.string(),
-    value: z2.number()
-  }),
-  z2.object({
-    type: z2.literal("string"),
-    name: z2.string(),
-    value: z2.string()
-  }),
-  z2.object({
-    type: z2.literal("boolean"),
-    name: z2.string(),
-    value: z2.boolean()
-  }),
-  z2.object({
-    type: z2.literal("string[]"),
-    name: z2.string(),
-    value: z2.array(z2.string())
-  }),
-  z2.object({
-    type: z2.literal("json"),
-    name: z2.string(),
-    value: z2.unknown()
-  }),
-  z2.object({
-    type: z2.literal("expression"),
-    name: z2.string(),
-    code: z2.string()
-  }),
-  z2.object({
-    type: z2.literal("parameter"),
-    name: z2.string(),
-    variableName: z2.string(),
-    variableAlias: z2.optional(z2.string())
-  }),
-  z2.object({
-    type: z2.literal("action"),
-    name: z2.string(),
-    value: z2.array(
-      z2.object({
-        type: z2.literal("execute"),
-        args: z2.optional(z2.array(z2.string())),
-        code: z2.string()
-      })
-    )
-  })
-]);
-var EmbedTemplateStyleDeclRaw = z2.object({
-  // State selector, e.g. :hover
-  state: z2.optional(z2.string()),
-  property: z2.string(),
-  value: StyleValue
-});
-var EmbedTemplateStyleDecl = EmbedTemplateStyleDeclRaw;
-var EmbedTemplateInstance = z2.lazy(
-  () => z2.object({
-    type: z2.literal("instance"),
-    component: z2.string(),
-    label: z2.optional(z2.string()),
-    variables: z2.optional(z2.record(z2.string(), EmbedTemplateVariable)),
-    props: z2.optional(z2.array(EmbedTemplateProp)),
-    styles: z2.optional(z2.array(EmbedTemplateStyleDecl)),
-    children: WsEmbedTemplate
-  })
-);
-var WsEmbedTemplate = z2.lazy(
-  () => z2.array(
-    z2.union([EmbedTemplateInstance, EmbedTemplateText, EmbedTemplateExpression])
-  )
-);
 var getVariablValue = (value) => {
   if (typeof value === "string") {
     return { type: "string", value };
@@ -1226,13 +961,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 +978,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 +996,8 @@ var generateDataFromEmbedTemplate = (treeTemplate, metas, defaultBreakpointId, g
     styleSourceSelections,
     styleSources,
     styles,
+    breakpoints,
     assets: [],
-    breakpoints: [],
     resources: []
   };
 };
@@ -1326,61 +1069,6 @@ var namespaceMeta = (meta, namespace, components) => {
   return newMeta;
 };
 
-// src/components/component-meta.ts
-var WsComponentPropsMeta = z3.object({
-  props: z3.record(PropMeta),
-  // Props that will be always visible in properties panel.
-  initialProps: z3.array(z3.string()).optional()
-});
-var componentCategories = [
-  "general",
-  "text",
-  "data",
-  "media",
-  "forms",
-  "radix",
-  "xml",
-  "hidden",
-  "internal"
-];
-var stateCategories = ["states", "component-states"];
-var ComponentState = z3.object({
-  category: z3.enum(stateCategories).optional(),
-  selector: z3.string(),
-  label: z3.string()
-});
-var defaultStates = [
-  { selector: ":hover", label: "Hover" },
-  { selector: ":active", label: "Active" },
-  { selector: ":focus", label: "Focus" },
-  { selector: ":focus-visible", label: "Focus Visible" },
-  { selector: ":focus-within", label: "Focus Within" }
-];
-var WsComponentMeta = z3.object({
-  category: z3.enum(componentCategories).optional(),
-  // container - can accept other components with dnd or be edited as text
-  // control - usually form controls like inputs, without children
-  // embed - images, videos or other embeddable components, without children
-  // rich-text-child - formatted text fragment, not listed in components list
-  type: z3.enum(["container", "control", "embed", "rich-text-child"]),
-  constraints: Matchers.optional(),
-  // when this field is specified component receives
-  // prop with index of same components withiin specified ancestor
-  // important to automatically enumerate collections without
-  // naming every item manually
-  indexWithinAncestor: z3.optional(z3.string()),
-  stylable: z3.optional(z3.boolean()),
-  label: z3.optional(z3.string()),
-  description: z3.string().optional(),
-  icon: z3.string(),
-  presetStyle: z3.optional(
-    z3.record(z3.string(), z3.array(EmbedTemplateStyleDecl))
-  ),
-  states: z3.optional(z3.array(ComponentState)),
-  template: z3.optional(WsEmbedTemplate),
-  order: z3.number().optional()
-});
-
 // src/instance-utils.ts
 var getIndexesWithinAncestors = (metas, instances, rootIds) => {
   const ancestors = /* @__PURE__ */ new Set();
@@ -1800,12 +1488,6 @@ var generateWebstudioComponent = ({
   return generatedComponent;
 };
 export {
-  EmbedTemplateInstance,
-  EmbedTemplateProp,
-  EmbedTemplateStyleDecl,
-  PropMeta,
-  WsComponentMeta,
-  WsEmbedTemplate,
   addGlobalRules,
   blockComponent,
   blockTemplateComponent,
@@ -1813,12 +1495,12 @@ export {
   collapsedAttribute,
   collectionComponent,
   componentAttribute,
-  componentCategories,
   coreMetas,
   corePropsMetas,
   createImageValueTransformer,
-  defaultStates,
   descendantComponent,
+  editablePlaceholderVariable,
+  editingPlaceholderVariable,
   generateCss,
   generateDataFromEmbedTemplate,
   generateJsxChildren,
@@ -1837,6 +1519,5 @@ export {
   rootComponent,
   selectorIdAttribute,
   showAttribute,
-  stateCategories,
   textContentAttribute
 };

package/lib/runtime.js

@@ -48,6 +48,7 @@ var useVariableState = (initialState) => {
 };
 
 // src/runtime.ts
+var xmlNodeTagSuffix = "-ws-xml-node-fb77f896-8e96-40b9-b8f8-90a4e70d724a";
 var getIndexWithinAncestorFromComponentProps = (props) => {
   return props["data-ws-index"];
 };
@@ -56,5 +57,6 @@ export {
   getClosestInstance,
   getIndexWithinAncestorFromComponentProps,
   useResource,
-  useVariableState
+  useVariableState,
+  xmlNodeTagSuffix
 };

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

@@ -1,4 +1,4 @@
-import type { WsComponentMeta } from "./components/component-meta";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const rootComponent = "ws:root";
 export declare const portalComponent = "Slot";
 export declare const collectionComponent = "ws:collection";

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

@@ -1,6 +1,5 @@
 import { type TransformValue } from "@webstudio-is/css-engine";
-import { type Assets, type Breakpoints, type Instances, type Props, type StyleSourceSelections, type Styles } from "@webstudio-is/sdk";
-import type { WsComponentMeta } from "../components/component-meta";
+import { type Assets, type Breakpoints, type Instances, type Props, type StyleSourceSelections, type Styles, type WsComponentMeta } from "@webstudio-is/sdk";
 export type CssConfig = {
     assets: Assets;
     instances: Instances;