@webstudio-is/sdk 0.209.0 → 0.212.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",
@@ -137,6 +147,7 @@ var blockPropsMeta = {
 };
 var coreMetas = {
   [rootComponent]: rootMeta,
+  [elementComponent]: elementMeta,
   [collectionComponent]: collectionMeta,
   [descendantComponent]: descendantMeta,
   [blockComponent]: blockMeta,
@@ -144,6 +155,7 @@ var coreMetas = {
 };
 var corePropsMetas = {
   [rootComponent]: rootPropsMeta,
+  [elementComponent]: elementPropsMeta,
   [collectionComponent]: collectionPropsMeta,
   [descendantComponent]: descendantPropsMeta,
   [blockComponent]: blockPropsMeta,
@@ -175,12 +187,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,
@@ -927,6 +959,7 @@ var componentCategories = [
   "general",
   "typography",
   "media",
+  "animations",
   "data",
   "forms",
   "localization",
@@ -980,7 +1013,8 @@ import {
   ListViewIcon,
   PaintBrushIcon,
   SettingsIcon,
-  AddTemplateInstanceIcon
+  AddTemplateInstanceIcon,
+  HtmlElementIcon
 } from "@webstudio-is/icons/svg";
 
 // src/__generated__/normalize.css.ts
@@ -1015,6 +1049,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 = {
@@ -1105,6 +1148,7 @@ var blockPropsMeta = {
 };
 var coreMetas = {
   [rootComponent]: rootMeta,
+  [elementComponent]: elementMeta,
   [collectionComponent]: collectionMeta,
   [descendantComponent]: descendantMeta,
   [blockComponent]: blockMeta,
@@ -1112,12 +1156,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";
@@ -2153,6 +2198,7 @@ export {
   MatcherOperation,
   MatcherRelation,
   Matchers,
+  OldPagePath,
   PageName,
   PagePath,
   PageRedirect,
@@ -2198,6 +2244,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;