@mindfiredigital/ignix-lite-engine 1.1.0

package/src/manifests/checkbox.json

@@ -0,0 +1,122 @@
+{
+  "component": "checkbox",
+  "version": "2.0",
+  "description": "Checkbox for boolean selection. Must be wrapped inside a label element.",
+
+  "element": "input",
+
+  "emmet": "label[data-intent=? data-size=?]>(input[type=checkbox]+{Label})",
+  
+
+  "props": {
+    "type": {
+      "type": "enum",
+      "values": ["checkbox"],
+      "default": "checkbox",
+      "native": true,
+      "agent_hint": "Always use type=checkbox"
+    },
+
+    "checked": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Marks checkbox as checked"
+    },
+
+    "disabled": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Disables checkbox"
+    },
+
+    "required": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Marks checkbox as required"
+    },
+
+    "name": {
+      "type": "string",
+      "native": true,
+      "agent_hint": "Used for grouping checkboxes"
+    },
+
+    "value": {
+      "type": "string",
+      "native": true,
+      "agent_hint": "Submitted value in forms"
+    },
+
+    "data-intent": {
+      "type": "enum",
+      "values": ["success", "danger", "warning", "neutral"],
+      "default": "neutral",
+      "native": false,
+      "agent_hint": "Controls checkbox color (applied on label)"
+    },
+
+    "data-size": {
+      "type": "enum",
+      "values": ["sm", "md", "lg"],
+      "default": "md",
+      "native": false,
+      "agent_hint": "Controls checkbox size (applied on label)"
+    }
+  },
+
+  "states": ["checked", "disabled"],
+
+  "required_props": ["type"],
+
+  "required_wrapper": "label",
+
+  "forbidden_props": ["class", "variant", "color", "style", "onclick"],
+
+  "do": [
+    "Wrap checkbox inside label",
+    "Use checked for default state",
+    "Use name and value for grouping",
+    "Use data-intent for styling",
+    "Use data-size for scaling"
+  ],
+
+  "dont": [
+    "Do not use class attribute",
+    "Do not use variant or color props",
+    "Do not use inline JS handlers",
+    "Do not place checkbox outside label"
+  ],
+
+  "examples": [
+    {
+      "label": "Basic checkbox",
+      "emmet": "label>(input[type=checkbox]+{Accept terms})",
+      "html": "<label><input type=\"checkbox\" />Accept terms</label>"
+    },
+    {
+      "label": "Checked checkbox",
+      "emmet": "label>(input[type=checkbox checked]+{Checked})",
+      "html": "<label><input type=\"checkbox\" checked />Checked</label>"
+    },
+    {
+      "label": "Disabled checkbox",
+      "emmet": "label>(input[type=checkbox disabled]+{Disabled})",
+      "html": "<label><input type=\"checkbox\" disabled />Disabled</label>"
+    },
+    {
+      "label": "Intent variant",
+      "emmet": "label[data-intent=success]>(input[type=checkbox checked]+{Success})",
+      "html": "<label data-intent=\"success\"><input type=\"checkbox\" checked />Success</label>"
+    },
+    {
+      "label": "Size variant",
+      "emmet": "label[data-size=lg]>(input[type=checkbox]+{Large})",
+      "html": "<label data-size=\"lg\"><input type=\"checkbox\" />Large</label>"
+    },
+    {
+      "label": "Checkbox group",
+      "emmet": "label>(input[type=checkbox name=lang value=js]+{JavaScript})",
+      "html": "<label><input type=\"checkbox\" name=\"lang\" value=\"js\" />JavaScript</label>"
+    }
+  ]
+}

package/src/manifests/codeblock.json

