@webstudio-is/sdk 0.219.0 → 0.221.0

package/lib/__generated__/normalize.css.js

@@ -92,29 +92,20 @@ 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: "-webkit-font-smoothing",
+    value: { type: "keyword", value: "antialiased" }
   },
   {
-    property: "border-bottom-width",
-    value: { type: "unit", unit: "px", value: 1 }
-  },
-  {
-    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" } }
+];
 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 {
@@ -19,8 +25,7 @@ import {
   ListViewIcon,
   PaintBrushIcon,
   SettingsIcon,
-  AddTemplateInstanceIcon,
-  BoxIcon
+  AddTemplateInstanceIcon
 } from "@webstudio-is/icons/svg";
 
 // src/__generated__/normalize.css.ts
@@ -170,29 +175,20 @@ 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" } }
+];
 var b = [
   {
     property: "font-weight",
@@ -631,6 +627,8 @@ var tagProperty = "data-ws-tag";
 
 // src/__generated__/tags.ts
 var tags = [
+  "div",
+  "span",
   "a",
   "abbr",
   "address",
@@ -658,7 +656,6 @@ var tags = [
   "details",
   "dfn",
   "dialog",
-  "div",
   "dl",
   "dt",
   "em",
@@ -715,7 +712,6 @@ var tags = [
   "slot",
   "small",
   "source",
-  "span",
   "strong",
   "sub",
   "summary",
@@ -746,17 +742,12 @@ var rootMeta = {
     html
   }
 };
-var rootPropsMeta = {
-  props: {}
-};
 var elementComponent = "ws:element";
 var elementMeta = {
   label: "Element",
-  icon: BoxIcon,
   // convert [object Module] to [object Object] to enable structured cloning
-  presetStyle: { ...normalize_css_exports }
-};
-var elementPropsMeta = {
+  presetStyle: { ...normalize_css_exports },
+  initialProps: [tagProperty, "id", "class"],
   props: {
     [tagProperty]: {
       type: "string",
@@ -773,17 +764,15 @@ var collectionMeta = {
   contentModel: {
     category: "instance",
     children: ["instance"]
-  }
-};
-var collectionPropsMeta = {
+  },
+  initialProps: ["data"],
   props: {
     data: {
       required: true,
       control: "json",
       type: "json"
     }
-  },
-  initialProps: ["data"]
+  }
 };
 var descendantComponent = "ws:descendant";
 var descendantMeta = {
@@ -794,9 +783,8 @@ var descendantMeta = {
     children: []
   },
   // @todo infer possible presets
-  presetStyle: {}
-};
-var descendantPropsMeta = {
+  presetStyle: {},
+  initialProps: ["selector"],
   props: {
     selector: {
       required: true,
@@ -821,8 +809,7 @@ var descendantPropsMeta = {
         " hr"
       ]
     }
-  },
-  initialProps: ["selector"]
+  }
 };
 var blockComponent = "ws:block";
 var blockTemplateComponent = "ws:block-template";
@@ -833,9 +820,6 @@ var blockTemplateMeta = {
     children: ["instance"]
   }
 };
-var blockTemplatePropsMeta = {
-  props: {}
-};
 var blockMeta = {
   label: "Content Block",
   icon: ContentBlockIcon,
@@ -844,9 +828,6 @@ var blockMeta = {
     children: [blockTemplateComponent, "instance"]
   }
 };
-var blockPropsMeta = {
-  props: {}
-};
 var coreMetas = {
   [rootComponent]: rootMeta,
   [elementComponent]: elementMeta,
@@ -855,22 +836,28 @@ var coreMetas = {
   [blockComponent]: blockMeta,
   [blockTemplateComponent]: blockTemplateMeta
 };
-var corePropsMetas = {
-  [rootComponent]: rootPropsMeta,
-  [elementComponent]: elementPropsMeta,
-  [collectionComponent]: collectionPropsMeta,
-  [descendantComponent]: descendantPropsMeta,
-  [blockComponent]: blockPropsMeta,
-  [blockTemplateComponent]: blockTemplatePropsMeta
-};
 
 // src/core-templates.tsx
 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, { "ws:tag": "div" })
+  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 = {
@@ -881,7 +868,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}` }) })
     }
   )
 };
@@ -891,19 +878,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,
         {
@@ -915,29 +902,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