- {#if item.title}
{item.title}
{/if}
- {#if item.description}
{item.description}
{/if}
+
+
+ {#if item.title || item.label}
+
{item.title || item.label}
+ {/if}
+ {#if item.subtitle}
+
{item.subtitle}
+ {/if}
+ {#if item.description}
+
{item.description}
+ {/if}
+ {#if item.actionLabel || item.href}
+
+ {item.actionLabel || "Learn more"}
+
+
+ {/if}
- {#if item.footer}{/if}
{/each}
+
+
+
}
}
diff --git a/.publish/ui/components/divider.wrn b/.publish/ui/components/divider.wrn
index a724621f..b7a19a9f 100644
--- a/.publish/ui/components/divider.wrn
+++ b/.publish/ui/components/divider.wrn
@@ -6,7 +6,64 @@ component Divider {
orientation = "horizontal"
class = ""
}
+
view {
- {#if label}{label}{/if}
+
+ {#if orientation === "vertical"}
+
+ {:else}
+
+
+
+ {#if label}
+
+ {label}
+
+
+ {/if}
+
+ {/if}
+
+
+
+
}
}
diff --git a/.publish/ui/package.json b/.publish/ui/package.json
index da46abcd..701dc069 100644
--- a/.publish/ui/package.json
+++ b/.publish/ui/package.json
@@ -1,6 +1,6 @@
{
"name": "@wrnexus/ui",
- "version": "0.5.11",
+ "version": "0.5.12",
"type": "module",
"description": "@wrnexus/ui — part of the WrNexus framework.",
"license": "MIT",
@@ -26,7 +26,7 @@
"./ui.css": "./ui.css"
},
"dependencies": {
- "@wrnexus/core": "^0.5.11"
+ "@wrnexus/core": "^0.5.12"
},
"files": [
"dist",
diff --git a/.publish/uploader/package.json b/.publish/uploader/package.json
index b34477a8..497cb9b0 100644
--- a/.publish/uploader/package.json
+++ b/.publish/uploader/package.json
@@ -1,6 +1,6 @@
{
"name": "@wrnexus/uploader",
- "version": "0.5.11",
+ "version": "0.5.12",
"type": "module",
"description": "@wrnexus/uploader — part of the WrNexus framework.",
"license": "MIT",
@@ -21,7 +21,7 @@
}
},
"dependencies": {
- "@wrnexus/core": "^0.5.11"
+ "@wrnexus/core": "^0.5.12"
},
"files": [
"dist"
diff --git a/.publish/validation/package.json b/.publish/validation/package.json
index 55b5b329..fe4fc651 100644
--- a/.publish/validation/package.json
+++ b/.publish/validation/package.json
@@ -1,6 +1,6 @@
{
"name": "@wrnexus/validation",
- "version": "0.5.11",
+ "version": "0.5.12",
"type": "module",
"description": "@wrnexus/validation — part of the WrNexus framework.",
"license": "MIT",
diff --git a/.wrnexus-backups/ui-card-event-fix-2026-07-30T13-25-51-608Z/Card.wrn b/.wrnexus-backups/ui-card-event-fix-2026-07-30T13-25-51-608Z/Card.wrn
new file mode 100644
index 00000000..d20d2e48
--- /dev/null
+++ b/.wrnexus-backups/ui-card-event-fix-2026-07-30T13-25-51-608Z/Card.wrn
@@ -0,0 +1,284 @@
+component Card {
+ props {
+ @event click = function
+ @event action = function
+ @event navigate = function
+ @event dismiss = function
+ @event load = function
+ @event error = function
+ title = "Card title"
+ subtitle = ""
+ description = ""
+ header = ""
+ footer = ""
+ imageSrc = ""
+ imageAlt = ""
+ imagePosition = "top"
+ actionLabel = ""
+ actionHref = ""
+ headerActions = []
+ navigation = []
+ activeNav = ""
+ mobileNavigation = false
+ alertTitle = ""
+ alertDescription = ""
+ empty = false
+ emptyTitle = "No data to show"
+ emptyIcon = "icon-[lucide--inbox]"
+ items = []
+ size = "md"
+ color = "primary"
+ variant = "default"
+ layout = "vertical"
+ align = "left"
+ hover = "none"
+ scrollable = false
+ maxHeight = "18rem"
+ dismissible = false
+ ariaLabel = ""
+ class = ""
+ }
+
+ state dismissed = false
+
+ view {
+
+ {#if items.length > 0}
+
+ {#each items as item, itemIndex}
+
+ {#if item.imageSrc || item.image}
+
+ {/if}
+
+
+ {#if item.title || item.label}
+
{item.title || item.label}
+ {/if}
+ {#if item.subtitle}
+
{item.subtitle}
+ {/if}
+ {#if item.description}
+
{item.description}
+ {/if}
+ {#if item.actionLabel || item.href}
+
+ {item.actionLabel || "Learn more"}
+
+
+ {/if}
+
+ {/each}
+
+ {:else}
+
+ {#if imageSrc && imagePosition === "overlay"}
+
+
+
+
+ {#if header || title || subtitle || headerActions.length > 0 || dismissible}
+
+ {/if}
+
+ {#if navigation.length > 0}
+
+ {/if}
+
+ {#if alertTitle || alertDescription}
+
+ {#if alertTitle}
+
{alertTitle}
+ {/if}
+ {#if alertDescription}
+
{alertDescription}
+ {/if}
+
+ {/if}
+
+
+ {#if empty}
+
+ {:else}
+ {#if description}
+
{description}
+ {/if}
+
+ {/if}
+
+
+ {#if footer || actionLabel}
+
+ {/if}
+
+ {/if}
+
+ {#if items.length > 0}
+
+ {#each items as item, itemIndex}
+
+ {#if item.imageSrc || item.image}
+
+ {/if}
+
+
+ {#if item.title || item.label}
+
{item.title || item.label}
+ {/if}
+ {#if item.subtitle}
+
{item.subtitle}
+ {/if}
+ {#if item.description}
+
{item.description}
+ {/if}
+ {#if item.actionLabel || item.href}
+
+ {item.actionLabel || "Learn more"}
+
+
+ {/if}
+
+ {/each}
+
+ {:else}
+
+ {#if imageSrc && imagePosition === "overlay"}
+
+
+
+
+ {#if header || title || subtitle || headerActions.length > 0 || dismissible}
+
+ {/if}
+
+ {#if navigation.length > 0}
+
+ {/if}
+
+ {#if alertTitle || alertDescription}
+
+ {#if alertTitle}
+
{alertTitle}
+ {/if}
+ {#if alertDescription}
+
{alertDescription}
+ {/if}
+
+ {/if}
+
+
+ {#if empty}
+
+ {:else}
+ {#if description}
+
{description}
+ {/if}
+
+ {/if}
+
+
+ {#if footer || actionLabel}
+
+ {/if}
+
+ {/if}
+
+ {#each items as item, index}
+
+
+
+
+
+
+
+
+ {#if item.content}
{item.content}
{/if}
+
+ {#if item.children && item.children.length > 0}
+
+ {#each item.children as child, childIndex}
+
+
+
+
+
+
+ {/each}
+
+ {/if}
+
+
+
+ {/each}
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/AdvancedRangeSlider.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/AdvancedRangeSlider.wrn
new file mode 100644
index 00000000..51090087
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/AdvancedRangeSlider.wrn
@@ -0,0 +1,23 @@
+component AdvancedRangeSlider {
+ props {
+ @event input = function
+ @event change = function
+ @event start = function
+ @event end = function
+ size = "default"
+ color = "primary"
+ title = "Advanced Range Slider"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/AdvancedSelect.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/AdvancedSelect.wrn
new file mode 100644
index 00000000..6bd6fe16
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/AdvancedSelect.wrn
@@ -0,0 +1,456 @@
+component AdvancedSelect {
+ props {
+ size = "default"
+ color = "primary"
+ label = "Advanced Select"
+ name = ""
+ value = ""
+ values = []
+ options = []
+ groups = []
+ placeholder = "Select an option"
+ placeholderIcon = ""
+ searchPlaceholder = "Search options…"
+ multiple = false
+ searchable = true
+ defaultOpen = false
+ clearable = true
+ allowEmpty = true
+ tags = false
+ disabled = false
+ required = false
+ invalid = false
+ validationMessage = ""
+ helpText = ""
+ loading = false
+ loadingLabel = "Loading options…"
+ emptyLabel = "No options found"
+ selectedOptionsLabel = "Selected options"
+ clearLabel = "Clear selection"
+ createLabel = "Create"
+ loadMoreLabel = "Load more"
+ searchMode = "contains"
+ searchFields = "label,description"
+ minSearchLength = 0
+ searchResultLimit = 0
+ maxSelections = 0
+ showCounter = false
+ counterTemplate = "{selected} selected"
+ optionTemplate = "default"
+ selectedTemplate = "default"
+ closeOnSelect = true
+ scrollToSelected = true
+ fixed = false
+ placement = "bottom"
+ remote = false
+ remoteUrl = ""
+ remoteQueryParam = "q"
+ remoteDebounce = 250
+ remoteAutoLoad = true
+ infinite = false
+ hasMore = false
+ page = 1
+ class = ""
+ @event search = function
+ @event select = function
+ @event change = function
+ @event clear = function
+ @event open = function
+ @event close = function
+ @event load = function
+ @event error = function
+ }
+
+ state open = defaultOpen
+ state query = ""
+ state activeIndex = -1
+ state selectedValue = value
+ state selectedValues = values
+
+ functions {
+ function allOptions() {
+ return [...groups.flatMap((group) => group.options || []), ...options]
+ }
+
+ function searchableText(option) {
+ return ((option.label || "") + " " + (option.description || "")).toLowerCase()
+ }
+
+ function matches(option) {
+ if (!query || query.length < Number(minSearchLength || 0)) {
+ return true
+ }
+ if (searchMode === "startsWith") {
+ return searchableText(option).startsWith(query.toLowerCase())
+ }
+ if (searchMode === "exact") {
+ return searchableText(option) === query.toLowerCase()
+ }
+ return searchableText(option).includes(query.toLowerCase())
+ }
+
+ function matchingOptions(list) {
+ return list.filter((option) => matches(option))
+ }
+
+ function visibleOptions(list) {
+ if (searchResultLimit > 0) {
+ return matchingOptions(list).slice(0, Number(searchResultLimit))
+ }
+ return matchingOptions(list)
+ }
+
+ function flatVisibleOptions() {
+ return visibleOptions(allOptions())
+ }
+
+ function isSelected(option) {
+ return (
+ multiple
+ ? selectedValues.includes(option.value)
+ : selectedValue === option.value
+ )
+ }
+
+ function selectedOptions() {
+ return allOptions().filter((option) => isSelected(option))
+ }
+
+ function selectedCount() {
+ return multiple ? selectedValues.length : selectedValue ? 1 : 0
+ }
+
+ function counterText() {
+ return (
+ maxSelections
+ ? selectedCount() + " / " + maxSelections + " selected"
+ : selectedCount() + " selected"
+ )
+ }
+
+ function selectedText() {
+ return (
+ multiple
+ ? selectedValues.join(", ")
+ : selectedOptions().length
+ ? selectedOptions()[0].label
+ : ""
+ )
+ }
+
+ function triggerText() {
+ return selectedCount() ? selectedText() : placeholder
+ }
+
+ function canSelect(option) {
+ if (option.disabled) {
+ return false
+ }
+ if (!multiple || isSelected(option)) {
+ return true
+ }
+ if (maxSelections <= 0) {
+ return true
+ }
+ return selectedCount() < maxSelections
+ }
+
+ function chooseSingle(option) {
+ if (!canSelect(option)) {
+ return
+ }
+ selectedValue = option.value
+ query = ""
+ if (closeOnSelect) {
+ open = false
+ }
+ }
+
+ function chooseMultiple(option) {
+ if (!canSelect(option)) {
+ return
+ }
+ if (isSelected(option)) {
+ selectedValues = selectedValues.filter((item) => item !== option.value)
+ } else {
+ selectedValues = selectedValues.concat([option.value])
+ }
+ query = ""
+ }
+
+ function chooseOption(option) {
+ if (multiple) {
+ chooseMultiple(option)
+ return
+ }
+ chooseSingle(option)
+ }
+
+ function clearSelection(event) {
+ event.stopPropagation()
+ selectedValue = ""
+ selectedValues = []
+ query = ""
+ open = false
+ }
+
+ function toggle() {
+ if (disabled) {
+ return;
+ };
+ open = !open;
+ activeIndex = open && flatVisibleOptions().length ? 0 : -1;
+ }
+
+ function moveActive(direction) {
+ if (!flatVisibleOptions().length) {
+ return
+ }
+ activeIndex = (activeIndex + direction + flatVisibleOptions().length) % flatVisibleOptions().length
+ }
+
+ function handleKeydown(event) {
+ if (disabled) {
+ return
+ }
+ if (event.key === "ArrowDown") {
+ event.preventDefault()
+ if (!open) {
+ open = true
+ }
+ moveActive(1)
+ } else if (event.key === "ArrowUp") {
+ event.preventDefault()
+ if (!open) {
+ open = true
+ }
+ moveActive(-1)
+ } else if (event.key === "Enter" || event.key === " ") {
+ event.preventDefault()
+ if (!open) {
+ open = true
+ } else if (activeIndex >= 0) {
+ chooseOption(flatVisibleOptions()[activeIndex])
+ }
+ } else if (event.key === "Escape") {
+ open = false
+ } else if (event.key === "Home" && open) {
+ event.preventDefault()
+ activeIndex = 0
+ } else if (event.key === "End" && open) {
+ event.preventDefault()
+ activeIndex = flatVisibleOptions().length - 1
+ }
+ }
+
+ function optionIndex(option) {
+ return flatVisibleOptions().findIndex((item) => item.value === option.value)
+ }
+ }
+
+ view {
+
+
+
+ {counterText()}
+
+
+
+
+
+
+
+
+
+ {#if searchable}
+
+ {/if}
+
+
Enter at least {minSearchLength} characters.
+
+
+ {loadingLabel}
+
+
+ {#each groups as group}
+ {#if visibleOptions(group.options || []).length}
+
+
{group.label}
+ {#each group.options || [] as option}
+
+ {/each}
+
+ {/if}
+ {/each}
+
+ {#each options as option}
+
+ {/each}
+
+ {#if !loading && !flatVisibleOptions().length}
+
{emptyLabel}
+ {/if}
+
+
+ {#if tags && query && !allOptions().some((option) => option.label.toLowerCase() === query.toLowerCase())}
+
+ {/if}
+
+
+
+
+
+ {#if helpText && !validationMessage}
{helpText}{/if}
+
{validationMessage}
+
+
+
+ {brand}Unified identity and access
+
+
+
+ {eyebrow}
+
+
{title}
+ {#if description}
+
{description}
+ {/if}
+
+ {#each features as item}
+
+
+
+ {item.label}
+ {#if item.description}
+ {item.description}
+ {/if}
+
+
+ {/each}
+
+
+
+
+ {#each visibleMembers() as item}
+
+
+ {#if item.src}
+ 
+ {:else if item.initials}
+
+ {item.initials}
+
+ {:else}
+
+
+ {/if}
+
+
+ {#if showTooltips && (item.tooltip || item.name)}
+
+ {item.tooltip || item.name}
+
+ {/if}
+
+ {/each}
+
+ {#if hiddenMembers().length > 0}
+
+
+
+
+
+ {/if}
+
+
+ {/if}
+ {#if dot || dotOnly}
+
+ {/if}
+ {#if icon && iconPosition === "start"}
+
+ {/if}
+ {#if !dotOnly}
+
+ {label}
+
+ {/if}
+ {#if icon && iconPosition === "end"}
+
+ {/if}
+ {#if dismissible}
+
+ {/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Blockquote.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Blockquote.wrn
new file mode 100644
index 00000000..dc476675
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Blockquote.wrn
@@ -0,0 +1,67 @@
+component Blockquote {
+ props {
+ quote = "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."
+ citation = ""
+ citationTitle = ""
+ citationUrl = ""
+ avatarSrc = ""
+ avatarAlt = ""
+ size = "md"
+ color = "primary"
+ align = "left"
+ variant = "default"
+ quoteMark = true
+ italic = true
+ class = ""
+ }
+
+ view {
+
+
+ {#if quoteMark}
+ “
+ {/if}
+
+
+ {#if quote}
+
{quote}
+ {:else}
+
+ {/if}
+
+
+ {#if citation || citationTitle || avatarSrc}
+
+ {#if avatarSrc}
+
+ {/if}
+
+
+ {#if citation}
+ {#if citationUrl}
+ {citation}
+ {:else}
+ {citation}
+ {/if}
+ {/if}
+ {#if citationTitle}{citationTitle}{/if}
+
+
+ {/if}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Breadcrumb.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Breadcrumb.wrn
new file mode 100644
index 00000000..1fee40b5
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Breadcrumb.wrn
@@ -0,0 +1,19 @@
+component Breadcrumb {
+ props {
+ @event navigate = function
+ @event click = function
+ size = "default"
+ color = "primary"
+ label = "Breadcrumb"
+ items = []
+ active = ""
+ orientation = "horizontal"
+ class = ""
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/ButtonGroup.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/ButtonGroup.wrn
new file mode 100644
index 00000000..7430aba7
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/ButtonGroup.wrn
@@ -0,0 +1,89 @@
+component ButtonGroup {
+ props {
+ @event click = function
+ @event select = function
+ @event change = function
+ items = []
+ value = ""
+ size = "md"
+ color = "primary"
+ variant = "default"
+ orientation = "horizontal"
+ responsive = false
+ attached = true
+ selectable = false
+ toolbar = false
+ disabled = false
+ ariaLabel = "Button group"
+ class = ""
+ }
+
+ state selectedValue = value
+
+ functions {
+ function itemValue(item, index) {
+ return item.value || item.label || String(index)
+ }
+
+ function selectItem(item, index) {
+ previousValue = selectedValue
+ nextValue = itemValue(item, index)
+
+ $emit("select", {
+ value: nextValue,
+ previousValue: previousValue,
+ item: item,
+ index: index
+ })
+
+ if (selectable && previousValue !== nextValue) {
+ selectedValue = nextValue
+ $emit("change", {
+ value: nextValue,
+ previousValue: previousValue,
+ item: item,
+ index: index
+ })
+ }
+ }
+ }
+
+ view {
+
+ {#if items}
+ {#each items as item, index}
+
+ {/each}
+ {/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/CTASection.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/CTASection.wrn
new file mode 100644
index 00000000..36453a83
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/CTASection.wrn
@@ -0,0 +1,150 @@
+component CTASection {
+ props {
+ eyebrow = ""
+ title = "Ready to get started?"
+ description = ""
+ icon = ""
+ align = "center"
+ size = "default"
+ color = "primary"
+ variant = "solid"
+ primaryLabel = "Get started"
+ primaryHref = "#"
+ primaryIcon = ""
+ secondaryLabel = ""
+ secondaryHref = ""
+ secondaryIcon = ""
+ backgroundImage = ""
+ maxWidth = "xl"
+ class = ""
+ }
+
+ view {
+
+
+ {#if backgroundImage}
+
+ {/if}
+
+
+
+
+
+
+ {#if icon}
+
+
+
+ {/if}
+
+ {#if eyebrow}
+
+ {eyebrow}
+
+ {/if}
+
+
+ {title}
+
+
+ {#if description}
+
+ {description}
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if items.length > 0}
+
+ {#each items as item, itemIndex}
+
+ {#if item.imageSrc || item.image}
+
+ {/if}
+
+
+ {#if item.title || item.label}
+
{item.title || item.label}
+ {/if}
+ {#if item.subtitle}
+
{item.subtitle}
+ {/if}
+ {#if item.description}
+
{item.description}
+ {/if}
+ {#if item.actionLabel || item.href}
+
+ {item.actionLabel || "Learn more"}
+
+
+ {/if}
+
+ {/each}
+
+ {:else}
+
+ {#if imageSrc && imagePosition === "overlay"}
+
+
+
+
+ {#if header || title || subtitle || headerActions.length > 0 || dismissible}
+
+ {/if}
+
+ {#if navigation.length > 0}
+
+ {/if}
+
+ {#if alertTitle || alertDescription}
+
+ {#if alertTitle}
+
{alertTitle}
+ {/if}
+ {#if alertDescription}
+
{alertDescription}
+ {/if}
+
+ {/if}
+
+
+ {#if empty}
+
+ {:else}
+ {#if description}
+
{description}
+ {/if}
+
+ {/if}
+
+
+ {#if footer || actionLabel}
+
+ {/if}
+
+ {/if}
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/ChatBubble.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/ChatBubble.wrn
new file mode 100644
index 00000000..947f6995
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/ChatBubble.wrn
@@ -0,0 +1,147 @@
+component ChatBubble {
+ props {
+ @event action = function
+ @event messageClick = function
+ @event avatarClick = function
+ @event linkClick = function
+ size = "default"
+ color = "primary"
+ title = ""
+ description = ""
+ items = []
+ oneSided = false
+ showAvatars = false
+ showMetadata = false
+ ariaLabel = "Conversation"
+ variant = "default"
+ class = ""
+ }
+
+ functions {
+ function messageDirection(item) {
+ return item.direction === "outgoing" ? "outgoing" : "incoming"
+ }
+
+ function selectMessage(item, index) {
+ $emit("messageClick", {
+ item: item,
+ index: index,
+ direction: messageDirection(item)
+ })
+ }
+
+ function selectAvatar(sourceEvent, item, index) {
+ sourceEvent.stopPropagation()
+ $emit("avatarClick", {
+ item: item,
+ index: index,
+ direction: messageDirection(item)
+ })
+ }
+
+ function selectLink(sourceEvent, link, item, index) {
+ sourceEvent.stopPropagation()
+ $emit("linkClick", {
+ link: link,
+ item: item,
+ index: index
+ })
+ }
+
+ function selectAction(sourceEvent, item, index) {
+ sourceEvent.stopPropagation()
+ $emit("action", {
+ action: item.action || "retry",
+ item: item,
+ index: index
+ })
+ }
+ }
+
+ view {
+
+ {#if title || description}
+
+ {/if}
+
+ {#if items.length}
+
+ {#each items as item, index}
+
+
+ {#if showAvatars && (item.avatarSrc || item.avatarFallback)}
+
+ {/if}
+
+
+ {#if item.title}
{item.title}
{/if}
+ {#if item.text}
{item.text}
{/if}
+ {#if item.bullets && item.bullets.length}
+
+ {#each item.bullets as bullet}- {bullet}
{/each}
+
+ {/if}
+ {#if item.links && item.links.length}
+
+ {/if}
+
+
+ {/each}
+
+
+ {#if options.length || cornerHint}
+
+ {label}
+
+ {#if cornerHint}
+
+ {cornerHint}
+
+ {/if}
+ {/if}
+
+ {#if options.length}
+
+ {#each options as option}
+
+ {/each}
+
+ {:else}
+
+
+
+ {/if}
+ {#if helperText}
+
+ {helperText}
+
+ {/if}
+
+ {error}
+
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Collapse.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Collapse.wrn
new file mode 100644
index 00000000..531c31f1
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Collapse.wrn
@@ -0,0 +1,95 @@
+component Collapse {
+ props {
+ @event toggle = function
+ @event open = function
+ @event close = function
+ size = "default"
+ color = "primary"
+ items = []
+ multiple = false
+ mode = "panel"
+ initialOpenIndexes = []
+ ariaLabel = "Collapsible content"
+ class = ""
+ }
+
+ state openIndexes = initialOpenIndexes
+
+ functions {
+ function isOpen(index) {
+ return openIndexes.includes(index)
+ }
+
+ function toggleItem(index, item, opening) {
+ if (item.disabled) {
+ return
+ }
+ opening = !isOpen(index)
+ if (opening) {
+ if (multiple) {
+ openIndexes = openIndexes.concat(index)
+ } else {
+ openIndexes = [index]
+ }
+ $emit("open", { index: index, item: item })
+ } else {
+ openIndexes = openIndexes.filter((openIndex) => openIndex !== index)
+ $emit("close", { index: index, item: item })
+ }
+ $emit("toggle", {
+ index: index,
+ item: item,
+ open: opening,
+ openIndexes: openIndexes
+ })
+ }
+ }
+
+ view {
+
+ {#each items as item, index}
+
+ {#if mode === "inline" && item.preview}
+ {item.preview}
+ {/if}
+
+
+
+
+
+ {#if item.title}
{item.title}
{/if}
+ {#if item.content}
{item.content}
{/if}
+ {#if item.links && item.links.length}
+
+ {/if}
+
+
+
{#if cornerHint}{cornerHint}{/if}
+
{#if icon}{/if}
+ {#if helperText}
{helperText}{/if}
{error}
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Combobox.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Combobox.wrn
new file mode 100644
index 00000000..7f82992b
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Combobox.wrn
@@ -0,0 +1,386 @@
+component ComboBox {
+ props {
+ size = "default"
+ color = "primary"
+ label = "ComboBox"
+ name = ""
+ value = ""
+ options = []
+ groups = []
+ placeholder = "Search or select an option"
+ searchPlaceholder = "Start typing…"
+ clearable = true
+ allowCustomValue = false
+ disabled = false
+ required = false
+ invalid = false
+ validationMessage = ""
+ helpText = ""
+ loading = false
+ loadingLabel = "Loading suggestions…"
+ emptyLabel = "No matching options"
+ clearLabel = "Clear value"
+ toggleLabel = "Toggle suggestions"
+ searchMode = "contains"
+ searchFields = "label,description"
+ minSearchLength = 0
+ searchResultLimit = 0
+ optionTemplate = "default"
+ defaultOpen = false
+ closeOnSelect = true
+ fixed = false
+ placement = "bottom"
+ autocomplete = "off"
+ remote = false
+ remoteUrl = ""
+ remoteQueryParam = "q"
+ remoteDebounce = 250
+ remoteAutoLoad = true
+ infinite = false
+ hasMore = false
+ page = 1
+ loadMoreLabel = "Load more"
+ class = ""
+ @event search = function
+ @event select = function
+ @event change = function
+ @event clear = function
+ @event open = function
+ @event close = function
+ @event load = function
+ @event error = function
+ }
+
+ state open = defaultOpen
+ state query = ""
+ state selectedValue = value
+ state activeIndex = -1
+
+ functions {
+ function allOptions() {
+ return [...groups.flatMap((group) => group.options || []), ...options]
+ }
+
+ function searchableText(option) {
+ return ((option.label || "") + " " + (option.description || "")).toLowerCase()
+ }
+
+ function matches(option) {
+ if (!query || query.length < minSearchLength) {
+ return true
+ }
+ if (searchMode === "startsWith") {
+ return searchableText(option).startsWith(query.toLowerCase())
+ }
+ if (searchMode === "exact") {
+ return searchableText(option) === query.toLowerCase()
+ }
+ return searchableText(option).includes(query.toLowerCase())
+ }
+
+ function matchingOptions(list) {
+ return list.filter((option) => matches(option))
+ }
+
+ function visibleOptions(list) {
+ if (searchResultLimit > 0) {
+ return matchingOptions(list).slice(0, searchResultLimit)
+ }
+ return matchingOptions(list)
+ }
+
+ function flatVisibleOptions() {
+ return visibleOptions(allOptions())
+ }
+
+ function isSelected(option) {
+ return selectedValue === option.value
+ }
+
+ function selectedOptions() {
+ return allOptions().filter((option) => isSelected(option))
+ }
+
+ function selectedText() {
+ return selectedOptions().length ? selectedOptions()[0].label : selectedValue
+ }
+
+ function inputText() {
+ return query || selectedText()
+ }
+
+ function shouldShowDropdown() {
+ if (!open) {
+ return false
+ }
+ if (loading) {
+ return true
+ }
+ if (remote && query.length !== 0 && query.length < minSearchLength) {
+ return true
+ }
+ if (flatVisibleOptions().length) {
+ return true
+ }
+ return infinite && hasMore
+ }
+
+ function canSelect(option) {
+ return !option.disabled
+ }
+
+ function chooseOption(option) {
+ if (!canSelect(option)) {
+ return
+ }
+ selectedValue = option.value
+ query = option.label
+ activeIndex = optionIndex(option)
+ if (closeOnSelect) {
+ open = false
+ }
+ }
+
+ function updateQuery(event) {
+ query = event.target.value
+ selectedValue = allowCustomValue ? event.target.value : ""
+ open = true
+ activeIndex = flatVisibleOptions().length ? 0 : -1
+ }
+
+ function clearValue(event) {
+ if (event) {
+ event.stopPropagation()
+ }
+ query = ""
+ selectedValue = ""
+ activeIndex = -1
+ open = false
+ }
+
+ function openDropdown() {
+ if (!disabled) {
+ open = true
+ activeIndex = flatVisibleOptions().length ? 0 : -1
+ }
+ }
+
+ function closeDropdown() {
+ open = false
+ }
+
+ function toggle() {
+ if (open) {
+ closeDropdown()
+ } else {
+ openDropdown()
+ }
+ }
+
+ function setValue(nextValue) {
+ selectedValue = nextValue
+ query = ""
+ }
+
+ function moveActive(direction) {
+ if (!flatVisibleOptions().length) {
+ return
+ }
+ activeIndex = (activeIndex + direction + flatVisibleOptions().length) % flatVisibleOptions().length
+ }
+
+ function handleKeydown(event) {
+ if (disabled) {
+ return
+ }
+ if (event.key === "ArrowDown") {
+ event.preventDefault()
+ openDropdown()
+ moveActive(1)
+ } else if (event.key === "ArrowUp") {
+ event.preventDefault()
+ openDropdown()
+ moveActive(-1)
+ } else if (event.key === "Enter" && open && activeIndex >= 0) {
+ event.preventDefault()
+ chooseOption(flatVisibleOptions()[activeIndex])
+ } else if (event.key === "Escape") {
+ closeDropdown()
+ } else if (event.key === "Home" && open) {
+ event.preventDefault()
+ activeIndex = 0
+ } else if (event.key === "End" && open) {
+ event.preventDefault()
+ activeIndex = flatVisibleOptions().length - 1
+ }
+ }
+
+ function optionIndex(option) {
+ return flatVisibleOptions().findIndex((item) => item.value === option.value)
+ }
+ }
+
+ view {
+
+
+
+
+
+
+
+
+
+
+
+
+
Enter at least {minSearchLength} characters.
+
+
+ {loadingLabel}
+
+
+
+ {#each groups as group}
+ {#if visibleOptions(group.options || []).length}
+
+
{group.label}
+ {#each group.options || [] as option}
+
+ {/each}
+
+ {/if}
+ {/each}
+
+ {#each options as option}
+
+ {/each}
+
+
+
+
+
+ {#if !allowCustomValue}
+
+ {/if}
+
+ {#if helpText && !validationMessage}
{helpText}{/if}
+
{validationMessage}
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Container.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Container.wrn
new file mode 100644
index 00000000..bcc3a50f
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Container.wrn
@@ -0,0 +1,46 @@
+component Container {
+ props {
+ size = "default"
+ color = "primary"
+ columns = 2
+ gap = "md"
+ maxWidth = "xl"
+ class = ""
+ }
+
+ view {
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/ContextMenu.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/ContextMenu.wrn
new file mode 100644
index 00000000..7a8b1264
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/ContextMenu.wrn
@@ -0,0 +1,22 @@
+component ContextMenu {
+ props {
+ @event open = function
+ @event close = function
+ @event select = function
+ size = "default"
+ color = "primary"
+ title = "Context Menu"
+ description = ""
+ open = false
+ placement = "bottom"
+ closeLabel = "Close"
+ class = ""
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/CopyMarkup.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/CopyMarkup.wrn
new file mode 100644
index 00000000..ab506a30
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/CopyMarkup.wrn
@@ -0,0 +1,23 @@
+component CopyMarkup {
+ props {
+ @event copy = function
+ @event success = function
+ @event error = function
+ size = "default"
+ color = "primary"
+ label = "Copy Markup"
+ name = ""
+ value = ""
+ placeholder = ""
+ type = "text"
+ min = ""
+ max = ""
+ step = ""
+ disabled = false
+ required = false
+ class = ""
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/CustomScrollbar.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/CustomScrollbar.wrn
new file mode 100644
index 00000000..37ace07c
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/CustomScrollbar.wrn
@@ -0,0 +1,14 @@
+component CustomScrollbar {
+ props {
+ @event scroll = function
+ size = "default"
+ color = "primary"
+ columns = 2
+ gap = "md"
+ maxWidth = "xl"
+ class = ""
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/DataMap.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/DataMap.wrn
new file mode 100644
index 00000000..49a30b5e
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/DataMap.wrn
@@ -0,0 +1,21 @@
+component DataMap {
+ props {
+ @event select = function
+ @event change = function
+ size = "default"
+ color = "primary"
+ title = "Data Map"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/DataTable.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/DataTable.wrn
new file mode 100644
index 00000000..3ff347ea
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/DataTable.wrn
@@ -0,0 +1,19 @@
+component DataTable {
+ props {
+ @event sort = function
+ @event select = function
+ @event change = function
+ @event rowClick = function
+ @event pageChange = function
+ size = "default"
+ color = "primary"
+ caption = "Data Table"
+ columns = []
+ rows = []
+ striped = true
+ class = ""
+ }
+ view {
+ {caption}{#each columns as column}| {column.label} | {/each}
{#each rows as row}{#each columns as column}| {row[column.key]} | {/each}
{/each}
+
{#if cornerHint}{cornerHint}{/if}
+
{#if currentValue && !readonly && !disabled}{/if}
+
{#each days as day}{/each}
+ {#if helperText}
{helperText}{/if}
{error}
+
{#if src || srcdoc}
{:else}
{/if}
+ {#if orientation === "vertical"}
+
+ {:else}
+
+
+
+ {#if label}
+
+ {label}
+
+
+ {/if}
+
+ {/if}
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Drawer.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Drawer.wrn
new file mode 100644
index 00000000..641cef87
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Drawer.wrn
@@ -0,0 +1,21 @@
+component Drawer {
+ props {
+ @event open = function
+ @event close = function
+ size = "default"
+ color = "primary"
+ title = "Drawer"
+ description = ""
+ open = false
+ placement = "bottom"
+ closeLabel = "Close"
+ class = ""
+ }
+ view {
+
+
+ {#if description}
{description}
{/if}
+
+
+
+
+
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/FeatureCard.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/FeatureCard.wrn
new file mode 100644
index 00000000..93eb1906
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/FeatureCard.wrn
@@ -0,0 +1,113 @@
+component FeatureCard {
+ props {
+ icon = ""
+ title = "Feature"
+ description = ""
+ href = ""
+ actionLabel = "Learn more"
+ actionIcon = ""
+ badge = ""
+ badgeColor = "primary"
+ size = "default"
+ color = "primary"
+ variant = "default"
+ hover = "lift"
+ align = "left"
+ disabled = false
+ class = ""
+ }
+
+ view {
+
+
+
+
+ {#if icon}
+
+ {/if}
+
+
+ {#if badge}
+
+ {/if}
+
+ {title}
+
+
+ {#if description}
+
+ {description}
+
+ {/if}
+
+
+
+
+
+
+ {#if href && actionLabel}
+
+ {/if}
+
+
+ {#if href}
+
+ {/if}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/FeatureGrid.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/FeatureGrid.wrn
new file mode 100644
index 00000000..aa9d45a0
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/FeatureGrid.wrn
@@ -0,0 +1,53 @@
+component FeatureGrid {
+ props {
+ columns = 3
+ tabletColumns = 2
+ mobileColumns = 1
+ gap = "md"
+ minItemWidth = ""
+ equalHeight = true
+ align = "stretch"
+ maxWidth = "full"
+ class = ""
+ }
+
+ view {
+
+
+
+ }
+
+ style {
+ .wire-feature-grid-autofit {
+ grid-template-columns: repeat(auto-fit, minmax(var(--wire-feature-grid-min), 1fr));
+ }
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/FeatureIconCard.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/FeatureIconCard.wrn
new file mode 100644
index 00000000..1b985d39
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/FeatureIconCard.wrn
@@ -0,0 +1,78 @@
+component FeatureIconCard {
+ props {
+ icon = "icon-[lucide--sparkles]"
+ iconSize = "md"
+ iconVariant = "soft"
+ title = "Feature"
+ description = ""
+ href = ""
+ actionLabel = "Explore"
+ badge = ""
+ size = "default"
+ color = "primary"
+ variant = "default"
+ align = "left"
+ hover = "lift"
+ class = ""
+ }
+
+ view {
+
+
+
+
+ {#if badge}
+
+ {badge}
+
+ {/if}
+
+
+ {title}
+
+ {#if description}
+ {description}
+ {/if}
+
+
+
+ {#if href}
+
+ {/if}
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/FileInput.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/FileInput.wrn
new file mode 100644
index 00000000..b3ed2183
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/FileInput.wrn
@@ -0,0 +1,52 @@
+component FileInput {
+ props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event select = function
+ @event clear = function
+ @event invalid = function
+ size = "default"
+ color = "primary"
+ id = ""
+ name = ""
+ label = "File"
+ hiddenLabel = false
+ placeholder = "Choose a file"
+ value = ""
+ icon = "icon-[lucide--upload]"
+ iconPosition = "start"
+ accept = ""
+ multiple = false
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ variant = "normal"
+ readonly = false
+ disabled = false
+ required = false
+ class = ""
+ }
+ state selectedName = ""
+ functions {
+ function handleChange(sourceEvent) {
+ sourceEvent.stopPropagation()
+ selectedName = sourceEvent.currentTarget.files && sourceEvent.currentTarget.files.length ? sourceEvent.currentTarget.files[0].name : ""
+ $emit("input", { files: sourceEvent.currentTarget.files, name: name, sourceEvent: sourceEvent })
+ $emit("change", { files: sourceEvent.currentTarget.files, name: name, sourceEvent: sourceEvent })
+ if (selectedName) $emit("select", { files: sourceEvent.currentTarget.files, name: name, sourceEvent: sourceEvent })
+ else $emit("clear", { name: name, sourceEvent: sourceEvent })
+ }
+ function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { name: name, sourceEvent: sourceEvent }) }
+ function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/FileUpload.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/FileUpload.wrn
new file mode 100644
index 00000000..207d3571
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/FileUpload.wrn
@@ -0,0 +1,26 @@
+component FileUpload {
+ props {
+ @event select = function
+ @event upload = function
+ @event progress = function
+ @event success = function
+ @event error = function
+ @event cancel = function
+ @event remove = function
+ size = "default"
+ color = "primary"
+ title = "File Upload"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/FileUploadProgress.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/FileUploadProgress.wrn
new file mode 100644
index 00000000..329a5859
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/FileUploadProgress.wrn
@@ -0,0 +1,37 @@
+component FileUploadProgress {
+ props {
+ @event cancel = function
+ @event retry = function
+ @event complete = function
+ size = "default"
+ color = "primary"
+ label = "Progress"
+ value = 50
+ max = 100
+ showValue = true
+ fileName = ""
+ fileSize = ""
+ uploadedSize = ""
+ status = "uploading"
+ cancelLabel = "Cancel upload"
+ retryLabel = "Retry upload"
+ class = ""
+ }
+ state currentValue = value
+ state currentStatus = status
+ functions {
+ function percent() { if (!Number(max)) { return 0 } return Math.max(0, Math.min(100, Math.round(Number(currentValue) / Number(max) * 100))) }
+ function detail(sourceEvent) { return { value: currentValue, max: max, percent: percent(), status: currentStatus, fileName: fileName, sourceEvent: sourceEvent } }
+ function cancelUpload(sourceEvent) { currentStatus = "cancelled"; $emit("cancel", detail(sourceEvent)) }
+ function retryUpload(sourceEvent) { currentValue = 0; currentStatus = "uploading"; $emit("retry", detail(sourceEvent)) }
+ function completeUpload(sourceEvent) { currentValue = max; currentStatus = "complete"; $emit("complete", detail(sourceEvent)) }
+ }
+ view {
+
+
{#if fileName}{fileName}{#if uploadedSize || fileSize}{uploadedSize}{#if uploadedSize && fileSize} of {/if}{fileSize}{:else}{label}{/if}{:else}{label}{/if}{#if showValue}{percent()}%{/if}
+
+
{#if currentStatus === "uploading"}Uploading securely…{:else if currentStatus === "complete"}Upload complete{:else if currentStatus === "error"}Upload failed{:else}Upload cancelled{/if}
+
{#if currentStatus === "uploading"}{/if}{#if currentStatus === "error" || currentStatus === "cancelled"}{/if}
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Hero.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Hero.wrn
new file mode 100644
index 00000000..7613a2b6
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Hero.wrn
@@ -0,0 +1,149 @@
+component Hero {
+ props {
+ eyebrow = ""
+ title = "Build something remarkable"
+ highlight = ""
+ description = ""
+ align = "left"
+ size = "default"
+ color = "primary"
+ variant = "default"
+ primaryLabel = ""
+ primaryHref = ""
+ primaryIcon = ""
+ secondaryLabel = ""
+ secondaryHref = ""
+ secondaryIcon = ""
+ tertiaryLabel = ""
+ tertiaryHref = ""
+ badges = []
+ trustItems = []
+ maxWidth = "xl"
+ class = ""
+ }
+
+ view {
+
+
+ {#if variant === "gradient"}
+
+ {/if}
+
+
+
+
+ {#if eyebrow}
+
+
+ {eyebrow}
+
+ {/if}
+
+
+ {title}
+ {#if highlight}
+
+ {highlight}
+
+ {/if}
+
+
+ {#if description}
+
+ {description}
+
+ {/if}
+
+ {#if badges.length > 0}
+
+ {#each badges as badge}
+
+ {/each}
+
+ {/if}
+
+
+
+
+
+
+
+ {#if trustItems.length > 0}
+
+ {#each trustItems as item}
+
+
+ {item.label || item.title || item}
+
+ {/each}
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+ {#each actions as action, index}
+ {#if action.label}
+
+ {/if}
+ {/each}
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Image.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Image.wrn
new file mode 100644
index 00000000..881d5229
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Image.wrn
@@ -0,0 +1,47 @@
+component Image {
+ props {
+ size = "default"
+ color = "primary"
+ src = ""
+ alt = ""
+ width = ""
+ height = ""
+ loading = "lazy"
+ rounded = false
+ class = ""
+ }
+
+ view {
+
+ {#if src}
+ 
+ {:else}
+
+
+
+ {/if}
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Input.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Input.wrn
new file mode 100644
index 00000000..3e12c986
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Input.wrn
@@ -0,0 +1,92 @@
+component Input {
+ props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event invalid = function
+ @event keydown = function
+ @event keyup = function
+ size = "default"
+ color = "primary"
+ id = ""
+ name = ""
+ label = "Input"
+ hiddenLabel = false
+ placeholder = ""
+ value = ""
+ type = "text"
+ variant = "normal"
+ icon = ""
+ iconPosition = "start"
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ readonly = false
+ disabled = false
+ required = false
+ autocomplete = ""
+ inputmode = ""
+ minlength = ""
+ maxlength = ""
+ pattern = ""
+ min = ""
+ max = ""
+ step = ""
+ class = ""
+ }
+ functions {
+ function detail(sourceEvent) {
+ return { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }
+ }
+ function handleInput(sourceEvent) { sourceEvent.stopPropagation(); $emit("input", detail(sourceEvent)) }
+ function handleChange(sourceEvent) { sourceEvent.stopPropagation(); $emit("change", detail(sourceEvent)) }
+ function handleFocus(sourceEvent) { sourceEvent.stopPropagation(); $emit("focus", detail(sourceEvent)) }
+ function handleBlur(sourceEvent) { sourceEvent.stopPropagation(); $emit("blur", detail(sourceEvent)) }
+ function handleInvalid(sourceEvent) { sourceEvent.stopPropagation(); $emit("invalid", { value: sourceEvent.currentTarget.value, name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
+ function handleKeydown(sourceEvent) { sourceEvent.stopPropagation(); $emit("keydown", { key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
+ function handleKeyup(sourceEvent) { sourceEvent.stopPropagation(); $emit("keyup", { key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/InputGroup.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/InputGroup.wrn
new file mode 100644
index 00000000..aea3fd7a
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/InputGroup.wrn
@@ -0,0 +1,51 @@
+component InputGroup {
+ props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event submit = function
+ @event action = function
+ size = "default"
+ color = "primary"
+ id = ""
+ name = ""
+ label = "Input group"
+ hiddenLabel = false
+ value = ""
+ placeholder = ""
+ type = "text"
+ startText = ""
+ endText = ""
+ icon = ""
+ iconPosition = "start"
+ actionLabel = ""
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ variant = "normal"
+ readonly = false
+ disabled = false
+ required = false
+ class = ""
+ }
+ functions {
+ function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
+ function handleKeydown(sourceEvent) { if (sourceEvent.key === "Enter") { sourceEvent.stopPropagation(); $emit("submit", { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) } }
+ function handleAction(sourceEvent) { $emit("action", { name: name, sourceEvent: sourceEvent }) }
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/InputNumber.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/InputNumber.wrn
new file mode 100644
index 00000000..226922fd
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/InputNumber.wrn
@@ -0,0 +1,623 @@
+component InputNumber {
+ props {
+ size = "default"
+ color = "primary"
+ variant = "default"
+ class = ""
+
+ id = ""
+ name = "quantity"
+ value = 0
+ min = ""
+ max = ""
+ step = 1
+ precision = "auto"
+
+ label = ""
+ description = ""
+ helpText = ""
+ error = ""
+ invalid = false
+
+ prefix = ""
+ suffix = ""
+ placeholder = ""
+ autocomplete = "off"
+ inputMode = "decimal"
+ ariaLabel = ""
+
+ required = false
+ disabled = false
+ inputDisabled = false
+ buttonsDisabled = false
+ readonly = false
+ allowInput = true
+ keyboard = true
+ wheel = false
+ clamp = true
+ fullWidth = false
+ showButtons = true
+ showValidationMessage = true
+
+ decrementLabel = "Decrease value"
+ incrementLabel = "Increase value"
+ controlsLabel = "Quantity controls"
+ requiredMessage = "A value is required."
+ minMessage = "Value is below the minimum."
+ maxMessage = "Value is above the maximum."
+
+ @event input = function
+ @event change = function
+ @event increment = function
+ @event decrement = function
+ }
+
+ state currentValue = value
+ state committedValue = value
+
+ functions {
+ function inputId() {
+ if (id !== "") {
+ return id
+ }
+
+ if (name !== "") {
+ return name
+ }
+
+ return "input-number"
+ }
+
+ function descriptionId() {
+ return inputId() + "-description"
+ }
+
+ function messageId() {
+ return inputId() + "-message"
+ }
+
+ function componentColor() {
+ if (color === "secondary") {
+ return "var(--wire-color-secondary)"
+ }
+
+ if (color === "success") {
+ return "var(--wire-color-success)"
+ }
+
+ if (color === "warning") {
+ return "var(--wire-color-warning)"
+ }
+
+ if (color === "danger") {
+ return "var(--wire-color-danger)"
+ }
+
+ if (color === "info") {
+ return "var(--wire-color-info)"
+ }
+
+ return "var(--wire-color-primary)"
+ }
+
+ function hasMin() {
+ return min !== "" && min !== null && min !== undefined
+ }
+
+ function hasMax() {
+ return max !== "" && max !== null && max !== undefined
+ }
+
+ function isBlank() {
+ return currentValue === "" || currentValue === null || currentValue === undefined
+ }
+
+ function normalizedStep() {
+ return Number(step) > 0 ? Number(step) : 1
+ }
+
+ function inferredPrecision() {
+ if (precision !== "auto" && precision !== "") {
+ return Math.max(0, Number(precision) || 0)
+ }
+
+ if (String(normalizedStep()).includes(".")) {
+ return String(normalizedStep()).split(".")[1].length
+ }
+
+ return 0
+ }
+
+ function precisionFactor() {
+ return Math.pow(10, inferredPrecision())
+ }
+
+ function roundValue(nextValue) {
+ return Math.round(Number(nextValue) * precisionFactor()) / precisionFactor()
+ }
+
+ function clampValue(nextValue) {
+ nextValue = Number(nextValue)
+
+ if (hasMin() && nextValue < Number(min)) {
+ nextValue = Number(min)
+ }
+
+ if (hasMax() && nextValue > Number(max)) {
+ nextValue = Number(max)
+ }
+
+ return roundValue(nextValue)
+ }
+
+ function isBelowMin() {
+ return !isBlank() && hasMin() && Number(currentValue) < Number(min)
+ }
+
+ function isAboveMax() {
+ return !isBlank() && hasMax() && Number(currentValue) > Number(max)
+ }
+
+ function isInvalid() {
+ return (
+ invalid ||
+ error !== "" ||
+ (required && isBlank()) ||
+ isBelowMin() ||
+ isAboveMax()
+ )
+ }
+
+ function validationMessage() {
+ if (error !== "") {
+ return error
+ }
+
+ if (required && isBlank()) {
+ return requiredMessage
+ }
+
+ if (isBelowMin()) {
+ return minMessage
+ }
+
+ if (isAboveMax()) {
+ return maxMessage
+ }
+
+ return ""
+ }
+
+ function hasMessage() {
+ return (
+ helpText !== "" ||
+ (showValidationMessage && isInvalid() && validationMessage() !== "")
+ )
+ }
+
+ function describedBy() {
+ if (description !== "" && hasMessage()) {
+ return descriptionId() + " " + messageId()
+ }
+
+ if (description !== "") {
+ return descriptionId()
+ }
+
+ if (hasMessage()) {
+ return messageId()
+ }
+
+ return ""
+ }
+
+ function decrementDisabled() {
+ return (
+ disabled ||
+ readonly ||
+ buttonsDisabled ||
+ (hasMin() && !isBlank() && Number(currentValue) <= Number(min))
+ )
+ }
+
+ function incrementDisabled() {
+ return (
+ disabled ||
+ readonly ||
+ buttonsDisabled ||
+ (hasMax() && !isBlank() && Number(currentValue) >= Number(max))
+ )
+ }
+
+ function dispatchInputNumberEvent(
+ sourceEvent,
+ eventName,
+ action,
+ previousValue,
+ root,
+ customEvent
+ ) {
+ root = sourceEvent.currentTarget.closest("[data-wrn-input-number]")
+
+ if (!root && sourceEvent.target) {
+ root = sourceEvent.target.closest("[data-wrn-input-number]")
+ }
+
+ if (!root) {
+ return
+ }
+
+ customEvent = document.createEvent("CustomEvent")
+ customEvent.initCustomEvent(eventName, true, false, {
+ component: "InputNumber",
+ name: name,
+ value: currentValue,
+ previousValue: previousValue,
+ action: action,
+ min: hasMin() ? Number(min) : null,
+ max: hasMax() ? Number(max) : null,
+ step: normalizedStep(),
+ valid: !isInvalid()
+ })
+ root.dispatchEvent(customEvent)
+ }
+
+ function applyControlValue(nextValue, action, sourceEvent, previousValue) {
+ previousValue = currentValue
+ currentValue = clampValue(nextValue)
+ committedValue = currentValue
+
+ dispatchInputNumberEvent(
+ sourceEvent,
+ "input",
+ action,
+ previousValue
+ )
+ dispatchInputNumberEvent(
+ sourceEvent,
+ "change",
+ action,
+ previousValue
+ )
+ dispatchInputNumberEvent(
+ sourceEvent,
+ action,
+ action,
+ previousValue
+ )
+ }
+
+ function incrementValue(sourceEvent, nextValue) {
+ if (incrementDisabled()) {
+ return
+ }
+
+ if (isBlank()) {
+ nextValue = hasMin() ? Number(min) : normalizedStep()
+ } else {
+ nextValue =
+ Number(currentValue) +
+ normalizedStep() * (sourceEvent.shiftKey ? 10 : 1)
+ }
+
+ applyControlValue(nextValue, "increment", sourceEvent)
+ }
+
+ function decrementValue(sourceEvent, nextValue) {
+ if (decrementDisabled()) {
+ return
+ }
+
+ if (isBlank()) {
+ nextValue = hasMax() ? Number(max) : -normalizedStep()
+ } else {
+ nextValue =
+ Number(currentValue) -
+ normalizedStep() * (sourceEvent.shiftKey ? 10 : 1)
+ }
+
+ applyControlValue(nextValue, "decrement", sourceEvent)
+ }
+
+ function handleInput(sourceEvent, previousValue, nextValue) {
+ sourceEvent.stopPropagation()
+ previousValue = currentValue
+ nextValue = sourceEvent.target.value
+
+ if (nextValue === "") {
+ currentValue = ""
+ } else if (!Number.isNaN(Number(nextValue))) {
+ currentValue = roundValue(Number(nextValue))
+ }
+
+ dispatchInputNumberEvent(
+ sourceEvent,
+ "input",
+ "input",
+ previousValue
+ )
+ }
+
+ function handleChange(sourceEvent, previousValue) {
+ sourceEvent.stopPropagation()
+ previousValue = committedValue
+
+ if (!isBlank()) {
+ currentValue = clamp
+ ? clampValue(currentValue)
+ : roundValue(currentValue)
+ }
+
+ committedValue = currentValue
+
+ dispatchInputNumberEvent(
+ sourceEvent,
+ "change",
+ "change",
+ previousValue
+ )
+ }
+
+ function handleKeydown(sourceEvent) {
+ if (
+ !keyboard ||
+ disabled ||
+ readonly ||
+ inputDisabled ||
+ !allowInput
+ ) {
+ return
+ }
+
+ if (sourceEvent.key === "ArrowUp") {
+ sourceEvent.preventDefault()
+ incrementValue(sourceEvent)
+ } else if (sourceEvent.key === "ArrowDown") {
+ sourceEvent.preventDefault()
+ decrementValue(sourceEvent)
+ } else if (sourceEvent.key === "Home" && hasMin()) {
+ sourceEvent.preventDefault()
+ applyControlValue(Number(min), "decrement", sourceEvent)
+ } else if (sourceEvent.key === "End" && hasMax()) {
+ sourceEvent.preventDefault()
+ applyControlValue(Number(max), "increment", sourceEvent)
+ }
+ }
+
+ function handleWheel(sourceEvent) {
+ if (
+ !wheel ||
+ disabled ||
+ readonly ||
+ inputDisabled ||
+ !allowInput
+ ) {
+ return
+ }
+
+ sourceEvent.preventDefault()
+
+ if (sourceEvent.deltaY < 0) {
+ incrementValue(sourceEvent)
+ } else if (sourceEvent.deltaY > 0) {
+ decrementValue(sourceEvent)
+ }
+ }
+ }
+
+ view {
+
+ {#if label !== "" && variant !== "labeled" && variant !== "seat"}
+
+ {/if}
+
+ {#if description !== "" && variant !== "labeled" && variant !== "seat"}
+
+ {description}
+
+ {/if}
+
+
+ {#if variant === "horizontal" && showButtons}
+
+ {/if}
+
+
+ {#if variant === "labeled" || variant === "seat"}
+
+ {#if label !== ""}
+
+ {/if}
+
+ {#if description !== ""}
+
+ {description}
+
+ {/if}
+
+ {/if}
+
+
+ {#if prefix !== ""}
+
+ {prefix}
+
+ {/if}
+
+
+
+ {#if suffix !== ""}
+
+ {suffix}
+
+ {/if}
+
+
+
+ {#if variant === "horizontal" && showButtons}
+
+ {:else}
+ {#if showButtons}
+
+
+
+
+
+ {/if}
+ {/if}
+
+
+ {#if showValidationMessage && isInvalid() && validationMessage() !== ""}
+
+
+ {validationMessage()}
+
+ {/if}
+
+ {#if (!showValidationMessage || !isInvalid() || validationMessage() === "") && helpText !== ""}
+
+ {helpText}
+
+ {/if}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/LegendIndicator.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/LegendIndicator.wrn
new file mode 100644
index 00000000..1fae3791
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/LegendIndicator.wrn
@@ -0,0 +1,21 @@
+component LegendIndicator {
+ props {
+ @event toggle = function
+ @event select = function
+ size = "default"
+ color = "primary"
+ title = "Legend Indicator"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Link.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Link.wrn
new file mode 100644
index 00000000..3cf17764
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Link.wrn
@@ -0,0 +1,47 @@
+component Link {
+ props {
+ size = "default"
+ color = "primary"
+ label = "Link"
+ href = "#"
+ target = ""
+ rel = ""
+ external = false
+ class = ""
+ }
+
+ view {
+
+ {label}
+
+ {#if external}
+
+ {/if}
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/List.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/List.wrn
new file mode 100644
index 00000000..0ac667a7
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/List.wrn
@@ -0,0 +1,107 @@
+component List {
+ props {
+ size = "default"
+ color = "primary"
+ title = "List"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+
+ view {
+
+ {#if title || description}
+
+ {#if title}
+ {title}
+ {/if}
+ {#if description}
+ {description}
+ {/if}
+
+ {/if}
+
+
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/ListGroup.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/ListGroup.wrn
new file mode 100644
index 00000000..35366c9c
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/ListGroup.wrn
@@ -0,0 +1,21 @@
+component ListGroup {
+ props {
+ @event select = function
+ @event change = function
+ size = "default"
+ color = "primary"
+ title = "List Group"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Map.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Map.wrn
new file mode 100644
index 00000000..6d0da585
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Map.wrn
@@ -0,0 +1,85 @@
+component Map {
+ props {
+ size = "default"
+ color = "primary"
+ title = "Map"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+
+ view {
+
+ {#if title || description}
+
+ {/if}
+
+
+
+
+
+
+
+
+ {#if items.length > 0}
+ {#each items as item, index}
+
+ {/each}
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if actionLabel}
+
+ {/if}
+
+
+
+
+
+
+ {#if title}
+
+
+ {title}
+
+ {/if}
+
+
+
+
+
+
+
{label}
+
+ {prefix}{value}{suffix}
+
+
+
+ {#if icon}
+
+
+
+ {/if}
+
{description}
+ {/if}
+
+ {#if trend || trendLabel}
+
+
+ {#if trendDirection === "up" || trendDirection === "positive"}
+
+ {:else if trendDirection === "down" || trendDirection === "negative"}
+
+ {:else}
+
+ {/if}
+ {trend}
+
+ {#if trendLabel}
+ {trendLabel}
+ {/if}
+
+ {/if}
+
+ {#if href}
+
+ {/if}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/MetricGrid.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/MetricGrid.wrn
new file mode 100644
index 00000000..5e353cff
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/MetricGrid.wrn
@@ -0,0 +1,60 @@
+component MetricGrid {
+ props {
+ items = []
+ columns = 4
+ tabletColumns = 2
+ mobileColumns = 1
+ gap = "md"
+ equalHeight = true
+ dividers = false
+ size = "default"
+ color = "primary"
+ variant = "default"
+ class = ""
+ }
+
+ view {
+
+ {#each items as item}
+
+ {:empty}
+
+ {/each}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Modal.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Modal.wrn
new file mode 100644
index 00000000..2366e70f
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Modal.wrn
@@ -0,0 +1,23 @@
+component Modal {
+ props {
+ @event open = function
+ @event close = function
+ @event cancel = function
+ @event confirm = function
+ size = "default"
+ color = "primary"
+ title = "Modal"
+ description = ""
+ open = false
+ placement = "bottom"
+ closeLabel = "Close"
+ class = ""
+ }
+ view {
+
+
+ {#if description}
{description}
{/if}
+
+
+
+ {#if showBreadcrumbs && breadcrumbs.length > 0}
+
+ {/if}
+
+
+
+ {#if icon}
+
+
+
+ {/if}
+
+
+
+
+
+
+
+ {#if secondaryLabel}
+
+ {/if}
+
+ {#if primaryLabel}
+
+ {/if}
+
+
+
+
+
+
+ {#if description}
{description}
{/if}
+
+
{item.label}{item.value}{#if item.detail}{item.detail}{/if}
+
+ {/each}
+
+
+
+
+
+
+ Priority
Tasks requiring attention
+
+
+
+
+ {#each updates as item}
+
+
+ {item.label}{#if item.detail}
{item.detail}
{/if}
{item.time || ''}
+
+ {/each}
+
+
+
+
+
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/PublicPageShell.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/PublicPageShell.wrn
new file mode 100644
index 00000000..e98f9c02
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/PublicPageShell.wrn
@@ -0,0 +1,53 @@
+component PublicPageShell {
+ props {
+ maxWidth = "full"
+ fullWidth = true
+ headerOffset = "none"
+ background = "default"
+ overflow = "clip"
+ minHeight = "screen"
+ size = "default"
+ color = "primary"
+ variant = "default"
+ class = ""
+ }
+
+ view {
+
+
+
+ {#if fullWidth}
+
+
+
+ {:else}
+
+
+
+ {/if}
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Radio.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Radio.wrn
new file mode 100644
index 00000000..1da0c2a8
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Radio.wrn
@@ -0,0 +1,56 @@
+component Radio {
+ props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event invalid = function
+ size = "default"
+ color = "primary"
+ id = ""
+ name = ""
+ label = "Radio"
+ hiddenLabel = false
+ placeholder = ""
+ variant = "normal"
+ icon = ""
+ iconPosition = "start"
+ value = "on"
+ options = []
+ checked = false
+ orientation = "vertical"
+ card = false
+ rightAligned = false
+ list = false
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ readonly = false
+ disabled = false
+ required = false
+ class = ""
+ }
+ functions {
+ function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { checked: sourceEvent.currentTarget.checked, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
+ function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
+ }
+ view {
+
+
{#if options.length || cornerHint}{label}{#if cornerHint}{cornerHint}{/if}{/if}
+ {#if options.length}
+
+ {#each options as option}
+
+ {/each}
+
+ {:else}
+
+ {/if}
+ {#if helperText}
{helperText}{/if}
{error}
+
+
{#if cornerHint}{cornerHint}{/if}
+
+ {#if icon}
{/if}
+
+
+
+
+
+ {#if marks.length}{#each marks as mark}{/each}{/if}
+
+ {#if showBounds}
{min}Step {step}{max}
{/if}
+
+ {#if showValue}
{/if}
+
+
+ {#if helperText}
{helperText}{/if}
{error}
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Scrollspy.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Scrollspy.wrn
new file mode 100644
index 00000000..305d2d72
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Scrollspy.wrn
@@ -0,0 +1,18 @@
+component Scrollspy {
+ props {
+ @event change = function
+ size = "default"
+ color = "primary"
+ label = "Scrollspy"
+ items = []
+ active = ""
+ orientation = "horizontal"
+ class = ""
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/SearchBox.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/SearchBox.wrn
new file mode 100644
index 00000000..bcb7243a
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/SearchBox.wrn
@@ -0,0 +1,80 @@
+component SearchBox {
+ props {
+ size = "default"
+ color = "primary"
+ label = "Search Box"
+ name = ""
+ value = ""
+ placeholder = ""
+ type = "search"
+ min = ""
+ max = ""
+ step = ""
+ disabled = false
+ required = false
+ class = ""
+ }
+
+ state query = value
+
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Section.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Section.wrn
new file mode 100644
index 00000000..c0e65c22
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Section.wrn
@@ -0,0 +1,60 @@
+component Section {
+ props {
+ id = ""
+ size = "default"
+ color = "primary"
+ variant = "default"
+ spacing = "lg"
+ maxWidth = "xl"
+ fullWidth = false
+ borderTop = false
+ borderBottom = false
+ class = ""
+ }
+
+ view {
+
+ {#if fullWidth}
+
+ {:else}
+
+
+
+ {/if}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/SectionHeader.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/SectionHeader.wrn
new file mode 100644
index 00000000..a70c54fb
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/SectionHeader.wrn
@@ -0,0 +1,113 @@
+component SectionHeader {
+ props {
+ id = ""
+ eyebrow = ""
+ title = ""
+ description = ""
+ align = "left"
+ size = "default"
+ color = "primary"
+ headingLevel = 2
+ maxWidth = "3xl"
+ class = ""
+ }
+
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Select.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Select.wrn
new file mode 100644
index 00000000..23c13a94
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Select.wrn
@@ -0,0 +1,61 @@
+component Select {
+ props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event open = function
+ @event close = function
+ @event invalid = function
+ size = "default"
+ color = "primary"
+ id = ""
+ name = ""
+ label = "Select"
+ hiddenLabel = false
+ value = ""
+ values = []
+ options = []
+ placeholder = "Select an option"
+ variant = "normal"
+ icon = ""
+ iconPosition = "start"
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ multiple = false
+ readonly = false
+ disabled = false
+ required = false
+ class = ""
+ }
+ functions {
+ function selected(option) {
+ if (multiple) return values.includes(option.value)
+ return option.value === value
+ }
+ function emitField(nameEvent, sourceEvent) {
+ sourceEvent.stopPropagation()
+ $emit(nameEvent, { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent })
+ }
+ function handleFocus(sourceEvent) { emitField("focus", sourceEvent); $emit("open", { name: name, sourceEvent: sourceEvent }) }
+ function handleBlur(sourceEvent) { emitField("blur", sourceEvent); $emit("close", { name: name, sourceEvent: sourceEvent }) }
+ function handleInvalid(sourceEvent) { $emit("invalid", { name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
+ }
+ view {
+
+
{#if cornerHint}{cornerHint}{/if}
+
+ {#if icon}{/if}
+
+ {#if variant === "floating"}{label}{/if}
+
+ {#if helperText}
{helperText}{/if}
+
{error}
+
+
+ {#if eyebrow}
+
+
+ {eyebrow}
+
+ {/if}
+
+
+ {title}
+ {#if highlight}
+ {highlight}
+ {/if}
+
+
+ {#if description}
+
{description}
+ {/if}
+
+
+
+
+
+ {#if trustItems.length > 0}
+
+ {#each trustItems as item}
+
+
+ {item.label || item.title || item}
+
+ {/each}
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+ {#if presentation === "popover"}
+
+
+
+
+ Password strength
+ {password ? strengthLabel() : emptyLabel}
+
+
+
+
+ {#if showRequirements}
+
+ -
+ At least {minLength} characters
+
+ {#if requireLowercase}- One lowercase letter
{/if}
+ {#if requireUppercase}- One uppercase letter
{/if}
+ {#if requireNumber}- One number
{/if}
+ {#if requireSpecialCharacter}- One special character: {specialCharactersSet}
{/if}
+
+ {/if}
+ {#if hintText}
{hintText}{/if}
+
+
+ {/if}
+
+
+ {#if presentation !== "popover"}
+
+
+ Password strength
+ {password ? strengthLabel() : emptyLabel}
+
+
+
+
+ {#if showRequirements}
+
+ - At least {minLength} characters
+ {#if requireLowercase}- One lowercase letter
{/if}
+ {#if requireUppercase}- One uppercase letter
{/if}
+ {#if requireNumber}- One number
{/if}
+ {#if requireSpecialCharacter}- One special character: {specialCharactersSet}
{/if}
+
+ {/if}
+ {#if hintText}
{hintText}{/if}
+
+ {/if}
+
+
{validationMessage}
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Switch.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Switch.wrn
new file mode 100644
index 00000000..478a92fe
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Switch.wrn
@@ -0,0 +1,39 @@
+component Switch {
+ props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ size = "default"
+ color = "primary"
+ id = ""
+ name = ""
+ label = "Switch"
+ hiddenLabel = false
+ placeholder = ""
+ variant = "normal"
+ icon = ""
+ iconPosition = "start"
+ value = "on"
+ checked = false
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ readonly = false
+ disabled = false
+ required = false
+ class = ""
+ }
+ functions {
+ function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { checked: sourceEvent.currentTarget.checked, value: value, name: name, sourceEvent: sourceEvent }) }
+ function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
+ }
+ view {
+
+
{#if cornerHint}{label}{cornerHint}{/if}
+
+ {#if helperText}
{helperText}{/if}
{error}
+
+ {#each items as item, index}
+
+ {/each}
+
+
+
+ {#each items as item, index}
+
+ {#if item.title && item.title !== item.label}
+
{item.title}
+ {/if}
+ {#if item.description}
+
{item.description}
+ {/if}
+ {#if item.content}
+
{item.content}
+ {/if}
+
+ {/each}
+
+
+
+
{#if cornerHint}{cornerHint}{/if}
+
+ {#if icon}{/if}
+
+ {#if variant === "floating"}{label}{/if}
+
+ {#if helperText}
{helperText}{/if}
+
{error}
+
+
{#if cornerHint}{cornerHint}{/if}
+
+ {#if icon}{/if}
+
+
+
+
Hour{#each hours as hour}{/each}
Minute{#each minutes as minute}{/each}
+ {#if helperText}
{helperText}{/if}
+
{error}
+
{title}
+ {/if}
+ {#if description}
+ {description}
+ {/if}
+
+ {/if}
+
+
+ {#each items as item, index}
+ -
+
+
+
+
+
+
+
+
{item.title || item.label}
+ {#if item.subtitle}
+
{item.subtitle}
+ {/if}
+
+ {#if item.date || item.meta}
+
+ {/if}
+
{item.description}
+ {/if}
+
+ {#if item.href}
+
+ {item.actionLabel || "View details"}
+
+
+ {/if}
+
+
+ {:empty}
+ - No timeline items available.
+ {/each}
+
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Toast.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Toast.wrn
new file mode 100644
index 00000000..bda42b49
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Toast.wrn
@@ -0,0 +1,21 @@
+component Toast {
+ props {
+ @event dismiss = function
+ @event action = function
+ size = "default"
+ color = "primary"
+ title = "Toast"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/ToastNotifications.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/ToastNotifications.wrn
new file mode 100644
index 00000000..d49d5547
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/ToastNotifications.wrn
@@ -0,0 +1,23 @@
+component ToastNotifications {
+ props {
+ @event add = function
+ @event dismiss = function
+ @event clear = function
+ @event action = function
+ size = "default"
+ color = "primary"
+ title = "Toast Notifications"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/ToggleCount.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/ToggleCount.wrn
new file mode 100644
index 00000000..0a858af9
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/ToggleCount.wrn
@@ -0,0 +1,237 @@
+component ToggleCount {
+ props {
+ size = "default"
+ color = "primary"
+ variant = "segmented"
+ class = ""
+
+ name = "billing-cycle"
+ value = "monthly"
+ firstValue = "monthly"
+ firstLabel = "Monthly"
+ secondValue = "annual"
+ secondLabel = "Annual"
+ ariaLabel = "Billing frequency"
+
+ items = []
+ currency = "$"
+ suffix = ""
+ firstValueKey = "monthly"
+ secondValueKey = "annual"
+ emptyValue = "—"
+
+ align = "end"
+ fullWidth = true
+ disabled = false
+ animate = true
+ animationDuration = 450
+ animationSteps = 18
+
+ @event change = function
+ @event toggle = function
+ }
+
+ state selectedValue = value
+
+ functions {
+ function isFirstSelected() {
+ return selectedValue === firstValue
+ }
+
+ function isSecondSelected() {
+ return selectedValue === secondValue
+ }
+
+ function displayValue(item) {
+ if (isSecondSelected()) {
+ return item[secondValueKey] !== undefined
+ ? item[secondValueKey]
+ : emptyValue
+ }
+
+ return item[firstValueKey] !== undefined
+ ? item[firstValueKey]
+ : emptyValue
+ }
+
+ function dispatchToggleEvent(sourceEvent, previousValue, root, customEvent) {
+ root = sourceEvent.currentTarget.closest("[data-wrn-toggle-count]")
+
+ if (!root) {
+ return
+ }
+
+ customEvent = document.createEvent("CustomEvent")
+ customEvent.initCustomEvent("change", true, false, {
+ component: "ToggleCount",
+ name: name,
+ value: selectedValue,
+ previousValue: previousValue,
+ firstValue: firstValue,
+ secondValue: secondValue
+ })
+ root.dispatchEvent(customEvent)
+
+ customEvent = document.createEvent("CustomEvent")
+ customEvent.initCustomEvent("toggle", true, false, {
+ component: "ToggleCount",
+ name: name,
+ value: selectedValue,
+ previousValue: previousValue,
+ firstValue: firstValue,
+ secondValue: secondValue
+ })
+ root.dispatchEvent(customEvent)
+ }
+
+ function selectValue(sourceEvent, nextValue, previousValue) {
+ if (disabled || selectedValue === nextValue) {
+ return
+ }
+
+ previousValue = selectedValue
+ selectedValue = nextValue
+
+ if (
+ animate &&
+ !window.matchMedia("(prefers-reduced-motion: reduce)").matches
+ ) {
+ animateDisplayedValues(sourceEvent, previousValue)
+ }
+
+ dispatchToggleEvent(sourceEvent, previousValue)
+ }
+
+ function animateDisplayedValues(sourceEvent, previousValue, root, nodes) {
+ root = sourceEvent.currentTarget.closest("[data-wrn-toggle-count]")
+
+ if (!root) {
+ return
+ }
+
+ nodes = root.querySelectorAll("[data-toggle-count-value]")
+ animateValueAt(nodes, 0, previousValue)
+ }
+
+ function animateValueAt(nodes, index, previousValue, node, fromValue, toValue) {
+ if (index >= nodes.length) {
+ return
+ }
+
+ node = nodes[index]
+ fromValue = Number(
+ previousValue === secondValue
+ ? node.getAttribute("data-second-value")
+ : node.getAttribute("data-first-value")
+ )
+ toValue = Number(
+ selectedValue === secondValue
+ ? node.getAttribute("data-second-value")
+ : node.getAttribute("data-first-value")
+ )
+
+ if (!Number.isNaN(fromValue) && !Number.isNaN(toValue)) {
+ animateValueFrame(node, fromValue, toValue, 0)
+ }
+
+ animateValueAt(nodes, index + 1, previousValue)
+ }
+
+ function animateValueFrame(node, fromValue, toValue, frame, totalFrames, nextValue) {
+ totalFrames = Math.max(1, Number(animationSteps) || 1)
+
+ if (frame >= totalFrames) {
+ node.replaceChildren(String(toValue))
+ return
+ }
+
+ nextValue = Math.round(
+ fromValue +
+ (toValue - fromValue) * (frame / totalFrames)
+ )
+ node.replaceChildren(String(nextValue))
+
+ setTimeout(
+ animateValueFrame,
+ Math.max(1, Number(animationDuration) / totalFrames),
+ node,
+ fromValue,
+ toValue,
+ frame + 1
+ )
+ }
+
+ function toggleValue(sourceEvent) {
+ selectValue(
+ sourceEvent,
+ isFirstSelected() ? secondValue : firstValue
+ )
+ }
+ }
+
+ view {
+
+
+
+
+ {#if variant === "switch"}
+
{firstLabel}
+
+
{secondLabel}
+ {:else}
+
+
+
+
+ {/if}
+
+ {#each items as item}
+
+ {item.label || item.name}
+
+ {#if currency}{currency}{/if}
+ {displayValue(item)}
+ {#if suffix}{suffix}{/if}
+
+ {#if item.description}{item.description}{/if}
+
+ {/each}
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Typography.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Typography.wrn
new file mode 100644
index 00000000..d7d36173
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/Typography.wrn
@@ -0,0 +1,75 @@
+component Typography {
+ props {
+ size = "default"
+ color = "primary"
+ columns = 2
+ gap = "md"
+ maxWidth = "xl"
+ class = ""
+ }
+
+ view {
+
+
+
+ }
+
+ style {
+ .wire-typography :where(h1, h2, h3, h4) {
+ color: var(--wire-color-text);
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ line-height: 1.2;
+ break-after: avoid;
+ }
+
+ .wire-typography :where(h1) { font-size: clamp(2rem, 4vw, 3.5rem); margin: 0 0 1.5rem; }
+ .wire-typography :where(h2) { font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 2.5rem 0 1rem; }
+ .wire-typography :where(h3) { font-size: 1.35rem; margin: 2rem 0 0.75rem; }
+ .wire-typography :where(p, ul, ol, blockquote, pre, table) { margin: 1rem 0; }
+ .wire-typography :where(p, li) { color: var(--wire-color-text-muted); line-height: 1.8; }
+ .wire-typography :where(a) { color: var(--wire-color-primary); font-weight: 600; text-underline-offset: 0.2em; }
+ .wire-typography :where(a:hover) { color: var(--wire-color-primary-hover); text-decoration: underline; }
+ .wire-typography :where(ul, ol) { padding-left: 1.4rem; }
+ .wire-typography :where(ul) { list-style: disc; }
+ .wire-typography :where(ol) { list-style: decimal; }
+ .wire-typography :where(blockquote) {
+ border-left: 4px solid var(--wire-color-primary);
+ background: var(--wire-color-primary-soft);
+ border-radius: 0 0.75rem 0.75rem 0;
+ padding: 1rem 1.25rem;
+ color: var(--wire-color-text);
+ }
+ .wire-typography :where(code) {
+ border-radius: 0.35rem;
+ background: var(--wire-color-surface-soft);
+ padding: 0.15rem 0.35rem;
+ font-size: 0.9em;
+ }
+ .wire-typography :where(pre) {
+ overflow-x: auto;
+ border: 1px solid var(--wire-color-border);
+ border-radius: 1rem;
+ background: var(--wire-color-surface-raised);
+ padding: 1rem;
+ }
+ .wire-typography :where(img) { border-radius: 1rem; }
+ .wire-typography :where(hr) { border-color: var(--wire-color-border); margin: 2rem 0; }
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/WysiwygEditor.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/WysiwygEditor.wrn
new file mode 100644
index 00000000..dfb91935
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/WysiwygEditor.wrn
@@ -0,0 +1,23 @@
+component WysiwygEditor {
+ props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ size = "default"
+ color = "primary"
+ title = "Wysiwyg Editor"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/alert.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/alert.wrn
new file mode 100644
index 00000000..ba2e904b
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/alert.wrn
@@ -0,0 +1,142 @@
+component Alert {
+ props {
+ size = "default"
+ color = "info"
+ variant = "soft"
+ class = ""
+ radius = "md"
+ shadow = "sm"
+
+ title = "Alert"
+ description = ""
+ items = []
+ actions = []
+
+ showIcon = false
+ icon = ""
+ dismissible = false
+ dismissLabel = "Dismiss alert"
+ role = "alert"
+ live = "polite"
+
+ linkLabel = ""
+ linkHref = ""
+ actionLabel = ""
+ actionHref = ""
+ compact = false
+
+ @event dismiss = function
+ @event action = function
+ }
+
+ state visible = true
+
+ functions {
+ function dispatchAlertEvent(sourceEvent, eventName, action, root, customEvent) {
+ root = sourceEvent.currentTarget.closest("[data-wrn-alert]")
+
+ if (!root) {
+ return
+ }
+
+ customEvent = document.createEvent("CustomEvent")
+ customEvent.initCustomEvent(eventName, true, false, {
+ component: "Alert",
+ title: title,
+ color: color,
+ variant: variant,
+ action: action
+ })
+ root.dispatchEvent(customEvent)
+ }
+
+ function dismissAlert(sourceEvent) {
+ visible = false
+ dispatchAlertEvent(sourceEvent, "dismiss", null)
+ }
+
+ function selectAction(sourceEvent, action) {
+ dispatchAlertEvent(sourceEvent, "action", action)
+ }
+ }
+
+ view {
+
+ {#if showIcon}
+
+ {#if icon}
+
+ {:else if color === "success"}
+
+ {:else if color === "danger"}
+
+ {:else if color === "warning"}
+
+ {:else}
+
+ {/if}
+
+ {/if}
+
+
+ {#if title}
{title}{/if}
+ {#if description}
{description}
{/if}
+
+ {#if items.length > 0}
+
+ {#each items as item}- {item.label || item}
{/each}
+
+ {/if}
+
+ {#if actions.length > 0 || actionLabel || linkLabel}
+
+ {/if}
+
+ {#if thumbnails === "vertical"}
+
+ {#each items as item, index}
+
+ {/each}
+
+ {/if}
+
+
+
+
+
+ {#each items as item, index}
+
+ {#if item.imageSrc}
+ 
+ {/if}
+
+ {#if item.eyebrow}
{item.eyebrow}{/if}
+ {#if item.title || item.label}
{item.title || item.label}
{/if}
+ {#if item.description}
{item.description}
{/if}
+ {#if item.actionLabel}
+
{item.actionLabel}
+ {/if}
+
+ {/each}
+
+
+
+
+
+
+
+ {#if showCounter}
+
+ {/if}
+
+
+ {#if showPagination}
+
+ {/if}
+
+ {#if thumbnails === "horizontal"}
+
+ {#each items as item, index}
+
+ {/each}
+
+ {/if}
+
+
+
{label}{#if showValue}{value}%{/if}
+
+
+ {#if "Skeleton" === "Skeleton"}{#each Array(lines).fill(0) as line}{/each}{:else}{/if}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/spinner.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/spinner.wrn
new file mode 100644
index 00000000..bd607734
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/spinner.wrn
@@ -0,0 +1,14 @@
+component Spinner {
+ props {
+ color = "primary"
+ label = "Loading"
+ size = "md"
+ lines = 3
+ class = ""
+ }
+ view {
+
+ {#if "Spinner" === "Skeleton"}{#each Array(lines).fill(0) as line}{/each}{:else}{/if}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/table.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/table.wrn
new file mode 100644
index 00000000..1f5dc29f
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-49-55-005Z/table.wrn
@@ -0,0 +1,17 @@
+component Table {
+ props {
+ @event sort = function
+ @event select = function
+ @event rowClick = function
+ size = "default"
+ color = "primary"
+ caption = "Table"
+ columns = []
+ rows = []
+ striped = true
+ class = ""
+ }
+ view {
+ {caption}{#each columns as column}| {column.label} | {/each}
{#each rows as row}{#each columns as column}| {row[column.key]} | {/each}
{/each}
+ {#each items as item, index}
+
+
+
+
+
+
+
+
+ {#if item.content}
{item.content}
{/if}
+
+ {#if item.children && item.children.length > 0}
+
+ {#each item.children as child, childIndex}
+
+
+
+
+
+
+ {/each}
+
+ {/if}
+
+
+
+ {/each}
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/AdvancedRangeSlider.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/AdvancedRangeSlider.wrn
new file mode 100644
index 00000000..51090087
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/AdvancedRangeSlider.wrn
@@ -0,0 +1,23 @@
+component AdvancedRangeSlider {
+ props {
+ @event input = function
+ @event change = function
+ @event start = function
+ @event end = function
+ size = "default"
+ color = "primary"
+ title = "Advanced Range Slider"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/AdvancedSelect.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/AdvancedSelect.wrn
new file mode 100644
index 00000000..6bd6fe16
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/AdvancedSelect.wrn
@@ -0,0 +1,456 @@
+component AdvancedSelect {
+ props {
+ size = "default"
+ color = "primary"
+ label = "Advanced Select"
+ name = ""
+ value = ""
+ values = []
+ options = []
+ groups = []
+ placeholder = "Select an option"
+ placeholderIcon = ""
+ searchPlaceholder = "Search options…"
+ multiple = false
+ searchable = true
+ defaultOpen = false
+ clearable = true
+ allowEmpty = true
+ tags = false
+ disabled = false
+ required = false
+ invalid = false
+ validationMessage = ""
+ helpText = ""
+ loading = false
+ loadingLabel = "Loading options…"
+ emptyLabel = "No options found"
+ selectedOptionsLabel = "Selected options"
+ clearLabel = "Clear selection"
+ createLabel = "Create"
+ loadMoreLabel = "Load more"
+ searchMode = "contains"
+ searchFields = "label,description"
+ minSearchLength = 0
+ searchResultLimit = 0
+ maxSelections = 0
+ showCounter = false
+ counterTemplate = "{selected} selected"
+ optionTemplate = "default"
+ selectedTemplate = "default"
+ closeOnSelect = true
+ scrollToSelected = true
+ fixed = false
+ placement = "bottom"
+ remote = false
+ remoteUrl = ""
+ remoteQueryParam = "q"
+ remoteDebounce = 250
+ remoteAutoLoad = true
+ infinite = false
+ hasMore = false
+ page = 1
+ class = ""
+ @event search = function
+ @event select = function
+ @event change = function
+ @event clear = function
+ @event open = function
+ @event close = function
+ @event load = function
+ @event error = function
+ }
+
+ state open = defaultOpen
+ state query = ""
+ state activeIndex = -1
+ state selectedValue = value
+ state selectedValues = values
+
+ functions {
+ function allOptions() {
+ return [...groups.flatMap((group) => group.options || []), ...options]
+ }
+
+ function searchableText(option) {
+ return ((option.label || "") + " " + (option.description || "")).toLowerCase()
+ }
+
+ function matches(option) {
+ if (!query || query.length < Number(minSearchLength || 0)) {
+ return true
+ }
+ if (searchMode === "startsWith") {
+ return searchableText(option).startsWith(query.toLowerCase())
+ }
+ if (searchMode === "exact") {
+ return searchableText(option) === query.toLowerCase()
+ }
+ return searchableText(option).includes(query.toLowerCase())
+ }
+
+ function matchingOptions(list) {
+ return list.filter((option) => matches(option))
+ }
+
+ function visibleOptions(list) {
+ if (searchResultLimit > 0) {
+ return matchingOptions(list).slice(0, Number(searchResultLimit))
+ }
+ return matchingOptions(list)
+ }
+
+ function flatVisibleOptions() {
+ return visibleOptions(allOptions())
+ }
+
+ function isSelected(option) {
+ return (
+ multiple
+ ? selectedValues.includes(option.value)
+ : selectedValue === option.value
+ )
+ }
+
+ function selectedOptions() {
+ return allOptions().filter((option) => isSelected(option))
+ }
+
+ function selectedCount() {
+ return multiple ? selectedValues.length : selectedValue ? 1 : 0
+ }
+
+ function counterText() {
+ return (
+ maxSelections
+ ? selectedCount() + " / " + maxSelections + " selected"
+ : selectedCount() + " selected"
+ )
+ }
+
+ function selectedText() {
+ return (
+ multiple
+ ? selectedValues.join(", ")
+ : selectedOptions().length
+ ? selectedOptions()[0].label
+ : ""
+ )
+ }
+
+ function triggerText() {
+ return selectedCount() ? selectedText() : placeholder
+ }
+
+ function canSelect(option) {
+ if (option.disabled) {
+ return false
+ }
+ if (!multiple || isSelected(option)) {
+ return true
+ }
+ if (maxSelections <= 0) {
+ return true
+ }
+ return selectedCount() < maxSelections
+ }
+
+ function chooseSingle(option) {
+ if (!canSelect(option)) {
+ return
+ }
+ selectedValue = option.value
+ query = ""
+ if (closeOnSelect) {
+ open = false
+ }
+ }
+
+ function chooseMultiple(option) {
+ if (!canSelect(option)) {
+ return
+ }
+ if (isSelected(option)) {
+ selectedValues = selectedValues.filter((item) => item !== option.value)
+ } else {
+ selectedValues = selectedValues.concat([option.value])
+ }
+ query = ""
+ }
+
+ function chooseOption(option) {
+ if (multiple) {
+ chooseMultiple(option)
+ return
+ }
+ chooseSingle(option)
+ }
+
+ function clearSelection(event) {
+ event.stopPropagation()
+ selectedValue = ""
+ selectedValues = []
+ query = ""
+ open = false
+ }
+
+ function toggle() {
+ if (disabled) {
+ return;
+ };
+ open = !open;
+ activeIndex = open && flatVisibleOptions().length ? 0 : -1;
+ }
+
+ function moveActive(direction) {
+ if (!flatVisibleOptions().length) {
+ return
+ }
+ activeIndex = (activeIndex + direction + flatVisibleOptions().length) % flatVisibleOptions().length
+ }
+
+ function handleKeydown(event) {
+ if (disabled) {
+ return
+ }
+ if (event.key === "ArrowDown") {
+ event.preventDefault()
+ if (!open) {
+ open = true
+ }
+ moveActive(1)
+ } else if (event.key === "ArrowUp") {
+ event.preventDefault()
+ if (!open) {
+ open = true
+ }
+ moveActive(-1)
+ } else if (event.key === "Enter" || event.key === " ") {
+ event.preventDefault()
+ if (!open) {
+ open = true
+ } else if (activeIndex >= 0) {
+ chooseOption(flatVisibleOptions()[activeIndex])
+ }
+ } else if (event.key === "Escape") {
+ open = false
+ } else if (event.key === "Home" && open) {
+ event.preventDefault()
+ activeIndex = 0
+ } else if (event.key === "End" && open) {
+ event.preventDefault()
+ activeIndex = flatVisibleOptions().length - 1
+ }
+ }
+
+ function optionIndex(option) {
+ return flatVisibleOptions().findIndex((item) => item.value === option.value)
+ }
+ }
+
+ view {
+
+
+
+ {counterText()}
+
+
+
+
+
+
+
+
+
+ {#if searchable}
+
+ {/if}
+
+
Enter at least {minSearchLength} characters.
+
+
+ {loadingLabel}
+
+
+ {#each groups as group}
+ {#if visibleOptions(group.options || []).length}
+
+
{group.label}
+ {#each group.options || [] as option}
+
+ {/each}
+
+ {/if}
+ {/each}
+
+ {#each options as option}
+
+ {/each}
+
+ {#if !loading && !flatVisibleOptions().length}
+
{emptyLabel}
+ {/if}
+
+
+ {#if tags && query && !allOptions().some((option) => option.label.toLowerCase() === query.toLowerCase())}
+
+ {/if}
+
+
+
+
+
+ {#if helpText && !validationMessage}
{helpText}{/if}
+
{validationMessage}
+
+
+
+ {brand}Unified identity and access
+
+
+
+ {eyebrow}
+
+
{title}
+ {#if description}
+
{description}
+ {/if}
+
+ {#each features as item}
+
+
+
+ {item.label}
+ {#if item.description}
+ {item.description}
+ {/if}
+
+
+ {/each}
+
+
+
+
+ {#each visibleMembers() as item}
+
+
+ {#if item.src}
+
+ {:else if item.initials}
+
+ {item.initials}
+
+ {:else}
+
+
+ {/if}
+
+
+ {#if showTooltips && (item.tooltip || item.name)}
+
+ {item.tooltip || item.name}
+
+ {/if}
+
+ {/each}
+
+ {#if hiddenMembers().length > 0}
+
+
+
+
+
+ {/if}
+
+
+ {#if quoteMark}
+ “
+ {/if}
+
+
+ {#if quote}
+
{quote}
+ {:else}
+
+ {/if}
+
+
+ {#if citation || citationTitle || avatarSrc}
+
+ {#if avatarSrc}
+
+ {/if}
+
+
+ {#if citation}
+ {#if citationUrl}
+ {citation}
+ {:else}
+ {citation}
+ {/if}
+ {/if}
+ {#if citationTitle}{citationTitle}{/if}
+
+
+ {/if}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Breadcrumb.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Breadcrumb.wrn
new file mode 100644
index 00000000..1fee40b5
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Breadcrumb.wrn
@@ -0,0 +1,19 @@
+component Breadcrumb {
+ props {
+ @event navigate = function
+ @event click = function
+ size = "default"
+ color = "primary"
+ label = "Breadcrumb"
+ items = []
+ active = ""
+ orientation = "horizontal"
+ class = ""
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/ButtonGroup.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/ButtonGroup.wrn
new file mode 100644
index 00000000..7430aba7
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/ButtonGroup.wrn
@@ -0,0 +1,89 @@
+component ButtonGroup {
+ props {
+ @event click = function
+ @event select = function
+ @event change = function
+ items = []
+ value = ""
+ size = "md"
+ color = "primary"
+ variant = "default"
+ orientation = "horizontal"
+ responsive = false
+ attached = true
+ selectable = false
+ toolbar = false
+ disabled = false
+ ariaLabel = "Button group"
+ class = ""
+ }
+
+ state selectedValue = value
+
+ functions {
+ function itemValue(item, index) {
+ return item.value || item.label || String(index)
+ }
+
+ function selectItem(item, index) {
+ previousValue = selectedValue
+ nextValue = itemValue(item, index)
+
+ $emit("select", {
+ value: nextValue,
+ previousValue: previousValue,
+ item: item,
+ index: index
+ })
+
+ if (selectable && previousValue !== nextValue) {
+ selectedValue = nextValue
+ $emit("change", {
+ value: nextValue,
+ previousValue: previousValue,
+ item: item,
+ index: index
+ })
+ }
+ }
+ }
+
+ view {
+
+ {#if items}
+ {#each items as item, index}
+
+ {/each}
+ {/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/CTASection.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/CTASection.wrn
new file mode 100644
index 00000000..36453a83
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/CTASection.wrn
@@ -0,0 +1,150 @@
+component CTASection {
+ props {
+ eyebrow = ""
+ title = "Ready to get started?"
+ description = ""
+ icon = ""
+ align = "center"
+ size = "default"
+ color = "primary"
+ variant = "solid"
+ primaryLabel = "Get started"
+ primaryHref = "#"
+ primaryIcon = ""
+ secondaryLabel = ""
+ secondaryHref = ""
+ secondaryIcon = ""
+ backgroundImage = ""
+ maxWidth = "xl"
+ class = ""
+ }
+
+ view {
+
+
+ {#if backgroundImage}
+
+ {/if}
+
+
+
+
+
+
+ {#if icon}
+
+
+
+ {/if}
+
+ {#if eyebrow}
+
+ {eyebrow}
+
+ {/if}
+
+
+ {title}
+
+
+ {#if description}
+
+ {description}
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if items.length > 0}
+
+ {#each items as item, itemIndex}
+
+ {#if item.imageSrc || item.image}
+
+ {/if}
+
+
+ {#if item.title || item.label}
+
{item.title || item.label}
+ {/if}
+ {#if item.subtitle}
+
{item.subtitle}
+ {/if}
+ {#if item.description}
+
{item.description}
+ {/if}
+ {#if item.actionLabel || item.href}
+
+ {item.actionLabel || "Learn more"}
+
+
+ {/if}
+
+ {/each}
+
+ {:else}
+
+ {#if imageSrc && imagePosition === "overlay"}
+
+
+
+
+ {#if header || title || subtitle || headerActions.length > 0 || dismissible}
+
+ {/if}
+
+ {#if navigation.length > 0}
+
+ {/if}
+
+ {#if alertTitle || alertDescription}
+
+ {#if alertTitle}
+
{alertTitle}
+ {/if}
+ {#if alertDescription}
+
{alertDescription}
+ {/if}
+
+ {/if}
+
+
+ {#if empty}
+
+ {:else}
+ {#if description}
+
{description}
+ {/if}
+
+ {/if}
+
+
+ {#if footer || actionLabel}
+
+ {/if}
+
+ {/if}
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/ChatBubble.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/ChatBubble.wrn
new file mode 100644
index 00000000..947f6995
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/ChatBubble.wrn
@@ -0,0 +1,147 @@
+component ChatBubble {
+ props {
+ @event action = function
+ @event messageClick = function
+ @event avatarClick = function
+ @event linkClick = function
+ size = "default"
+ color = "primary"
+ title = ""
+ description = ""
+ items = []
+ oneSided = false
+ showAvatars = false
+ showMetadata = false
+ ariaLabel = "Conversation"
+ variant = "default"
+ class = ""
+ }
+
+ functions {
+ function messageDirection(item) {
+ return item.direction === "outgoing" ? "outgoing" : "incoming"
+ }
+
+ function selectMessage(item, index) {
+ $emit("messageClick", {
+ item: item,
+ index: index,
+ direction: messageDirection(item)
+ })
+ }
+
+ function selectAvatar(sourceEvent, item, index) {
+ sourceEvent.stopPropagation()
+ $emit("avatarClick", {
+ item: item,
+ index: index,
+ direction: messageDirection(item)
+ })
+ }
+
+ function selectLink(sourceEvent, link, item, index) {
+ sourceEvent.stopPropagation()
+ $emit("linkClick", {
+ link: link,
+ item: item,
+ index: index
+ })
+ }
+
+ function selectAction(sourceEvent, item, index) {
+ sourceEvent.stopPropagation()
+ $emit("action", {
+ action: item.action || "retry",
+ item: item,
+ index: index
+ })
+ }
+ }
+
+ view {
+
+ {#if title || description}
+
+ {/if}
+
+ {#if items.length}
+
+ {#each items as item, index}
+
+
+ {#if showAvatars && (item.avatarSrc || item.avatarFallback)}
+
+ {/if}
+
+
+ {#if item.title}
{item.title}
{/if}
+ {#if item.text}
{item.text}
{/if}
+ {#if item.bullets && item.bullets.length}
+
+ {#each item.bullets as bullet}- {bullet}
{/each}
+
+ {/if}
+ {#if item.links && item.links.length}
+
+ {/if}
+
+
+ {/each}
+
+
+ {#if options.length || cornerHint}
+
+ {label}
+
+ {#if cornerHint}
+
+ {cornerHint}
+
+ {/if}
+ {/if}
+
+ {#if options.length}
+
+ {#each options as option}
+
+ {/each}
+
+ {:else}
+
+
+
+ {/if}
+ {#if helperText}
+
+ {helperText}
+
+ {/if}
+
+ {error}
+
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Collapse.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Collapse.wrn
new file mode 100644
index 00000000..531c31f1
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Collapse.wrn
@@ -0,0 +1,95 @@
+component Collapse {
+ props {
+ @event toggle = function
+ @event open = function
+ @event close = function
+ size = "default"
+ color = "primary"
+ items = []
+ multiple = false
+ mode = "panel"
+ initialOpenIndexes = []
+ ariaLabel = "Collapsible content"
+ class = ""
+ }
+
+ state openIndexes = initialOpenIndexes
+
+ functions {
+ function isOpen(index) {
+ return openIndexes.includes(index)
+ }
+
+ function toggleItem(index, item, opening) {
+ if (item.disabled) {
+ return
+ }
+ opening = !isOpen(index)
+ if (opening) {
+ if (multiple) {
+ openIndexes = openIndexes.concat(index)
+ } else {
+ openIndexes = [index]
+ }
+ $emit("open", { index: index, item: item })
+ } else {
+ openIndexes = openIndexes.filter((openIndex) => openIndex !== index)
+ $emit("close", { index: index, item: item })
+ }
+ $emit("toggle", {
+ index: index,
+ item: item,
+ open: opening,
+ openIndexes: openIndexes
+ })
+ }
+ }
+
+ view {
+
+ {#each items as item, index}
+
+ {#if mode === "inline" && item.preview}
+ {item.preview}
+ {/if}
+
+
+
+
+
+ {#if item.title}
{item.title}
{/if}
+ {#if item.content}
{item.content}
{/if}
+ {#if item.links && item.links.length}
+
+ {/if}
+
+
+
{#if cornerHint}{cornerHint}{/if}
+
{#if icon}{/if}
+ {#if helperText}
{helperText}{/if}
{error}
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Combobox.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Combobox.wrn
new file mode 100644
index 00000000..7f82992b
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Combobox.wrn
@@ -0,0 +1,386 @@
+component ComboBox {
+ props {
+ size = "default"
+ color = "primary"
+ label = "ComboBox"
+ name = ""
+ value = ""
+ options = []
+ groups = []
+ placeholder = "Search or select an option"
+ searchPlaceholder = "Start typing…"
+ clearable = true
+ allowCustomValue = false
+ disabled = false
+ required = false
+ invalid = false
+ validationMessage = ""
+ helpText = ""
+ loading = false
+ loadingLabel = "Loading suggestions…"
+ emptyLabel = "No matching options"
+ clearLabel = "Clear value"
+ toggleLabel = "Toggle suggestions"
+ searchMode = "contains"
+ searchFields = "label,description"
+ minSearchLength = 0
+ searchResultLimit = 0
+ optionTemplate = "default"
+ defaultOpen = false
+ closeOnSelect = true
+ fixed = false
+ placement = "bottom"
+ autocomplete = "off"
+ remote = false
+ remoteUrl = ""
+ remoteQueryParam = "q"
+ remoteDebounce = 250
+ remoteAutoLoad = true
+ infinite = false
+ hasMore = false
+ page = 1
+ loadMoreLabel = "Load more"
+ class = ""
+ @event search = function
+ @event select = function
+ @event change = function
+ @event clear = function
+ @event open = function
+ @event close = function
+ @event load = function
+ @event error = function
+ }
+
+ state open = defaultOpen
+ state query = ""
+ state selectedValue = value
+ state activeIndex = -1
+
+ functions {
+ function allOptions() {
+ return [...groups.flatMap((group) => group.options || []), ...options]
+ }
+
+ function searchableText(option) {
+ return ((option.label || "") + " " + (option.description || "")).toLowerCase()
+ }
+
+ function matches(option) {
+ if (!query || query.length < minSearchLength) {
+ return true
+ }
+ if (searchMode === "startsWith") {
+ return searchableText(option).startsWith(query.toLowerCase())
+ }
+ if (searchMode === "exact") {
+ return searchableText(option) === query.toLowerCase()
+ }
+ return searchableText(option).includes(query.toLowerCase())
+ }
+
+ function matchingOptions(list) {
+ return list.filter((option) => matches(option))
+ }
+
+ function visibleOptions(list) {
+ if (searchResultLimit > 0) {
+ return matchingOptions(list).slice(0, searchResultLimit)
+ }
+ return matchingOptions(list)
+ }
+
+ function flatVisibleOptions() {
+ return visibleOptions(allOptions())
+ }
+
+ function isSelected(option) {
+ return selectedValue === option.value
+ }
+
+ function selectedOptions() {
+ return allOptions().filter((option) => isSelected(option))
+ }
+
+ function selectedText() {
+ return selectedOptions().length ? selectedOptions()[0].label : selectedValue
+ }
+
+ function inputText() {
+ return query || selectedText()
+ }
+
+ function shouldShowDropdown() {
+ if (!open) {
+ return false
+ }
+ if (loading) {
+ return true
+ }
+ if (remote && query.length !== 0 && query.length < minSearchLength) {
+ return true
+ }
+ if (flatVisibleOptions().length) {
+ return true
+ }
+ return infinite && hasMore
+ }
+
+ function canSelect(option) {
+ return !option.disabled
+ }
+
+ function chooseOption(option) {
+ if (!canSelect(option)) {
+ return
+ }
+ selectedValue = option.value
+ query = option.label
+ activeIndex = optionIndex(option)
+ if (closeOnSelect) {
+ open = false
+ }
+ }
+
+ function updateQuery(event) {
+ query = event.target.value
+ selectedValue = allowCustomValue ? event.target.value : ""
+ open = true
+ activeIndex = flatVisibleOptions().length ? 0 : -1
+ }
+
+ function clearValue(event) {
+ if (event) {
+ event.stopPropagation()
+ }
+ query = ""
+ selectedValue = ""
+ activeIndex = -1
+ open = false
+ }
+
+ function openDropdown() {
+ if (!disabled) {
+ open = true
+ activeIndex = flatVisibleOptions().length ? 0 : -1
+ }
+ }
+
+ function closeDropdown() {
+ open = false
+ }
+
+ function toggle() {
+ if (open) {
+ closeDropdown()
+ } else {
+ openDropdown()
+ }
+ }
+
+ function setValue(nextValue) {
+ selectedValue = nextValue
+ query = ""
+ }
+
+ function moveActive(direction) {
+ if (!flatVisibleOptions().length) {
+ return
+ }
+ activeIndex = (activeIndex + direction + flatVisibleOptions().length) % flatVisibleOptions().length
+ }
+
+ function handleKeydown(event) {
+ if (disabled) {
+ return
+ }
+ if (event.key === "ArrowDown") {
+ event.preventDefault()
+ openDropdown()
+ moveActive(1)
+ } else if (event.key === "ArrowUp") {
+ event.preventDefault()
+ openDropdown()
+ moveActive(-1)
+ } else if (event.key === "Enter" && open && activeIndex >= 0) {
+ event.preventDefault()
+ chooseOption(flatVisibleOptions()[activeIndex])
+ } else if (event.key === "Escape") {
+ closeDropdown()
+ } else if (event.key === "Home" && open) {
+ event.preventDefault()
+ activeIndex = 0
+ } else if (event.key === "End" && open) {
+ event.preventDefault()
+ activeIndex = flatVisibleOptions().length - 1
+ }
+ }
+
+ function optionIndex(option) {
+ return flatVisibleOptions().findIndex((item) => item.value === option.value)
+ }
+ }
+
+ view {
+
+
+
+
+
+
+
+
+
+
+
+
+
Enter at least {minSearchLength} characters.
+
+
+ {loadingLabel}
+
+
+
+ {#each groups as group}
+ {#if visibleOptions(group.options || []).length}
+
+
{group.label}
+ {#each group.options || [] as option}
+
+ {/each}
+
+ {/if}
+ {/each}
+
+ {#each options as option}
+
+ {/each}
+
+
+
+
+
+ {#if !allowCustomValue}
+
+ {/if}
+
+ {#if helpText && !validationMessage}
{helpText}{/if}
+
{validationMessage}
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Container.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Container.wrn
new file mode 100644
index 00000000..bcc3a50f
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Container.wrn
@@ -0,0 +1,46 @@
+component Container {
+ props {
+ size = "default"
+ color = "primary"
+ columns = 2
+ gap = "md"
+ maxWidth = "xl"
+ class = ""
+ }
+
+ view {
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/ContextMenu.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/ContextMenu.wrn
new file mode 100644
index 00000000..7a8b1264
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/ContextMenu.wrn
@@ -0,0 +1,22 @@
+component ContextMenu {
+ props {
+ @event open = function
+ @event close = function
+ @event select = function
+ size = "default"
+ color = "primary"
+ title = "Context Menu"
+ description = ""
+ open = false
+ placement = "bottom"
+ closeLabel = "Close"
+ class = ""
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/CopyMarkup.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/CopyMarkup.wrn
new file mode 100644
index 00000000..ab506a30
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/CopyMarkup.wrn
@@ -0,0 +1,23 @@
+component CopyMarkup {
+ props {
+ @event copy = function
+ @event success = function
+ @event error = function
+ size = "default"
+ color = "primary"
+ label = "Copy Markup"
+ name = ""
+ value = ""
+ placeholder = ""
+ type = "text"
+ min = ""
+ max = ""
+ step = ""
+ disabled = false
+ required = false
+ class = ""
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/CustomScrollbar.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/CustomScrollbar.wrn
new file mode 100644
index 00000000..37ace07c
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/CustomScrollbar.wrn
@@ -0,0 +1,14 @@
+component CustomScrollbar {
+ props {
+ @event scroll = function
+ size = "default"
+ color = "primary"
+ columns = 2
+ gap = "md"
+ maxWidth = "xl"
+ class = ""
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/DataMap.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/DataMap.wrn
new file mode 100644
index 00000000..49a30b5e
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/DataMap.wrn
@@ -0,0 +1,21 @@
+component DataMap {
+ props {
+ @event select = function
+ @event change = function
+ size = "default"
+ color = "primary"
+ title = "Data Map"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/DataTable.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/DataTable.wrn
new file mode 100644
index 00000000..3ff347ea
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/DataTable.wrn
@@ -0,0 +1,19 @@
+component DataTable {
+ props {
+ @event sort = function
+ @event select = function
+ @event change = function
+ @event rowClick = function
+ @event pageChange = function
+ size = "default"
+ color = "primary"
+ caption = "Data Table"
+ columns = []
+ rows = []
+ striped = true
+ class = ""
+ }
+ view {
+ {caption}{#each columns as column}| {column.label} | {/each}
{#each rows as row}{#each columns as column}| {row[column.key]} | {/each}
{/each}
+
{#if cornerHint}{cornerHint}{/if}
+
{#if currentValue && !readonly && !disabled}{/if}
+
{#each days as day}{/each}
+ {#if helperText}
{helperText}{/if}
{error}
+
{#if src || srcdoc}
{:else}
{/if}
+ {#if orientation === "vertical"}
+
+ {:else}
+
+
+
+ {#if label}
+
+ {label}
+
+
+ {/if}
+
+ {/if}
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Drawer.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Drawer.wrn
new file mode 100644
index 00000000..641cef87
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Drawer.wrn
@@ -0,0 +1,21 @@
+component Drawer {
+ props {
+ @event open = function
+ @event close = function
+ size = "default"
+ color = "primary"
+ title = "Drawer"
+ description = ""
+ open = false
+ placement = "bottom"
+ closeLabel = "Close"
+ class = ""
+ }
+ view {
+
+
+ {#if description}
{description}
{/if}
+
+
+
+
+
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/FeatureCard.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/FeatureCard.wrn
new file mode 100644
index 00000000..93eb1906
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/FeatureCard.wrn
@@ -0,0 +1,113 @@
+component FeatureCard {
+ props {
+ icon = ""
+ title = "Feature"
+ description = ""
+ href = ""
+ actionLabel = "Learn more"
+ actionIcon = ""
+ badge = ""
+ badgeColor = "primary"
+ size = "default"
+ color = "primary"
+ variant = "default"
+ hover = "lift"
+ align = "left"
+ disabled = false
+ class = ""
+ }
+
+ view {
+
+
+
+
+ {#if icon}
+
+ {/if}
+
+
+ {#if badge}
+
+ {/if}
+
+ {title}
+
+
+ {#if description}
+
+ {description}
+
+ {/if}
+
+
+
+
+
+
+ {#if href && actionLabel}
+
+ {/if}
+
+
+ {#if href}
+
+ {/if}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/FeatureGrid.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/FeatureGrid.wrn
new file mode 100644
index 00000000..cec10f97
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/FeatureGrid.wrn
@@ -0,0 +1,55 @@
+component FeatureGrid {
+ props {
+ color = "primary"
+ size = "default"
+ columns = 3
+ tabletColumns = 2
+ mobileColumns = 1
+ gap = "md"
+ minItemWidth = ""
+ equalHeight = true
+ align = "stretch"
+ maxWidth = "full"
+ class = ""
+ }
+
+ view {
+
+
+
+ }
+
+ style {
+ .wire-feature-grid-autofit {
+ grid-template-columns: repeat(auto-fit, minmax(var(--wire-feature-grid-min), 1fr));
+ }
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/FeatureIconCard.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/FeatureIconCard.wrn
new file mode 100644
index 00000000..1b985d39
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/FeatureIconCard.wrn
@@ -0,0 +1,78 @@
+component FeatureIconCard {
+ props {
+ icon = "icon-[lucide--sparkles]"
+ iconSize = "md"
+ iconVariant = "soft"
+ title = "Feature"
+ description = ""
+ href = ""
+ actionLabel = "Explore"
+ badge = ""
+ size = "default"
+ color = "primary"
+ variant = "default"
+ align = "left"
+ hover = "lift"
+ class = ""
+ }
+
+ view {
+
+
+
+
+ {#if badge}
+
+ {badge}
+
+ {/if}
+
+
+ {title}
+
+ {#if description}
+ {description}
+ {/if}
+
+
+
+ {#if href}
+
+ {/if}
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/FileInput.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/FileInput.wrn
new file mode 100644
index 00000000..b3ed2183
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/FileInput.wrn
@@ -0,0 +1,52 @@
+component FileInput {
+ props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event select = function
+ @event clear = function
+ @event invalid = function
+ size = "default"
+ color = "primary"
+ id = ""
+ name = ""
+ label = "File"
+ hiddenLabel = false
+ placeholder = "Choose a file"
+ value = ""
+ icon = "icon-[lucide--upload]"
+ iconPosition = "start"
+ accept = ""
+ multiple = false
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ variant = "normal"
+ readonly = false
+ disabled = false
+ required = false
+ class = ""
+ }
+ state selectedName = ""
+ functions {
+ function handleChange(sourceEvent) {
+ sourceEvent.stopPropagation()
+ selectedName = sourceEvent.currentTarget.files && sourceEvent.currentTarget.files.length ? sourceEvent.currentTarget.files[0].name : ""
+ $emit("input", { files: sourceEvent.currentTarget.files, name: name, sourceEvent: sourceEvent })
+ $emit("change", { files: sourceEvent.currentTarget.files, name: name, sourceEvent: sourceEvent })
+ if (selectedName) $emit("select", { files: sourceEvent.currentTarget.files, name: name, sourceEvent: sourceEvent })
+ else $emit("clear", { name: name, sourceEvent: sourceEvent })
+ }
+ function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { name: name, sourceEvent: sourceEvent }) }
+ function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/FileUpload.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/FileUpload.wrn
new file mode 100644
index 00000000..207d3571
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/FileUpload.wrn
@@ -0,0 +1,26 @@
+component FileUpload {
+ props {
+ @event select = function
+ @event upload = function
+ @event progress = function
+ @event success = function
+ @event error = function
+ @event cancel = function
+ @event remove = function
+ size = "default"
+ color = "primary"
+ title = "File Upload"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/FileUploadProgress.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/FileUploadProgress.wrn
new file mode 100644
index 00000000..329a5859
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/FileUploadProgress.wrn
@@ -0,0 +1,37 @@
+component FileUploadProgress {
+ props {
+ @event cancel = function
+ @event retry = function
+ @event complete = function
+ size = "default"
+ color = "primary"
+ label = "Progress"
+ value = 50
+ max = 100
+ showValue = true
+ fileName = ""
+ fileSize = ""
+ uploadedSize = ""
+ status = "uploading"
+ cancelLabel = "Cancel upload"
+ retryLabel = "Retry upload"
+ class = ""
+ }
+ state currentValue = value
+ state currentStatus = status
+ functions {
+ function percent() { if (!Number(max)) { return 0 } return Math.max(0, Math.min(100, Math.round(Number(currentValue) / Number(max) * 100))) }
+ function detail(sourceEvent) { return { value: currentValue, max: max, percent: percent(), status: currentStatus, fileName: fileName, sourceEvent: sourceEvent } }
+ function cancelUpload(sourceEvent) { currentStatus = "cancelled"; $emit("cancel", detail(sourceEvent)) }
+ function retryUpload(sourceEvent) { currentValue = 0; currentStatus = "uploading"; $emit("retry", detail(sourceEvent)) }
+ function completeUpload(sourceEvent) { currentValue = max; currentStatus = "complete"; $emit("complete", detail(sourceEvent)) }
+ }
+ view {
+
+
{#if fileName}{fileName}{#if uploadedSize || fileSize}{uploadedSize}{#if uploadedSize && fileSize} of {/if}{fileSize}{:else}{label}{/if}{:else}{label}{/if}{#if showValue}{percent()}%{/if}
+
+
{#if currentStatus === "uploading"}Uploading securely…{:else if currentStatus === "complete"}Upload complete{:else if currentStatus === "error"}Upload failed{:else}Upload cancelled{/if}
+
{#if currentStatus === "uploading"}{/if}{#if currentStatus === "error" || currentStatus === "cancelled"}{/if}
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Hero.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Hero.wrn
new file mode 100644
index 00000000..7613a2b6
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Hero.wrn
@@ -0,0 +1,149 @@
+component Hero {
+ props {
+ eyebrow = ""
+ title = "Build something remarkable"
+ highlight = ""
+ description = ""
+ align = "left"
+ size = "default"
+ color = "primary"
+ variant = "default"
+ primaryLabel = ""
+ primaryHref = ""
+ primaryIcon = ""
+ secondaryLabel = ""
+ secondaryHref = ""
+ secondaryIcon = ""
+ tertiaryLabel = ""
+ tertiaryHref = ""
+ badges = []
+ trustItems = []
+ maxWidth = "xl"
+ class = ""
+ }
+
+ view {
+
+
+ {#if variant === "gradient"}
+
+ {/if}
+
+
+
+
+ {#if eyebrow}
+
+
+ {eyebrow}
+
+ {/if}
+
+
+ {title}
+ {#if highlight}
+
+ {highlight}
+
+ {/if}
+
+
+ {#if description}
+
+ {description}
+
+ {/if}
+
+ {#if badges.length > 0}
+
+ {#each badges as badge}
+
+ {/each}
+
+ {/if}
+
+
+
+
+
+
+
+ {#if trustItems.length > 0}
+
+ {#each trustItems as item}
+
+
+ {item.label || item.title || item}
+
+ {/each}
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+ {#each actions as action, index}
+ {#if action.label}
+
+ {/if}
+ {/each}
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Image.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Image.wrn
new file mode 100644
index 00000000..881d5229
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Image.wrn
@@ -0,0 +1,47 @@
+component Image {
+ props {
+ size = "default"
+ color = "primary"
+ src = ""
+ alt = ""
+ width = ""
+ height = ""
+ loading = "lazy"
+ rounded = false
+ class = ""
+ }
+
+ view {
+
+ {#if src}
+
+ {:else}
+
+
+
+ {/if}
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Input.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Input.wrn
new file mode 100644
index 00000000..3e12c986
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Input.wrn
@@ -0,0 +1,92 @@
+component Input {
+ props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event invalid = function
+ @event keydown = function
+ @event keyup = function
+ size = "default"
+ color = "primary"
+ id = ""
+ name = ""
+ label = "Input"
+ hiddenLabel = false
+ placeholder = ""
+ value = ""
+ type = "text"
+ variant = "normal"
+ icon = ""
+ iconPosition = "start"
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ readonly = false
+ disabled = false
+ required = false
+ autocomplete = ""
+ inputmode = ""
+ minlength = ""
+ maxlength = ""
+ pattern = ""
+ min = ""
+ max = ""
+ step = ""
+ class = ""
+ }
+ functions {
+ function detail(sourceEvent) {
+ return { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }
+ }
+ function handleInput(sourceEvent) { sourceEvent.stopPropagation(); $emit("input", detail(sourceEvent)) }
+ function handleChange(sourceEvent) { sourceEvent.stopPropagation(); $emit("change", detail(sourceEvent)) }
+ function handleFocus(sourceEvent) { sourceEvent.stopPropagation(); $emit("focus", detail(sourceEvent)) }
+ function handleBlur(sourceEvent) { sourceEvent.stopPropagation(); $emit("blur", detail(sourceEvent)) }
+ function handleInvalid(sourceEvent) { sourceEvent.stopPropagation(); $emit("invalid", { value: sourceEvent.currentTarget.value, name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
+ function handleKeydown(sourceEvent) { sourceEvent.stopPropagation(); $emit("keydown", { key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
+ function handleKeyup(sourceEvent) { sourceEvent.stopPropagation(); $emit("keyup", { key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/InputGroup.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/InputGroup.wrn
new file mode 100644
index 00000000..aea3fd7a
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/InputGroup.wrn
@@ -0,0 +1,51 @@
+component InputGroup {
+ props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event submit = function
+ @event action = function
+ size = "default"
+ color = "primary"
+ id = ""
+ name = ""
+ label = "Input group"
+ hiddenLabel = false
+ value = ""
+ placeholder = ""
+ type = "text"
+ startText = ""
+ endText = ""
+ icon = ""
+ iconPosition = "start"
+ actionLabel = ""
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ variant = "normal"
+ readonly = false
+ disabled = false
+ required = false
+ class = ""
+ }
+ functions {
+ function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
+ function handleKeydown(sourceEvent) { if (sourceEvent.key === "Enter") { sourceEvent.stopPropagation(); $emit("submit", { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) } }
+ function handleAction(sourceEvent) { $emit("action", { name: name, sourceEvent: sourceEvent }) }
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/InputNumber.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/InputNumber.wrn
new file mode 100644
index 00000000..226922fd
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/InputNumber.wrn
@@ -0,0 +1,623 @@
+component InputNumber {
+ props {
+ size = "default"
+ color = "primary"
+ variant = "default"
+ class = ""
+
+ id = ""
+ name = "quantity"
+ value = 0
+ min = ""
+ max = ""
+ step = 1
+ precision = "auto"
+
+ label = ""
+ description = ""
+ helpText = ""
+ error = ""
+ invalid = false
+
+ prefix = ""
+ suffix = ""
+ placeholder = ""
+ autocomplete = "off"
+ inputMode = "decimal"
+ ariaLabel = ""
+
+ required = false
+ disabled = false
+ inputDisabled = false
+ buttonsDisabled = false
+ readonly = false
+ allowInput = true
+ keyboard = true
+ wheel = false
+ clamp = true
+ fullWidth = false
+ showButtons = true
+ showValidationMessage = true
+
+ decrementLabel = "Decrease value"
+ incrementLabel = "Increase value"
+ controlsLabel = "Quantity controls"
+ requiredMessage = "A value is required."
+ minMessage = "Value is below the minimum."
+ maxMessage = "Value is above the maximum."
+
+ @event input = function
+ @event change = function
+ @event increment = function
+ @event decrement = function
+ }
+
+ state currentValue = value
+ state committedValue = value
+
+ functions {
+ function inputId() {
+ if (id !== "") {
+ return id
+ }
+
+ if (name !== "") {
+ return name
+ }
+
+ return "input-number"
+ }
+
+ function descriptionId() {
+ return inputId() + "-description"
+ }
+
+ function messageId() {
+ return inputId() + "-message"
+ }
+
+ function componentColor() {
+ if (color === "secondary") {
+ return "var(--wire-color-secondary)"
+ }
+
+ if (color === "success") {
+ return "var(--wire-color-success)"
+ }
+
+ if (color === "warning") {
+ return "var(--wire-color-warning)"
+ }
+
+ if (color === "danger") {
+ return "var(--wire-color-danger)"
+ }
+
+ if (color === "info") {
+ return "var(--wire-color-info)"
+ }
+
+ return "var(--wire-color-primary)"
+ }
+
+ function hasMin() {
+ return min !== "" && min !== null && min !== undefined
+ }
+
+ function hasMax() {
+ return max !== "" && max !== null && max !== undefined
+ }
+
+ function isBlank() {
+ return currentValue === "" || currentValue === null || currentValue === undefined
+ }
+
+ function normalizedStep() {
+ return Number(step) > 0 ? Number(step) : 1
+ }
+
+ function inferredPrecision() {
+ if (precision !== "auto" && precision !== "") {
+ return Math.max(0, Number(precision) || 0)
+ }
+
+ if (String(normalizedStep()).includes(".")) {
+ return String(normalizedStep()).split(".")[1].length
+ }
+
+ return 0
+ }
+
+ function precisionFactor() {
+ return Math.pow(10, inferredPrecision())
+ }
+
+ function roundValue(nextValue) {
+ return Math.round(Number(nextValue) * precisionFactor()) / precisionFactor()
+ }
+
+ function clampValue(nextValue) {
+ nextValue = Number(nextValue)
+
+ if (hasMin() && nextValue < Number(min)) {
+ nextValue = Number(min)
+ }
+
+ if (hasMax() && nextValue > Number(max)) {
+ nextValue = Number(max)
+ }
+
+ return roundValue(nextValue)
+ }
+
+ function isBelowMin() {
+ return !isBlank() && hasMin() && Number(currentValue) < Number(min)
+ }
+
+ function isAboveMax() {
+ return !isBlank() && hasMax() && Number(currentValue) > Number(max)
+ }
+
+ function isInvalid() {
+ return (
+ invalid ||
+ error !== "" ||
+ (required && isBlank()) ||
+ isBelowMin() ||
+ isAboveMax()
+ )
+ }
+
+ function validationMessage() {
+ if (error !== "") {
+ return error
+ }
+
+ if (required && isBlank()) {
+ return requiredMessage
+ }
+
+ if (isBelowMin()) {
+ return minMessage
+ }
+
+ if (isAboveMax()) {
+ return maxMessage
+ }
+
+ return ""
+ }
+
+ function hasMessage() {
+ return (
+ helpText !== "" ||
+ (showValidationMessage && isInvalid() && validationMessage() !== "")
+ )
+ }
+
+ function describedBy() {
+ if (description !== "" && hasMessage()) {
+ return descriptionId() + " " + messageId()
+ }
+
+ if (description !== "") {
+ return descriptionId()
+ }
+
+ if (hasMessage()) {
+ return messageId()
+ }
+
+ return ""
+ }
+
+ function decrementDisabled() {
+ return (
+ disabled ||
+ readonly ||
+ buttonsDisabled ||
+ (hasMin() && !isBlank() && Number(currentValue) <= Number(min))
+ )
+ }
+
+ function incrementDisabled() {
+ return (
+ disabled ||
+ readonly ||
+ buttonsDisabled ||
+ (hasMax() && !isBlank() && Number(currentValue) >= Number(max))
+ )
+ }
+
+ function dispatchInputNumberEvent(
+ sourceEvent,
+ eventName,
+ action,
+ previousValue,
+ root,
+ customEvent
+ ) {
+ root = sourceEvent.currentTarget.closest("[data-wrn-input-number]")
+
+ if (!root && sourceEvent.target) {
+ root = sourceEvent.target.closest("[data-wrn-input-number]")
+ }
+
+ if (!root) {
+ return
+ }
+
+ customEvent = document.createEvent("CustomEvent")
+ customEvent.initCustomEvent(eventName, true, false, {
+ component: "InputNumber",
+ name: name,
+ value: currentValue,
+ previousValue: previousValue,
+ action: action,
+ min: hasMin() ? Number(min) : null,
+ max: hasMax() ? Number(max) : null,
+ step: normalizedStep(),
+ valid: !isInvalid()
+ })
+ root.dispatchEvent(customEvent)
+ }
+
+ function applyControlValue(nextValue, action, sourceEvent, previousValue) {
+ previousValue = currentValue
+ currentValue = clampValue(nextValue)
+ committedValue = currentValue
+
+ dispatchInputNumberEvent(
+ sourceEvent,
+ "input",
+ action,
+ previousValue
+ )
+ dispatchInputNumberEvent(
+ sourceEvent,
+ "change",
+ action,
+ previousValue
+ )
+ dispatchInputNumberEvent(
+ sourceEvent,
+ action,
+ action,
+ previousValue
+ )
+ }
+
+ function incrementValue(sourceEvent, nextValue) {
+ if (incrementDisabled()) {
+ return
+ }
+
+ if (isBlank()) {
+ nextValue = hasMin() ? Number(min) : normalizedStep()
+ } else {
+ nextValue =
+ Number(currentValue) +
+ normalizedStep() * (sourceEvent.shiftKey ? 10 : 1)
+ }
+
+ applyControlValue(nextValue, "increment", sourceEvent)
+ }
+
+ function decrementValue(sourceEvent, nextValue) {
+ if (decrementDisabled()) {
+ return
+ }
+
+ if (isBlank()) {
+ nextValue = hasMax() ? Number(max) : -normalizedStep()
+ } else {
+ nextValue =
+ Number(currentValue) -
+ normalizedStep() * (sourceEvent.shiftKey ? 10 : 1)
+ }
+
+ applyControlValue(nextValue, "decrement", sourceEvent)
+ }
+
+ function handleInput(sourceEvent, previousValue, nextValue) {
+ sourceEvent.stopPropagation()
+ previousValue = currentValue
+ nextValue = sourceEvent.target.value
+
+ if (nextValue === "") {
+ currentValue = ""
+ } else if (!Number.isNaN(Number(nextValue))) {
+ currentValue = roundValue(Number(nextValue))
+ }
+
+ dispatchInputNumberEvent(
+ sourceEvent,
+ "input",
+ "input",
+ previousValue
+ )
+ }
+
+ function handleChange(sourceEvent, previousValue) {
+ sourceEvent.stopPropagation()
+ previousValue = committedValue
+
+ if (!isBlank()) {
+ currentValue = clamp
+ ? clampValue(currentValue)
+ : roundValue(currentValue)
+ }
+
+ committedValue = currentValue
+
+ dispatchInputNumberEvent(
+ sourceEvent,
+ "change",
+ "change",
+ previousValue
+ )
+ }
+
+ function handleKeydown(sourceEvent) {
+ if (
+ !keyboard ||
+ disabled ||
+ readonly ||
+ inputDisabled ||
+ !allowInput
+ ) {
+ return
+ }
+
+ if (sourceEvent.key === "ArrowUp") {
+ sourceEvent.preventDefault()
+ incrementValue(sourceEvent)
+ } else if (sourceEvent.key === "ArrowDown") {
+ sourceEvent.preventDefault()
+ decrementValue(sourceEvent)
+ } else if (sourceEvent.key === "Home" && hasMin()) {
+ sourceEvent.preventDefault()
+ applyControlValue(Number(min), "decrement", sourceEvent)
+ } else if (sourceEvent.key === "End" && hasMax()) {
+ sourceEvent.preventDefault()
+ applyControlValue(Number(max), "increment", sourceEvent)
+ }
+ }
+
+ function handleWheel(sourceEvent) {
+ if (
+ !wheel ||
+ disabled ||
+ readonly ||
+ inputDisabled ||
+ !allowInput
+ ) {
+ return
+ }
+
+ sourceEvent.preventDefault()
+
+ if (sourceEvent.deltaY < 0) {
+ incrementValue(sourceEvent)
+ } else if (sourceEvent.deltaY > 0) {
+ decrementValue(sourceEvent)
+ }
+ }
+ }
+
+ view {
+
+ {#if label !== "" && variant !== "labeled" && variant !== "seat"}
+
+ {/if}
+
+ {#if description !== "" && variant !== "labeled" && variant !== "seat"}
+
+ {description}
+
+ {/if}
+
+
+ {#if variant === "horizontal" && showButtons}
+
+ {/if}
+
+
+ {#if variant === "labeled" || variant === "seat"}
+
+ {#if label !== ""}
+
+ {/if}
+
+ {#if description !== ""}
+
+ {description}
+
+ {/if}
+
+ {/if}
+
+
+ {#if prefix !== ""}
+
+ {prefix}
+
+ {/if}
+
+
+
+ {#if suffix !== ""}
+
+ {suffix}
+
+ {/if}
+
+
+
+ {#if variant === "horizontal" && showButtons}
+
+ {:else}
+ {#if showButtons}
+
+
+
+
+
+ {/if}
+ {/if}
+
+
+ {#if showValidationMessage && isInvalid() && validationMessage() !== ""}
+
+
+ {validationMessage()}
+
+ {/if}
+
+ {#if (!showValidationMessage || !isInvalid() || validationMessage() === "") && helpText !== ""}
+
+ {helpText}
+
+ {/if}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/LegendIndicator.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/LegendIndicator.wrn
new file mode 100644
index 00000000..1fae3791
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/LegendIndicator.wrn
@@ -0,0 +1,21 @@
+component LegendIndicator {
+ props {
+ @event toggle = function
+ @event select = function
+ size = "default"
+ color = "primary"
+ title = "Legend Indicator"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Link.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Link.wrn
new file mode 100644
index 00000000..3cf17764
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Link.wrn
@@ -0,0 +1,47 @@
+component Link {
+ props {
+ size = "default"
+ color = "primary"
+ label = "Link"
+ href = "#"
+ target = ""
+ rel = ""
+ external = false
+ class = ""
+ }
+
+ view {
+
+ {label}
+
+ {#if external}
+
+ {/if}
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/List.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/List.wrn
new file mode 100644
index 00000000..0ac667a7
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/List.wrn
@@ -0,0 +1,107 @@
+component List {
+ props {
+ size = "default"
+ color = "primary"
+ title = "List"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+
+ view {
+
+ {#if title || description}
+
+ {#if title}
+ {title}
+ {/if}
+ {#if description}
+ {description}
+ {/if}
+
+ {/if}
+
+
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/ListGroup.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/ListGroup.wrn
new file mode 100644
index 00000000..35366c9c
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/ListGroup.wrn
@@ -0,0 +1,21 @@
+component ListGroup {
+ props {
+ @event select = function
+ @event change = function
+ size = "default"
+ color = "primary"
+ title = "List Group"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Map.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Map.wrn
new file mode 100644
index 00000000..6d0da585
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Map.wrn
@@ -0,0 +1,85 @@
+component Map {
+ props {
+ size = "default"
+ color = "primary"
+ title = "Map"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+
+ view {
+
+ {#if title || description}
+
+ {/if}
+
+
+
+
+
+
+
+
+ {#if items.length > 0}
+ {#each items as item, index}
+
+ {/each}
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if actionLabel}
+
+ {/if}
+
+
+
+
+
+
+ {#if title}
+
+
+ {title}
+
+ {/if}
+
+
+
+
+
+
+
{label}
+
+ {prefix}{value}{suffix}
+
+
+
+ {#if icon}
+
+
+
+ {/if}
+
{description}
+ {/if}
+
+ {#if trend || trendLabel}
+
+
+ {#if trendDirection === "up" || trendDirection === "positive"}
+
+ {:else if trendDirection === "down" || trendDirection === "negative"}
+
+ {:else}
+
+ {/if}
+ {trend}
+
+ {#if trendLabel}
+ {trendLabel}
+ {/if}
+
+ {/if}
+
+ {#if href}
+
+ {/if}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/MetricGrid.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/MetricGrid.wrn
new file mode 100644
index 00000000..5e353cff
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/MetricGrid.wrn
@@ -0,0 +1,60 @@
+component MetricGrid {
+ props {
+ items = []
+ columns = 4
+ tabletColumns = 2
+ mobileColumns = 1
+ gap = "md"
+ equalHeight = true
+ dividers = false
+ size = "default"
+ color = "primary"
+ variant = "default"
+ class = ""
+ }
+
+ view {
+
+ {#each items as item}
+
+ {:empty}
+
+ {/each}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Modal.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Modal.wrn
new file mode 100644
index 00000000..2366e70f
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Modal.wrn
@@ -0,0 +1,23 @@
+component Modal {
+ props {
+ @event open = function
+ @event close = function
+ @event cancel = function
+ @event confirm = function
+ size = "default"
+ color = "primary"
+ title = "Modal"
+ description = ""
+ open = false
+ placement = "bottom"
+ closeLabel = "Close"
+ class = ""
+ }
+ view {
+
+
+ {#if description}
{description}
{/if}
+
+
+
+ {#if showBreadcrumbs && breadcrumbs.length > 0}
+
+ {/if}
+
+
+
+ {#if icon}
+
+
+
+ {/if}
+
+
+
+
+
+
+
+ {#if secondaryLabel}
+
+ {/if}
+
+ {#if primaryLabel}
+
+ {/if}
+
+
+
+
+
+
+ {#if description}
{description}
{/if}
+
+
{item.label}{item.value}{#if item.detail}{item.detail}{/if}
+
+ {/each}
+
+
+
+
+
+
+ Priority
Tasks requiring attention
+
+
+
+
+ {#each updates as item}
+
+
+ {item.label}{#if item.detail}
{item.detail}
{/if}
{item.time || ''}
+
+ {/each}
+
+
+
+
+
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/PublicPageShell.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/PublicPageShell.wrn
new file mode 100644
index 00000000..e98f9c02
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/PublicPageShell.wrn
@@ -0,0 +1,53 @@
+component PublicPageShell {
+ props {
+ maxWidth = "full"
+ fullWidth = true
+ headerOffset = "none"
+ background = "default"
+ overflow = "clip"
+ minHeight = "screen"
+ size = "default"
+ color = "primary"
+ variant = "default"
+ class = ""
+ }
+
+ view {
+
+
+
+ {#if fullWidth}
+
+
+
+ {:else}
+
+
+
+ {/if}
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Radio.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Radio.wrn
new file mode 100644
index 00000000..1da0c2a8
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Radio.wrn
@@ -0,0 +1,56 @@
+component Radio {
+ props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event invalid = function
+ size = "default"
+ color = "primary"
+ id = ""
+ name = ""
+ label = "Radio"
+ hiddenLabel = false
+ placeholder = ""
+ variant = "normal"
+ icon = ""
+ iconPosition = "start"
+ value = "on"
+ options = []
+ checked = false
+ orientation = "vertical"
+ card = false
+ rightAligned = false
+ list = false
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ readonly = false
+ disabled = false
+ required = false
+ class = ""
+ }
+ functions {
+ function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { checked: sourceEvent.currentTarget.checked, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
+ function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
+ }
+ view {
+
+
{#if options.length || cornerHint}{label}{#if cornerHint}{cornerHint}{/if}{/if}
+ {#if options.length}
+
+ {#each options as option}
+
+ {/each}
+
+ {:else}
+
+ {/if}
+ {#if helperText}
{helperText}{/if}
{error}
+
+
{#if cornerHint}{cornerHint}{/if}
+
+ {#if icon}
{/if}
+
+
+
+
+
+ {#if marks.length}{#each marks as mark}{/each}{/if}
+
+ {#if showBounds}
{min}Step {step}{max}
{/if}
+
+ {#if showValue}
{/if}
+
+
+ {#if helperText}
{helperText}{/if}
{error}
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Scrollspy.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Scrollspy.wrn
new file mode 100644
index 00000000..305d2d72
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Scrollspy.wrn
@@ -0,0 +1,18 @@
+component Scrollspy {
+ props {
+ @event change = function
+ size = "default"
+ color = "primary"
+ label = "Scrollspy"
+ items = []
+ active = ""
+ orientation = "horizontal"
+ class = ""
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/SearchBox.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/SearchBox.wrn
new file mode 100644
index 00000000..bcb7243a
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/SearchBox.wrn
@@ -0,0 +1,80 @@
+component SearchBox {
+ props {
+ size = "default"
+ color = "primary"
+ label = "Search Box"
+ name = ""
+ value = ""
+ placeholder = ""
+ type = "search"
+ min = ""
+ max = ""
+ step = ""
+ disabled = false
+ required = false
+ class = ""
+ }
+
+ state query = value
+
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Section.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Section.wrn
new file mode 100644
index 00000000..c0e65c22
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Section.wrn
@@ -0,0 +1,60 @@
+component Section {
+ props {
+ id = ""
+ size = "default"
+ color = "primary"
+ variant = "default"
+ spacing = "lg"
+ maxWidth = "xl"
+ fullWidth = false
+ borderTop = false
+ borderBottom = false
+ class = ""
+ }
+
+ view {
+
+ {#if fullWidth}
+
+ {:else}
+
+
+
+ {/if}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/SectionHeader.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/SectionHeader.wrn
new file mode 100644
index 00000000..a70c54fb
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/SectionHeader.wrn
@@ -0,0 +1,113 @@
+component SectionHeader {
+ props {
+ id = ""
+ eyebrow = ""
+ title = ""
+ description = ""
+ align = "left"
+ size = "default"
+ color = "primary"
+ headingLevel = 2
+ maxWidth = "3xl"
+ class = ""
+ }
+
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Select.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Select.wrn
new file mode 100644
index 00000000..23c13a94
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Select.wrn
@@ -0,0 +1,61 @@
+component Select {
+ props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event open = function
+ @event close = function
+ @event invalid = function
+ size = "default"
+ color = "primary"
+ id = ""
+ name = ""
+ label = "Select"
+ hiddenLabel = false
+ value = ""
+ values = []
+ options = []
+ placeholder = "Select an option"
+ variant = "normal"
+ icon = ""
+ iconPosition = "start"
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ multiple = false
+ readonly = false
+ disabled = false
+ required = false
+ class = ""
+ }
+ functions {
+ function selected(option) {
+ if (multiple) return values.includes(option.value)
+ return option.value === value
+ }
+ function emitField(nameEvent, sourceEvent) {
+ sourceEvent.stopPropagation()
+ $emit(nameEvent, { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent })
+ }
+ function handleFocus(sourceEvent) { emitField("focus", sourceEvent); $emit("open", { name: name, sourceEvent: sourceEvent }) }
+ function handleBlur(sourceEvent) { emitField("blur", sourceEvent); $emit("close", { name: name, sourceEvent: sourceEvent }) }
+ function handleInvalid(sourceEvent) { $emit("invalid", { name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
+ }
+ view {
+
+
{#if cornerHint}{cornerHint}{/if}
+
+ {#if icon}{/if}
+
+ {#if variant === "floating"}{label}{/if}
+
+ {#if helperText}
{helperText}{/if}
+
{error}
+
+
+ {#if eyebrow}
+
+
+ {eyebrow}
+
+ {/if}
+
+
+ {title}
+ {#if highlight}
+ {highlight}
+ {/if}
+
+
+ {#if description}
+
{description}
+ {/if}
+
+
+
+
+
+ {#if trustItems.length > 0}
+
+ {#each trustItems as item}
+
+
+ {item.label || item.title || item}
+
+ {/each}
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+ {#if presentation === "popover"}
+
+
+
+
+ Password strength
+ {password ? strengthLabel() : emptyLabel}
+
+
+
+
+ {#if showRequirements}
+
+ -
+ At least {minLength} characters
+
+ {#if requireLowercase}- One lowercase letter
{/if}
+ {#if requireUppercase}- One uppercase letter
{/if}
+ {#if requireNumber}- One number
{/if}
+ {#if requireSpecialCharacter}- One special character: {specialCharactersSet}
{/if}
+
+ {/if}
+ {#if hintText}
{hintText}{/if}
+
+
+ {/if}
+
+
+ {#if presentation !== "popover"}
+
+
+ Password strength
+ {password ? strengthLabel() : emptyLabel}
+
+
+
+
+ {#if showRequirements}
+
+ - At least {minLength} characters
+ {#if requireLowercase}- One lowercase letter
{/if}
+ {#if requireUppercase}- One uppercase letter
{/if}
+ {#if requireNumber}- One number
{/if}
+ {#if requireSpecialCharacter}- One special character: {specialCharactersSet}
{/if}
+
+ {/if}
+ {#if hintText}
{hintText}{/if}
+
+ {/if}
+
+
{validationMessage}
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Switch.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Switch.wrn
new file mode 100644
index 00000000..478a92fe
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Switch.wrn
@@ -0,0 +1,39 @@
+component Switch {
+ props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ size = "default"
+ color = "primary"
+ id = ""
+ name = ""
+ label = "Switch"
+ hiddenLabel = false
+ placeholder = ""
+ variant = "normal"
+ icon = ""
+ iconPosition = "start"
+ value = "on"
+ checked = false
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ readonly = false
+ disabled = false
+ required = false
+ class = ""
+ }
+ functions {
+ function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { checked: sourceEvent.currentTarget.checked, value: value, name: name, sourceEvent: sourceEvent }) }
+ function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
+ }
+ view {
+
+
{#if cornerHint}{label}{cornerHint}{/if}
+
+ {#if helperText}
{helperText}{/if}
{error}
+
+ {#each items as item, index}
+
+ {/each}
+
+
+
+ {#each items as item, index}
+
+ {#if item.title && item.title !== item.label}
+
{item.title}
+ {/if}
+ {#if item.description}
+
{item.description}
+ {/if}
+ {#if item.content}
+
{item.content}
+ {/if}
+
+ {/each}
+
+
+
+
{#if cornerHint}{cornerHint}{/if}
+
+ {#if icon}{/if}
+
+ {#if variant === "floating"}{label}{/if}
+
+ {#if helperText}
{helperText}{/if}
+
{error}
+
+
{#if cornerHint}{cornerHint}{/if}
+
+ {#if icon}{/if}
+
+
+
+
Hour{#each hours as hour}{/each}
Minute{#each minutes as minute}{/each}
+ {#if helperText}
{helperText}{/if}
+
{error}
+
{title}
+ {/if}
+ {#if description}
+ {description}
+ {/if}
+
+ {/if}
+
+
+ {#each items as item, index}
+ -
+
+
+
+
+
+
+
+
{item.title || item.label}
+ {#if item.subtitle}
+
{item.subtitle}
+ {/if}
+
+ {#if item.date || item.meta}
+
+ {/if}
+
{item.description}
+ {/if}
+
+ {#if item.href}
+
+ {item.actionLabel || "View details"}
+
+
+ {/if}
+
+
+ {:empty}
+ - No timeline items available.
+ {/each}
+
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Toast.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Toast.wrn
new file mode 100644
index 00000000..bda42b49
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Toast.wrn
@@ -0,0 +1,21 @@
+component Toast {
+ props {
+ @event dismiss = function
+ @event action = function
+ size = "default"
+ color = "primary"
+ title = "Toast"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/ToastNotifications.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/ToastNotifications.wrn
new file mode 100644
index 00000000..d49d5547
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/ToastNotifications.wrn
@@ -0,0 +1,23 @@
+component ToastNotifications {
+ props {
+ @event add = function
+ @event dismiss = function
+ @event clear = function
+ @event action = function
+ size = "default"
+ color = "primary"
+ title = "Toast Notifications"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/ToggleCount.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/ToggleCount.wrn
new file mode 100644
index 00000000..0a858af9
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/ToggleCount.wrn
@@ -0,0 +1,237 @@
+component ToggleCount {
+ props {
+ size = "default"
+ color = "primary"
+ variant = "segmented"
+ class = ""
+
+ name = "billing-cycle"
+ value = "monthly"
+ firstValue = "monthly"
+ firstLabel = "Monthly"
+ secondValue = "annual"
+ secondLabel = "Annual"
+ ariaLabel = "Billing frequency"
+
+ items = []
+ currency = "$"
+ suffix = ""
+ firstValueKey = "monthly"
+ secondValueKey = "annual"
+ emptyValue = "—"
+
+ align = "end"
+ fullWidth = true
+ disabled = false
+ animate = true
+ animationDuration = 450
+ animationSteps = 18
+
+ @event change = function
+ @event toggle = function
+ }
+
+ state selectedValue = value
+
+ functions {
+ function isFirstSelected() {
+ return selectedValue === firstValue
+ }
+
+ function isSecondSelected() {
+ return selectedValue === secondValue
+ }
+
+ function displayValue(item) {
+ if (isSecondSelected()) {
+ return item[secondValueKey] !== undefined
+ ? item[secondValueKey]
+ : emptyValue
+ }
+
+ return item[firstValueKey] !== undefined
+ ? item[firstValueKey]
+ : emptyValue
+ }
+
+ function dispatchToggleEvent(sourceEvent, previousValue, root, customEvent) {
+ root = sourceEvent.currentTarget.closest("[data-wrn-toggle-count]")
+
+ if (!root) {
+ return
+ }
+
+ customEvent = document.createEvent("CustomEvent")
+ customEvent.initCustomEvent("change", true, false, {
+ component: "ToggleCount",
+ name: name,
+ value: selectedValue,
+ previousValue: previousValue,
+ firstValue: firstValue,
+ secondValue: secondValue
+ })
+ root.dispatchEvent(customEvent)
+
+ customEvent = document.createEvent("CustomEvent")
+ customEvent.initCustomEvent("toggle", true, false, {
+ component: "ToggleCount",
+ name: name,
+ value: selectedValue,
+ previousValue: previousValue,
+ firstValue: firstValue,
+ secondValue: secondValue
+ })
+ root.dispatchEvent(customEvent)
+ }
+
+ function selectValue(sourceEvent, nextValue, previousValue) {
+ if (disabled || selectedValue === nextValue) {
+ return
+ }
+
+ previousValue = selectedValue
+ selectedValue = nextValue
+
+ if (
+ animate &&
+ !window.matchMedia("(prefers-reduced-motion: reduce)").matches
+ ) {
+ animateDisplayedValues(sourceEvent, previousValue)
+ }
+
+ dispatchToggleEvent(sourceEvent, previousValue)
+ }
+
+ function animateDisplayedValues(sourceEvent, previousValue, root, nodes) {
+ root = sourceEvent.currentTarget.closest("[data-wrn-toggle-count]")
+
+ if (!root) {
+ return
+ }
+
+ nodes = root.querySelectorAll("[data-toggle-count-value]")
+ animateValueAt(nodes, 0, previousValue)
+ }
+
+ function animateValueAt(nodes, index, previousValue, node, fromValue, toValue) {
+ if (index >= nodes.length) {
+ return
+ }
+
+ node = nodes[index]
+ fromValue = Number(
+ previousValue === secondValue
+ ? node.getAttribute("data-second-value")
+ : node.getAttribute("data-first-value")
+ )
+ toValue = Number(
+ selectedValue === secondValue
+ ? node.getAttribute("data-second-value")
+ : node.getAttribute("data-first-value")
+ )
+
+ if (!Number.isNaN(fromValue) && !Number.isNaN(toValue)) {
+ animateValueFrame(node, fromValue, toValue, 0)
+ }
+
+ animateValueAt(nodes, index + 1, previousValue)
+ }
+
+ function animateValueFrame(node, fromValue, toValue, frame, totalFrames, nextValue) {
+ totalFrames = Math.max(1, Number(animationSteps) || 1)
+
+ if (frame >= totalFrames) {
+ node.replaceChildren(String(toValue))
+ return
+ }
+
+ nextValue = Math.round(
+ fromValue +
+ (toValue - fromValue) * (frame / totalFrames)
+ )
+ node.replaceChildren(String(nextValue))
+
+ setTimeout(
+ animateValueFrame,
+ Math.max(1, Number(animationDuration) / totalFrames),
+ node,
+ fromValue,
+ toValue,
+ frame + 1
+ )
+ }
+
+ function toggleValue(sourceEvent) {
+ selectValue(
+ sourceEvent,
+ isFirstSelected() ? secondValue : firstValue
+ )
+ }
+ }
+
+ view {
+
+
+
+
+ {#if variant === "switch"}
+
{firstLabel}
+
+
{secondLabel}
+ {:else}
+
+
+
+
+ {/if}
+
+ {#each items as item}
+
+ {item.label || item.name}
+
+ {#if currency}{currency}{/if}
+ {displayValue(item)}
+ {#if suffix}{suffix}{/if}
+
+ {#if item.description}{item.description}{/if}
+
+ {/each}
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Typography.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Typography.wrn
new file mode 100644
index 00000000..d7d36173
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/Typography.wrn
@@ -0,0 +1,75 @@
+component Typography {
+ props {
+ size = "default"
+ color = "primary"
+ columns = 2
+ gap = "md"
+ maxWidth = "xl"
+ class = ""
+ }
+
+ view {
+
+
+
+ }
+
+ style {
+ .wire-typography :where(h1, h2, h3, h4) {
+ color: var(--wire-color-text);
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ line-height: 1.2;
+ break-after: avoid;
+ }
+
+ .wire-typography :where(h1) { font-size: clamp(2rem, 4vw, 3.5rem); margin: 0 0 1.5rem; }
+ .wire-typography :where(h2) { font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 2.5rem 0 1rem; }
+ .wire-typography :where(h3) { font-size: 1.35rem; margin: 2rem 0 0.75rem; }
+ .wire-typography :where(p, ul, ol, blockquote, pre, table) { margin: 1rem 0; }
+ .wire-typography :where(p, li) { color: var(--wire-color-text-muted); line-height: 1.8; }
+ .wire-typography :where(a) { color: var(--wire-color-primary); font-weight: 600; text-underline-offset: 0.2em; }
+ .wire-typography :where(a:hover) { color: var(--wire-color-primary-hover); text-decoration: underline; }
+ .wire-typography :where(ul, ol) { padding-left: 1.4rem; }
+ .wire-typography :where(ul) { list-style: disc; }
+ .wire-typography :where(ol) { list-style: decimal; }
+ .wire-typography :where(blockquote) {
+ border-left: 4px solid var(--wire-color-primary);
+ background: var(--wire-color-primary-soft);
+ border-radius: 0 0.75rem 0.75rem 0;
+ padding: 1rem 1.25rem;
+ color: var(--wire-color-text);
+ }
+ .wire-typography :where(code) {
+ border-radius: 0.35rem;
+ background: var(--wire-color-surface-soft);
+ padding: 0.15rem 0.35rem;
+ font-size: 0.9em;
+ }
+ .wire-typography :where(pre) {
+ overflow-x: auto;
+ border: 1px solid var(--wire-color-border);
+ border-radius: 1rem;
+ background: var(--wire-color-surface-raised);
+ padding: 1rem;
+ }
+ .wire-typography :where(img) { border-radius: 1rem; }
+ .wire-typography :where(hr) { border-color: var(--wire-color-border); margin: 2rem 0; }
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/WysiwygEditor.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/WysiwygEditor.wrn
new file mode 100644
index 00000000..dfb91935
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/WysiwygEditor.wrn
@@ -0,0 +1,23 @@
+component WysiwygEditor {
+ props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ size = "default"
+ color = "primary"
+ title = "Wysiwyg Editor"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/alert.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/alert.wrn
new file mode 100644
index 00000000..ba2e904b
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/alert.wrn
@@ -0,0 +1,142 @@
+component Alert {
+ props {
+ size = "default"
+ color = "info"
+ variant = "soft"
+ class = ""
+ radius = "md"
+ shadow = "sm"
+
+ title = "Alert"
+ description = ""
+ items = []
+ actions = []
+
+ showIcon = false
+ icon = ""
+ dismissible = false
+ dismissLabel = "Dismiss alert"
+ role = "alert"
+ live = "polite"
+
+ linkLabel = ""
+ linkHref = ""
+ actionLabel = ""
+ actionHref = ""
+ compact = false
+
+ @event dismiss = function
+ @event action = function
+ }
+
+ state visible = true
+
+ functions {
+ function dispatchAlertEvent(sourceEvent, eventName, action, root, customEvent) {
+ root = sourceEvent.currentTarget.closest("[data-wrn-alert]")
+
+ if (!root) {
+ return
+ }
+
+ customEvent = document.createEvent("CustomEvent")
+ customEvent.initCustomEvent(eventName, true, false, {
+ component: "Alert",
+ title: title,
+ color: color,
+ variant: variant,
+ action: action
+ })
+ root.dispatchEvent(customEvent)
+ }
+
+ function dismissAlert(sourceEvent) {
+ visible = false
+ dispatchAlertEvent(sourceEvent, "dismiss", null)
+ }
+
+ function selectAction(sourceEvent, action) {
+ dispatchAlertEvent(sourceEvent, "action", action)
+ }
+ }
+
+ view {
+
+ {#if showIcon}
+
+ {#if icon}
+
+ {:else if color === "success"}
+
+ {:else if color === "danger"}
+
+ {:else if color === "warning"}
+
+ {:else}
+
+ {/if}
+
+ {/if}
+
+
+ {#if title}
{title}{/if}
+ {#if description}
{description}
{/if}
+
+ {#if items.length > 0}
+
+ {#each items as item}- {item.label || item}
{/each}
+
+ {/if}
+
+ {#if actions.length > 0 || actionLabel || linkLabel}
+
+ {/if}
+
+ {#if thumbnails === "vertical"}
+
+ {#each items as item, index}
+
+ {/each}
+
+ {/if}
+
+
+
+
+
+ {#each items as item, index}
+
+ {#if item.imageSrc}
+
+ {/if}
+
+ {#if item.eyebrow}
{item.eyebrow}{/if}
+ {#if item.title || item.label}
{item.title || item.label}
{/if}
+ {#if item.description}
{item.description}
{/if}
+ {#if item.actionLabel}
+
{item.actionLabel}
+ {/if}
+
+ {/each}
+
+
+
+
+
+
+
+ {#if showCounter}
+
+ {/if}
+
+
+ {#if showPagination}
+
+ {/if}
+
+ {#if thumbnails === "horizontal"}
+
+ {#each items as item, index}
+
+ {/each}
+
+ {/if}
+
+
+
{label}{#if showValue}{value}%{/if}
+
+
+ {#if "Skeleton" === "Skeleton"}{#each Array(lines).fill(0) as line}{/each}{:else}{/if}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/spinner.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/spinner.wrn
new file mode 100644
index 00000000..bd607734
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/spinner.wrn
@@ -0,0 +1,14 @@
+component Spinner {
+ props {
+ color = "primary"
+ label = "Loading"
+ size = "md"
+ lines = 3
+ class = ""
+ }
+ view {
+
+ {#if "Spinner" === "Skeleton"}{#each Array(lines).fill(0) as line}{/each}{:else}{/if}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/table.wrn b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/table.wrn
new file mode 100644
index 00000000..1f5dc29f
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-2026-07-30T12-50-29-410Z/table.wrn
@@ -0,0 +1,17 @@
+component Table {
+ props {
+ @event sort = function
+ @event select = function
+ @event rowClick = function
+ size = "default"
+ color = "primary"
+ caption = "Table"
+ columns = []
+ rows = []
+ striped = true
+ class = ""
+ }
+ view {
+ {caption}{#each columns as column}| {column.label} | {/each}
{#each rows as row}{#each columns as column}| {row[column.key]} | {/each}
{/each}
+ {#each items as item, index}
+
+
+
+
+
+
+
+
+ {#if item.content}
{item.content}
{/if}
+
+ {#if item.children && item.children.length > 0}
+
+ {#each item.children as child, childIndex}
+
+
+
+
+
+
+ {/each}
+
+ {/if}
+
+
+
+ {/each}
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/AdvancedRangeSlider.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/AdvancedRangeSlider.wrn
new file mode 100644
index 00000000..51090087
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/AdvancedRangeSlider.wrn
@@ -0,0 +1,23 @@
+component AdvancedRangeSlider {
+ props {
+ @event input = function
+ @event change = function
+ @event start = function
+ @event end = function
+ size = "default"
+ color = "primary"
+ title = "Advanced Range Slider"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/AdvancedSelect.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/AdvancedSelect.wrn
new file mode 100644
index 00000000..6bd6fe16
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/AdvancedSelect.wrn
@@ -0,0 +1,456 @@
+component AdvancedSelect {
+ props {
+ size = "default"
+ color = "primary"
+ label = "Advanced Select"
+ name = ""
+ value = ""
+ values = []
+ options = []
+ groups = []
+ placeholder = "Select an option"
+ placeholderIcon = ""
+ searchPlaceholder = "Search options…"
+ multiple = false
+ searchable = true
+ defaultOpen = false
+ clearable = true
+ allowEmpty = true
+ tags = false
+ disabled = false
+ required = false
+ invalid = false
+ validationMessage = ""
+ helpText = ""
+ loading = false
+ loadingLabel = "Loading options…"
+ emptyLabel = "No options found"
+ selectedOptionsLabel = "Selected options"
+ clearLabel = "Clear selection"
+ createLabel = "Create"
+ loadMoreLabel = "Load more"
+ searchMode = "contains"
+ searchFields = "label,description"
+ minSearchLength = 0
+ searchResultLimit = 0
+ maxSelections = 0
+ showCounter = false
+ counterTemplate = "{selected} selected"
+ optionTemplate = "default"
+ selectedTemplate = "default"
+ closeOnSelect = true
+ scrollToSelected = true
+ fixed = false
+ placement = "bottom"
+ remote = false
+ remoteUrl = ""
+ remoteQueryParam = "q"
+ remoteDebounce = 250
+ remoteAutoLoad = true
+ infinite = false
+ hasMore = false
+ page = 1
+ class = ""
+ @event search = function
+ @event select = function
+ @event change = function
+ @event clear = function
+ @event open = function
+ @event close = function
+ @event load = function
+ @event error = function
+ }
+
+ state open = defaultOpen
+ state query = ""
+ state activeIndex = -1
+ state selectedValue = value
+ state selectedValues = values
+
+ functions {
+ function allOptions() {
+ return [...groups.flatMap((group) => group.options || []), ...options]
+ }
+
+ function searchableText(option) {
+ return ((option.label || "") + " " + (option.description || "")).toLowerCase()
+ }
+
+ function matches(option) {
+ if (!query || query.length < Number(minSearchLength || 0)) {
+ return true
+ }
+ if (searchMode === "startsWith") {
+ return searchableText(option).startsWith(query.toLowerCase())
+ }
+ if (searchMode === "exact") {
+ return searchableText(option) === query.toLowerCase()
+ }
+ return searchableText(option).includes(query.toLowerCase())
+ }
+
+ function matchingOptions(list) {
+ return list.filter((option) => matches(option))
+ }
+
+ function visibleOptions(list) {
+ if (searchResultLimit > 0) {
+ return matchingOptions(list).slice(0, Number(searchResultLimit))
+ }
+ return matchingOptions(list)
+ }
+
+ function flatVisibleOptions() {
+ return visibleOptions(allOptions())
+ }
+
+ function isSelected(option) {
+ return (
+ multiple
+ ? selectedValues.includes(option.value)
+ : selectedValue === option.value
+ )
+ }
+
+ function selectedOptions() {
+ return allOptions().filter((option) => isSelected(option))
+ }
+
+ function selectedCount() {
+ return multiple ? selectedValues.length : selectedValue ? 1 : 0
+ }
+
+ function counterText() {
+ return (
+ maxSelections
+ ? selectedCount() + " / " + maxSelections + " selected"
+ : selectedCount() + " selected"
+ )
+ }
+
+ function selectedText() {
+ return (
+ multiple
+ ? selectedValues.join(", ")
+ : selectedOptions().length
+ ? selectedOptions()[0].label
+ : ""
+ )
+ }
+
+ function triggerText() {
+ return selectedCount() ? selectedText() : placeholder
+ }
+
+ function canSelect(option) {
+ if (option.disabled) {
+ return false
+ }
+ if (!multiple || isSelected(option)) {
+ return true
+ }
+ if (maxSelections <= 0) {
+ return true
+ }
+ return selectedCount() < maxSelections
+ }
+
+ function chooseSingle(option) {
+ if (!canSelect(option)) {
+ return
+ }
+ selectedValue = option.value
+ query = ""
+ if (closeOnSelect) {
+ open = false
+ }
+ }
+
+ function chooseMultiple(option) {
+ if (!canSelect(option)) {
+ return
+ }
+ if (isSelected(option)) {
+ selectedValues = selectedValues.filter((item) => item !== option.value)
+ } else {
+ selectedValues = selectedValues.concat([option.value])
+ }
+ query = ""
+ }
+
+ function chooseOption(option) {
+ if (multiple) {
+ chooseMultiple(option)
+ return
+ }
+ chooseSingle(option)
+ }
+
+ function clearSelection(event) {
+ event.stopPropagation()
+ selectedValue = ""
+ selectedValues = []
+ query = ""
+ open = false
+ }
+
+ function toggle() {
+ if (disabled) {
+ return;
+ };
+ open = !open;
+ activeIndex = open && flatVisibleOptions().length ? 0 : -1;
+ }
+
+ function moveActive(direction) {
+ if (!flatVisibleOptions().length) {
+ return
+ }
+ activeIndex = (activeIndex + direction + flatVisibleOptions().length) % flatVisibleOptions().length
+ }
+
+ function handleKeydown(event) {
+ if (disabled) {
+ return
+ }
+ if (event.key === "ArrowDown") {
+ event.preventDefault()
+ if (!open) {
+ open = true
+ }
+ moveActive(1)
+ } else if (event.key === "ArrowUp") {
+ event.preventDefault()
+ if (!open) {
+ open = true
+ }
+ moveActive(-1)
+ } else if (event.key === "Enter" || event.key === " ") {
+ event.preventDefault()
+ if (!open) {
+ open = true
+ } else if (activeIndex >= 0) {
+ chooseOption(flatVisibleOptions()[activeIndex])
+ }
+ } else if (event.key === "Escape") {
+ open = false
+ } else if (event.key === "Home" && open) {
+ event.preventDefault()
+ activeIndex = 0
+ } else if (event.key === "End" && open) {
+ event.preventDefault()
+ activeIndex = flatVisibleOptions().length - 1
+ }
+ }
+
+ function optionIndex(option) {
+ return flatVisibleOptions().findIndex((item) => item.value === option.value)
+ }
+ }
+
+ view {
+
+
+
+ {counterText()}
+
+
+
+
+
+
+
+
+
+ {#if searchable}
+
+ {/if}
+
+
Enter at least {minSearchLength} characters.
+
+
+ {loadingLabel}
+
+
+ {#each groups as group}
+ {#if visibleOptions(group.options || []).length}
+
+
{group.label}
+ {#each group.options || [] as option}
+
+ {/each}
+
+ {/if}
+ {/each}
+
+ {#each options as option}
+
+ {/each}
+
+ {#if !loading && !flatVisibleOptions().length}
+
{emptyLabel}
+ {/if}
+
+
+ {#if tags && query && !allOptions().some((option) => option.label.toLowerCase() === query.toLowerCase())}
+
+ {/if}
+
+
+
+
+
+ {#if helpText && !validationMessage}
{helpText}{/if}
+
{validationMessage}
+
+
+
+ {brand}Unified identity and access
+
+
+
+ {eyebrow}
+
+
{title}
+ {#if description}
+
{description}
+ {/if}
+
+ {#each features as item}
+
+
+
+ {item.label}
+ {#if item.description}
+ {item.description}
+ {/if}
+
+
+ {/each}
+
+
+
+
+ {#each visibleMembers() as item}
+
+
+ {#if item.src}
+
+ {:else if item.initials}
+
+ {item.initials}
+
+ {:else}
+
+
+ {/if}
+
+
+ {#if showTooltips && (item.tooltip || item.name)}
+
+ {item.tooltip || item.name}
+
+ {/if}
+
+ {/each}
+
+ {#if hiddenMembers().length > 0}
+
+
+
+
+
+ {/if}
+
+
+ {#if quoteMark}
+ “
+ {/if}
+
+
+ {#if quote}
+
{quote}
+ {:else}
+
+ {/if}
+
+
+ {#if citation || citationTitle || avatarSrc}
+
+ {#if avatarSrc}
+
+ {/if}
+
+
+ {#if citation}
+ {#if citationUrl}
+ {citation}
+ {:else}
+ {citation}
+ {/if}
+ {/if}
+ {#if citationTitle}{citationTitle}{/if}
+
+
+ {/if}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Breadcrumb.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Breadcrumb.wrn
new file mode 100644
index 00000000..1fee40b5
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Breadcrumb.wrn
@@ -0,0 +1,19 @@
+component Breadcrumb {
+ props {
+ @event navigate = function
+ @event click = function
+ size = "default"
+ color = "primary"
+ label = "Breadcrumb"
+ items = []
+ active = ""
+ orientation = "horizontal"
+ class = ""
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/ButtonGroup.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/ButtonGroup.wrn
new file mode 100644
index 00000000..7430aba7
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/ButtonGroup.wrn
@@ -0,0 +1,89 @@
+component ButtonGroup {
+ props {
+ @event click = function
+ @event select = function
+ @event change = function
+ items = []
+ value = ""
+ size = "md"
+ color = "primary"
+ variant = "default"
+ orientation = "horizontal"
+ responsive = false
+ attached = true
+ selectable = false
+ toolbar = false
+ disabled = false
+ ariaLabel = "Button group"
+ class = ""
+ }
+
+ state selectedValue = value
+
+ functions {
+ function itemValue(item, index) {
+ return item.value || item.label || String(index)
+ }
+
+ function selectItem(item, index) {
+ previousValue = selectedValue
+ nextValue = itemValue(item, index)
+
+ $emit("select", {
+ value: nextValue,
+ previousValue: previousValue,
+ item: item,
+ index: index
+ })
+
+ if (selectable && previousValue !== nextValue) {
+ selectedValue = nextValue
+ $emit("change", {
+ value: nextValue,
+ previousValue: previousValue,
+ item: item,
+ index: index
+ })
+ }
+ }
+ }
+
+ view {
+
+ {#if items}
+ {#each items as item, index}
+
+ {/each}
+ {/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/COMPONENTS.md b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/COMPONENTS.md
new file mode 100644
index 00000000..bb322369
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/COMPONENTS.md
@@ -0,0 +1,993 @@
+# WRNexus UI component reference
+
+This reference is generated from the 108 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default.
+
+## Advanced-forms
+
+### AdvancedSelect
+
+Theme-aware, responsive advanced select component.
+
+- Mount: `data-component="AdvancedSelect"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Advanced Select"`, `name: string = ""`, `value: string = ""`, `values: string = []`, `options: string = []`, `groups: string = []`, `placeholder: string = "Select an option"`, `placeholderIcon: string = ""`, `searchPlaceholder: string = "Search options…"`, `multiple: boolean = false`, `searchable: boolean = true`, `defaultOpen: boolean = false`, `clearable: boolean = true`, `allowEmpty: boolean = true`, `tags: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `helpText: string = ""`, `loading: boolean = false`, `loadingLabel: string = "Loading options…"`, `emptyLabel: string = "No options found"`, `selectedOptionsLabel: string = "Selected options"`, `clearLabel: string = "Clear selection"`, `createLabel: string = "Create"`, `loadMoreLabel: string = "Load more"`, `searchMode: string = "contains"`, `searchFields: string = "label,description"`, `minSearchLength: number = 0`, `searchResultLimit: number = 0`, `maxSelections: number = 0`, `showCounter: boolean = false`, `counterTemplate: string = "{selected} selected"`, `optionTemplate: string = "default"`, `selectedTemplate: string = "default"`, `closeOnSelect: boolean = true`, `scrollToSelected: boolean = true`, `fixed: boolean = false`, `placement: string = "bottom"`, `remote: boolean = false`, `remoteUrl: string = ""`, `remoteQueryParam: string = "q"`, `remoteDebounce: number = 250`, `remoteAutoLoad: boolean = true`, `infinite: boolean = false`, `hasMore: boolean = false`, `page: number = 1`, `class: string = ""`
+- Slots: None
+- Events: `search`, `select`, `change`, `clear`, `open`, `close`, `load`, `error`
+
+### ComboBox
+
+Editable autocomplete combobox with local and remote suggestions.
+
+- Mount: `data-component="ComboBox"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "ComboBox"`, `name: string = ""`, `value: string = ""`, `options: string = []`, `groups: string = []`, `placeholder: string = "Search or select an option"`, `searchPlaceholder: string = "Start typing…"`, `clearable: boolean = true`, `allowCustomValue: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `helpText: string = ""`, `loading: boolean = false`, `loadingLabel: string = "Loading suggestions…"`, `emptyLabel: string = "No matching options"`, `clearLabel: string = "Clear value"`, `toggleLabel: string = "Toggle suggestions"`, `searchMode: string = "contains"`, `searchFields: string = "label,description"`, `minSearchLength: number = 0`, `searchResultLimit: number = 0`, `optionTemplate: string = "default"`, `defaultOpen: boolean = false`, `closeOnSelect: boolean = true`, `fixed: boolean = false`, `placement: string = "bottom"`, `autocomplete: string = "off"`, `remote: boolean = false`, `remoteUrl: string = ""`, `remoteQueryParam: string = "q"`, `remoteDebounce: number = 250`, `remoteAutoLoad: boolean = true`, `infinite: boolean = false`, `hasMore: boolean = false`, `page: number = 1`, `loadMoreLabel: string = "Load more"`, `class: string = ""`
+- Slots: None
+- Events: `search`, `select`, `change`, `clear`, `open`, `close`, `load`, `error`
+
+### CopyMarkup
+
+Theme-aware, responsive copy markup component.
+
+- Mount: `data-component="CopyMarkup"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Copy Markup"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Slots: None
+- Events: `copy`, `success`, `error`
+
+### InputNumber
+
+Theme-aware, responsive input number component.
+
+- Mount: `data-component="InputNumber"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""`, `id: string = ""`, `name: string = "quantity"`, `value: number = 0`, `min: string = ""`, `max: string = ""`, `step: number = 1`, `precision: string = "auto"`, `label: string = ""`, `description: string = ""`, `helpText: string = ""`, `error: string = ""`, `invalid: boolean = false`, `prefix: string = ""`, `suffix: string = ""`, `placeholder: string = ""`, `autocomplete: string = "off"`, `inputMode: string = "decimal"`, `ariaLabel: string = ""`, `required: boolean = false`, `disabled: boolean = false`, `inputDisabled: boolean = false`, `buttonsDisabled: boolean = false`, `readonly: boolean = false`, `allowInput: boolean = true`, `keyboard: boolean = true`, `wheel: boolean = false`, `clamp: boolean = true`, `fullWidth: boolean = false`, `showButtons: boolean = true`, `showValidationMessage: boolean = true`, `decrementLabel: string = "Decrease value"`, `incrementLabel: string = "Increase value"`, `controlsLabel: string = "Quantity controls"`, `requiredMessage: string = "A value is required."`, `minMessage: string = "Value is below the minimum."`, `maxMessage: string = "Value is above the maximum."`
+- Slots: None
+- Events: `input`, `change`, `increment`, `decrement`
+
+### PinInput
+
+Secure multi-cell PIN and verification-code input with regex and paste support.
+
+- Mount: `data-component="PinInput"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Verification code"`, `name: string = "pin"`, `value: string = ""`, `length: number = 4`, `pattern: string = "[0-9]"`, `type: string = "text"`, `inputMode: string = "numeric"`, `placeholder: string = "○"`, `autocomplete: string = "one-time-code"`, `masked: boolean = false`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `autoFocus: boolean = false`, `autoSubmit: boolean = false`, `allowPaste: boolean = true`, `clearable: boolean = true`, `clearLabel: string = "Clear code"`, `separator: string = ""`, `groupSize: number = 0`, `helpText: string = ""`, `invalid: boolean = false`, `validationMessage: string = ""`, `class: string = ""`
+- Slots: None
+- Events: `input`, `change`, `complete`, `paste`, `clear`, `error`
+
+### SearchBox
+
+Theme-aware, responsive search box component.
+
+- Mount: `data-component="SearchBox"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Search Box"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "search"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Slots: None
+- Events: None
+
+### StrongPassword
+
+Theme-aware, responsive strong password component.
+
+- Mount: `data-component="StrongPassword"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Password"`, `name: string = "password"`, `value: string = ""`, `placeholder: string = "Create a strong password"`, `autocomplete: string = "new-password"`, `minLength: number = 8`, `specialCharactersSet: string = "!@#$%^&*()_+-=[]{}|;:,.<>?"`, `requireLowercase: boolean = true`, `requireUppercase: boolean = true`, `requireNumber: boolean = true`, `requireSpecialCharacter: boolean = true`, `showRequirements: boolean = true`, `presentation: string = "inline"`, `hintText: string = "Use a unique password you do not use elsewhere."`, `emptyLabel: string = "Enter a password"`, `weakLabel: string = "Weak"`, `fairLabel: string = "Fair"`, `goodLabel: string = "Good"`, `strongLabel: string = "Strong"`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `class: string = ""`
+- Slots: None
+- Events: `input`, `change`, `strength`
+
+### ToggleCount
+
+Theme-aware, responsive toggle count component.
+
+- Mount: `data-component="ToggleCount"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `variant: string = "segmented"`, `class: string = ""`, `name: string = "billing-cycle"`, `value: string = "monthly"`, `firstValue: string = "monthly"`, `firstLabel: string = "Monthly"`, `secondValue: string = "annual"`, `secondLabel: string = "Annual"`, `ariaLabel: string = "Billing frequency"`, `items: string = []`, `currency: string = "$"`, `suffix: string = ""`, `firstValueKey: string = "monthly"`, `secondValueKey: string = "annual"`, `emptyValue: string = "—"`, `align: string = "end"`, `fullWidth: boolean = true`, `disabled: boolean = false`, `animate: boolean = true`, `animationDuration: number = 450`, `animationSteps: number = 18`
+- Slots: None
+- Events: `change`, `toggle`
+
+### TogglePassword
+
+Accessible password field with optional show and hide controls.
+
+- Mount: `data-component="TogglePassword"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Password"`, `name: string = "password"`, `value: string = ""`, `placeholder: string = "Enter your password"`, `autocomplete: string = "current-password"`, `minlength: string = ""`, `maxlength: string = ""`, `pattern: string = "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}"`, `fields: string = []`, `visible: boolean = false`, `toggleable: boolean = true`, `toggleMode: string = "button"`, `checkboxLabel: string = "Show password"`, `showLabel: string = "Show password"`, `hideLabel: string = "Hide password"`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `helpText: string = ""`, `validationMessage: string = ""`, `class: string = ""`
+- Slots: None
+- Events: `input`, `change`, `toggle`
+
+## Base
+
+### Accordion
+
+Theme-aware, responsive accordion component.
+
+- Mount: `data-component="Accordion"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""`, `id: string = "accordion"`, `items: string = []`, `defaultOpen: string = []`, `multiple: boolean = false`, `alwaysOpen: boolean = false`, `disabled: boolean = false`, `indicator: string = "plus"`, `indicatorPosition: string = "start"`, `showIndicator: boolean = true`, `bordered: boolean = false`, `separated: boolean = false`, `flush: boolean = false`, `contentItalic: boolean = false`
+- Slots: None
+- Events: `change`, `open`, `close`
+
+### Alert
+
+Theme-aware, responsive alert component.
+
+- Mount: `data-component="Alert"`
+- Props: `size: string = "default"`, `color: string = "info"`, `variant: string = "soft"`, `class: string = ""`, `radius: string = "md"`, `shadow: string = "sm"`, `title: string = "Alert"`, `description: string = ""`, `items: string = []`, `actions: string = []`, `showIcon: boolean = false`, `icon: string = ""`, `dismissible: boolean = false`, `dismissLabel: string = "Dismiss alert"`, `role: string = "alert"`, `live: string = "polite"`, `linkLabel: string = ""`, `linkHref: string = ""`, `actionLabel: string = ""`, `actionHref: string = ""`, `compact: boolean = false`
+- Slots: None
+- Events: `dismiss`, `action`
+
+### Avatar
+
+Theme-aware, responsive avatar component.
+
+- Mount: `data-component="Avatar"`
+- Props: `src: string = ""`, `alt: string = ""`, `initials: string = ""`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "solid"`, `shape: string = "circle"`, `status: string = ""`, `statusLabel: string = ""`, `statusPosition: string = "bottom"`, `badge: string = ""`, `badgeIcon: string = ""`, `badgeLabel: string = ""`, `tooltip: string = ""`, `name: string = ""`, `description: string = ""`, `loading: string = "lazy"`, `class: string = ""`
+- Slots: None
+- Events: `load`, `error`, `click`
+
+### AvatarGroup
+
+Theme-aware, responsive avatar group component.
+
+- Mount: `data-component="AvatarGroup"`
+- Props: `items: string = []`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "solid"`, `shape: string = "circle"`, `layout: string = "stack"`, `maxVisible: number = 4`, `columns: number = 3`, `borderColor: string = ""`, `showTooltips: boolean = true`, `overflowLabel: string = "Show remaining members"`, `class: string = ""`
+- Slots: None
+- Events: `overflow`
+
+### Badge
+
+Theme-aware, responsive badge component.
+
+- Mount: `data-component="Badge"`
+- Props: `label: string = "Badge"`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "solid"`, `shape: string = "pill"`, `class: string = ""`, `icon: string = ""`, `iconPosition: string = "start"`, `dot: boolean = false`, `dotOnly: boolean = false`, `dotLabel: string = "Status"`, `animated: boolean = false`, `avatarSrc: string = ""`, `avatarAlt: string = ""`, `dismissible: boolean = false`, `dismissLabel: string = "Remove badge"`, `truncate: boolean = false`, `maxWidth: string = "12rem"`, `anchorLabel: string = ""`, `anchorIcon: string = ""`, `placement: string = "inline"`, `anchorLabelText: string = "Badge anchor"`
+- Slots: None
+- Events: `dismiss`
+
+### Blockquote
+
+Theme-aware, responsive blockquote component.
+
+- Mount: `data-component="Blockquote"`
+- Props: `quote: string = "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."`, `citation: string = ""`, `citationTitle: string = ""`, `citationUrl: string = ""`, `avatarSrc: string = ""`, `avatarAlt: string = ""`, `size: string = "md"`, `color: string = "primary"`, `align: string = "left"`, `variant: string = "default"`, `quoteMark: boolean = true`, `italic: boolean = true`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
+### Button
+
+Theme-aware, responsive button component.
+
+- Mount: `data-component="Button"`
+- Props: `label: string = "Button"`, `loadingLabel: string = "Loading…"`, `description: string = ""`, `as: string = ""`, `href: string = ""`, `target: string = ""`, `rel: string = ""`, `type: string = "button"`, `variant: string = "default"`, `color: string = "primary"`, `size: string = "default"`, `disabled: boolean = false`, `loading: boolean = false`, `pill: boolean = false`, `fullWidth: boolean = false`, `icon: string = ""`, `iconPosition: string = "start"`, `ariaLabel: string = ""`, `ariaPressed: string = ""`, `ariaExpanded: string = ""`, `ariaControls: string = ""`, `title: string = ""`, `autofocus: boolean = false`, `controlClass: string = ""`, `class: string = ""`
+- Slots: `default`
+- Events: `click`, `focus`, `blur`
+
+### ButtonGroup
+
+Theme-aware, responsive button group component.
+
+- Mount: `data-component="ButtonGroup"`
+- Props: `items: string = []`, `value: string = ""`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `orientation: string = "horizontal"`, `responsive: boolean = false`, `attached: boolean = true`, `selectable: boolean = false`, `toolbar: boolean = false`, `disabled: boolean = false`, `ariaLabel: string = "Button group"`, `class: string = ""`
+- Slots: `default`
+- Events: `click`, `select`, `change`
+
+### Card
+
+Theme-aware, responsive card component.
+
+- Mount: `data-component="Card"`
+- Props: `title: string = "Card title"`, `subtitle: string = ""`, `description: string = ""`, `header: string = ""`, `footer: string = ""`, `imageSrc: string = ""`, `imageAlt: string = ""`, `imagePosition: string = "top"`, `actionLabel: string = ""`, `actionHref: string = ""`, `headerActions: string = []`, `navigation: string = []`, `activeNav: string = ""`, `mobileNavigation: boolean = false`, `alertTitle: string = ""`, `alertDescription: string = ""`, `empty: boolean = false`, `emptyTitle: string = "No data to show"`, `emptyIcon: string = "icon-[lucide--inbox]"`, `items: string = []`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `layout: string = "vertical"`, `align: string = "left"`, `hover: string = "none"`, `scrollable: boolean = false`, `maxHeight: string = "18rem"`, `dismissible: boolean = false`, `ariaLabel: string = ""`, `class: string = ""`
+- Slots: `default`
+- Events: `click`, `action`, `navigate`, `dismiss`, `load`, `error`
+
+### Carousel
+
+Theme-aware, responsive carousel component.
+
+- Mount: `data-component="Carousel"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = ""`, `description: string = ""`, `items: string = []`, `activeIndex: number = 0`, `slidesPerView: number = 1`, `gap: string = "0.75rem"`, `showPagination: boolean = false`, `isAutoPlay: boolean = false`, `autoplayInterval: number = 4000`, `isInfiniteLoop: boolean = false`, `isRTL: boolean = false`, `isCentered: boolean = false`, `isDraggable: boolean = false`, `isAutoHeight: boolean = false`, `isSnap: boolean = false`, `showCounter: boolean = false`, `thumbnails: string = "none"`, `ariaLabel: string = "Content carousel"`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: `initialize`, `change`, `previous`, `next`, `play`, `pause`, `reachStart`, `reachEnd`, `dragStart`, `dragEnd`
+
+### ChatBubble
+
+Theme-aware, responsive chat bubble component.
+
+- Mount: `data-component="ChatBubble"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = ""`, `description: string = ""`, `items: string = []`, `oneSided: boolean = false`, `showAvatars: boolean = false`, `showMetadata: boolean = false`, `ariaLabel: string = "Conversation"`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: `action`, `messageClick`, `avatarClick`, `linkClick`
+
+### Collapse
+
+Theme-aware, responsive collapse component.
+
+- Mount: `data-component="Collapse"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `items: string = []`, `multiple: boolean = false`, `mode: string = "panel"`, `initialOpenIndexes: string = []`, `ariaLabel: string = "Collapsible content"`, `class: string = ""`
+- Slots: `default`
+- Events: `toggle`, `open`, `close`
+
+### DatePicker
+
+Theme-aware, responsive date picker component.
+
+- Mount: `data-component="DatePicker"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Date Picker"`, `id: string = ""`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "date"`, `locale: string = "en-US"`, `firstDayOfWeek: number = 0`, `months: string = [{ label: "Jan", value: "01" }, { label: "Feb", value: "02" }, { label: "Mar", value: "03" }, { label: "Apr", value: "04" }, { label: "May", value: "05" }, { label: "Jun", value: "06" }, { label: "Jul", value: "07" }, { label: "Aug", value: "08" }, { label: "Sep", value: "09" }, { label: "Oct", value: "10" }, { label: "Nov", value: "11" }, { label: "Dec", value: "12" }]`, `days: string = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]`, `years: string = [2024, 2025, 2026, 2027, 2028, 2029, 2030]`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `variant: string = "normal"`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Slots: None
+- Events: `input`, `change`, `open`, `close`, `focus`, `blur`, `invalid`
+
+### DeviceFrame
+
+Theme-aware, responsive device frame component.
+
+- Mount: `data-component="DeviceFrame"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Device Frame"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `device: string = "phone"`, `orientation: string = "portrait"`, `src: string = ""`, `srcdoc: string = ""`, `frameTitle: string = "Device preview"`, `showToolbar: boolean = true`, `allow: string = ""`, `class: string = ""`
+- Slots: `default`
+- Events: `change`, `rotate`
+
+### FileUploadProgress
+
+Theme-aware, responsive file upload progress component.
+
+- Mount: `data-component="FileUploadProgress"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Progress"`, `value: number = 50`, `max: number = 100`, `showValue: boolean = true`, `fileName: string = ""`, `fileSize: string = ""`, `uploadedSize: string = ""`, `status: string = "uploading"`, `cancelLabel: string = "Cancel upload"`, `retryLabel: string = "Retry upload"`, `class: string = ""`
+- Slots: None
+- Events: `cancel`, `retry`, `complete`
+
+### HeroActions
+
+Responsive action group for hero and call-to-action sections.
+
+- Mount: `data-component="HeroActions"`
+- Props: `actions: string = []`, `align: string = "left"`, `orientation: string = "horizontal"`, `stackOnMobile: boolean = true`, `fullWidthMobile: boolean = true`, `size: string = "default"`, `color: string = "primary"`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
+### LegendIndicator
+
+Theme-aware, responsive legend indicator component.
+
+- Mount: `data-component="LegendIndicator"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Legend Indicator"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: `toggle`, `select`
+
+### List
+
+Theme-aware, responsive list component.
+
+- Mount: `data-component="List"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "List"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
+### ListGroup
+
+Theme-aware, responsive list group component.
+
+- Mount: `data-component="ListGroup"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "List Group"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: `select`, `change`
+
+### Marquee
+
+Theme-aware, responsive marquee component.
+
+- Mount: `data-component="Marquee"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Marquee"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
+### Progress
+
+Theme-aware, responsive progress component.
+
+- Mount: `data-component="Progress"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Progress"`, `value: number = 50`, `max: number = 100`, `showValue: boolean = true`, `class: string = ""`
+- Slots: None
+- Events: None
+
+### Rating
+
+Theme-aware, responsive rating component.
+
+- Mount: `data-component="Rating"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Rating"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: `input`, `change`
+
+### Skeleton
+
+Theme-aware, responsive skeleton component.
+
+- Mount: `data-component="Skeleton"`
+- Props: `color: string = "primary"`, `label: string = "Loading"`, `size: string = "md"`, `lines: number = 3`, `class: string = ""`
+- Slots: None
+- Events: None
+
+### Spinner
+
+Theme-aware, responsive spinner component.
+
+- Mount: `data-component="Spinner"`
+- Props: `color: string = "primary"`, `label: string = "Loading"`, `size: string = "md"`, `lines: number = 3`, `class: string = ""`
+- Slots: None
+- Events: None
+
+### StyledIcon
+
+Theme-aware, responsive styled icon component.
+
+- Mount: `data-component="StyledIcon"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Styled Icon"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
+### Timeline
+
+Theme-aware, responsive timeline component.
+
+- Mount: `data-component="Timeline"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Timeline"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
+### Toast
+
+Theme-aware, responsive toast component.
+
+- Mount: `data-component="Toast"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Toast"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: `dismiss`, `action`
+
+### TreeView
+
+Theme-aware, responsive tree view component.
+
+- Mount: `data-component="TreeView"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Tree View"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: `select`, `toggle`, `expand`, `collapse`
+
+## Blocks
+
+### AnnouncementBar
+
+Accessible public announcement, emergency, maintenance, or status bar.
+
+- Mount: `data-component="AnnouncementBar"`
+- Props: `badge: string = ""`, `badgeIcon: string = ""`, `message: string = "Announcement"`, `description: string = ""`, `icon: string = "icon-[lucide--megaphone]"`, `actionLabel: string = ""`, `actionHref: string = ""`, `actionIcon: string = ""`, `dismissible: boolean = false`, `dismissLabel: string = "Dismiss announcement"`, `sticky: boolean = false`, `compact: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "soft"`, `role: string = "status"`, `live: string = "polite"`, `class: string = ""`
+- Slots: None
+- Events: None
+
+### CTASection
+
+Reusable closing call-to-action section with primary and secondary actions.
+
+- Mount: `data-component="CTASection"`
+- Props: `eyebrow: string = ""`, `title: string = "Ready to get started?"`, `description: string = ""`, `icon: string = ""`, `align: string = "center"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "solid"`, `primaryLabel: string = "Get started"`, `primaryHref: string = "#"`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `backgroundImage: string = ""`, `maxWidth: string = "xl"`, `class: string = ""`
+- Slots: `default`, `actions`, `visual`, `footer`
+- Events: None
+
+### FeatureCard
+
+Reusable linked feature or service card with icon, badge, description, and action.
+
+- Mount: `data-component="FeatureCard"`
+- Props: `icon: string = ""`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `actionIcon: string = ""`, `badge: string = ""`, `badgeColor: string = "primary"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `hover: string = "lift"`, `align: string = "left"`, `disabled: boolean = false`, `class: string = ""`
+- Slots: `icon`, `default`, `footer`
+- Events: None
+
+### FeatureIconCard
+
+Feature card with a prominent themed icon treatment.
+
+- Mount: `data-component="FeatureIconCard"`
+- Props: `icon: string = "icon-[lucide--sparkles]"`, `iconSize: string = "md"`, `iconVariant: string = "soft"`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Explore"`, `badge: string = ""`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `align: string = "left"`, `hover: string = "lift"`, `class: string = ""`
+- Slots: `default`, `footer`
+- Events: None
+
+### Hero
+
+Reusable public-page hero with actions, trust items, badges, and visual slots.
+
+- Mount: `data-component="Hero"`
+- Props: `eyebrow: string = ""`, `title: string = "Build something remarkable"`, `highlight: string = ""`, `description: string = ""`, `align: string = "left"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `tertiaryLabel: string = ""`, `tertiaryHref: string = ""`, `badges: string = []`, `trustItems: string = []`, `maxWidth: string = "xl"`, `class: string = ""`
+- Slots: `eyebrow`, `actions`, `trust`, `default`, `visual`, `footer`
+- Events: None
+
+### MarketingSectionHeader
+
+Marketing section heading with an optional linked action.
+
+- Mount: `data-component="MarketingSectionHeader"`
+- Props: `id: string = ""`, `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "split"`, `size: string = "default"`, `color: string = "primary"`, `actionLabel: string = ""`, `actionHref: string = ""`, `actionIcon: string = ""`, `actionExternal: boolean = false`, `class: string = ""`
+- Slots: `icon`, `actions`, `default`
+- Events: None
+
+### MetricCard
+
+Single statistic or operational metric with icon, trend, and optional action.
+
+- Mount: `data-component="MetricCard"`
+- Props: `label: string = "Metric"`, `value: string = "0"`, `description: string = ""`, `icon: string = ""`, `prefix: string = ""`, `suffix: string = ""`, `trend: string = ""`, `trendLabel: string = ""`, `trendDirection: string = "neutral"`, `href: string = ""`, `actionLabel: string = ""`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `align: string = "left"`, `class: string = ""`
+- Slots: None
+- Events: None
+
+### PageHeader
+
+Public and application page header with breadcrumbs, metadata, and actions.
+
+- Mount: `data-component="PageHeader"`
+- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `icon: string = ""`, `align: string = "left"`, `size: string = "default"`, `compact: boolean = false`, `showBreadcrumbs: boolean = false`, `breadcrumbs: string = []`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""`
+- Slots: `meta`, `actions`, `default`
+- Events: None
+
+### PortalDashboard
+
+Responsive portal dashboard with metrics, actions, tasks, and updates.
+
+- Mount: `data-component="PortalDashboard"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `eyebrow: string = "Overview"`, `eyebrowKey: string = ""`, `title: string = "Dashboard"`, `titleKey: string = ""`, `description: string = ""`, `descriptionKey: string = ""`, `userName: string = ""`, `metrics: string = []`, `actions: string = []`, `updates: string = []`, `tasks: string = []`, `class: string = ""`
+- Slots: `hero-action`
+- Events: `action`, `navigate`
+
+### SplitHero
+
+Two-column hero with configurable content and visual placement.
+
+- Mount: `data-component="SplitHero"`
+- Props: `eyebrow: string = ""`, `title: string = "A better digital experience"`, `highlight: string = ""`, `description: string = ""`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `visualPosition: string = "right"`, `reverse: boolean = false`, `ratio: string = "balanced"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `trustItems: string = []`, `class: string = ""`
+- Slots: `actions`, `trust`, `default`, `visual`
+- Events: None
+
+### StatsBar
+
+Compact responsive statistics strip.
+
+- Mount: `data-component="StatsBar"`
+- Props: `items: string = []`, `columns: number = 4`, `compact: boolean = true`, `dividers: boolean = true`, `icons: boolean = true`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "raised"`, `maxWidth: string = "xl"`, `class: string = ""`
+- Slots: None
+- Events: None
+
+## Forms
+
+### AuthForm
+
+Reusable authentication form for sign-in, registration, recovery, reset, and MFA.
+
+- Mount: `data-component="AuthForm"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `mode: string = "sign-in"`, `action: string = "/api/auth/login"`, `method: string = "post"`, `title: string = "Sign in"`, `description: string = ""`, `returnTo: string = ""`, `schema: string = ""`, `showRemember: boolean = true`, `showName: boolean = true`, `submitLabel: string = "Continue"`, `class: string = ""`
+- Slots: `default`
+- Events: `submit`, `change`, `input`, `focus`, `blur`
+
+### Checkbox
+
+Theme-aware, responsive checkbox component.
+
+- Mount: `data-component="Checkbox"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Checkbox"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: string = "on"`, `values: string = []`, `options: string = []`, `checked: boolean = false`, `indeterminate: boolean = false`, `orientation: string = "vertical"`, `card: boolean = false`, `rightAligned: boolean = false`, `list: boolean = false`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Slots: `default`
+- Events: `input`, `change`, `focus`, `blur`, `invalid`
+
+### ColorPicker
+
+Theme-aware, responsive color picker component.
+
+- Mount: `data-component="ColorPicker"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Color"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `value: string = "#2563eb"`, `icon: string = ""`, `iconPosition: string = "start"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `variant: string = "normal"`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Slots: None
+- Events: `input`, `change`, `focus`, `blur`
+
+### FileInput
+
+Theme-aware, responsive file input component.
+
+- Mount: `data-component="FileInput"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "File"`, `hiddenLabel: boolean = false`, `placeholder: string = "Choose a file"`, `value: string = ""`, `icon: string = "icon-[lucide--upload]"`, `iconPosition: string = "start"`, `accept: string = ""`, `multiple: boolean = false`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `variant: string = "normal"`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Slots: None
+- Events: `input`, `change`, `focus`, `blur`, `select`, `clear`, `invalid`
+
+### Input
+
+Theme-aware, responsive input component.
+
+- Mount: `data-component="Input"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Input"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `value: string = ""`, `type: string = "text"`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `autocomplete: string = ""`, `inputmode: string = ""`, `minlength: string = ""`, `maxlength: string = ""`, `pattern: string = ""`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `class: string = ""`
+- Slots: None
+- Events: `input`, `change`, `focus`, `blur`, `invalid`, `keydown`, `keyup`
+
+### InputGroup
+
+Theme-aware, responsive input group component.
+
+- Mount: `data-component="InputGroup"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Input group"`, `hiddenLabel: boolean = false`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `startText: string = ""`, `endText: string = ""`, `icon: string = ""`, `iconPosition: string = "start"`, `actionLabel: string = ""`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `variant: string = "normal"`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Slots: None
+- Events: `input`, `change`, `focus`, `blur`, `submit`, `action`
+
+### Radio
+
+Theme-aware, responsive radio component.
+
+- Mount: `data-component="Radio"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Radio"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: string = "on"`, `options: string = []`, `checked: boolean = false`, `orientation: string = "vertical"`, `card: boolean = false`, `rightAligned: boolean = false`, `list: boolean = false`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Slots: None
+- Events: `input`, `change`, `focus`, `blur`, `invalid`
+
+### RangeSlider
+
+Theme-aware, responsive range slider component.
+
+- Mount: `data-component="RangeSlider"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Range"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: number = 50`, `min: number = 0`, `max: number = 100`, `step: number = 1`, `showValue: boolean = true`, `showBounds: boolean = true`, `showSteps: boolean = false`, `marks: string = []`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Slots: None
+- Events: `input`, `change`, `focus`, `blur`
+
+### Select
+
+Theme-aware, responsive select component.
+
+- Mount: `data-component="Select"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Select"`, `hiddenLabel: boolean = false`, `value: string = ""`, `values: string = []`, `options: string = []`, `placeholder: string = "Select an option"`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `multiple: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Slots: None
+- Events: `input`, `change`, `focus`, `blur`, `open`, `close`, `invalid`
+
+### Switch
+
+Theme-aware, responsive switch component.
+
+- Mount: `data-component="Switch"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Switch"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: string = "on"`, `checked: boolean = false`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Slots: None
+- Events: `input`, `change`, `focus`, `blur`
+
+### Textarea
+
+Theme-aware, responsive textarea component.
+
+- Mount: `data-component="Textarea"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Textarea"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `value: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `rows: number = 5`, `resize: string = "vertical"`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `minlength: string = ""`, `maxlength: string = ""`, `class: string = ""`
+- Slots: None
+- Events: `input`, `change`, `focus`, `blur`, `invalid`
+
+### TimePicker
+
+Theme-aware, responsive time picker component.
+
+- Mount: `data-component="TimePicker"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Time"`, `hiddenLabel: boolean = false`, `value: string = ""`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = "icon-[lucide--clock-3]"`, `iconPosition: string = "end"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `format: string = "24"`, `minuteStep: number = 5`, `hours: string = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]`, `minutes: string = ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"]`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Slots: None
+- Events: `input`, `change`, `focus`, `blur`, `open`, `close`, `invalid`
+
+## Integrations
+
+### AdvancedDatePicker
+
+Theme-aware, responsive advanced date picker component.
+
+- Mount: `data-component="AdvancedDatePicker"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Advanced Date Picker"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: `input`, `change`, `open`, `close`, `clear`
+
+### AdvancedRangeSlider
+
+Theme-aware, responsive advanced range slider component.
+
+- Mount: `data-component="AdvancedRangeSlider"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Advanced Range Slider"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: `input`, `change`, `start`, `end`
+
+### Chart
+
+Theme-aware, responsive chart component.
+
+- Mount: `data-component="Chart"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Chart"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: `select`, `dataPointClick`, `legendToggle`
+
+### Clipboard
+
+Theme-aware, responsive clipboard component.
+
+- Mount: `data-component="Clipboard"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Clipboard"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: `copy`, `success`, `error`
+
+### Confetti
+
+Theme-aware, responsive confetti component.
+
+- Mount: `data-component="Confetti"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Confetti"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: `start`, `complete`
+
+### DataMap
+
+Theme-aware, responsive data map component.
+
+- Mount: `data-component="DataMap"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Data Map"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: `select`, `change`
+
+### DataTable
+
+Theme-aware, responsive data table component.
+
+- Mount: `data-component="DataTable"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `caption: string = "Data Table"`, `columns: string = []`, `rows: string = []`, `striped: boolean = true`, `class: string = ""`
+- Slots: `default`
+- Events: `sort`, `select`, `change`, `rowClick`, `pageChange`
+
+### DragAndDrop
+
+Theme-aware, responsive drag and drop component.
+
+- Mount: `data-component="DragAndDrop"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Drag And Drop"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: `dragStart`, `dragEnd`, `dragEnter`, `dragLeave`, `drop`, `change`
+
+### FileUpload
+
+Theme-aware, responsive file upload component.
+
+- Mount: `data-component="FileUpload"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "File Upload"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: `select`, `upload`, `progress`, `success`, `error`, `cancel`, `remove`
+
+### Map
+
+Theme-aware, responsive map component.
+
+- Mount: `data-component="Map"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Map"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
+### ToastNotifications
+
+Theme-aware, responsive toast notifications component.
+
+- Mount: `data-component="ToastNotifications"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Toast Notifications"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: `add`, `dismiss`, `clear`, `action`
+
+### WysiwygEditor
+
+Theme-aware, responsive wysiwyg editor component.
+
+- Mount: `data-component="WysiwygEditor"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Wysiwyg Editor"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: `input`, `change`, `focus`, `blur`
+
+## Layout
+
+### AuthSplitLayout
+
+Responsive 50/50 authentication layout with content and form regions.
+
+- Mount: `data-component="AuthSplitLayout"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `eyebrow: string = "Secure identity"`, `title: string = "Welcome back"`, `description: string = ""`, `brand: string = "Police Management System"`, `features: string = []`, `class: string = ""`
+- Slots: `aside-extra`, `form`
+- Events: None
+
+### Columns
+
+Theme-aware, responsive columns component.
+
+- Mount: `data-component="Columns"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
+### Container
+
+Theme-aware, responsive container component.
+
+- Mount: `data-component="Container"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
+### CustomScrollbar
+
+Theme-aware, responsive custom scrollbar component.
+
+- Mount: `data-component="CustomScrollbar"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
+- Slots: `default`
+- Events: `scroll`
+
+### Divider
+
+Theme-aware, responsive divider component.
+
+- Mount: `data-component="Divider"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
+- Slots: None
+- Events: None
+
+### FeatureGrid
+
+Responsive equal-height grid for feature and service cards.
+
+- Mount: `data-component="FeatureGrid"`
+- Props: `color: string = "primary"`, `size: string = "default"`, `columns: number = 3`, `tabletColumns: number = 2`, `mobileColumns: number = 1`, `gap: string = "md"`, `minItemWidth: string = ""`, `equalHeight: boolean = true`, `align: string = "stretch"`, `maxWidth: string = "full"`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
+### Grid
+
+Theme-aware, responsive grid component.
+
+- Mount: `data-component="Grid"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
+### Image
+
+Theme-aware, responsive image component.
+
+- Mount: `data-component="Image"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `src: string = ""`, `alt: string = ""`, `width: string = ""`, `height: string = ""`, `loading: string = "lazy"`, `rounded: boolean = false`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
+### Kbd
+
+Theme-aware, responsive kbd component.
+
+- Mount: `data-component="Kbd"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "⌘ K"`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
+### LayoutSplitter
+
+Theme-aware, responsive layout splitter component.
+
+- Mount: `data-component="LayoutSplitter"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
+- Slots: `default`
+- Events: `resizeStart`, `resize`, `resizeEnd`
+
+### Link
+
+Theme-aware, responsive link component.
+
+- Mount: `data-component="Link"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Link"`, `href: string = "#"`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
+### MetricGrid
+
+Responsive collection of metric cards.
+
+- Mount: `data-component="MetricGrid"`
+- Props: `items: string = []`, `columns: number = 4`, `tabletColumns: number = 2`, `mobileColumns: number = 1`, `gap: string = "md"`, `equalHeight: boolean = true`, `dividers: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
+### PublicPageShell
+
+Consistent structural wrapper for public-facing pages.
+
+- Mount: `data-component="PublicPageShell"`
+- Props: `maxWidth: string = "full"`, `fullWidth: boolean = true`, `headerOffset: string = "none"`, `background: string = "default"`, `overflow: string = "clip"`, `minHeight: string = "screen"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""`
+- Slots: `before`, `default`, `after`
+- Events: None
+
+### Section
+
+Theme-aware page section with consistent spacing, width, background, and border controls.
+
+- Mount: `data-component="Section"`
+- Props: `id: string = ""`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `spacing: string = "lg"`, `maxWidth: string = "xl"`, `fullWidth: boolean = false`, `borderTop: boolean = false`, `borderBottom: boolean = false`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
+### SectionHeader
+
+Reusable accessible section heading with eyebrow, title, description, icon, and actions.
+
+- Mount: `data-component="SectionHeader"`
+- Props: `id: string = ""`, `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "left"`, `size: string = "default"`, `color: string = "primary"`, `headingLevel: number = 2`, `maxWidth: string = "3xl"`, `class: string = ""`
+- Slots: `icon`, `default`, `actions`
+- Events: None
+
+### TextLink
+
+Styled inline action link with icons, arrows, external state, and disabled handling.
+
+- Mount: `data-component="TextLink"`
+- Props: `label: string = "Learn more"`, `href: string = "#"`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `icon: string = ""`, `iconPosition: string = "start"`, `showArrow: boolean = true`, `underline: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `disabled: boolean = false`, `class: string = ""`
+- Slots: None
+- Events: `click`, `focus`, `blur`
+
+### Typography
+
+Theme-aware, responsive typography component.
+
+- Mount: `data-component="Typography"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
+## Navigation
+
+### BackToTop
+
+Accessible scroll-to-top control with visibility threshold.
+
+- Mount: `data-component="BackToTop"`
+- Props: `threshold: number = 500`, `label: string = "Back to top"`, `ariaLabel: string = "Scroll back to top"`, `icon: string = "icon-[lucide--arrow-up]"`, `position: string = "right"`, `offset: string = "md"`, `behavior: string = "smooth"`, `showProgress: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "solid"`, `class: string = ""`
+- Slots: None
+- Events: None
+
+### Breadcrumb
+
+Theme-aware, responsive breadcrumb component.
+
+- Mount: `data-component="Breadcrumb"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Breadcrumb"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
+- Slots: `default`
+- Events: `navigate`, `click`
+
+### Footer
+
+Responsive application footer with structured links and pre/post content slots.
+
+- Mount: `data-component="Footer"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Footer navigation"`, `items: string = []`, `columns: number = 3`, `maxWidth: string = "compact"`, `copyright: string = ""`, `class: string = ""`
+- Slots: `pre-footer`, `copyright-left`, `copyright-right`, `post-footer`
+- Events: `select`, `action`
+
+### MegaMenu
+
+Theme-aware, responsive mega menu component.
+
+- Mount: `data-component="MegaMenu"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Mega Menu"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
+- Slots: `default`
+- Events: `open`, `close`, `select`
+
+### Nav
+
+Theme-aware, responsive nav component.
+
+- Mount: `data-component="Nav"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Nav"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
+- Slots: `default`
+- Events: `select`, `change`
+
+### Navbar
+
+Theme-aware, responsive navbar component.
+
+- Mount: `data-component="Navbar"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Primary navigation"`, `topbarLabel: string = "Utility navigation"`, `brand: string = {}`, `items: string = []`, `actions: string = []`, `active: string = ""`, `sticky: boolean = false`, `openOnHover: boolean = false`, `maxWidth: string = "full"`, `mobileLabel: string = "Toggle navigation"`, `class: string = ""`
+- Slots: `topbar`, `actions`
+- Events: `toggle`, `open`, `close`, `select`, `action`
+
+### Pagination
+
+Theme-aware, responsive pagination component.
+
+- Mount: `data-component="Pagination"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Pagination"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
+- Slots: `default`
+- Events: `change`, `previous`, `next`
+
+### PreferenceSwitcher
+
+Accessible theme, accent color, and language preference controls.
+
+- Mount: `data-component="PreferenceSwitcher"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `themeLabel: string = "Theme"`, `colorLabel: string = "Accent color"`, `languageLabel: string = "Language"`, `languages: string = [`, `colors: string = [`, `compact: boolean = true`, `class: string = ""`
+- Slots: None
+- Events: `theme`, `color`, `language`
+
+### Scrollspy
+
+Theme-aware, responsive scrollspy component.
+
+- Mount: `data-component="Scrollspy"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Scrollspy"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
+- Slots: `default`
+- Events: `change`
+
+### Sidebar
+
+Theme-aware, responsive sidebar component.
+
+- Mount: `data-component="Sidebar"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Sidebar"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `mobileLabel: string = "Open navigation"`, `class: string = ""`
+- Slots: `default`
+- Events: `toggle`, `open`, `close`, `select`
+
+### Stepper
+
+Theme-aware, responsive stepper component.
+
+- Mount: `data-component="Stepper"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Stepper"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
+- Slots: `default`
+- Events: `change`, `previous`, `next`, `complete`
+
+### Tabs
+
+Theme-aware, responsive tabs component.
+
+- Mount: `data-component="Tabs"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Tabs"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
+## Overlays
+
+### ContextMenu
+
+Theme-aware, responsive context menu component.
+
+- Mount: `data-component="ContextMenu"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Context Menu"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
+- Slots: `default`
+- Events: `open`, `close`, `select`
+
+### Drawer
+
+Theme-aware, responsive drawer component.
+
+- Mount: `data-component="Drawer"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Drawer"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
+- Slots: `default`
+- Events: `open`, `close`
+
+### Dropdown
+
+Theme-aware, responsive dropdown component.
+
+- Mount: `data-component="Dropdown"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Open menu"`, `items: string = []`, `placement: string = "end"`, `class: string = ""`
+- Slots: `trigger`, `header`, `footer`
+- Events: `toggle`, `open`, `close`, `select`
+
+### Modal
+
+Theme-aware, responsive modal component.
+
+- Mount: `data-component="Modal"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Modal"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
+- Slots: `default`
+- Events: `open`, `close`, `cancel`, `confirm`
+
+### Popover
+
+Theme-aware, responsive popover component.
+
+- Mount: `data-component="Popover"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Popover"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
+- Slots: `default`
+- Events: `open`, `close`
+
+### Tooltip
+
+Theme-aware, responsive tooltip component.
+
+- Mount: `data-component="Tooltip"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Tooltip"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
+- Slots: `default`
+- Events: `open`, `close`
+
+## Tables
+
+### Table
+
+Theme-aware, responsive table component.
+
+- Mount: `data-component="Table"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `caption: string = "Table"`, `columns: string = []`, `rows: string = []`, `striped: boolean = true`, `class: string = ""`
+- Slots: `default`
+- Events: `sort`, `select`, `rowClick`
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/CTASection.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/CTASection.wrn
new file mode 100644
index 00000000..36453a83
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/CTASection.wrn
@@ -0,0 +1,150 @@
+component CTASection {
+ props {
+ eyebrow = ""
+ title = "Ready to get started?"
+ description = ""
+ icon = ""
+ align = "center"
+ size = "default"
+ color = "primary"
+ variant = "solid"
+ primaryLabel = "Get started"
+ primaryHref = "#"
+ primaryIcon = ""
+ secondaryLabel = ""
+ secondaryHref = ""
+ secondaryIcon = ""
+ backgroundImage = ""
+ maxWidth = "xl"
+ class = ""
+ }
+
+ view {
+
+
+ {#if backgroundImage}
+
+ {/if}
+
+
+
+
+
+
+ {#if icon}
+
+
+
+ {/if}
+
+ {#if eyebrow}
+
+ {eyebrow}
+
+ {/if}
+
+
+ {title}
+
+
+ {#if description}
+
+ {description}
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if items.length > 0}
+
+ {#each items as item, itemIndex}
+
+ {#if item.imageSrc || item.image}
+
+ {/if}
+
+
+ {#if item.title || item.label}
+
{item.title || item.label}
+ {/if}
+ {#if item.subtitle}
+
{item.subtitle}
+ {/if}
+ {#if item.description}
+
{item.description}
+ {/if}
+ {#if item.actionLabel || item.href}
+
+ {item.actionLabel || "Learn more"}
+
+
+ {/if}
+
+ {/each}
+
+ {:else}
+
+ {#if imageSrc && imagePosition === "overlay"}
+
+
+
+
+ {#if header || title || subtitle || headerActions.length > 0 || dismissible}
+
+ {/if}
+
+ {#if navigation.length > 0}
+
+ {/if}
+
+ {#if alertTitle || alertDescription}
+
+ {#if alertTitle}
+
{alertTitle}
+ {/if}
+ {#if alertDescription}
+
{alertDescription}
+ {/if}
+
+ {/if}
+
+
+ {#if empty}
+
+ {:else}
+ {#if description}
+
{description}
+ {/if}
+
+ {/if}
+
+
+ {#if footer || actionLabel}
+
+ {/if}
+
+ {/if}
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/ChatBubble.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/ChatBubble.wrn
new file mode 100644
index 00000000..947f6995
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/ChatBubble.wrn
@@ -0,0 +1,147 @@
+component ChatBubble {
+ props {
+ @event action = function
+ @event messageClick = function
+ @event avatarClick = function
+ @event linkClick = function
+ size = "default"
+ color = "primary"
+ title = ""
+ description = ""
+ items = []
+ oneSided = false
+ showAvatars = false
+ showMetadata = false
+ ariaLabel = "Conversation"
+ variant = "default"
+ class = ""
+ }
+
+ functions {
+ function messageDirection(item) {
+ return item.direction === "outgoing" ? "outgoing" : "incoming"
+ }
+
+ function selectMessage(item, index) {
+ $emit("messageClick", {
+ item: item,
+ index: index,
+ direction: messageDirection(item)
+ })
+ }
+
+ function selectAvatar(sourceEvent, item, index) {
+ sourceEvent.stopPropagation()
+ $emit("avatarClick", {
+ item: item,
+ index: index,
+ direction: messageDirection(item)
+ })
+ }
+
+ function selectLink(sourceEvent, link, item, index) {
+ sourceEvent.stopPropagation()
+ $emit("linkClick", {
+ link: link,
+ item: item,
+ index: index
+ })
+ }
+
+ function selectAction(sourceEvent, item, index) {
+ sourceEvent.stopPropagation()
+ $emit("action", {
+ action: item.action || "retry",
+ item: item,
+ index: index
+ })
+ }
+ }
+
+ view {
+
+ {#if title || description}
+
+ {/if}
+
+ {#if items.length}
+
+ {#each items as item, index}
+
+
+ {#if showAvatars && (item.avatarSrc || item.avatarFallback)}
+
+ {/if}
+
+
+ {#if item.title}
{item.title}
{/if}
+ {#if item.text}
{item.text}
{/if}
+ {#if item.bullets && item.bullets.length}
+
+ {#each item.bullets as bullet}- {bullet}
{/each}
+
+ {/if}
+ {#if item.links && item.links.length}
+
+ {/if}
+
+
+ {/each}
+
+
+ {#if options.length || cornerHint}
+
+ {label}
+
+ {#if cornerHint}
+
+ {cornerHint}
+
+ {/if}
+ {/if}
+
+ {#if options.length}
+
+ {#each options as option}
+
+ {/each}
+
+ {:else}
+
+
+
+ {/if}
+ {#if helperText}
+
+ {helperText}
+
+ {/if}
+
+ {error}
+
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Collapse.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Collapse.wrn
new file mode 100644
index 00000000..531c31f1
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Collapse.wrn
@@ -0,0 +1,95 @@
+component Collapse {
+ props {
+ @event toggle = function
+ @event open = function
+ @event close = function
+ size = "default"
+ color = "primary"
+ items = []
+ multiple = false
+ mode = "panel"
+ initialOpenIndexes = []
+ ariaLabel = "Collapsible content"
+ class = ""
+ }
+
+ state openIndexes = initialOpenIndexes
+
+ functions {
+ function isOpen(index) {
+ return openIndexes.includes(index)
+ }
+
+ function toggleItem(index, item, opening) {
+ if (item.disabled) {
+ return
+ }
+ opening = !isOpen(index)
+ if (opening) {
+ if (multiple) {
+ openIndexes = openIndexes.concat(index)
+ } else {
+ openIndexes = [index]
+ }
+ $emit("open", { index: index, item: item })
+ } else {
+ openIndexes = openIndexes.filter((openIndex) => openIndex !== index)
+ $emit("close", { index: index, item: item })
+ }
+ $emit("toggle", {
+ index: index,
+ item: item,
+ open: opening,
+ openIndexes: openIndexes
+ })
+ }
+ }
+
+ view {
+
+ {#each items as item, index}
+
+ {#if mode === "inline" && item.preview}
+ {item.preview}
+ {/if}
+
+
+
+
+
+ {#if item.title}
{item.title}
{/if}
+ {#if item.content}
{item.content}
{/if}
+ {#if item.links && item.links.length}
+
+ {/if}
+
+
+
{#if cornerHint}{cornerHint}{/if}
+
{#if icon}{/if}
+ {#if helperText}
{helperText}{/if}
{error}
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Combobox.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Combobox.wrn
new file mode 100644
index 00000000..7f82992b
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Combobox.wrn
@@ -0,0 +1,386 @@
+component ComboBox {
+ props {
+ size = "default"
+ color = "primary"
+ label = "ComboBox"
+ name = ""
+ value = ""
+ options = []
+ groups = []
+ placeholder = "Search or select an option"
+ searchPlaceholder = "Start typing…"
+ clearable = true
+ allowCustomValue = false
+ disabled = false
+ required = false
+ invalid = false
+ validationMessage = ""
+ helpText = ""
+ loading = false
+ loadingLabel = "Loading suggestions…"
+ emptyLabel = "No matching options"
+ clearLabel = "Clear value"
+ toggleLabel = "Toggle suggestions"
+ searchMode = "contains"
+ searchFields = "label,description"
+ minSearchLength = 0
+ searchResultLimit = 0
+ optionTemplate = "default"
+ defaultOpen = false
+ closeOnSelect = true
+ fixed = false
+ placement = "bottom"
+ autocomplete = "off"
+ remote = false
+ remoteUrl = ""
+ remoteQueryParam = "q"
+ remoteDebounce = 250
+ remoteAutoLoad = true
+ infinite = false
+ hasMore = false
+ page = 1
+ loadMoreLabel = "Load more"
+ class = ""
+ @event search = function
+ @event select = function
+ @event change = function
+ @event clear = function
+ @event open = function
+ @event close = function
+ @event load = function
+ @event error = function
+ }
+
+ state open = defaultOpen
+ state query = ""
+ state selectedValue = value
+ state activeIndex = -1
+
+ functions {
+ function allOptions() {
+ return [...groups.flatMap((group) => group.options || []), ...options]
+ }
+
+ function searchableText(option) {
+ return ((option.label || "") + " " + (option.description || "")).toLowerCase()
+ }
+
+ function matches(option) {
+ if (!query || query.length < minSearchLength) {
+ return true
+ }
+ if (searchMode === "startsWith") {
+ return searchableText(option).startsWith(query.toLowerCase())
+ }
+ if (searchMode === "exact") {
+ return searchableText(option) === query.toLowerCase()
+ }
+ return searchableText(option).includes(query.toLowerCase())
+ }
+
+ function matchingOptions(list) {
+ return list.filter((option) => matches(option))
+ }
+
+ function visibleOptions(list) {
+ if (searchResultLimit > 0) {
+ return matchingOptions(list).slice(0, searchResultLimit)
+ }
+ return matchingOptions(list)
+ }
+
+ function flatVisibleOptions() {
+ return visibleOptions(allOptions())
+ }
+
+ function isSelected(option) {
+ return selectedValue === option.value
+ }
+
+ function selectedOptions() {
+ return allOptions().filter((option) => isSelected(option))
+ }
+
+ function selectedText() {
+ return selectedOptions().length ? selectedOptions()[0].label : selectedValue
+ }
+
+ function inputText() {
+ return query || selectedText()
+ }
+
+ function shouldShowDropdown() {
+ if (!open) {
+ return false
+ }
+ if (loading) {
+ return true
+ }
+ if (remote && query.length !== 0 && query.length < minSearchLength) {
+ return true
+ }
+ if (flatVisibleOptions().length) {
+ return true
+ }
+ return infinite && hasMore
+ }
+
+ function canSelect(option) {
+ return !option.disabled
+ }
+
+ function chooseOption(option) {
+ if (!canSelect(option)) {
+ return
+ }
+ selectedValue = option.value
+ query = option.label
+ activeIndex = optionIndex(option)
+ if (closeOnSelect) {
+ open = false
+ }
+ }
+
+ function updateQuery(event) {
+ query = event.target.value
+ selectedValue = allowCustomValue ? event.target.value : ""
+ open = true
+ activeIndex = flatVisibleOptions().length ? 0 : -1
+ }
+
+ function clearValue(event) {
+ if (event) {
+ event.stopPropagation()
+ }
+ query = ""
+ selectedValue = ""
+ activeIndex = -1
+ open = false
+ }
+
+ function openDropdown() {
+ if (!disabled) {
+ open = true
+ activeIndex = flatVisibleOptions().length ? 0 : -1
+ }
+ }
+
+ function closeDropdown() {
+ open = false
+ }
+
+ function toggle() {
+ if (open) {
+ closeDropdown()
+ } else {
+ openDropdown()
+ }
+ }
+
+ function setValue(nextValue) {
+ selectedValue = nextValue
+ query = ""
+ }
+
+ function moveActive(direction) {
+ if (!flatVisibleOptions().length) {
+ return
+ }
+ activeIndex = (activeIndex + direction + flatVisibleOptions().length) % flatVisibleOptions().length
+ }
+
+ function handleKeydown(event) {
+ if (disabled) {
+ return
+ }
+ if (event.key === "ArrowDown") {
+ event.preventDefault()
+ openDropdown()
+ moveActive(1)
+ } else if (event.key === "ArrowUp") {
+ event.preventDefault()
+ openDropdown()
+ moveActive(-1)
+ } else if (event.key === "Enter" && open && activeIndex >= 0) {
+ event.preventDefault()
+ chooseOption(flatVisibleOptions()[activeIndex])
+ } else if (event.key === "Escape") {
+ closeDropdown()
+ } else if (event.key === "Home" && open) {
+ event.preventDefault()
+ activeIndex = 0
+ } else if (event.key === "End" && open) {
+ event.preventDefault()
+ activeIndex = flatVisibleOptions().length - 1
+ }
+ }
+
+ function optionIndex(option) {
+ return flatVisibleOptions().findIndex((item) => item.value === option.value)
+ }
+ }
+
+ view {
+
+
+
+
+
+
+
+
+
+
+
+
+
Enter at least {minSearchLength} characters.
+
+
+ {loadingLabel}
+
+
+
+ {#each groups as group}
+ {#if visibleOptions(group.options || []).length}
+
+
{group.label}
+ {#each group.options || [] as option}
+
+ {/each}
+
+ {/if}
+ {/each}
+
+ {#each options as option}
+
+ {/each}
+
+
+
+
+
+ {#if !allowCustomValue}
+
+ {/if}
+
+ {#if helpText && !validationMessage}
{helpText}{/if}
+
{validationMessage}
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Container.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Container.wrn
new file mode 100644
index 00000000..bcc3a50f
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Container.wrn
@@ -0,0 +1,46 @@
+component Container {
+ props {
+ size = "default"
+ color = "primary"
+ columns = 2
+ gap = "md"
+ maxWidth = "xl"
+ class = ""
+ }
+
+ view {
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/ContextMenu.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/ContextMenu.wrn
new file mode 100644
index 00000000..7a8b1264
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/ContextMenu.wrn
@@ -0,0 +1,22 @@
+component ContextMenu {
+ props {
+ @event open = function
+ @event close = function
+ @event select = function
+ size = "default"
+ color = "primary"
+ title = "Context Menu"
+ description = ""
+ open = false
+ placement = "bottom"
+ closeLabel = "Close"
+ class = ""
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/CopyMarkup.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/CopyMarkup.wrn
new file mode 100644
index 00000000..ab506a30
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/CopyMarkup.wrn
@@ -0,0 +1,23 @@
+component CopyMarkup {
+ props {
+ @event copy = function
+ @event success = function
+ @event error = function
+ size = "default"
+ color = "primary"
+ label = "Copy Markup"
+ name = ""
+ value = ""
+ placeholder = ""
+ type = "text"
+ min = ""
+ max = ""
+ step = ""
+ disabled = false
+ required = false
+ class = ""
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/CustomScrollbar.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/CustomScrollbar.wrn
new file mode 100644
index 00000000..37ace07c
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/CustomScrollbar.wrn
@@ -0,0 +1,14 @@
+component CustomScrollbar {
+ props {
+ @event scroll = function
+ size = "default"
+ color = "primary"
+ columns = 2
+ gap = "md"
+ maxWidth = "xl"
+ class = ""
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/DataMap.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/DataMap.wrn
new file mode 100644
index 00000000..49a30b5e
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/DataMap.wrn
@@ -0,0 +1,21 @@
+component DataMap {
+ props {
+ @event select = function
+ @event change = function
+ size = "default"
+ color = "primary"
+ title = "Data Map"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/DataTable.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/DataTable.wrn
new file mode 100644
index 00000000..3ff347ea
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/DataTable.wrn
@@ -0,0 +1,19 @@
+component DataTable {
+ props {
+ @event sort = function
+ @event select = function
+ @event change = function
+ @event rowClick = function
+ @event pageChange = function
+ size = "default"
+ color = "primary"
+ caption = "Data Table"
+ columns = []
+ rows = []
+ striped = true
+ class = ""
+ }
+ view {
+ {caption}{#each columns as column}| {column.label} | {/each}
{#each rows as row}{#each columns as column}| {row[column.key]} | {/each}
{/each}
+
{#if cornerHint}{cornerHint}{/if}
+
{#if currentValue && !readonly && !disabled}{/if}
+
{#each days as day}{/each}
+ {#if helperText}
{helperText}{/if}
{error}
+
{#if src || srcdoc}
{:else}
{/if}
+ {#if orientation === "vertical"}
+
+ {:else}
+
+
+
+ {#if label}
+
+ {label}
+
+
+ {/if}
+
+ {/if}
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Drawer.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Drawer.wrn
new file mode 100644
index 00000000..641cef87
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Drawer.wrn
@@ -0,0 +1,21 @@
+component Drawer {
+ props {
+ @event open = function
+ @event close = function
+ size = "default"
+ color = "primary"
+ title = "Drawer"
+ description = ""
+ open = false
+ placement = "bottom"
+ closeLabel = "Close"
+ class = ""
+ }
+ view {
+
+
+ {#if description}
{description}
{/if}
+
+
+
+
+
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/FeatureCard.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/FeatureCard.wrn
new file mode 100644
index 00000000..93eb1906
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/FeatureCard.wrn
@@ -0,0 +1,113 @@
+component FeatureCard {
+ props {
+ icon = ""
+ title = "Feature"
+ description = ""
+ href = ""
+ actionLabel = "Learn more"
+ actionIcon = ""
+ badge = ""
+ badgeColor = "primary"
+ size = "default"
+ color = "primary"
+ variant = "default"
+ hover = "lift"
+ align = "left"
+ disabled = false
+ class = ""
+ }
+
+ view {
+
+
+
+
+ {#if icon}
+
+ {/if}
+
+
+ {#if badge}
+
+ {/if}
+
+ {title}
+
+
+ {#if description}
+
+ {description}
+
+ {/if}
+
+
+
+
+
+
+ {#if href && actionLabel}
+
+ {/if}
+
+
+ {#if href}
+
+ {/if}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/FeatureGrid.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/FeatureGrid.wrn
new file mode 100644
index 00000000..cec10f97
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/FeatureGrid.wrn
@@ -0,0 +1,55 @@
+component FeatureGrid {
+ props {
+ color = "primary"
+ size = "default"
+ columns = 3
+ tabletColumns = 2
+ mobileColumns = 1
+ gap = "md"
+ minItemWidth = ""
+ equalHeight = true
+ align = "stretch"
+ maxWidth = "full"
+ class = ""
+ }
+
+ view {
+
+
+
+ }
+
+ style {
+ .wire-feature-grid-autofit {
+ grid-template-columns: repeat(auto-fit, minmax(var(--wire-feature-grid-min), 1fr));
+ }
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/FeatureIconCard.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/FeatureIconCard.wrn
new file mode 100644
index 00000000..1b985d39
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/FeatureIconCard.wrn
@@ -0,0 +1,78 @@
+component FeatureIconCard {
+ props {
+ icon = "icon-[lucide--sparkles]"
+ iconSize = "md"
+ iconVariant = "soft"
+ title = "Feature"
+ description = ""
+ href = ""
+ actionLabel = "Explore"
+ badge = ""
+ size = "default"
+ color = "primary"
+ variant = "default"
+ align = "left"
+ hover = "lift"
+ class = ""
+ }
+
+ view {
+
+
+
+
+ {#if badge}
+
+ {badge}
+
+ {/if}
+
+
+ {title}
+
+ {#if description}
+ {description}
+ {/if}
+
+
+
+ {#if href}
+
+ {/if}
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/FileInput.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/FileInput.wrn
new file mode 100644
index 00000000..b3ed2183
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/FileInput.wrn
@@ -0,0 +1,52 @@
+component FileInput {
+ props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event select = function
+ @event clear = function
+ @event invalid = function
+ size = "default"
+ color = "primary"
+ id = ""
+ name = ""
+ label = "File"
+ hiddenLabel = false
+ placeholder = "Choose a file"
+ value = ""
+ icon = "icon-[lucide--upload]"
+ iconPosition = "start"
+ accept = ""
+ multiple = false
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ variant = "normal"
+ readonly = false
+ disabled = false
+ required = false
+ class = ""
+ }
+ state selectedName = ""
+ functions {
+ function handleChange(sourceEvent) {
+ sourceEvent.stopPropagation()
+ selectedName = sourceEvent.currentTarget.files && sourceEvent.currentTarget.files.length ? sourceEvent.currentTarget.files[0].name : ""
+ $emit("input", { files: sourceEvent.currentTarget.files, name: name, sourceEvent: sourceEvent })
+ $emit("change", { files: sourceEvent.currentTarget.files, name: name, sourceEvent: sourceEvent })
+ if (selectedName) $emit("select", { files: sourceEvent.currentTarget.files, name: name, sourceEvent: sourceEvent })
+ else $emit("clear", { name: name, sourceEvent: sourceEvent })
+ }
+ function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { name: name, sourceEvent: sourceEvent }) }
+ function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/FileUpload.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/FileUpload.wrn
new file mode 100644
index 00000000..207d3571
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/FileUpload.wrn
@@ -0,0 +1,26 @@
+component FileUpload {
+ props {
+ @event select = function
+ @event upload = function
+ @event progress = function
+ @event success = function
+ @event error = function
+ @event cancel = function
+ @event remove = function
+ size = "default"
+ color = "primary"
+ title = "File Upload"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/FileUploadProgress.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/FileUploadProgress.wrn
new file mode 100644
index 00000000..329a5859
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/FileUploadProgress.wrn
@@ -0,0 +1,37 @@
+component FileUploadProgress {
+ props {
+ @event cancel = function
+ @event retry = function
+ @event complete = function
+ size = "default"
+ color = "primary"
+ label = "Progress"
+ value = 50
+ max = 100
+ showValue = true
+ fileName = ""
+ fileSize = ""
+ uploadedSize = ""
+ status = "uploading"
+ cancelLabel = "Cancel upload"
+ retryLabel = "Retry upload"
+ class = ""
+ }
+ state currentValue = value
+ state currentStatus = status
+ functions {
+ function percent() { if (!Number(max)) { return 0 } return Math.max(0, Math.min(100, Math.round(Number(currentValue) / Number(max) * 100))) }
+ function detail(sourceEvent) { return { value: currentValue, max: max, percent: percent(), status: currentStatus, fileName: fileName, sourceEvent: sourceEvent } }
+ function cancelUpload(sourceEvent) { currentStatus = "cancelled"; $emit("cancel", detail(sourceEvent)) }
+ function retryUpload(sourceEvent) { currentValue = 0; currentStatus = "uploading"; $emit("retry", detail(sourceEvent)) }
+ function completeUpload(sourceEvent) { currentValue = max; currentStatus = "complete"; $emit("complete", detail(sourceEvent)) }
+ }
+ view {
+
+
{#if fileName}{fileName}{#if uploadedSize || fileSize}{uploadedSize}{#if uploadedSize && fileSize} of {/if}{fileSize}{:else}{label}{/if}{:else}{label}{/if}{#if showValue}{percent()}%{/if}
+
+
{#if currentStatus === "uploading"}Uploading securely…{:else if currentStatus === "complete"}Upload complete{:else if currentStatus === "error"}Upload failed{:else}Upload cancelled{/if}
+
{#if currentStatus === "uploading"}{/if}{#if currentStatus === "error" || currentStatus === "cancelled"}{/if}
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Hero.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Hero.wrn
new file mode 100644
index 00000000..7613a2b6
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Hero.wrn
@@ -0,0 +1,149 @@
+component Hero {
+ props {
+ eyebrow = ""
+ title = "Build something remarkable"
+ highlight = ""
+ description = ""
+ align = "left"
+ size = "default"
+ color = "primary"
+ variant = "default"
+ primaryLabel = ""
+ primaryHref = ""
+ primaryIcon = ""
+ secondaryLabel = ""
+ secondaryHref = ""
+ secondaryIcon = ""
+ tertiaryLabel = ""
+ tertiaryHref = ""
+ badges = []
+ trustItems = []
+ maxWidth = "xl"
+ class = ""
+ }
+
+ view {
+
+
+ {#if variant === "gradient"}
+
+ {/if}
+
+
+
+
+ {#if eyebrow}
+
+
+ {eyebrow}
+
+ {/if}
+
+
+ {title}
+ {#if highlight}
+
+ {highlight}
+
+ {/if}
+
+
+ {#if description}
+
+ {description}
+
+ {/if}
+
+ {#if badges.length > 0}
+
+ {#each badges as badge}
+
+ {/each}
+
+ {/if}
+
+
+
+
+
+
+
+ {#if trustItems.length > 0}
+
+ {#each trustItems as item}
+
+
+ {item.label || item.title || item}
+
+ {/each}
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+ {#each actions as action, index}
+ {#if action.label}
+
+ {/if}
+ {/each}
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Image.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Image.wrn
new file mode 100644
index 00000000..881d5229
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Image.wrn
@@ -0,0 +1,47 @@
+component Image {
+ props {
+ size = "default"
+ color = "primary"
+ src = ""
+ alt = ""
+ width = ""
+ height = ""
+ loading = "lazy"
+ rounded = false
+ class = ""
+ }
+
+ view {
+
+ {#if src}
+
+ {:else}
+
+
+
+ {/if}
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Input.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Input.wrn
new file mode 100644
index 00000000..3e12c986
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Input.wrn
@@ -0,0 +1,92 @@
+component Input {
+ props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event invalid = function
+ @event keydown = function
+ @event keyup = function
+ size = "default"
+ color = "primary"
+ id = ""
+ name = ""
+ label = "Input"
+ hiddenLabel = false
+ placeholder = ""
+ value = ""
+ type = "text"
+ variant = "normal"
+ icon = ""
+ iconPosition = "start"
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ readonly = false
+ disabled = false
+ required = false
+ autocomplete = ""
+ inputmode = ""
+ minlength = ""
+ maxlength = ""
+ pattern = ""
+ min = ""
+ max = ""
+ step = ""
+ class = ""
+ }
+ functions {
+ function detail(sourceEvent) {
+ return { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }
+ }
+ function handleInput(sourceEvent) { sourceEvent.stopPropagation(); $emit("input", detail(sourceEvent)) }
+ function handleChange(sourceEvent) { sourceEvent.stopPropagation(); $emit("change", detail(sourceEvent)) }
+ function handleFocus(sourceEvent) { sourceEvent.stopPropagation(); $emit("focus", detail(sourceEvent)) }
+ function handleBlur(sourceEvent) { sourceEvent.stopPropagation(); $emit("blur", detail(sourceEvent)) }
+ function handleInvalid(sourceEvent) { sourceEvent.stopPropagation(); $emit("invalid", { value: sourceEvent.currentTarget.value, name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
+ function handleKeydown(sourceEvent) { sourceEvent.stopPropagation(); $emit("keydown", { key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
+ function handleKeyup(sourceEvent) { sourceEvent.stopPropagation(); $emit("keyup", { key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/InputGroup.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/InputGroup.wrn
new file mode 100644
index 00000000..aea3fd7a
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/InputGroup.wrn
@@ -0,0 +1,51 @@
+component InputGroup {
+ props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event submit = function
+ @event action = function
+ size = "default"
+ color = "primary"
+ id = ""
+ name = ""
+ label = "Input group"
+ hiddenLabel = false
+ value = ""
+ placeholder = ""
+ type = "text"
+ startText = ""
+ endText = ""
+ icon = ""
+ iconPosition = "start"
+ actionLabel = ""
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ variant = "normal"
+ readonly = false
+ disabled = false
+ required = false
+ class = ""
+ }
+ functions {
+ function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
+ function handleKeydown(sourceEvent) { if (sourceEvent.key === "Enter") { sourceEvent.stopPropagation(); $emit("submit", { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) } }
+ function handleAction(sourceEvent) { $emit("action", { name: name, sourceEvent: sourceEvent }) }
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/InputNumber.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/InputNumber.wrn
new file mode 100644
index 00000000..226922fd
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/InputNumber.wrn
@@ -0,0 +1,623 @@
+component InputNumber {
+ props {
+ size = "default"
+ color = "primary"
+ variant = "default"
+ class = ""
+
+ id = ""
+ name = "quantity"
+ value = 0
+ min = ""
+ max = ""
+ step = 1
+ precision = "auto"
+
+ label = ""
+ description = ""
+ helpText = ""
+ error = ""
+ invalid = false
+
+ prefix = ""
+ suffix = ""
+ placeholder = ""
+ autocomplete = "off"
+ inputMode = "decimal"
+ ariaLabel = ""
+
+ required = false
+ disabled = false
+ inputDisabled = false
+ buttonsDisabled = false
+ readonly = false
+ allowInput = true
+ keyboard = true
+ wheel = false
+ clamp = true
+ fullWidth = false
+ showButtons = true
+ showValidationMessage = true
+
+ decrementLabel = "Decrease value"
+ incrementLabel = "Increase value"
+ controlsLabel = "Quantity controls"
+ requiredMessage = "A value is required."
+ minMessage = "Value is below the minimum."
+ maxMessage = "Value is above the maximum."
+
+ @event input = function
+ @event change = function
+ @event increment = function
+ @event decrement = function
+ }
+
+ state currentValue = value
+ state committedValue = value
+
+ functions {
+ function inputId() {
+ if (id !== "") {
+ return id
+ }
+
+ if (name !== "") {
+ return name
+ }
+
+ return "input-number"
+ }
+
+ function descriptionId() {
+ return inputId() + "-description"
+ }
+
+ function messageId() {
+ return inputId() + "-message"
+ }
+
+ function componentColor() {
+ if (color === "secondary") {
+ return "var(--wire-color-secondary)"
+ }
+
+ if (color === "success") {
+ return "var(--wire-color-success)"
+ }
+
+ if (color === "warning") {
+ return "var(--wire-color-warning)"
+ }
+
+ if (color === "danger") {
+ return "var(--wire-color-danger)"
+ }
+
+ if (color === "info") {
+ return "var(--wire-color-info)"
+ }
+
+ return "var(--wire-color-primary)"
+ }
+
+ function hasMin() {
+ return min !== "" && min !== null && min !== undefined
+ }
+
+ function hasMax() {
+ return max !== "" && max !== null && max !== undefined
+ }
+
+ function isBlank() {
+ return currentValue === "" || currentValue === null || currentValue === undefined
+ }
+
+ function normalizedStep() {
+ return Number(step) > 0 ? Number(step) : 1
+ }
+
+ function inferredPrecision() {
+ if (precision !== "auto" && precision !== "") {
+ return Math.max(0, Number(precision) || 0)
+ }
+
+ if (String(normalizedStep()).includes(".")) {
+ return String(normalizedStep()).split(".")[1].length
+ }
+
+ return 0
+ }
+
+ function precisionFactor() {
+ return Math.pow(10, inferredPrecision())
+ }
+
+ function roundValue(nextValue) {
+ return Math.round(Number(nextValue) * precisionFactor()) / precisionFactor()
+ }
+
+ function clampValue(nextValue) {
+ nextValue = Number(nextValue)
+
+ if (hasMin() && nextValue < Number(min)) {
+ nextValue = Number(min)
+ }
+
+ if (hasMax() && nextValue > Number(max)) {
+ nextValue = Number(max)
+ }
+
+ return roundValue(nextValue)
+ }
+
+ function isBelowMin() {
+ return !isBlank() && hasMin() && Number(currentValue) < Number(min)
+ }
+
+ function isAboveMax() {
+ return !isBlank() && hasMax() && Number(currentValue) > Number(max)
+ }
+
+ function isInvalid() {
+ return (
+ invalid ||
+ error !== "" ||
+ (required && isBlank()) ||
+ isBelowMin() ||
+ isAboveMax()
+ )
+ }
+
+ function validationMessage() {
+ if (error !== "") {
+ return error
+ }
+
+ if (required && isBlank()) {
+ return requiredMessage
+ }
+
+ if (isBelowMin()) {
+ return minMessage
+ }
+
+ if (isAboveMax()) {
+ return maxMessage
+ }
+
+ return ""
+ }
+
+ function hasMessage() {
+ return (
+ helpText !== "" ||
+ (showValidationMessage && isInvalid() && validationMessage() !== "")
+ )
+ }
+
+ function describedBy() {
+ if (description !== "" && hasMessage()) {
+ return descriptionId() + " " + messageId()
+ }
+
+ if (description !== "") {
+ return descriptionId()
+ }
+
+ if (hasMessage()) {
+ return messageId()
+ }
+
+ return ""
+ }
+
+ function decrementDisabled() {
+ return (
+ disabled ||
+ readonly ||
+ buttonsDisabled ||
+ (hasMin() && !isBlank() && Number(currentValue) <= Number(min))
+ )
+ }
+
+ function incrementDisabled() {
+ return (
+ disabled ||
+ readonly ||
+ buttonsDisabled ||
+ (hasMax() && !isBlank() && Number(currentValue) >= Number(max))
+ )
+ }
+
+ function dispatchInputNumberEvent(
+ sourceEvent,
+ eventName,
+ action,
+ previousValue,
+ root,
+ customEvent
+ ) {
+ root = sourceEvent.currentTarget.closest("[data-wrn-input-number]")
+
+ if (!root && sourceEvent.target) {
+ root = sourceEvent.target.closest("[data-wrn-input-number]")
+ }
+
+ if (!root) {
+ return
+ }
+
+ customEvent = document.createEvent("CustomEvent")
+ customEvent.initCustomEvent(eventName, true, false, {
+ component: "InputNumber",
+ name: name,
+ value: currentValue,
+ previousValue: previousValue,
+ action: action,
+ min: hasMin() ? Number(min) : null,
+ max: hasMax() ? Number(max) : null,
+ step: normalizedStep(),
+ valid: !isInvalid()
+ })
+ root.dispatchEvent(customEvent)
+ }
+
+ function applyControlValue(nextValue, action, sourceEvent, previousValue) {
+ previousValue = currentValue
+ currentValue = clampValue(nextValue)
+ committedValue = currentValue
+
+ dispatchInputNumberEvent(
+ sourceEvent,
+ "input",
+ action,
+ previousValue
+ )
+ dispatchInputNumberEvent(
+ sourceEvent,
+ "change",
+ action,
+ previousValue
+ )
+ dispatchInputNumberEvent(
+ sourceEvent,
+ action,
+ action,
+ previousValue
+ )
+ }
+
+ function incrementValue(sourceEvent, nextValue) {
+ if (incrementDisabled()) {
+ return
+ }
+
+ if (isBlank()) {
+ nextValue = hasMin() ? Number(min) : normalizedStep()
+ } else {
+ nextValue =
+ Number(currentValue) +
+ normalizedStep() * (sourceEvent.shiftKey ? 10 : 1)
+ }
+
+ applyControlValue(nextValue, "increment", sourceEvent)
+ }
+
+ function decrementValue(sourceEvent, nextValue) {
+ if (decrementDisabled()) {
+ return
+ }
+
+ if (isBlank()) {
+ nextValue = hasMax() ? Number(max) : -normalizedStep()
+ } else {
+ nextValue =
+ Number(currentValue) -
+ normalizedStep() * (sourceEvent.shiftKey ? 10 : 1)
+ }
+
+ applyControlValue(nextValue, "decrement", sourceEvent)
+ }
+
+ function handleInput(sourceEvent, previousValue, nextValue) {
+ sourceEvent.stopPropagation()
+ previousValue = currentValue
+ nextValue = sourceEvent.target.value
+
+ if (nextValue === "") {
+ currentValue = ""
+ } else if (!Number.isNaN(Number(nextValue))) {
+ currentValue = roundValue(Number(nextValue))
+ }
+
+ dispatchInputNumberEvent(
+ sourceEvent,
+ "input",
+ "input",
+ previousValue
+ )
+ }
+
+ function handleChange(sourceEvent, previousValue) {
+ sourceEvent.stopPropagation()
+ previousValue = committedValue
+
+ if (!isBlank()) {
+ currentValue = clamp
+ ? clampValue(currentValue)
+ : roundValue(currentValue)
+ }
+
+ committedValue = currentValue
+
+ dispatchInputNumberEvent(
+ sourceEvent,
+ "change",
+ "change",
+ previousValue
+ )
+ }
+
+ function handleKeydown(sourceEvent) {
+ if (
+ !keyboard ||
+ disabled ||
+ readonly ||
+ inputDisabled ||
+ !allowInput
+ ) {
+ return
+ }
+
+ if (sourceEvent.key === "ArrowUp") {
+ sourceEvent.preventDefault()
+ incrementValue(sourceEvent)
+ } else if (sourceEvent.key === "ArrowDown") {
+ sourceEvent.preventDefault()
+ decrementValue(sourceEvent)
+ } else if (sourceEvent.key === "Home" && hasMin()) {
+ sourceEvent.preventDefault()
+ applyControlValue(Number(min), "decrement", sourceEvent)
+ } else if (sourceEvent.key === "End" && hasMax()) {
+ sourceEvent.preventDefault()
+ applyControlValue(Number(max), "increment", sourceEvent)
+ }
+ }
+
+ function handleWheel(sourceEvent) {
+ if (
+ !wheel ||
+ disabled ||
+ readonly ||
+ inputDisabled ||
+ !allowInput
+ ) {
+ return
+ }
+
+ sourceEvent.preventDefault()
+
+ if (sourceEvent.deltaY < 0) {
+ incrementValue(sourceEvent)
+ } else if (sourceEvent.deltaY > 0) {
+ decrementValue(sourceEvent)
+ }
+ }
+ }
+
+ view {
+
+ {#if label !== "" && variant !== "labeled" && variant !== "seat"}
+
+ {/if}
+
+ {#if description !== "" && variant !== "labeled" && variant !== "seat"}
+
+ {description}
+
+ {/if}
+
+
+ {#if variant === "horizontal" && showButtons}
+
+ {/if}
+
+
+ {#if variant === "labeled" || variant === "seat"}
+
+ {#if label !== ""}
+
+ {/if}
+
+ {#if description !== ""}
+
+ {description}
+
+ {/if}
+
+ {/if}
+
+
+ {#if prefix !== ""}
+
+ {prefix}
+
+ {/if}
+
+
+
+ {#if suffix !== ""}
+
+ {suffix}
+
+ {/if}
+
+
+
+ {#if variant === "horizontal" && showButtons}
+
+ {:else}
+ {#if showButtons}
+
+
+
+
+
+ {/if}
+ {/if}
+
+
+ {#if showValidationMessage && isInvalid() && validationMessage() !== ""}
+
+
+ {validationMessage()}
+
+ {/if}
+
+ {#if (!showValidationMessage || !isInvalid() || validationMessage() === "") && helpText !== ""}
+
+ {helpText}
+
+ {/if}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/LegendIndicator.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/LegendIndicator.wrn
new file mode 100644
index 00000000..1fae3791
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/LegendIndicator.wrn
@@ -0,0 +1,21 @@
+component LegendIndicator {
+ props {
+ @event toggle = function
+ @event select = function
+ size = "default"
+ color = "primary"
+ title = "Legend Indicator"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Link.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Link.wrn
new file mode 100644
index 00000000..3cf17764
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Link.wrn
@@ -0,0 +1,47 @@
+component Link {
+ props {
+ size = "default"
+ color = "primary"
+ label = "Link"
+ href = "#"
+ target = ""
+ rel = ""
+ external = false
+ class = ""
+ }
+
+ view {
+
+ {label}
+
+ {#if external}
+
+ {/if}
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/List.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/List.wrn
new file mode 100644
index 00000000..0ac667a7
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/List.wrn
@@ -0,0 +1,107 @@
+component List {
+ props {
+ size = "default"
+ color = "primary"
+ title = "List"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+
+ view {
+
+ {#if title || description}
+
+ {#if title}
+ {title}
+ {/if}
+ {#if description}
+ {description}
+ {/if}
+
+ {/if}
+
+
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/ListGroup.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/ListGroup.wrn
new file mode 100644
index 00000000..35366c9c
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/ListGroup.wrn
@@ -0,0 +1,21 @@
+component ListGroup {
+ props {
+ @event select = function
+ @event change = function
+ size = "default"
+ color = "primary"
+ title = "List Group"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Map.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Map.wrn
new file mode 100644
index 00000000..6d0da585
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Map.wrn
@@ -0,0 +1,85 @@
+component Map {
+ props {
+ size = "default"
+ color = "primary"
+ title = "Map"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+
+ view {
+
+ {#if title || description}
+
+ {/if}
+
+
+
+
+
+
+
+
+ {#if items.length > 0}
+ {#each items as item, index}
+
+ {/each}
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if actionLabel}
+
+ {/if}
+
+
+
+
+
+
+ {#if title}
+
+
+ {title}
+
+ {/if}
+
+
+
+
+
+
+
{label}
+
+ {prefix}{value}{suffix}
+
+
+
+ {#if icon}
+
+
+
+ {/if}
+
{description}
+ {/if}
+
+ {#if trend || trendLabel}
+
+
+ {#if trendDirection === "up" || trendDirection === "positive"}
+
+ {:else if trendDirection === "down" || trendDirection === "negative"}
+
+ {:else}
+
+ {/if}
+ {trend}
+
+ {#if trendLabel}
+ {trendLabel}
+ {/if}
+
+ {/if}
+
+ {#if href}
+
+ {/if}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/MetricGrid.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/MetricGrid.wrn
new file mode 100644
index 00000000..5e353cff
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/MetricGrid.wrn
@@ -0,0 +1,60 @@
+component MetricGrid {
+ props {
+ items = []
+ columns = 4
+ tabletColumns = 2
+ mobileColumns = 1
+ gap = "md"
+ equalHeight = true
+ dividers = false
+ size = "default"
+ color = "primary"
+ variant = "default"
+ class = ""
+ }
+
+ view {
+
+ {#each items as item}
+
+ {:empty}
+
+ {/each}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Modal.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Modal.wrn
new file mode 100644
index 00000000..2366e70f
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Modal.wrn
@@ -0,0 +1,23 @@
+component Modal {
+ props {
+ @event open = function
+ @event close = function
+ @event cancel = function
+ @event confirm = function
+ size = "default"
+ color = "primary"
+ title = "Modal"
+ description = ""
+ open = false
+ placement = "bottom"
+ closeLabel = "Close"
+ class = ""
+ }
+ view {
+
+
+ {#if description}
{description}
{/if}
+
+
+
+ {#if showBreadcrumbs && breadcrumbs.length > 0}
+
+ {/if}
+
+
+
+ {#if icon}
+
+
+
+ {/if}
+
+
+
+
+
+
+
+ {#if secondaryLabel}
+
+ {/if}
+
+ {#if primaryLabel}
+
+ {/if}
+
+
+
+
+
+
+ {#if description}
{description}
{/if}
+
+
{item.label}{item.value}{#if item.detail}{item.detail}{/if}
+
+ {/each}
+
+
+
+
+
+
+ Priority
Tasks requiring attention
+
+
+
+
+ {#each updates as item}
+
+
+ {item.label}{#if item.detail}
{item.detail}
{/if}
{item.time || ''}
+
+ {/each}
+
+
+
+
+
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/PublicPageShell.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/PublicPageShell.wrn
new file mode 100644
index 00000000..e98f9c02
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/PublicPageShell.wrn
@@ -0,0 +1,53 @@
+component PublicPageShell {
+ props {
+ maxWidth = "full"
+ fullWidth = true
+ headerOffset = "none"
+ background = "default"
+ overflow = "clip"
+ minHeight = "screen"
+ size = "default"
+ color = "primary"
+ variant = "default"
+ class = ""
+ }
+
+ view {
+
+
+
+ {#if fullWidth}
+
+
+
+ {:else}
+
+
+
+ {/if}
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Radio.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Radio.wrn
new file mode 100644
index 00000000..1da0c2a8
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Radio.wrn
@@ -0,0 +1,56 @@
+component Radio {
+ props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event invalid = function
+ size = "default"
+ color = "primary"
+ id = ""
+ name = ""
+ label = "Radio"
+ hiddenLabel = false
+ placeholder = ""
+ variant = "normal"
+ icon = ""
+ iconPosition = "start"
+ value = "on"
+ options = []
+ checked = false
+ orientation = "vertical"
+ card = false
+ rightAligned = false
+ list = false
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ readonly = false
+ disabled = false
+ required = false
+ class = ""
+ }
+ functions {
+ function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { checked: sourceEvent.currentTarget.checked, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
+ function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
+ }
+ view {
+
+
{#if options.length || cornerHint}{label}{#if cornerHint}{cornerHint}{/if}{/if}
+ {#if options.length}
+
+ {#each options as option}
+
+ {/each}
+
+ {:else}
+
+ {/if}
+ {#if helperText}
{helperText}{/if}
{error}
+
+
{#if cornerHint}{cornerHint}{/if}
+
+ {#if icon}
{/if}
+
+
+
+
+
+ {#if marks.length}{#each marks as mark}{/each}{/if}
+
+ {#if showBounds}
{min}Step {step}{max}
{/if}
+
+ {#if showValue}
{/if}
+
+
+ {#if helperText}
{helperText}{/if}
{error}
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Scrollspy.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Scrollspy.wrn
new file mode 100644
index 00000000..305d2d72
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Scrollspy.wrn
@@ -0,0 +1,18 @@
+component Scrollspy {
+ props {
+ @event change = function
+ size = "default"
+ color = "primary"
+ label = "Scrollspy"
+ items = []
+ active = ""
+ orientation = "horizontal"
+ class = ""
+ }
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/SearchBox.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/SearchBox.wrn
new file mode 100644
index 00000000..bcb7243a
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/SearchBox.wrn
@@ -0,0 +1,80 @@
+component SearchBox {
+ props {
+ size = "default"
+ color = "primary"
+ label = "Search Box"
+ name = ""
+ value = ""
+ placeholder = ""
+ type = "search"
+ min = ""
+ max = ""
+ step = ""
+ disabled = false
+ required = false
+ class = ""
+ }
+
+ state query = value
+
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Section.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Section.wrn
new file mode 100644
index 00000000..c0e65c22
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Section.wrn
@@ -0,0 +1,60 @@
+component Section {
+ props {
+ id = ""
+ size = "default"
+ color = "primary"
+ variant = "default"
+ spacing = "lg"
+ maxWidth = "xl"
+ fullWidth = false
+ borderTop = false
+ borderBottom = false
+ class = ""
+ }
+
+ view {
+
+ {#if fullWidth}
+
+ {:else}
+
+
+
+ {/if}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/SectionHeader.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/SectionHeader.wrn
new file mode 100644
index 00000000..a70c54fb
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/SectionHeader.wrn
@@ -0,0 +1,113 @@
+component SectionHeader {
+ props {
+ id = ""
+ eyebrow = ""
+ title = ""
+ description = ""
+ align = "left"
+ size = "default"
+ color = "primary"
+ headingLevel = 2
+ maxWidth = "3xl"
+ class = ""
+ }
+
+ view {
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Select.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Select.wrn
new file mode 100644
index 00000000..23c13a94
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Select.wrn
@@ -0,0 +1,61 @@
+component Select {
+ props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event open = function
+ @event close = function
+ @event invalid = function
+ size = "default"
+ color = "primary"
+ id = ""
+ name = ""
+ label = "Select"
+ hiddenLabel = false
+ value = ""
+ values = []
+ options = []
+ placeholder = "Select an option"
+ variant = "normal"
+ icon = ""
+ iconPosition = "start"
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ multiple = false
+ readonly = false
+ disabled = false
+ required = false
+ class = ""
+ }
+ functions {
+ function selected(option) {
+ if (multiple) return values.includes(option.value)
+ return option.value === value
+ }
+ function emitField(nameEvent, sourceEvent) {
+ sourceEvent.stopPropagation()
+ $emit(nameEvent, { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent })
+ }
+ function handleFocus(sourceEvent) { emitField("focus", sourceEvent); $emit("open", { name: name, sourceEvent: sourceEvent }) }
+ function handleBlur(sourceEvent) { emitField("blur", sourceEvent); $emit("close", { name: name, sourceEvent: sourceEvent }) }
+ function handleInvalid(sourceEvent) { $emit("invalid", { name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
+ }
+ view {
+
+
{#if cornerHint}{cornerHint}{/if}
+
+ {#if icon}{/if}
+
+ {#if variant === "floating"}{label}{/if}
+
+ {#if helperText}
{helperText}{/if}
+
{error}
+
+
+ {#if eyebrow}
+
+
+ {eyebrow}
+
+ {/if}
+
+
+ {title}
+ {#if highlight}
+ {highlight}
+ {/if}
+
+
+ {#if description}
+
{description}
+ {/if}
+
+
+
+
+
+ {#if trustItems.length > 0}
+
+ {#each trustItems as item}
+
+
+ {item.label || item.title || item}
+
+ {/each}
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+ {#if presentation === "popover"}
+
+
+
+
+ Password strength
+ {password ? strengthLabel() : emptyLabel}
+
+
+
+
+ {#if showRequirements}
+
+ -
+ At least {minLength} characters
+
+ {#if requireLowercase}- One lowercase letter
{/if}
+ {#if requireUppercase}- One uppercase letter
{/if}
+ {#if requireNumber}- One number
{/if}
+ {#if requireSpecialCharacter}- One special character: {specialCharactersSet}
{/if}
+
+ {/if}
+ {#if hintText}
{hintText}{/if}
+
+
+ {/if}
+
+
+ {#if presentation !== "popover"}
+
+
+ Password strength
+ {password ? strengthLabel() : emptyLabel}
+
+
+
+
+ {#if showRequirements}
+
+ - At least {minLength} characters
+ {#if requireLowercase}- One lowercase letter
{/if}
+ {#if requireUppercase}- One uppercase letter
{/if}
+ {#if requireNumber}- One number
{/if}
+ {#if requireSpecialCharacter}- One special character: {specialCharactersSet}
{/if}
+
+ {/if}
+ {#if hintText}
{hintText}{/if}
+
+ {/if}
+
+
{validationMessage}
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Switch.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Switch.wrn
new file mode 100644
index 00000000..478a92fe
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Switch.wrn
@@ -0,0 +1,39 @@
+component Switch {
+ props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ size = "default"
+ color = "primary"
+ id = ""
+ name = ""
+ label = "Switch"
+ hiddenLabel = false
+ placeholder = ""
+ variant = "normal"
+ icon = ""
+ iconPosition = "start"
+ value = "on"
+ checked = false
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ readonly = false
+ disabled = false
+ required = false
+ class = ""
+ }
+ functions {
+ function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { checked: sourceEvent.currentTarget.checked, value: value, name: name, sourceEvent: sourceEvent }) }
+ function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
+ }
+ view {
+
+
{#if cornerHint}{label}{cornerHint}{/if}
+
+ {#if helperText}
{helperText}{/if}
{error}
+
+ {#each items as item, index}
+
+ {/each}
+
+
+
+ {#each items as item, index}
+
+ {#if item.title && item.title !== item.label}
+
{item.title}
+ {/if}
+ {#if item.description}
+
{item.description}
+ {/if}
+ {#if item.content}
+
{item.content}
+ {/if}
+
+ {/each}
+
+
+
+
{#if cornerHint}{cornerHint}{/if}
+
+ {#if icon}{/if}
+
+ {#if variant === "floating"}{label}{/if}
+
+ {#if helperText}
{helperText}{/if}
+
{error}
+
+
{#if cornerHint}{cornerHint}{/if}
+
+ {#if icon}{/if}
+
+
+
+
Hour{#each hours as hour}{/each}
Minute{#each minutes as minute}{/each}
+ {#if helperText}
{helperText}{/if}
+
{error}
+
{title}
+ {/if}
+ {#if description}
+ {description}
+ {/if}
+
+ {/if}
+
+
+ {#each items as item, index}
+ -
+
+
+
+
+
+
+
+
{item.title || item.label}
+ {#if item.subtitle}
+
{item.subtitle}
+ {/if}
+
+ {#if item.date || item.meta}
+
+ {/if}
+
{item.description}
+ {/if}
+
+ {#if item.href}
+
+ {item.actionLabel || "View details"}
+
+
+ {/if}
+
+
+ {:empty}
+ - No timeline items available.
+ {/each}
+
+
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Toast.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Toast.wrn
new file mode 100644
index 00000000..bda42b49
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Toast.wrn
@@ -0,0 +1,21 @@
+component Toast {
+ props {
+ @event dismiss = function
+ @event action = function
+ size = "default"
+ color = "primary"
+ title = "Toast"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/ToastNotifications.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/ToastNotifications.wrn
new file mode 100644
index 00000000..d49d5547
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/ToastNotifications.wrn
@@ -0,0 +1,23 @@
+component ToastNotifications {
+ props {
+ @event add = function
+ @event dismiss = function
+ @event clear = function
+ @event action = function
+ size = "default"
+ color = "primary"
+ title = "Toast Notifications"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/ToggleCount.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/ToggleCount.wrn
new file mode 100644
index 00000000..0a858af9
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/ToggleCount.wrn
@@ -0,0 +1,237 @@
+component ToggleCount {
+ props {
+ size = "default"
+ color = "primary"
+ variant = "segmented"
+ class = ""
+
+ name = "billing-cycle"
+ value = "monthly"
+ firstValue = "monthly"
+ firstLabel = "Monthly"
+ secondValue = "annual"
+ secondLabel = "Annual"
+ ariaLabel = "Billing frequency"
+
+ items = []
+ currency = "$"
+ suffix = ""
+ firstValueKey = "monthly"
+ secondValueKey = "annual"
+ emptyValue = "—"
+
+ align = "end"
+ fullWidth = true
+ disabled = false
+ animate = true
+ animationDuration = 450
+ animationSteps = 18
+
+ @event change = function
+ @event toggle = function
+ }
+
+ state selectedValue = value
+
+ functions {
+ function isFirstSelected() {
+ return selectedValue === firstValue
+ }
+
+ function isSecondSelected() {
+ return selectedValue === secondValue
+ }
+
+ function displayValue(item) {
+ if (isSecondSelected()) {
+ return item[secondValueKey] !== undefined
+ ? item[secondValueKey]
+ : emptyValue
+ }
+
+ return item[firstValueKey] !== undefined
+ ? item[firstValueKey]
+ : emptyValue
+ }
+
+ function dispatchToggleEvent(sourceEvent, previousValue, root, customEvent) {
+ root = sourceEvent.currentTarget.closest("[data-wrn-toggle-count]")
+
+ if (!root) {
+ return
+ }
+
+ customEvent = document.createEvent("CustomEvent")
+ customEvent.initCustomEvent("change", true, false, {
+ component: "ToggleCount",
+ name: name,
+ value: selectedValue,
+ previousValue: previousValue,
+ firstValue: firstValue,
+ secondValue: secondValue
+ })
+ root.dispatchEvent(customEvent)
+
+ customEvent = document.createEvent("CustomEvent")
+ customEvent.initCustomEvent("toggle", true, false, {
+ component: "ToggleCount",
+ name: name,
+ value: selectedValue,
+ previousValue: previousValue,
+ firstValue: firstValue,
+ secondValue: secondValue
+ })
+ root.dispatchEvent(customEvent)
+ }
+
+ function selectValue(sourceEvent, nextValue, previousValue) {
+ if (disabled || selectedValue === nextValue) {
+ return
+ }
+
+ previousValue = selectedValue
+ selectedValue = nextValue
+
+ if (
+ animate &&
+ !window.matchMedia("(prefers-reduced-motion: reduce)").matches
+ ) {
+ animateDisplayedValues(sourceEvent, previousValue)
+ }
+
+ dispatchToggleEvent(sourceEvent, previousValue)
+ }
+
+ function animateDisplayedValues(sourceEvent, previousValue, root, nodes) {
+ root = sourceEvent.currentTarget.closest("[data-wrn-toggle-count]")
+
+ if (!root) {
+ return
+ }
+
+ nodes = root.querySelectorAll("[data-toggle-count-value]")
+ animateValueAt(nodes, 0, previousValue)
+ }
+
+ function animateValueAt(nodes, index, previousValue, node, fromValue, toValue) {
+ if (index >= nodes.length) {
+ return
+ }
+
+ node = nodes[index]
+ fromValue = Number(
+ previousValue === secondValue
+ ? node.getAttribute("data-second-value")
+ : node.getAttribute("data-first-value")
+ )
+ toValue = Number(
+ selectedValue === secondValue
+ ? node.getAttribute("data-second-value")
+ : node.getAttribute("data-first-value")
+ )
+
+ if (!Number.isNaN(fromValue) && !Number.isNaN(toValue)) {
+ animateValueFrame(node, fromValue, toValue, 0)
+ }
+
+ animateValueAt(nodes, index + 1, previousValue)
+ }
+
+ function animateValueFrame(node, fromValue, toValue, frame, totalFrames, nextValue) {
+ totalFrames = Math.max(1, Number(animationSteps) || 1)
+
+ if (frame >= totalFrames) {
+ node.replaceChildren(String(toValue))
+ return
+ }
+
+ nextValue = Math.round(
+ fromValue +
+ (toValue - fromValue) * (frame / totalFrames)
+ )
+ node.replaceChildren(String(nextValue))
+
+ setTimeout(
+ animateValueFrame,
+ Math.max(1, Number(animationDuration) / totalFrames),
+ node,
+ fromValue,
+ toValue,
+ frame + 1
+ )
+ }
+
+ function toggleValue(sourceEvent) {
+ selectValue(
+ sourceEvent,
+ isFirstSelected() ? secondValue : firstValue
+ )
+ }
+ }
+
+ view {
+
+
+
+
+ {#if variant === "switch"}
+
{firstLabel}
+
+
{secondLabel}
+ {:else}
+
+
+
+
+ {/if}
+
+ {#each items as item}
+
+ {item.label || item.name}
+
+ {#if currency}{currency}{/if}
+ {displayValue(item)}
+ {#if suffix}{suffix}{/if}
+
+ {#if item.description}{item.description}{/if}
+
+ {/each}
+
{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Typography.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Typography.wrn
new file mode 100644
index 00000000..d7d36173
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/Typography.wrn
@@ -0,0 +1,75 @@
+component Typography {
+ props {
+ size = "default"
+ color = "primary"
+ columns = 2
+ gap = "md"
+ maxWidth = "xl"
+ class = ""
+ }
+
+ view {
+
+
+
+ }
+
+ style {
+ .wire-typography :where(h1, h2, h3, h4) {
+ color: var(--wire-color-text);
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ line-height: 1.2;
+ break-after: avoid;
+ }
+
+ .wire-typography :where(h1) { font-size: clamp(2rem, 4vw, 3.5rem); margin: 0 0 1.5rem; }
+ .wire-typography :where(h2) { font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 2.5rem 0 1rem; }
+ .wire-typography :where(h3) { font-size: 1.35rem; margin: 2rem 0 0.75rem; }
+ .wire-typography :where(p, ul, ol, blockquote, pre, table) { margin: 1rem 0; }
+ .wire-typography :where(p, li) { color: var(--wire-color-text-muted); line-height: 1.8; }
+ .wire-typography :where(a) { color: var(--wire-color-primary); font-weight: 600; text-underline-offset: 0.2em; }
+ .wire-typography :where(a:hover) { color: var(--wire-color-primary-hover); text-decoration: underline; }
+ .wire-typography :where(ul, ol) { padding-left: 1.4rem; }
+ .wire-typography :where(ul) { list-style: disc; }
+ .wire-typography :where(ol) { list-style: decimal; }
+ .wire-typography :where(blockquote) {
+ border-left: 4px solid var(--wire-color-primary);
+ background: var(--wire-color-primary-soft);
+ border-radius: 0 0.75rem 0.75rem 0;
+ padding: 1rem 1.25rem;
+ color: var(--wire-color-text);
+ }
+ .wire-typography :where(code) {
+ border-radius: 0.35rem;
+ background: var(--wire-color-surface-soft);
+ padding: 0.15rem 0.35rem;
+ font-size: 0.9em;
+ }
+ .wire-typography :where(pre) {
+ overflow-x: auto;
+ border: 1px solid var(--wire-color-border);
+ border-radius: 1rem;
+ background: var(--wire-color-surface-raised);
+ padding: 1rem;
+ }
+ .wire-typography :where(img) { border-radius: 1rem; }
+ .wire-typography :where(hr) { border-color: var(--wire-color-border); margin: 2rem 0; }
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/WysiwygEditor.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/WysiwygEditor.wrn
new file mode 100644
index 00000000..dfb91935
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/WysiwygEditor.wrn
@@ -0,0 +1,23 @@
+component WysiwygEditor {
+ props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ size = "default"
+ color = "primary"
+ title = "Wysiwyg Editor"
+ description = ""
+ items = []
+ variant = "default"
+ class = ""
+ }
+ view {
+
+ {#if title}{title}{/if}
+ {#if description}{description}
{/if}
+ {#if items}{#each items as item}{item.label}{/each}
{/if}
+
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/alert.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/alert.wrn
new file mode 100644
index 00000000..ba2e904b
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/alert.wrn
@@ -0,0 +1,142 @@
+component Alert {
+ props {
+ size = "default"
+ color = "info"
+ variant = "soft"
+ class = ""
+ radius = "md"
+ shadow = "sm"
+
+ title = "Alert"
+ description = ""
+ items = []
+ actions = []
+
+ showIcon = false
+ icon = ""
+ dismissible = false
+ dismissLabel = "Dismiss alert"
+ role = "alert"
+ live = "polite"
+
+ linkLabel = ""
+ linkHref = ""
+ actionLabel = ""
+ actionHref = ""
+ compact = false
+
+ @event dismiss = function
+ @event action = function
+ }
+
+ state visible = true
+
+ functions {
+ function dispatchAlertEvent(sourceEvent, eventName, action, root, customEvent) {
+ root = sourceEvent.currentTarget.closest("[data-wrn-alert]")
+
+ if (!root) {
+ return
+ }
+
+ customEvent = document.createEvent("CustomEvent")
+ customEvent.initCustomEvent(eventName, true, false, {
+ component: "Alert",
+ title: title,
+ color: color,
+ variant: variant,
+ action: action
+ })
+ root.dispatchEvent(customEvent)
+ }
+
+ function dismissAlert(sourceEvent) {
+ visible = false
+ dispatchAlertEvent(sourceEvent, "dismiss", null)
+ }
+
+ function selectAction(sourceEvent, action) {
+ dispatchAlertEvent(sourceEvent, "action", action)
+ }
+ }
+
+ view {
+
+ {#if showIcon}
+
+ {#if icon}
+
+ {:else if color === "success"}
+
+ {:else if color === "danger"}
+
+ {:else if color === "warning"}
+
+ {:else}
+
+ {/if}
+
+ {/if}
+
+
+ {#if title}
{title}{/if}
+ {#if description}
{description}
{/if}
+
+ {#if items.length > 0}
+
+ {#each items as item}- {item.label || item}
{/each}
+
+ {/if}
+
+ {#if actions.length > 0 || actionLabel || linkLabel}
+
+ {/if}
+
+ {#if thumbnails === "vertical"}
+
+ {#each items as item, index}
+
+ {/each}
+
+ {/if}
+
+
+
+
+
+ {#each items as item, index}
+
+ {#if item.imageSrc}
+
+ {/if}
+
+ {#if item.eyebrow}
{item.eyebrow}{/if}
+ {#if item.title || item.label}
{item.title || item.label}
{/if}
+ {#if item.description}
{item.description}
{/if}
+ {#if item.actionLabel}
+
{item.actionLabel}
+ {/if}
+
+ {/each}
+
+
+
+
+
+
+
+ {#if showCounter}
+
+ {/if}
+
+
+ {#if showPagination}
+
+ {/if}
+
+ {#if thumbnails === "horizontal"}
+
+ {#each items as item, index}
+
+ {/each}
+
+ {/if}
+
+
+
{label}{#if showValue}{value}%{/if}
+
+
+ {#if "Skeleton" === "Skeleton"}{#each Array(lines).fill(0) as line}{/each}{:else}{/if}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/spinner.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/spinner.wrn
new file mode 100644
index 00000000..bd607734
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/spinner.wrn
@@ -0,0 +1,14 @@
+component Spinner {
+ props {
+ color = "primary"
+ label = "Loading"
+ size = "md"
+ lines = 3
+ class = ""
+ }
+ view {
+
+ {#if "Spinner" === "Skeleton"}{#each Array(lines).fill(0) as line}{/each}{:else}{/if}
+
+ }
+}
diff --git a/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/table.wrn b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/table.wrn
new file mode 100644
index 00000000..1f5dc29f
--- /dev/null
+++ b/.wrnexus-backups/ui-final-3-fix-v2-2026-07-30T13-05-46-108Z/table.wrn
@@ -0,0 +1,17 @@
+component Table {
+ props {
+ @event sort = function
+ @event select = function
+ @event rowClick = function
+ size = "default"
+ color = "primary"
+ caption = "Table"
+ columns = []
+ rows = []
+ striped = true
+ class = ""
+ }
+ view {
+ {caption}{#each columns as column}| {column.label} | {/each}
{#each rows as row}{#each columns as column}| {row[column.key]} | {/each}
{/each}