@webstudio-is/sdk 0.0.0-5844e28 → 0.0.0-7cb4145

package/lib/core-templates.js

@@ -1,11 +1,19 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
 // src/core-templates.tsx
 import {
   $,
   css,
   expression,
   Parameter,
+  PlaceholderValue,
   ws
 } from "@webstudio-is/template";
+import { CheckboxCheckedIcon, RadioCheckedIcon } from "@webstudio-is/icons/svg";
 
 // src/core-metas.ts
 import {
@@ -17,66 +25,762 @@ import {
 } from "@webstudio-is/icons/svg";
 
 // src/__generated__/normalize.css.ts
+var normalize_css_exports = {};
+__export(normalize_css_exports, {
+  a: () => a,
+  address: () => address,
+  article: () => article,
+  aside: () => aside,
+  b: () => b,
+  body: () => body,
+  button: () => button,
+  checkbox: () => checkbox,
+  code: () => code,
+  div: () => div,
+  figure: () => figure,
+  footer: () => footer,
+  form: () => form,
+  h1: () => h1,
+  h2: () => h2,
+  h3: () => h3,
+  h4: () => h4,
+  h5: () => h5,
+  h6: () => h6,
+  header: () => header,
+  hr: () => hr,
+  html: () => html,
+  i: () => i,
+  img: () => img,
+  input: () => input,
+  kbd: () => kbd,
+  label: () => label,
+  legend: () => legend,
+  li: () => li,
+  main: () => main,
+  nav: () => nav,
+  ol: () => ol,
+  optgroup: () => optgroup,
+  p: () => p,
+  pre: () => pre,
+  progress: () => progress,
+  radio: () => radio,
+  samp: () => samp,
+  section: () => section,
+  select: () => select,
+  small: () => small,
+  span: () => span,
+  strong: () => strong,
+  sub: () => sub,
+  summary: () => summary,
+  sup: () => sup,
+  table: () => table,
+  textarea: () => textarea,
+  time: () => time,
+  ul: () => ul
+});
+var div = [
+  { 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: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  { property: "outline-width", value: { type: "unit", unit: "px", value: 1 } }
+];
+var address = div;
+var article = div;
+var aside = div;
+var figure = div;
+var footer = div;
+var header = div;
+var main = div;
+var nav = div;
+var section = div;
+var form = div;
+var label = div;
+var time = div;
+var h1 = div;
+var h2 = div;
+var h3 = div;
+var h4 = div;
+var h5 = div;
+var h6 = div;
+var i = div;
+var img = div;
+var a = div;
+var li = div;
+var ul = div;
+var ol = div;
+var p = div;
+var span = div;
 var html = [
   { property: "display", value: { type: "keyword", value: "grid" } },
-  { property: "minHeight", value: { type: "unit", unit: "%", value: 100 } },
+  { property: "min-height", value: { type: "unit", unit: "%", value: 100 } },
   {
-    property: "fontFamily",
+    property: "font-family",
     value: { type: "fontFamily", value: ["Arial", "Roboto", "sans-serif"] }
   },
-  { property: "fontSize", value: { type: "unit", unit: "px", value: 16 } },
+  { property: "font-size", value: { type: "unit", unit: "px", value: 16 } },
   {
-    property: "lineHeight",
+    property: "line-height",
     value: { type: "unit", unit: "number", value: 1.2 }
   },
   {
-    property: "whiteSpaceCollapse",
+    property: "white-space-collapse",
     value: { type: "keyword", value: "preserve" }
   }
 ];
+var body = [
+  { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
+  {
+    property: "margin-right",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "margin-bottom",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "margin-left",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { 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: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "-webkit-font-smoothing",
+    value: { type: "keyword", value: "antialiased" }
+  },
+  {
+    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",
+    value: { type: "unit", unit: "number", value: 700 }
+  },
+  { 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: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  }
+];
+var strong = b;
+var code = [
+  {
+    property: "font-family",
+    value: {
+      type: "fontFamily",
+      value: [
+        "ui-monospace",
+        "SFMono-Regular",
+        "Consolas",
+        "Liberation Mono",
+        "Menlo",
+        "monospace"
+      ]
+    }
+  },
+  { property: "font-size", value: { type: "unit", unit: "em", value: 1 } },
+  { 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: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  }
+];
+var kbd = code;
+var samp = code;
+var pre = code;
+var small = [
+  { property: "font-size", value: { type: "unit", unit: "%", value: 80 } },
+  { 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: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  }
+];
+var sub = [
+  { property: "font-size", value: { type: "unit", unit: "%", value: 75 } },
+  {
+    property: "line-height",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { property: "position", value: { type: "keyword", value: "relative" } },
+  { property: "vertical-align", value: { type: "keyword", value: "baseline" } },
+  { 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: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  { property: "bottom", value: { type: "unit", unit: "em", value: -0.25 } }
+];
+var sup = [
+  { property: "font-size", value: { type: "unit", unit: "%", value: 75 } },
+  {
+    property: "line-height",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { property: "position", value: { type: "keyword", value: "relative" } },
+  { property: "vertical-align", value: { type: "keyword", value: "baseline" } },
+  { 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: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  { property: "top", value: { type: "unit", unit: "em", value: -0.5 } }
+];
+var table = [
+  {
+    property: "text-indent",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    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: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-top-color",
+    value: { type: "keyword", value: "inherit" }
+  },
+  {
+    property: "border-right-color",
+    value: { type: "keyword", value: "inherit" }
+  },
+  {
+    property: "border-bottom-color",
+    value: { type: "keyword", value: "inherit" }
+  },
+  {
+    property: "border-left-color",
+    value: { type: "keyword", value: "inherit" }
+  },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } }
+];
+var input = [
+  { property: "font-family", value: { type: "keyword", value: "inherit" } },
+  { property: "font-size", value: { type: "unit", unit: "%", value: 100 } },
+  {
+    property: "line-height",
+    value: { type: "unit", unit: "number", value: 1.15 }
+  },
+  { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
+  {
+    property: "margin-right",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "margin-bottom",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "margin-left",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { 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: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  { property: "border-top-style", value: { type: "keyword", value: "solid" } },
+  {
+    property: "border-right-style",
+    value: { type: "keyword", value: "solid" }
+  },
+  {
+    property: "border-bottom-style",
+    value: { type: "keyword", value: "solid" }
+  },
+  { property: "border-left-style", value: { type: "keyword", value: "solid" } }
+];
+var textarea = input;
+var optgroup = [
+  { property: "font-family", value: { type: "keyword", value: "inherit" } },
+  { property: "font-size", value: { type: "unit", unit: "%", value: 100 } },
+  {
+    property: "line-height",
+    value: { type: "unit", unit: "number", value: 1.15 }
+  },
+  { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
+  {
+    property: "margin-right",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "margin-bottom",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "margin-left",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { 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: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  }
+];
+var radio = [
+  { property: "font-family", value: { type: "keyword", value: "inherit" } },
+  { property: "font-size", value: { type: "unit", unit: "%", value: 100 } },
+  {
+    property: "line-height",
+    value: { type: "unit", unit: "number", value: 1.15 }
+  },
+  { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
+  {
+    property: "margin-right",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "margin-bottom",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "margin-left",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { 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: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  { property: "border-top-style", value: { type: "keyword", value: "none" } },
+  { property: "border-right-style", value: { type: "keyword", value: "none" } },
+  {
+    property: "border-bottom-style",
+    value: { type: "keyword", value: "none" }
+  },
+  { property: "border-left-style", value: { type: "keyword", value: "none" } }
+];
+var checkbox = radio;
+var button = [
+  { property: "font-family", value: { type: "keyword", value: "inherit" } },
+  { property: "font-size", value: { type: "unit", unit: "%", value: 100 } },
+  {
+    property: "line-height",
+    value: { type: "unit", unit: "number", value: 1.15 }
+  },
+  { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
+  {
+    property: "margin-right",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "margin-bottom",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "margin-left",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { 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: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  { property: "border-top-style", value: { type: "keyword", value: "solid" } },
+  {
+    property: "border-right-style",
+    value: { type: "keyword", value: "solid" }
+  },
+  {
+    property: "border-bottom-style",
+    value: { type: "keyword", value: "solid" }
+  },
+  { property: "border-left-style", value: { type: "keyword", value: "solid" } },
+  { property: "text-transform", value: { type: "keyword", value: "none" } }
+];
+var select = button;
+var legend = [
+  {
+    property: "padding-top",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "padding-right",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "padding-bottom",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "padding-left",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { 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: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  }
+];
+var progress = [
+  { property: "vertical-align", value: { type: "keyword", value: "baseline" } },
+  { 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: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  }
+];
+var summary = [
+  { property: "display", value: { type: "keyword", value: "list-item" } },
+  { 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: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  }
+];
+
+// src/runtime.ts
+var tagProperty = "data-ws-tag";
+
+// src/__generated__/tags.ts
+var tags = [
+  "div",
+  "span",
+  "a",
+  "abbr",
+  "address",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "bdi",
+  "bdo",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "head",
+  "header",
+  "hgroup",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "label",
+  "legend",
+  "li",
+  "main",
+  "map",
+  "mark",
+  "menu",
+  "meter",
+  "nav",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "picture",
+  "pre",
+  "progress",
+  "q",
+  "rp",
+  "rt",
+  "ruby",
+  "s",
+  "samp",
+  "search",
+  "section",
+  "select",
+  "slot",
+  "small",
+  "source",
+  "strong",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "tr",
+  "track",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr"
+];
 
 // src/core-metas.ts
 var rootComponent = "ws:root";
 var rootMeta = {
-  type: "container",
   label: "Global Root",
   icon: SettingsIcon,
   presetStyle: {
     html
   }
 };
-var rootPropsMeta = {
-  props: {}
+var elementComponent = "ws:element";
+var elementMeta = {
+  label: "Element",
+  // convert [object Module] to [object Object] to enable structured cloning
+  presetStyle: { ...normalize_css_exports },
+  initialProps: [tagProperty, "id", "class"],
+  props: {
+    [tagProperty]: {
+      type: "string",
+      control: "tag",
+      required: true,
+      options: tags
+    }
+  }
 };
 var collectionComponent = "ws:collection";
 var collectionMeta = {
-  type: "container",
   label: "Collection",
-  icon: ListViewIcon
-};
-var collectionPropsMeta = {
+  icon: ListViewIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"]
+  },
+  initialProps: ["data"],
   props: {
     data: {
       required: true,
       control: "json",
       type: "json"
     }
-  },
-  initialProps: ["data"]
+  }
 };
 var descendantComponent = "ws:descendant";
 var descendantMeta = {
-  type: "control",
   label: "Descendant",
   icon: PaintBrushIcon,
+  contentModel: {
+    category: "none",
+    children: []
+  },
   // @todo infer possible presets
   presetStyle: {},
-  constraints: {
-    relation: "parent",
-    component: { $in: ["HtmlEmbed", "MarkdownEmbed"] }
-  }
-};
-var descendantPropsMeta = {
+  initialProps: ["selector"],
   props: {
     selector: {
       required: true,
@@ -101,57 +805,56 @@ var descendantPropsMeta = {
         " hr"
       ]
     }
-  },
-  initialProps: ["selector"]
+  }
 };
 var blockComponent = "ws:block";
 var blockTemplateComponent = "ws:block-template";
 var blockTemplateMeta = {
-  type: "container",
   icon: AddTemplateInstanceIcon,
-  constraints: {
-    relation: "parent",
-    component: { $eq: blockComponent }
+  contentModel: {
+    category: "none",
+    children: ["instance"]
   }
 };
-var blockTemplatePropsMeta = {
-  props: {}
-};
 var blockMeta = {
-  type: "container",
   label: "Content Block",
   icon: ContentBlockIcon,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $nin: [collectionComponent, blockComponent] }
-    },
-    {
-      relation: "child",
-      component: { $eq: blockTemplateComponent }
-    }
-  ]
-};
-var blockPropsMeta = {
-  props: {}
+  contentModel: {
+    category: "instance",
+    children: [blockTemplateComponent, "instance"]
+  }
 };
 var coreMetas = {
   [rootComponent]: rootMeta,
+  [elementComponent]: elementMeta,
   [collectionComponent]: collectionMeta,
   [descendantComponent]: descendantMeta,
   [blockComponent]: blockMeta,
   [blockTemplateComponent]: blockTemplateMeta
 };
-var corePropsMetas = {
-  [rootComponent]: rootPropsMeta,
-  [collectionComponent]: collectionPropsMeta,
-  [descendantComponent]: descendantPropsMeta,
-  [blockComponent]: blockPropsMeta,
-  [blockTemplateComponent]: blockTemplatePropsMeta
-};
 
 // src/core-templates.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+var elementMeta2 = {
+  category: "general",
+  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",
@@ -161,7 +864,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}` }) })
     }
   )
 };
@@ -171,19 +874,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", 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($.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,
         {
@@ -195,28 +898,244 @@ 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 coreTemplates = {
+  [elementComponent]: elementMeta2,
+  link: linkMeta,
   [collectionComponent]: collectionMeta2,
   [descendantComponent]: descendantMeta2,
-  [blockComponent]: blockMeta2
+  [blockComponent]: blockMeta2,
+  ...typography,
+  ...forms
 };
 export {
   coreTemplates