@@ -0,0 +1,63 @@
+{
+  "component": "code",
+  "version": "2.0",
+
+  "description": "Displays formatted code snippets using native pre and code elements with language metadata support and horizontal scrolling.",
+
+  "element": "pre > code",
+
+  "emmet": "pre>code[data-lang=?]{content}",
+  
+
+  "props": {
+    "data-lang": {
+      "type": "string",
+      "values": ["js", "ts", "python", "bash", "html", "css", "json"],
+      "default": "text",
+      "native": false,
+      "agent_hint": "Specify language metadata for code examples."
+    }
+  },
+
+  "states": [],
+
+  "forbidden_props": ["language", "variant", "theme", "class"],
+
+  "required_props": [],
+
+  "required_slots": [],
+
+  "required_children": ["code"],
+
+  "do": [
+    "Wrap code inside pre element",
+    "Use data-lang to indicate language",
+    "Use code element for code content"
+  ],
+
+  "dont": [
+    "Do not use div instead of pre",
+    "Do not use language prop",
+    "Do not use class attribute"
+  ],
+
+  "examples": [
+    {
+      "label": "JavaScript code",
+      "emmet": "pre>code[data-lang=js]{function greet(){}}",
+      "html": "<pre><code data-lang=\"js\">function greet(){}</code></pre>"
+    },
+
+    {
+      "label": "Python code",
+      "emmet": "pre>code[data-lang=python]{print('Hello')}",
+      "html": "<pre><code data-lang=\"python\">print('Hello')</code></pre>"
+    },
+
+    {
+      "label": "Bash command",
+      "emmet": "pre>code[data-lang=bash]{npm install ignix-lite}",
+      "html": "<pre><code data-lang=\"bash\">npm install ignix-lite</code></pre>"
+    }
+  ]
+}

package/src/manifests/combobox.json

@@ -0,0 +1,33 @@
+{
+  "component": "ix-combobox",
+  "element": "ix-combobox",
+
+  "emmet": "ix-combobox>(label>(span[data-chips])+input[placeholder=?]+button[data-clear]{Clear})+ul>(li{Option})*",
+
+  "required_children": ["label", "input", "ul", "li"],
+
+  "optional_children": ["[data-chips]", "button[data-clear]"],
+
+  "props": {
+    "multiple": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Enables chip rendering and multi-select mode."
+    },
+
+    "data-intent": {
+      "type": "enum",
+      "values": ["primary", "success", "warning", "danger", "gradient"]
+    },
+
+    "data-clear": {
+      "type": "boolean",
+      "native": false
+    },
+
+    "data-chips": {
+      "type": "boolean",
+      "native": false
+    }
+  }
+}

package/src/manifests/dialog.json

@@ -0,0 +1,64 @@
+{
+  "component": "dialog",
+  "version": "2.0",
+  "description": "Modal dialog used for confirmations, warnings, and information display.",
+
+  "element": "dialog",
+
+  "emmet": "dialog#id[data-intent=?]>(h2{Title}+p{Message}+button{Cancel}+button{Confirm})",
+
+  "props": {
+    "id": {
+      "type": "string",
+      "native": true,
+      "agent_hint": "Unique identifier used to control dialog"
+    },
+
+    "data-intent": {
+      "type": "enum",
+      "values": ["danger", "warning", "info"],
+      "default": "info",
+      "native": false,
+      "agent_hint": "Controls dialog style (danger for destructive, warning for caution)"
+    }
+  },
+
+  "states": [],
+
+  "required_props": ["id"],
+
+  "required_slots": [],
+
+  "forbidden_props": ["class", "variant", "color", "style"],
+
+  "do": [
+    "Always include a heading (h2)",
+    "Include descriptive text using p tags",
+    "Provide at least one action button",
+    "Use data-intent for styling"
+  ],
+
+  "dont": [
+    "Do not use class attribute",
+    "Do not attach JS handlers like onclick",
+    "Do not leave dialog empty"
+  ],
+
+  "examples": [
+    {
+      "label": "Confirm dialog",
+      "emmet": "dialog#confirm[data-intent=danger]>(h2{Confirm}+p{Are you sure?}+button{Cancel}+button{Delete})",
+      "html": "<dialog id=\"confirm\" data-intent=\"danger\"><h2>Confirm</h2><p>Are you sure?</p><button>Cancel</button><button>Delete</button></dialog>"
+    },
+    {
+      "label": "Warning dialog",
+      "emmet": "dialog#warn[data-intent=warning]>(h2{Warning}+p{Unsaved changes}+button{Close})",
+      "html": "<dialog id=\"warn\" data-intent=\"warning\"><h2>Warning</h2><p>Unsaved changes</p><button>Close</button></dialog>"
+    },
+    {
+      "label": "Info dialog",
+      "emmet": "dialog#info[data-intent=info]>(h2{Info}+p{Session expiring}+button{Close})",
+      "html": "<dialog id=\"info\" data-intent=\"info\"><h2>Info</h2><p>Session expiring</p><button>Close</button></dialog>"
+    }
+  ]
+}

