juxscript 1.0.3 → 1.0.4

package/lib/components/docs-data.json

@@ -3,24 +3,24 @@
     {
       "name": "App",
       "category": "Core",
-      "description": "App - Configure application-level settings",
-      "constructor": "new App()",
+      "description": "App component options",
+      "constructor": "jux.app(id: string, options?: AppOptions)",
       "fluentMethods": [
         {
           "name": "title",
-          "params": "(title)",
+          "params": "(value)",
           "returns": "this",
           "description": "Set title"
         },
         {
           "name": "theme",
-          "params": "(theme)",
+          "params": "(value)",
           "returns": "this",
           "description": "Set theme"
         },
         {
           "name": "favicon",
-          "params": "(url)",
+          "params": "(value)",
           "returns": "this",
           "description": "Set favicon"
         },
@@ -29,111 +29,66 @@
           "params": "(name, content)",
           "returns": "this",
           "description": "Set meta"
-        }
-      ],
-      "example": "jux.app('id').render()"
-    },
-    {
-      "name": "Import",
-      "category": "Core",
-      "description": "Import - Import external resources (CSS, JS, images, fonts, etc.)",
-      "constructor": "jux.import(url: string, options?: ImportOptions)",
-      "fluentMethods": [
-        {
-          "name": "type",
-          "params": "(type)",
-          "returns": "this",
-          "description": "Set type"
         },
         {
-          "name": "href",
+          "name": "addStylesheet",
           "params": "(url)",
           "returns": "this",
-          "description": "Set href"
+          "description": "Set addStylesheet"
         },
         {
-          "name": "src",
+          "name": "addScript",
           "params": "(url)",
           "returns": "this",
-          "description": "Set src"
-        },
-        {
-          "name": "as",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set as"
-        },
-        {
-          "name": "crossOrigin",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set crossOrigin"
-        },
-        {
-          "name": "integrity",
-          "params": "(hash)",
-          "returns": "this",
-          "description": "Set integrity"
-        },
-        {
-          "name": "async",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set async"
-        },
-        {
-          "name": "defer",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set defer"
-        },
-        {
-          "name": "module",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set module"
+          "description": "Set addScript"
         },
         {
-          "name": "location",
-          "params": "(loc)",
+          "name": "setup",
+          "params": "(options)",
           "returns": "this",
-          "description": "Set location"
+          "description": "Set setup"
         },
         {
           "name": "render",
           "params": "()",
           "returns": "this",
           "description": "Set render"
-        },
-        {
-          "name": "remove",
-          "params": "()",
-          "returns": "this",
-          "description": "Set remove"
         }
       ],
-      "example": "jux.import('id').render()"
+      "example": "jux.app('myApp').setup({"
     },
     {
       "name": "Layout",
       "category": "Core",
-      "description": "Layout - Load a JUX layout file",
-      "constructor": "new Layout()",
+      "description": "Layout component interface",
+      "constructor": "jux.layout(...args: any[])",
       "fluentMethods": [
         {
           "name": "file",
           "params": "(juxFile)",
           "returns": "this",
           "description": "Set file"
+        },
+        {
+          "name": "add",
+          "params": "(component)",
+          "returns": "this",
+          "description": "Set add"
+        },
+        {
+          "name": "render",
+          "params": "(target?)",
+          "returns": "this",
+          "description": "Set render"
         }
       ],
-      "example": "jux.layout('id').render()"
+      "example": "// As a composition function"
     },
     {
       "name": "Script",
       "category": "Core",
-      "description": "Script - Inject JavaScript into the document",
-      "constructor": "new Script()",
+      "description": "Script - Inject inline JavaScript into the document",
+      "constructor": "jux.script(content: string = '')",
       "fluentMethods": [
         {
           "name": "content",
@@ -142,28 +97,16 @@
           "description": "Set content"
         },
         {
-          "name": "src",
-          "params": "(url)",
-          "returns": "this",
-          "description": "Set src"
-        },
-        {
-          "name": "async",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set async"
-        },
-        {
-          "name": "defer",
+          "name": "type",
           "params": "(value)",
           "returns": "this",
-          "description": "Set defer"
+          "description": "Set type"
         },
         {
-          "name": "type",
-          "params": "(value)",
+          "name": "module",
+          "params": "()",
           "returns": "this",
-          "description": "Set type"
+          "description": "Set module"
         },
         {
           "name": "render",
@@ -178,13 +121,13 @@
           "description": "Set remove"
         }
       ],
-      "example": "jux.script('id').render()"
+      "example": "jux.script('console.log(\"Hello\")');"
     },
     {
       "name": "Style",
       "category": "Core",
-      "description": "Style component",
-      "constructor": "new Style()",
+      "description": "Style - Inject inline CSS into the document",
+      "constructor": "jux.style(content: string = '')",
       "fluentMethods": [
         {
           "name": "content",
@@ -192,12 +135,6 @@
           "returns": "this",
           "description": "Set content"
         },
-        {
-          "name": "url",
-          "params": "(href)",
-          "returns": "this",
-          "description": "Set url"
-        },
         {
           "name": "append",
           "params": "(css)",
@@ -223,28 +160,13 @@
           "description": "Set remove"
         }
       ],
-      "example": "jux.style('id').render()"
-    },
-    {
-      "name": "Theme",
-      "category": "Core",
-      "description": "Theme - Load and apply CSS themes",
-      "constructor": "jux.theme(name: string)",
-      "fluentMethods": [
-        {
-          "name": "load",
-          "params": "(name)",
-          "returns": "this",
-          "description": "Set load"
-        }
-      ],
-      "example": "jux.theme('dark');                    // Load vendor theme from lib/themes/"
+      "example": "jux.style('body { margin: 0; }');"
     },
     {
       "name": "Chart",
       "category": "Data Components",
       "description": "Chart component options",
-      "constructor": "jux.chart(componentId: string, options: ChartOptions = {})",
+      "constructor": "jux.chart(id: string, options: ChartOptions = {})",
       "fluentMethods": [
         {
           "name": "type",
@@ -291,7 +213,7 @@
       "name": "List",
       "category": "Data Components",
       "description": "List item interface",
-      "constructor": "jux.list(componentId: string, options: ListOptions = {})",
+      "constructor": "jux.list(id: string, options: ListOptions = {})",
       "fluentMethods": [
         {
           "name": "items",
@@ -323,6 +245,18 @@
           "returns": "this",
           "description": "Set selectable"
         },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
         {
           "name": "add",
           "params": "(item, index?)",
@@ -372,7 +306,7 @@
       "name": "Table",
       "category": "Data Components",
       "description": "Table column configuration",
-      "constructor": "jux.table(componentId: string, options: TableOptions = {})",
+      "constructor": "jux.table(id: string, options: TableOptions = {})",
       "fluentMethods": [
         {
           "name": "columns",
@@ -410,6 +344,18 @@
           "returns": "this",
           "description": "Set allowHtml"
         },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -426,16 +372,16 @@
       "example": "// Auto-generate columns from data"
     },
     {
-      "name": "Button",
+      "name": "Alert",
       "category": "UI Components",
-      "description": "Button component options",
-      "constructor": "jux.button(componentId: string, options: ButtonOptions = {})",
+      "description": "Alert component options",
+      "constructor": "jux.alert(id: string, options: AlertOptions = {})",
       "fluentMethods": [
         {
-          "name": "label",
+          "name": "message",
           "params": "(value)",
           "returns": "this",
-          "description": "Set label"
+          "description": "Set message"
         },
         {
           "name": "variant",
@@ -443,33 +389,6 @@
           "returns": "this",
           "description": "Set variant"
         },
-        {
-          "name": "disabled",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set disabled"
-        },
-        {
-          "name": "render",
-          "params": "(targetId?)",
-          "returns": "this",
-          "description": "Set render"
-        },
-        {
-          "name": "renderTo",
-          "params": "(juxComponent)",
-          "returns": "this",
-          "description": "Set renderTo"
-        }
-      ],
-      "example": "const btn = jux.button('myButton', { label: 'Click Me', onClick: () => console.log('clicked') });"
-    },
-    {
-      "name": "Card",
-      "category": "UI Components",
-      "description": "Action configuration for card actions",
-      "constructor": "jux.card(componentId: string, options: CardOptions = {})",
-      "fluentMethods": [
         {
           "name": "title",
           "params": "(value)",
@@ -477,34 +396,34 @@
           "description": "Set title"
         },
         {
-          "name": "subtitle",
+          "name": "dismissible",
           "params": "(value)",
           "returns": "this",
-          "description": "Set subtitle"
+          "description": "Set dismissible"
         },
         {
-          "name": "content",
+          "name": "icon",
           "params": "(value)",
           "returns": "this",
-          "description": "Set content"
+          "description": "Set icon"
         },
         {
-          "name": "image",
+          "name": "style",
           "params": "(value)",
           "returns": "this",
-          "description": "Set image"
+          "description": "Set style"
         },
         {
-          "name": "actions",
+          "name": "class",
           "params": "(value)",
           "returns": "this",
-          "description": "Set actions"
+          "description": "Set class"
         },
         {
-          "name": "variant",
-          "params": "(value)",
+          "name": "autoDismiss",
+          "params": "(delay)",
           "returns": "this",
-          "description": "Set variant"
+          "description": "Set autoDismiss"
         },
         {
           "name": "render",
@@ -519,55 +438,49 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "const card = jux.card('myCard', {"
+      "example": "jux.alert('my-alert', {"
     },
     {
-      "name": "Code",
+      "name": "Badge",
       "category": "UI Components",
-      "description": "Code component options",
-      "constructor": "jux.code(componentId: string, options: CodeOptions = {})",
+      "description": "Badge component options",
+      "constructor": "jux.badge(id: string, options: BadgeOptions = {})",
       "fluentMethods": [
         {
-          "name": "code",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set code"
-        },
-        {
-          "name": "language",
+          "name": "text",
           "params": "(value)",
           "returns": "this",
-          "description": "Set language"
+          "description": "Set text"
         },
         {
-          "name": "title",
+          "name": "variant",
           "params": "(value)",
           "returns": "this",
-          "description": "Set title"
+          "description": "Set variant"
         },
         {
-          "name": "showLineNumbers",
+          "name": "size",
           "params": "(value)",
           "returns": "this",
-          "description": "Set showLineNumbers"
+          "description": "Set size"
         },
         {
-          "name": "highlightLines",
+          "name": "pill",
           "params": "(value)",
           "returns": "this",
-          "description": "Set highlightLines"
+          "description": "Set pill"
         },
         {
-          "name": "maxHeight",
+          "name": "style",
           "params": "(value)",
           "returns": "this",
-          "description": "Set maxHeight"
+          "description": "Set style"
         },
         {
-          "name": "wrap",
+          "name": "class",
           "params": "(value)",
           "returns": "this",
-          "description": "Set wrap"
+          "description": "Set class"
         },
         {
           "name": "render",
@@ -582,88 +495,79 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "const codeBlock = jux.code('myCode', {"
+      "example": "jux.badge('status', {"
     },
     {
-      "name": "Container",
+      "name": "Button",
       "category": "UI Components",
-      "description": "Container options",
-      "constructor": "jux.container(componentId: string, options: ContainerOptions = {})",
+      "description": "Button component options",
+      "constructor": "jux.button(id: string, options?: ButtonOptions)",
       "fluentMethods": [
         {
-          "name": "direction",
+          "name": "label",
           "params": "(value)",
           "returns": "this",
-          "description": "Set direction"
+          "description": "Set label"
         },
         {
-          "name": "layout",
+          "name": "icon",
           "params": "(value)",
           "returns": "this",
-          "description": "Set layout"
+          "description": "Set icon"
         },
         {
-          "name": "minWidth",
+          "name": "variant",
           "params": "(value)",
           "returns": "this",
-          "description": "Set minWidth"
+          "description": "Set variant"
         },
         {
-          "name": "gap",
+          "name": "size",
           "params": "(value)",
           "returns": "this",
-          "description": "Set gap"
+          "description": "Set size"
         },
         {
-          "name": "justify",
+          "name": "disabled",
           "params": "(value)",
           "returns": "this",
-          "description": "Set justify"
+          "description": "Set disabled"
         },
         {
-          "name": "align",
+          "name": "loading",
           "params": "(value)",
           "returns": "this",
-          "description": "Set align"
+          "description": "Set loading"
         },
         {
-          "name": "wrap",
+          "name": "iconPosition",
           "params": "(value)",
           "returns": "this",
-          "description": "Set wrap"
+          "description": "Set iconPosition"
         },
         {
-          "name": "add",
-          "params": "(component)",
+          "name": "fullWidth",
+          "params": "(value)",
           "returns": "this",
-          "description": "Set add"
-        }
-      ],
-      "example": "const container = jux.container('myContainer', {"
-    },
-    {
-      "name": "Footer",
-      "category": "UI Components",
-      "description": "Footer component options",
-      "constructor": "jux.footer(componentId: string, options: FooterOptions = {})",
-      "fluentMethods": [
+          "description": "Set fullWidth"
+        },
         {
-          "name": "content",
+          "name": "type",
           "params": "(value)",
           "returns": "this",
-          "description": "Set content"
+          "description": "Set type"
         },
         {
-          "name": "copyright",
+          "name": "style",
           "params": "(value)",
           "returns": "this",
-          "description": "Set copyright"
+          "description": "Set style"
         },
         {
-          "name": "links",
+          "name": "class",
           "params": "(value)",
           "returns": "this",
-          "description": "Set links"
+          "description": "Set class"
         },
         {
           "name": "render",
@@ -678,13 +582,13 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "const footer = jux.footer('myFooter', {"
+      "example": "jux.button('myButton').label('Click Me').click(() => console.log('hi')).render();"
     },
     {
-      "name": "Header",
+      "name": "Card",
       "category": "UI Components",
-      "description": "Header component options",
-      "constructor": "jux.header(componentId: string, options: HeaderOptions = {})",
+      "description": "Card component options",
+      "constructor": "jux.card(id: string, options: CardOptions = {})",
       "fluentMethods": [
         {
           "name": "title",
@@ -693,22 +597,46 @@
           "description": "Set title"
         },
         {
-          "name": "logo",
+          "name": "subtitle",
           "params": "(value)",
           "returns": "this",
-          "description": "Set logo"
+          "description": "Set subtitle"
         },
         {
-          "name": "navigation",
+          "name": "content",
           "params": "(value)",
           "returns": "this",
-          "description": "Set navigation"
+          "description": "Set content"
         },
         {
-          "name": "sticky",
+          "name": "image",
           "params": "(value)",
           "returns": "this",
-          "description": "Set sticky"
+          "description": "Set image"
+        },
+        {
+          "name": "variant",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set variant"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "withActions",
+          "params": "()",
+          "returns": "this",
+          "description": "Set withActions"
         },
         {
           "name": "render",
@@ -723,49 +651,61 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "const header = jux.header('myHeader', {"
+      "example": "const card = jux.card('myCard', {"
     },
     {
-      "name": "Hero",
+      "name": "Checkbox",
       "category": "UI Components",
-      "description": "Hero component options",
-      "constructor": "jux.hero(componentId: string, options: HeroOptions = {})",
+      "description": "Checkbox component options",
+      "constructor": "jux.checkbox(id: string, options: CheckboxOptions = {})",
       "fluentMethods": [
         {
-          "name": "title",
+          "name": "label",
           "params": "(value)",
           "returns": "this",
-          "description": "Set title"
+          "description": "Set label"
         },
         {
-          "name": "subtitle",
+          "name": "checked",
           "params": "(value)",
           "returns": "this",
-          "description": "Set subtitle"
+          "description": "Set checked"
         },
         {
-          "name": "cta",
+          "name": "disabled",
           "params": "(value)",
           "returns": "this",
-          "description": "Set cta"
+          "description": "Set disabled"
         },
         {
-          "name": "ctaLink",
+          "name": "name",
           "params": "(value)",
           "returns": "this",
-          "description": "Set ctaLink"
+          "description": "Set name"
         },
         {
-          "name": "backgroundImage",
+          "name": "value",
           "params": "(value)",
           "returns": "this",
-          "description": "Set backgroundImage"
+          "description": "Set value"
         },
         {
-          "name": "variant",
+          "name": "style",
           "params": "(value)",
           "returns": "this",
-          "description": "Set variant"
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "bind",
+          "params": "(stateObj)",
+          "returns": "this",
+          "description": "Set bind"
         },
         {
           "name": "render",
@@ -780,49 +720,49 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "const hero = jux.hero('myHero', {"
+      "example": "jux.checkbox('agree', {"
     },
     {
-      "name": "Input",
+      "name": "Code",
       "category": "UI Components",
-      "description": "Input component options",
-      "constructor": "jux.input(componentId: string, options: InputOptions = {})",
+      "description": "Code component options",
+      "constructor": "jux.code(id: string, content?: string, language?: string)",
       "fluentMethods": [
         {
-          "name": "type",
+          "name": "code",
           "params": "(value)",
           "returns": "this",
-          "description": "Set type"
+          "description": "Set code"
         },
         {
-          "name": "label",
+          "name": "language",
           "params": "(value)",
           "returns": "this",
-          "description": "Set label"
+          "description": "Set language"
         },
         {
-          "name": "placeholder",
+          "name": "lineNumbers",
           "params": "(value)",
           "returns": "this",
-          "description": "Set placeholder"
+          "description": "Set lineNumbers"
         },
         {
-          "name": "value",
+          "name": "highlight",
           "params": "(value)",
           "returns": "this",
-          "description": "Set value"
+          "description": "Set highlight"
         },
         {
-          "name": "required",
+          "name": "style",
           "params": "(value)",
           "returns": "this",
-          "description": "Set required"
+          "description": "Set style"
         },
         {
-          "name": "disabled",
+          "name": "class",
           "params": "(value)",
           "returns": "this",
-          "description": "Set disabled"
+          "description": "Set class"
         },
         {
           "name": "render",
@@ -837,64 +777,118 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "const input = jux.input('myInput', {"
+      "example": "const code = jux.code('myCode', 'console.log(\"hello\")', 'javascript');"
     },
     {
-      "name": "Main",
+      "name": "Container",
       "category": "UI Components",
-      "description": "Main component options",
-      "constructor": "jux.main(componentId: string, options: MainOptions = {})",
+      "description": "Container options",
+      "constructor": "jux.container(id: string, options: ContainerOptions = {})",
       "fluentMethods": [
         {
-          "name": "content",
+          "name": "class",
           "params": "(value)",
           "returns": "this",
-          "description": "Set content"
+          "description": "Set class"
         },
         {
-          "name": "padding",
+          "name": "style",
           "params": "(value)",
           "returns": "this",
-          "description": "Set padding"
+          "description": "Set style"
         },
         {
-          "name": "render",
-          "params": "(targetId?)",
+          "name": "direction",
+          "params": "(value)",
           "returns": "this",
-          "description": "Set render"
+          "description": "Set direction"
         },
         {
-          "name": "renderTo",
-          "params": "(juxComponent)",
+          "name": "gap",
+          "params": "(value)",
           "returns": "this",
-          "description": "Set renderTo"
+          "description": "Set gap"
+        },
+        {
+          "name": "align",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set align"
+        },
+        {
+          "name": "justify",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set justify"
+        },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
         }
       ],
-      "example": "const main = jux.main('myMain', {"
+      "example": "// Plain container"
     },
     {
-      "name": "Menu",
+      "name": "Datepicker",
       "category": "UI Components",
-      "description": "Menu item configuration",
-      "constructor": "jux.menu(componentId: string, options: MenuOptions = {})",
+      "description": "DatePicker component options",
+      "constructor": "jux.datepicker(id: string, options: DatePickerOptions = {})",
       "fluentMethods": [
         {
-          "name": "items",
+          "name": "value",
           "params": "(value)",
           "returns": "this",
-          "description": "Set items"
+          "description": "Set value"
         },
         {
-          "name": "addItem",
-          "params": "(item)",
+          "name": "min",
+          "params": "(value)",
           "returns": "this",
-          "description": "Set addItem"
+          "description": "Set min"
         },
         {
-          "name": "orientation",
+          "name": "max",
           "params": "(value)",
           "returns": "this",
-          "description": "Set orientation"
+          "description": "Set max"
+        },
+        {
+          "name": "placeholder",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set placeholder"
+        },
+        {
+          "name": "disabled",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set disabled"
+        },
+        {
+          "name": "name",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set name"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "bind",
+          "params": "(stateObj)",
+          "returns": "this",
+          "description": "Set bind"
         },
         {
           "name": "render",
@@ -909,13 +903,13 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "const menu = jux.menu('myMenu', {"
+      "example": "jux.datepicker('start-date', {"
     },
     {
-      "name": "Modal",
+      "name": "Dialog",
       "category": "UI Components",
-      "description": "Modal component options",
-      "constructor": "jux.modal(componentId: string, options: ModalOptions = {})",
+      "description": "Dialog component options",
+      "constructor": "jux.dialog(id: string, options: DialogOptions = {})",
       "fluentMethods": [
         {
           "name": "title",
@@ -924,40 +918,40 @@
           "description": "Set title"
         },
         {
-          "name": "content",
+          "name": "message",
           "params": "(value)",
           "returns": "this",
-          "description": "Set content"
+          "description": "Set message"
         },
         {
-          "name": "showCloseButton",
+          "name": "confirmText",
           "params": "(value)",
           "returns": "this",
-          "description": "Set showCloseButton"
+          "description": "Set confirmText"
         },
         {
-          "name": "closeOnBackdropClick",
+          "name": "cancelText",
           "params": "(value)",
           "returns": "this",
-          "description": "Set closeOnBackdropClick"
+          "description": "Set cancelText"
         },
         {
-          "name": "size",
+          "name": "variant",
           "params": "(value)",
           "returns": "this",
-          "description": "Set size"
+          "description": "Set variant"
         },
         {
-          "name": "open",
-          "params": "()",
+          "name": "style",
+          "params": "(value)",
           "returns": "this",
-          "description": "Set open"
+          "description": "Set style"
         },
         {
-          "name": "close",
-          "params": "()",
+          "name": "class",
+          "params": "(value)",
           "returns": "this",
-          "description": "Set close"
+          "description": "Set class"
         },
         {
           "name": "render",
@@ -972,13 +966,13 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "const modal = jux.modal('myModal', {"
+      "example": "jux.dialog('confirm-delete', {"
     },
     {
-      "name": "Nav",
+      "name": "Dropdown",
       "category": "UI Components",
-      "description": "Nav item configuration",
-      "constructor": "jux.nav(componentId: string, options: NavOptions = {})",
+      "description": "Dropdown menu item",
+      "constructor": "jux.dropdown(id: string, options: DropdownOptions = {})",
       "fluentMethods": [
         {
           "name": "items",
@@ -993,10 +987,28 @@
           "description": "Set addItem"
         },
         {
-          "name": "variant",
+          "name": "trigger",
           "params": "(value)",
           "returns": "this",
-          "description": "Set variant"
+          "description": "Set trigger"
+        },
+        {
+          "name": "position",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set position"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
         },
         {
           "name": "render",
@@ -1011,73 +1023,76 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "const nav = jux.nav('myNav', {"
+      "example": "jux.dropdown('actions', {"
     },
     {
-      "name": "Node",
+      "name": "Element",
       "category": "UI Components",
-      "description": "Node component options",
-      "constructor": "jux.node(componentId: string, options: NodeOptions = {})",
+      "description": "Element component options",
+      "constructor": "jux.element(id: string, options: ElementOptions = {})",
       "fluentMethods": [
         {
-          "name": "tagType",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set tagType"
-        },
+          "name": "render",
+          "params": "(targetId?: string)",
+          "returns": "Element",
+          "description": "Render component to DOM"
+        }
+      ],
+      "example": "const div = jux.element('myDiv', { tagType: 'div', className: 'container' });"
+    },
+    {
+      "name": "Fileupload",
+      "category": "UI Components",
+      "description": "FileUpload component options",
+      "constructor": "jux.fileupload(id: string, options: FileUploadOptions = {})",
+      "fluentMethods": [
         {
-          "name": "className",
+          "name": "accept",
           "params": "(value)",
           "returns": "this",
-          "description": "Set className"
+          "description": "Set accept"
         },
         {
-          "name": "addClass",
+          "name": "multiple",
           "params": "(value)",
           "returns": "this",
-          "description": "Set addClass"
+          "description": "Set multiple"
         },
         {
-          "name": "removeClass",
+          "name": "maxSize",
           "params": "(value)",
           "returns": "this",
-          "description": "Set removeClass"
+          "description": "Set maxSize"
         },
         {
-          "name": "textContent",
+          "name": "disabled",
           "params": "(value)",
           "returns": "this",
-          "description": "Set textContent"
+          "description": "Set disabled"
         },
         {
-          "name": "innerHTML",
+          "name": "text",
           "params": "(value)",
           "returns": "this",
-          "description": "Set innerHTML"
-        },
-        {
-          "name": "attr",
-          "params": "(name, value)",
-          "returns": "this",
-          "description": "Set attr"
+          "description": "Set text"
         },
         {
-          "name": "attrs",
-          "params": "(attributes, string>)",
+          "name": "dragText",
+          "params": "(value)",
           "returns": "this",
-          "description": "Set attrs"
+          "description": "Set dragText"
         },
         {
           "name": "style",
-          "params": "(property, value)",
+          "params": "(value)",
           "returns": "this",
           "description": "Set style"
         },
         {
-          "name": "styles",
-          "params": "(styles, string>)",
+          "name": "class",
+          "params": "(value)",
           "returns": "this",
-          "description": "Set styles"
+          "description": "Set class"
         },
         {
           "name": "render",
@@ -1092,49 +1107,43 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "const div = jux.node('myDiv', { tagType: 'div', className: 'container' });"
+      "example": "jux.fileupload('docs', {"
     },
     {
-      "name": "Sidebar",
+      "name": "Footer",
       "category": "UI Components",
-      "description": "Sidebar component options",
-      "constructor": "jux.sidebar(componentId: string, options: SidebarOptions = {})",
+      "description": "Footer component options",
+      "constructor": "jux.footer(id: string, options: FooterOptions = {})",
       "fluentMethods": [
         {
-          "name": "title",
+          "name": "content",
           "params": "(value)",
           "returns": "this",
-          "description": "Set title"
+          "description": "Set content"
         },
         {
-          "name": "width",
+          "name": "copyright",
           "params": "(value)",
           "returns": "this",
-          "description": "Set width"
+          "description": "Set copyright"
         },
         {
-          "name": "position",
+          "name": "links",
           "params": "(value)",
           "returns": "this",
-          "description": "Set position"
+          "description": "Set links"
         },
         {
-          "name": "collapsible",
+          "name": "class",
           "params": "(value)",
           "returns": "this",
-          "description": "Set collapsible"
+          "description": "Set class"
         },
         {
-          "name": "collapsed",
+          "name": "style",
           "params": "(value)",
           "returns": "this",
-          "description": "Set collapsed"
-        },
-        {
-          "name": "toggle",
-          "params": "()",
-          "returns": "this",
-          "description": "Set toggle"
+          "description": "Set style"
         },
         {
           "name": "render",
@@ -1149,43 +1158,1298 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "const sidebar = jux.sidebar('mySidebar', {"
+      "example": "const footer = jux.footer('myFooter', {"
     },
     {
-      "name": "Tabs",
+      "name": "Header",
       "category": "UI Components",
-      "description": "Tab configuration",
-      "constructor": "jux.tabs(componentId: string, options: TabsOptions = {})",
+      "description": "Header component options",
+      "constructor": "jux.header(id: string, options: HeaderOptions = {})",
       "fluentMethods": [
         {
-          "name": "tabs",
+          "name": "title",
           "params": "(value)",
           "returns": "this",
-          "description": "Set tabs"
+          "description": "Set title"
         },
         {
-          "name": "addTab",
-          "params": "(tab)",
+          "name": "logo",
+          "params": "(value)",
           "returns": "this",
-          "description": "Set addTab"
+          "description": "Set logo"
         },
         {
-          "name": "activeTab",
+          "name": "navigation",
           "params": "(value)",
           "returns": "this",
-          "description": "Set activeTab"
-        }
-      ],
-      "example": "const tabs = jux.tabs('myTabs', {"
-    },
-    {
-      "name": "View",
-      "category": "UI Components",
-      "description": "View component options",
-      "constructor": "jux.view(componentId: string, options: ViewOptions = {})",
-      "fluentMethods": [
+          "description": "Set navigation"
+        },
         {
-          "name": "title",
+          "name": "sticky",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set sticky"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        },
+        {
+          "name": "renderTo",
+          "params": "(juxComponent)",
+          "returns": "this",
+          "description": "Set renderTo"
+        }
+      ],
+      "example": "const header = jux.header('myHeader', {"
+    },
+    {
+      "name": "Heading",
+      "category": "UI Components",
+      "description": "Heading options",
+      "constructor": "jux.heading(id: string, options: HeadingOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "level",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set level"
+        },
+        {
+          "name": "text",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set text"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        }
+      ],
+      "example": "jux.heading('title', { level: 1, text: 'Welcome' }).render('#app');"
+    },
+    {
+      "name": "Helpers",
+      "category": "UI Components",
+      "description": "Component helper utilities",
+      "constructor": "jux.helpers(id: string)",
+      "fluentMethods": [],
+      "example": "jux.helpers('id').render()"
+    },
+    {
+      "name": "Hero",
+      "category": "UI Components",
+      "description": "Hero component options",
+      "constructor": "jux.hero(id: string, options: HeroOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "title",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set title"
+        },
+        {
+          "name": "subtitle",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set subtitle"
+        },
+        {
+          "name": "cta",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set cta"
+        },
+        {
+          "name": "ctaLink",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set ctaLink"
+        },
+        {
+          "name": "backgroundImage",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set backgroundImage"
+        },
+        {
+          "name": "variant",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set variant"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        },
+        {
+          "name": "renderTo",
+          "params": "(juxComponent)",
+          "returns": "this",
+          "description": "Set renderTo"
+        }
+      ],
+      "example": "const hero = jux.hero('myHero', {"
+    },
+    {
+      "name": "Include",
+      "category": "UI Components",
+      "description": "Include - Include external resources (CSS, JS, images, fonts, etc.)",
+      "constructor": "jux.include(urlOrFile: string)",
+      "fluentMethods": [
+        {
+          "name": "withCss",
+          "params": "()",
+          "returns": "this",
+          "description": "Set withCss"
+        },
+        {
+          "name": "withJs",
+          "params": "(options?)",
+          "returns": "this",
+          "description": "Set withJs"
+        },
+        {
+          "name": "withModule",
+          "params": "()",
+          "returns": "this",
+          "description": "Set withModule"
+        },
+        {
+          "name": "withImage",
+          "params": "()",
+          "returns": "this",
+          "description": "Set withImage"
+        },
+        {
+          "name": "withFont",
+          "params": "()",
+          "returns": "this",
+          "description": "Set withFont"
+        },
+        {
+          "name": "withPreload",
+          "params": "(as?)",
+          "returns": "this",
+          "description": "Set withPreload"
+        },
+        {
+          "name": "withPrefetch",
+          "params": "()",
+          "returns": "this",
+          "description": "Set withPrefetch"
+        },
+        {
+          "name": "with",
+          "params": "(options)",
+          "returns": "this",
+          "description": "Set with"
+        },
+        {
+          "name": "inHead",
+          "params": "()",
+          "returns": "this",
+          "description": "Set inHead"
+        },
+        {
+          "name": "inBody",
+          "params": "()",
+          "returns": "this",
+          "description": "Set inBody"
+        },
+        {
+          "name": "async",
+          "params": "()",
+          "returns": "this",
+          "description": "Set async"
+        },
+        {
+          "name": "defer",
+          "params": "()",
+          "returns": "this",
+          "description": "Set defer"
+        },
+        {
+          "name": "crossOrigin",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set crossOrigin"
+        },
+        {
+          "name": "integrity",
+          "params": "(hash)",
+          "returns": "this",
+          "description": "Set integrity"
+        },
+        {
+          "name": "render",
+          "params": "()",
+          "returns": "this",
+          "description": "Set render"
+        },
+        {
+          "name": "remove",
+          "params": "()",
+          "returns": "this",
+          "description": "Set remove"
+        }
+      ],
+      "example": "jux.include('styles.css');"
+    },
+    {
+      "name": "Input",
+      "category": "UI Components",
+      "description": "Input component options",
+      "constructor": "jux.input(id: string, options: InputOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "type",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set type"
+        },
+        {
+          "name": "value",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set value"
+        },
+        {
+          "name": "placeholder",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set placeholder"
+        },
+        {
+          "name": "label",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set label"
+        },
+        {
+          "name": "required",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set required"
+        },
+        {
+          "name": "disabled",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set disabled"
+        },
+        {
+          "name": "name",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set name"
+        },
+        {
+          "name": "rows",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set rows"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "bind",
+          "params": "(stateObj)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        },
+        {
+          "name": "renderTo",
+          "params": "(juxComponent)",
+          "returns": "this",
+          "description": "Set renderTo"
+        }
+      ],
+      "example": "jux.input('username')"
+    },
+    {
+      "name": "Loading",
+      "category": "UI Components",
+      "description": "Loading component options",
+      "constructor": "jux.loading(id: string, options: LoadingOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "variant",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set variant"
+        },
+        {
+          "name": "size",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set size"
+        },
+        {
+          "name": "text",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set text"
+        },
+        {
+          "name": "fullscreen",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set fullscreen"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        },
+        {
+          "name": "renderTo",
+          "params": "(juxComponent)",
+          "returns": "this",
+          "description": "Set renderTo"
+        }
+      ],
+      "example": "jux.loading('my-spinner', {"
+    },
+    {
+      "name": "Main",
+      "category": "UI Components",
+      "description": "Main component options",
+      "constructor": "jux.main(id: string, options: MainOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "content",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set content"
+        },
+        {
+          "name": "padding",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set padding"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        },
+        {
+          "name": "renderTo",
+          "params": "(juxComponent)",
+          "returns": "this",
+          "description": "Set renderTo"
+        }
+      ],
+      "example": "const main = jux.main('myMain', {"
+    },
+    {
+      "name": "Menu",
+      "category": "UI Components",
+      "description": "Menu item configuration",
+      "constructor": "jux.menu(id: string, options: MenuOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "items",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set items"
+        },
+        {
+          "name": "addItem",
+          "params": "(item)",
+          "returns": "this",
+          "description": "Set addItem"
+        },
+        {
+          "name": "orientation",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set orientation"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        },
+        {
+          "name": "renderTo",
+          "params": "(juxComponent)",
+          "returns": "this",
+          "description": "Set renderTo"
+        }
+      ],
+      "example": "const menu = jux.menu('myMenu', {"
+    },
+    {
+      "name": "Modal",
+      "category": "UI Components",
+      "description": "Modal component options",
+      "constructor": "jux.modal(id: string, options: ModalOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "title",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set title"
+        },
+        {
+          "name": "content",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set content"
+        },
+        {
+          "name": "showCloseButton",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set showCloseButton"
+        },
+        {
+          "name": "closeOnBackdropClick",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set closeOnBackdropClick"
+        },
+        {
+          "name": "size",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set size"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "open",
+          "params": "()",
+          "returns": "this",
+          "description": "Set open"
+        },
+        {
+          "name": "close",
+          "params": "()",
+          "returns": "this",
+          "description": "Set close"
+        },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        },
+        {
+          "name": "renderTo",
+          "params": "(juxComponent)",
+          "returns": "this",
+          "description": "Set renderTo"
+        }
+      ],
+      "example": "const modal = jux.modal('myModal', {"
+    },
+    {
+      "name": "Nav",
+      "category": "UI Components",
+      "description": "Nav item configuration",
+      "constructor": "jux.nav(id: string, options: NavOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "items",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set items"
+        },
+        {
+          "name": "addItem",
+          "params": "(item)",
+          "returns": "this",
+          "description": "Set addItem"
+        },
+        {
+          "name": "variant",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set variant"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        },
+        {
+          "name": "renderTo",
+          "params": "(juxComponent)",
+          "returns": "this",
+          "description": "Set renderTo"
+        }
+      ],
+      "example": "const nav = jux.nav('myNav', {"
+    },
+    {
+      "name": "Paragraph",
+      "category": "UI Components",
+      "description": "Paragraph options",
+      "constructor": "jux.paragraph(id: string, options: ParagraphOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "text",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set text"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        }
+      ],
+      "example": "jux.paragraph('intro', { text: 'Welcome to JUX' }).render('#app');"
+    },
+    {
+      "name": "Progress",
+      "category": "UI Components",
+      "description": "Progress component options",
+      "constructor": "jux.progress(id: string, options: ProgressOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "value",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set value"
+        },
+        {
+          "name": "max",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set max"
+        },
+        {
+          "name": "label",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set label"
+        },
+        {
+          "name": "showPercentage",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set showPercentage"
+        },
+        {
+          "name": "variant",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set variant"
+        },
+        {
+          "name": "size",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set size"
+        },
+        {
+          "name": "striped",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set striped"
+        },
+        {
+          "name": "animated",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set animated"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "bind",
+          "params": "(stateObj)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        },
+        {
+          "name": "renderTo",
+          "params": "(juxComponent)",
+          "returns": "this",
+          "description": "Set renderTo"
+        }
+      ],
+      "example": "jux.progress('upload', {"
+    },
+    {
+      "name": "Radio",
+      "category": "UI Components",
+      "description": "Radio option",
+      "constructor": "jux.radio(id: string, options: RadioOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "options",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set options"
+        },
+        {
+          "name": "addOption",
+          "params": "(option)",
+          "returns": "this",
+          "description": "Set addOption"
+        },
+        {
+          "name": "value",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set value"
+        },
+        {
+          "name": "name",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set name"
+        },
+        {
+          "name": "orientation",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set orientation"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "bind",
+          "params": "(stateObj)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        },
+        {
+          "name": "renderTo",
+          "params": "(juxComponent)",
+          "returns": "this",
+          "description": "Set renderTo"
+        }
+      ],
+      "example": "jux.radio('size', {"
+    },
+    {
+      "name": "Req",
+      "category": "UI Components",
+      "description": "Request information and utilities",
+      "constructor": "jux.req()",
+      "fluentMethods": [],
+      "example": "jux.req('id').render()"
+    },
+    {
+      "name": "Select",
+      "category": "UI Components",
+      "description": "Select option",
+      "constructor": "jux.select(id: string, options: SelectOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "options",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set options"
+        },
+        {
+          "name": "addOption",
+          "params": "(option)",
+          "returns": "this",
+          "description": "Set addOption"
+        },
+        {
+          "name": "value",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set value"
+        },
+        {
+          "name": "placeholder",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set placeholder"
+        },
+        {
+          "name": "disabled",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set disabled"
+        },
+        {
+          "name": "name",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set name"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "bind",
+          "params": "(stateObj)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        },
+        {
+          "name": "renderTo",
+          "params": "(juxComponent)",
+          "returns": "this",
+          "description": "Set renderTo"
+        }
+      ],
+      "example": "jux.select('country', {"
+    },
+    {
+      "name": "Sidebar",
+      "category": "UI Components",
+      "description": "Sidebar component options",
+      "constructor": "jux.sidebar(id: string, options: SidebarOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "title",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set title"
+        },
+        {
+          "name": "width",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set width"
+        },
+        {
+          "name": "position",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set position"
+        },
+        {
+          "name": "collapsible",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set collapsible"
+        },
+        {
+          "name": "collapsed",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set collapsed"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "toggle",
+          "params": "()",
+          "returns": "this",
+          "description": "Set toggle"
+        },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        },
+        {
+          "name": "renderTo",
+          "params": "(juxComponent)",
+          "returns": "this",
+          "description": "Set renderTo"
+        }
+      ],
+      "example": "const sidebar = jux.sidebar('mySidebar', {"
+    },
+    {
+      "name": "Switch",
+      "category": "UI Components",
+      "description": "Switch component options",
+      "constructor": "jux.switch(id: string, options: SwitchOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "label",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set label"
+        },
+        {
+          "name": "checked",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set checked"
+        },
+        {
+          "name": "disabled",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set disabled"
+        },
+        {
+          "name": "name",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set name"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "bind",
+          "params": "(stateObj)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "toggle",
+          "params": "()",
+          "returns": "this",
+          "description": "Set toggle"
+        },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        },
+        {
+          "name": "renderTo",
+          "params": "(juxComponent)",
+          "returns": "this",
+          "description": "Set renderTo"
+        }
+      ],
+      "example": "jux.switch('notifications', {"
+    },
+    {
+      "name": "Tabs",
+      "category": "UI Components",
+      "description": "Tab configuration",
+      "constructor": "jux.tabs(id: string, options: TabsOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "tabs",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set tabs"
+        },
+        {
+          "name": "addTab",
+          "params": "(tab)",
+          "returns": "this",
+          "description": "Set addTab"
+        },
+        {
+          "name": "activeTab",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set activeTab"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        },
+        {
+          "name": "renderTo",
+          "params": "(juxComponent)",
+          "returns": "this",
+          "description": "Set renderTo"
+        }
+      ],
+      "example": "const tabs = jux.tabs('myTabs', {"
+    },
+    {
+      "name": "Theme-toggle",
+      "category": "UI Components",
+      "description": "Theme configuration",
+      "constructor": "jux.theme-toggle(id: string, options: ThemeToggleOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "setTheme",
+          "params": "(themeId)",
+          "returns": "this",
+          "description": "Set setTheme"
+        },
+        {
+          "name": "addTheme",
+          "params": "(theme)",
+          "returns": "this",
+          "description": "Set addTheme"
+        },
+        {
+          "name": "themes",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set themes"
+        },
+        {
+          "name": "variant",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set variant"
+        },
+        {
+          "name": "showLabel",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set showLabel"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        },
+        {
+          "name": "renderTo",
+          "params": "(juxComponent)",
+          "returns": "this",
+          "description": "Set renderTo"
+        }
+      ],
+      "example": "// Simple light/dark toggle"
+    },
+    {
+      "name": "Token-calculator",
+      "category": "UI Components",
+      "description": "Token Calculator component - Compare framework token costs",
+      "constructor": "jux.token-calculator(id: string, options: TokenCalculatorOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "lines",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set lines"
+        },
+        {
+          "name": "multiplier",
+          "params": "(framework, value)",
+          "returns": "this",
+          "description": "Set multiplier"
+        },
+        {
+          "name": "tokensPerLine",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set tokensPerLine"
+        },
+        {
+          "name": "showComparison",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set showComparison"
+        },
+        {
+          "name": "animated",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set animated"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        }
+      ],
+      "example": "jux.token-calculator('id').render()"
+    },
+    {
+      "name": "Tooltip",
+      "category": "UI Components",
+      "description": "Tooltip component options",
+      "constructor": "jux.tooltip(id: string, options: TooltipOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "text",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set text"
+        },
+        {
+          "name": "position",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set position"
+        },
+        {
+          "name": "trigger",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set trigger"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "attachTo",
+          "params": "(target)",
+          "returns": "this",
+          "description": "Set attachTo"
+        },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        },
+        {
+          "name": "renderTo",
+          "params": "(juxComponent)",
+          "returns": "this",
+          "description": "Set renderTo"
+        }
+      ],
+      "example": "// Attach to existing element"
+    },
+    {
+      "name": "View",
+      "category": "UI Components",
+      "description": "View component options",
+      "constructor": "jux.view(id: string, options: ViewOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "title",
           "params": "(value)",
           "returns": "this",
           "description": "Set title"
@@ -1204,8 +2468,53 @@
         }
       ],
       "example": "const view = jux.view('myView', {"
+    },
+    {
+      "name": "Write",
+      "category": "UI Components",
+      "description": "Write - Simple content writer with no component tracking",
+      "constructor": "jux.write(content: string, options: WriteOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "render",
+          "params": "(targetSelector?)",
+          "returns": "this",
+          "description": "Set render"
+        },
+        {
+          "name": "replace",
+          "params": "(targetSelector?)",
+          "returns": "this",
+          "description": "Set replace"
+        },
+        {
+          "name": "before",
+          "params": "(targetSelector)",
+          "returns": "this",
+          "description": "Set before"
+        },
+        {
+          "name": "after",
+          "params": "(targetSelector)",
+          "returns": "this",
+          "description": "Set after"
+        },
+        {
+          "name": "prepend",
+          "params": "(targetSelector?)",
+          "returns": "this",
+          "description": "Set prepend"
+        },
+        {
+          "name": "append",
+          "params": "(targetSelector?)",
+          "returns": "this",
+          "description": "Set append"
+        }
+      ],
+      "example": "// Write text (defaults to body)"
     }
   ],
   "version": "1.0.0",
-  "lastUpdated": "2026-01-16T23:06:56.674Z"
+  "lastUpdated": "2026-01-20T15:24:57.688Z"
 }