@kubuild/components 0.0.1 → 0.2.0

package/dist/index.js

@@ -575,6 +575,341 @@ function buttonTypeTrait(overrides) {
     overrides
   );
 }
+function preventDefaultTrait(overrides) {
+  return withOverrides(
+    {
+      name: "preventDefault",
+      label: "Prevent Default",
+      type: "boolean",
+      defaultValue: true,
+      group: "form",
+      description: "Intercept the native browser submit and handle it via the KUBUILD action pipeline instead."
+    },
+    overrides
+  );
+}
+function scrollToFirstErrorTrait(overrides) {
+  return withOverrides(
+    {
+      name: "scrollToFirstError",
+      label: "Scroll to First Error",
+      type: "boolean",
+      defaultValue: true,
+      group: "form",
+      description: "Automatically scroll to and focus the first invalid field when submission fails validation."
+    },
+    overrides
+  );
+}
+function resetOnSubmitTrait(overrides) {
+  return withOverrides(
+    {
+      name: "resetOnSubmit",
+      label: "Reset on Submit",
+      type: "boolean",
+      defaultValue: false,
+      group: "form",
+      description: "Reset all fields to their initial values after a successful form submission."
+    },
+    overrides
+  );
+}
+function patternTrait(overrides) {
+  return withOverrides(
+    {
+      name: "pattern",
+      label: "Pattern (regex)",
+      type: "string",
+      attribute: "pattern",
+      group: "form",
+      description: "A regular expression the input value must match to pass validation."
+    },
+    overrides
+  );
+}
+function minLengthTrait(overrides) {
+  return withOverrides(
+    {
+      name: "minLength",
+      label: "Min Length",
+      type: "number",
+      attribute: "minlength",
+      group: "form",
+      description: "The minimum number of characters the user must enter."
+    },
+    overrides
+  );
+}
+function maxLengthTrait(overrides) {
+  return withOverrides(
+    {
+      name: "maxLength",
+      label: "Max Length",
+      type: "number",
+      attribute: "maxlength",
+      group: "form",
+      description: "The maximum number of characters the user is allowed to enter."
+    },
+    overrides
+  );
+}
+function prefixIconTrait(overrides) {
+  return withOverrides(
+    {
+      name: "prefixIcon",
+      label: "Prefix Icon",
+      type: "string",
+      group: "form",
+      description: 'Lucide icon name displayed before the input value (e.g. "mail", "search").'
+    },
+    overrides
+  );
+}
+function suffixIconTrait(overrides) {
+  return withOverrides(
+    {
+      name: "suffixIcon",
+      label: "Suffix Icon",
+      type: "string",
+      group: "form",
+      description: 'Lucide icon name displayed after the input value (e.g. "eye", "check").'
+    },
+    overrides
+  );
+}
+function helperTextTrait(overrides) {
+  return withOverrides(
+    {
+      name: "helperText",
+      label: "Helper Text",
+      type: "string",
+      group: "form",
+      description: 'A short message displayed below the input to guide the user (e.g. "Must be at least 8 characters").'
+    },
+    overrides
+  );
+}
+function resizeTrait(overrides) {
+  return withOverrides(
+    {
+      name: "resize",
+      label: "Resize",
+      type: "select",
+      defaultValue: "vertical",
+      group: "form",
+      options: [
+        { label: "Vertical only", value: "vertical" },
+        { label: "Horizontal only", value: "horizontal" },
+        { label: "Both", value: "both" },
+        { label: "None", value: "none" }
+      ],
+      description: "Controls whether and how the user can resize the textarea."
+    },
+    overrides
+  );
+}
+function autoGrowTrait(overrides) {
+  return withOverrides(
+    {
+      name: "autoGrow",
+      label: "Auto Grow",
+      type: "boolean",
+      defaultValue: false,
+      group: "form",
+      description: "Automatically expand the textarea height to fit the content without scrolling."
+    },
+    overrides
+  );
+}
+function maxCharCountTrait(overrides) {
+  return withOverrides(
+    {
+      name: "maxCharCount",
+      label: "Max Character Count",
+      type: "number",
+      group: "form",
+      description: 'Maximum character limit displayed as a counter below the textarea (e.g. "120 / 500").'
+    },
+    overrides
+  );
+}
+function optionsListTrait(overrides) {
+  return withOverrides(
+    {
+      name: "options",
+      label: "Options",
+      type: "string",
+      group: "form",
+      description: "The list of dropdown options, each with a label and value. Editable via the inspector trait panel."
+    },
+    overrides
+  );
+}
+function labelTextTrait(overrides) {
+  return withOverrides(
+    {
+      name: "label",
+      label: "Label Text",
+      type: "string",
+      group: "form",
+      description: "The visible text label displayed alongside the control."
+    },
+    overrides
+  );
+}
+function indeterminateTrait(overrides) {
+  return withOverrides(
+    {
+      name: "indeterminate",
+      label: "Indeterminate",
+      type: "boolean",
+      defaultValue: false,
+      group: "form",
+      description: "Renders the checkbox in a mixed/indeterminate visual state (neither checked nor unchecked)."
+    },
+    overrides
+  );
+}
+function switchSizeTrait(overrides) {
+  return withOverrides(
+    {
+      name: "switchSize",
+      label: "Size",
+      type: "select",
+      defaultValue: "md",
+      group: "form",
+      options: [
+        { label: "Small", value: "sm" },
+        { label: "Medium", value: "md" },
+        { label: "Large", value: "lg" }
+      ],
+      description: "The visual size of the switch toggle."
+    },
+    overrides
+  );
+}
+function orientationTrait(overrides) {
+  return withOverrides(
+    {
+      name: "orientation",
+      label: "Orientation",
+      type: "select",
+      defaultValue: "vertical",
+      group: "form",
+      options: [
+        { label: "Vertical", value: "vertical" },
+        { label: "Horizontal", value: "horizontal" }
+      ],
+      description: "The layout direction of the child controls (vertical stack or horizontal row)."
+    },
+    overrides
+  );
+}
+function defaultSelectedTrait(overrides) {
+  return withOverrides(
+    {
+      name: "defaultSelected",
+      label: "Default Selected",
+      type: "string",
+      group: "form",
+      description: "The value of the radio item that is selected by default."
+    },
+    overrides
+  );
+}
+function acceptTrait(overrides) {
+  return withOverrides(
+    {
+      name: "accept",
+      label: "Accepted File Types",
+      type: "string",
+      attribute: "accept",
+      defaultValue: "*/*",
+      group: "form",
+      description: 'Comma-separated list of MIME types or file extensions accepted (e.g. "image/*,.pdf,.docx").'
+    },
+    overrides
+  );
+}
+function maxFileSizeTrait(overrides) {
+  return withOverrides(
+    {
+      name: "maxFileSize",
+      label: "Max File Size (MB)",
+      type: "number",
+      defaultValue: 10,
+      group: "form",
+      description: "The maximum allowable file size in megabytes (MB)."
+    },
+    overrides
+  );
+}
+function multipleTrait(overrides) {
+  return withOverrides(
+    {
+      name: "multiple",
+      label: "Allow Multiple Files",
+      type: "boolean",
+      attribute: "multiple",
+      defaultValue: false,
+      group: "form",
+      description: "Allow multiple files to be selected and uploaded at once."
+    },
+    overrides
+  );
+}
+function showPreviewTrait(overrides) {
+  return withOverrides(
+    {
+      name: "showPreview",
+      label: "Show Preview",
+      type: "boolean",
+      defaultValue: true,
+      group: "form",
+      description: "Display an interactive preview (image thumbnail or file list with badges) for selected files."
+    },
+    overrides
+  );
+}
+function loadingTextTrait(overrides) {
+  return withOverrides(
+    {
+      name: "loadingText",
+      label: "Loading Text",
+      type: "string",
+      defaultValue: "Submitting...",
+      group: "behavior",
+      description: "Text displayed on the button while the form submission is in progress."
+    },
+    overrides
+  );
+}
+function showSpinnerTrait(overrides) {
+  return withOverrides(
+    {
+      name: "showSpinner",
+      label: "Show Loading Spinner",
+      type: "boolean",
+      defaultValue: true,
+      group: "behavior",
+      description: "Automatically show an animated loading spinner icon while form is submitting."
+    },
+    overrides
+  );
+}
+function autoDisableOnSubmitTrait(overrides) {
+  return withOverrides(
+    {
+      name: "autoDisableOnSubmit",
+      label: "Auto Disable on Submit",
+      type: "boolean",
+      defaultValue: true,
+      group: "behavior",
+      description: "Automatically disable the button to prevent duplicate submissions while the form is submitting."
+    },
+    overrides
+  );
+}
 function sortTraits(traits) {
   const groupRank = (group) => {
     if (!group) return Number.MAX_SAFE_INTEGER;
@@ -608,12 +943,17 @@ var CONTENT_CHILD_TYPES = [
   "icon",
   "html-embed",
   "button",
+  "button-submit",
   "form",
   "input",
   "textarea",
   "select",
   "checkbox",
+  "switch",
+  "radio-group",
   "radio",
+  "radio-item",
+  "file-upload",
   "list",
   "table",
   "collection",
@@ -1705,7 +2045,10 @@ var formDefinition = {
     method: "POST",
     action: "",
     target: "_self",
-    autoComplete: "on"
+    autoComplete: "on",
+    preventDefault: true,
+    scrollToFirstError: true,
+    resetOnSubmit: false
   },
   defaultChildren: [
     { type: "input", props: { name: "name", type: "text", placeholder: "Your Name", required: true } },
@@ -1746,7 +2089,10 @@ var formDefinition = {
         { label: "On", value: "on" },
         { label: "Off", value: "off" }
       ]
-    }
+    },
+    { name: "preventDefault", label: "Prevent Default", type: "boolean", defaultValue: true },
+    { name: "scrollToFirstError", label: "Scroll to First Error", type: "boolean", defaultValue: true },
+    { name: "resetOnSubmit", label: "Reset on Submit", type: "boolean", defaultValue: false }
   ],
   traits: [
     fieldNameTrait({ defaultValue: "contact_form", required: false }),
@@ -1759,6 +2105,9 @@ var formDefinition = {
       { label: "Top (_top)", value: "_top" }
     ] }),
     autoCompleteTrait(),