package/src/manifests/divider.json

@@ -0,0 +1,47 @@
+{
+  "component": "divider",
+  "version": "2.0",
+  "description": "Visual separator using semantic hr element with orientation support.",
+
+  "element": "hr",
+
+  "emmet": "hr",
+
+  "props": {
+    "data-orientation": {
+      "type": "string",
+
+      "values": ["horizontal", "vertical"],
+
+      "default": "horizontal",
+
+      "agent_hint": "Controls divider direction."
+    }
+  },
+
+  "states": [],
+
+  "forbidden_props": ["class"],
+
+  "required_props": [],
+
+  "required_slots": [],
+
+  "do": ["Use hr element", "Use data-orientation for vertical mode"],
+
+  "dont": ["Do not use div wrappers", "Do not use class attribute"],
+
+  "examples": [
+    {
+      "label": "Horizontal",
+      "emmet": "hr",
+      "html": "<hr>"
+    },
+
+    {
+      "label": "Vertical",
+      "emmet": "hr[data-orientation=vertical]",
+      "html": "<hr data-orientation=\"vertical\">"
+    }
+  ]
+}

package/src/manifests/dropdown.json

@@ -0,0 +1,105 @@
+{
+  "component": "dropdown",
+  "version": "2.0",
+  "description": "Accessible dropdown component using ix-dropdown custom element with trigger and menu slots, keyboard navigation and semantic intents.",
+
+  "element": "ix-dropdown",
+
+  "emmet": "ix-dropdown>button[slot=trigger]+ul[slot=menu]",
+
+  "props": {
+    "data-intent": {
+      "type": "enum",
+      "values": [
+        "primary",
+        "success",
+        "warning",
+        "danger",
+        "ghost",
+        "gradient",
+        "neutral"
+      ],
+      "default": "neutral",
+      "native": false,
+      "agent_hint": "Applies dropdown styling."
+    },
+
+    "slot": {
+      "type": "enum",
+      "values": ["trigger", "menu"],
+      "native": true,
+      "agent_hint": "Defines dropdown trigger and menu."
+    },
+
+    "aria-haspopup": {
+      "type": "string",
+      "values": ["menu"],
+      "default": "menu",
+      "native": true,
+      "agent_hint": "Indicates menu popup."
+    },
+
+    "aria-expanded": {
+      "type": "boolean",
+      "default": false,
+      "native": true,
+      "agent_hint": "Open state of dropdown."
+    }
+  },
+
+  "states": ["closed", "open", "focused"],
+
+  "forbidden_props": ["variant", "theme", "size", "class"],
+
+  "required_props": [],
+
+  "required_slots": ["trigger", "menu"],
+
+  "methods": ["open()", "close()", "toggle()"],
+
+  "do": [
+    "Provide trigger slot",
+    "Provide menu slot",
+    "Use button items inside menu",
+    "Keep menu inside ul"
+  ],
+
+  "dont": [
+    "Do not omit trigger",
+    "Do not omit menu",
+    "Do not use div instead of menu list",
+    "Do not place plain text inside menu"
+  ],
+
+  "examples": [
+    {
+      "label": "Default dropdown",
+      "emmet": "ix-dropdown",
+      "html": "<ix-dropdown><button slot=\"trigger\">Options ▾</button><ul slot=\"menu\"><li><button>Profile</button></li><li><button>Settings</button></li></ul></ix-dropdown>"
+    },
+
+    {
+      "label": "Primary dropdown",
+      "emmet": "ix-dropdown[data-intent=primary]",
+      "html": "<ix-dropdown data-intent=\"primary\"><button slot=\"trigger\">Primary ▾</button><ul slot=\"menu\"><li><button>Dashboard</button></li><li><button>Profile</button></li></ul></ix-dropdown>"
+    },
+
+    {
+      "label": "Ghost dropdown",
+      "emmet": "ix-dropdown[data-intent=ghost]",
+      "html": "<ix-dropdown data-intent=\"ghost\"><button slot=\"trigger\">Ghost ▾</button><ul slot=\"menu\"><li><button>Item 1</button></li><li><button>Item 2</button></li></ul></ix-dropdown>"
+    },
+
+    {
+      "label": "Gradient dropdown",
+      "emmet": "ix-dropdown[data-intent=gradient]",
+      "html": "<ix-dropdown data-intent=\"gradient\"><button slot=\"trigger\">Gradient ▾</button><ul slot=\"menu\"><li><button>Modern</button></li><li><button>Premium</button></li></ul></ix-dropdown>"
+    },
+
+    {
+      "label": "Workspace menu",
+      "emmet": "ix-dropdown[data-intent=primary]",
+      "html": "<ix-dropdown data-intent=\"primary\"><button slot=\"trigger\">Workspace ▾</button><ul slot=\"menu\"><li><button>Settings</button></li><li><button>Invite Members</button></li><li><button>Billing</button></li><li><button>Logout</button></li></ul></ix-dropdown>"
+    }
+  ]
+}

