@kubuild/components 0.2.0 → 0.3.0

package/dist/index.cjs

@@ -18,12 +18,17 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
+  CONTENT_CHILD_TYPES: () => CONTENT_CHILD_TYPES,
   ComponentRegistry: () => ComponentRegistry,
+  FORM_STARTER_BLOCKS: () => FORM_STARTER_BLOCKS,
+  LAYOUT_PARENTS: () => LAYOUT_PARENTS,
+  LAYOUT_STARTER_BLOCKS: () => LAYOUT_STARTER_BLOCKS,
   STARTER_BLOCKS: () => STARTER_BLOCKS,
   TRAIT_GROUP_LABELS: () => TRAIT_GROUP_LABELS,
   TRAIT_GROUP_ORDER: () => TRAIT_GROUP_ORDER,
+  UI_STARTER_BLOCKS: () => UI_STARTER_BLOCKS,
   acceptTrait: () => acceptTrait,
   actionTrait: () => actionTrait,
   altTrait: () => altTrait,
@@ -41,6 +46,7 @@ __export(index_exports, {
   citeTrait: () => citeTrait,
   codeBlockDefinition: () => codeBlockDefinition,
   colSpanTrait: () => colSpanTrait,
+  collapsibleDefinition: () => collapsibleDefinition,
   collectTraitNames: () => collectTraitNames,
   collectionDefinition: () => collectionDefinition,
   columnsDefinition: () => columnsDefinition,
@@ -49,13 +55,17 @@ __export(index_exports, {
   coreComponentDefinitions: () => coreComponentDefinitions,
   createDefaultComponentRegistry: () => createDefaultComponentRegistry,
   defaultCheckedTrait: () => defaultCheckedTrait,
+  defaultGenId: () => defaultGenId,
   defaultSelectedTrait: () => defaultSelectedTrait,
   defaultValueTrait: () => defaultValueTrait,
   disabledTrait: () => disabledTrait,
+  drawerDefinition: () => drawerDefinition,
   extractComponentRequirements: () => extractComponentRequirements,
   fieldNameTrait: () => fieldNameTrait,
   fileUploadDefinition: () => fileUploadDefinition,
+  flexDefinition: () => flexDefinition,
   formDefinition: () => formDefinition,
+  gridDefinition: () => gridDefinition,
   headingDefinition: () => headingDefinition,
   helperTextTrait: () => helperTextTrait,
   hrefTrait: () => hrefTrait,
@@ -79,6 +89,7 @@ __export(index_exports, {
   maxLengthTrait: () => maxLengthTrait,
   methodTrait: () => methodTrait,
   minLengthTrait: () => minLengthTrait,
+  modalDefinition: () => modalDefinition,
   multipleTrait: () => multipleTrait,
   mutedTrait: () => mutedTrait,
   optionsListTrait: () => optionsListTrait,
@@ -120,9 +131,10 @@ __export(index_exports, {
   textareaDefinition: () => textareaDefinition,
   titleTrait: () => titleTrait,
   valueTrait: () => valueTrait,
-  videoDefinition: () => videoDefinition
+  videoDefinition: () => videoDefinition,
+  withOverrides: () => withOverrides
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
 // src/registry.ts
 var ComponentRegistry = class {
@@ -215,10 +227,7 @@ var ComponentRegistry = class {
   }
 };
 
-// src/definitions.ts
-var import_schema = require("@kubuild/schema");
-
-// src/traits.ts
+// src/traits/types.ts
 var TRAIT_GROUP_ORDER = [
   "identity",
   "link",
@@ -240,64 +249,34 @@ var TRAIT_GROUP_LABELS = {
 function withOverrides(base, overrides) {
   return overrides ? { ...base, ...overrides } : base;
 }
-function hrefTrait(overrides) {
-  return withOverrides(
-    {
-      name: "href",
-      label: "Link URL",
-      type: "string",
-      defaultValue: "#",
-      attribute: "href",
-      group: "link",
-      description: "The destination URL the element navigates to when activated."
-    },
-    overrides
-  );
-}
-function targetTrait(overrides) {
-  return withOverrides(
-    {
-      name: "target",
-      label: "Open In",
-      type: "select",
-      defaultValue: "_self",
-      attribute: "target",
-      group: "link",
-      options: [
-        { label: "Same tab (_self)", value: "_self" },
-        { label: "New tab (_blank)", value: "_blank" },
-        { label: "Parent frame (_parent)", value: "_parent" },
-        { label: "Top frame (_top)", value: "_top" }
-      ],
-      description: "Where the linked resource should open."
-    },
-    overrides
-  );
+function sortTraits(traits) {
+  const groupRank = (group) => {
+    if (!group) return Number.MAX_SAFE_INTEGER;
+    const idx = TRAIT_GROUP_ORDER.indexOf(group);
+    return idx === -1 ? Number.MAX_SAFE_INTEGER : idx;
+  };
+  return [...traits].sort((a, b) => groupRank(a.group) - groupRank(b.group));
 }
-function relTrait(overrides) {
-  return withOverrides(
-    {
-      name: "rel",
-      label: "Relationship (rel)",
-      type: "string",
-      defaultValue: "",
-      attribute: "rel",
-      group: "link",
-      description: 'Space-separated relationship tokens (e.g. "noopener noreferrer").'
-    },
-    overrides
-  );
+function collectTraitNames(traitsList) {
+  const names = /* @__PURE__ */ new Set();
+  for (const traits of traitsList) {
+    for (const trait of traits) {
+      names.add(trait.name);
+    }
+  }
+  return Array.from(names);
 }
-function altTrait(overrides) {
+
+// src/traits/common.ts
+function idTrait(overrides) {
   return withOverrides(
     {
-      name: "alt",
-      label: "Alt Text",
+      name: "id",
+      label: "Element ID",
       type: "string",
-      attribute: "alt",
-      group: "accessibility",
-      required: true,
-      description: "Alternative text describing the media for screen readers and fallback."
+      attribute: "id",
+      group: "identity",
+      description: "A custom, document-unique identifier used for anchors, CSS, and scripting."
     },
     overrides
   );
@@ -315,19 +294,6 @@ function titleTrait(overrides) {
     overrides
   );
 }
-function placeholderTrait(overrides) {
-  return withOverrides(
-    {
-      name: "placeholder",
-      label: "Placeholder",
-      type: "string",
-      attribute: "placeholder",
-      group: "form",
-      description: "Hint text shown inside the control when it is empty."
-    },
-    overrides
-  );
-}
 function ariaLabelTrait(overrides) {
   return withOverrides(
     {
@@ -341,75 +307,58 @@ function ariaLabelTrait(overrides) {
     overrides
   );
 }
-function idTrait(overrides) {
-  return withOverrides(
-    {
-      name: "id",
-      label: "Element ID",
-      type: "string",
-      attribute: "id",
-      group: "identity",
-      description: "A custom, document-unique identifier used for anchors, CSS, and scripting."
-    },
-    overrides
-  );
-}
-function fieldNameTrait(overrides) {
+
+// src/traits/link.ts
+function hrefTrait(overrides) {
   return withOverrides(
     {
-      name: "name",
-      label: "Field Name",
+      name: "href",
+      label: "Link URL",
       type: "string",
-      attribute: "name",
-      group: "form",
-      required: true,
-      description: "The name submitted with the form data for this field."
-    },
-    overrides
-  );
-}
-function requiredTrait(overrides) {
-  return withOverrides(
-    {
-      name: "required",
-      label: "Required",
-      type: "boolean",
-      defaultValue: false,
-      attribute: "required",
-      group: "form",
-      description: "Whether the field must be filled before the form can be submitted."
+      defaultValue: "#",
+      attribute: "href",
+      group: "link",
+      description: "The destination URL the element navigates to when activated."
     },
     overrides
   );
 }
-function disabledTrait(overrides) {
+function targetTrait(overrides) {
   return withOverrides(
     {
-      name: "disabled",
-      label: "Disabled",
-      type: "boolean",
-      defaultValue: false,
-      attribute: "disabled",
-      group: "behavior",
-      description: "Disables the control so it cannot be focused or activated."
+      name: "target",
+      label: "Open In",
+      type: "select",
+      defaultValue: "_self",
+      attribute: "target",
+      group: "link",
+      options: [
+        { label: "Same tab (_self)", value: "_self" },
+        { label: "New tab (_blank)", value: "_blank" },
+        { label: "Parent frame (_parent)", value: "_parent" },
+        { label: "Top frame (_top)", value: "_top" }
+      ],
+      description: "Where the linked resource should open."
     },
     overrides
   );
 }
-function readOnlyTrait(overrides) {
+function relTrait(overrides) {
   return withOverrides(
     {
-      name: "readOnly",
-      label: "Read Only",
-      type: "boolean",
-      defaultValue: false,
-      attribute: "readonly",
-      group: "behavior",
-      description: "Prevents the user from modifying the control value."
+      name: "rel",
+      label: "Relationship (rel)",
+      type: "string",
+      defaultValue: "",
+      attribute: "rel",
+      group: "link",
+      description: 'Space-separated relationship tokens (e.g. "noopener noreferrer").'
     },
     overrides
   );
 }
+
+// src/traits/media.ts
 function srcTrait(overrides) {
   return withOverrides(
     {
@@ -424,6 +373,20 @@ function srcTrait(overrides) {
     overrides
   );
 }
+function altTrait(overrides) {
+  return withOverrides(
+    {
+      name: "alt",
+      label: "Alt Text",
+      type: "string",
+      attribute: "alt",
+      group: "accessibility",
+      required: true,
+      description: "Alternative text describing the media for screen readers and fallback."
+    },
+    overrides
+  );
+}
 function posterTrait(overrides) {
   return withOverrides(
     {
@@ -493,19 +456,6 @@ function mutedTrait(overrides) {
     overrides
   );
 }
-function citeTrait(overrides) {
-  return withOverrides(
-    {
-      name: "cite",
-      label: "Citation URL (cite)",
-      type: "string",
-      attribute: "cite",
-      group: "semantic",
-      description: "The URL of the source document the quote is taken from."
-    },
-    overrides
-  );
-}
 function loadingTrait(overrides) {
   return withOverrides(
     {
@@ -524,61 +474,188 @@ function loadingTrait(overrides) {
     overrides
   );
 }
-function actionTrait(overrides) {
+
+// src/traits/structure.ts
+function citeTrait(overrides) {
   return withOverrides(
     {
-      name: "action",
-      label: "Action URL",
+      name: "cite",
+      label: "Citation URL (cite)",
       type: "string",
-      attribute: "action",
-      group: "form",
-      description: "The URL the form data is submitted to."
+      attribute: "cite",
+      group: "semantic",
+      description: "The URL of the source document the quote is taken from."
     },
     overrides
   );
 }
-function methodTrait(overrides) {
+function colSpanTrait(overrides) {
   return withOverrides(
     {
-      name: "method",
-      label: "Method",
-      type: "select",
-      defaultValue: "POST",
-      attribute: "method",
-      group: "form",
-      options: [
-        { label: "POST", value: "POST" },
-        { label: "GET", value: "GET" }
-      ],
-      description: "The HTTP method used to submit the form."
+      name: "colSpan",
+      label: "Column Span (colSpan)",
+      type: "number",
+      defaultValue: 1,
+      attribute: "colspan",
+      group: "semantic",
+      description: "The number of columns the cell spans."
     },
     overrides
   );
 }
-function autoCompleteTrait(overrides) {
+function rowSpanTrait(overrides) {
   return withOverrides(
     {
-      name: "autoComplete",
-      label: "Auto Complete",
-      type: "select",
-      defaultValue: "on",
-      attribute: "autocomplete",
-      group: "form",
-      options: [
-        { label: "On", value: "on" },
-        { label: "Off", value: "off" }
-      ],
-      description: "Whether the browser may autofill values for this form."
+      name: "rowSpan",
+      label: "Row Span (rowSpan)",
+      type: "number",
+      defaultValue: 1,
+      attribute: "rowspan",
+      group: "semantic",
+      description: "The number of rows the cell spans."
     },
     overrides
   );
 }
-function valueTrait(overrides) {
+function tagTrait(overrides) {
   return withOverrides(
     {
-      name: "value",
-      label: "Value",
-      type: "string",
+      name: "tag",
+      label: "HTML Tag",
+      type: "select",
+      attribute: "tag",
+      group: "semantic",
+      description: "The semantic HTML tag the component renders as."
+    },
+    overrides
+  );
+}
+
+// src/traits/form.ts
+function placeholderTrait(overrides) {
+  return withOverrides(
+    {
+      name: "placeholder",
+      label: "Placeholder",
+      type: "string",
+      attribute: "placeholder",
+      group: "form",
+      description: "Hint text shown inside the control when it is empty."
+    },
+    overrides
+  );
+}
+function fieldNameTrait(overrides) {
+  return withOverrides(
+    {
+      name: "name",
+      label: "Field Name",
+      type: "string",
+      attribute: "name",
+      group: "form",
+      required: true,
+      description: "The name submitted with the form data for this field."
+    },
+    overrides
+  );
+}
+function requiredTrait(overrides) {
+  return withOverrides(
+    {
+      name: "required",
+      label: "Required",
+      type: "boolean",
+      defaultValue: false,
+      attribute: "required",
+      group: "form",
+      description: "Whether the field must be filled before the form can be submitted."
+    },
+    overrides
+  );
+}
+function disabledTrait(overrides) {
+  return withOverrides(
+    {
+      name: "disabled",
+      label: "Disabled",
+      type: "boolean",
+      defaultValue: false,
+      attribute: "disabled",
+      group: "behavior",
+      description: "Disables the control so it cannot be focused or activated."
+    },
+    overrides
+  );
+}
+function readOnlyTrait(overrides) {
+  return withOverrides(
+    {
+      name: "readOnly",
+      label: "Read Only",
+      type: "boolean",
+      defaultValue: false,
+      attribute: "readonly",
+      group: "behavior",
+      description: "Prevents the user from modifying the control value."
+    },
+    overrides
+  );
+}
+function actionTrait(overrides) {
+  return withOverrides(
+    {
+      name: "action",
+      label: "Action URL",
+      type: "string",
+      attribute: "action",
+      group: "form",
+      description: "The URL the form data is submitted to."
+    },
+    overrides
+  );
+}
+function methodTrait(overrides) {
+  return withOverrides(
+    {
+      name: "method",
+      label: "Method",
+      type: "select",
+      defaultValue: "POST",
+      attribute: "method",
+      group: "form",
+      options: [
+        { label: "POST", value: "POST" },
+        { label: "GET", value: "GET" }
+      ],
+      description: "The HTTP method used to submit the form."
+    },
+    overrides
+  );
+}
+function autoCompleteTrait(overrides) {
+  return withOverrides(
+    {
+      name: "autoComplete",
+      label: "Auto Complete",
+      type: "select",
+      defaultValue: "on",
+      attribute: "autocomplete",
+      group: "form",
+      options: [
+        { label: "On", value: "on" },
+        { label: "Off", value: "off" }
+      ],
+      description: "Whether the browser may autofill values for this form."
+    },
+    overrides
+  );
+}
+function valueTrait(overrides) {
+  return withOverrides(
+    {
+      name: "value",
+      label: "Value",
+      type: "string",
       attribute: "value",
       group: "form",
       description: "The value submitted with the form data when the control is selected."
@@ -627,47 +704,6 @@ function rowsTrait(overrides) {
     overrides
   );
 }
-function colSpanTrait(overrides) {
-  return withOverrides(
-    {
-      name: "colSpan",
-      label: "Column Span (colSpan)",
-      type: "number",
-      defaultValue: 1,
-      attribute: "colspan",
-      group: "semantic",
-      description: "The number of columns the cell spans."
-    },
-    overrides
-  );
-}
-function rowSpanTrait(overrides) {
-  return withOverrides(
-    {
-      name: "rowSpan",
-      label: "Row Span (rowSpan)",
-      type: "number",
-      defaultValue: 1,
-      attribute: "rowspan",
-      group: "semantic",
-      description: "The number of rows the cell spans."
-    },
-    overrides
-  );
-}
-function tagTrait(overrides) {
-  return withOverrides(
-    {
-      name: "tag",
-      label: "HTML Tag",
-      type: "select",
-      attribute: "tag",
-      group: "semantic",
-      description: "The semantic HTML tag the component renders as."
-    },
-    overrides
-  );
-}
 function inputTypeTrait(overrides) {
   return withOverrides(
     {
@@ -1036,26 +1072,9 @@ function autoDisableOnSubmitTrait(overrides) {
     overrides
   );
 }
-function sortTraits(traits) {
-  const groupRank = (group) => {
-    if (!group) return Number.MAX_SAFE_INTEGER;
-    const idx = TRAIT_GROUP_ORDER.indexOf(group);
-    return idx === -1 ? Number.MAX_SAFE_INTEGER : idx;
-  };
-  return [...traits].sort((a, b) => groupRank(a.group) - groupRank(b.group));
-}
-function collectTraitNames(traitsList) {
-  const names = /* @__PURE__ */ new Set();
-  for (const traits of traitsList) {
-    for (const trait of traits) {
-      names.add(trait.name);
-    }
-  }
-  return Array.from(names);
-}
 
-// src/definitions.ts
-var LAYOUT_PARENTS = ["page", "section", "container", "columns"];
+// src/definitions/constants.ts
+var LAYOUT_PARENTS = ["page", "section", "container", "columns", "flex", "grid", "modal", "drawer", "collapsible"];
 var CONTENT_CHILD_TYPES = [
   "heading",
   "text",
@@ -1083,8 +1102,13 @@ var CONTENT_CHILD_TYPES = [
   "list",
   "table",
   "collection",
-  "custom"
+  "custom",
+  "modal",
+  "drawer",
+  "collapsible"
 ];
+
+// src/definitions/layout/page.ts
 var pageDefinition = {
   type: "page",
   label: "Page",
@@ -1100,13 +1124,15 @@ var pageDefinition = {
   ],
   defaultStyles: { base: { minHeight: "100vh", backgroundColor: "#ffffff" } }
 };
+
+// src/definitions/layout/section.ts
 var sectionDefinition = {
   type: "section",
   label: "Section",
   category: "layout",
   icon: "rows",
   acceptsChildren: true,
-  allowedChildren: ["container", "columns", ...CONTENT_CHILD_TYPES],
+  allowedChildren: ["container", "columns", "flex", "grid", ...CONTENT_CHILD_TYPES],
   defaultProps: {},
   traits: [
     idTrait(),
@@ -1131,13 +1157,15 @@ var sectionDefinition = {
     }
   }
 };
+
+// src/definitions/layout/container.ts
 var containerDefinition = {
   type: "container",
   label: "Container",
   category: "layout",
   icon: "box",
   acceptsChildren: true,
-  allowedChildren: ["columns", ...CONTENT_CHILD_TYPES],
+  allowedChildren: ["columns", "flex", "grid", ...CONTENT_CHILD_TYPES],
   defaultProps: { maxWidth: "1200px" },
   traits: [
     idTrait()
@@ -1158,13 +1186,15 @@ var containerDefinition = {
     }
   }
 };
+
+// src/definitions/layout/columns.ts
 var columnsDefinition = {
   type: "columns",
   label: "Columns",
   category: "layout",
   icon: "columns",
   acceptsChildren: true,
-  allowedChildren: ["container", ...CONTENT_CHILD_TYPES],
+  allowedChildren: ["container", "flex", "grid", ...CONTENT_CHILD_TYPES],
   defaultProps: { columns: 2, gap: "16px" },
   traits: [
     idTrait()
@@ -1185,6 +1215,66 @@ var columnsDefinition = {
     }
   }
 };
+
+// src/definitions/layout/flex.ts
+var flexDefinition = {
+  type: "flex",
+  label: "Flex",
+  category: "layout",
+  icon: "flex",
+  acceptsChildren: true,
+  allowedChildren: ["*"],
+  disallowedParents: ["page"],
+  defaultProps: {},
+  traits: [
+    idTrait(),
+    ariaLabelTrait({ description: "Accessible name for the flex container." })
+  ],
+  defaultStyles: {
+    base: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "16px"
+    }
+  }
+};
+
+// src/definitions/layout/grid.ts
+var gridDefinition = {
+  type: "grid",
+  label: "Grid",
+  category: "layout",
+  icon: "grid",
+  acceptsChildren: true,
+  allowedChildren: ["*"],
+  disallowedParents: ["page"],
+  defaultProps: {
+    columns: 3,
+    gap: "16px"
+  },
+  traits: [
+    idTrait(),
+    ariaLabelTrait({ description: "Accessible name for the grid container." })
+  ],
+  defaultStyles: {
+    base: {
+      display: "grid",
+      gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+      gap: "16px"
+    },
+    tablet: {
+      gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+      gap: "16px"
+    },
+    mobile: {
+      gridTemplateColumns: "repeat(1, minmax(0, 1fr))",
+      gap: "16px"
+    }
+  }
+};
+
+// src/definitions/typography/heading.ts
+var import_schema = require("@kubuild/schema");
 var headingDefinition = {
   type: "heading",
   label: "Heading",
@@ -1226,6 +1316,9 @@ var headingDefinition = {
     }
   }
 };
+
+// src/definitions/typography/text.ts
+var import_schema2 = require("@kubuild/schema");
 var textDefinition = {
   type: "text",
   label: "Text",
@@ -1242,7 +1335,7 @@ var textDefinition = {
     ariaLabelTrait()
   ],
   validateProps: (props) => {
-    if (!(0, import_schema.isVariableBinding)(props.content) && (typeof props.content !== "string" || props.content.trim().length === 0)) {
+    if (!(0, import_schema2.isVariableBinding)(props.content) && (typeof props.content !== "string" || props.content.trim().length === 0)) {
       return ['Text requires a non-empty "content".'];
     }
     return true;
@@ -1255,453 +1348,189 @@ var textDefinition = {
     }
   }
 };
-var imageDefinition = {
-  type: "image",
-  label: "Image",
-  category: "media",
-  icon: "image",
+
+// src/definitions/typography/paragraph.ts
+var import_schema3 = require("@kubuild/schema");
+var paragraphDefinition = {
+  type: "paragraph",
+  label: "Paragraph",
+  category: "typography",
+  icon: "paragraph",
   acceptsChildren: false,
-  capabilities: ["assetProvider"],
   defaultProps: {
-    src: "https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=800&auto=format&fit=crop&q=80",
-    alt: "Default image",
-    width: 600,
-    height: 400
+    text: "A paragraph of text with clean semantic typography."
   },
   propFields: [
-    { name: "src", label: "Image URL", type: "string" },
-    { name: "asset", label: "Asset Reference", type: "json" },
-    { name: "alt", label: "Alt Text", type: "string", defaultValue: "Default image" },
-    { name: "width", label: "Width", type: "number" },
-    { name: "height", label: "Height", type: "number" }
+    {
+      name: "text",
+      label: "Text",
+      type: "string",
+      defaultValue: "A paragraph of text with clean semantic typography."
+    }
   ],
   traits: [
-    srcTrait(),
-    altTrait({ defaultValue: "Default image" }),
-    loadingTrait(),
     idTrait(),
     titleTrait(),
-    ariaLabelTrait({ description: "Override the alt text for assistive technology (rarely needed)." })
+    ariaLabelTrait()
   ],
   validateProps: (props) => {
     const errors = [];
-    const hasSrc = typeof props.src === "string" && props.src.trim().length > 0 || (0, import_schema.isVariableBinding)(props.src);
-    const hasAsset = (0, import_schema.isAssetReference)(props.asset);
-    if (!hasSrc && !hasAsset) {
-      errors.push('Image requires either a non-empty "src" URL or a valid "asset" reference.');
-    }
-    const hasAlt = typeof props.alt === "string" && props.alt.trim().length > 0 || (0, import_schema.isVariableBinding)(props.alt);
-    if (!hasAlt) {
-      errors.push('Image requires non-empty "alt" text.');
+    const textVal = props.text ?? props.content;
+    if (textVal !== void 0 && !(0, import_schema3.isVariableBinding)(textVal) && (typeof textVal !== "string" || textVal.trim().length === 0)) {
+      errors.push('Paragraph requires a non-empty "text".');
     }
     return errors.length > 0 ? errors : true;
   },
   defaultStyles: {
     base: {
-      maxWidth: "100%",
-      height: "auto",
-      borderRadius: "8px"
+      fontSize: "16px",
+      color: "#4b5563",
+      lineHeight: "1.6",
+      margin: "0 0 16px 0"
     }
   }
 };
-var buttonDefinition = {
-  type: "button",
-  label: "Button",
-  category: "interactive",
-  icon: "mouse-pointer",
+
+// src/definitions/typography/link.ts
+var import_schema4 = require("@kubuild/schema");
+var linkDefinition = {
+  type: "link",
+  label: "Link",
+  category: "typography",
+  icon: "link",
   acceptsChildren: false,
-  capabilities: ["actionRegistry"],
   defaultProps: {
-    label: "Click Me",
-    variant: "primary"
+    text: "Click here",
+    href: "#",
+    target: "_self",
+    rel: ""
   },
   propFields: [
-    { name: "label", label: "Label", type: "string", defaultValue: "Click Me" },
-    { name: "href", label: "Link URL", type: "string" },
-    { name: "action", label: "Action", type: "action" },
-    { name: "disabled", label: "Disabled", type: "boolean", defaultValue: false },
+    { name: "text", label: "Link Text", type: "string", defaultValue: "Click here" },
+    { name: "href", label: "URL (href)", type: "string", defaultValue: "#" },
     {
-      name: "buttonType",
-      label: "Button Type",
+      name: "target",
+      label: "Target",
       type: "select",
-      defaultValue: "button",
+      defaultValue: "_self",
       options: [
-        { label: "Button", value: "button" },
-        { label: "Submit Form (submit)", value: "submit" },
-        { label: "Reset Form (reset)", value: "reset" }
+        { label: "Same tab (_self)", value: "_self" },
+        { label: "New tab (_blank)", value: "_blank" },
+        { label: "Parent (_parent)", value: "_parent" },
+        { label: "Top (_top)", value: "_top" }
       ]
     },
-    {
-      name: "variant",
-      label: "Variant",
-      type: "select",
-      defaultValue: "primary",
-      options: [
-        { label: "Primary", value: "primary" },
-        { label: "Secondary", value: "secondary" }
-      ]
-    }
+    { name: "rel", label: "Relationship (rel)", type: "string", defaultValue: "" }
   ],
   traits: [
-    buttonTypeTrait(),
-    disabledTrait(),
-    hrefTrait({ description: "Optional URL \u2014 when set, the button renders as an anchor styled like a button." }),
-    targetTrait({ description: "Where to open the href URL (only used when href is set)." }),
-    relTrait({ description: "Relationship tokens (only used when href is set)." }),
+    hrefTrait(),
+    targetTrait(),
+    relTrait(),
     idTrait(),
-    titleTrait(),
+    titleTrait({ description: "Advisory title shown when hovering the link." }),
     ariaLabelTrait()
   ],
   validateProps: (props) => {
     const errors = [];
-    const hasLabel = typeof props.label === "string" && props.label.trim().length > 0 || (0, import_schema.isVariableBinding)(props.label);
-    if (!hasLabel) {
-      errors.push('Button requires a non-empty "label".');
+    if (props.text !== void 0 && !(0, import_schema4.isVariableBinding)(props.text) && (typeof props.text !== "string" || props.text.trim().length === 0)) {
+      errors.push('Link requires a non-empty "text".');
     }
-    if (props.href !== void 0 && typeof props.href !== "string" && !(0, import_schema.isVariableBinding)(props.href)) {
-      errors.push('Button "href" must be a string when provided.');
+    if (props.href !== void 0 && typeof props.href !== "string" && !(0, import_schema4.isVariableBinding)(props.href)) {
+      errors.push('Link "href" must be a string when provided.');
     }
-    if (props.buttonType !== void 0 && !(0, import_schema.isVariableBinding)(props.buttonType)) {
-      if (!["button", "submit", "reset"].includes(props.buttonType)) {
-        errors.push('Button "buttonType" must be one of: "button", "submit", "reset".');
+    if (props.target !== void 0 && !(0, import_schema4.isVariableBinding)(props.target)) {
+      const allowedTargets = ["_self", "_blank", "_parent", "_top"];
+      if (typeof props.target !== "string" || !allowedTargets.includes(props.target)) {
+        errors.push(`Link "target" must be one of: ${allowedTargets.join(", ")}.`);
       }
     }
-    if (props.action !== void 0 && !(0, import_schema.isActionBinding)(props.action)) {
-      errors.push('Button "action" must be a valid action binding when provided.');
-    }
-    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !(0, import_schema.isVariableBinding)(props.disabled)) {
-      errors.push('Button "disabled" must be a boolean when provided.');
+    if (props.rel !== void 0 && typeof props.rel !== "string" && !(0, import_schema4.isVariableBinding)(props.rel)) {
+      errors.push('Link "rel" must be a string 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",
+      color: "#2563eb",
+      textDecoration: "underline",
       cursor: "pointer"
     }
   }
 };
-var collectionDefinition = {
-  type: "collection",
-  label: "Collection",
-  category: "data",
-  icon: "database",
-  acceptsChildren: true,
-  defaultProps: {
-    sourceKey: "items",
-    itemAlias: "item"
-  },
-  propFields: [
-    { name: "sourceKey", label: "Source Variable", type: "string", defaultValue: "items" },
-    { name: "itemAlias", label: "Item Alias", type: "string", defaultValue: "item" }
-  ],
-  traits: [
-    idTrait(),
-    ariaLabelTrait({ description: 'Accessible name summarizing the repeated collection (e.g. "Product list").' })
-  ]
-};
-var listDefinition = {
-  type: "list",
-  label: "List",
-  category: "typography",
-  icon: "list",
-  acceptsChildren: true,
-  allowedChildren: ["list-item"],
-  defaultProps: {
-    tag: "ul",
-    listStyleType: "disc"
-  },
-  defaultChildren: [
-    { type: "list-item", props: { text: "List item 1" } },
-    { type: "list-item", props: { text: "List item 2" } },
-    { type: "list-item", props: { text: "List item 3" } }
-  ],
-  propFields: [
-    {
-      name: "tag",
-      label: "Tag",
-      type: "select",
-      defaultValue: "ul",
-      options: [
-        { label: "Unordered (ul)", value: "ul" },
-        { label: "Ordered (ol)", value: "ol" }
-      ]
-    },
-    {
-      name: "listStyleType",
-      label: "List Style Type",
-      type: "select",
-      defaultValue: "disc",
-      options: [
-        { label: "Disc", value: "disc" },
-        { label: "Circle", value: "circle" },
-        { label: "Square", value: "square" },
-        { label: "Decimal", value: "decimal" },
-        { label: "None", value: "none" },
-        { label: "Custom Icon", value: "custom-icon" }
-      ]
-    }
-  ],
-  traits: [
-    idTrait(),
-    ariaLabelTrait({ description: 'Accessible name for the list (e.g. "Navigation menu", "Features").' })
-  ],
-  validateProps: (props) => {
-    const errors = [];
-    if (props.tag !== void 0 && !(0, import_schema.isVariableBinding)(props.tag)) {
-      if (props.tag !== "ul" && props.tag !== "ol") {
-        errors.push('List "tag" must be either "ul" or "ol".');
-      }
-    }
-    if (props.listStyleType !== void 0 && !(0, import_schema.isVariableBinding)(props.listStyleType)) {
-      const allowed = ["disc", "circle", "square", "decimal", "none", "custom-icon"];
-      if (typeof props.listStyleType !== "string" || !allowed.includes(props.listStyleType)) {
-        errors.push(`List "listStyleType" must be one of: ${allowed.join(", ")}.`);
-      }
-    }
-    return errors.length > 0 ? errors : true;
-  },
-  defaultStyles: {
-    base: {
-      margin: "0 0 16px 0",
-      paddingLeft: "24px"
-    }
-  }
-};
-var listItemDefinition = {
-  type: "list-item",
-  label: "List Item",
+
+// src/definitions/typography/blockquote.ts
+var import_schema5 = require("@kubuild/schema");
+var blockquoteDefinition = {
+  type: "blockquote",
+  label: "Blockquote",
   category: "typography",
-  icon: "list-item",
+  icon: "blockquote",
   acceptsChildren: true,
   allowedChildren: [
-    "heading",
-    "text",
     "paragraph",
+    "text",
+    "heading",
     "link",
-    "blockquote",
     "badge",
     "code-block",
     "image",
     "video",
     "icon",
     "html-embed",
-    "button",
-    "list",
     "custom"
   ],
   defaultProps: {
-    text: "List item"
+    text: "\u201CSimplicity is the soul of efficiency.\u201D"
   },
   propFields: [
     {
       name: "text",
-      label: "Text",
+      label: "Quote Text",
       type: "string",
-      defaultValue: "List item"
-    }
+      defaultValue: "\u201CSimplicity is the soul of efficiency.\u201D"
+    },
+    { name: "cite", label: "Citation URL (cite)", type: "string" }
   ],
   traits: [
+    citeTrait(),
     idTrait(),
     titleTrait(),
     ariaLabelTrait()
   ],
   validateProps: (props) => {
     const errors = [];
-    if (props.text !== void 0 && typeof props.text !== "string" && !(0, import_schema.isVariableBinding)(props.text)) {
-      errors.push('List Item "text" must be a string when provided.');
+    if (props.text !== void 0 && typeof props.text !== "string" && !(0, import_schema5.isVariableBinding)(props.text)) {
+      errors.push('Blockquote "text" must be a string when provided.');
+    }
+    if (props.cite !== void 0 && typeof props.cite !== "string" && !(0, import_schema5.isVariableBinding)(props.cite)) {
+      errors.push('Blockquote "cite" must be a string when provided.');
     }
     return errors.length > 0 ? errors : true;
   },
   defaultStyles: {
     base: {
-      margin: "4px 0",
-      fontSize: "16px",
-      color: "#374151",
-      lineHeight: "1.5"
+      borderLeftWidth: "4px",
+      borderLeftColor: "#3b82f6",
+      borderLeftStyle: "solid",
+      paddingTop: "8px",
+      paddingBottom: "8px",
+      paddingLeft: "16px",
+      paddingRight: "12px",
+      margin: "0 0 16px 0",
+      fontStyle: "italic",
+      color: "#4b5563",
+      backgroundColor: "#f8fafc"
     }
   }
 };
-var paragraphDefinition = {
-  type: "paragraph",
-  label: "Paragraph",
+
+// src/definitions/typography/badge.ts
+var import_schema6 = require("@kubuild/schema");
+var badgeDefinition = {
+  type: "badge",
+  label: "Badge",
   category: "typography",
-  icon: "paragraph",
-  acceptsChildren: false,
-  defaultProps: {
-    text: "A paragraph of text with clean semantic typography."
-  },
-  propFields: [
-    {
-      name: "text",
-      label: "Text",
-      type: "string",
-      defaultValue: "A paragraph of text with clean semantic typography."
-    }
-  ],
-  traits: [
-    idTrait(),
-    titleTrait(),
-    ariaLabelTrait()
-  ],
-  validateProps: (props) => {
-    const errors = [];
-    const textVal = props.text ?? props.content;
-    if (textVal !== void 0 && !(0, import_schema.isVariableBinding)(textVal) && (typeof textVal !== "string" || textVal.trim().length === 0)) {
-      errors.push('Paragraph requires a non-empty "text".');
-    }
-    return errors.length > 0 ? errors : true;
-  },
-  defaultStyles: {
-    base: {
-      fontSize: "16px",
-      color: "#4b5563",
-      lineHeight: "1.6",
-      margin: "0 0 16px 0"
-    }
-  }
-};
-var linkDefinition = {
-  type: "link",
-  label: "Link",
-  category: "typography",
-  icon: "link",
-  acceptsChildren: false,
-  defaultProps: {
-    text: "Click here",
-    href: "#",
-    target: "_self",
-    rel: ""
-  },
-  propFields: [
-    { name: "text", label: "Link Text", type: "string", defaultValue: "Click here" },
-    { name: "href", label: "URL (href)", type: "string", defaultValue: "#" },
-    {
-      name: "target",
-      label: "Target",
-      type: "select",
-      defaultValue: "_self",
-      options: [
-        { label: "Same tab (_self)", value: "_self" },
-        { label: "New tab (_blank)", value: "_blank" },
-        { label: "Parent (_parent)", value: "_parent" },
-        { label: "Top (_top)", value: "_top" }
-      ]
-    },
-    { name: "rel", label: "Relationship (rel)", type: "string", defaultValue: "" }
-  ],
-  traits: [
-    hrefTrait(),
-    targetTrait(),
-    relTrait(),
-    idTrait(),
-    titleTrait({ description: "Advisory title shown when hovering the link." }),
-    ariaLabelTrait()
-  ],
-  validateProps: (props) => {
-    const errors = [];
-    if (props.text !== void 0 && !(0, import_schema.isVariableBinding)(props.text) && (typeof props.text !== "string" || props.text.trim().length === 0)) {
-      errors.push('Link requires a non-empty "text".');
-    }
-    if (props.href !== void 0 && typeof props.href !== "string" && !(0, import_schema.isVariableBinding)(props.href)) {
-      errors.push('Link "href" must be a string when provided.');
-    }
-    if (props.target !== void 0 && !(0, import_schema.isVariableBinding)(props.target)) {
-      const allowedTargets = ["_self", "_blank", "_parent", "_top"];
-      if (typeof props.target !== "string" || !allowedTargets.includes(props.target)) {
-        errors.push(`Link "target" must be one of: ${allowedTargets.join(", ")}.`);
-      }
-    }
-    if (props.rel !== void 0 && typeof props.rel !== "string" && !(0, import_schema.isVariableBinding)(props.rel)) {
-      errors.push('Link "rel" must be a string when provided.');
-    }
-    return errors.length > 0 ? errors : true;
-  },
-  defaultStyles: {
-    base: {
-      color: "#2563eb",
-      textDecoration: "underline",
-      cursor: "pointer"
-    }
-  }
-};
-var blockquoteDefinition = {
-  type: "blockquote",
-  label: "Blockquote",
-  category: "typography",
-  icon: "blockquote",
-  acceptsChildren: true,
-  allowedChildren: [
-    "paragraph",
-    "text",
-    "heading",
-    "link",
-    "badge",
-    "code-block",
-    "image",
-    "video",
-    "icon",
-    "html-embed",
-    "custom"
-  ],
-  defaultProps: {
-    text: "\u201CSimplicity is the soul of efficiency.\u201D"
-  },
-  propFields: [
-    {
-      name: "text",
-      label: "Quote Text",
-      type: "string",
-      defaultValue: "\u201CSimplicity is the soul of efficiency.\u201D"
-    },
-    { name: "cite", label: "Citation URL (cite)", type: "string" }
-  ],
-  traits: [
-    citeTrait(),
-    idTrait(),
-    titleTrait(),
-    ariaLabelTrait()
-  ],
-  validateProps: (props) => {
-    const errors = [];
-    if (props.text !== void 0 && typeof props.text !== "string" && !(0, import_schema.isVariableBinding)(props.text)) {
-      errors.push('Blockquote "text" must be a string when provided.');
-    }
-    if (props.cite !== void 0 && typeof props.cite !== "string" && !(0, import_schema.isVariableBinding)(props.cite)) {
-      errors.push('Blockquote "cite" must be a string when provided.');
-    }
-    return errors.length > 0 ? errors : true;
-  },
-  defaultStyles: {
-    base: {
-      borderLeftWidth: "4px",
-      borderLeftColor: "#3b82f6",
-      borderLeftStyle: "solid",
-      paddingTop: "8px",
-      paddingBottom: "8px",
-      paddingLeft: "16px",
-      paddingRight: "12px",
-      margin: "0 0 16px 0",
-      fontStyle: "italic",
-      color: "#4b5563",
-      backgroundColor: "#f8fafc"
-    }
-  }
-};
-var badgeDefinition = {
-  type: "badge",
-  label: "Badge",
-  category: "typography",
-  icon: "badge",
+  icon: "badge",
   acceptsChildren: false,
   defaultProps: {
     text: "Badge",
@@ -1730,10 +1559,10 @@ var badgeDefinition = {
   ],
   validateProps: (props) => {
     const errors = [];
-    if (props.text !== void 0 && !(0, import_schema.isVariableBinding)(props.text) && (typeof props.text !== "string" || props.text.trim().length === 0)) {
+    if (props.text !== void 0 && !(0, import_schema6.isVariableBinding)(props.text) && (typeof props.text !== "string" || props.text.trim().length === 0)) {
       errors.push('Badge requires a non-empty "text".');
     }
-    if (props.variant !== void 0 && typeof props.variant !== "string" && !(0, import_schema.isVariableBinding)(props.variant)) {
+    if (props.variant !== void 0 && typeof props.variant !== "string" && !(0, import_schema6.isVariableBinding)(props.variant)) {
       errors.push('Badge "variant" must be a string.');
     }
     return errors.length > 0 ? errors : true;
@@ -1755,6 +1584,9 @@ var badgeDefinition = {
     }
   }
 };
+
+// src/definitions/typography/code-block.ts
+var import_schema7 = require("@kubuild/schema");
 var codeBlockDefinition = {
   type: "code-block",
   label: "Code Block",
@@ -1786,10 +1618,10 @@ var codeBlockDefinition = {
   ],
   validateProps: (props) => {
     const errors = [];
-    if (props.code !== void 0 && typeof props.code !== "string" && !(0, import_schema.isVariableBinding)(props.code)) {
+    if (props.code !== void 0 && typeof props.code !== "string" && !(0, import_schema7.isVariableBinding)(props.code)) {
       errors.push('Code Block "code" must be a string when provided.');
     }
-    if (props.language !== void 0 && typeof props.language !== "string" && !(0, import_schema.isVariableBinding)(props.language)) {
+    if (props.language !== void 0 && typeof props.language !== "string" && !(0, import_schema7.isVariableBinding)(props.language)) {
       errors.push('Code Block "language" must be a string when provided.');
     }
     return errors.length > 0 ? errors : true;
@@ -1809,6 +1641,61 @@ var codeBlockDefinition = {
     }
   }
 };
+
+// src/definitions/media/image.ts
+var import_schema8 = require("@kubuild/schema");
+var imageDefinition = {
+  type: "image",
+  label: "Image",
+  category: "media",
+  icon: "image",
+  acceptsChildren: false,
+  capabilities: ["assetProvider"],
+  defaultProps: {
+    src: "https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=800&auto=format&fit=crop&q=80",
+    alt: "Default image",
+    width: 600,
+    height: 400
+  },
+  propFields: [
+    { name: "src", label: "Image URL", type: "string" },
+    { name: "asset", label: "Asset Reference", type: "json" },
+    { name: "alt", label: "Alt Text", type: "string", defaultValue: "Default image" },
+    { name: "width", label: "Width", type: "number" },
+    { name: "height", label: "Height", type: "number" }
+  ],
+  traits: [
+    srcTrait(),
+    altTrait({ defaultValue: "Default image" }),
+    loadingTrait(),
+    idTrait(),
+    titleTrait(),
+    ariaLabelTrait({ description: "Override the alt text for assistive technology (rarely needed)." })
+  ],
+  validateProps: (props) => {
+    const errors = [];
+    const hasSrc = typeof props.src === "string" && props.src.trim().length > 0 || (0, import_schema8.isVariableBinding)(props.src);
+    const hasAsset = (0, import_schema8.isAssetReference)(props.asset);
+    if (!hasSrc && !hasAsset) {
+      errors.push('Image requires either a non-empty "src" URL or a valid "asset" reference.');
+    }
+    const hasAlt = typeof props.alt === "string" && props.alt.trim().length > 0 || (0, import_schema8.isVariableBinding)(props.alt);
+    if (!hasAlt) {
+      errors.push('Image requires non-empty "alt" text.');
+    }
+    return errors.length > 0 ? errors : true;
+  },
+  defaultStyles: {
+    base: {
+      maxWidth: "100%",
+      height: "auto",
+      borderRadius: "8px"
+    }
+  }
+};
+
+// src/definitions/media/video.ts
+var import_schema9 = require("@kubuild/schema");
 var videoDefinition = {
   type: "video",
   label: "Video",
@@ -1876,25 +1763,25 @@ var videoDefinition = {
   ],
   validateProps: (props) => {
     const errors = [];
-    if (props.src !== void 0 && typeof props.src !== "string" && !(0, import_schema.isVariableBinding)(props.src)) {
+    if (props.src !== void 0 && typeof props.src !== "string" && !(0, import_schema9.isVariableBinding)(props.src)) {
       errors.push('Video "src" must be a string when provided.');
     }
-    if (props.provider !== void 0 && !(0, import_schema.isVariableBinding)(props.provider)) {
+    if (props.provider !== void 0 && !(0, import_schema9.isVariableBinding)(props.provider)) {
       const allowed = ["auto", "html5", "youtube", "vimeo"];
       if (typeof props.provider !== "string" || !allowed.includes(props.provider)) {
         errors.push(`Video "provider" must be one of: ${allowed.join(", ")}.`);
       }
     }
-    if (props.controls !== void 0 && typeof props.controls !== "boolean" && !(0, import_schema.isVariableBinding)(props.controls)) {
+    if (props.controls !== void 0 && typeof props.controls !== "boolean" && !(0, import_schema9.isVariableBinding)(props.controls)) {
       errors.push('Video "controls" must be a boolean.');
     }
-    if (props.autoplay !== void 0 && typeof props.autoplay !== "boolean" && !(0, import_schema.isVariableBinding)(props.autoplay)) {
+    if (props.autoplay !== void 0 && typeof props.autoplay !== "boolean" && !(0, import_schema9.isVariableBinding)(props.autoplay)) {
       errors.push('Video "autoplay" must be a boolean.');
     }
-    if (props.loop !== void 0 && typeof props.loop !== "boolean" && !(0, import_schema.isVariableBinding)(props.loop)) {
+    if (props.loop !== void 0 && typeof props.loop !== "boolean" && !(0, import_schema9.isVariableBinding)(props.loop)) {
       errors.push('Video "loop" must be a boolean.');
     }
-    if (props.muted !== void 0 && typeof props.muted !== "boolean" && !(0, import_schema.isVariableBinding)(props.muted)) {
+    if (props.muted !== void 0 && typeof props.muted !== "boolean" && !(0, import_schema9.isVariableBinding)(props.muted)) {
       errors.push('Video "muted" must be a boolean.');
     }
     return errors.length > 0 ? errors : true;
@@ -1910,6 +1797,9 @@ var videoDefinition = {
     }
   }
 };
+
+// src/definitions/media/icon.ts
+var import_schema10 = require("@kubuild/schema");
 var iconDefinition = {
   type: "icon",
   label: "Icon",
@@ -1935,15 +1825,15 @@ var iconDefinition = {
   ],
   validateProps: (props) => {
     const errors = [];
-    if (props.name !== void 0 && !(0, import_schema.isVariableBinding)(props.name) && (typeof props.name !== "string" || props.name.trim().length === 0)) {
+    if (props.name !== void 0 && !(0, import_schema10.isVariableBinding)(props.name) && (typeof props.name !== "string" || props.name.trim().length === 0)) {
       errors.push('Icon requires a non-empty "name".');
     }
-    if (props.size !== void 0 && !(0, import_schema.isVariableBinding)(props.size)) {
+    if (props.size !== void 0 && !(0, import_schema10.isVariableBinding)(props.size)) {
       if (typeof props.size !== "number" || props.size < 0) {
         errors.push('Icon "size" must be a non-negative number.');
       }
     }
-    if (props.strokeWidth !== void 0 && !(0, import_schema.isVariableBinding)(props.strokeWidth)) {
+    if (props.strokeWidth !== void 0 && !(0, import_schema10.isVariableBinding)(props.strokeWidth)) {
       if (typeof props.strokeWidth !== "number" || props.strokeWidth < 0) {
         errors.push('Icon "strokeWidth" must be a non-negative number.');
       }
@@ -1958,6 +1848,9 @@ var iconDefinition = {
     }
   }
 };
+
+// src/definitions/media/html-embed.ts
+var import_schema11 = require("@kubuild/schema");
 var htmlEmbedDefinition = {
   type: "html-embed",
   label: "HTML Embed",
@@ -1981,7 +1874,7 @@ var htmlEmbedDefinition = {
   ],
   validateProps: (props) => {
     const errors = [];
-    if (props.html !== void 0 && typeof props.html !== "string" && !(0, import_schema.isVariableBinding)(props.html)) {
+    if (props.html !== void 0 && typeof props.html !== "string" && !(0, import_schema11.isVariableBinding)(props.html)) {
       errors.push('HTML Embed "html" must be a string.');
     }
     return errors.length > 0 ? errors : true;
@@ -1993,6 +1886,9 @@ var htmlEmbedDefinition = {
     }
   }
 };
+
+// src/definitions/data/table.ts
+var import_schema12 = require("@kubuild/schema");
 var tableDefinition = {
   type: "table",
   label: "Table",
@@ -2032,13 +1928,13 @@ var tableDefinition = {
   ],
   validateProps: (props) => {
     const errors = [];
-    if (props.striped !== void 0 && typeof props.striped !== "boolean" && !(0, import_schema.isVariableBinding)(props.striped)) {
+    if (props.striped !== void 0 && typeof props.striped !== "boolean" && !(0, import_schema12.isVariableBinding)(props.striped)) {
       errors.push('Table "striped" must be a boolean.');
     }
-    if (props.bordered !== void 0 && typeof props.bordered !== "boolean" && !(0, import_schema.isVariableBinding)(props.bordered)) {
+    if (props.bordered !== void 0 && typeof props.bordered !== "boolean" && !(0, import_schema12.isVariableBinding)(props.bordered)) {
       errors.push('Table "bordered" must be a boolean.');
     }
-    if (props.compact !== void 0 && typeof props.compact !== "boolean" && !(0, import_schema.isVariableBinding)(props.compact)) {
+    if (props.compact !== void 0 && typeof props.compact !== "boolean" && !(0, import_schema12.isVariableBinding)(props.compact)) {
       errors.push('Table "compact" must be a boolean.');
     }
     return errors.length > 0 ? errors : true;
@@ -2095,64 +1991,412 @@ var tableCellDefinition = {
   ],
   disallowedParents: ["page"],
   defaultProps: {
-    tag: "td",
-    text: "Cell",
-    colSpan: 1,
-    rowSpan: 1
+    tag: "td",
+    text: "Cell",
+    colSpan: 1,
+    rowSpan: 1
+  },
+  propFields: [
+    {
+      name: "tag",
+      label: "Cell Type",
+      type: "select",
+      defaultValue: "td",
+      options: [
+        { label: "Data Cell (td)", value: "td" },
+        { label: "Header Cell (th)", value: "th" }
+      ]
+    },
+    { name: "text", label: "Text", type: "string", defaultValue: "Cell" },
+    { name: "colSpan", label: "Column Span (colSpan)", type: "number", defaultValue: 1 },
+    { name: "rowSpan", label: "Row Span (rowSpan)", type: "number", defaultValue: 1 }
+  ],
+  traits: [
+    colSpanTrait(),
+    rowSpanTrait(),
+    idTrait(),
+    ariaLabelTrait()
+  ],
+  validateProps: (props) => {
+    const errors = [];
+    if (props.tag !== void 0 && !(0, import_schema12.isVariableBinding)(props.tag)) {
+      if (props.tag !== "td" && props.tag !== "th") {
+        errors.push('Table Cell "tag" must be either "td" or "th".');
+      }
+    }
+    if (props.colSpan !== void 0 && !(0, import_schema12.isVariableBinding)(props.colSpan)) {
+      if (typeof props.colSpan !== "number" || props.colSpan < 1 || !Number.isInteger(props.colSpan)) {
+        errors.push('Table Cell "colSpan" must be a positive integer (>= 1).');
+      }
+    }
+    if (props.rowSpan !== void 0 && !(0, import_schema12.isVariableBinding)(props.rowSpan)) {
+      if (typeof props.rowSpan !== "number" || props.rowSpan < 1 || !Number.isInteger(props.rowSpan)) {
+        errors.push('Table Cell "rowSpan" must be a positive integer (>= 1).');
+      }
+    }
+    if (props.text !== void 0 && typeof props.text !== "string" && !(0, import_schema12.isVariableBinding)(props.text)) {
+      errors.push('Table Cell "text" must be a string when provided.');
+    }
+    return errors.length > 0 ? errors : true;
+  },
+  defaultStyles: {
+    base: {
+      padding: "8px 12px",
+      borderWidth: "1px",
+      borderColor: "#e2e8f0",
+      borderStyle: "solid",
+      textAlign: "left"
+    }
+  }
+};
+
+// src/definitions/data/list.ts
+var import_schema13 = require("@kubuild/schema");
+var listDefinition = {
+  type: "list",
+  label: "List",
+  category: "typography",
+  icon: "list",
+  acceptsChildren: true,
+  allowedChildren: ["list-item"],
+  defaultProps: {
+    tag: "ul",
+    listStyleType: "disc"
+  },
+  defaultChildren: [
+    { type: "list-item", props: { text: "List item 1" } },
+    { type: "list-item", props: { text: "List item 2" } },
+    { type: "list-item", props: { text: "List item 3" } }
+  ],
+  propFields: [
+    {
+      name: "tag",
+      label: "Tag",
+      type: "select",
+      defaultValue: "ul",
+      options: [
+        { label: "Unordered (ul)", value: "ul" },
+        { label: "Ordered (ol)", value: "ol" }
+      ]
+    },
+    {
+      name: "listStyleType",
+      label: "List Style Type",
+      type: "select",
+      defaultValue: "disc",
+      options: [
+        { label: "Disc", value: "disc" },
+        { label: "Circle", value: "circle" },
+        { label: "Square", value: "square" },
+        { label: "Decimal", value: "decimal" },
+        { label: "None", value: "none" },
+        { label: "Custom Icon", value: "custom-icon" }
+      ]
+    }
+  ],
+  traits: [
+    idTrait(),
+    ariaLabelTrait({ description: 'Accessible name for the list (e.g. "Navigation menu", "Features").' })
+  ],
+  validateProps: (props) => {
+    const errors = [];
+    if (props.tag !== void 0 && !(0, import_schema13.isVariableBinding)(props.tag)) {
+      if (props.tag !== "ul" && props.tag !== "ol") {
+        errors.push('List "tag" must be either "ul" or "ol".');
+      }
+    }
+    if (props.listStyleType !== void 0 && !(0, import_schema13.isVariableBinding)(props.listStyleType)) {
+      const allowed = ["disc", "circle", "square", "decimal", "none", "custom-icon"];
+      if (typeof props.listStyleType !== "string" || !allowed.includes(props.listStyleType)) {
+        errors.push(`List "listStyleType" must be one of: ${allowed.join(", ")}.`);
+      }
+    }
+    return errors.length > 0 ? errors : true;
+  },
+  defaultStyles: {
+    base: {
+      margin: "0 0 16px 0",
+      paddingLeft: "24px"
+    }
+  }
+};
+var listItemDefinition = {
+  type: "list-item",
+  label: "List Item",
+  category: "typography",
+  icon: "list-item",
+  acceptsChildren: true,
+  allowedChildren: [
+    "heading",
+    "text",
+    "paragraph",
+    "link",
+    "blockquote",
+    "badge",
+    "code-block",
+    "image",
+    "video",
+    "icon",
+    "html-embed",
+    "button",
+    "list",
+    "custom"
+  ],
+  defaultProps: {
+    text: "List item"
+  },
+  propFields: [
+    {
+      name: "text",
+      label: "Text",
+      type: "string",
+      defaultValue: "List item"
+    }
+  ],
+  traits: [
+    idTrait(),
+    titleTrait(),
+    ariaLabelTrait()
+  ],
+  validateProps: (props) => {
+    const errors = [];
+    if (props.text !== void 0 && typeof props.text !== "string" && !(0, import_schema13.isVariableBinding)(props.text)) {
+      errors.push('List Item "text" must be a string when provided.');
+    }
+    return errors.length > 0 ? errors : true;
+  },
+  defaultStyles: {
+    base: {
+      margin: "4px 0",
+      fontSize: "16px",
+      color: "#374151",
+      lineHeight: "1.5"
+    }
+  }
+};
+
+// src/definitions/data/collection.ts
+var collectionDefinition = {
+  type: "collection",
+  label: "Collection",
+  category: "data",
+  icon: "database",
+  acceptsChildren: true,
+  defaultProps: {
+    sourceKey: "items",
+    itemAlias: "item"
+  },
+  propFields: [
+    { name: "sourceKey", label: "Source Variable", type: "string", defaultValue: "items" },
+    { name: "itemAlias", label: "Item Alias", type: "string", defaultValue: "item" }
+  ],
+  traits: [
+    idTrait(),
+    ariaLabelTrait({ description: 'Accessible name summarizing the repeated collection (e.g. "Product list").' })
+  ]
+};
+
+// src/definitions/form/button.ts
+var import_schema14 = require("@kubuild/schema");
+var buttonDefinition = {
+  type: "button",
+  label: "Button",
+  category: "interactive",
+  icon: "mouse-pointer",
+  acceptsChildren: false,
+  capabilities: ["actionRegistry"],
+  defaultProps: {
+    label: "Click Me",
+    variant: "primary"
+  },
+  propFields: [
+    { name: "label", label: "Label", type: "string", defaultValue: "Click Me" },
+    { name: "href", label: "Link URL", type: "string" },
+    { name: "action", label: "Action", type: "action" },
+    { name: "disabled", label: "Disabled", type: "boolean", defaultValue: false },
+    {
+      name: "buttonType",
+      label: "Button Type",
+      type: "select",
+      defaultValue: "button",
+      options: [
+        { label: "Button", value: "button" },
+        { 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" }
+      ]
+    }
+  ],
+  traits: [
+    buttonTypeTrait(),
+    disabledTrait(),
+    hrefTrait({ description: "Optional URL \u2014 when set, the button renders as an anchor styled like a button." }),
+    targetTrait({ description: "Where to open the href URL (only used when href is set)." }),
+    relTrait({ description: "Relationship tokens (only used when href is set)." }),
+    idTrait(),
+    titleTrait(),
+    ariaLabelTrait()
+  ],
+  validateProps: (props) => {
+    const errors = [];
+    const hasLabel = typeof props.label === "string" && props.label.trim().length > 0 || (0, import_schema14.isVariableBinding)(props.label);
+    if (!hasLabel) {
+      errors.push('Button requires a non-empty "label".');
+    }
+    if (props.href !== void 0 && typeof props.href !== "string" && !(0, import_schema14.isVariableBinding)(props.href)) {
+      errors.push('Button "href" must be a string when provided.');
+    }
+    if (props.buttonType !== void 0 && !(0, import_schema14.isVariableBinding)(props.buttonType)) {
+      if (!["button", "submit", "reset"].includes(props.buttonType)) {
+        errors.push('Button "buttonType" must be one of: "button", "submit", "reset".');
+      }
+    }
+    if (props.action !== void 0 && !(0, import_schema14.isActionBinding)(props.action)) {
+      errors.push('Button "action" must be a valid action binding when provided.');
+    }
+    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !(0, import_schema14.isVariableBinding)(props.disabled)) {
+      errors.push('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"
+    }
+  }
+};
+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: "tag",
-      label: "Cell Type",
+      name: "buttonType",
+      label: "Button Type",
       type: "select",
-      defaultValue: "td",
+      defaultValue: "submit",
       options: [
-        { label: "Data Cell (td)", value: "td" },
-        { label: "Header Cell (th)", value: "th" }
+        { label: "Submit Form (submit)", value: "submit" },
+        { label: "Reset Form (reset)", value: "reset" }
       ]
     },
-    { name: "text", label: "Text", type: "string", defaultValue: "Cell" },
-    { name: "colSpan", label: "Column Span (colSpan)", type: "number", defaultValue: 1 },
-    { name: "rowSpan", label: "Row Span (rowSpan)", type: "number", defaultValue: 1 }
+    {
+      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: [
-    colSpanTrait(),
-    rowSpanTrait(),
+    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 = [];
-    if (props.tag !== void 0 && !(0, import_schema.isVariableBinding)(props.tag)) {
-      if (props.tag !== "td" && props.tag !== "th") {
-        errors.push('Table Cell "tag" must be either "td" or "th".');
-      }
+    const hasLabel = typeof props.label === "string" && props.label.trim().length > 0 || (0, import_schema14.isVariableBinding)(props.label);
+    if (!hasLabel) {
+      errors.push('Submit Button requires a non-empty "label".');
     }
-    if (props.colSpan !== void 0 && !(0, import_schema.isVariableBinding)(props.colSpan)) {
-      if (typeof props.colSpan !== "number" || props.colSpan < 1 || !Number.isInteger(props.colSpan)) {
-        errors.push('Table Cell "colSpan" must be a positive integer (>= 1).');
-      }
+    if (props.loadingText !== void 0 && typeof props.loadingText !== "string" && !(0, import_schema14.isVariableBinding)(props.loadingText)) {
+      errors.push('Submit Button "loadingText" must be a string when provided.');
     }
-    if (props.rowSpan !== void 0 && !(0, import_schema.isVariableBinding)(props.rowSpan)) {
-      if (typeof props.rowSpan !== "number" || props.rowSpan < 1 || !Number.isInteger(props.rowSpan)) {
-        errors.push('Table Cell "rowSpan" must be a positive integer (>= 1).');
+    if (props.showSpinner !== void 0 && typeof props.showSpinner !== "boolean" && !(0, import_schema14.isVariableBinding)(props.showSpinner)) {
+      errors.push('Submit Button "showSpinner" must be a boolean when provided.');
+    }
+    if (props.autoDisableOnSubmit !== void 0 && typeof props.autoDisableOnSubmit !== "boolean" && !(0, import_schema14.isVariableBinding)(props.autoDisableOnSubmit)) {
+      errors.push('Submit Button "autoDisableOnSubmit" must be a boolean when provided.');
+    }
+    if (props.buttonType !== void 0 && !(0, import_schema14.isVariableBinding)(props.buttonType)) {
+      if (!["submit", "reset", "button"].includes(props.buttonType)) {
+        errors.push('Submit Button "buttonType" must be one of: "submit", "reset", "button".');
       }
     }
-    if (props.text !== void 0 && typeof props.text !== "string" && !(0, import_schema.isVariableBinding)(props.text)) {
-      errors.push('Table Cell "text" must be a string when provided.');
+    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !(0, import_schema14.isVariableBinding)(props.disabled)) {
+      errors.push('Submit Button "disabled" must be a boolean when provided.');
     }
     return errors.length > 0 ? errors : true;
   },
   defaultStyles: {
     base: {
-      padding: "8px 12px",
-      borderWidth: "1px",
-      borderColor: "#e2e8f0",
-      borderStyle: "solid",
-      textAlign: "left"
+      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"
     }
   }
 };
+
+// src/definitions/form/form.ts
+var import_schema15 = require("@kubuild/schema");
 var formDefinition = {
   type: "form",
   label: "Form",
@@ -2239,34 +2483,34 @@ var formDefinition = {
   ],
   validateProps: (props) => {
     const errors = [];
-    if (props.name !== void 0 && typeof props.name !== "string" && !(0, import_schema.isVariableBinding)(props.name)) {
+    if (props.name !== void 0 && typeof props.name !== "string" && !(0, import_schema15.isVariableBinding)(props.name)) {
       errors.push('Form "name" must be a string when provided.');
     }
-    if (props.action !== void 0 && typeof props.action !== "string" && !(0, import_schema.isVariableBinding)(props.action)) {
+    if (props.action !== void 0 && typeof props.action !== "string" && !(0, import_schema15.isVariableBinding)(props.action)) {
       errors.push('Form "action" must be a string when provided.');
     }
-    if (props.method !== void 0 && !(0, import_schema.isVariableBinding)(props.method)) {
+    if (props.method !== void 0 && !(0, import_schema15.isVariableBinding)(props.method)) {
       if (!["GET", "POST", "get", "post"].includes(props.method)) {
         errors.push('Form "method" must be either "GET" or "POST".');
       }
     }
-    if (props.target !== void 0 && !(0, import_schema.isVariableBinding)(props.target)) {
+    if (props.target !== void 0 && !(0, import_schema15.isVariableBinding)(props.target)) {
       if (!["_self", "_blank", "_parent", "_top"].includes(props.target)) {
         errors.push('Form "target" must be one of: "_self", "_blank", "_parent", "_top".');
       }
     }
-    if (props.autoComplete !== void 0 && !(0, import_schema.isVariableBinding)(props.autoComplete)) {
+    if (props.autoComplete !== void 0 && !(0, import_schema15.isVariableBinding)(props.autoComplete)) {
       if (!["on", "off"].includes(props.autoComplete)) {
         errors.push('Form "autoComplete" must be either "on" or "off".');
       }
     }
-    if (props.preventDefault !== void 0 && typeof props.preventDefault !== "boolean" && !(0, import_schema.isVariableBinding)(props.preventDefault)) {
+    if (props.preventDefault !== void 0 && typeof props.preventDefault !== "boolean" && !(0, import_schema15.isVariableBinding)(props.preventDefault)) {
       errors.push('Form "preventDefault" must be a boolean when provided.');
     }
-    if (props.scrollToFirstError !== void 0 && typeof props.scrollToFirstError !== "boolean" && !(0, import_schema.isVariableBinding)(props.scrollToFirstError)) {
+    if (props.scrollToFirstError !== void 0 && typeof props.scrollToFirstError !== "boolean" && !(0, import_schema15.isVariableBinding)(props.scrollToFirstError)) {
       errors.push('Form "scrollToFirstError" must be a boolean when provided.');
     }
-    if (props.resetOnSubmit !== void 0 && typeof props.resetOnSubmit !== "boolean" && !(0, import_schema.isVariableBinding)(props.resetOnSubmit)) {
+    if (props.resetOnSubmit !== void 0 && typeof props.resetOnSubmit !== "boolean" && !(0, import_schema15.isVariableBinding)(props.resetOnSubmit)) {
       errors.push('Form "resetOnSubmit" must be a boolean when provided.');
     }
     return errors.length > 0 ? errors : true;
@@ -2280,6 +2524,9 @@ var formDefinition = {
     }
   }
 };
+
+// src/definitions/form/input.ts
+var import_schema16 = require("@kubuild/schema");
 var inputDefinition = {
   type: "input",
   label: "Input",
@@ -2361,47 +2608,47 @@ var inputDefinition = {
   ],
   validateProps: (props) => {
     const errors = [];
-    if (props.name !== void 0 && typeof props.name !== "string" && !(0, import_schema.isVariableBinding)(props.name)) {
+    if (props.name !== void 0 && typeof props.name !== "string" && !(0, import_schema16.isVariableBinding)(props.name)) {
       errors.push('Input "name" must be a string when provided.');
     }
-    if (props.type !== void 0 && !(0, import_schema.isVariableBinding)(props.type)) {
+    if (props.type !== void 0 && !(0, import_schema16.isVariableBinding)(props.type)) {
       const validTypes = ["text", "email", "number", "password", "tel", "url", "search", "date", "hidden"];
       if (!validTypes.includes(props.type)) {
         errors.push(`Input "type" must be one of: ${validTypes.join(", ")}.`);
       }
     }
-    if (props.placeholder !== void 0 && typeof props.placeholder !== "string" && !(0, import_schema.isVariableBinding)(props.placeholder)) {
+    if (props.placeholder !== void 0 && typeof props.placeholder !== "string" && !(0, import_schema16.isVariableBinding)(props.placeholder)) {
       errors.push('Input "placeholder" must be a string when provided.');
     }
-    if (props.required !== void 0 && typeof props.required !== "boolean" && !(0, import_schema.isVariableBinding)(props.required)) {
+    if (props.required !== void 0 && typeof props.required !== "boolean" && !(0, import_schema16.isVariableBinding)(props.required)) {
       errors.push('Input "required" must be a boolean when provided.');
     }
-    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !(0, import_schema.isVariableBinding)(props.disabled)) {
+    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !(0, import_schema16.isVariableBinding)(props.disabled)) {
       errors.push('Input "disabled" must be a boolean when provided.');
     }
-    if (props.readOnly !== void 0 && typeof props.readOnly !== "boolean" && !(0, import_schema.isVariableBinding)(props.readOnly)) {
+    if (props.readOnly !== void 0 && typeof props.readOnly !== "boolean" && !(0, import_schema16.isVariableBinding)(props.readOnly)) {
       errors.push('Input "readOnly" must be a boolean when provided.');
     }
-    if (props.pattern !== void 0 && typeof props.pattern !== "string" && !(0, import_schema.isVariableBinding)(props.pattern)) {
+    if (props.pattern !== void 0 && typeof props.pattern !== "string" && !(0, import_schema16.isVariableBinding)(props.pattern)) {
       errors.push('Input "pattern" must be a string when provided.');
     }
-    if (props.minLength !== void 0 && !(0, import_schema.isVariableBinding)(props.minLength)) {
+    if (props.minLength !== void 0 && !(0, import_schema16.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 && !(0, import_schema.isVariableBinding)(props.maxLength)) {
+    if (props.maxLength !== void 0 && !(0, import_schema16.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" && !(0, import_schema.isVariableBinding)(props.prefixIcon)) {
+    if (props.prefixIcon !== void 0 && typeof props.prefixIcon !== "string" && !(0, import_schema16.isVariableBinding)(props.prefixIcon)) {
       errors.push('Input "prefixIcon" must be a string when provided.');
     }
-    if (props.suffixIcon !== void 0 && typeof props.suffixIcon !== "string" && !(0, import_schema.isVariableBinding)(props.suffixIcon)) {
+    if (props.suffixIcon !== void 0 && typeof props.suffixIcon !== "string" && !(0, import_schema16.isVariableBinding)(props.suffixIcon)) {
       errors.push('Input "suffixIcon" must be a string when provided.');
     }
-    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !(0, import_schema.isVariableBinding)(props.helperText)) {
+    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !(0, import_schema16.isVariableBinding)(props.helperText)) {
       errors.push('Input "helperText" must be a string when provided.');
     }
     return errors.length > 0 ? errors : true;
@@ -2424,6 +2671,9 @@ var inputDefinition = {
     }
   }
 };
+
+// src/definitions/form/textarea.ts
+var import_schema17 = require("@kubuild/schema");
 var textareaDefinition = {
   type: "textarea",
   label: "Textarea",
@@ -2485,41 +2735,41 @@ var textareaDefinition = {
   ],
   validateProps: (props) => {
     const errors = [];
-    if (props.name !== void 0 && typeof props.name !== "string" && !(0, import_schema.isVariableBinding)(props.name)) {
+    if (props.name !== void 0 && typeof props.name !== "string" && !(0, import_schema17.isVariableBinding)(props.name)) {
       errors.push('Textarea "name" must be a string when provided.');
     }
-    if (props.rows !== void 0 && !(0, import_schema.isVariableBinding)(props.rows)) {
+    if (props.rows !== void 0 && !(0, import_schema17.isVariableBinding)(props.rows)) {
       if (typeof props.rows !== "number" || props.rows < 1 || !Number.isInteger(props.rows)) {
         errors.push('Textarea "rows" must be a positive integer (>= 1).');
       }
     }
-    if (props.placeholder !== void 0 && typeof props.placeholder !== "string" && !(0, import_schema.isVariableBinding)(props.placeholder)) {
+    if (props.placeholder !== void 0 && typeof props.placeholder !== "string" && !(0, import_schema17.isVariableBinding)(props.placeholder)) {
       errors.push('Textarea "placeholder" must be a string when provided.');
     }
-    if (props.required !== void 0 && typeof props.required !== "boolean" && !(0, import_schema.isVariableBinding)(props.required)) {
+    if (props.required !== void 0 && typeof props.required !== "boolean" && !(0, import_schema17.isVariableBinding)(props.required)) {
       errors.push('Textarea "required" must be a boolean when provided.');
     }
-    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !(0, import_schema.isVariableBinding)(props.disabled)) {
+    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !(0, import_schema17.isVariableBinding)(props.disabled)) {
       errors.push('Textarea "disabled" must be a boolean when provided.');
     }
-    if (props.readOnly !== void 0 && typeof props.readOnly !== "boolean" && !(0, import_schema.isVariableBinding)(props.readOnly)) {
+    if (props.readOnly !== void 0 && typeof props.readOnly !== "boolean" && !(0, import_schema17.isVariableBinding)(props.readOnly)) {
       errors.push('Textarea "readOnly" must be a boolean when provided.');
     }
-    if (props.resize !== void 0 && !(0, import_schema.isVariableBinding)(props.resize)) {
+    if (props.resize !== void 0 && !(0, import_schema17.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" && !(0, import_schema.isVariableBinding)(props.autoGrow)) {
+    if (props.autoGrow !== void 0 && typeof props.autoGrow !== "boolean" && !(0, import_schema17.isVariableBinding)(props.autoGrow)) {
       errors.push('Textarea "autoGrow" must be a boolean when provided.');
     }
-    if (props.maxCharCount !== void 0 && !(0, import_schema.isVariableBinding)(props.maxCharCount)) {
+    if (props.maxCharCount !== void 0 && !(0, import_schema17.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" && !(0, import_schema.isVariableBinding)(props.helperText)) {
+    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !(0, import_schema17.isVariableBinding)(props.helperText)) {
       errors.push('Textarea "helperText" must be a string when provided.');
     }
     return errors.length > 0 ? errors : true;
@@ -2542,6 +2792,9 @@ var textareaDefinition = {
     }
   }
 };
+
+// src/definitions/form/select.ts
+var import_schema18 = require("@kubuild/schema");
 var selectDefinition = {
   type: "select",
   label: "Select",
@@ -2593,21 +2846,21 @@ var selectDefinition = {
   ],
   validateProps: (props) => {
     const errors = [];
-    if (props.name !== void 0 && typeof props.name !== "string" && !(0, import_schema.isVariableBinding)(props.name)) {
+    if (props.name !== void 0 && typeof props.name !== "string" && !(0, import_schema18.isVariableBinding)(props.name)) {
       errors.push('Select "name" must be a string when provided.');
     }
-    if (props.options !== void 0 && !(0, import_schema.isVariableBinding)(props.options)) {
+    if (props.options !== void 0 && !(0, import_schema18.isVariableBinding)(props.options)) {
       if (!Array.isArray(props.options) && typeof props.options !== "string") {
         errors.push('Select "options" must be an array of option objects or a JSON string.');
       }
     }
-    if (props.required !== void 0 && typeof props.required !== "boolean" && !(0, import_schema.isVariableBinding)(props.required)) {
+    if (props.required !== void 0 && typeof props.required !== "boolean" && !(0, import_schema18.isVariableBinding)(props.required)) {
       errors.push('Select "required" must be a boolean when provided.');
     }
-    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !(0, import_schema.isVariableBinding)(props.disabled)) {
+    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !(0, import_schema18.isVariableBinding)(props.disabled)) {
       errors.push('Select "disabled" must be a boolean when provided.');
     }
-    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !(0, import_schema.isVariableBinding)(props.helperText)) {
+    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !(0, import_schema18.isVariableBinding)(props.helperText)) {
       errors.push('Select "helperText" must be a string when provided.');
     }
     return errors.length > 0 ? errors : true;
@@ -2630,6 +2883,9 @@ var selectDefinition = {
     }
   }
 };
+
+// src/definitions/form/checkbox.ts
+var import_schema19 = require("@kubuild/schema");
 var checkboxDefinition = {
   type: "checkbox",
   label: "Checkbox",
@@ -2671,28 +2927,28 @@ var checkboxDefinition = {
   ],
   validateProps: (props) => {
     const errors = [];
-    if (props.label !== void 0 && typeof props.label !== "string" && !(0, import_schema.isVariableBinding)(props.label)) {
+    if (props.label !== void 0 && typeof props.label !== "string" && !(0, import_schema19.isVariableBinding)(props.label)) {
       errors.push('Checkbox "label" must be a string when provided.');
     }
-    if (props.name !== void 0 && typeof props.name !== "string" && !(0, import_schema.isVariableBinding)(props.name)) {
+    if (props.name !== void 0 && typeof props.name !== "string" && !(0, import_schema19.isVariableBinding)(props.name)) {
       errors.push('Checkbox "name" must be a string when provided.');
     }
-    if (props.value !== void 0 && typeof props.value !== "string" && !(0, import_schema.isVariableBinding)(props.value)) {
+    if (props.value !== void 0 && typeof props.value !== "string" && !(0, import_schema19.isVariableBinding)(props.value)) {
       errors.push('Checkbox "value" must be a string when provided.');
     }
-    if (props.defaultChecked !== void 0 && typeof props.defaultChecked !== "boolean" && !(0, import_schema.isVariableBinding)(props.defaultChecked)) {
+    if (props.defaultChecked !== void 0 && typeof props.defaultChecked !== "boolean" && !(0, import_schema19.isVariableBinding)(props.defaultChecked)) {
       errors.push('Checkbox "defaultChecked" must be a boolean when provided.');
     }
-    if (props.indeterminate !== void 0 && typeof props.indeterminate !== "boolean" && !(0, import_schema.isVariableBinding)(props.indeterminate)) {
+    if (props.indeterminate !== void 0 && typeof props.indeterminate !== "boolean" && !(0, import_schema19.isVariableBinding)(props.indeterminate)) {
       errors.push('Checkbox "indeterminate" must be a boolean when provided.');
     }
-    if (props.required !== void 0 && typeof props.required !== "boolean" && !(0, import_schema.isVariableBinding)(props.required)) {
+    if (props.required !== void 0 && typeof props.required !== "boolean" && !(0, import_schema19.isVariableBinding)(props.required)) {
       errors.push('Checkbox "required" must be a boolean when provided.');
     }
-    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !(0, import_schema.isVariableBinding)(props.disabled)) {
+    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !(0, import_schema19.isVariableBinding)(props.disabled)) {
       errors.push('Checkbox "disabled" must be a boolean when provided.');
     }
-    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !(0, import_schema.isVariableBinding)(props.helperText)) {
+    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !(0, import_schema19.isVariableBinding)(props.helperText)) {
       errors.push('Checkbox "helperText" must be a string when provided.');
     }
     return errors.length > 0 ? errors : true;
@@ -2709,6 +2965,9 @@ var checkboxDefinition = {
     }
   }
 };
+
+// src/definitions/form/switch.ts
+var import_schema20 = require("@kubuild/schema");
 var switchDefinition = {
   type: "switch",
   label: "Switch",
@@ -2760,31 +3019,31 @@ var switchDefinition = {
   ],
   validateProps: (props) => {
     const errors = [];
-    if (props.label !== void 0 && typeof props.label !== "string" && !(0, import_schema.isVariableBinding)(props.label)) {
+    if (props.label !== void 0 && typeof props.label !== "string" && !(0, import_schema20.isVariableBinding)(props.label)) {
       errors.push('Switch "label" must be a string when provided.');
     }
-    if (props.name !== void 0 && typeof props.name !== "string" && !(0, import_schema.isVariableBinding)(props.name)) {
+    if (props.name !== void 0 && typeof props.name !== "string" && !(0, import_schema20.isVariableBinding)(props.name)) {
       errors.push('Switch "name" must be a string when provided.');
     }
-    if (props.value !== void 0 && typeof props.value !== "string" && !(0, import_schema.isVariableBinding)(props.value)) {
+    if (props.value !== void 0 && typeof props.value !== "string" && !(0, import_schema20.isVariableBinding)(props.value)) {
       errors.push('Switch "value" must be a string when provided.');
     }
-    if (props.defaultChecked !== void 0 && typeof props.defaultChecked !== "boolean" && !(0, import_schema.isVariableBinding)(props.defaultChecked)) {
+    if (props.defaultChecked !== void 0 && typeof props.defaultChecked !== "boolean" && !(0, import_schema20.isVariableBinding)(props.defaultChecked)) {
       errors.push('Switch "defaultChecked" must be a boolean when provided.');
     }
-    if (props.switchSize !== void 0 && !(0, import_schema.isVariableBinding)(props.switchSize)) {
+    if (props.switchSize !== void 0 && !(0, import_schema20.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" && !(0, import_schema.isVariableBinding)(props.required)) {
+    if (props.required !== void 0 && typeof props.required !== "boolean" && !(0, import_schema20.isVariableBinding)(props.required)) {
       errors.push('Switch "required" must be a boolean when provided.');
     }
-    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !(0, import_schema.isVariableBinding)(props.disabled)) {
+    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !(0, import_schema20.isVariableBinding)(props.disabled)) {
       errors.push('Switch "disabled" must be a boolean when provided.');
     }
-    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !(0, import_schema.isVariableBinding)(props.helperText)) {
+    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !(0, import_schema20.isVariableBinding)(props.helperText)) {
       errors.push('Switch "helperText" must be a string when provided.');
     }
     return errors.length > 0 ? errors : true;
@@ -2801,6 +3060,9 @@ var switchDefinition = {
     }
   }
 };
+
+// src/definitions/form/radio.ts
+var import_schema21 = require("@kubuild/schema");
 var radioGroupDefinition = {
   type: "radio-group",
   label: "Radio Group",
@@ -2851,25 +3113,25 @@ var radioGroupDefinition = {
   ],
   validateProps: (props) => {
     const errors = [];
-    if (props.name !== void 0 && typeof props.name !== "string" && !(0, import_schema.isVariableBinding)(props.name)) {
+    if (props.name !== void 0 && typeof props.name !== "string" && !(0, import_schema21.isVariableBinding)(props.name)) {
       errors.push('RadioGroup "name" must be a string when provided.');
     }
-    if (props.defaultSelected !== void 0 && typeof props.defaultSelected !== "string" && !(0, import_schema.isVariableBinding)(props.defaultSelected)) {
+    if (props.defaultSelected !== void 0 && typeof props.defaultSelected !== "string" && !(0, import_schema21.isVariableBinding)(props.defaultSelected)) {
       errors.push('RadioGroup "defaultSelected" must be a string when provided.');
     }
-    if (props.orientation !== void 0 && !(0, import_schema.isVariableBinding)(props.orientation)) {
+    if (props.orientation !== void 0 && !(0, import_schema21.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" && !(0, import_schema.isVariableBinding)(props.required)) {
+    if (props.required !== void 0 && typeof props.required !== "boolean" && !(0, import_schema21.isVariableBinding)(props.required)) {
       errors.push('RadioGroup "required" must be a boolean when provided.');
     }
-    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !(0, import_schema.isVariableBinding)(props.disabled)) {
+    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !(0, import_schema21.isVariableBinding)(props.disabled)) {
       errors.push('RadioGroup "disabled" must be a boolean when provided.');
     }
-    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !(0, import_schema.isVariableBinding)(props.helperText)) {
+    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !(0, import_schema21.isVariableBinding)(props.helperText)) {
       errors.push('RadioGroup "helperText" must be a string when provided.');
     }
     return errors.length > 0 ? errors : true;
@@ -2920,25 +3182,25 @@ var radioDefinition = {
   ],
   validateProps: (props) => {
     const errors = [];
-    if (props.label !== void 0 && typeof props.label !== "string" && !(0, import_schema.isVariableBinding)(props.label)) {
+    if (props.label !== void 0 && typeof props.label !== "string" && !(0, import_schema21.isVariableBinding)(props.label)) {
       errors.push('Radio "label" must be a string when provided.');
     }
-    if (props.name !== void 0 && typeof props.name !== "string" && !(0, import_schema.isVariableBinding)(props.name)) {
+    if (props.name !== void 0 && typeof props.name !== "string" && !(0, import_schema21.isVariableBinding)(props.name)) {
       errors.push('Radio "name" must be a string when provided.');
     }
-    if (props.value !== void 0 && typeof props.value !== "string" && !(0, import_schema.isVariableBinding)(props.value)) {
+    if (props.value !== void 0 && typeof props.value !== "string" && !(0, import_schema21.isVariableBinding)(props.value)) {
       errors.push('Radio "value" must be a string when provided.');
     }
-    if (props.defaultChecked !== void 0 && typeof props.defaultChecked !== "boolean" && !(0, import_schema.isVariableBinding)(props.defaultChecked)) {
+    if (props.defaultChecked !== void 0 && typeof props.defaultChecked !== "boolean" && !(0, import_schema21.isVariableBinding)(props.defaultChecked)) {
       errors.push('Radio "defaultChecked" must be a boolean when provided.');
     }
-    if (props.required !== void 0 && typeof props.required !== "boolean" && !(0, import_schema.isVariableBinding)(props.required)) {
+    if (props.required !== void 0 && typeof props.required !== "boolean" && !(0, import_schema21.isVariableBinding)(props.required)) {
       errors.push('Radio "required" must be a boolean when provided.');
     }
-    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !(0, import_schema.isVariableBinding)(props.disabled)) {
+    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !(0, import_schema21.isVariableBinding)(props.disabled)) {
       errors.push('Radio "disabled" must be a boolean when provided.');
     }
-    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !(0, import_schema.isVariableBinding)(props.helperText)) {
+    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !(0, import_schema21.isVariableBinding)(props.helperText)) {
       errors.push('Radio "helperText" must be a string when provided.');
     }
     return errors.length > 0 ? errors : true;
@@ -2960,6 +3222,9 @@ var radioItemDefinition = {
   type: "radio-item",
   label: "Radio Item"
 };
+
+// src/definitions/form/file-upload.ts
+var import_schema22 = require("@kubuild/schema");
 var fileUploadDefinition = {
   type: "file-upload",
   label: "File Upload",
@@ -3004,33 +3269,33 @@ var fileUploadDefinition = {
   ],
   validateProps: (props) => {
     const errors = [];
-    if (props.label !== void 0 && typeof props.label !== "string" && !(0, import_schema.isVariableBinding)(props.label)) {
+    if (props.label !== void 0 && typeof props.label !== "string" && !(0, import_schema22.isVariableBinding)(props.label)) {
       errors.push('FileUpload "label" must be a string when provided.');
     }
-    if (props.name !== void 0 && typeof props.name !== "string" && !(0, import_schema.isVariableBinding)(props.name)) {
+    if (props.name !== void 0 && typeof props.name !== "string" && !(0, import_schema22.isVariableBinding)(props.name)) {
       errors.push('FileUpload "name" must be a string when provided.');
     }
-    if (props.accept !== void 0 && typeof props.accept !== "string" && !(0, import_schema.isVariableBinding)(props.accept)) {
+    if (props.accept !== void 0 && typeof props.accept !== "string" && !(0, import_schema22.isVariableBinding)(props.accept)) {
       errors.push('FileUpload "accept" must be a string when provided.');
     }
-    if (props.maxFileSize !== void 0 && !(0, import_schema.isVariableBinding)(props.maxFileSize)) {
+    if (props.maxFileSize !== void 0 && !(0, import_schema22.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" && !(0, import_schema.isVariableBinding)(props.multiple)) {
+    if (props.multiple !== void 0 && typeof props.multiple !== "boolean" && !(0, import_schema22.isVariableBinding)(props.multiple)) {
       errors.push('FileUpload "multiple" must be a boolean when provided.');
     }
-    if (props.showPreview !== void 0 && typeof props.showPreview !== "boolean" && !(0, import_schema.isVariableBinding)(props.showPreview)) {
+    if (props.showPreview !== void 0 && typeof props.showPreview !== "boolean" && !(0, import_schema22.isVariableBinding)(props.showPreview)) {
       errors.push('FileUpload "showPreview" must be a boolean when provided.');
     }
-    if (props.required !== void 0 && typeof props.required !== "boolean" && !(0, import_schema.isVariableBinding)(props.required)) {
+    if (props.required !== void 0 && typeof props.required !== "boolean" && !(0, import_schema22.isVariableBinding)(props.required)) {
       errors.push('FileUpload "required" must be a boolean when provided.');
     }
-    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !(0, import_schema.isVariableBinding)(props.disabled)) {
+    if (props.disabled !== void 0 && typeof props.disabled !== "boolean" && !(0, import_schema22.isVariableBinding)(props.disabled)) {
       errors.push('FileUpload "disabled" must be a boolean when provided.');
     }
-    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !(0, import_schema.isVariableBinding)(props.helperText)) {
+    if (props.helperText !== void 0 && typeof props.helperText !== "string" && !(0, import_schema22.isVariableBinding)(props.helperText)) {
       errors.push('FileUpload "helperText" must be a string when provided.');
     }
     return errors.length > 0 ? errors : true;
@@ -3045,121 +3310,239 @@ var fileUploadDefinition = {
     }
   }
 };
-var buttonSubmitDefinition = {
-  type: "button-submit",
-  label: "Submit Button",
-  category: "form",
-  icon: "send",
-  acceptsChildren: false,
-  capabilities: ["actionRegistry"],
-  disallowedParents: ["page"],
+
+// src/definitions/interactive/modal.ts
+var modalDefinition = {
+  type: "modal",
+  label: "Modal",
+  category: "interactive",
+  icon: "layout",
+  description: "Pop-up overlay dialog container with backdrop and close controls.",
+  acceptsChildren: true,
+  allowedChildren: ["*"],
   defaultProps: {
-    label: "Submit",
-    loadingText: "Submitting...",
-    showSpinner: true,
-    autoDisableOnSubmit: true,
-    variant: "primary",
-    disabled: false,
-    buttonType: "submit"
+    modalId: "modal-dialog",
+    title: "Modal Title",
+    backdrop: true,
+    closeOnBackdrop: true,
+    closeOnEscape: true,
+    size: "md",
+    showCloseButton: true
   },
   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",
+      name: "modalId",
+      label: "Modal Target ID",
+      type: "string",
+      defaultValue: "modal-dialog",
+      description: "Unique identifier targeted by open_modal and close_modal actions."
+    },
+    {
+      name: "title",
+      label: "Modal Title",
+      type: "string",
+      defaultValue: "Modal Title",
+      description: "Header title text displayed at the top of the dialog."
+    },
+    {
+      name: "size",
+      label: "Size",
       type: "select",
-      defaultValue: "submit",
+      defaultValue: "md",
       options: [
-        { label: "Submit Form (submit)", value: "submit" },
-        { label: "Reset Form (reset)", value: "reset" }
+        { label: "Small (400px)", value: "sm" },
+        { label: "Medium (560px)", value: "md" },
+        { label: "Large (768px)", value: "lg" },
+        { label: "Full Screen", value: "fullscreen" }
       ]
     },
     {
-      name: "variant",
-      label: "Variant",
+      name: "backdrop",
+      label: "Show Backdrop",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "closeOnBackdrop",
+      label: "Close on Backdrop Click",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "closeOnEscape",
+      label: "Close on Escape Key",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "showCloseButton",
+      label: "Show Close Button",
+      type: "boolean",
+      defaultValue: true
+    }
+  ],
+  traits: [
+    idTrait(),
+    titleTrait(),
+    ariaLabelTrait({ description: "Accessible name for the modal dialog." })
+  ],
+  defaultStyles: {
+    base: {
+      backgroundColor: "#ffffff",
+      borderRadius: "12px",
+      boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+      padding: "24px",
+      maxWidth: "560px",
+      width: "100%"
+    }
+  }
+};
+
+// src/definitions/interactive/drawer.ts
+var drawerDefinition = {
+  type: "drawer",
+  label: "Drawer",
+  category: "interactive",
+  icon: "sidebar",
+  description: "Off-canvas slide-over panel container, ideal for mobile navigation and side sheets.",
+  acceptsChildren: true,
+  allowedChildren: ["*"],
+  defaultProps: {
+    modalId: "mobile-drawer",
+    title: "Navigation Menu",
+    placement: "right",
+    backdrop: true,
+    closeOnBackdrop: true,
+    closeOnEscape: true,
+    showCloseButton: true
+  },
+  propFields: [
+    {
+      name: "modalId",
+      label: "Drawer Target ID",
+      type: "string",
+      defaultValue: "mobile-drawer",
+      description: "Unique identifier targeted by open_modal and close_modal actions."
+    },
+    {
+      name: "placement",
+      label: "Placement",
       type: "select",
-      defaultValue: "primary",
+      defaultValue: "right",
       options: [
-        { label: "Primary", value: "primary" },
-        { label: "Secondary", value: "secondary" }
+        { label: "Slide from Right", value: "right" },
+        { label: "Slide from Left", value: "left" },
+        { label: "Slide from Top (Dropdown)", value: "top" },
+        { label: "Slide from Bottom", value: "bottom" }
       ]
     },
-    { name: "disabled", label: "Disabled", type: "boolean", defaultValue: false },
-    { name: "prefixIcon", label: "Prefix Icon", type: "string" },
-    { name: "suffixIcon", label: "Suffix Icon", type: "string" }
+    {
+      name: "title",
+      label: "Drawer Title",
+      type: "string",
+      defaultValue: "Navigation Menu",
+      description: "Header title text displayed at the top of the drawer."
+    },
+    {
+      name: "backdrop",
+      label: "Show Backdrop",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "closeOnBackdrop",
+      label: "Close on Backdrop Click",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "closeOnEscape",
+      label: "Close on Escape Key",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "showCloseButton",
+      label: "Show Close Button",
+      type: "boolean",
+      defaultValue: true
+    }
   ],
   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()
+    ariaLabelTrait({ description: "Accessible name for the off-canvas drawer." })
   ],
-  validateProps: (props) => {
-    const errors = [];
-    const hasLabel = typeof props.label === "string" && props.label.trim().length > 0 || (0, import_schema.isVariableBinding)(props.label);
-    if (!hasLabel) {
-      errors.push('Submit Button requires a non-empty "label".');
-    }
-    if (props.loadingText !== void 0 && typeof props.loadingText !== "string" && !(0, import_schema.isVariableBinding)(props.loadingText)) {
-      errors.push('Submit Button "loadingText" must be a string when provided.');
-    }
-    if (props.showSpinner !== void 0 && typeof props.showSpinner !== "boolean" && !(0, import_schema.isVariableBinding)(props.showSpinner)) {
-      errors.push('Submit Button "showSpinner" must be a boolean when provided.');
-    }
-    if (props.autoDisableOnSubmit !== void 0 && typeof props.autoDisableOnSubmit !== "boolean" && !(0, import_schema.isVariableBinding)(props.autoDisableOnSubmit)) {
-      errors.push('Submit Button "autoDisableOnSubmit" must be a boolean when provided.');
-    }
-    if (props.buttonType !== void 0 && !(0, import_schema.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" && !(0, import_schema.isVariableBinding)(props.disabled)) {
-      errors.push('Submit Button "disabled" must be a boolean when provided.');
+  defaultStyles: {
+    base: {
+      backgroundColor: "#ffffff",
+      boxShadow: "-4px 0 24px rgba(0, 0, 0, 0.15)",
+      padding: "24px",
+      width: "320px",
+      maxWidth: "100%"
+    },
+    mobile: {
+      width: "100%"
     }
-    return errors.length > 0 ? errors : true;
+  }
+};
+
+// src/definitions/interactive/collapsible.ts
+var collapsibleDefinition = {
+  type: "collapsible",
+  label: "Collapsible",
+  category: "interactive",
+  icon: "chevron-down",
+  description: "In-flow expandable container that toggles visibility without a fullscreen overlay.",
+  acceptsChildren: true,
+  allowedChildren: ["*"],
+  defaultProps: {
+    modalId: "collapsible-content",
+    defaultOpen: false,
+    animated: true
   },
+  propFields: [
+    {
+      name: "modalId",
+      label: "Target ID",
+      type: "string",
+      defaultValue: "collapsible-content",
+      description: 'Identifier targeted by Open Modal (with "Toggle" enabled) or Close Modal actions.'
+    },
+    {
+      name: "defaultOpen",
+      label: "Default Open",
+      type: "boolean",
+      defaultValue: false,
+      description: "Whether the collapsible container starts expanded on initial render."
+    },
+    {
+      name: "animated",
+      label: "Smooth Transition",
+      type: "boolean",
+      defaultValue: true
+    }
+  ],
+  traits: [
+    idTrait(),
+    ariaLabelTrait({ description: "Accessible name for the collapsible container." })
+  ],
   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"
+      width: "100%",
+      overflow: "hidden"
     }
   }
 };
+
+// src/definitions/index.ts
 var coreComponentDefinitions = [
   pageDefinition,
   sectionDefinition,
   containerDefinition,
   columnsDefinition,
+  flexDefinition,
+  gridDefinition,
   headingDefinition,
   textDefinition,
   paragraphDefinition,
@@ -3188,7 +3571,10 @@ var coreComponentDefinitions = [
   listItemDefinition,
   tableDefinition,
   tableRowDefinition,
-  tableCellDefinition
+  tableCellDefinition,
+  modalDefinition,
+  drawerDefinition,
+  collapsibleDefinition
 ];
 function createDefaultComponentRegistry() {
   const registry = new ComponentRegistry();
@@ -3238,13 +3624,14 @@ function isBindableField(field) {
   return primitiveTypeForField(field) !== void 0;
 }
 
-// src/blocks.ts
+// src/blocks/types.ts
 var nextId = 1;
 function defaultGenId(prefix = "node") {
   return `${prefix}-${Date.now().toString(36)}-${(nextId++).toString(36)}`;
 }
-var STARTER_BLOCKS = [
-  // --- Layout Blocks (STORA-241) ---
+
+// src/blocks/layout.ts
+var LAYOUT_STARTER_BLOCKS = [
   {
     id: "layout-1-col",
     name: "1 Column",
@@ -3435,8 +3822,353 @@ var STARTER_BLOCKS = [
         }
       ]
     })
+  }
+];
+
+// src/blocks/sections.ts
+var UI_STARTER_BLOCKS = [
+  {
+    id: "navbar",
+    name: "Navbar",
+    category: "sections",
+    categoryLabel: "Navigation & Headers",
+    description: "Responsive top navigation bar with brand logo, nav links, CTA button, and mobile hamburger menu",
+    icon: "layout",
+    createNodeTree: (gen = defaultGenId) => ({
+      id: gen("section"),
+      type: "section",
+      styles: {
+        base: {
+          paddingTop: "16px",
+          paddingBottom: "16px",
+          paddingLeft: "24px",
+          paddingRight: "24px",
+          backgroundColor: "#ffffff",
+          borderBottom: "1px solid #e2e8f0",
+          width: "100%"
+        },
+        mobile: {
+          paddingLeft: "16px",
+          paddingRight: "16px",
+          paddingTop: "12px",
+          paddingBottom: "12px"
+        }
+      },
+      children: [
+        {
+          id: gen("container"),
+          type: "container",
+          props: { tag: "div" },
+          styles: {
+            base: {
+              maxWidth: "1200px",
+              margin: "0 auto",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              width: "100%",
+              flexWrap: "wrap"
+            }
+          },
+          children: [
+            // 1. Brand Logo
+            {
+              id: gen("heading"),
+              type: "heading",
+              props: { text: "Brand", level: 3 },
+              styles: {
+                base: {
+                  fontSize: "20px",
+                  fontWeight: "800",
+                  color: "#0f172a",
+                  margin: "0"
+                }
+              }
+            },
+            // 2. Desktop Navigation Links (hidden on mobile)
+            {
+              id: gen("flex"),
+              type: "flex",
+              styles: {
+                base: {
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: "24px"
+                },
+                mobile: {
+                  display: "none"
+                }
+              },
+              children: [
+                {
+                  id: gen("link"),
+                  type: "link",
+                  props: { text: "Home", href: "#home" },
+                  styles: {
+                    base: {
+                      fontSize: "14px",
+                      fontWeight: "500",
+                      color: "#0f172a",
+                      textDecoration: "none"
+                    }
+                  }
+                },
+                {
+                  id: gen("link"),
+                  type: "link",
+                  props: { text: "Features", href: "#features" },
+                  styles: {
+                    base: {
+                      fontSize: "14px",
+                      fontWeight: "500",
+                      color: "#64748b",
+                      textDecoration: "none"
+                    }
+                  }
+                },
+                {
+                  id: gen("link"),
+                  type: "link",
+                  props: { text: "Pricing", href: "#pricing" },
+                  styles: {
+                    base: {
+                      fontSize: "14px",
+                      fontWeight: "500",
+                      color: "#64748b",
+                      textDecoration: "none"
+                    }
+                  }
+                },
+                {
+                  id: gen("link"),
+                  type: "link",
+                  props: { text: "About", href: "#about" },
+                  styles: {
+                    base: {
+                      fontSize: "14px",
+                      fontWeight: "500",
+                      color: "#64748b",
+                      textDecoration: "none"
+                    }
+                  }
+                }
+              ]
+            },
+            // 3. Desktop CTA Buttons (hidden on mobile)
+            {
+              id: gen("flex"),
+              type: "flex",
+              styles: {
+                base: {
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: "12px"
+                },
+                mobile: {
+                  display: "none"
+                }
+              },
+              children: [
+                {
+                  id: gen("link"),
+                  type: "link",
+                  props: { text: "Sign In", href: "#signin" },
+                  styles: {
+                    base: {
+                      fontSize: "14px",
+                      fontWeight: "500",
+                      color: "#475569",
+                      textDecoration: "none",
+                      padding: "8px 12px"
+                    }
+                  }
+                },
+                {
+                  id: gen("button"),
+                  type: "button",
+                  props: { label: "Get Started", href: "#signup" },
+                  styles: {
+                    base: {
+                      backgroundColor: "#2563eb",
+                      color: "#ffffff",
+                      padding: "8px 18px",
+                      borderRadius: "8px",
+                      fontSize: "14px",
+                      fontWeight: "600",
+                      display: "inline-block"
+                    },
+                    states: {
+                      ":hover": { backgroundColor: "#1d4ed8" }
+                    }
+                  }
+                }
+              ]
+            },
+            // 4. Mobile Hamburger Button (hidden on desktop, visible on mobile)
+            {
+              id: gen("button"),
+              type: "button",
+              props: {
+                label: "\u2630",
+                activeLabel: "\u2715",
+                isEditable: false,
+                modalId: "mobile-nav-drawer",
+                ariaLabel: "Toggle navigation menu",
+                variant: "secondary"
+              },
+              styles: {
+                base: {
+                  display: "none"
+                },
+                mobile: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  padding: "6px 12px",
+                  fontSize: "18px",
+                  backgroundColor: "#f8fafc",
+                  border: "1px solid #e2e8f0",
+                  borderRadius: "6px",
+                  color: "#0f172a",
+                  cursor: "pointer"
+                }
+              },
+              actions: [
+                {
+                  id: gen("pipeline"),
+                  trigger: "click",
+                  label: "Toggle Mobile Menu",
+                  enabled: true,
+                  steps: [
+                    {
+                      id: gen("step"),
+                      type: "open_modal",
+                      label: "Toggle Navigation Drawer",
+                      payload: {
+                        modalId: "mobile-nav-drawer",
+                        toggle: true
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            // 5. Mobile Navigation Dropdown (hidden on desktop, stacked on mobile)
+            // A `collapsible`, not a plain flex: this is an in-flow disclosure that expands
+            // inside the navbar (its width/border styles depend on staying there), so it must
+            // not be treated as a floating overlay. The dedicated renderer also keeps it
+            // visible while editing, so the menu's links stay reachable on the canvas, and
+            // only honours the open/closed state at runtime.
+            {
+              id: gen("collapsible"),
+              type: "collapsible",
+              props: {
+                modalId: "mobile-nav-drawer",
+                ariaLabel: "Mobile navigation menu",
+                defaultOpen: false,
+                animated: true
+              },
+              styles: {
+                base: {
+                  display: "none"
+                },
+                mobile: {
+                  display: "flex",
+                  flexDirection: "column",
+                  width: "100%",
+                  gap: "8px",
+                  paddingTop: "16px",
+                  marginTop: "12px",
+                  borderTop: "1px solid #f1f5f9"
+                }
+              },
+              children: [
+                {
+                  id: gen("link"),
+                  type: "link",
+                  props: { text: "Home", href: "#home" },
+                  styles: {
+                    base: {
+                      fontSize: "14px",
+                      fontWeight: "500",
+                      color: "#0f172a",
+                      textDecoration: "none",
+                      padding: "6px 0"
+                    }
+                  }
+                },
+                {
+                  id: gen("link"),
+                  type: "link",
+                  props: { text: "Features", href: "#features" },
+                  styles: {
+                    base: {
+                      fontSize: "14px",
+                      fontWeight: "500",
+                      color: "#64748b",
+                      textDecoration: "none",
+                      padding: "6px 0"
+                    }
+                  }
+                },
+                {
+                  id: gen("link"),
+                  type: "link",
+                  props: { text: "Pricing", href: "#pricing" },
+                  styles: {
+                    base: {
+                      fontSize: "14px",
+                      fontWeight: "500",
+                      color: "#64748b",
+                      textDecoration: "none",
+                      padding: "6px 0"
+                    }
+                  }
+                },
+                {
+                  id: gen("link"),
+                  type: "link",
+                  props: { text: "About", href: "#about" },
+                  styles: {
+                    base: {
+                      fontSize: "14px",
+                      fontWeight: "500",
+                      color: "#64748b",
+                      textDecoration: "none",
+                      padding: "6px 0"
+                    }
+                  }
+                },
+                {
+                  id: gen("button"),
+                  type: "button",
+                  props: { label: "Get Started", href: "#signup" },
+                  styles: {
+                    base: {
+                      backgroundColor: "#2563eb",
+                      color: "#ffffff",
+                      padding: "10px 16px",
+                      borderRadius: "8px",
+                      fontSize: "14px",
+                      fontWeight: "600",
+                      textAlign: "center",
+                      display: "block",
+                      marginTop: "8px"
+                    },
+                    states: {
+                      ":hover": { backgroundColor: "#1d4ed8" }
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    })
   },
-  // --- Pre-composed UI Blocks (STORA-242) ---
   {
     id: "hero-section",
     name: "Hero Section",
@@ -3753,8 +4485,11 @@ var STARTER_BLOCKS = [
         }
       ]
     })
-  },
-  // --- Starter Form Templates (STORA-350) ---
+  }
+];
+
+// src/blocks/forms.ts
+var FORM_STARTER_BLOCKS = [
   {
     id: "form-contact-us",
     name: "Contact Us Form",
@@ -4504,12 +5239,24 @@ var STARTER_BLOCKS = [
     })
   }
 ];
+
+// src/blocks/index.ts
+var STARTER_BLOCKS = [
+  ...LAYOUT_STARTER_BLOCKS,
+  ...UI_STARTER_BLOCKS,
+  ...FORM_STARTER_BLOCKS
+];
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CONTENT_CHILD_TYPES,
   ComponentRegistry,
+  FORM_STARTER_BLOCKS,
+  LAYOUT_PARENTS,
+  LAYOUT_STARTER_BLOCKS,
   STARTER_BLOCKS,
   TRAIT_GROUP_LABELS,
   TRAIT_GROUP_ORDER,
+  UI_STARTER_BLOCKS,
   acceptTrait,
   actionTrait,
   altTrait,
@@ -4527,6 +5274,7 @@ var STARTER_BLOCKS = [
   citeTrait,
   codeBlockDefinition,
   colSpanTrait,
+  collapsibleDefinition,
   collectTraitNames,
   collectionDefinition,
   columnsDefinition,
@@ -4535,13 +5283,17 @@ var STARTER_BLOCKS = [
   coreComponentDefinitions,
   createDefaultComponentRegistry,
   defaultCheckedTrait,
+  defaultGenId,
   defaultSelectedTrait,
   defaultValueTrait,
   disabledTrait,
+  drawerDefinition,
   extractComponentRequirements,
   fieldNameTrait,
   fileUploadDefinition,
+  flexDefinition,
   formDefinition,
+  gridDefinition,
   headingDefinition,
   helperTextTrait,
   hrefTrait,
@@ -4565,6 +5317,7 @@ var STARTER_BLOCKS = [
   maxLengthTrait,
   methodTrait,
   minLengthTrait,
+  modalDefinition,
   multipleTrait,
   mutedTrait,
   optionsListTrait,
@@ -4606,6 +5359,7 @@ var STARTER_BLOCKS = [
   textareaDefinition,
   titleTrait,
   valueTrait,
-  videoDefinition
+  videoDefinition,
+  withOverrides
 });
 //# sourceMappingURL=index.cjs.map