+    preventDefaultTrait(),
+    scrollToFirstErrorTrait(),
+    resetOnSubmitTrait(),
     idTrait(),
     ariaLabelTrait({ description: "Accessible name for the form landmark." })
   ],
@@ -1785,6 +2134,15 @@ var formDefinition = {
         errors.push('Form "autoComplete" must be either "on" or "off".');
       }
     }
+    if (props.preventDefault !== void 0 && typeof props.preventDefault !== "boolean" && !isVariableBinding(props.preventDefault)) {
+      errors.push('Form "preventDefault" must be a boolean when provided.');
+    }
+    if (props.scrollToFirstError !== void 0 && typeof props.scrollToFirstError !== "boolean" && !isVariableBinding(props.scrollToFirstError)) {
+      errors.push('Form "scrollToFirstError" must be a boolean when provided.');
+    }
+    if (props.resetOnSubmit !== void 0 && typeof props.resetOnSubmit !== "boolean" && !isVariableBinding(props.resetOnSubmit)) {
+      errors.push('Form "resetOnSubmit" must be a boolean when provided.');
+    }
     return errors.length > 0 ? errors : true;
   },
   defaultStyles: {
@@ -1810,7 +2168,13 @@ var inputDefinition = {
     defaultValue: "",
     required: false,
     disabled: false,
-    readOnly: false
+    readOnly: false,
+    pattern: "",
+    minLength: void 0,
+    maxLength: void 0,
+    prefixIcon: "",
+    suffixIcon: "",
+    helperText: ""
   },
   propFields: [
     { name: "name", label: "Field Name", type: "string", defaultValue: "input_field" },
@@ -1834,7 +2198,13 @@ var inputDefinition = {
     { name: "defaultValue", label: "Default Value", type: "string" },
     { name: "required", label: "Required", type: "boolean", defaultValue: false },
     { name: "disabled", label: "Disabled", type: "boolean", defaultValue: false },
-    { name: "readOnly", label: "Read Only", type: "boolean", defaultValue: false }
+    { name: "readOnly", label: "Read Only", type: "boolean", defaultValue: false },
+    { name: "pattern", label: "Pattern (regex)", type: "string" },
+    { name: "minLength", label: "Min Length", type: "number" },
+    { name: "maxLength", label: "Max Length", type: "number" },
+    { name: "prefixIcon", label: "Prefix Icon", type: "string" },
+    { name: "suffixIcon", label: "Suffix Icon", type: "string" },
+    { name: "helperText", label: "Helper Text", type: "string" }
   ],
   traits: [
     inputTypeTrait({ options: [
@@ -1852,6 +2222,12 @@ var inputDefinition = {
     placeholderTrait({ defaultValue: "Enter text..." }),
     defaultValueTrait(),
     requiredTrait(),
+    patternTrait(),
+    minLengthTrait(),
+    maxLengthTrait(),
+    prefixIconTrait(),
+    suffixIconTrait(),
+    helperTextTrait(),
     disabledTrait(),
     readOnlyTrait(),
     idTrait(),
@@ -1880,6 +2256,28 @@ var inputDefinition = {
     if (props.readOnly !== void 0 && typeof props.readOnly !== "boolean" && !isVariableBinding(props.readOnly)) {
       errors.push('Input "readOnly" must be a boolean when provided.');
     }
+    if (props.pattern !== void 0 && typeof props.pattern !== "string" && !isVariableBinding(props.pattern)) {
+      errors.push('Input "pattern" must be a string when provided.');
+    }
+    if (props.minLength !== void 0 && !isVariableBinding(props.minLength)) {
+      if (typeof props.minLength !== "number" || props.minLength < 0 || !Number.isInteger(props.minLength)) {
+        errors.push('Input "minLength" must be a non-negative integer when provided.');
+      }
+    }
+    if (props.maxLength !== void 0 && !isVariableBinding(props.maxLength)) {
+      if (typeof props.maxLength !== "number" || props.maxLength < 0 || !Number.isInteger(props.maxLength)) {
+        errors.push('Input "maxLength" must be a non-negative integer when provided.');
+      }
+    }
+    if (props.prefixIcon !== void 0 && typeof props.prefixIcon !== "string" && !isVariableBinding(props.prefixIcon)) {
+      errors.push('Input "prefixIcon" must be a string when provided.');
+    }
+    if (props.suffixIcon !== void 0 && typeof props.suffixIcon !== "string" && !isVariableBinding(props.suffixIcon)) {
+      errors.push('Input "suffixIcon" must be a string when provided.');
+    }
+    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !isVariableBinding(props.helperText)) {
+      errors.push('Input "helperText" must be a string when provided.');
+    }
     return errors.length > 0 ? errors : true;
   },
   defaultStyles: {
@@ -1914,7 +2312,11 @@ var textareaDefinition = {
     rows: 4,
     required: false,
     disabled: false,
-    readOnly: false
+    readOnly: false,
+    resize: "vertical",
+    autoGrow: false,
+    maxCharCount: void 0,
+    helperText: ""
   },
   propFields: [
     { name: "name", label: "Field Name", type: "string", defaultValue: "message" },
@@ -1923,13 +2325,32 @@ var textareaDefinition = {
     { name: "rows", label: "Rows", type: "number", defaultValue: 4 },
     { name: "required", label: "Required", type: "boolean", defaultValue: false },
     { name: "disabled", label: "Disabled", type: "boolean", defaultValue: false },
-    { name: "readOnly", label: "Read Only", type: "boolean", defaultValue: false }
+    { name: "readOnly", label: "Read Only", type: "boolean", defaultValue: false },
+    {
+      name: "resize",
+      label: "Resize",
+      type: "select",
+      defaultValue: "vertical",
+      options: [
+        { label: "Vertical only", value: "vertical" },
+        { label: "Horizontal only", value: "horizontal" },
+        { label: "Both", value: "both" },
+        { label: "None", value: "none" }
+      ]
+    },
+    { name: "autoGrow", label: "Auto Grow", type: "boolean", defaultValue: false },
+    { name: "maxCharCount", label: "Max Character Count", type: "number" },
+    { name: "helperText", label: "Helper Text", type: "string" }
   ],
   traits: [
     fieldNameTrait({ defaultValue: "message" }),
     placeholderTrait({ defaultValue: "Enter your message..." }),
     defaultValueTrait(),
     rowsTrait(),
+    resizeTrait(),
+    autoGrowTrait(),
+    maxCharCountTrait(),
+    helperTextTrait(),
     requiredTrait(),
     disabledTrait(),
     readOnlyTrait(),
@@ -1958,6 +2379,23 @@ var textareaDefinition = {
     if (props.readOnly !== void 0 && typeof props.readOnly !== "boolean" && !isVariableBinding(props.readOnly)) {
       errors.push('Textarea "readOnly" must be a boolean when provided.');
     }
+    if (props.resize !== void 0 && !isVariableBinding(props.resize)) {
+      const allowedResize = ["vertical", "horizontal", "both", "none"];
+      if (typeof props.resize !== "string" || !allowedResize.includes(props.resize)) {
+        errors.push(`Textarea "resize" must be one of: ${allowedResize.join(", ")}.`);
+      }
+    }
+    if (props.autoGrow !== void 0 && typeof props.autoGrow !== "boolean" && !isVariableBinding(props.autoGrow)) {
+      errors.push('Textarea "autoGrow" must be a boolean when provided.');
+    }
+    if (props.maxCharCount !== void 0 && !isVariableBinding(props.maxCharCount)) {
+      if (typeof props.maxCharCount !== "number" || props.maxCharCount < 1 || !Number.isInteger(props.maxCharCount)) {
+        errors.push('Textarea "maxCharCount" must be a positive integer (>= 1) when provided.');
+      }
+    }
+    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !isVariableBinding(props.helperText)) {
+      errors.push('Textarea "helperText" must be a string when provided.');
+    }
     return errors.length > 0 ? errors : true;
   },
   defaultStyles: {
@@ -1995,7 +2433,8 @@ var selectDefinition = {
     ],
     defaultValue: "",
     required: false,
-    disabled: false
+    disabled: false,
+    helperText: ""
   },
   propFields: [
     { name: "name", label: "Field Name", type: "string", defaultValue: "select_field" },
@@ -2012,12 +2451,15 @@ var selectDefinition = {
     },
     { name: "defaultValue", label: "Default Selected Value", type: "string" },
     { name: "required", label: "Required", type: "boolean", defaultValue: false },
-    { name: "disabled", label: "Disabled", type: "boolean", defaultValue: false }
+    { name: "disabled", label: "Disabled", type: "boolean", defaultValue: false },
+    { name: "helperText", label: "Helper Text", type: "string" }
   ],
   traits: [
     fieldNameTrait({ defaultValue: "select_field" }),
     placeholderTrait({ defaultValue: "Select an option..." }),
+    optionsListTrait({ description: "The list of dropdown choices (label + value pairs). Editable via the inspector trait panel." }),
     defaultValueTrait({ description: "The initially selected option value (must match one of the option values)." }),
+    helperTextTrait(),
     requiredTrait(),
     disabledTrait(),
     idTrait(),
@@ -2039,6 +2481,9 @@ var selectDefinition = {
     if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !isVariableBinding(props.disabled)) {
       errors.push('Select "disabled" must be a boolean when provided.');
     }
+    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !isVariableBinding(props.helperText)) {
+      errors.push('Select "helperText" must be a string when provided.');
+    }
     return errors.length > 0 ? errors : true;
   },
   defaultStyles: {
@@ -2071,21 +2516,28 @@ var checkboxDefinition = {
     label: "I agree to the terms and conditions",
     value: "yes",
     defaultChecked: false,
+    indeterminate: false,
     required: false,
-    disabled: false
+    disabled: false,
+    helperText: ""
   },
   propFields: [
     { name: "name", label: "Field Name", type: "string", defaultValue: "checkbox_field" },
     { name: "label", label: "Label Text", type: "string", defaultValue: "I agree to the terms and conditions" },
     { name: "value", label: "Checked Value", type: "string", defaultValue: "yes" },
     { name: "defaultChecked", label: "Default Checked", type: "boolean", defaultValue: false },
+    { name: "indeterminate", label: "Indeterminate", type: "boolean", defaultValue: false },
     { name: "required", label: "Required", type: "boolean", defaultValue: false },
-    { name: "disabled", label: "Disabled", type: "boolean", defaultValue: false }
+    { name: "disabled", label: "Disabled", type: "boolean", defaultValue: false },
+    { name: "helperText", label: "Helper Text", type: "string" }
   ],
   traits: [
     fieldNameTrait({ defaultValue: "checkbox_field" }),
+    labelTextTrait({ defaultValue: "I agree to the terms and conditions" }),
     valueTrait({ defaultValue: "yes" }),
     defaultCheckedTrait(),
+    indeterminateTrait(),
+    helperTextTrait(),
     requiredTrait(),
     disabledTrait(),
     idTrait(),
@@ -2105,12 +2557,18 @@ var checkboxDefinition = {
     if (props.defaultChecked !== void 0 && typeof props.defaultChecked !== "boolean" && !isVariableBinding(props.defaultChecked)) {
       errors.push('Checkbox "defaultChecked" must be a boolean when provided.');
     }
+    if (props.indeterminate !== void 0 && typeof props.indeterminate !== "boolean" && !isVariableBinding(props.indeterminate)) {
+      errors.push('Checkbox "indeterminate" must be a boolean when provided.');
+    }
     if (props.required !== void 0 && typeof props.required !== "boolean" && !isVariableBinding(props.required)) {
       errors.push('Checkbox "required" must be a boolean when provided.');
     }
     if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !isVariableBinding(props.disabled)) {
       errors.push('Checkbox "disabled" must be a boolean when provided.');
     }
+    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !isVariableBinding(props.helperText)) {
+      errors.push('Checkbox "helperText" must be a string when provided.');
+    }
     return errors.length > 0 ? errors : true;
   },
   defaultStyles: {
@@ -2125,20 +2583,194 @@ var checkboxDefinition = {
     }
   }
 };
-var radioDefinition = {
-  type: "radio",
-  label: "Radio",
+var switchDefinition = {
+  type: "switch",
+  label: "Switch",
   category: "form",
-  icon: "radio",
+  icon: "switch",
   acceptsChildren: false,
   disallowedParents: ["page"],
   defaultProps: {
-    name: "radio_group",
-    label: "Option 1",
-    value: "option1",
+    name: "switch_field",
+    label: "Enable feature",
+    value: "yes",
     defaultChecked: false,
+    switchSize: "md",
     required: false,
-    disabled: false
+    disabled: false,
+    helperText: ""
+  },
+  propFields: [
+    { name: "name", label: "Field Name", type: "string", defaultValue: "switch_field" },
+    { name: "label", label: "Label Text", type: "string", defaultValue: "Enable feature" },
+    { name: "value", label: "Checked Value", type: "string", defaultValue: "yes" },
+    { name: "defaultChecked", label: "Default Checked", type: "boolean", defaultValue: false },
+    {
+      name: "switchSize",
+      label: "Size",
+      type: "select",
+      defaultValue: "md",
+      options: [
+        { label: "Small", value: "sm" },
+        { label: "Medium", value: "md" },
+        { label: "Large", value: "lg" }
+      ]
+    },
+    { name: "required", label: "Required", type: "boolean", defaultValue: false },
+    { name: "disabled", label: "Disabled", type: "boolean", defaultValue: false },
+    { name: "helperText", label: "Helper Text", type: "string" }
+  ],
+  traits: [
+    fieldNameTrait({ defaultValue: "switch_field" }),
+    labelTextTrait({ defaultValue: "Enable feature" }),
+    valueTrait({ defaultValue: "yes" }),
+    defaultCheckedTrait(),
+    switchSizeTrait(),
+    helperTextTrait(),
+    requiredTrait(),
+    disabledTrait(),
+    idTrait(),
+    ariaLabelTrait()
+  ],
+  validateProps: (props) => {
+    const errors = [];
+    if (props.label !== void 0 && typeof props.label !== "string" && !isVariableBinding(props.label)) {
+      errors.push('Switch "label" must be a string when provided.');
+    }
+    if (props.name !== void 0 && typeof props.name !== "string" && !isVariableBinding(props.name)) {
+      errors.push('Switch "name" must be a string when provided.');
+    }
+    if (props.value !== void 0 && typeof props.value !== "string" && !isVariableBinding(props.value)) {
+      errors.push('Switch "value" must be a string when provided.');
+    }
+    if (props.defaultChecked !== void 0 && typeof props.defaultChecked !== "boolean" && !isVariableBinding(props.defaultChecked)) {
+      errors.push('Switch "defaultChecked" must be a boolean when provided.');
+    }
+    if (props.switchSize !== void 0 && !isVariableBinding(props.switchSize)) {
+      const allowedSizes = ["sm", "md", "lg"];
+      if (typeof props.switchSize !== "string" || !allowedSizes.includes(props.switchSize)) {
+        errors.push(`Switch "switchSize" must be one of: ${allowedSizes.join(", ")}.`);
+      }
+    }
+    if (props.required !== void 0 && typeof props.required !== "boolean" && !isVariableBinding(props.required)) {
+      errors.push('Switch "required" must be a boolean when provided.');
+    }
+    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !isVariableBinding(props.disabled)) {
+      errors.push('Switch "disabled" must be a boolean when provided.');
+    }
+    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !isVariableBinding(props.helperText)) {
+      errors.push('Switch "helperText" must be a string when provided.');
+    }
+    return errors.length > 0 ? errors : true;
+  },
+  defaultStyles: {
+    base: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "8px",
+      fontSize: "14px",
+      color: "#1e293b",
+      cursor: "pointer",
+      userSelect: "none"
+    }
+  }
+};
+var radioGroupDefinition = {
+  type: "radio-group",
+  label: "Radio Group",
+  category: "form",
+  icon: "radio-group",
+  acceptsChildren: true,
+  allowedChildren: ["radio", "radio-item", "custom"],
+  disallowedParents: ["page"],
+  defaultProps: {
+    name: "radio_group",
+    defaultSelected: "option1",
+    orientation: "vertical",
+    required: false,
+    disabled: false,
+    helperText: ""
+  },
+  defaultChildren: [
+    { type: "radio", props: { name: "radio_group", label: "Option 1", value: "option1", defaultChecked: true } },
+    { type: "radio", props: { name: "radio_group", label: "Option 2", value: "option2", defaultChecked: false } },
+    { type: "radio", props: { name: "radio_group", label: "Option 3", value: "option3", defaultChecked: false } }
+  ],
+  propFields: [
+    { name: "name", label: "Group Name", type: "string", defaultValue: "radio_group" },
+    { name: "defaultSelected", label: "Default Selected", type: "string", defaultValue: "option1" },
+    {
+      name: "orientation",
+      label: "Orientation",
+      type: "select",
+      defaultValue: "vertical",
+      options: [
+        { label: "Vertical", value: "vertical" },
+        { label: "Horizontal", value: "horizontal" }
+      ]
+    },
+    { name: "required", label: "Required", type: "boolean", defaultValue: false },
+    { name: "disabled", label: "Disabled", type: "boolean", defaultValue: false },
+    { name: "helperText", label: "Helper Text", type: "string" }
+  ],
+  traits: [
+    fieldNameTrait({ defaultValue: "radio_group", label: "Group Name" }),
+    defaultSelectedTrait({ defaultValue: "option1" }),
+    orientationTrait(),
+    helperTextTrait(),
+    requiredTrait(),
+    disabledTrait(),
+    idTrait(),
+    ariaLabelTrait()
+  ],
+  validateProps: (props) => {
+    const errors = [];
+    if (props.name !== void 0 && typeof props.name !== "string" && !isVariableBinding(props.name)) {
+      errors.push('RadioGroup "name" must be a string when provided.');
+    }
+    if (props.defaultSelected !== void 0 && typeof props.defaultSelected !== "string" && !isVariableBinding(props.defaultSelected)) {
+      errors.push('RadioGroup "defaultSelected" must be a string when provided.');
+    }
+    if (props.orientation !== void 0 && !isVariableBinding(props.orientation)) {
+      const allowedOrientations = ["vertical", "horizontal"];
+      if (typeof props.orientation !== "string" || !allowedOrientations.includes(props.orientation)) {
+        errors.push(`RadioGroup "orientation" must be one of: ${allowedOrientations.join(", ")}.`);
+      }
+    }
+    if (props.required !== void 0 && typeof props.required !== "boolean" && !isVariableBinding(props.required)) {
+      errors.push('RadioGroup "required" must be a boolean when provided.');
+    }
+    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !isVariableBinding(props.disabled)) {
+      errors.push('RadioGroup "disabled" must be a boolean when provided.');
+    }
+    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !isVariableBinding(props.helperText)) {
+      errors.push('RadioGroup "helperText" must be a string when provided.');
+    }
+    return errors.length > 0 ? errors : true;
+  },
+  defaultStyles: {
+    base: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px"
+    }
+  }
+};
+var radioDefinition = {
+  type: "radio",
+  label: "Radio",
+  category: "form",
+  icon: "radio",
+  acceptsChildren: false,
+  disallowedParents: ["page"],
+  defaultProps: {
+    name: "radio_group",
+    label: "Option 1",
+    value: "option1",
+    defaultChecked: false,
+    required: false,
+    disabled: false,
+    helperText: ""
   },
   propFields: [
     { name: "name", label: "Group Name", type: "string", defaultValue: "radio_group" },
@@ -2146,12 +2778,15 @@ var radioDefinition = {
     { name: "value", label: "Radio Value", type: "string", defaultValue: "option1" },
     { name: "defaultChecked", label: "Default Selected", type: "boolean", defaultValue: false },
     { name: "required", label: "Required", type: "boolean", defaultValue: false },
-    { name: "disabled", label: "Disabled", type: "boolean", defaultValue: false }
+    { name: "disabled", label: "Disabled", type: "boolean", defaultValue: false },
+    { name: "helperText", label: "Helper Text", type: "string" }
   ],
   traits: [
     fieldNameTrait({ defaultValue: "radio_group", label: "Group Name" }),
+    labelTextTrait({ defaultValue: "Option 1" }),
     valueTrait({ defaultValue: "option1" }),
     defaultCheckedTrait(),
+    helperTextTrait(),
     requiredTrait(),
     disabledTrait(),
     idTrait(),
@@ -2177,6 +2812,9 @@ var radioDefinition = {
     if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !isVariableBinding(props.disabled)) {
       errors.push('Radio "disabled" must be a boolean when provided.');
     }
+    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !isVariableBinding(props.helperText)) {
+      errors.push('Radio "helperText" must be a string when provided.');
+    }
     return errors.length > 0 ? errors : true;
   },
   defaultStyles: {
@@ -2191,6 +2829,206 @@ var radioDefinition = {
     }
   }
 };
+var radioItemDefinition = {
+  ...radioDefinition,
+  type: "radio-item",
+  label: "Radio Item"
+};
+var fileUploadDefinition = {
+  type: "file-upload",
+  label: "File Upload",
+  category: "form",
+  icon: "upload",
+  acceptsChildren: false,
+  disallowedParents: ["page"],
+  defaultProps: {
+    name: "file_upload",
+    label: "Upload File",
+    accept: "*/*",
+    maxFileSize: 10,
+    multiple: false,
+    showPreview: true,
+    required: false,
+    disabled: false,
+    helperText: ""
+  },
+  propFields: [
+    { name: "name", label: "Field Name", type: "string", defaultValue: "file_upload" },
+    { name: "label", label: "Label Text", type: "string", defaultValue: "Upload File" },
+    { name: "accept", label: "Accepted File Types", type: "string", defaultValue: "*/*" },
+    { name: "maxFileSize", label: "Max File Size (MB)", type: "number", defaultValue: 10 },
+    { name: "multiple", label: "Allow Multiple Files", type: "boolean", defaultValue: false },
+    { name: "showPreview", label: "Show Preview", type: "boolean", defaultValue: true },
+    { name: "required", label: "Required", type: "boolean", defaultValue: false },
+    { name: "disabled", label: "Disabled", type: "boolean", defaultValue: false },
+    { name: "helperText", label: "Helper Text", type: "string" }
+  ],
+  traits: [
+    fieldNameTrait({ defaultValue: "file_upload" }),
+    labelTextTrait({ defaultValue: "Upload File" }),
+    acceptTrait(),
+    maxFileSizeTrait(),
+    multipleTrait(),
+    showPreviewTrait(),
+    helperTextTrait(),
+    requiredTrait(),
+    disabledTrait(),
+    idTrait(),
+    ariaLabelTrait()
+  ],
+  validateProps: (props) => {
+    const errors = [];
+    if (props.label !== void 0 && typeof props.label !== "string" && !isVariableBinding(props.label)) {
+      errors.push('FileUpload "label" must be a string when provided.');
+    }
+    if (props.name !== void 0 && typeof props.name !== "string" && !isVariableBinding(props.name)) {
+      errors.push('FileUpload "name" must be a string when provided.');
+    }
+    if (props.accept !== void 0 && typeof props.accept !== "string" && !isVariableBinding(props.accept)) {
+      errors.push('FileUpload "accept" must be a string when provided.');
+    }
+    if (props.maxFileSize !== void 0 && !isVariableBinding(props.maxFileSize)) {
+      if (typeof props.maxFileSize !== "number" || props.maxFileSize <= 0) {
+        errors.push('FileUpload "maxFileSize" must be a positive number when provided.');
+      }
+    }
+    if (props.multiple !== void 0 && typeof props.multiple !== "boolean" && !isVariableBinding(props.multiple)) {
+      errors.push('FileUpload "multiple" must be a boolean when provided.');
+    }
+    if (props.showPreview !== void 0 && typeof props.showPreview !== "boolean" && !isVariableBinding(props.showPreview)) {
+      errors.push('FileUpload "showPreview" must be a boolean when provided.');
+    }
+    if (props.required !== void 0 && typeof props.required !== "boolean" && !isVariableBinding(props.required)) {
+      errors.push('FileUpload "required" must be a boolean when provided.');
+    }
+    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !isVariableBinding(props.disabled)) {
+      errors.push('FileUpload "disabled" must be a boolean when provided.');
+    }
+    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !isVariableBinding(props.helperText)) {
+      errors.push('FileUpload "helperText" must be a string when provided.');
+    }
+    return errors.length > 0 ? errors : true;
+  },
+  defaultStyles: {
+    base: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+      fontSize: "14px",
+      color: "#1e293b"
+    }
+  }
+};
+var buttonSubmitDefinition = {
+  type: "button-submit",
+  label: "Submit Button",
+  category: "form",
+  icon: "send",
+  acceptsChildren: false,
+  capabilities: ["actionRegistry"],
+  disallowedParents: ["page"],
+  defaultProps: {
+    label: "Submit",
+    loadingText: "Submitting...",
+    showSpinner: true,
+    autoDisableOnSubmit: true,
+    variant: "primary",
+    disabled: false,
+    buttonType: "submit"
+  },
+  propFields: [
+    { name: "label", label: "Label", type: "string", defaultValue: "Submit" },
+    { name: "loadingText", label: "Loading Text", type: "string", defaultValue: "Submitting..." },
+    { name: "showSpinner", label: "Show Loading Spinner", type: "boolean", defaultValue: true },
+    { name: "autoDisableOnSubmit", label: "Auto Disable on Submit", type: "boolean", defaultValue: true },
+    {
+      name: "buttonType",
+      label: "Button Type",
+      type: "select",
+      defaultValue: "submit",
+      options: [
+        { label: "Submit Form (submit)", value: "submit" },
+        { label: "Reset Form (reset)", value: "reset" }
+      ]
+    },
+    {
+      name: "variant",
+      label: "Variant",
+      type: "select",
+      defaultValue: "primary",
+      options: [
+        { label: "Primary", value: "primary" },
+        { label: "Secondary", value: "secondary" }
+      ]
+    },
+    { name: "disabled", label: "Disabled", type: "boolean", defaultValue: false },
+    { name: "prefixIcon", label: "Prefix Icon", type: "string" },
+    { name: "suffixIcon", label: "Suffix Icon", type: "string" }
+  ],
+  traits: [
+    buttonTypeTrait({
+      defaultValue: "submit",
+      options: [
+        { label: "Submit Form (submit)", value: "submit" },
+        { label: "Reset Form (reset)", value: "reset" }
+      ]
+    }),
+    labelTextTrait({ defaultValue: "Submit", label: "Label" }),
+    loadingTextTrait(),
+    showSpinnerTrait(),
+    autoDisableOnSubmitTrait(),
+    disabledTrait(),
+    prefixIconTrait(),
+    suffixIconTrait(),
+    idTrait(),
+    titleTrait(),
+    ariaLabelTrait()
+  ],
+  validateProps: (props) => {
+    const errors = [];
+    const hasLabel = typeof props.label === "string" && props.label.trim().length > 0 || isVariableBinding(props.label);
+    if (!hasLabel) {
+      errors.push('Submit Button requires a non-empty "label".');
+    }
+    if (props.loadingText !== void 0 && typeof props.loadingText !== "string" && !isVariableBinding(props.loadingText)) {
+      errors.push('Submit Button "loadingText" must be a string when provided.');
+    }
+    if (props.showSpinner !== void 0 && typeof props.showSpinner !== "boolean" && !isVariableBinding(props.showSpinner)) {
+      errors.push('Submit Button "showSpinner" must be a boolean when provided.');
+    }
+    if (props.autoDisableOnSubmit !== void 0 && typeof props.autoDisableOnSubmit !== "boolean" && !isVariableBinding(props.autoDisableOnSubmit)) {
+      errors.push('Submit Button "autoDisableOnSubmit" must be a boolean when provided.');
+    }
+    if (props.buttonType !== void 0 && !isVariableBinding(props.buttonType)) {
+      if (!["submit", "reset", "button"].includes(props.buttonType)) {
+        errors.push('Submit Button "buttonType" must be one of: "submit", "reset", "button".');
+      }
+    }
+    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !isVariableBinding(props.disabled)) {
+      errors.push('Submit Button "disabled" must be a boolean when provided.');
+    }
+    return errors.length > 0 ? errors : true;
+  },
+  defaultStyles: {
+    base: {
+      backgroundColor: "#2563eb",
+      color: "#ffffff",
+      paddingTop: "10px",
+      paddingBottom: "10px",
+      paddingLeft: "20px",
+      paddingRight: "20px",
+      borderRadius: "6px",
+      fontWeight: "500",
+      fontSize: "15px",
+      border: "none",
+      cursor: "pointer",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "8px"
+    }
+  }
+};
 var coreComponentDefinitions = [
   pageDefinition,
   sectionDefinition,
@@ -2208,12 +3046,17 @@ var coreComponentDefinitions = [
   iconDefinition,
   htmlEmbedDefinition,
   buttonDefinition,
+  buttonSubmitDefinition,
   formDefinition,
   inputDefinition,
   textareaDefinition,
   selectDefinition,
   checkboxDefinition,
+  switchDefinition,
+  radioGroupDefinition,
   radioDefinition,
+  radioItemDefinition,
+  fileUploadDefinition,
   collectionDefinition,
   listDefinition,
   listItemDefinition,
@@ -2268,18 +3111,1290 @@ function primitiveTypeForField(field) {
 function isBindableField(field) {
   return primitiveTypeForField(field) !== void 0;
 }
+
+// src/blocks.ts
+var nextId = 1;
+function defaultGenId(prefix = "node") {
+  return `${prefix}-${Date.now().toString(36)}-${(nextId++).toString(36)}`;
+}
+var STARTER_BLOCKS = [
+  // --- Layout Blocks (STORA-241) ---
+  {
+    id: "layout-1-col",
+    name: "1 Column",
+    category: "layout",
+    categoryLabel: "Layout Blocks",
+    description: "Full-width single column container inside a section",
+    icon: "layout",
+    createNodeTree: (gen = defaultGenId) => ({
+      id: gen("section"),
+      type: "section",
+      styles: { base: { padding: "40px 20px", width: "100%" } },
+      children: [
+        {
+          id: gen("container"),
+          type: "container",
+          props: { tag: "div" },
+          styles: { base: { maxWidth: "1200px", margin: "0 auto", width: "100%" } },
+          children: []
+        }
+      ]
+    })
+  },
+  {
+    id: "layout-2-col-50-50",
+    name: "2 Columns (50/50)",
+    category: "layout",
+    categoryLabel: "Layout Blocks",
+    description: "Two equal-width 50/50 columns with flexible layout",
+    icon: "columns",
+    createNodeTree: (gen = defaultGenId) => ({
+      id: gen("section"),
+      type: "section",
+      styles: { base: { padding: "40px 20px", width: "100%" } },
+      children: [
+        {
+          id: gen("columns"),
+          type: "columns",
+          props: { columns: 2, gap: "24px" },
+          styles: { base: { display: "flex", gap: "24px", width: "100%", maxWidth: "1200px", margin: "0 auto" } },
+          children: [
+            {
+              id: gen("container"),
+              type: "container",
+              props: { tag: "div" },
+              styles: { base: { flex: "1 1 0%", minWidth: "0" } },
+              children: []
+            },
+            {
+              id: gen("container"),
+              type: "container",
+              props: { tag: "div" },
+              styles: { base: { flex: "1 1 0%", minWidth: "0" } },
+              children: []
+            }
+          ]
+        }
+      ]
+    })
+  },
+  {
+    id: "layout-2-col-30-70",
+    name: "2 Columns (30/70)",
+    category: "layout",
+    categoryLabel: "Layout Blocks",
+    description: "Two asymmetric columns: 30% sidebar and 70% main area",
+    icon: "columns",
+    createNodeTree: (gen = defaultGenId) => ({
+      id: gen("section"),
+      type: "section",
+      styles: { base: { padding: "40px 20px", width: "100%" } },
+      children: [
+        {
+          id: gen("columns"),
+          type: "columns",
+          props: { columns: 2, gap: "24px" },
+          styles: { base: { display: "flex", gap: "24px", width: "100%", maxWidth: "1200px", margin: "0 auto" } },
+          children: [
+            {
+              id: gen("container"),
+              type: "container",
+              props: { tag: "div" },
+              styles: { base: { flex: "0 0 30%", minWidth: "0" } },
+              children: []
+            },
+            {
+              id: gen("container"),
+              type: "container",
+              props: { tag: "div" },
+              styles: { base: { flex: "1 1 0%", minWidth: "0" } },
+              children: []
+            }
+          ]
+        }
+      ]
+    })
+  },
+  {
+    id: "layout-3-col",
+    name: "3 Columns",
+    category: "layout",
+    categoryLabel: "Layout Blocks",
+    description: "Three equal-width columns for grid showcases or card groups",
+    icon: "grid",
+    createNodeTree: (gen = defaultGenId) => ({
+      id: gen("section"),
+      type: "section",
+      styles: { base: { padding: "40px 20px", width: "100%" } },
+      children: [
+        {
+          id: gen("columns"),
+          type: "columns",
+          props: { columns: 3, gap: "24px" },
+          styles: { base: { display: "flex", gap: "24px", width: "100%", maxWidth: "1200px", margin: "0 auto" } },
+          children: [
+            {
+              id: gen("container"),
+              type: "container",
+              props: { tag: "div" },
+              styles: { base: { flex: "1 1 0%", minWidth: "0" } },
+              children: []
+            },
+            {
+              id: gen("container"),
+              type: "container",
+              props: { tag: "div" },
+              styles: { base: { flex: "1 1 0%", minWidth: "0" } },
+              children: []
+            },
+            {
+              id: gen("container"),
+              type: "container",
+              props: { tag: "div" },
+              styles: { base: { flex: "1 1 0%", minWidth: "0" } },
+              children: []
+            }
+          ]
+        }
+      ]
+    })
+  },
+  {
+    id: "layout-4-col",
+    name: "4 Columns",
+    category: "layout",
+    categoryLabel: "Layout Blocks",
+    description: "Four equal columns for metric stats, logos, or compact feature cards",
+    icon: "grid",
+    createNodeTree: (gen = defaultGenId) => ({
+      id: gen("section"),
+      type: "section",
+      styles: { base: { padding: "40px 20px", width: "100%" } },
+      children: [
+        {
+          id: gen("columns"),
+          type: "columns",
+          props: { columns: 4, gap: "16px" },
+          styles: { base: { display: "flex", gap: "16px", width: "100%", maxWidth: "1200px", margin: "0 auto" } },
+          children: [
+            {
+              id: gen("container"),
+              type: "container",
+              props: { tag: "div" },
+              styles: { base: { flex: "1 1 0%", minWidth: "0" } },
+              children: []
+            },
+            {
+              id: gen("container"),
+              type: "container",
+              props: { tag: "div" },
+              styles: { base: { flex: "1 1 0%", minWidth: "0" } },
+              children: []
+            },
+            {
+              id: gen("container"),
+              type: "container",
+              props: { tag: "div" },
+              styles: { base: { flex: "1 1 0%", minWidth: "0" } },
+              children: []
+            },
+            {
+              id: gen("container"),
+              type: "container",
+              props: { tag: "div" },
+              styles: { base: { flex: "1 1 0%", minWidth: "0" } },
+              children: []
+            }
+          ]
+        }
+      ]
+    })
+  },
+  // --- Pre-composed UI Blocks (STORA-242) ---
+  {
+    id: "hero-section",
+    name: "Hero Section",
+    category: "sections",
+    categoryLabel: "Hero & Headers",
+    description: "Engaging hero banner with headline, lead paragraph, and call-to-action button",
+    icon: "layout",
+    createNodeTree: (gen = defaultGenId) => ({
+      id: gen("section"),
+      type: "section",
+      styles: {
+        base: {
+          padding: "80px 24px",
+          backgroundColor: "#f8fafc",
+          textAlign: "center",
+          width: "100%"
+        }
+      },
+      children: [
+        {
+          id: gen("container"),
+          type: "container",
+          props: { tag: "div" },
+          styles: { base: { maxWidth: "768px", margin: "0 auto" } },
+          children: [
+            {
+              id: gen("heading"),
+              type: "heading",
+              props: { text: "Build Remarkable Experiences", level: 1 },
+              styles: {
+                base: {
+                  fontSize: "44px",
+                  fontWeight: "800",
+                  color: "#0f172a",
+                  marginBottom: "16px",
+                  lineHeight: "1.2"
+                }
+              }
+            },
+            {
+              id: gen("paragraph"),
+              type: "paragraph",
+              props: {
+                content: "A visual builder designed for maximum craft, responsiveness, and performance."
+              },
+              styles: {
+                base: {
+                  fontSize: "18px",
+                  color: "#475569",
+                  marginBottom: "32px",
+                  lineHeight: "1.6"
+                }
+              }
+            },
+            {
+              id: gen("button"),
+              type: "button",
+              props: { label: "Get Started Today", href: "#explore" },
+              styles: {
+                base: {
+                  backgroundColor: "#2563eb",
+                  color: "#ffffff",
+                  padding: "12px 28px",
+                  borderRadius: "8px",
+                  fontWeight: "600",
+                  display: "inline-block"
+                },
+                states: {
+                  ":hover": { backgroundColor: "#1d4ed8" }
+                }
+              }
+            }
+          ]
+        }
+      ]
+    })
+  },
+  {
+    id: "feature-card",
+    name: "Feature Card",
+    category: "ui",
+    categoryLabel: "UI Blocks",
+    description: "Clean elevated feature card with badge, title, text, and action link",
+    icon: "box",
+    createNodeTree: (gen = defaultGenId) => ({
+      id: gen("container"),
+      type: "container",
+      props: { tag: "div" },
+      styles: {
+        base: {
+          padding: "24px",
+          backgroundColor: "#ffffff",
+          borderRadius: "12px",
+          border: "1px solid #e2e8f0",
+          boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.05)"
+        }
+      },
+      children: [
+        {
+          id: gen("badge"),
+          type: "badge",
+          props: { label: "PRO FEATURE", variant: "primary" },
+          styles: { base: { marginBottom: "12px", display: "inline-block" } }
+        },
+        {
+          id: gen("heading"),
+          type: "heading",
+          props: { text: "Next-Gen Performance", level: 3 },
+          styles: {
+            base: { fontSize: "20px", fontWeight: "700", color: "#1e293b", marginBottom: "8px" }
+          }
+        },
+        {
+          id: gen("paragraph"),
+          type: "paragraph",
+          props: {
+            content: "Engineered for sub-millisecond render updates and zero runtime overhead."
+          },
+          styles: { base: { fontSize: "14px", color: "#64748b", lineHeight: "1.5" } }
+        }
+      ]
+    })
+  },
+  {
+    id: "media-object",
+    name: "Media Object",
+    category: "ui",
+    categoryLabel: "UI Blocks",
+    description: "Horizontal media layout with image beside text content",
+    icon: "image",
+    createNodeTree: (gen = defaultGenId) => ({
+      id: gen("container"),
+      type: "container",
+      props: { tag: "div" },
+      styles: {
+        base: {
+          display: "flex",
+          gap: "16px",
+          alignItems: "flex-start",
+          padding: "16px",
+          backgroundColor: "#ffffff",
+          borderRadius: "8px",
+          border: "1px solid #e2e8f0"
+        }
+      },
+      children: [
+        {
+          id: gen("image"),
+          type: "image",
+          props: {
+            src: "https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=160&auto=format&fit=crop&q=80",
+            alt: "Visual preview"
+          },
+          styles: {
+            base: {
+              width: "80px",
+              height: "80px",
+              borderRadius: "8px",
+              objectFit: "cover",
+              flexShrink: "0"
+            }
+          }
+        },
+        {
+          id: gen("container"),
+          type: "container",
+          props: { tag: "div" },
+          styles: { base: { flex: "1 1 0%" } },
+          children: [
+            {
+              id: gen("heading"),
+              type: "heading",
+              props: { text: "Creative Studio Asset", level: 4 },
+              styles: {
+                base: { fontSize: "16px", fontWeight: "600", color: "#0f172a", marginBottom: "4px" }
+              }
+            },
+            {
+              id: gen("paragraph"),
+              type: "paragraph",
+              props: { content: "High dynamic range gradients crafted for modern presentations." },
+              styles: { base: { fontSize: "13px", color: "#64748b", lineHeight: "1.4" } }
+            }
+          ]
+        }
+      ]
+    })
+  },
+  {
+    id: "pricing-table",
+    name: "Pricing Table",
+    category: "pricing",
+    categoryLabel: "Pricing",
+    description: "Highlighted subscription pricing plan with price, feature list, and buy button",
+    icon: "table",
+    createNodeTree: (gen = defaultGenId) => ({
+      id: gen("container"),
+      type: "container",
+      props: { tag: "div" },
+      styles: {
+        base: {
+          padding: "32px 24px",
+          backgroundColor: "#ffffff",
+          borderRadius: "16px",
+          border: "2px solid #3b82f6",
+          boxShadow: "0 10px 15px -3px rgba(59, 130, 246, 0.1)",
+          textAlign: "center",
+          maxWidth: "360px"
+        }
+      },
+      children: [
+        {
+          id: gen("badge"),
+          type: "badge",
+          props: { label: "MOST POPULAR", variant: "primary" },
+          styles: { base: { marginBottom: "12px", display: "inline-block" } }
+        },
+        {
+          id: gen("heading"),
+          type: "heading",
+          props: { text: "Professional", level: 3 },
+          styles: { base: { fontSize: "22px", fontWeight: "700", color: "#0f172a" } }
+        },
+        {
+          id: gen("heading"),
+          type: "heading",
+          props: { text: "$29 / mo", level: 2 },
+          styles: {
+            base: { fontSize: "36px", fontWeight: "800", color: "#2563eb", margin: "16px 0 24px 0" }
+          }
+        },
+        {
+          id: gen("paragraph"),
+          type: "paragraph",
+          props: { content: "Includes unlimited pages, custom domains, and team collaboration." },
+          styles: { base: { fontSize: "14px", color: "#64748b", marginBottom: "24px" } }
+        },
+        {
+          id: gen("button"),
+          type: "button",
+          props: { label: "Upgrade to Pro", href: "#checkout" },
+          styles: {
+            base: {
+              width: "100%",
+              backgroundColor: "#2563eb",
+              color: "#ffffff",
+              padding: "12px",
+              borderRadius: "8px",
+              fontWeight: "600",
+              display: "block"
+            },
+            states: {
+              ":hover": { backgroundColor: "#1d4ed8" }
+            }
+          }
+        }
+      ]
+    })
+  },
+  {
+    id: "cta-banner",
+    name: "CTA Banner",
+    category: "cta",
+    categoryLabel: "Call to Action",
+    description: "High-contrast conversion banner with title and action button",
+    icon: "layout",
+    createNodeTree: (gen = defaultGenId) => ({
+      id: gen("section"),
+      type: "section",
+      styles: {
+        base: {
+          padding: "60px 24px",
+          backgroundColor: "#0f172a",
+          color: "#ffffff",
+          borderRadius: "16px",
+          textAlign: "center",
+          width: "100%"
+        }
+      },
+      children: [
+        {
+          id: gen("heading"),
+          type: "heading",
+          props: { text: "Ready to boost your workflow?", level: 2 },
+          styles: {
+            base: { fontSize: "32px", fontWeight: "700", color: "#ffffff", marginBottom: "12px" }
+          }
+        },
+        {
+          id: gen("paragraph"),
+          type: "paragraph",
+          props: { content: "Start building with zero installation and instant live preview." },
+          styles: {
+            base: { fontSize: "16px", color: "#94a3b8", marginBottom: "24px", maxWidth: "600px", margin: "0 auto 24px auto" }
+          }
+        },
+        {
+          id: gen("button"),
+          type: "button",
+          props: { label: "Start Free Trial", href: "#signup" },
+          styles: {
+            base: {
+              backgroundColor: "#ffffff",
+              color: "#0f172a",
+              padding: "12px 28px",
+              borderRadius: "8px",
+              fontWeight: "700",
+              display: "inline-block"
+            },
+            states: {
+              ":hover": { backgroundColor: "#f1f5f9" }
+            }
+          }
+        }
+      ]
+    })
+  },
+  // --- Starter Form Templates (STORA-350) ---
+  {
+    id: "form-contact-us",
+    name: "Contact Us Form",
+    category: "forms",
+    categoryLabel: "Form Templates",
+    description: "Contact form with Name, Email, Subject, Message, and submit action pipeline with API request and toast notifications",
+    icon: "form",
+    createNodeTree: (gen = defaultGenId) => ({
+      id: gen("section"),
+      type: "section",
+      styles: {
+        base: {
+          padding: "64px 20px",
+          backgroundColor: "#f8fafc",
+          width: "100%"
+        }
+      },
+      children: [
+        {
+          id: gen("container"),
+          type: "container",
+          props: { tag: "div", maxWidth: "640px" },
+          styles: {
+            base: {
+              maxWidth: "640px",
+              margin: "0 auto",
+              width: "100%",
+              backgroundColor: "#ffffff",
+              padding: "36px",
+              borderRadius: "16px",
+              boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05)",
+              border: "1px solid #e2e8f0"
+            }
+          },
+          children: [
+            {
+              id: gen("heading"),
+              type: "heading",
+              props: { text: "Contact Us", level: 2 },
+              styles: {
+                base: {
+                  fontSize: "28px",
+                  fontWeight: "700",
+                  color: "#0f172a",
+                  marginBottom: "8px",
+                  textAlign: "center"
+                }
+              }
+            },
+            {
+              id: gen("paragraph"),
+              type: "paragraph",
+              props: {
+                content: "Have questions or need assistance? Fill out the form below and we will get back to you shortly."
+              },
+              styles: {
+                base: {
+                  fontSize: "15px",
+                  color: "#64748b",
+                  marginBottom: "28px",
+                  textAlign: "center",
+                  lineHeight: "1.5"
+                }
+              }
+            },
+            {
+              id: gen("form"),
+              type: "form",
+              props: {
+                name: "contact_us_form",
+                method: "POST",
+                preventDefault: true,
+                scrollToFirstError: true,
+                resetOnSubmit: true
+              },
+              styles: {
+                base: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "20px",
+                  width: "100%"
+                }
+              },
+              actions: [
+                {
+                  id: gen("pipeline"),
+                  trigger: "submit",
+                  label: "Submit Contact Form",
+                  enabled: true,
+                  steps: [
+                    {
+                      id: gen("step"),
+                      type: "api_request",
+                      label: "Send Contact Message",
+                      payload: {
+                        url: "/api/mock/submit-lead",
+                        method: "POST",
+                        bodyFormat: "json"
+                      },
+                      onSuccess: [
+                        {
+                          id: gen("step"),
+                          type: "show_toast",
+                          label: "Show Success Toast",
+                          payload: {
+                            message: "Thank you! Your message has been sent successfully.",
+                            type: "success",
+                            title: "Message Sent",
+                            duration: 4e3
+                          }
+                        },
+                        {
+                          id: gen("step"),
+                          type: "reset_form",
+                          label: "Reset Form",
+                          payload: {}
+                        }
+                      ],
+                      onError: [
+                        {
+                          id: gen("step"),
+                          type: "show_toast",
+                          label: "Show Error Toast",
+                          payload: {
+                            message: "Failed to send message. Please check your connection and try again.",
+                            type: "error",
+                            title: "Submission Failed",
+                            duration: 5e3
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              children: [
+                {
+                  id: gen("input"),
+                  type: "input",
+                  props: {
+                    name: "name",
+                    label: "Your Name",
+                    type: "text",
+                    placeholder: "Jane Doe",
+                    required: true,
+                    rules: [
+                      { type: "required", message: "Please enter your name" },
+                      { type: "min_length", value: 2, message: "Name must be at least 2 characters" }
+                    ]
+                  },
+                  styles: {
+                    base: {
+                      width: "100%",
+                      padding: "10px 14px",
+                      borderRadius: "8px",
+                      border: "1px solid #cbd5e1",
+                      fontSize: "14px"
+                    }
+                  }
+                },
+                {
+                  id: gen("input"),
+                  type: "input",
+                  props: {
+                    name: "email",
+                    label: "Email Address",
+                    type: "email",
+                    placeholder: "jane@example.com",
+                    required: true,
+                    rules: [
+                      { type: "required", message: "Please enter your email" },
+                      { type: "email", message: "Please enter a valid email address" }
+                    ]
+                  },
+                  styles: {
+                    base: {
+                      width: "100%",
+                      padding: "10px 14px",
+                      borderRadius: "8px",
+                      border: "1px solid #cbd5e1",
+                      fontSize: "14px"
+                    }
+                  }
+                },
+                {
+                  id: gen("input"),
+                  type: "input",
+                  props: {
+                    name: "subject",
+                    label: "Subject",
+                    type: "text",
+                    placeholder: "How can we help you?",
+                    required: true,
+                    rules: [
+                      { type: "required", message: "Please enter a subject" }
+                    ]
+                  },
+                  styles: {
+                    base: {
+                      width: "100%",
+                      padding: "10px 14px",
+                      borderRadius: "8px",
+                      border: "1px solid #cbd5e1",
+                      fontSize: "14px"
+                    }
+                  }
+                },
+                {
+                  id: gen("textarea"),
+                  type: "textarea",
+                  props: {
+                    name: "message",
+                    label: "Message",
+                    placeholder: "Write your message here...",
+                    rows: 4,
+                    required: true,
+                    rules: [
+                      { type: "required", message: "Please enter your message" },
+                      { type: "min_length", value: 10, message: "Message must be at least 10 characters" }
+                    ]
+                  },
+                  styles: {
+                    base: {
+                      width: "100%",
+                      padding: "10px 14px",
+                      borderRadius: "8px",
+                      border: "1px solid #cbd5e1",
+                      fontSize: "14px"
+                    }
+                  }
+                },
+                {
+                  id: gen("button"),
+                  type: "button",
+                  props: {
+                    label: "Send Message",
+                    variant: "primary",
+                    buttonType: "submit"
+                  },
+                  styles: {
+                    base: {
+                      width: "100%",
+                      backgroundColor: "#2563eb",
+                      color: "#ffffff",
+                      padding: "12px",
+                      borderRadius: "8px",
+                      fontWeight: "600",
+                      fontSize: "15px",
+                      display: "inline-block",
+                      textAlign: "center"
+                    },
+                    states: {
+                      ":hover": { backgroundColor: "#1d4ed8" }
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    })
+  },
+  {
+    id: "form-newsletter",
+    name: "Newsletter Subscribe Form",
+    category: "forms",
+    categoryLabel: "Form Templates",
+    description: "Inline email newsletter subscription form with real-time feedback",
+    icon: "mail",
+    createNodeTree: (gen = defaultGenId) => ({
+      id: gen("section"),
+      type: "section",
+      styles: {
+        base: {
+          padding: "48px 20px",
+          backgroundColor: "#f1f5f9",
+          width: "100%"
+        }
+      },
+      children: [
+        {
+          id: gen("container"),
+          type: "container",
+          props: { tag: "div", maxWidth: "580px" },
+          styles: {
+            base: {
+              maxWidth: "580px",
+              margin: "0 auto",
+              width: "100%",
+              textAlign: "center"
+            }
+          },
+          children: [
+            {
+              id: gen("heading"),
+              type: "heading",
+              props: { text: "Stay in the Loop", level: 3 },
+              styles: {
+                base: {
+                  fontSize: "26px",
+                  fontWeight: "700",
+                  color: "#0f172a",
+                  marginBottom: "8px"
+                }
+              }
+            },
+            {
+              id: gen("paragraph"),
+              type: "paragraph",
+              props: {
+                content: "Subscribe to our newsletter for weekly curated insights, updates, and best practices."
+              },
+              styles: {
+                base: {
+                  fontSize: "15px",
+                  color: "#64748b",
+                  marginBottom: "24px",
+                  lineHeight: "1.5"
+                }
+              }
+            },
+            {
+              id: gen("form"),
+              type: "form",
+              props: {
+                name: "newsletter_form",
+                method: "POST",
+                preventDefault: true,
+                resetOnSubmit: true
+              },
+              styles: {
+                base: {
+                  display: "flex",
+                  flexDirection: "row",
+                  gap: "8px",
+                  alignItems: "center",
+                  width: "100%"
+                },
+                mobile: {
+                  flexDirection: "column"
+                }
+              },
+              actions: [
+                {
+                  id: gen("pipeline"),
+                  trigger: "submit",
+                  label: "Subscribe to Newsletter",
+                  enabled: true,
+                  steps: [
+                    {
+                      id: gen("step"),
+                      type: "api_request",
+                      label: "Submit Subscription",
+                      payload: {
+                        url: "/api/mock/submit-lead",
+                        method: "POST",
+                        bodyFormat: "json"
+                      },
+                      onSuccess: [
+                        {
+                          id: gen("step"),
+                          type: "show_toast",
+                          label: "Show Success Toast",
+                          payload: {
+                            message: "Thank you for subscribing to our newsletter!",
+                            type: "success",
+                            title: "Subscription Confirmed",
+                            duration: 4e3
+                          }
+                        },
+                        {
+                          id: gen("step"),
+                          type: "reset_form",
+                          label: "Reset Form",
+                          payload: {}
+                        }
+                      ],
+                      onError: [
+                        {
+                          id: gen("step"),
+                          type: "show_toast",
+                          label: "Show Error Toast",
+                          payload: {
+                            message: "Unable to subscribe right now. Please try again later.",
+                            type: "error",
+                            title: "Error",
+                            duration: 5e3
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              children: [
+                {
+                  id: gen("input"),
+                  type: "input",
+                  props: {
+                    name: "email",
+                    type: "email",
+                    placeholder: "Enter your email address...",
+                    required: true,
+                    rules: [
+                      { type: "required", message: "Email address is required" },
+                      { type: "email", message: "Please enter a valid email address" }
+                    ]
+                  },
+                  styles: {
+                    base: {
+                      flex: "1 1 0%",
+                      minWidth: "0",
+                      padding: "12px 16px",
+                      borderRadius: "8px",
+                      border: "1px solid #cbd5e1",
+                      backgroundColor: "#ffffff",
+                      fontSize: "14px"
+                    }
+                  }
+                },
+                {
+                  id: gen("button"),
+                  type: "button",
+                  props: {
+                    label: "Subscribe",
+                    variant: "primary",
+                    buttonType: "submit"
+                  },
+                  styles: {
+                    base: {
+                      backgroundColor: "#2563eb",
+                      color: "#ffffff",
+                      padding: "12px 24px",
+                      borderRadius: "8px",
+                      fontWeight: "600",
+                      fontSize: "14px",
+                      whiteSpace: "nowrap"
+                    },
+                    states: {
+                      ":hover": { backgroundColor: "#1d4ed8" }
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    })
+  },
+  {
+    id: "form-lead-gen",
+    name: "Lead Generation Form",
+    category: "forms",
+    categoryLabel: "Form Templates",
+    description: "Multi-field lead generation form with phone validation, interest dropdown, and API submission pipeline",
+    icon: "users",
+    createNodeTree: (gen = defaultGenId) => ({
+      id: gen("section"),
+      type: "section",
+      styles: {
+        base: {
+          padding: "64px 20px",
+          backgroundColor: "#ffffff",
+          width: "100%"
+        }
+      },
+      children: [
+        {
+          id: gen("container"),
+          type: "container",
+          props: { tag: "div", maxWidth: "640px" },
+          styles: {
+            base: {
+              maxWidth: "640px",
+              margin: "0 auto",
+              width: "100%",
+              backgroundColor: "#ffffff",
+              padding: "36px",
+              borderRadius: "16px",
+              border: "1px solid #e2e8f0",
+              boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.05)"
+            }
+          },
+          children: [
+            {
+              id: gen("badge"),
+              type: "badge",
+              props: { label: "FREE CONSULTATION", variant: "primary" },
+              styles: { base: { marginBottom: "12px", display: "inline-block" } }
+            },
+            {
+              id: gen("heading"),
+              type: "heading",
+              props: { text: "Schedule a Consultation", level: 2 },
+              styles: {
+                base: {
+                  fontSize: "28px",
+                  fontWeight: "700",
+                  color: "#0f172a",
+                  marginBottom: "8px"
+                }
+              }
+            },
+            {
+              id: gen("paragraph"),
+              type: "paragraph",
+              props: {
+                content: "Share your project details with our solutions team. We will analyze your needs and provide a personalized roadmap."
+              },
+              styles: {
+                base: {
+                  fontSize: "15px",
+                  color: "#64748b",
+                  marginBottom: "28px",
+                  lineHeight: "1.5"
+                }
+              }
+            },
+            {
+              id: gen("form"),
+              type: "form",
+              props: {
+                name: "lead_generation_form",
+                method: "POST",
+                preventDefault: true,
+                scrollToFirstError: true,
+                resetOnSubmit: true
+              },
+              styles: {
+                base: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "18px",
+                  width: "100%"
+                }
+              },
+              actions: [
+                {
+                  id: gen("pipeline"),
+                  trigger: "submit",
+                  label: "Submit Lead Form",
+                  enabled: true,
+                  steps: [
+                    {
+                      id: gen("step"),
+                      type: "api_request",
+                      label: "Send Lead Data",
+                      payload: {
+                        url: "/api/mock/submit-lead",
+                        method: "POST",
+                        bodyFormat: "json"
+                      },
+                      onSuccess: [
+                        {
+                          id: gen("step"),
+                          type: "show_toast",
+                          label: "Show Success Toast",
+                          payload: {
+                            message: "Thank you! Your request has been received. Our team will contact you shortly.",
+                            type: "success",
+                            title: "Request Submitted",
+                            duration: 4e3
+                          }
+                        },
+                        {
+                          id: gen("step"),
+                          type: "reset_form",
+                          label: "Reset Form",
+                          payload: {}
+                        }
+                      ],
+                      onError: [
+                        {
+                          id: gen("step"),
+                          type: "show_toast",
+                          label: "Show Error Toast",
+                          payload: {
+                            message: "Submission failed. Please verify your information and try again.",
+                            type: "error",
+                            title: "Submission Error",
+                            duration: 5e3
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              children: [
+                {
+                  id: gen("input"),
+                  type: "input",
+                  props: {
+                    name: "full_name",
+                    label: "Full Name",
+                    type: "text",
+                    placeholder: "Alex Morgan",
+                    required: true,
+                    rules: [
+                      { type: "required", message: "Full name is required" },
+                      { type: "min_length", value: 2, message: "Name must be at least 2 characters" }
+                    ]
+                  },
+                  styles: {
+                    base: {
+                      width: "100%",
+                      padding: "10px 14px",
+                      borderRadius: "8px",
+                      border: "1px solid #cbd5e1",
+                      fontSize: "14px"
+                    }
+                  }
+                },
+                {
+                  id: gen("input"),
+                  type: "input",
+                  props: {
+                    name: "email",
+                    label: "Business Email",
+                    type: "email",
+                    placeholder: "alex@company.com",
+                    required: true,
+                    rules: [
+                      { type: "required", message: "Business email is required" },
+                      { type: "email", message: "Please enter a valid email address" }
+                    ]
+                  },
+                  styles: {
+                    base: {
+                      width: "100%",
+                      padding: "10px 14px",
+                      borderRadius: "8px",
+                      border: "1px solid #cbd5e1",
+                      fontSize: "14px"
+                    }
+                  }
+                },
+                {
+                  id: gen("input"),
+                  type: "input",
+                  props: {
+                    name: "phone",
+                    label: "Phone Number",
+                    type: "tel",
+                    placeholder: "+62 812-3456-7890",
+                    required: true,
+                    rules: [
+                      { type: "required", message: "Phone number is required" },
+                      {
+                        type: "custom_regex",
+                        value: "^[+]?[0-9\\s-()]{8,20}$",
+                        message: "Please enter a valid phone number (min 8 digits)"
+                      }
+                    ]
+                  },
+                  styles: {
+                    base: {
+                      width: "100%",
+                      padding: "10px 14px",
+                      borderRadius: "8px",
+                      border: "1px solid #cbd5e1",
+                      fontSize: "14px"
+                    }
+                  }
+                },
+                {
+                  id: gen("select"),
+                  type: "select",
+                  props: {
+                    name: "interest",
+                    label: "Area of Interest",
+                    placeholder: "Select your interest / service...",
+                    required: true,
+                    defaultValue: "",
+                    options: [
+                      { label: "Web Platform Development", value: "web_platform" },
+                      { label: "Mobile Application", value: "mobile_app" },
+                      { label: "Cloud Architecture & DevOps", value: "cloud_devops" },
+                      { label: "UI/UX Product Design", value: "product_design" },
+                      { label: "General Inquiry", value: "general" }
+                    ],
+                    rules: [
+                      { type: "required", message: "Please select an area of interest" }
+                    ]
+                  },
+                  styles: {
+                    base: {
+                      width: "100%",
+                      padding: "10px 14px",
+                      borderRadius: "8px",
+                      border: "1px solid #cbd5e1",
+                      fontSize: "14px",
+                      backgroundColor: "#ffffff"
+                    }
+                  }
+                },
+                {
+                  id: gen("input"),
+                  type: "input",
+                  props: {
+                    name: "company",
+                    label: "Company Name (Optional)",
+                    type: "text",
+                    placeholder: "Company / Organization"
+                  },
+                  styles: {
+                    base: {
+                      width: "100%",
+                      padding: "10px 14px",
+                      borderRadius: "8px",
+                      border: "1px solid #cbd5e1",
+                      fontSize: "14px"
+                    }
+                  }
+                },
+                {
+                  id: gen("button"),
+                  type: "button",
+                  props: {
+                    label: "Request Consultation",
+                    variant: "primary",
+                    buttonType: "submit"
+                  },
+                  styles: {
+                    base: {
+                      width: "100%",
+                      backgroundColor: "#2563eb",
+                      color: "#ffffff",
+                      padding: "12px 24px",
+                      borderRadius: "8px",
+                      fontWeight: "600",
+                      fontSize: "15px",
+                      marginTop: "4px"
+                    },
+                    states: {
+                      ":hover": { backgroundColor: "#1d4ed8" }
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    })
+  }
+];
 export {
   ComponentRegistry,
+  STARTER_BLOCKS,
   TRAIT_GROUP_LABELS,
   TRAIT_GROUP_ORDER,
+  acceptTrait,
   actionTrait,
   altTrait,
   ariaLabelTrait,
   autoCompleteTrait,
+  autoDisableOnSubmitTrait,
+  autoGrowTrait,
   autoplayTrait,
   badgeDefinition,
   blockquoteDefinition,
   buttonDefinition,
+  buttonSubmitDefinition,
   buttonTypeTrait,
   checkboxDefinition,
   citeTrait,
@@ -2293,42 +4408,68 @@ export {
   coreComponentDefinitions,
   createDefaultComponentRegistry,
   defaultCheckedTrait,
+  defaultSelectedTrait,
   defaultValueTrait,
   disabledTrait,
   extractComponentRequirements,
   fieldNameTrait,
+  fileUploadDefinition,
   formDefinition,
   headingDefinition,
+  helperTextTrait,
   hrefTrait,
   htmlEmbedDefinition,
   iconDefinition,
   idTrait,
   imageDefinition,
+  indeterminateTrait,
   inputDefinition,
   inputTypeTrait,
   isBindableField,
+  labelTextTrait,
   linkDefinition,
   listDefinition,
   listItemDefinition,
+  loadingTextTrait,
   loadingTrait,
   loopTrait,
+  maxCharCountTrait,
+  maxFileSizeTrait,
+  maxLengthTrait,
   methodTrait,
+  minLengthTrait,
+  multipleTrait,
   mutedTrait,
+  optionsListTrait,
+  orientationTrait,
   pageDefinition,
   paragraphDefinition,
+  patternTrait,
   placeholderTrait,
   posterTrait,
+  prefixIconTrait,
+  preventDefaultTrait,
   primitiveTypeForField,
   radioDefinition,
+  radioGroupDefinition,
+  radioItemDefinition,
   readOnlyTrait,
   relTrait,
   requiredTrait,
+  resetOnSubmitTrait,
+  resizeTrait,
   rowSpanTrait,
   rowsTrait,
+  scrollToFirstErrorTrait,
   sectionDefinition,
   selectDefinition,
+  showPreviewTrait,
+  showSpinnerTrait,
   sortTraits,
   srcTrait,
+  suffixIconTrait,
+  switchDefinition,
+  switchSizeTrait,
   tableCellDefinition,
   tableDefinition,
   tableRowDefinition,