package/src/manifests/form.json

@@ -0,0 +1,81 @@
+{
+  "component": "form",
+  "version": "2.0",
+  "description": "Form container used to collect user input. Contains labels, inputs, and submit button.",
+
+  "element": "form",
+
+  "emmet": "form#id>(label>{Label}+input[type=? name=?])+button[type=submit]{Submit}",
+
+  "props": {
+    "id": {
+      "type": "string",
+      "native": true,
+      "agent_hint": "Unique identifier for the form"
+    },
+
+    "action": {
+      "type": "string",
+      "native": true,
+      "agent_hint": "URL where form is submitted"
+    },
+
+    "method": {
+      "type": "enum",
+      "values": ["get", "post"],
+      "default": "post",
+      "native": true,
+      "agent_hint": "HTTP method for submission"
+    },
+
+    "aria-busy": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Indicates loading/submitting state"
+    },
+
+    "data-loading": {
+      "type": "boolean",
+      "native": false,
+      "agent_hint": "Triggers loading UI styles"
+    }
+  },
+
+  "states": ["aria-busy", "data-loading"],
+
+  "required_props": [],
+
+  "required_slots": [],
+
+  "forbidden_props": ["class", "variant", "color", "style"],
+
+  "do": [
+    "Always include a submit button inside form",
+    "Wrap inputs inside label elements",
+    "Use aria-busy for loading state"
+  ],
+
+  "dont": [
+    "Do not use class attribute",
+    "Do not attach JS handlers like onsubmit",
+    "Do not leave form without submit button"
+  ],
+
+  "examples": [
+    {
+      "label": "Basic form",
+      "emmet": "form#signup>(label>{Email}+input[type=email name=email])+button[type=submit]{Submit}",
+      "html": "<form id=\"signup\"><label>Email <input type=\"email\" name=\"email\" /></label><button type=\"submit\">Submit</button></form>"
+    },
+    {
+      "label": "Form loading",
+      "emmet": "form[aria-busy=true data-loading]>(label>{Email}+input[type=email])+button{Submitting...}",
+      "html": "<form aria-busy=\"true\" data-loading><label>Email <input type=\"email\" /></label><button>Submitting...</button></form>"
+    },
+    {
+      "label": "Validation state",
+      "emmet": "form>(label[data-state=error]>(input[type=email aria-invalid=true])+small{Error})",
+      "html": "<form><label data-state=\"error\"><input type=\"email\" aria-invalid=\"true\" /><small>Error</small></label></form>"
+    }
+  ]
+}

package/src/manifests/grid.json

@@ -0,0 +1,143 @@
+{
+  "component": "grid",
+  "version": "2.0",
+  "description": "Responsive semantic grid layout using section container with column spans, gaps, alignment and auto layouts.",
+
+  "element": "section",
+
+  "emmet": "section[data-grid=3]>article*3",
+
+  "props": {
+    "data-grid": {
+      "type": "string",
+
+      "values": ["1", "2", "3", "4", "5", "6", "auto", "fill"],
+
+      "default": "3",
+
+      "agent_hint": "Controls column count or auto layout."
+    },
+
+    "data-gap": {
+      "type": "string",
+
+      "values": ["xs", "sm", "md", "lg", "xl"],
+
+      "default": "md",
+
+      "agent_hint": "Controls spacing between items."
+    },
+
+    "data-align": {
+      "type": "string",
+
+      "values": ["start", "center", "end", "stretch", "baseline"],
+
+      "agent_hint": "Controls vertical alignment."
+    },
+
+    "data-justify": {
+      "type": "string",
+
+      "values": ["start", "center", "end", "stretch"],
+
+      "agent_hint": "Controls horizontal alignment."
+    },
+
+    "data-dense": {
+      "type": "boolean",
+
+      "agent_hint": "Enables dense auto flow packing."
+    }
+  },
+
+  "states": [],
+
+  "slots": {
+    "item": {
+      "required": false,
+
+      "element": ["article", "section", "span", "p", "button"],
+
+      "agent_hint": "Grid content item."
+    }
+  },
+
+  "child_props": {
+    "data-col": {
+      "type": "string",
+
+      "values": ["1", "2", "3", "4", "5", "6", "full"],
+
+      "agent_hint": "Column span for item."
+    },
+
+    "data-row": {
+      "type": "string",
+
+      "values": ["2", "3"],
+
+      "agent_hint": "Row span for item."
+    }
+  },
+
+  "forbidden_props": ["class"],
+
+  "required_props": ["data-grid"],
+
+  "required_slots": [],
+
+  "required_wrapper": null,
+
+  "do": [
+    "Use section as grid container",
+    "Use semantic children",
+    "Use data-col for spans",
+    "Use data-row for row spans",
+    "Use data-gap for spacing"
+  ],
+
+  "dont": [
+    "Do not use div wrappers",
+    "Do not use class attribute",
+    "Do not replace grid config with inline styles"
+  ],
+
+  "examples": [
+    {
+      "label": "Two columns",
+      "emmet": "section[data-grid=2]>article*2",
+      "html": "<section data-grid=\"2\"><article>Column 1</article><article>Column 2</article></section>"
+    },
+
+    {
+      "label": "Three columns",
+      "emmet": "section[data-grid=3]>article*3",
+      "html": "<section data-grid=\"3\"><article>A</article><article>B</article><article>C</article></section>"
+    },
+
+    {
+      "label": "Auto fit",
+      "emmet": "section[data-grid=auto]>article*5",
+      "html": "<section data-grid=\"auto\"><article>1</article><article>2</article><article>3</article></section>"
+    },
+
+    {
+      "label": "Column span",
+      "emmet": "section[data-grid=4]>(article[data-col=2])+(article*4)",
+      "html": "<section data-grid=\"4\"><article data-col=\"2\">Wide</article><article>A</article><article>B</article></section>"
+    },
+
+    {
+      "label": "Full width",
+      "emmet": "section[data-grid=3]>(article*3)+(article[data-col=full])",
+      "html": "<section data-grid=\"3\"><article>1</article><article>2</article><article>3</article><article data-col=\"full\">Full</article></section>"
+    },
+
+    {
+      "label": "Dense layout",
+      "emmet": "section[data-grid=4][data-dense]>article*6",
+      "html": "<section data-grid=\"4\" data-dense><article data-col=\"2\">Wide</article><article>A</article><article>B</article></section>"
+    }
+  ]
+}