@webstudio-is/sdk 0.210.0 → 0.213.0

package/lib/core-templates.js

@@ -13,7 +13,8 @@ import {
   ListViewIcon,
   PaintBrushIcon,
   SettingsIcon,
-  AddTemplateInstanceIcon
+  AddTemplateInstanceIcon,
+  HtmlElementIcon
 } from "@webstudio-is/icons/svg";
 
 // src/__generated__/normalize.css.ts
@@ -48,6 +49,15 @@ var rootMeta = {
 var rootPropsMeta = {
   props: {}
 };
+var elementComponent = "ws:element";
+var elementMeta = {
+  type: "container",
+  label: "Element",
+  icon: HtmlElementIcon
+};
+var elementPropsMeta = {
+  props: {}
+};
 var collectionComponent = "ws:collection";
 var collectionMeta = {
   type: "container",
@@ -69,12 +79,12 @@ var descendantMeta = {
   type: "control",
   label: "Descendant",
   icon: PaintBrushIcon,
+  contentModel: {
+    category: "none",
+    children: ["empty"]
+  },
   // @todo infer possible presets
-  presetStyle: {},
-  constraints: {
-    relation: "parent",
-    component: { $in: ["HtmlEmbed", "MarkdownEmbed"] }
-  }
+  presetStyle: {}
 };
 var descendantPropsMeta = {
   props: {
@@ -109,9 +119,9 @@ var blockTemplateComponent = "ws:block-template";
 var blockTemplateMeta = {
   type: "container",
   icon: AddTemplateInstanceIcon,
-  constraints: {
-    relation: "parent",
-    component: { $eq: blockComponent }
+  contentModel: {
+    category: "none",
+    children: ["instance"]
   }
 };
 var blockTemplatePropsMeta = {
@@ -121,22 +131,18 @@ var blockMeta = {
   type: "container",
   label: "Content Block",
   icon: ContentBlockIcon,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $nin: [collectionComponent, blockComponent] }
-    },
-    {
-      relation: "child",
-      component: { $eq: blockTemplateComponent }
-    }
-  ]
+  contentModel: {
+    category: "instance",
+    children: [blockTemplateComponent, "instance"]
+    // @todo prevent deleting block template
+  }
 };
 var blockPropsMeta = {
   props: {}
 };
 var coreMetas = {
   [rootComponent]: rootMeta,
+  [elementComponent]: elementMeta,
   [collectionComponent]: collectionMeta,
   [descendantComponent]: descendantMeta,
   [blockComponent]: blockMeta,
@@ -144,6 +150,7 @@ var coreMetas = {
 };
 var corePropsMetas = {
   [rootComponent]: rootPropsMeta,
+  [elementComponent]: elementPropsMeta,
   [collectionComponent]: collectionPropsMeta,
   [descendantComponent]: descendantPropsMeta,
   [blockComponent]: blockPropsMeta,
@@ -175,12 +182,12 @@ var blockMeta2 = {
   template: /* @__PURE__ */ jsxs(ws.block, { children: [
     /* @__PURE__ */ jsxs(BlockTemplate, { "ws:label": "Templates", children: [
       /* @__PURE__ */ jsx($.Paragraph, {}),
-      /* @__PURE__ */ jsx($.Heading, { "ws:label": "Heading 1", tag: "h1" }),
-      /* @__PURE__ */ jsx($.Heading, { "ws:label": "Heading 2", tag: "h2" }),
-      /* @__PURE__ */ jsx($.Heading, { "ws:label": "Heading 3", tag: "h3" }),
-      /* @__PURE__ */ jsx($.Heading, { "ws:label": "Heading 4", tag: "h4" }),
-      /* @__PURE__ */ jsx($.Heading, { "ws:label": "Heading 5", tag: "h5" }),
-      /* @__PURE__ */ jsx($.Heading, { "ws:label": "Heading 6", tag: "h6" }),
+      /* @__PURE__ */ jsx($.Heading, { "ws:label": "Heading 1", "ws:tag": "h1" }),
+      /* @__PURE__ */ jsx($.Heading, { "ws:label": "Heading 2", "ws:tag": "h2" }),
+      /* @__PURE__ */ jsx($.Heading, { "ws:label": "Heading 3", "ws:tag": "h3" }),
+      /* @__PURE__ */ jsx($.Heading, { "ws:label": "Heading 4", "ws:tag": "h4" }),
+      /* @__PURE__ */ jsx($.Heading, { "ws:label": "Heading 5", "ws:tag": "h5" }),
+      /* @__PURE__ */ jsx($.Heading, { "ws:label": "Heading 6", "ws:tag": "h6" }),
       /* @__PURE__ */ jsx($.List, { "ws:label": "List (Unordered)", children: /* @__PURE__ */ jsx($.ListItem, {}) }),
       /* @__PURE__ */ jsx($.List, { "ws:label": "List (Ordered)", ordered: true, children: /* @__PURE__ */ jsx($.ListItem, {}) }),
       /* @__PURE__ */ jsx($.Link, {}),

package/lib/index.js

@@ -88,10 +88,7 @@ var HomePage = z2.object({
   ...commonPageFields,
   path: HomePagePath
 });
-var PagePath = z2.string().refine((path) => path !== "", "Can't be empty").refine((path) => path !== "/", "Can't be just a /").refine(
-  (path) => path === "" || path.startsWith("/"),
-  "Must start with a / or a full URL e.g. https://website.org"
-).refine((path) => path.endsWith("/") === false, "Can't end with a /").refine((path) => path.includes("//") === false, "Can't contain repeating /").refine(
+var DefaultPagePage = z2.string().refine((path) => path !== "", "Can't be empty").refine((path) => path !== "/", "Can't be just a /").refine((path) => path.endsWith("/") === false, "Can't end with a /").refine((path) => path.includes("//") === false, "Can't contain repeating /").refine(
   (path) => /^[-_a-z0-9*:?\\/.]*$/.test(path),
   "Only a-z, 0-9, -, _, /, :, ?, . and * are allowed"
 ).refine(
@@ -104,6 +101,14 @@ var PagePath = z2.string().refine((path) => path !== "", "Can't be empty").refin
   (path) => path !== "/build" && path.startsWith("/build/") === false,
   "/build prefix is reserved for the system"
 );
+var PagePath = DefaultPagePage.refine(
+  (path) => path === "" || path.startsWith("/"),
+  "Must start with a / or a full URL e.g. https://website.org"
+);
+var OldPagePath = DefaultPagePage.refine(
+  (path) => path === "" || path.startsWith("/"),
+  "Must start with a / and it must be full path e.g. /project/id"
+);
 var Page = z2.object({
   ...commonPageFields,
   path: PagePath
@@ -167,6 +172,7 @@ var Instance = z3.object({
   type: z3.literal("instance"),
   id: InstanceId,
   component: z3.string(),
+  tag: z3.string().optional(),
   label: z3.string().optional(),
   children: z3.array(InstanceChild)
 });
@@ -350,6 +356,23 @@ var rangeUnitValueSchema = z6.union([
   z6.object({
     type: z6.literal("unparsed"),
     value: z6.string()
+  }),
+  z6.object({
+    type: z6.literal("var"),
+    value: z6.string()
+  })
+]);
+var TIME_UNITS = ["ms", "s"];
+var timeUnitSchema = literalUnion(TIME_UNITS);
+var durationUnitValueSchema = z6.union([
+  z6.object({
+    type: z6.literal("unit"),
+    value: z6.number(),
+    unit: timeUnitSchema
+  }),
+  z6.object({
+    type: z6.literal("var"),
+    value: z6.string()
   })
 ]);
 var insetUnitValueSchema = z6.union([
@@ -371,8 +394,9 @@ var keyframeEffectOptionsSchema = z6.object({
     z6.literal("forwards"),
     z6.literal("backwards"),
     z6.literal("both")
-  ]).optional()
+  ]).optional(),
   // FillMode
+  duration: durationUnitValueSchema.optional()
 });
 var scrollNamedRangeSchema = z6.union([
   z6.literal("start"),
@@ -654,6 +678,13 @@ var common = {
   description: z14.string().optional(),
   required: z14.boolean()
 };
+var Tag = z14.object({
+  ...common,
+  control: z14.literal("tag"),
+  type: z14.literal("string"),
+  defaultValue: z14.undefined().optional(),
+  options: z14.array(z14.string())
+});
 var Number = z14.object({
   ...common,
   control: z14.literal("number"),
@@ -797,6 +828,7 @@ var AnimationAction = z14.object({
   defaultValue: z14.undefined().optional()
 });
 var PropMeta = z14.union([
+  Tag,
   Number,
   Range,
   Text,
@@ -949,6 +981,23 @@ var defaultStates = [
   { selector: ":focus-visible", label: "Focus Visible" },
   { selector: ":focus-within", label: "Focus Within" }
 ];
+var ContentModel = z16.object({
+  /*
+   * instance - accepted by any parent with "instance" in children categories
+   * none - accepted by parents with this component name in children categories
+   */
+  category: z16.union([z16.literal("instance"), z16.literal("none")]),
+  /**
+   * 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()
+  )
+});
 var WsComponentMeta = z16.object({
   category: z16.enum(componentCategories).optional(),
   // container - can accept other components with dnd or be edited as text
@@ -962,6 +1011,7 @@ var WsComponentMeta = z16.object({
    */
   placeholder: z16.string().optional(),
   constraints: Matchers.optional(),
+  contentModel: ContentModel.optional(),
   // when this field is specified component receives
   // prop with index of same components withiin specified ancestor
   // important to automatically enumerate collections without
@@ -981,7 +1031,8 @@ import {
   ListViewIcon,
   PaintBrushIcon,
   SettingsIcon,
-  AddTemplateInstanceIcon
+  AddTemplateInstanceIcon,
+  HtmlElementIcon
 } from "@webstudio-is/icons/svg";
 
 // src/__generated__/normalize.css.ts
@@ -1016,6 +1067,15 @@ var rootMeta = {
 var rootPropsMeta = {
   props: {}
 };
+var elementComponent = "ws:element";
+var elementMeta = {
+  type: "container",
+  label: "Element",
+  icon: HtmlElementIcon
+};
+var elementPropsMeta = {
+  props: {}
+};
 var portalComponent = "Slot";
 var collectionComponent = "ws:collection";
 var collectionMeta = {
@@ -1038,12 +1098,12 @@ var descendantMeta = {
   type: "control",
   label: "Descendant",
   icon: PaintBrushIcon,
+  contentModel: {
+    category: "none",
+    children: ["empty"]
+  },
   // @todo infer possible presets
-  presetStyle: {},
-  constraints: {
-    relation: "parent",
-    component: { $in: ["HtmlEmbed", "MarkdownEmbed"] }
-  }
+  presetStyle: {}
 };
 var descendantPropsMeta = {
   props: {
@@ -1078,9 +1138,9 @@ var blockTemplateComponent = "ws:block-template";
 var blockTemplateMeta = {
   type: "container",
   icon: AddTemplateInstanceIcon,
-  constraints: {
-    relation: "parent",
-    component: { $eq: blockComponent }
+  contentModel: {
+    category: "none",
+    children: ["instance"]
   }
 };
 var blockTemplatePropsMeta = {
@@ -1090,22 +1150,18 @@ var blockMeta = {
   type: "container",
   label: "Content Block",
   icon: ContentBlockIcon,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $nin: [collectionComponent, blockComponent] }
-    },
-    {
-      relation: "child",
-      component: { $eq: blockTemplateComponent }
-    }
-  ]
+  contentModel: {
+    category: "instance",
+    children: [blockTemplateComponent, "instance"]
+    // @todo prevent deleting block template
+  }
 };
 var blockPropsMeta = {
   props: {}
 };
 var coreMetas = {
   [rootComponent]: rootMeta,
+  [elementComponent]: elementMeta,
   [collectionComponent]: collectionMeta,
   [descendantComponent]: descendantMeta,
   [blockComponent]: blockMeta,
@@ -1113,12 +1169,13 @@ var coreMetas = {
 };
 var corePropsMetas = {
   [rootComponent]: rootPropsMeta,
+  [elementComponent]: elementPropsMeta,
   [collectionComponent]: collectionPropsMeta,
   [descendantComponent]: descendantPropsMeta,
   [blockComponent]: blockPropsMeta,
   [blockTemplateComponent]: blockTemplatePropsMeta
 };
-var isCoreComponent = (component) => component === rootComponent || component === collectionComponent || component === descendantComponent || component === blockComponent || component === blockTemplateComponent;
+var isCoreComponent = (component) => component === rootComponent || component === elementComponent || component === collectionComponent || component === descendantComponent || component === blockComponent || component === blockTemplateComponent;
 
 // src/instances-utils.ts
 var ROOT_INSTANCE_ID = ":root";
@@ -2131,6 +2188,7 @@ export {
   Breakpoints,
   CompilerSettings,
   ComponentState,
+  ContentModel,
   DataSource,
   DataSourceVariableValue,
   DataSources,
@@ -2154,6 +2212,7 @@ export {
   MatcherOperation,
   MatcherRelation,
   Matchers,
+  OldPagePath,
   PageName,
   PagePath,
   PageRedirect,
@@ -2199,6 +2258,8 @@ export {
   defaultStates,
   descendantComponent,
   documentTypes,
+  durationUnitValueSchema,
+  elementComponent,
   encodeDataVariableId as encodeDataSourceVariable,
   encodeDataVariableId,
   executeExpression,

package/lib/runtime.js

@@ -89,13 +89,27 @@ var isPlainObject = (value) => {
 // src/form-fields.ts
 var formIdFieldName = `ws--form-id`;
 var formBotFieldName = `ws--form-bot`;
+
+// src/runtime.ts
+var tagProperty = "data-ws-tag";
+var getTagFromProps = (props) => {
+  return props[tagProperty];
+};
+var indexProperty = "data-ws-index";
+var getIndexWithinAncestorFromProps = (props) => {
+  return props[indexProperty];
+};
 export {
   createJsonStringifyProxy,
   formBotFieldName,
   formIdFieldName,
+  getIndexWithinAncestorFromProps,
+  getTagFromProps,
+  indexProperty,
   isLocalResource,
   isPlainObject,
   loadResource,
   loadResources,
-  sitemapResourceUrl
+  sitemapResourceUrl,
+  tagProperty
 };

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

@@ -1,5 +1,6 @@
 import type { WsComponentMeta } from "./schema/component-meta";
 export declare const rootComponent = "ws:root";
+export declare const elementComponent = "ws:element";
 export declare const portalComponent = "Slot";
 export declare const collectionComponent = "ws:collection";
 export declare const descendantComponent = "ws:descendant";
@@ -8,6 +9,7 @@ export declare const blockTemplateComponent = "ws:block-template";
 export declare const blockTemplateMeta: WsComponentMeta;
 export declare const coreMetas: {
     "ws:root": WsComponentMeta;
+    "ws:element": WsComponentMeta;
     "ws:collection": WsComponentMeta;
     "ws:descendant": WsComponentMeta;
     "ws:block": WsComponentMeta;
@@ -16,6 +18,182 @@ export declare const coreMetas: {
 export declare const corePropsMetas: {
     "ws:root": {
         props: Record<string, {
+            options: string[];
+            type: "string";
+            required: boolean;
+            control: "tag";
+            label?: string | undefined;
+            defaultValue?: undefined;
+            description?: string | undefined;
+        } | {
+            type: "number";
+            required: boolean;
+            control: "number";
+            label?: string | undefined;
+            defaultValue?: number | undefined;
+            description?: string | undefined;
+        } | {
+            type: "number";
+            required: boolean;
+            control: "range";
+            label?: string | undefined;
+            defaultValue?: number | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "text";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+            description?: string | undefined;
+            rows?: number | undefined;
+        } | {
+            type: "resource";
+            required: boolean;
+            control: "resource";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "code";
+            language: "html" | "markdown";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "codetext";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "color";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "boolean";
+            required: boolean;
+            control: "boolean";
+            label?: string | undefined;
+            defaultValue?: boolean | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string";
+            required: boolean;
+            control: "radio";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string";
+            required: boolean;
+            control: "inline-radio";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string";
+            required: boolean;
+            control: "select";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string[]";
+            required: boolean;
+            control: "check";
+            label?: string | undefined;
+            defaultValue?: string[] | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string[]";
+            required: boolean;
+            control: "inline-check";
+            label?: string | undefined;
+            defaultValue?: string[] | undefined;
+            description?: string | undefined;
+        } | {
+            options: string[];
+            type: "string[]";
+            required: boolean;
+            control: "multi-select";
+            label?: string | undefined;
+            defaultValue?: string[] | undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "file";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+            description?: string | undefined;
+            accept?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "url";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "json";
+            required: boolean;
+            control: "json";
+            label?: string | undefined;
+            defaultValue?: unknown;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "date";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "action";
+            required: boolean;
+            control: "action";
+            label?: string | undefined;
+            defaultValue?: undefined;
+            description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "textContent";
+            label?: string | undefined;
+            defaultValue?: string | undefined;
+            description?: string | undefined;
+        } | {
+            type: "animationAction";
+            required: boolean;
+            control: "animationAction";
+            label?: string | undefined;
+            defaultValue?: undefined;
+            description?: string | undefined;
+        }>;
+        initialProps?: string[] | undefined;
+    };
+    "ws:element": {
+        props: Record<string, {
+            options: string[];
+            type: "string";
+            required: boolean;
+            control: "tag";
+            label?: string | undefined;
+            defaultValue?: undefined;
+            description?: string | undefined;
+        } | {
             type: "number";
             required: boolean;
             control: "number";
@@ -176,6 +354,14 @@ export declare const corePropsMetas: {
     };
     "ws:collection": {
         props: Record<string, {
+            options: string[];
+            type: "string";
+            required: boolean;
+            control: "tag";
+            label?: string | undefined;
+            defaultValue?: undefined;
+            description?: string | undefined;
+        } | {
             type: "number";
             required: boolean;
             control: "number";
@@ -336,6 +522,14 @@ export declare const corePropsMetas: {
     };
     "ws:descendant": {
         props: Record<string, {
+            options: string[];
+            type: "string";
+            required: boolean;
+            control: "tag";
+            label?: string | undefined;
+            defaultValue?: undefined;
+            description?: string | undefined;
+        } | {
             type: "number";
             required: boolean;
             control: "number";
@@ -496,6 +690,14 @@ export declare const corePropsMetas: {
     };
     "ws:block": {
         props: Record<string, {
+            options: string[];
+            type: "string";
+            required: boolean;
+            control: "tag";
+            label?: string | undefined;
+            defaultValue?: undefined;
+            description?: string | undefined;
+        } | {
             type: "number";
             required: boolean;
             control: "number";
@@ -656,6 +858,14 @@ export declare const corePropsMetas: {
     };
     "ws:block-template": {
         props: Record<string, {
+            options: string[];
+            type: "string";
+            required: boolean;
+            control: "tag";
+            label?: string | undefined;
+            defaultValue?: undefined;
+            description?: string | undefined;
+        } | {
             type: "number";
             required: boolean;
             control: "number";
@@ -815,4 +1025,4 @@ export declare const corePropsMetas: {
         initialProps?: string[] | undefined;
     };
 };
-export declare const isCoreComponent: (component: string) => component is "ws:root" | "ws:collection" | "ws:descendant" | "ws:block" | "ws:block-template";
+export declare const isCoreComponent: (component: string) => component is "ws:root" | "ws:element" | "ws:collection" | "ws:descendant" | "ws:block" | "ws:block-template";

package/lib/types/index.d.ts

@@ -22,5 +22,5 @@ export * from "./resources-generator";
 export * from "./page-meta-generator";
 export * from "./url-pattern";
 export * from "./css";
-export type { AnimationAction, AnimationActionScroll, AnimationActionView, AnimationKeyframe, KeyframeStyles, RangeUnit, RangeUnitValue, ScrollNamedRange, ScrollRangeValue, ViewNamedRange, ViewRangeValue, ScrollAnimation, ViewAnimation, InsetUnitValue, } from "./schema/animation-schema";
-export { animationActionSchema, scrollAnimationSchema, viewAnimationSchema, rangeUnitValueSchema, animationKeyframeSchema, insetUnitValueSchema, RANGE_UNITS, } from "./schema/animation-schema";
+export type { AnimationAction, AnimationActionScroll, AnimationActionView, AnimationKeyframe, KeyframeStyles, RangeUnit, RangeUnitValue, ScrollNamedRange, ScrollRangeValue, ViewNamedRange, ViewRangeValue, ScrollAnimation, ViewAnimation, InsetUnitValue, DurationUnitValue, TimeUnit, } from "./schema/animation-schema";
+export { animationActionSchema, scrollAnimationSchema, viewAnimationSchema, rangeUnitValueSchema, animationKeyframeSchema, insetUnitValueSchema, durationUnitValueSchema, RANGE_UNITS, } from "./schema/animation-schema";

package/lib/types/runtime.d.ts

@@ -1,3 +1,7 @@
 export * from "./resource-loader";
 export * from "./to-string";
 export * from "./form-fields";
+export declare const tagProperty = "data-ws-tag";
+export declare const getTagFromProps: (props: Record<string, unknown>) => string | undefined;
+export declare const indexProperty: "data-ws-index";
+export declare const getIndexWithinAncestorFromProps: (props: Record<string, unknown>) => string | undefined;