@webstudio-is/sdk 0.214.0 → 0.216.0

package/lib/core-templates.js

@@ -39,7 +39,6 @@ var html = [
 // src/core-metas.ts
 var rootComponent = "ws:root";
 var rootMeta = {
-  type: "container",
   label: "Global Root",
   icon: SettingsIcon,
   presetStyle: {
@@ -51,7 +50,6 @@ var rootPropsMeta = {
 };
 var elementComponent = "ws:element";
 var elementMeta = {
-  type: "container",
   label: "Element",
   icon: HtmlElementIcon
 };
@@ -60,9 +58,12 @@ var elementPropsMeta = {
 };
 var collectionComponent = "ws:collection";
 var collectionMeta = {
-  type: "container",
   label: "Collection",
-  icon: ListViewIcon
+  icon: ListViewIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"]
+  }
 };
 var collectionPropsMeta = {
   props: {
@@ -76,12 +77,11 @@ var collectionPropsMeta = {
 };
 var descendantComponent = "ws:descendant";
 var descendantMeta = {
-  type: "control",
   label: "Descendant",
   icon: PaintBrushIcon,
   contentModel: {
     category: "none",
-    children: ["empty"]
+    children: []
   },
   // @todo infer possible presets
   presetStyle: {}
@@ -117,7 +117,6 @@ var descendantPropsMeta = {
 var blockComponent = "ws:block";
 var blockTemplateComponent = "ws:block-template";
 var blockTemplateMeta = {
-  type: "container",
   icon: AddTemplateInstanceIcon,
   contentModel: {
     category: "none",
@@ -128,7 +127,6 @@ var blockTemplatePropsMeta = {
   props: {}
 };
 var blockMeta = {
-  type: "container",
   label: "Content Block",
   icon: ContentBlockIcon,
   contentModel: {

package/lib/index.js

@@ -991,19 +991,14 @@ var ContentModel = z16.object({
    * transparent - pass through possible children from parent
    * rich-text - can be edited as rich text
    * instance - other instances accepted
-   * empty - no children accepted
    * ComponentName - accept specific components with none category
    */
-  children: z16.array(
-    z16.string()
-  )
+  children: z16.array(z16.string())
 });
 var WsComponentMeta = z16.object({
   category: z16.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
-  type: z16.enum(["container", "control", "embed"]),
+  // container - can accept other components with dnd or be edited as text              ..
+  type: z16.enum(["container"]).optional(),
   /**
    * a property used as textual placeholder when no content specified while in builder
    * also signals to not insert components inside unless dropped explicitly
@@ -1056,7 +1051,6 @@ var html = [
 // src/core-metas.ts
 var rootComponent = "ws:root";
 var rootMeta = {
-  type: "container",
   label: "Global Root",
   icon: SettingsIcon,
   presetStyle: {
@@ -1068,7 +1062,6 @@ var rootPropsMeta = {
 };
 var elementComponent = "ws:element";
 var elementMeta = {
-  type: "container",
   label: "Element",
   icon: HtmlElementIcon
 };
@@ -1078,9 +1071,12 @@ var elementPropsMeta = {
 var portalComponent = "Slot";
 var collectionComponent = "ws:collection";
 var collectionMeta = {
-  type: "container",
   label: "Collection",
-  icon: ListViewIcon
+  icon: ListViewIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"]
+  }
 };
 var collectionPropsMeta = {
   props: {
@@ -1094,12 +1090,11 @@ var collectionPropsMeta = {
 };
 var descendantComponent = "ws:descendant";
 var descendantMeta = {
-  type: "control",
   label: "Descendant",
   icon: PaintBrushIcon,
   contentModel: {
     category: "none",
-    children: ["empty"]
+    children: []
   },
   // @todo infer possible presets
   presetStyle: {}
@@ -1135,7 +1130,6 @@ var descendantPropsMeta = {
 var blockComponent = "ws:block";
 var blockTemplateComponent = "ws:block-template";
 var blockTemplateMeta = {
-  type: "container",
   icon: AddTemplateInstanceIcon,
   contentModel: {
     category: "none",
@@ -1146,7 +1140,6 @@ var blockTemplatePropsMeta = {
   props: {}
 };
 var blockMeta = {
-  type: "container",
   label: "Content Block",
   icon: ContentBlockIcon,
   contentModel: {
@@ -2064,7 +2057,30 @@ var generateCss = ({
   presetSheet.addMediaRule("presets");
   const presetClasses = /* @__PURE__ */ new Map();
   const scope = createScope([], normalizeClassName, "-");
+  const tagsByComponent = /* @__PURE__ */ new Map();
+  tagsByComponent.set(rootComponent, /* @__PURE__ */ new Set(["html"]));
+  const tagByInstanceId = /* @__PURE__ */ new Map();
+  for (const prop of props.values()) {
+    if (prop.type === "string" && prop.name === "tag") {
+      tagByInstanceId.set(prop.instanceId, prop.value);
+    }
+  }
+  for (const instance of instances.values()) {
+    const propTag = tagByInstanceId.get(instance.id);
+    const meta = componentMetas.get(instance.component);
+    const metaTag = Object.keys(meta?.presetStyle ?? {}).at(0);
+    let componentTags = tagsByComponent.get(instance.component);
+    if (componentTags === void 0) {
+      componentTags = /* @__PURE__ */ new Set();
+      tagsByComponent.set(instance.component, componentTags);
+    }
+    const tag = instance.tag ?? propTag ?? metaTag;
+    if (tag) {
+      componentTags.add(tag);
+    }
+  }
   for (const [component, meta] of componentMetas) {
+    const componentTags = tagsByComponent.get(component);
     const [_namespace, componentName] = parseComponentName(component);
     const className = `w-${scope.getName(component, meta.label ?? componentName)}`;
     const presetStyle = Object.entries(meta.presetStyle ?? {});
@@ -2072,6 +2088,9 @@ var generateCss = ({
       presetClasses.set(component, className);
     }
     for (const [tag, styles2] of presetStyle) {
+      if (!componentTags?.has(tag)) {
+        continue;
+      }
       const selector = component === rootComponent ? ":root" : `${tag}.${className}`;
       const rule = presetSheet.addNestingRule(selector);
       for (const declaration of styles2) {

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

@@ -5916,21 +5916,20 @@ export declare const ContentModel: z.ZodObject<{
      * transparent - pass through possible children from parent
      * rich-text - can be edited as rich text
      * instance - other instances accepted
-     * empty - no children accepted
      * ComponentName - accept specific components with none category
      */
-    children: z.ZodArray<z.ZodType<"instance" | (string & {}) | "transparent" | "rich-text" | "empty", z.ZodTypeDef, "instance" | (string & {}) | "transparent" | "rich-text" | "empty">, "many">;
+    children: z.ZodType<Array<"transparent" | "instance" | "rich-text" | (string & {})>>;
 }, "strip", z.ZodTypeAny, {
-    children: ("instance" | (string & {}) | "transparent" | "rich-text" | "empty")[];
+    children: ("instance" | "transparent" | "rich-text" | (string & {}))[];
     category: "none" | "instance";
 }, {
-    children: ("instance" | (string & {}) | "transparent" | "rich-text" | "empty")[];
+    children: ("instance" | "transparent" | "rich-text" | (string & {}))[];
     category: "none" | "instance";
 }>;
 export type ContentModel = z.infer<typeof ContentModel>;
 export declare const WsComponentMeta: z.ZodObject<{
     category: z.ZodOptional<z.ZodEnum<["general", "typography", "media", "animations", "data", "forms", "localization", "radix", "xml", "hidden", "internal"]>>;
-    type: z.ZodEnum<["container", "control", "embed"]>;
+    type: z.ZodOptional<z.ZodEnum<["container"]>>;
     /**
      * a property used as textual placeholder when no content specified while in builder
      * also signals to not insert components inside unless dropped explicitly
@@ -6073,15 +6072,14 @@ export declare const WsComponentMeta: z.ZodObject<{
          * transparent - pass through possible children from parent
          * rich-text - can be edited as rich text
          * instance - other instances accepted
-         * empty - no children accepted
          * ComponentName - accept specific components with none category
          */
-        children: z.ZodArray<z.ZodType<"instance" | (string & {}) | "transparent" | "rich-text" | "empty", z.ZodTypeDef, "instance" | (string & {}) | "transparent" | "rich-text" | "empty">, "many">;
+        children: z.ZodType<Array<"transparent" | "instance" | "rich-text" | (string & {})>>;
     }, "strip", z.ZodTypeAny, {
-        children: ("instance" | (string & {}) | "transparent" | "rich-text" | "empty")[];
+        children: ("instance" | "transparent" | "rich-text" | (string & {}))[];
         category: "none" | "instance";
     }, {
-        children: ("instance" | (string & {}) | "transparent" | "rich-text" | "empty")[];
+        children: ("instance" | "transparent" | "rich-text" | (string & {}))[];
         category: "none" | "instance";
     }>>;
     indexWithinAncestor: z.ZodOptional<z.ZodString>;
@@ -11159,9 +11157,9 @@ export declare const WsComponentMeta: z.ZodObject<{
     }>, "many">>;
     order: z.ZodOptional<z.ZodNumber>;
 }, "strip", z.ZodTypeAny, {
-    type: "embed" | "control" | "container";
     icon: string;
     order?: number | undefined;
+    type?: "container" | undefined;
     label?: string | undefined;
     description?: string | undefined;
     placeholder?: string | undefined;
@@ -11203,7 +11201,7 @@ export declare const WsComponentMeta: z.ZodObject<{
         } | undefined;
     }[] | undefined;
     contentModel?: {
-        children: ("instance" | (string & {}) | "transparent" | "rich-text" | "empty")[];
+        children: ("instance" | "transparent" | "rich-text" | (string & {}))[];
         category: "none" | "instance";
     } | undefined;
     indexWithinAncestor?: string | undefined;
@@ -11814,9 +11812,9 @@ export declare const WsComponentMeta: z.ZodObject<{
         state?: string | undefined;
     }[]> | undefined;
 }, {
-    type: "embed" | "control" | "container";
     icon: string;
     order?: number | undefined;
+    type?: "container" | undefined;
     label?: string | undefined;
     description?: string | undefined;
     placeholder?: string | undefined;
@@ -11858,7 +11856,7 @@ export declare const WsComponentMeta: z.ZodObject<{
         } | undefined;
     }[] | undefined;
     contentModel?: {
-        children: ("instance" | (string & {}) | "transparent" | "rich-text" | "empty")[];
+        children: ("instance" | "transparent" | "rich-text" | (string & {}))[];
         category: "none" | "instance";
     } | undefined;
     indexWithinAncestor?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk",
-  "version": "0.214.0",
+  "version": "0.216.0",
   "description": "Webstudio project data schema",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -40,15 +40,15 @@
     "reserved-identifiers": "^1.0.0",
     "type-fest": "^4.37.0",
     "zod": "^3.24.2",
-    "@webstudio-is/fonts": "0.214.0",
-    "@webstudio-is/css-engine": "0.214.0",
-    "@webstudio-is/icons": "0.214.0"
+    "@webstudio-is/css-engine": "0.216.0",
+    "@webstudio-is/fonts": "0.216.0",
+    "@webstudio-is/icons": "0.216.0"
   },
   "devDependencies": {
     "html-tags": "^4.0.0",
     "vitest": "^3.0.8",
     "@webstudio-is/css-data": "0.0.0",
-    "@webstudio-is/template": "0.214.0",
+    "@webstudio-is/template": "0.216.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {