@webstudio-is/sdk 0.220.0 → 0.222.0

package/lib/__generated__/normalize.css.js

@@ -92,29 +92,21 @@ var body = [
   {
     property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 }
-  }
-];
-var hr = [
-  { property: "height", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "color", value: { type: "keyword", value: "inherit" } },
-  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
-  {
-    property: "border-top-width",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "border-right-width",
-    value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "border-bottom-width",
-    value: { type: "unit", unit: "px", value: 1 }
+    property: "-webkit-font-smoothing",
+    value: { type: "keyword", value: "antialiased" }
   },
   {
-    property: "border-left-width",
-    value: { type: "unit", unit: "px", value: 1 }
+    property: "-moz-osx-font-smoothing",
+    value: { type: "keyword", value: "grayscale" }
   }
 ];
+var hr = [
+  { property: "height", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "color", value: { type: "keyword", value: "inherit" } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } }
+];
 var b = [
   {
     property: "font-weight",

package/lib/core-templates.js

@@ -10,8 +10,14 @@ import {
   css,
   expression,
   Parameter,
+  PlaceholderValue,
   ws
 } from "@webstudio-is/template";
+import {
+  CheckboxCheckedIcon,
+  RadioCheckedIcon,
+  Webstudio1cIcon
+} from "@webstudio-is/icons/svg";
 
 // src/core-metas.ts
 import {
@@ -169,29 +175,21 @@ var body = [
   {
     property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 }
-  }
-];
-var hr = [
-  { property: "height", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "color", value: { type: "keyword", value: "inherit" } },
-  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
-  {
-    property: "border-top-width",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "border-right-width",
-    value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "border-bottom-width",
-    value: { type: "unit", unit: "px", value: 1 }
+    property: "-webkit-font-smoothing",
+    value: { type: "keyword", value: "antialiased" }
   },
   {
-    property: "border-left-width",
-    value: { type: "unit", unit: "px", value: 1 }
+    property: "-moz-osx-font-smoothing",
+    value: { type: "keyword", value: "grayscale" }
   }
 ];
+var hr = [
+  { property: "height", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "color", value: { type: "keyword", value: "inherit" } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } }
+];
 var b = [
   {
     property: "font-weight",
@@ -844,10 +842,24 @@ var coreMetas = {
 import { jsx, jsxs } from "react/jsx-runtime";
 var elementMeta2 = {
   category: "general",
-  order: 0,
+  order: 1,
   description: "An HTML element is a core building block for web pages, structuring and displaying content like text, images, and links.",
   template: /* @__PURE__ */ jsx(ws.element, {})
 };
+var linkMeta = {
+  category: "general",
+  description: "Use a link to send your users to another page, section, or resource. Configure links in the Settings panel.",
+  order: 2,
+  template: /* @__PURE__ */ jsx(
+    ws.element,
+    {
+      "ws:tag": "a",
+      "ws:style": css`
+        display: inline-block;
+      `
+    }
+  )
+};
 var collectionItem = new Parameter("collectionItem");
 var collectionMeta2 = {
   category: "data",
@@ -857,7 +869,7 @@ var collectionMeta2 = {
     {
       data: ["Collection Item 1", "Collection Item 2", "Collection Item 3"],
       item: collectionItem,
-      children: /* @__PURE__ */ jsx($.Box, { children: /* @__PURE__ */ jsx($.Text, { children: expression`${collectionItem}` }) })
+      children: /* @__PURE__ */ jsx(ws.element, { "ws:tag": "div", children: /* @__PURE__ */ jsx(ws.element, { "ws:tag": "div", children: expression`${collectionItem}` }) })
     }
   )
 };
@@ -867,19 +879,19 @@ var descendantMeta2 = {
 };
 var BlockTemplate = ws["block-template"];
 var blockMeta2 = {
-  category: "typography",
+  category: "general",
   template: /* @__PURE__ */ jsxs(ws.block, { children: [
     /* @__PURE__ */ jsxs(BlockTemplate, { "ws:label": "Templates", children: [
-      /* @__PURE__ */ jsx($.Paragraph, {}),
-      /* @__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, {}),
+      /* @__PURE__ */ jsx(ws.element, { "ws:tag": "p" }),
+      /* @__PURE__ */ jsx(ws.element, { "ws:label": "Heading 1", "ws:tag": "h1" }),
+      /* @__PURE__ */ jsx(ws.element, { "ws:label": "Heading 2", "ws:tag": "h2" }),
+      /* @__PURE__ */ jsx(ws.element, { "ws:label": "Heading 3", "ws:tag": "h3" }),
+      /* @__PURE__ */ jsx(ws.element, { "ws:label": "Heading 4", "ws:tag": "h4" }),
+      /* @__PURE__ */ jsx(ws.element, { "ws:label": "Heading 5", "ws:tag": "h5" }),
+      /* @__PURE__ */ jsx(ws.element, { "ws:label": "Heading 6", "ws:tag": "h6" }),
+      /* @__PURE__ */ jsx(ws.element, { "ws:tag": "ul", children: /* @__PURE__ */ jsx(ws.element, { "ws:tag": "li" }) }),
+      /* @__PURE__ */ jsx(ws.element, { "ws:tag": "ol", children: /* @__PURE__ */ jsx(ws.element, { "ws:tag": "li" }) }),
+      /* @__PURE__ */ jsx(ws.element, { "ws:tag": "a" }),
       /* @__PURE__ */ jsx(
         $.Image,
         {
@@ -891,29 +903,306 @@ var blockMeta2 = {
           `
         }
       ),
-      /* @__PURE__ */ jsx($.Separator, {}),
-      /* @__PURE__ */ jsx($.Blockquote, {}),
+      /* @__PURE__ */ jsx(ws.element, { "ws:tag": "hr" }),
+      /* @__PURE__ */ jsx(ws.element, { "ws:tag": "blockquote" }),
       /* @__PURE__ */ jsx($.HtmlEmbed, {}),
-      /* @__PURE__ */ jsx($.CodeText, {})
+      /* @__PURE__ */ jsx(ws.element, { "ws:tag": "code" })
     ] }),
-    /* @__PURE__ */ jsxs($.Paragraph, { children: [
+    /* @__PURE__ */ jsxs(ws.element, { "ws:tag": "p", children: [
       "The Content Block component designates regions on the page where pre-styled instances can be inserted in",
       " ",
-      /* @__PURE__ */ jsx($.RichTextLink, { href: "https://wstd.us/content-block", children: "Content mode" }),
+      /* @__PURE__ */ jsx(ws.element, { "ws:tag": "a", href: "https://wstd.us/content-block", children: "Content mode" }),
       "."
     ] }),
-    /* @__PURE__ */ jsxs($.List, { children: [
-      /* @__PURE__ */ jsx($.ListItem, { children: "In Content mode, you can edit any direct child instances that were pre-added to the Content Block, as well as add new instances predefined in Templates." }),
-      /* @__PURE__ */ jsx($.ListItem, { children: "To predefine instances for insertion in Content mode, switch to Design mode and add them to the Templates container." }),
-      /* @__PURE__ */ jsx($.ListItem, { children: "To insert predefined instances in Content mode, click the + button while hovering over the Content Block on the canvas and choose an instance from the list." })
+    /* @__PURE__ */ jsxs(ws.element, { "ws:tag": "ul", children: [
+      /* @__PURE__ */ jsx(ws.element, { "ws:tag": "li", children: "In Content mode, you can edit any direct child instances that were pre-added to the Content Block, as well as add new instances predefined in Templates." }),
+      /* @__PURE__ */ jsx(ws.element, { "ws:tag": "li", children: "To predefine instances for insertion in Content mode, switch to Design mode and add them to the Templates container." }),
+      /* @__PURE__ */ jsx(ws.element, { "ws:tag": "li", children: "To insert predefined instances in Content mode, click the + button while hovering over the Content Block on the canvas and choose an instance from the list." })
     ] })
   ] })
 };
+var typography = {
+  heading: {
+    category: "typography",
+    description: "Use HTML headings to structure and organize content. Use the Tag property in settings to change the heading level (h1-h6).",
+    template: /* @__PURE__ */ jsx(ws.element, { "ws:tag": "h1" })
+  },
+  paragraph: {
+    category: "typography",
+    description: "A container for multi-line text.",
+    template: /* @__PURE__ */ jsx(ws.element, { "ws:tag": "p" })
+  },
+  blockquote: {
+    category: "typography",
+    description: "Use to style a quote from an external source like an article or book.",
+    template: /* @__PURE__ */ jsx(
+      ws.element,
+      {
+        "ws:tag": "blockquote",
+        "ws:style": css`
+          margin-left: 0;
+          margin-right: 0;
+          padding: 10px 20px;
+          border-left: 5px solid rgb(226 226 226 / 1);
+        `
+      }
+    )
+  },
+  list: {
+    category: "typography",
+    description: "Groups content, like links in a menu or steps in a recipe.",
+    template: /* @__PURE__ */ jsxs(ws.element, { "ws:tag": "ul", children: [
+      /* @__PURE__ */ jsx(ws.element, { "ws:tag": "li" }),
+      /* @__PURE__ */ jsx(ws.element, { "ws:tag": "li" }),
+      /* @__PURE__ */ jsx(ws.element, { "ws:tag": "li" })
+    ] })
+  },
+  list_item: {
+    category: "typography",
+    description: "Adds a new item to an existing list.",
+    template: /* @__PURE__ */ jsx(ws.element, { "ws:tag": "li" })
+  },
+  code_text: {
+    category: "typography",
+    template: /* @__PURE__ */ jsx(
+      ws.element,
+      {
+        "ws:tag": "code",
+        "ws:style": css`
+          display: block;
+          white-space-collapse: preserve;
+          text-wrap-mode: wrap;
+          padding-left: 0.2em;
+          padding-right: 0.2em;
+          background-color: rgb(238 238 238);
+        `
+      }
+    )
+  },
+  thematic_break: {
+    category: "typography",
+    description: "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
+    template: /* @__PURE__ */ jsx(
+      ws.element,
+      {
+        "ws:tag": "hr",
+        "ws:style": css`
+          color: gray;
+          border-style: none none solid;
+        `
+      }
+    )
+  }
+};
+var forms = {
+  form: {
+    category: "forms",
+    description: "Create filters, surveys, searches and more.",
+    template: /* @__PURE__ */ jsxs(ws.element, { "ws:tag": "form", children: [
+      /* @__PURE__ */ jsx(
+        ws.element,
+        {
+          "ws:tag": "input",
+          "ws:style": css`
+            display: block;
+          `
+        }
+      ),
+      /* @__PURE__ */ jsx(ws.element, { "ws:tag": "button", children: new PlaceholderValue("Submit") })
+    ] })
+  },
+  button: {
+    category: "forms",
+    description: "Use a button to submit forms or trigger actions within a page. Do not use a button to navigate users to another resource or another page - that\u2019s what a link is used for.",
+    template: /* @__PURE__ */ jsx(ws.element, { "ws:tag": "button", children: new PlaceholderValue("Button") })
+  },
+  input_label: {
+    category: "forms",
+    template: /* @__PURE__ */ jsx(
+      ws.element,
+      {
+        "ws:tag": "label",
+        "ws:style": css`
+          display: block;
+        `,
+        children: new PlaceholderValue("Label")
+      }
+    )
+  },
+  text_input: {
+    category: "forms",
+    description: "A single-line text input for collecting string data from your users.",
+    template: /* @__PURE__ */ jsx(
+      ws.element,
+      {
+        "ws:tag": "input",
+        "ws:style": css`
+          display: block;
+        `
+      }
+    )
+  },
+  text_area: {
+    category: "forms",
+    description: "A multi-line text input for collecting longer string data from your users.",
+    template: /* @__PURE__ */ jsx(
+      ws.element,
+      {
+        "ws:tag": "textarea",
+        "ws:style": css`
+          display: block;
+        `
+      }
+    )
+  },
+  select: {
+    category: "forms",
+    description: "A drop-down menu for users to select a single option from a predefined list.",
+    template: /* @__PURE__ */ jsxs(
+      ws.element,
+      {
+        "ws:tag": "select",
+        "ws:style": css`
+          display: block;
+        `,
+        children: [
+          /* @__PURE__ */ jsx(ws.element, { "ws:tag": "option", label: "Please choose an option", value: "" }),
+          /* @__PURE__ */ jsx(ws.element, { "ws:tag": "option", label: "Option A", value: "a" }),
+          /* @__PURE__ */ jsx(ws.element, { "ws:tag": "option", label: "Option B", value: "b" }),
+          /* @__PURE__ */ jsx(ws.element, { "ws:tag": "option", label: "Option C", value: "c" })
+        ]
+      }
+    )
+  },
+  radio: {
+    category: "forms",
+    description: "Use within a form to allow your users to select a single option from a set of mutually exclusive choices. Group multiple radios by matching their \u201CName\u201D properties.",
+    icon: RadioCheckedIcon,
+    template: /* @__PURE__ */ jsxs(
+      ws.element,
+      {
+        "ws:tag": "label",
+        "ws:label": "Radio Field",
+        "ws:style": css`
+          display: block;
+        `,
+        children: [
+          /* @__PURE__ */ jsx(
+            ws.element,
+            {
+              "ws:tag": "input",
+              "ws:style": css`
+            border-style: none;
+            margin-right: 0.5em;
+          `,
+              type: "radio"
+            }
+          ),
+          /* @__PURE__ */ jsx(ws.element, { "ws:tag": "span", "ws:label": "Radio Label", children: new PlaceholderValue("Radio") })
+        ]
+      }
+    )
+  },
+  checkbox: {
+    category: "forms",
+    description: "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their \u201CName\u201D properties. Unlike radios, any number of checkboxes in a group can be checked.",
+    icon: CheckboxCheckedIcon,
+    template: /* @__PURE__ */ jsxs(
+      ws.element,
+      {
+        "ws:tag": "label",
+        "ws:label": "Checkbox Field",
+        "ws:style": css`
+          display: block;
+        `,
+        children: [
+          /* @__PURE__ */ jsx(
+            ws.element,
+            {
+              "ws:tag": "input",
+              "ws:style": css`
+            border-style: none;
+            margin-right: 0.5em;
+          `,
+              type: "checkbox"
+            }
+          ),
+          /* @__PURE__ */ jsx(ws.element, { "ws:tag": "span", "ws:label": "Checkbox Label", children: new PlaceholderValue("Checkbox") })
+        ]
+      }
+    )
+  }
+};
+var builtWithWebstudioMeta = {
+  category: "other",
+  description: "A \u201CBuilt with Webstudio\u201D badge should be added to every project page on the free plan. This helps Webstudio spread awareness as a platform.",
+  icon: Webstudio1cIcon,
+  template: /* @__PURE__ */ jsxs(
+    ws.element,
+    {
+      "ws:tag": "a",
+      "ws:label": "Built with Webstudio",
+      href: "https://webstudio.is/?via=badge",
+      target: "_blank",
+      "ws:style": css`
+        display: inline-flex;
+        gap: 6px;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        z-index: 1000;
+        padding: 6px 10px;
+        right: 16px;
+        bottom: 16px;
+        color: rgba(251, 252, 253, 1);
+        font-family: system-ui, sans-serif;
+        font-size: 12px;
+        font-weight: 500;
+        line-height: 1;
+        border: 1px solid transparent;
+        border-radius: 9px;
+        text-decoration-line: none;
+        text-wrap-mode: nowrap;
+        background-clip: padding-box, border-box;
+        background-origin: padding-box, border-box;
+        background-image:
+          linear-gradient(135deg, #4a4efa 0%, #bd2fdb 66%, #ec59ce 100%),
+          linear-gradient(
+            135deg,
+            #92fddc 0%,
+            #7d7ffb 31.94%,
+            #ed72fe 64.24%,
+            #fdd791 100%
+          );
+      `,
+      children: [
+        /* @__PURE__ */ jsx(
+          $.HtmlEmbed,
+          {
+            "ws:label": "Logo",
+            code: Webstudio1cIcon,
+            "ws:style": css`
+          display: block;
+          width: 16px;
+          height: 16px;
+          flex-shrink: 0;
+        `
+          }
+        ),
+        /* @__PURE__ */ jsx(ws.element, { "ws:tag": "div", "ws:label": "Text", children: "Built with Webstudio" })
+      ]
+    }
+  )
+};
 var coreTemplates = {
   [elementComponent]: elementMeta2,
+  link: linkMeta,
   [collectionComponent]: collectionMeta2,
   [descendantComponent]: descendantMeta2,
-  [blockComponent]: blockMeta2
+  [blockComponent]: blockMeta2,
+  ...typography,
+  ...forms,
+  builtWithWebstudio: builtWithWebstudioMeta
 };
 export {
   coreTemplates

package/lib/index.js

@@ -107,13 +107,23 @@ var DefaultPagePage = z2.string().refine((path) => path !== "", "Can't be empty"
   (path) => path !== "/build" && path.startsWith("/build/") === false,
   "/build prefix is reserved for the system"
 );
-var PagePath = DefaultPagePage.refine(
+var OldPagePath = 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(
+  (path) => /^[-_a-zA-Z0-9*:?\\/.]*$/.test(path),
+  // Allow uppercase letters (A-Z)
+  "Only a-z, A-Z, 0-9, -, _, /, :, ?, . and * are allowed"
+).refine(
+  (path) => path !== "/s" && path.startsWith("/s/") === false,
+  "/s prefix is reserved for the system"
+).refine(
+  (path) => path !== "/build" && path.startsWith("/build/") === false,
+  "/build prefix is reserved for the system"
 );
-var OldPagePath = DefaultPagePage.refine(
+var PagePath = DefaultPagePage.refine(
   (path) => path === "" || path.startsWith("/"),
-  "Must start with a / and it must be full path e.g. /project/id"
+  "Must start with a / or a full URL e.g. https://website.org"
 );
 var Page = z2.object({
   ...commonPageFields,
@@ -140,7 +150,7 @@ var ProjectNewRedirectPath = PagePath.or(
   }, "Must be a valid URL")
 );
 var PageRedirect = z2.object({
-  old: PagePath,
+  old: OldPagePath,
   new: ProjectNewRedirectPath,
   status: z2.enum(["301", "302"]).optional()
 });
@@ -852,22 +862,14 @@ var componentCategories = [
   "localization",
   "radix",
   "xml",
+  "other",
   "hidden",
   "internal"
 ];
-var stateCategories = ["states", "component-states"];
 var ComponentState = z15.object({
-  category: z15.enum(stateCategories).optional(),
   selector: z15.string(),
   label: z15.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 ComponentContent = z15.string();
 var ContentModel = z15.object({
   /*
@@ -1059,29 +1061,21 @@ var body = [
   {
     property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 }
-  }
-];
-var hr = [
-  { property: "height", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "color", value: { type: "keyword", value: "inherit" } },
-  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
-  {
-    property: "border-top-width",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    property: "border-right-width",
-    value: { type: "unit", unit: "px", value: 1 }
   },
   {
-    property: "border-bottom-width",
-    value: { type: "unit", unit: "px", value: 1 }
+    property: "-webkit-font-smoothing",
+    value: { type: "keyword", value: "antialiased" }
   },
   {
-    property: "border-left-width",
-    value: { type: "unit", unit: "px", value: 1 }
+    property: "-moz-osx-font-smoothing",
+    value: { type: "keyword", value: "grayscale" }
   }
 ];
+var hr = [
+  { property: "height", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "color", value: { type: "keyword", value: "inherit" } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } }
+];
 var b = [
   {
     property: "font-weight",
@@ -2827,7 +2821,6 @@ export {
   createScope,
   decodeDataVariableId as decodeDataSourceVariable,
   decodeDataVariableId,
-  defaultStates,
   descendantComponent,
   documentTypes,
   durationUnitValueSchema,
@@ -2865,7 +2858,6 @@ export {
   replaceFormActionsWithResources,
   rootComponent,
   scrollAnimationSchema,
-  stateCategories,
   systemParameter,
   tags,
   transpileExpression,

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

@@ -1,6 +1,8 @@
 import { type TemplateMeta } from "@webstudio-is/template";
 export declare const coreTemplates: {
+    builtWithWebstudio: TemplateMeta;
     "ws:element": TemplateMeta;
+    link: TemplateMeta;
     "ws:collection": TemplateMeta;
     "ws:descendant": TemplateMeta;
     "ws:block": TemplateMeta;

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

@@ -5062,23 +5062,18 @@ export type PresetStyleDecl = Simplify<Omit<z.infer<typeof PresetStyleDecl>, "pr
     property: CssProperty;
 }>;
 export type PresetStyle<Tag extends HtmlTags = HtmlTags> = Partial<Record<Tag, PresetStyleDecl[]>>;
-export declare const componentCategories: readonly ["general", "typography", "media", "animations", "data", "forms", "localization", "radix", "xml", "hidden", "internal"];
-export declare const stateCategories: readonly ["states", "component-states"];
+export declare const componentCategories: readonly ["general", "typography", "media", "animations", "data", "forms", "localization", "radix", "xml", "other", "hidden", "internal"];
 export declare const ComponentState: z.ZodObject<{
-    category: z.ZodOptional<z.ZodEnum<["states", "component-states"]>>;
     selector: z.ZodString;
     label: z.ZodString;
 }, "strip", z.ZodTypeAny, {
     selector: string;
     label: string;
-    category?: "states" | "component-states" | undefined;
 }, {
     selector: string;
     label: string;
-    category?: "states" | "component-states" | undefined;
 }>;
 export type ComponentState = z.infer<typeof ComponentState>;
-export declare const defaultStates: ComponentState[];
 export declare const ContentModel: z.ZodObject<{
     category: z.ZodUnion<[z.ZodLiteral<"instance">, z.ZodLiteral<"none">]>;
     /**
@@ -5100,7 +5095,7 @@ export declare const ContentModel: z.ZodObject<{
 }>;
 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"]>>;
+    category: z.ZodOptional<z.ZodEnum<["general", "typography", "media", "animations", "data", "forms", "localization", "radix", "xml", "other", "hidden", "internal"]>>;
     contentModel: z.ZodOptional<z.ZodObject<{
         category: z.ZodUnion<[z.ZodLiteral<"instance">, z.ZodLiteral<"none">]>;
         /**
@@ -10181,17 +10176,14 @@ export declare const WsComponentMeta: z.ZodObject<{
         state?: string | undefined;
     }>, "many">>>;
     states: z.ZodOptional<z.ZodArray<z.ZodObject<{
-        category: z.ZodOptional<z.ZodEnum<["states", "component-states"]>>;
         selector: z.ZodString;
         label: z.ZodString;
     }, "strip", z.ZodTypeAny, {
         selector: string;
         label: string;
-        category?: "states" | "component-states" | undefined;
     }, {
         selector: string;
         label: string;
-        category?: "states" | "component-states" | undefined;
     }>, "many">>;
     order: z.ZodOptional<z.ZodNumber>;
     initialProps: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
@@ -10692,12 +10684,7 @@ export declare const WsComponentMeta: z.ZodObject<{
     order?: number | undefined;
     label?: string | undefined;
     description?: string | undefined;
-    states?: {
-        selector: string;
-        label: string;
-        category?: "states" | "component-states" | undefined;
-    }[] | undefined;
-    category?: "hidden" | "data" | "media" | "general" | "typography" | "animations" | "forms" | "localization" | "radix" | "xml" | "internal" | undefined;
+    category?: "hidden" | "data" | "media" | "general" | "typography" | "animations" | "forms" | "localization" | "radix" | "xml" | "other" | "internal" | undefined;
     contentModel?: {
         category: "none" | "instance";
         children: ("instance" | "rich-text" | (string & {}))[];
@@ -11311,6 +11298,10 @@ export declare const WsComponentMeta: z.ZodObject<{
         property: string;
         state?: string | undefined;
     }[]> | undefined;
+    states?: {
+        selector: string;
+        label: string;
+    }[] | undefined;
     initialProps?: string[] | undefined;
     props?: Record<string, {
         options: string[];
@@ -11481,12 +11472,7 @@ export declare const WsComponentMeta: z.ZodObject<{
     order?: number | undefined;
     label?: string | undefined;
     description?: string | undefined;
-    states?: {
-        selector: string;
-        label: string;
-        category?: "states" | "component-states" | undefined;
-    }[] | undefined;
-    category?: "hidden" | "data" | "media" | "general" | "typography" | "animations" | "forms" | "localization" | "radix" | "xml" | "internal" | undefined;
+    category?: "hidden" | "data" | "media" | "general" | "typography" | "animations" | "forms" | "localization" | "radix" | "xml" | "other" | "internal" | undefined;
     contentModel?: {
         category: "none" | "instance";
         children: ("instance" | "rich-text" | (string & {}))[];
@@ -12100,6 +12086,10 @@ export declare const WsComponentMeta: z.ZodObject<{
         property: string;
         state?: string | undefined;
     }[]> | undefined;
+    states?: {
+        selector: string;
+        label: string;
+    }[] | undefined;
     initialProps?: string[] | undefined;
     props?: Record<string, {
         options: string[];

package/lib/types/schema/pages.d.ts

@@ -26,8 +26,8 @@ export declare const PageName: z.ZodEffects<z.ZodString, string, string>;
 export declare const PageTitle: z.ZodEffects<z.ZodString, string, string>;
 export declare const documentTypes: readonly ["html", "xml"];
 export declare const HomePagePath: z.ZodEffects<z.ZodString, "", string>;
-export declare const PagePath: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>, string, string>, string, string>, string, string>, string, string>, string, string>, string, string>;
 export declare const OldPagePath: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>, string, string>, string, string>, string, string>, string, string>, string, string>, string, string>;
+export declare const PagePath: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>, string, string>, string, string>, string, string>, string, string>, string, string>, string, string>;
 declare const Page: z.ZodObject<{
     path: z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>, string, string>, string, string>, string, string>, string, string>, string, string>, string, string>;
     id: z.ZodString;

package/package.json

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