docs: update portal for WRNexusJS 0.2.62

This commit is contained in:
2026-07-19 20:30:19 +05:30
parent b79f4364f9
commit 5c665ed9d2
77 changed files with 850 additions and 580 deletions
+212 -42
View File
@@ -1,4 +1,4 @@
# WRNexusJS documentation 0.2.61
# WRNexusJS documentation 0.2.62
Status: Private Developer Preview. This site documents 26 release-aligned packages.
@@ -281,7 +281,7 @@ wrnexus eject <component> # copy a Wire UI component's .wrn into app/compone
# UI component catalog
The installed @wrnexus/ui release contains 891 documented components. Every mount name, prop type, required/default status, slot, and event is included below and in llms-full.txt.
The installed @wrnexus/ui release contains 901 documented components. Every mount name, prop type, required/default status, slot, and event is included below and in llms-full.txt.
### AcceptAllCookiesButton
Mount: data-component="AcceptAllCookiesButton"
@@ -895,7 +895,7 @@ Events: none
### Breadcrumbs
Mount: data-component="Breadcrumbs"
Category: core
Props: class: string = "", homeLabel: string = "Home", homeHref: string = "/", current: string = "Current page"
Props: class: string = "", items: string = [], centered: boolean = false, compact: boolean = false, showHome: boolean = true, homeLabel: string = "Home", homeHref: string = "/"
Slots: none
Events: none
@@ -1571,6 +1571,13 @@ Props: eyebrow: string = "", title: string = "", description: string = "", align
Slots: default
Events: none
### ContactSalesBanner
Mount: data-component="ContactSalesBanner"
Category: core
Props: class: string = "", eyebrow: string = "Enterprise identity", title: string = "Ready to secure your next application?", description: string = "", primaryLabel: string = "Contact sales", primaryHref: string = "/contact", secondaryLabel: string = "Start free", secondaryHref: string = "/sign-up", iconClass: string = "icon-[lucide--messages-square]", centered: boolean = false, compact: boolean = false, points: string = [], trustPoints: string = []
Slots: none
Events: none
### ContactSalesButton
Mount: data-component="ContactSalesButton"
Category: actions
@@ -1648,6 +1655,13 @@ Props: label: string = "CookieCategory", name: string = "", value: string = "",
Slots: default
Events: none
### CookieConsent
Mount: data-component="CookieConsent"
Category: core
Props: class: string = ""
Slots: none
Events: click, change
### CookieDetailsTable
Mount: data-component="CookieDetailsTable"
Category: data
@@ -2012,6 +2026,13 @@ Props: eyebrow: string = "", title: string = "", description: string = "", href:
Slots: default
Events: none
### DevelopersMegaMenu
Mount: data-component="DevelopersMegaMenu"
Category: core
Props: class: string = ""
Slots: none
Events: none
### DevelopersMenu
Mount: data-component="DevelopersMenu"
Category: overlays
@@ -2211,7 +2232,7 @@ Events: none
### EmptyState
Mount: data-component="EmptyState"
Category: feedback
Props: class: string = "", icon: string = "", title: string = "Nothing here yet", description: string = "", actionLabel: string = "", actionHref: string = "#"
Props: class: string = "", eyebrow: string = "", title: string = "Nothing found", description: string = "", iconClass: string = "icon-[lucide--inbox]", primaryLabel: string = "", primaryHref: string = "", secondaryLabel: string = "", secondaryHref: string = "", compact: boolean = false, centered: boolean = true, suggestions: string = []
Slots: none
Events: none
@@ -2309,9 +2330,9 @@ Events: none
### ErrorState
Mount: data-component="ErrorState"
Category: feedback
Props: class: string = "", code: string = "500", title: string = "Something went wrong", description: string = "Please try again.", actionLabel: string = "Try again", actionHref: string = "/"
Props: class: string = "", type: string = "error", eyebrow: string = "", title: string = "Something went wrong", description: string = "", errorCode: string = "", iconClass: string = "", primaryLabel: string = "", primaryHref: string = "", secondaryLabel: string = "", secondaryHref: string = "", retryLabel: string = "", retryAction: string = "", centered: boolean = true, compact: boolean = false, details: string = []
Slots: none
Events: none
Events: click
### ErrorSupportLink
Mount: data-component="ErrorSupportLink"
@@ -3562,8 +3583,8 @@ Events: none
### LogoCloud
Mount: data-component="LogoCloud"
Category: core
Props: class: string = "", title: string = "Trusted by modern teams"
Slots: default
Props: class: string = "", eyebrow: string = "", title: string = "Trusted by teams building modern products", description: string = "", logos: string = [], centered: boolean = true, compact: boolean = false, variant: string = "strip", grayscale: boolean = true, showNames: boolean = false, maxItems: number = 8
Slots: none
Events: none
### LogoUpload
@@ -3926,9 +3947,9 @@ Events: none
### NewsletterForm
Mount: data-component="NewsletterForm"
Category: content
Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
Slots: default
Events: none
Props: class: string = "", eyebrow: string = "", title: string = "Stay up to date", description: string = "", placeholder: string = "Enter your email", buttonLabel: string = "Subscribe", action: string = "/newsletter/subscribe", method: string = "post", emailName: string = "email", privacyLabel: string = "", privacyHref: string = "/privacy", successMessage: string = "You are subscribed.", errorMessage: string = "Something went wrong. Please try again.", iconClass: string = "icon-[lucide--mail]", centered: boolean = false, compact: boolean = false, showIcon: boolean = true, showPrivacy: boolean = true, fullWidth: boolean = false
Slots: none
Events: submit, input
### NoResultsState
Mount: data-component="NoResultsState"
@@ -4077,6 +4098,13 @@ Props: label: string = "Page", title: string = "", description: string = "", val
Slots: default
Events: none
### PageHeader
Mount: data-component="PageHeader"
Category: core
Props: class: string = "", eyebrow: string = "", title: string = "", description: string = "", primaryLabel: string = "", primaryHref: string = "", secondaryLabel: string = "", secondaryHref: string = "", icon: string = "sparkles", centered: boolean = false, compact: boolean = false, showBreadcrumbs: boolean = false, breadcrumbParent: string = "", breadcrumbParentHref: string = "", breadcrumbCurrent: string = "", highlights: string = []
Slots: none
Events: none
### PageHeading
Mount: data-component="PageHeading"
Category: core
@@ -4101,7 +4129,7 @@ Events: none
### Pagination
Mount: data-component="Pagination"
Category: core
Props: class: string = "", page: number = 1, totalPages: number = 1, previousHref: string = "#", nextHref: string = "#"
Props: class: string = "", currentPage: number = 1, totalPages: number = 1, previousHref: string = "", nextHref: string = "", pages: string = [], showNumbers: boolean = true, showSummary: boolean = true, totalItems: number = 0, pageSize: number = 10, compact: boolean = false, centered: boolean = false
Slots: none
Events: none
@@ -4546,6 +4574,13 @@ Props: eyebrow: string = "", title: string = "", description: string = "", href:
Slots: default
Events: none
### ProductMegaMenu
Mount: data-component="ProductMegaMenu"
Category: core
Props: class: string = ""
Slots: none
Events: none
### ProductMiniCard
Mount: data-component="ProductMiniCard"
Category: content
@@ -4675,15 +4710,15 @@ Events: none
### PublicFooter
Mount: data-component="PublicFooter"
Category: core
Props: class: string = "", brand: string = "WRNexusJS", description: string = "SSR-first, Bun-native full-stack framework.", copyright: string = "© 2026 WorkRoot Workspace"
Slots: default
Events: none
Props: class: string = ""
Slots: none
Events: submit
### PublicHeader
Mount: data-component="PublicHeader"
Category: layout
Props: class: string = "", brand: string = "WRNexusJS", homeHref: string = "/", signInHref: string = "/signin", ctaHref: string = "/start", ctaLabel: string = "Get started"
Slots: default, mobile
Props: class: string = ""
Slots: none
Events: click
### PublicHeaderLogo
@@ -4693,6 +4728,13 @@ Props: eyebrow: string = "", title: string = "", description: string = "", href:
Slots: default
Events: none
### PublicMobileNavigation
Mount: data-component="PublicMobileNavigation"
Category: core
Props: class: string = ""
Slots: none
Events: click
### PublicPageShell
Mount: data-component="PublicPageShell"
Category: layout
@@ -4700,6 +4742,13 @@ Props: eyebrow: string = "", title: string = "", description: string = "", align
Slots: default
Events: none
### PublicSearch
Mount: data-component="PublicSearch"
Category: core
Props: class: string = "", query: string = "", placeholder: string = "Search...", label: string = "Search", action: string = "", method: string = "get", name: string = "q", buttonLabel: string = "", clearLabel: string = "Clear search", size: string = "default", centered: boolean = false, fullWidth: boolean = false, showShortcut: boolean = false, shortcutLabel: string = "⌘ K", suggestions: string = []
Slots: none
Events: input, focus, blur, click
### PublishDateTimePicker
Mount: data-component="PublishDateTimePicker"
Category: forms
@@ -4997,8 +5046,8 @@ Events: none
### ResourcesMegaMenu
Mount: data-component="ResourcesMegaMenu"
Category: overlays
Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
Slots: default
Props: class: string = ""
Slots: none
Events: none
### ResourceTypeBadge
@@ -5540,6 +5589,13 @@ Props: label: string = "SmsSegment", title: string = "", description: string = "
Slots: default
Events: none
### SocialShare
Mount: data-component="SocialShare"
Category: core
Props: class: string = "", title: string = "Share this page", description: string = "", url: string = "", shareText: string = "", centered: boolean = false, compact: boolean = false, showTitle: boolean = true, showCopy: boolean = true, networks: string = []
Slots: none
Events: click
### SolutionHero
Mount: data-component="SolutionHero"
Category: layout
@@ -5564,8 +5620,8 @@ Events: none
### SolutionsMegaMenu
Mount: data-component="SolutionsMegaMenu"
Category: overlays
Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
Slots: default
Props: class: string = ""
Slots: none
Events: none
### SortableTable
@@ -5659,6 +5715,13 @@ Props: class: string = "", status: string = "operational"
Slots: none
Events: none
### StatusBanner
Mount: data-component="StatusBanner"
Category: core
Props: class: string = "", type: string = "info", title: string = "", description: string = "", actionLabel: string = "", actionHref: string = "", dismissible: boolean = true, compact: boolean = false, details: string = []
Slots: none
Events: click
### StatusPageShell
Mount: data-component="StatusPageShell"
Category: layout
@@ -6072,6 +6135,13 @@ Props: label: string = "Action", href: string = "", type: string = "button", var
Slots: default
Events: none
### ToastHost
Mount: data-component="ToastHost"
Category: core
Props: class: string = ""
Slots: none
Events: click
### ToastIcon
Mount: data-component="ToastIcon"
Category: content
@@ -6522,7 +6592,7 @@ Events: none
# UI component catalog
The installed @wrnexus/ui release contains 891 documented components. Every mount name, prop type, required/default status, slot, and event is included below and in llms-full.txt.
The installed @wrnexus/ui release contains 901 documented components. Every mount name, prop type, required/default status, slot, and event is included below and in llms-full.txt.
### AcceptAllCookiesButton
Mount: data-component="AcceptAllCookiesButton"
@@ -7136,7 +7206,7 @@ Events: none
### Breadcrumbs
Mount: data-component="Breadcrumbs"
Category: core
Props: class: string = "", homeLabel: string = "Home", homeHref: string = "/", current: string = "Current page"
Props: class: string = "", items: string = [], centered: boolean = false, compact: boolean = false, showHome: boolean = true, homeLabel: string = "Home", homeHref: string = "/"
Slots: none
Events: none
@@ -7812,6 +7882,13 @@ Props: eyebrow: string = "", title: string = "", description: string = "", align
Slots: default
Events: none
### ContactSalesBanner
Mount: data-component="ContactSalesBanner"
Category: core
Props: class: string = "", eyebrow: string = "Enterprise identity", title: string = "Ready to secure your next application?", description: string = "", primaryLabel: string = "Contact sales", primaryHref: string = "/contact", secondaryLabel: string = "Start free", secondaryHref: string = "/sign-up", iconClass: string = "icon-[lucide--messages-square]", centered: boolean = false, compact: boolean = false, points: string = [], trustPoints: string = []
Slots: none
Events: none
### ContactSalesButton
Mount: data-component="ContactSalesButton"
Category: actions
@@ -7889,6 +7966,13 @@ Props: label: string = "CookieCategory", name: string = "", value: string = "",
Slots: default
Events: none
### CookieConsent
Mount: data-component="CookieConsent"
Category: core
Props: class: string = ""
Slots: none
Events: click, change
### CookieDetailsTable
Mount: data-component="CookieDetailsTable"
Category: data
@@ -8253,6 +8337,13 @@ Props: eyebrow: string = "", title: string = "", description: string = "", href:
Slots: default
Events: none
### DevelopersMegaMenu
Mount: data-component="DevelopersMegaMenu"
Category: core
Props: class: string = ""
Slots: none
Events: none
### DevelopersMenu
Mount: data-component="DevelopersMenu"
Category: overlays
@@ -8452,7 +8543,7 @@ Events: none
### EmptyState
Mount: data-component="EmptyState"
Category: feedback
Props: class: string = "", icon: string = "", title: string = "Nothing here yet", description: string = "", actionLabel: string = "", actionHref: string = "#"
Props: class: string = "", eyebrow: string = "", title: string = "Nothing found", description: string = "", iconClass: string = "icon-[lucide--inbox]", primaryLabel: string = "", primaryHref: string = "", secondaryLabel: string = "", secondaryHref: string = "", compact: boolean = false, centered: boolean = true, suggestions: string = []
Slots: none
Events: none
@@ -8550,9 +8641,9 @@ Events: none
### ErrorState
Mount: data-component="ErrorState"
Category: feedback
Props: class: string = "", code: string = "500", title: string = "Something went wrong", description: string = "Please try again.", actionLabel: string = "Try again", actionHref: string = "/"
Props: class: string = "", type: string = "error", eyebrow: string = "", title: string = "Something went wrong", description: string = "", errorCode: string = "", iconClass: string = "", primaryLabel: string = "", primaryHref: string = "", secondaryLabel: string = "", secondaryHref: string = "", retryLabel: string = "", retryAction: string = "", centered: boolean = true, compact: boolean = false, details: string = []
Slots: none
Events: none
Events: click
### ErrorSupportLink
Mount: data-component="ErrorSupportLink"
@@ -9803,8 +9894,8 @@ Events: none
### LogoCloud
Mount: data-component="LogoCloud"
Category: core
Props: class: string = "", title: string = "Trusted by modern teams"
Slots: default
Props: class: string = "", eyebrow: string = "", title: string = "Trusted by teams building modern products", description: string = "", logos: string = [], centered: boolean = true, compact: boolean = false, variant: string = "strip", grayscale: boolean = true, showNames: boolean = false, maxItems: number = 8
Slots: none
Events: none
### LogoUpload
@@ -10167,9 +10258,9 @@ Events: none
### NewsletterForm
Mount: data-component="NewsletterForm"
Category: content
Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
Slots: default
Events: none
Props: class: string = "", eyebrow: string = "", title: string = "Stay up to date", description: string = "", placeholder: string = "Enter your email", buttonLabel: string = "Subscribe", action: string = "/newsletter/subscribe", method: string = "post", emailName: string = "email", privacyLabel: string = "", privacyHref: string = "/privacy", successMessage: string = "You are subscribed.", errorMessage: string = "Something went wrong. Please try again.", iconClass: string = "icon-[lucide--mail]", centered: boolean = false, compact: boolean = false, showIcon: boolean = true, showPrivacy: boolean = true, fullWidth: boolean = false
Slots: none
Events: submit, input
### NoResultsState
Mount: data-component="NoResultsState"
@@ -10318,6 +10409,13 @@ Props: label: string = "Page", title: string = "", description: string = "", val
Slots: default
Events: none
### PageHeader
Mount: data-component="PageHeader"
Category: core
Props: class: string = "", eyebrow: string = "", title: string = "", description: string = "", primaryLabel: string = "", primaryHref: string = "", secondaryLabel: string = "", secondaryHref: string = "", icon: string = "sparkles", centered: boolean = false, compact: boolean = false, showBreadcrumbs: boolean = false, breadcrumbParent: string = "", breadcrumbParentHref: string = "", breadcrumbCurrent: string = "", highlights: string = []
Slots: none
Events: none
### PageHeading
Mount: data-component="PageHeading"
Category: core
@@ -10342,7 +10440,7 @@ Events: none
### Pagination
Mount: data-component="Pagination"
Category: core
Props: class: string = "", page: number = 1, totalPages: number = 1, previousHref: string = "#", nextHref: string = "#"
Props: class: string = "", currentPage: number = 1, totalPages: number = 1, previousHref: string = "", nextHref: string = "", pages: string = [], showNumbers: boolean = true, showSummary: boolean = true, totalItems: number = 0, pageSize: number = 10, compact: boolean = false, centered: boolean = false
Slots: none
Events: none
@@ -10787,6 +10885,13 @@ Props: eyebrow: string = "", title: string = "", description: string = "", href:
Slots: default
Events: none
### ProductMegaMenu
Mount: data-component="ProductMegaMenu"
Category: core
Props: class: string = ""
Slots: none
Events: none
### ProductMiniCard
Mount: data-component="ProductMiniCard"
Category: content
@@ -10916,15 +11021,15 @@ Events: none
### PublicFooter
Mount: data-component="PublicFooter"
Category: core
Props: class: string = "", brand: string = "WRNexusJS", description: string = "SSR-first, Bun-native full-stack framework.", copyright: string = "© 2026 WorkRoot Workspace"
Slots: default
Events: none
Props: class: string = ""
Slots: none
Events: submit
### PublicHeader
Mount: data-component="PublicHeader"
Category: layout
Props: class: string = "", brand: string = "WRNexusJS", homeHref: string = "/", signInHref: string = "/signin", ctaHref: string = "/start", ctaLabel: string = "Get started"
Slots: default, mobile
Props: class: string = ""
Slots: none
Events: click
### PublicHeaderLogo
@@ -10934,6 +11039,13 @@ Props: eyebrow: string = "", title: string = "", description: string = "", href:
Slots: default
Events: none
### PublicMobileNavigation
Mount: data-component="PublicMobileNavigation"
Category: core
Props: class: string = ""
Slots: none
Events: click
### PublicPageShell
Mount: data-component="PublicPageShell"
Category: layout
@@ -10941,6 +11053,13 @@ Props: eyebrow: string = "", title: string = "", description: string = "", align
Slots: default
Events: none
### PublicSearch
Mount: data-component="PublicSearch"
Category: core
Props: class: string = "", query: string = "", placeholder: string = "Search...", label: string = "Search", action: string = "", method: string = "get", name: string = "q", buttonLabel: string = "", clearLabel: string = "Clear search", size: string = "default", centered: boolean = false, fullWidth: boolean = false, showShortcut: boolean = false, shortcutLabel: string = "⌘ K", suggestions: string = []
Slots: none
Events: input, focus, blur, click
### PublishDateTimePicker
Mount: data-component="PublishDateTimePicker"
Category: forms
@@ -11238,8 +11357,8 @@ Events: none
### ResourcesMegaMenu
Mount: data-component="ResourcesMegaMenu"
Category: overlays
Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
Slots: default
Props: class: string = ""
Slots: none
Events: none
### ResourceTypeBadge
@@ -11781,6 +11900,13 @@ Props: label: string = "SmsSegment", title: string = "", description: string = "
Slots: default
Events: none
### SocialShare
Mount: data-component="SocialShare"
Category: core
Props: class: string = "", title: string = "Share this page", description: string = "", url: string = "", shareText: string = "", centered: boolean = false, compact: boolean = false, showTitle: boolean = true, showCopy: boolean = true, networks: string = []
Slots: none
Events: click
### SolutionHero
Mount: data-component="SolutionHero"
Category: layout
@@ -11805,8 +11931,8 @@ Events: none
### SolutionsMegaMenu
Mount: data-component="SolutionsMegaMenu"
Category: overlays
Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
Slots: default
Props: class: string = ""
Slots: none
Events: none
### SortableTable
@@ -11900,6 +12026,13 @@ Props: class: string = "", status: string = "operational"
Slots: none
Events: none
### StatusBanner
Mount: data-component="StatusBanner"
Category: core
Props: class: string = "", type: string = "info", title: string = "", description: string = "", actionLabel: string = "", actionHref: string = "", dismissible: boolean = true, compact: boolean = false, details: string = []
Slots: none
Events: click
### StatusPageShell
Mount: data-component="StatusPageShell"
Category: layout
@@ -12313,6 +12446,13 @@ Props: label: string = "Action", href: string = "", type: string = "button", var
Slots: default
Events: none
### ToastHost
Mount: data-component="ToastHost"
Category: core
Props: class: string = ""
Slots: none
Events: click
### ToastIcon
Mount: data-component="ToastIcon"
Category: content
@@ -12763,7 +12903,7 @@ Events: none
# Installed package documentation
The following README files and declarations come from the installed private 0.2.61 release.
The following README files and declarations come from the installed private 0.2.62 release.
## @wrnexus/ai
@@ -19879,6 +20019,36 @@ entry and interaction motion. Override `--wire-motion-fast`,
`--wire-ease-emphasized` to tune it. Hover lift is limited to precise pointing
devices and `prefers-reduced-motion` is honored automatically.
### Using the selected theme in application UI
The active theme and palette are not limited to `@wrnexus/ui` components. The
framework exposes the resolved values as semantic CSS custom properties, so
pages and custom `.wrn` components can use the same contract:
```css
.account-card {
background: var(--wire-color-surface);
color: var(--wire-color-text);
border: 1px solid var(--wire-color-border);
}
.account-card__action {
background: var(--wire-color-primary);
color: var(--wire-color-primary-contrast);
}
```
Stable no-spacing helper classes are also available: `wire-bg-page`,
`wire-bg-surface`, `wire-bg-surface-2`, `wire-bg-primary`, `wire-bg-secondary`,
`wire-text`, `wire-text-muted`, `wire-text-primary`, `wire-text-success`,
`wire-text-warning`, `wire-text-danger`, and `wire-border`.
Tailwind-authored custom markup can continue using the palette families already
used by packaged components. `indigo-*` and `violet-*` resolve to primary,
`blue-*` to info, `emerald-*`/`green-*` to success, `amber-*` to warning, and
`red-*`/`rose-*` to danger. These aliases live at `:root`, so they work outside
a `[data-component]` boundary too.
## Usage
### Auto-discovery