From a3e21163c1efff2893d72e8b2bc03ba6a787533c Mon Sep 17 00:00:00 2001 From: Ajay Ghanwat Date: Sun, 19 Jul 2026 20:23:20 +0530 Subject: [PATCH] feat(ui): expose app theme contract and public components --- .publish/ai/package.json | 2 +- .publish/authz/package.json | 2 +- .publish/cli/package.json | 22 +- .publish/compiler/package.json | 2 +- .publish/core/package.json | 2 +- .publish/csr/package.json | 4 +- .publish/db/package.json | 2 +- .publish/dev-server/package.json | 26 +- .publish/encryption/package.json | 2 +- .publish/helpers/package.json | 4 +- .publish/i18n/package.json | 4 +- .publish/jwt/package.json | 2 +- .publish/mobile/package.json | 4 +- .publish/native/package.json | 2 +- .publish/oauth/package.json | 2 +- .publish/pubsub/package.json | 2 +- .publish/queue/package.json | 2 +- .publish/reactive/package.json | 2 +- .publish/router/package.json | 6 +- .publish/ssr/package.json | 4 +- .publish/styles/package.json | 4 +- .publish/test/package.json | 2 +- .publish/tracking/package.json | 2 +- .publish/ui/COMPONENTS.md | 130 ++- .publish/ui/README.md | 30 + .publish/ui/component-reference.json | 976 +++++++++++++++--- .publish/ui/components/Breadcrumbs.wrn | 112 +- .publish/ui/components/ContactSalesBanner.wrn | 195 ++++ .publish/ui/components/CookieConsent.wrn | 372 +++++++ .publish/ui/components/DevelopersMegaMenu.wrn | 421 ++++++++ .publish/ui/components/EmptyState.wrn | 176 +++- .publish/ui/components/ErrorState.wrn | 202 +++- .publish/ui/components/LogoCloud.wrn | 155 ++- .publish/ui/components/NewsletterForm.wrn | 223 +++- .publish/ui/components/PageHeader.wrn | 172 +++ .publish/ui/components/Pagination.wrn | 195 +++- .publish/ui/components/ProductMegaMenu.wrn | 332 ++++++ .publish/ui/components/PublicFooter.wrn | 615 ++++++++++- .publish/ui/components/PublicHeader.wrn | 294 +++++- .../ui/components/PublicMobileNavigation.wrn | 589 +++++++++++ .publish/ui/components/PublicSearch.wrn | 125 +++ .publish/ui/components/ResourcesMegaMenu.wrn | 371 ++++++- .publish/ui/components/SocialShare.wrn | 143 +++ .publish/ui/components/SolutionsMegaMenu.wrn | 374 ++++++- .publish/ui/components/StatusBanner.wrn | 122 +++ .publish/ui/components/ToastHost.wrn | 212 ++++ .publish/ui/package.json | 4 +- .publish/ui/ui.css | 48 +- .publish/uploader/package.json | 4 +- .publish/validation/package.json | 2 +- packages/ai/package.json | 2 +- packages/authz/package.json | 2 +- packages/cli/package.json | 2 +- packages/cli/src/update.ts | 9 + packages/compiler/package.json | 2 +- packages/core/package.json | 2 +- packages/csr/package.json | 2 +- packages/db/package.json | 2 +- packages/dev-server/package.json | 2 +- packages/encryption/package.json | 2 +- packages/helpers/package.json | 2 +- packages/i18n/package.json | 2 +- packages/jwt/package.json | 2 +- packages/mobile/package.json | 2 +- packages/native/package.json | 2 +- packages/oauth/package.json | 2 +- packages/pubsub/package.json | 2 +- packages/queue/package.json | 2 +- packages/reactive/package.json | 2 +- packages/router/package.json | 2 +- packages/ssr/package.json | 2 +- packages/styles/package.json | 2 +- packages/test/package.json | 2 +- packages/tracking/package.json | 2 +- packages/ui/COMPONENTS.md | 130 ++- packages/ui/README.md | 30 + packages/ui/component-reference.json | 976 +++++++++++++++--- packages/ui/components/Breadcrumbs.wrn | 112 +- packages/ui/components/ContactSalesBanner.wrn | 195 ++++ packages/ui/components/CookieConsent.wrn | 372 +++++++ packages/ui/components/DevelopersMegaMenu.wrn | 421 ++++++++ packages/ui/components/EmptyState.wrn | 176 +++- packages/ui/components/ErrorState.wrn | 202 +++- packages/ui/components/LogoCloud.wrn | 155 ++- packages/ui/components/NewsletterForm.wrn | 223 +++- packages/ui/components/PageHeader.wrn | 172 +++ packages/ui/components/Pagination.wrn | 195 +++- packages/ui/components/ProductMegaMenu.wrn | 332 ++++++ packages/ui/components/PublicFooter.wrn | 615 ++++++++++- packages/ui/components/PublicHeader.wrn | 294 +++++- .../ui/components/PublicMobileNavigation.wrn | 589 +++++++++++ packages/ui/components/PublicSearch.wrn | 125 +++ packages/ui/components/ResourcesMegaMenu.wrn | 371 ++++++- packages/ui/components/SocialShare.wrn | 143 +++ packages/ui/components/SolutionsMegaMenu.wrn | 374 ++++++- packages/ui/components/StatusBanner.wrn | 122 +++ packages/ui/components/ToastHost.wrn | 212 ++++ packages/ui/package.json | 2 +- packages/ui/test/ui.test.ts | 3 + packages/ui/ui.css | 48 +- packages/uploader/package.json | 2 +- packages/validation/package.json | 2 +- 102 files changed, 12748 insertions(+), 600 deletions(-) create mode 100644 .publish/ui/components/ContactSalesBanner.wrn create mode 100644 .publish/ui/components/CookieConsent.wrn create mode 100644 .publish/ui/components/DevelopersMegaMenu.wrn create mode 100644 .publish/ui/components/PageHeader.wrn create mode 100644 .publish/ui/components/ProductMegaMenu.wrn create mode 100644 .publish/ui/components/PublicMobileNavigation.wrn create mode 100644 .publish/ui/components/PublicSearch.wrn create mode 100644 .publish/ui/components/SocialShare.wrn create mode 100644 .publish/ui/components/StatusBanner.wrn create mode 100644 .publish/ui/components/ToastHost.wrn create mode 100644 packages/ui/components/ContactSalesBanner.wrn create mode 100644 packages/ui/components/CookieConsent.wrn create mode 100644 packages/ui/components/DevelopersMegaMenu.wrn create mode 100644 packages/ui/components/PageHeader.wrn create mode 100644 packages/ui/components/ProductMegaMenu.wrn create mode 100644 packages/ui/components/PublicMobileNavigation.wrn create mode 100644 packages/ui/components/PublicSearch.wrn create mode 100644 packages/ui/components/SocialShare.wrn create mode 100644 packages/ui/components/StatusBanner.wrn create mode 100644 packages/ui/components/ToastHost.wrn diff --git a/.publish/ai/package.json b/.publish/ai/package.json index 4030288c..42d30efa 100644 --- a/.publish/ai/package.json +++ b/.publish/ai/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ai", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "Zero-dependency Claude (Anthropic) client for WrNexus apps.", "license": "MIT", diff --git a/.publish/authz/package.json b/.publish/authz/package.json index 25f0ed47..5b90005b 100644 --- a/.publish/authz/package.json +++ b/.publish/authz/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/authz", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/authz — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/cli/package.json b/.publish/cli/package.json index e08be189..a504c868 100644 --- a/.publish/cli/package.json +++ b/.publish/cli/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/cli", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/cli — part of the WrNexus framework.", "license": "MIT", @@ -28,16 +28,16 @@ "wrnexus": "./dist/index.js" }, "dependencies": { - "@wrnexus/core": "^0.2.61", - "@wrnexus/router": "^0.2.61", - "@wrnexus/csr": "^0.2.61", - "@wrnexus/compiler": "^0.2.61", - "@wrnexus/styles": "^0.2.61", - "@wrnexus/dev-server": "^0.2.61", - "@wrnexus/ui": "^0.2.61", - "@wrnexus/validation": "^0.2.61", - "@wrnexus/i18n": "^0.2.61", - "@wrnexus/db": "^0.2.61" + "@wrnexus/core": "^0.2.62", + "@wrnexus/router": "^0.2.62", + "@wrnexus/csr": "^0.2.62", + "@wrnexus/compiler": "^0.2.62", + "@wrnexus/styles": "^0.2.62", + "@wrnexus/dev-server": "^0.2.62", + "@wrnexus/ui": "^0.2.62", + "@wrnexus/validation": "^0.2.62", + "@wrnexus/i18n": "^0.2.62", + "@wrnexus/db": "^0.2.62" }, "files": [ "dist" diff --git a/.publish/compiler/package.json b/.publish/compiler/package.json index 3552f68a..81614ae2 100644 --- a/.publish/compiler/package.json +++ b/.publish/compiler/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/compiler", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/compiler — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/core/package.json b/.publish/core/package.json index 7d1c485a..f1dec1da 100644 --- a/.publish/core/package.json +++ b/.publish/core/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/core", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/core — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/csr/package.json b/.publish/csr/package.json index 49c04523..2bc980ba 100644 --- a/.publish/csr/package.json +++ b/.publish/csr/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/csr", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/csr — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/core": "^0.2.61" + "@wrnexus/core": "^0.2.62" }, "files": [ "dist" diff --git a/.publish/db/package.json b/.publish/db/package.json index c44ccea8..b1b44e16 100644 --- a/.publish/db/package.json +++ b/.publish/db/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/db", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/db — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/dev-server/package.json b/.publish/dev-server/package.json index ffdd5c8e..9c5d9360 100644 --- a/.publish/dev-server/package.json +++ b/.publish/dev-server/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/dev-server", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/dev-server — part of the WrNexus framework.", "license": "MIT", @@ -25,18 +25,18 @@ } }, "dependencies": { - "@wrnexus/core": "^0.2.61", - "@wrnexus/router": "^0.2.61", - "@wrnexus/ssr": "^0.2.61", - "@wrnexus/csr": "^0.2.61", - "@wrnexus/compiler": "^0.2.61", - "@wrnexus/styles": "^0.2.61", - "@wrnexus/ui": "^0.2.61", - "@wrnexus/validation": "^0.2.61", - "@wrnexus/i18n": "^0.2.61", - "@wrnexus/db": "^0.2.61", - "@wrnexus/pubsub": "^0.2.61", - "@wrnexus/uploader": "^0.2.61" + "@wrnexus/core": "^0.2.62", + "@wrnexus/router": "^0.2.62", + "@wrnexus/ssr": "^0.2.62", + "@wrnexus/csr": "^0.2.62", + "@wrnexus/compiler": "^0.2.62", + "@wrnexus/styles": "^0.2.62", + "@wrnexus/ui": "^0.2.62", + "@wrnexus/validation": "^0.2.62", + "@wrnexus/i18n": "^0.2.62", + "@wrnexus/db": "^0.2.62", + "@wrnexus/pubsub": "^0.2.62", + "@wrnexus/uploader": "^0.2.62" }, "files": [ "dist" diff --git a/.publish/encryption/package.json b/.publish/encryption/package.json index 76a70733..11ef2509 100644 --- a/.publish/encryption/package.json +++ b/.publish/encryption/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/encryption", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/encryption — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/helpers/package.json b/.publish/helpers/package.json index f0e4bdd5..94e62ed0 100644 --- a/.publish/helpers/package.json +++ b/.publish/helpers/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/helpers", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "Safe convenience helpers for WrNexus request contexts and common application flows.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/core": "^0.2.61" + "@wrnexus/core": "^0.2.62" }, "files": [ "dist" diff --git a/.publish/i18n/package.json b/.publish/i18n/package.json index ca79185f..c77f3f51 100644 --- a/.publish/i18n/package.json +++ b/.publish/i18n/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/i18n", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/i18n — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/core": "^0.2.61" + "@wrnexus/core": "^0.2.62" }, "files": [ "dist" diff --git a/.publish/jwt/package.json b/.publish/jwt/package.json index c63886a9..10ee3351 100644 --- a/.publish/jwt/package.json +++ b/.publish/jwt/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/jwt", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/jwt — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/mobile/package.json b/.publish/mobile/package.json index 3f359d64..562d6834 100644 --- a/.publish/mobile/package.json +++ b/.publish/mobile/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/mobile", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/mobile — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/native": "^0.2.61" + "@wrnexus/native": "^0.2.62" }, "files": [ "dist" diff --git a/.publish/native/package.json b/.publish/native/package.json index c17faabb..4f0f71f5 100644 --- a/.publish/native/package.json +++ b/.publish/native/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/native", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/native — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/oauth/package.json b/.publish/oauth/package.json index 8f32f596..44a8b4f8 100644 --- a/.publish/oauth/package.json +++ b/.publish/oauth/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/oauth", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/oauth — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/pubsub/package.json b/.publish/pubsub/package.json index 816ef154..ffcc0968 100644 --- a/.publish/pubsub/package.json +++ b/.publish/pubsub/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/pubsub", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/pubsub — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/queue/package.json b/.publish/queue/package.json index c0dd132b..f1fab8d2 100644 --- a/.publish/queue/package.json +++ b/.publish/queue/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/queue", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/queue — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/reactive/package.json b/.publish/reactive/package.json index 9db7b658..a7045bf6 100644 --- a/.publish/reactive/package.json +++ b/.publish/reactive/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/reactive", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/reactive — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/router/package.json b/.publish/router/package.json index 5b85c7ff..1154a9c1 100644 --- a/.publish/router/package.json +++ b/.publish/router/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/router", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/router — part of the WrNexus framework.", "license": "MIT", @@ -21,8 +21,8 @@ } }, "dependencies": { - "@wrnexus/compiler": "^0.2.61", - "@wrnexus/core": "^0.2.61" + "@wrnexus/compiler": "^0.2.62", + "@wrnexus/core": "^0.2.62" }, "files": [ "dist" diff --git a/.publish/ssr/package.json b/.publish/ssr/package.json index 1fa60ddf..c6ee1a34 100644 --- a/.publish/ssr/package.json +++ b/.publish/ssr/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ssr", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/ssr — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/core": "^0.2.61" + "@wrnexus/core": "^0.2.62" }, "files": [ "dist" diff --git a/.publish/styles/package.json b/.publish/styles/package.json index 4c43811b..8cc940dd 100644 --- a/.publish/styles/package.json +++ b/.publish/styles/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/styles", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/styles — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/uploader": "^0.2.61" + "@wrnexus/uploader": "^0.2.62" }, "files": [ "dist" diff --git a/.publish/test/package.json b/.publish/test/package.json index ee9d6925..986ffc9a 100644 --- a/.publish/test/package.json +++ b/.publish/test/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/test", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/test — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/tracking/package.json b/.publish/tracking/package.json index 7b570f86..5f79e124 100644 --- a/.publish/tracking/package.json +++ b/.publish/tracking/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/tracking", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/tracking — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/ui/COMPONENTS.md b/.publish/ui/COMPONENTS.md index 26e199c0..11dda934 100644 --- a/.publish/ui/COMPONENTS.md +++ b/.publish/ui/COMPONENTS.md @@ -1,6 +1,6 @@ # WRNexus UI component reference -This reference is generated from the 891 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default. +This reference is generated from the 901 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default. ## Actions @@ -1964,9 +1964,9 @@ Reusable navigation item component. Reusable newsletter form component. - Mount: `data-component="NewsletterForm"` -- 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` ### NotFoundPage @@ -2911,7 +2911,7 @@ Reusable back to top component. Reusable breadcrumbs component. - Mount: `data-component="Breadcrumbs"` -- 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 @@ -2951,6 +2951,15 @@ Reusable combobox component. - Slots: None - Events: None +### ContactSalesBanner + +Reusable contact sales banner component. + +- Mount: `data-component="ContactSalesBanner"` +- 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 + ### Container Reusable container component. @@ -2960,6 +2969,24 @@ Reusable container component. - Slots: `default` - Events: None +### CookieConsent + +Reusable cookie consent component. + +- Mount: `data-component="CookieConsent"` +- Props: `class: string = ""` +- Slots: None +- Events: `click`, `change` + +### DevelopersMegaMenu + +Reusable developers mega menu component. + +- Mount: `data-component="DevelopersMegaMenu"` +- Props: `class: string = ""` +- Slots: None +- Events: None + ### disclosure Reusable disclosure component. @@ -3109,8 +3136,8 @@ Reusable link component. Reusable logo cloud component. - Mount: `data-component="LogoCloud"` -- 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 ### Modal @@ -3149,6 +3176,15 @@ Reusable notification dot component. - Slots: `default` - Events: None +### PageHeader + +Reusable page header component. + +- Mount: `data-component="PageHeader"` +- 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 Reusable page heading component. @@ -3172,7 +3208,7 @@ Reusable page shell component. Reusable pagination component. - Mount: `data-component="Pagination"` -- 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 @@ -3185,6 +3221,15 @@ Reusable pill component. - Slots: `default` - Events: None +### ProductMegaMenu + +Reusable product mega menu component. + +- Mount: `data-component="ProductMegaMenu"` +- Props: `class: string = ""` +- Slots: None +- Events: None + ### progress Reusable progress component. @@ -3208,9 +3253,27 @@ Reusable progress bar component. Reusable public footer component. - Mount: `data-component="PublicFooter"` -- 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` + +### PublicMobileNavigation + +Reusable public mobile navigation component. + +- Mount: `data-component="PublicMobileNavigation"` +- Props: `class: string = ""` +- Slots: None +- Events: `click` + +### PublicSearch + +Reusable public search component. + +- Mount: `data-component="PublicSearch"` +- 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` ### Radio @@ -3257,6 +3320,15 @@ Reusable select component. - Slots: `default` - Events: None +### SocialShare + +Reusable social share component. + +- Mount: `data-component="SocialShare"` +- 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` + ### spacer Reusable spacer component. @@ -3284,6 +3356,15 @@ Reusable stack component. - Slots: `default` - Events: None +### StatusBanner + +Reusable status banner component. + +- Mount: `data-component="StatusBanner"` +- 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` + ### Sticky Reusable sticky component. @@ -3356,6 +3437,15 @@ Reusable toast component. - Slots: None - Events: `click` +### ToastHost + +Reusable toast host component. + +- Mount: `data-component="ToastHost"` +- Props: `class: string = ""` +- Slots: None +- Events: `click` + ### Typography Reusable typography component. @@ -4292,7 +4382,7 @@ Reusable deprecated feature alert component. Reusable empty state component. - Mount: `data-component="EmptyState"` -- 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 @@ -4301,9 +4391,9 @@ Reusable empty state component. Reusable error state component. - Mount: `data-component="ErrorState"` -- 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` ### FeatureUnavailableState @@ -7113,8 +7203,8 @@ Reusable product page shell component. Reusable public header component. - Mount: `data-component="PublicHeader"` -- 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` ### PublicPageShell @@ -7547,8 +7637,8 @@ Reusable prompt dialog component. Reusable resources mega menu component. - Mount: `data-component="ResourcesMegaMenu"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` +- Props: `class: string = ""` +- Slots: None - Events: None ### SearchDialog @@ -7583,8 +7673,8 @@ Reusable session expired dialog component. Reusable solutions mega menu component. - Mount: `data-component="SolutionsMegaMenu"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` +- Props: `class: string = ""` +- Slots: None - Events: None ### StepUpAuthenticationDialog diff --git a/.publish/ui/README.md b/.publish/ui/README.md index cf510702..017f1837 100644 --- a/.publish/ui/README.md +++ b/.publish/ui/README.md @@ -133,6 +133,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 diff --git a/.publish/ui/component-reference.json b/.publish/ui/component-reference.json index 561a5c4f..743124b9 100644 --- a/.publish/ui/component-reference.json +++ b/.publish/ui/component-reference.json @@ -1,6 +1,6 @@ { "generatedFrom": "packages/ui/components/*.wrn", - "count": 891, + "count": 901, "components": [ { "name": "AcceptAllCookiesButton", @@ -4505,6 +4505,30 @@ "required": false, "default": "\"\"" }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "centered", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "compact", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "showHome", + "type": "boolean", + "required": false, + "default": "true" + }, { "name": "homeLabel", "type": "string", @@ -4516,12 +4540,6 @@ "type": "string", "required": false, "default": "\"/\"" - }, - { - "name": "current", - "type": "string", - "required": false, - "default": "\"Current page\"" } ], "slots": [], @@ -9616,6 +9634,95 @@ "events": [], "source": "components/ContactPageShell.wrn" }, + { + "name": "ContactSalesBanner", + "mount": "ContactSalesBanner", + "category": "core", + "purpose": "Reusable contact sales banner component.", + "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "eyebrow", + "type": "string", + "required": false, + "default": "\"Enterprise identity\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Ready to secure your next application?\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "primaryLabel", + "type": "string", + "required": false, + "default": "\"Contact sales\"" + }, + { + "name": "primaryHref", + "type": "string", + "required": false, + "default": "\"/contact\"" + }, + { + "name": "secondaryLabel", + "type": "string", + "required": false, + "default": "\"Start free\"" + }, + { + "name": "secondaryHref", + "type": "string", + "required": false, + "default": "\"/sign-up\"" + }, + { + "name": "iconClass", + "type": "string", + "required": false, + "default": "\"icon-[lucide--messages-square]\"" + }, + { + "name": "centered", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "compact", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "points", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "trustPoints", + "type": "string", + "required": false, + "default": "[]" + } + ], + "slots": [], + "events": [], + "source": "components/ContactSalesBanner.wrn" + }, { "name": "ContactSalesButton", "mount": "ContactSalesButton", @@ -10145,6 +10252,23 @@ "events": [], "source": "components/CookieCategoryToggle.wrn" }, + { + "name": "CookieConsent", + "mount": "CookieConsent", + "category": "core", + "purpose": "Reusable cookie consent component.", + "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": ["click", "change"], + "source": "components/CookieConsent.wrn" + }, { "name": "CookieDetailsTable", "mount": "CookieDetailsTable", @@ -13171,6 +13295,23 @@ "events": [], "source": "components/DeveloperSearch.wrn" }, + { + "name": "DevelopersMegaMenu", + "mount": "DevelopersMegaMenu", + "category": "core", + "purpose": "Reusable developers mega menu component.", + "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": [], + "source": "components/DevelopersMegaMenu.wrn" + }, { "name": "DevelopersMenu", "mount": "DevelopersMenu", @@ -14686,16 +14827,16 @@ "default": "\"\"" }, { - "name": "icon", + "name": "eyebrow", "type": "string", "required": false, - "default": "\"◇\"" + "default": "\"\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"Nothing here yet\"" + "default": "\"Nothing found\"" }, { "name": "description", @@ -14704,16 +14845,52 @@ "default": "\"\"" }, { - "name": "actionLabel", + "name": "iconClass", + "type": "string", + "required": false, + "default": "\"icon-[lucide--inbox]\"" + }, + { + "name": "primaryLabel", "type": "string", "required": false, "default": "\"\"" }, { - "name": "actionHref", + "name": "primaryHref", "type": "string", "required": false, - "default": "\"#\"" + "default": "\"\"" + }, + { + "name": "secondaryLabel", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "secondaryHref", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "compact", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "centered", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "suggestions", + "type": "string", + "required": false, + "default": "[]" } ], "slots": [], @@ -15404,10 +15581,16 @@ "default": "\"\"" }, { - "name": "code", + "name": "type", "type": "string", "required": false, - "default": "\"500\"" + "default": "\"error\"" + }, + { + "name": "eyebrow", + "type": "string", + "required": false, + "default": "\"\"" }, { "name": "title", @@ -15419,23 +15602,77 @@ "name": "description", "type": "string", "required": false, - "default": "\"Please try again.\"" + "default": "\"\"" }, { - "name": "actionLabel", + "name": "errorCode", "type": "string", "required": false, - "default": "\"Try again\"" + "default": "\"\"" }, { - "name": "actionHref", + "name": "iconClass", "type": "string", "required": false, - "default": "\"/\"" + "default": "\"\"" + }, + { + "name": "primaryLabel", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "primaryHref", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "secondaryLabel", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "secondaryHref", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "retryLabel", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "retryAction", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "centered", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "compact", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "details", + "type": "string", + "required": false, + "default": "[]" } ], "slots": [], - "events": [], + "events": ["click"], "source": "components/ErrorState.wrn" }, { @@ -24908,14 +25145,68 @@ "required": false, "default": "\"\"" }, + { + "name": "eyebrow", + "type": "string", + "required": false, + "default": "\"\"" + }, { "name": "title", "type": "string", "required": false, - "default": "\"Trusted by modern teams\"" + "default": "\"Trusted by teams building modern products\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "logos", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "centered", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "compact", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "variant", + "type": "string", + "required": false, + "default": "\"strip\"" + }, + { + "name": "grayscale", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "showNames", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "maxItems", + "type": "number", + "required": false, + "default": "8" } ], - "slots": ["default"], + "slots": [], "events": [], "source": "components/LogoCloud.wrn" }, @@ -27706,6 +27997,12 @@ "category": "content", "purpose": "Reusable newsletter form component.", "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + }, { "name": "eyebrow", "type": "string", @@ -27716,7 +28013,7 @@ "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Stay up to date\"" }, { "name": "description", @@ -27725,38 +28022,98 @@ "default": "\"\"" }, { - "name": "href", + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"Enter your email\"" + }, + { + "name": "buttonLabel", + "type": "string", + "required": false, + "default": "\"Subscribe\"" + }, + { + "name": "action", + "type": "string", + "required": false, + "default": "\"/newsletter/subscribe\"" + }, + { + "name": "method", + "type": "string", + "required": false, + "default": "\"post\"" + }, + { + "name": "emailName", + "type": "string", + "required": false, + "default": "\"email\"" + }, + { + "name": "privacyLabel", "type": "string", "required": false, "default": "\"\"" }, { - "name": "actionLabel", + "name": "privacyHref", "type": "string", "required": false, - "default": "\"Learn more\"" + "default": "\"/privacy\"" }, { - "name": "image", + "name": "successMessage", "type": "string", "required": false, - "default": "\"\"" + "default": "\"You are subscribed.\"" }, { - "name": "alt", + "name": "errorMessage", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Something went wrong. Please try again.\"" }, { - "name": "class", + "name": "iconClass", "type": "string", "required": false, - "default": "\"\"" + "default": "\"icon-[lucide--mail]\"" + }, + { + "name": "centered", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "compact", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "showIcon", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "showPrivacy", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "fullWidth", + "type": "boolean", + "required": false, + "default": "false" } ], - "slots": ["default"], - "events": [], + "slots": [], + "events": ["submit", "input"], "source": "components/NewsletterForm.wrn" }, { @@ -28806,6 +29163,113 @@ "events": [], "source": "components/PageAlert.wrn" }, + { + "name": "PageHeader", + "mount": "PageHeader", + "category": "core", + "purpose": "Reusable page header component.", + "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "eyebrow", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "primaryLabel", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "primaryHref", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "secondaryLabel", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "secondaryHref", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "icon", + "type": "string", + "required": false, + "default": "\"sparkles\"" + }, + { + "name": "centered", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "compact", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "showBreadcrumbs", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "breadcrumbParent", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "breadcrumbParentHref", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "breadcrumbCurrent", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "highlights", + "type": "string", + "required": false, + "default": "[]" + } + ], + "slots": [], + "events": [], + "source": "components/PageHeader.wrn" + }, { "name": "PageHeading", "mount": "PageHeading", @@ -28912,7 +29376,7 @@ "default": "\"\"" }, { - "name": "page", + "name": "currentPage", "type": "number", "required": false, "default": "1" @@ -28927,13 +29391,55 @@ "name": "previousHref", "type": "string", "required": false, - "default": "\"#\"" + "default": "\"\"" }, { "name": "nextHref", "type": "string", "required": false, - "default": "\"#\"" + "default": "\"\"" + }, + { + "name": "pages", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "showNumbers", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "showSummary", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "totalItems", + "type": "number", + "required": false, + "default": "0" + }, + { + "name": "pageSize", + "type": "number", + "required": false, + "default": "10" + }, + { + "name": "compact", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "centered", + "type": "boolean", + "required": false, + "default": "false" } ], "slots": [], @@ -32399,6 +32905,23 @@ "events": [], "source": "components/ProductLogo.wrn" }, + { + "name": "ProductMegaMenu", + "mount": "ProductMegaMenu", + "category": "core", + "purpose": "Reusable product mega menu component.", + "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": [], + "source": "components/ProductMegaMenu.wrn" + }, { "name": "ProductMiniCard", "mount": "ProductMiniCard", @@ -33310,28 +33833,10 @@ "type": "string", "required": false, "default": "\"\"" - }, - { - "name": "brand", - "type": "string", - "required": false, - "default": "\"WRNexusJS\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"SSR-first, Bun-native full-stack framework.\"" - }, - { - "name": "copyright", - "type": "string", - "required": false, - "default": "\"© 2026 WorkRoot Workspace\"" } ], - "slots": ["default"], - "events": [], + "slots": [], + "events": ["submit"], "source": "components/PublicFooter.wrn" }, { @@ -33345,39 +33850,9 @@ "type": "string", "required": false, "default": "\"\"" - }, - { - "name": "brand", - "type": "string", - "required": false, - "default": "\"WRNexusJS\"" - }, - { - "name": "homeHref", - "type": "string", - "required": false, - "default": "\"/\"" - }, - { - "name": "signInHref", - "type": "string", - "required": false, - "default": "\"/signin\"" - }, - { - "name": "ctaHref", - "type": "string", - "required": false, - "default": "\"/start\"" - }, - { - "name": "ctaLabel", - "type": "string", - "required": false, - "default": "\"Get started\"" } ], - "slots": ["default", "mobile"], + "slots": [], "events": ["click"], "source": "components/PublicHeader.wrn" }, @@ -33440,6 +33915,23 @@ "events": [], "source": "components/PublicHeaderLogo.wrn" }, + { + "name": "PublicMobileNavigation", + "mount": "PublicMobileNavigation", + "category": "core", + "purpose": "Reusable public mobile navigation component.", + "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": ["click"], + "source": "components/PublicMobileNavigation.wrn" + }, { "name": "PublicPageShell", "mount": "PublicPageShell", @@ -33481,6 +33973,107 @@ "events": [], "source": "components/PublicPageShell.wrn" }, + { + "name": "PublicSearch", + "mount": "PublicSearch", + "category": "core", + "purpose": "Reusable public search component.", + "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "query", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"Search...\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Search\"" + }, + { + "name": "action", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "method", + "type": "string", + "required": false, + "default": "\"get\"" + }, + { + "name": "name", + "type": "string", + "required": false, + "default": "\"q\"" + }, + { + "name": "buttonLabel", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "clearLabel", + "type": "string", + "required": false, + "default": "\"Clear search\"" + }, + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "centered", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "fullWidth", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "showShortcut", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "shortcutLabel", + "type": "string", + "required": false, + "default": "\"⌘ K\"" + }, + { + "name": "suggestions", + "type": "string", + "required": false, + "default": "[]" + } + ], + "slots": [], + "events": ["input", "focus", "blur", "click"], + "source": "components/PublicSearch.wrn" + }, { "name": "PublishDateTimePicker", "mount": "PublishDateTimePicker", @@ -35935,30 +36528,6 @@ "category": "overlays", "purpose": "Reusable resources mega menu component.", "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, { "name": "class", "type": "string", @@ -35966,7 +36535,7 @@ "default": "\"\"" } ], - "slots": ["default"], + "slots": [], "events": [], "source": "components/ResourcesMegaMenu.wrn" }, @@ -40069,6 +40638,77 @@ "events": [], "source": "components/SmsSegmentCounter.wrn" }, + { + "name": "SocialShare", + "mount": "SocialShare", + "category": "core", + "purpose": "Reusable social share component.", + "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Share this page\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "url", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "shareText", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "centered", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "compact", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "showTitle", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "showCopy", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "networks", + "type": "string", + "required": false, + "default": "[]" + } + ], + "slots": [], + "events": ["click"], + "source": "components/SocialShare.wrn" + }, { "name": "SolutionHero", "mount": "SolutionHero", @@ -40198,30 +40838,6 @@ "category": "overlays", "purpose": "Reusable solutions mega menu component.", "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, { "name": "class", "type": "string", @@ -40229,7 +40845,7 @@ "default": "\"\"" } ], - "slots": ["default"], + "slots": [], "events": [], "source": "components/SolutionsMegaMenu.wrn" }, @@ -40724,6 +41340,71 @@ "events": [], "source": "components/StatusBadge.wrn" }, + { + "name": "StatusBanner", + "mount": "StatusBanner", + "category": "core", + "purpose": "Reusable status banner component.", + "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "type", + "type": "string", + "required": false, + "default": "\"info\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "actionLabel", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "actionHref", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "dismissible", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "compact", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "details", + "type": "string", + "required": false, + "default": "[]" + } + ], + "slots": [], + "events": ["click"], + "source": "components/StatusBanner.wrn" + }, { "name": "StatusPageShell", "mount": "StatusPageShell", @@ -43839,6 +44520,23 @@ "events": [], "source": "components/ToastAction.wrn" }, + { + "name": "ToastHost", + "mount": "ToastHost", + "category": "core", + "purpose": "Reusable toast host component.", + "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": ["click"], + "source": "components/ToastHost.wrn" + }, { "name": "ToastIcon", "mount": "ToastIcon", diff --git a/.publish/ui/components/Breadcrumbs.wrn b/.publish/ui/components/Breadcrumbs.wrn index 00036632..2f186735 100644 --- a/.publish/ui/components/Breadcrumbs.wrn +++ b/.publish/ui/components/Breadcrumbs.wrn @@ -1,11 +1,105 @@ component Breadcrumbs { - props { - class = "" - homeLabel = "Home" - homeHref = "/" - current = "Current page" - } - view { - - } + props { + class: string = "" + items = [] + centered = false + compact = false + showHome = true + homeLabel = "Home" + homeHref = "/" + } + + view { + + } } diff --git a/.publish/ui/components/ContactSalesBanner.wrn b/.publish/ui/components/ContactSalesBanner.wrn new file mode 100644 index 00000000..58a954d9 --- /dev/null +++ b/.publish/ui/components/ContactSalesBanner.wrn @@ -0,0 +1,195 @@ +component ContactSalesBanner { + props { + class: string = "" + eyebrow = "Enterprise identity" + title = "Ready to secure your next application?" + description = "" + + primaryLabel = "Contact sales" + primaryHref = "/contact" + + secondaryLabel = "Start free" + secondaryHref = "/sign-up" + + iconClass = "icon-[lucide--messages-square]" + + centered = false + compact = false + + points = [] + trustPoints = [] + } + + view { +
+
+ + + +
+ +
+ +
+ +
+ + + + {eyebrow} + +
+ + +

+ {title} +

+ + +

+ {description} +

+ + +
+ {#each points.slice(0, 4) as point} +
+ + + + + {point} +
+ {/each} +
+
+ + +
+ + {secondaryLabel} + + + + {primaryLabel} + + + +
+
+ + +
+
+ {#each trustPoints.slice(0, 4) as trustPoint} + + + + {trustPoint.label} + + {/each} +
+
+
+
+
+ } +} diff --git a/.publish/ui/components/CookieConsent.wrn b/.publish/ui/components/CookieConsent.wrn new file mode 100644 index 00000000..58f63e21 --- /dev/null +++ b/.publish/ui/components/CookieConsent.wrn @@ -0,0 +1,372 @@ +component CookieConsent { + props { + class: string = "" + } + state bannerOpen = false + state preferencesOpen = false + + state analyticsCookies = false + state personalizationCookies = false + state marketingCookies = false + + view { +
+ + + + + + + + +
+ } +} diff --git a/.publish/ui/components/DevelopersMegaMenu.wrn b/.publish/ui/components/DevelopersMegaMenu.wrn new file mode 100644 index 00000000..529dddfc --- /dev/null +++ b/.publish/ui/components/DevelopersMegaMenu.wrn @@ -0,0 +1,421 @@ +component DevelopersMegaMenu { + props { + class: string = "" + } + view { +
+
+
+ + +
+
+
+

+ Developers +

+ +

+ Build secure identity into any application +

+ +

+ Explore documentation, APIs, SDKs, examples, and tools built + for modern development teams. +

+
+ + +
+ +
+ + + + + + + + + + + Documentation + + + + + + + Guides for authentication, users, organizations, and + authorization. + + + + + + + + + + + + + + API reference + + + + + + + Complete endpoint, request, response, and error + documentation. + + + + + + + + + + + + + + SDKs + + + + + + + Official libraries for JavaScript, TypeScript, Go, Java, + Python, and more. + + + + + + + + + + + + + + Examples + + + + + + + Ready-to-run projects for common frameworks and identity + flows. + + + + + + + + + + + + + + Webhooks + + + + + + + Respond to user, session, organization, and security events. + + + + + + + + + + + + + + Changelog + + + + + + + Review platform releases, improvements, and migration notes. + + + +
+ + + Open documentation + + + +
+ + + +
+ + +
+
+ + + + Authentication guides + + + + + + Organizations + + + + + + Authorization + + + + + + + + + System status + +
+ + + Developer support + + + +
+
+
+ } +} diff --git a/.publish/ui/components/EmptyState.wrn b/.publish/ui/components/EmptyState.wrn index 1959bb46..c3c870e6 100644 --- a/.publish/ui/components/EmptyState.wrn +++ b/.publish/ui/components/EmptyState.wrn @@ -1,13 +1,167 @@ component EmptyState { - props { - class = "" - icon = "◇" - title = "Nothing here yet" - description = "" - actionLabel = "" - actionHref = "#" - } - view { -
{icon}

{title}

{description}

{actionLabel}
- } + props { + class: string = "" + eyebrow = "" + title = "Nothing found" + description = "" + + iconClass = "icon-[lucide--inbox]" + + primaryLabel = "" + primaryHref = "" + + secondaryLabel = "" + secondaryHref = "" + + compact = false + centered = true + + suggestions = [] + } + + view { +
+
+ + + +
+
+ +
+ + + +
+ + +

+ {eyebrow} +

+ + +

+ {title} +

+ + +

+ {description} +

+ + +
+ {#each suggestions.slice(0, 4) as suggestion} + + + + {suggestion.label} + + {/each} +
+ + +
+ + {secondaryLabel} + + + + {primaryLabel} + + + +
+
+
+
+
+ } } diff --git a/.publish/ui/components/ErrorState.wrn b/.publish/ui/components/ErrorState.wrn index 65bf64ff..b3776e7d 100644 --- a/.publish/ui/components/ErrorState.wrn +++ b/.publish/ui/components/ErrorState.wrn @@ -1,13 +1,193 @@ component ErrorState { - props { - class = "" - code = "500" - title = "Something went wrong" - description = "Please try again." - actionLabel = "Try again" - actionHref = "/" - } - view { -
{code}

{title}

{description}

{actionLabel}
- } + props { + class: string = "" + type = "error" + + eyebrow = "" + title = "Something went wrong" + description = "" + + errorCode = "" + + iconClass = "" + + primaryLabel = "" + primaryHref = "" + + secondaryLabel = "" + secondaryHref = "" + + retryLabel = "" + retryAction = "" + + centered = true + compact = false + + details = [] + } + + view { +
+
+ + + +
+
+ +
+
+ + + + + +
+
+ + +
+ + {errorCode} + +
+ + +

+ {eyebrow} +

+ + +

+ {title} +

+ + +

+ {description} +

+ + +
+ {#each details.slice(0, 4) as detail} +
+ + + + + {detail.label} +
+ {/each} +
+ + +
+ + + {secondaryLabel} + + + + + + + + {primaryLabel} + + + +
+
+
+
+
+ } } diff --git a/.publish/ui/components/LogoCloud.wrn b/.publish/ui/components/LogoCloud.wrn index 41d26bbc..bc207fd5 100644 --- a/.publish/ui/components/LogoCloud.wrn +++ b/.publish/ui/components/LogoCloud.wrn @@ -1,9 +1,150 @@ component LogoCloud { - props { - class = "" - title = "Trusted by modern teams" - } - view { -

{title}

- } + props { + class: string = "" + eyebrow = "" + title = "Trusted by teams building modern products" + description = "" + + logos = [] + + centered = true + compact = false + + variant = "strip" + grayscale = true + showNames = false + maxItems = 8 + } + + view { +
+
+ + + +
+ +
+

+ {eyebrow} +

+ +

+ {title} +

+ +

+ {description} +

+
+ + +
+ {#each logos.slice(0, maxItems) as logo} + + +
+ {logo.alt !== '' ? logo.alt : logo.name} + + + +
+ + +
+

+ {logo.name} +

+ +

+ {logo.description} +

+
+ + {/each} +
+ + +

+ And {logos.length - maxItems} more teams using WrNexus. +

+
+
+
+ } } diff --git a/.publish/ui/components/NewsletterForm.wrn b/.publish/ui/components/NewsletterForm.wrn index 1ed569a9..c7790ea7 100644 --- a/.publish/ui/components/NewsletterForm.wrn +++ b/.publish/ui/components/NewsletterForm.wrn @@ -1,13 +1,214 @@ component NewsletterForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{alt}{eyebrow}

{title}

{description}

{actionLabel}
} + props { + class: string = "" + eyebrow = "" + title = "Stay up to date" + description = "" + + placeholder = "Enter your email" + buttonLabel = "Subscribe" + + action = "/newsletter/subscribe" + method = "post" + emailName = "email" + + privacyLabel = "" + privacyHref = "/privacy" + + successMessage = "You are subscribed." + errorMessage = "Something went wrong. Please try again." + + iconClass = "icon-[lucide--mail]" + + centered = false + compact = false + showIcon = true + showPrivacy = true + fullWidth = false + } + + state email = "" + state status = "idle" + state message = "" + + view { +
+
+ + + +
+
+ +
+
+ +
+ + + + + +
+ +
+ +

+ {eyebrow} +

+ + +

+ {title} +

+
+
+ + +

+ {description} +

+
+ + +
+
+ + +
+
+ + + +
+ + +
+
+ +

+ No spam. Unsubscribe at any time. + + + {privacyLabel} + +

+ +
+ {message} +
+
+
+
+
+
+ } } diff --git a/.publish/ui/components/PageHeader.wrn b/.publish/ui/components/PageHeader.wrn new file mode 100644 index 00000000..6fd1a09d --- /dev/null +++ b/.publish/ui/components/PageHeader.wrn @@ -0,0 +1,172 @@ +component PageHeader { + props { + class: string = "" + eyebrow = "" + title = "" + description = "" + + primaryLabel = "" + primaryHref = "" + + secondaryLabel = "" + secondaryHref = "" + + icon = "sparkles" + + centered = false + compact = false + + showBreadcrumbs = false + breadcrumbParent = "" + breadcrumbParentHref = "" + breadcrumbCurrent = "" + + highlights = [] + } + + view { +
+ + + +
+ + +
+ +
+ + +
+ +
+ +
+ + + + + + {eyebrow} + +
+ + +

+ {title} +

+ + +

+ {description} +

+
+ + +
+ + + {secondaryLabel} + + + + + {primaryLabel} + + + +
+
+ + +
+
+ {#each highlights as highlight} +
+
+ + + + +
+

+ {highlight.title} +

+ +

+ {highlight.description} +

+
+
+
+ {/each} +
+
+
+
+ } +} diff --git a/.publish/ui/components/Pagination.wrn b/.publish/ui/components/Pagination.wrn index 712d1d3c..05d24965 100644 --- a/.publish/ui/components/Pagination.wrn +++ b/.publish/ui/components/Pagination.wrn @@ -1,12 +1,187 @@ component Pagination { - props { - class = "" - page = 1 - totalPages = 1 - previousHref = "#" - nextHref = "#" - } - view { - - } + props { + class: string = "" + currentPage = 1 + totalPages = 1 + + previousHref = "" + nextHref = "" + + pages = [] + + showNumbers = true + showSummary = true + + totalItems = 0 + pageSize = 10 + + compact = false + centered = false + } + + view { + + } } diff --git a/.publish/ui/components/ProductMegaMenu.wrn b/.publish/ui/components/ProductMegaMenu.wrn new file mode 100644 index 00000000..09a9d48a --- /dev/null +++ b/.publish/ui/components/ProductMegaMenu.wrn @@ -0,0 +1,332 @@ +component ProductMegaMenu { + props { + class: string = "" + } + view { +
+
+
+ + +
+
+
+

+ WrNexus platform +

+ +

+ Everything you need to manage identity +

+
+ + +
+ +
+ + + + + + + + + + + Platform + + + + + + + Unified identity infrastructure for every application. + + + + + + + + + + + + + + Authentication + + + + + + + Passwords, passkeys, social login, MFA, and SSO. + + + + + + + + + + + + + + User management + + + + + + + Profiles, sessions, invitations, and user lifecycle. + + + + + + + + + + + + + + Organizations + + + + + + + Multi-tenant workspaces, teams, domains, and membership. + + + + + + + + + + + + + + Authorization + + + + + + + Roles, permissions, policies, and protected resources. + + + + + + + + + + + + + + Security + + + + + + + Session controls, recovery, audit logs, and threat protection. + + + +
+ + + View all product features + + + +
+ + + + +
+ + +
+
+ + + + Integrations + + + + + + Enterprise SSO + + + + + + Audit logs + +
+ + + Read the documentation + + + +
+
+
+ } +} diff --git a/.publish/ui/components/PublicFooter.wrn b/.publish/ui/components/PublicFooter.wrn index daea9e2d..7d5b7fee 100644 --- a/.publish/ui/components/PublicFooter.wrn +++ b/.publish/ui/components/PublicFooter.wrn @@ -1,11 +1,608 @@ component PublicFooter { - props { - class = "" - brand = "WRNexusJS" - description = "SSR-first, Bun-native full-stack framework." - copyright = "© 2026 WorkRoot Workspace" - } - view { - - } + props { + class: string = "" + } + state email = "" + state newsletterSubmitted = false + + view { + + } } diff --git a/.publish/ui/components/PublicHeader.wrn b/.publish/ui/components/PublicHeader.wrn index db9c0ac6..4168c9a4 100644 --- a/.publish/ui/components/PublicHeader.wrn +++ b/.publish/ui/components/PublicHeader.wrn @@ -1,14 +1,284 @@ component PublicHeader { - props { - class = "" - brand = "WRNexusJS" - homeHref = "/" - signInHref = "/signin" - ctaHref = "/start" - ctaLabel = "Get started" - } - state mobileOpen = false - view { -
{brand}
Sign in{ctaLabel}
- } + props { + class: string = "" + } + state activeMenu = "" + state mobileMenuOpen = false + state headerScrolled = false + + view { +
+
+ + + + + + + + + + WrNexus + + + + Identity Cloud + + + + + + + + + + + +
+ + + +
+ +
+ + + + + +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+ +
+
+ } } diff --git a/.publish/ui/components/PublicMobileNavigation.wrn b/.publish/ui/components/PublicMobileNavigation.wrn new file mode 100644 index 00000000..b8640479 --- /dev/null +++ b/.publish/ui/components/PublicMobileNavigation.wrn @@ -0,0 +1,589 @@ +component PublicMobileNavigation { + props { + class: string = "" + } + state openSection = "" + + view { +
+
+ + + + + + + + + + + + All systems operational + + + + View service status + + + + + + + + + + +
+ + + + Sign in + + + + Start free + + + +
+ +

+ Secure identity infrastructure for modern applications. +

+ +
+
+ } +} diff --git a/.publish/ui/components/PublicSearch.wrn b/.publish/ui/components/PublicSearch.wrn new file mode 100644 index 00000000..612c374d --- /dev/null +++ b/.publish/ui/components/PublicSearch.wrn @@ -0,0 +1,125 @@ +component PublicSearch { + props { + class: string = "" + query = "" + + placeholder = "Search..." + label = "Search" + + action = "" + method = "get" + name = "q" + + buttonLabel = "" + clearLabel = "Clear search" + + size = "default" + centered = false + fullWidth = false + + showShortcut = false + shortcutLabel = "⌘ K" + + suggestions = [] + } + + state searchValue = query + state focused = false + + view { +
+ + + +
+ + Popular: + + + {#each suggestions.slice(0, 5) as suggestion} + + + + {suggestion.label} + + {/each} +
+
+ } +} diff --git a/.publish/ui/components/ResourcesMegaMenu.wrn b/.publish/ui/components/ResourcesMegaMenu.wrn index 67694937..e5b32038 100644 --- a/.publish/ui/components/ResourcesMegaMenu.wrn +++ b/.publish/ui/components/ResourcesMegaMenu.wrn @@ -1,10 +1,365 @@ component ResourcesMegaMenu { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} + props { + class: string = "" + } + view { +
+
+
+ + +
+
+
+

+ Resources +

+ +

+ Learn, build, and get support +

+ +

+ Explore practical guides, customer stories, product updates, + and security resources. +

+
+ + +
+ +
+ + + + + + + + + + + Blog + + + + + + + Product updates, engineering insights, identity trends, and + company news. + + + + + + + + + + + + + + Customer stories + + + + + + + See how teams use WrNexus to secure and scale their + applications. + + + + + + + + + + + + + + Guides + + + + + + + Practical identity, security, SaaS, and architecture + walkthroughs. + + + + + + + + + + + + + + Help center + + + + + + + Find answers for account, workspace, billing, and security + questions. + + + + + + + + + + + + + + Security + + + + + + + Learn how WrNexus protects accounts, sessions, and + organizations. + + + + + + + + + + + + + + Trust center + + + + + + + Review compliance, privacy, infrastructure, and operational + controls. + + + +
+ + + View all resources + + + +
+ + + +
+ + +
+
+ + + + Webinars + + + + + + Events + + + + + + Reports + + + + + + Newsletter + +
+ + + Contact our team + + + +
+
+
+ } } diff --git a/.publish/ui/components/SocialShare.wrn b/.publish/ui/components/SocialShare.wrn new file mode 100644 index 00000000..b0420ef5 --- /dev/null +++ b/.publish/ui/components/SocialShare.wrn @@ -0,0 +1,143 @@ +component SocialShare { + props { + class: string = "" + title = "Share this page" + description = "" + + url = "" + shareText = "" + + centered = false + compact = false + showTitle = true + showCopy = true + + networks = [] + } + + state copied = false + + view { + + } +} diff --git a/.publish/ui/components/SolutionsMegaMenu.wrn b/.publish/ui/components/SolutionsMegaMenu.wrn index a6f22457..48a1c6f3 100644 --- a/.publish/ui/components/SolutionsMegaMenu.wrn +++ b/.publish/ui/components/SolutionsMegaMenu.wrn @@ -1,10 +1,368 @@ component SolutionsMegaMenu { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} + props { + class: string = "" + } + view { +
+
+
+ + +
+
+
+

+ Solutions +

+ +

+ Identity infrastructure for every stage of growth +

+ +

+ Choose a solution designed around your product, team, and customers. +

+
+ + +
+ +
+ + + + + + + + + + + Startups + + + + + + + Launch secure authentication quickly without slowing product development. + + + + + + + + + + + + + + SaaS platforms + + + + + + + Add users, organizations, roles, SSO, and secure account recovery. + + + + + + + + + + + + + + Enterprise + + + + + + + Support complex organizations, governance, auditability, and scale. + + + + + + + + + + + + + + Developers + + + + + + + APIs, SDKs, webhooks, templates, and developer-friendly workflows. + + + + + + + + + + + + + + Agencies + + + + + + + Manage identities across customer projects and branded experiences. + + + + + + + + + + + + + + B2B products + + + + + + + Secure customer organizations, team access, and enterprise connections. + + + +
+ + + View all solutions + + + +
+ + + +
+ + +
+
+ + + + Customer identity + + + + + + Workforce identity + + + + + + Marketplaces + + + + + + Multi-tenant apps + +
+ + + See customer stories + + + +
+
+
+ } } diff --git a/.publish/ui/components/StatusBanner.wrn b/.publish/ui/components/StatusBanner.wrn new file mode 100644 index 00000000..83c8f0f7 --- /dev/null +++ b/.publish/ui/components/StatusBanner.wrn @@ -0,0 +1,122 @@ +component StatusBanner { + props { + class: string = "" + type = "info" + + title = "" + description = "" + + actionLabel = "" + actionHref = "" + + dismissible = true + compact = false + + details = [] + } + + state visible = true + + view { + + } +} diff --git a/.publish/ui/components/ToastHost.wrn b/.publish/ui/components/ToastHost.wrn new file mode 100644 index 00000000..36a516b5 --- /dev/null +++ b/.publish/ui/components/ToastHost.wrn @@ -0,0 +1,212 @@ +component ToastHost { + props { + class: string = "" + } + state successOpen = false + state errorOpen = false + state warningOpen = false + state infoOpen = false + + state successTitle = "Changes saved" + state successMessage = "Your changes were saved successfully." + + state errorTitle = "Something went wrong" + state errorMessage = "We could not complete your request. Please try again." + + state warningTitle = "Action required" + state warningMessage = "Review the highlighted information before continuing." + + state infoTitle = "New update available" + state infoMessage = "A newer version of this feature is now available." + + view { +
+ +
+
+ +
+ + + + +
+

+ {successTitle} +

+ +

+ {successMessage} +

+
+ + +
+ +
+
+
+
+ + + + + +
+
+ +
+ + + + +
+

+ {warningTitle} +

+ +

+ {warningMessage} +

+
+ + +
+ +
+
+
+
+ + + +
+ } +} diff --git a/.publish/ui/package.json b/.publish/ui/package.json index d9fdb344..b09d3573 100644 --- a/.publish/ui/package.json +++ b/.publish/ui/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ui", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/ui — part of the WrNexus framework.", "license": "MIT", @@ -25,7 +25,7 @@ "./ui.css": "./ui.css" }, "dependencies": { - "@wrnexus/core": "^0.2.61" + "@wrnexus/core": "^0.2.62" }, "files": [ "dist", diff --git a/.publish/ui/ui.css b/.publish/ui/ui.css index 78437c37..44455d5d 100644 --- a/.publish/ui/ui.css +++ b/.publish/ui/ui.css @@ -1050,9 +1050,10 @@ --wire-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); } -/* Tailwind v4 color bridge. Existing utility-authored components inherit the - * configured semantic palette without requiring generated per-palette markup. */ -[data-component] { +/* Tailwind v4 color bridge. Define the aliases at the document root so both + * packaged components and application-authored pages/components inherit the + * palette selected in wrnexus.config.ts. */ +:root { --color-violet-50: color-mix(in srgb, var(--wire-color-primary) 7%, white); --color-violet-100: color-mix(in srgb, var(--wire-color-primary) 14%, white); --color-violet-200: color-mix(in srgb, var(--wire-color-primary) 25%, white); @@ -1096,6 +1097,47 @@ --color-rose-700: color-mix(in srgb, var(--wire-color-danger) 80%, black); } +/* Stable semantic helpers for application-authored markup. These deliberately + * avoid spacing so applications remain in control of their own layout. */ +.wire-bg-page { + background-color: var(--wire-color-bg); +} +.wire-bg-surface { + background-color: var(--wire-color-surface); +} +.wire-bg-surface-2 { + background-color: var(--wire-color-surface-2); +} +.wire-bg-primary { + background-color: var(--wire-color-primary); + color: var(--wire-color-primary-contrast); +} +.wire-bg-secondary { + background-color: var(--wire-color-secondary); + color: var(--wire-color-secondary-contrast); +} +.wire-text { + color: var(--wire-color-text); +} +.wire-text-muted { + color: var(--wire-color-muted); +} +.wire-text-primary { + color: var(--wire-color-primary); +} +.wire-text-success { + color: var(--wire-color-success); +} +.wire-text-warning { + color: var(--wire-color-warning); +} +.wire-text-danger { + color: var(--wire-color-danger); +} +.wire-border { + border-color: var(--wire-color-border); +} + [data-component] { animation: wire-component-enter var(--wire-motion-slow) var(--wire-ease-emphasized) both; } diff --git a/.publish/uploader/package.json b/.publish/uploader/package.json index 195d50e4..ae1f05d2 100644 --- a/.publish/uploader/package.json +++ b/.publish/uploader/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/uploader", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/uploader — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/core": "^0.2.61" + "@wrnexus/core": "^0.2.62" }, "files": [ "dist" diff --git a/.publish/validation/package.json b/.publish/validation/package.json index f55c6b5b..aaa950f6 100644 --- a/.publish/validation/package.json +++ b/.publish/validation/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/validation", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "description": "@wrnexus/validation — part of the WrNexus framework.", "license": "MIT", diff --git a/packages/ai/package.json b/packages/ai/package.json index 607a1859..188d86ac 100644 --- a/packages/ai/package.json +++ b/packages/ai/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ai", - "version": "0.2.61", + "version": "0.2.62", "private": true, "type": "module", "description": "Zero-dependency Claude (Anthropic) client for WrNexus apps.", diff --git a/packages/authz/package.json b/packages/authz/package.json index 37016ba8..540aac43 100644 --- a/packages/authz/package.json +++ b/packages/authz/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/authz", - "version": "0.2.61", + "version": "0.2.62", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/cli/package.json b/packages/cli/package.json index 18e7b744..4d240732 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/cli", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/cli/src/update.ts b/packages/cli/src/update.ts index 35e14d3e..941d018a 100644 --- a/packages/cli/src/update.ts +++ b/packages/cli/src/update.ts @@ -619,6 +619,15 @@ const MIGRATIONS: Migration[] = [ // The UI component and stylesheet updates apply automatically. }, }, + { + version: "0.2.62", + id: "application-theme-contract-and-public-ui", + description: + "Exposes semantic theme helpers to application UI and promotes the public-site components into @wrnexus/ui.", + apply() { + // Package auto-discovery and the root-level theme aliases apply automatically. + }, + }, ]; /** Release tooling uses this to require an explicit migration entry per version. */ diff --git a/packages/compiler/package.json b/packages/compiler/package.json index 62123f00..a7f6056d 100644 --- a/packages/compiler/package.json +++ b/packages/compiler/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/compiler", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/core/package.json b/packages/core/package.json index ea378f1b..8d6095aa 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/core", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/csr/package.json b/packages/csr/package.json index 1bfed5ae..d4df2f17 100644 --- a/packages/csr/package.json +++ b/packages/csr/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/csr", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/db/package.json b/packages/db/package.json index 7212e29c..756de956 100644 --- a/packages/db/package.json +++ b/packages/db/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/db", - "version": "0.2.61", + "version": "0.2.62", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json index 6e1b0435..fc9b83ee 100644 --- a/packages/dev-server/package.json +++ b/packages/dev-server/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/dev-server", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/encryption/package.json b/packages/encryption/package.json index 412a3697..c7ceaae8 100644 --- a/packages/encryption/package.json +++ b/packages/encryption/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/encryption", - "version": "0.2.61", + "version": "0.2.62", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/helpers/package.json b/packages/helpers/package.json index 4f29b2d3..0975e09b 100644 --- a/packages/helpers/package.json +++ b/packages/helpers/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/helpers", - "version": "0.2.61", + "version": "0.2.62", "private": true, "type": "module", "description": "Safe convenience helpers for WrNexus request contexts and common application flows.", diff --git a/packages/i18n/package.json b/packages/i18n/package.json index 356b8759..1fd9d258 100644 --- a/packages/i18n/package.json +++ b/packages/i18n/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/i18n", - "version": "0.2.61", + "version": "0.2.62", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/jwt/package.json b/packages/jwt/package.json index cfc54fed..2976c82a 100644 --- a/packages/jwt/package.json +++ b/packages/jwt/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/jwt", - "version": "0.2.61", + "version": "0.2.62", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/mobile/package.json b/packages/mobile/package.json index 34a38aa5..9965a27b 100644 --- a/packages/mobile/package.json +++ b/packages/mobile/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/mobile", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/native/package.json b/packages/native/package.json index 623548fb..c1c6d9e8 100644 --- a/packages/native/package.json +++ b/packages/native/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/native", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/oauth/package.json b/packages/oauth/package.json index dadcab71..9f79fc5f 100644 --- a/packages/oauth/package.json +++ b/packages/oauth/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/oauth", - "version": "0.2.61", + "version": "0.2.62", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/pubsub/package.json b/packages/pubsub/package.json index 7ab9dd19..dfbf93a7 100644 --- a/packages/pubsub/package.json +++ b/packages/pubsub/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/pubsub", - "version": "0.2.61", + "version": "0.2.62", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/queue/package.json b/packages/queue/package.json index 5e6af10d..8e6d0a0d 100644 --- a/packages/queue/package.json +++ b/packages/queue/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/queue", - "version": "0.2.61", + "version": "0.2.62", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/reactive/package.json b/packages/reactive/package.json index a6320310..435490da 100644 --- a/packages/reactive/package.json +++ b/packages/reactive/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/reactive", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/router/package.json b/packages/router/package.json index 376911ac..880821e5 100644 --- a/packages/router/package.json +++ b/packages/router/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/router", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/ssr/package.json b/packages/ssr/package.json index 8d4a5397..a1a33d9b 100644 --- a/packages/ssr/package.json +++ b/packages/ssr/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ssr", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/styles/package.json b/packages/styles/package.json index d22384b0..33475b42 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/styles", - "version": "0.2.61", + "version": "0.2.62", "type": "module", "main": "src/index.ts", "exports": { diff --git a/packages/test/package.json b/packages/test/package.json index e940148e..6ea4b480 100644 --- a/packages/test/package.json +++ b/packages/test/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/test", - "version": "0.2.61", + "version": "0.2.62", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/tracking/package.json b/packages/tracking/package.json index 8f1c2e0d..7b1621f9 100644 --- a/packages/tracking/package.json +++ b/packages/tracking/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/tracking", - "version": "0.2.61", + "version": "0.2.62", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/ui/COMPONENTS.md b/packages/ui/COMPONENTS.md index 26e199c0..11dda934 100644 --- a/packages/ui/COMPONENTS.md +++ b/packages/ui/COMPONENTS.md @@ -1,6 +1,6 @@ # WRNexus UI component reference -This reference is generated from the 891 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default. +This reference is generated from the 901 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default. ## Actions @@ -1964,9 +1964,9 @@ Reusable navigation item component. Reusable newsletter form component. - Mount: `data-component="NewsletterForm"` -- 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` ### NotFoundPage @@ -2911,7 +2911,7 @@ Reusable back to top component. Reusable breadcrumbs component. - Mount: `data-component="Breadcrumbs"` -- 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 @@ -2951,6 +2951,15 @@ Reusable combobox component. - Slots: None - Events: None +### ContactSalesBanner + +Reusable contact sales banner component. + +- Mount: `data-component="ContactSalesBanner"` +- 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 + ### Container Reusable container component. @@ -2960,6 +2969,24 @@ Reusable container component. - Slots: `default` - Events: None +### CookieConsent + +Reusable cookie consent component. + +- Mount: `data-component="CookieConsent"` +- Props: `class: string = ""` +- Slots: None +- Events: `click`, `change` + +### DevelopersMegaMenu + +Reusable developers mega menu component. + +- Mount: `data-component="DevelopersMegaMenu"` +- Props: `class: string = ""` +- Slots: None +- Events: None + ### disclosure Reusable disclosure component. @@ -3109,8 +3136,8 @@ Reusable link component. Reusable logo cloud component. - Mount: `data-component="LogoCloud"` -- 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 ### Modal @@ -3149,6 +3176,15 @@ Reusable notification dot component. - Slots: `default` - Events: None +### PageHeader + +Reusable page header component. + +- Mount: `data-component="PageHeader"` +- 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 Reusable page heading component. @@ -3172,7 +3208,7 @@ Reusable page shell component. Reusable pagination component. - Mount: `data-component="Pagination"` -- 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 @@ -3185,6 +3221,15 @@ Reusable pill component. - Slots: `default` - Events: None +### ProductMegaMenu + +Reusable product mega menu component. + +- Mount: `data-component="ProductMegaMenu"` +- Props: `class: string = ""` +- Slots: None +- Events: None + ### progress Reusable progress component. @@ -3208,9 +3253,27 @@ Reusable progress bar component. Reusable public footer component. - Mount: `data-component="PublicFooter"` -- 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` + +### PublicMobileNavigation + +Reusable public mobile navigation component. + +- Mount: `data-component="PublicMobileNavigation"` +- Props: `class: string = ""` +- Slots: None +- Events: `click` + +### PublicSearch + +Reusable public search component. + +- Mount: `data-component="PublicSearch"` +- 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` ### Radio @@ -3257,6 +3320,15 @@ Reusable select component. - Slots: `default` - Events: None +### SocialShare + +Reusable social share component. + +- Mount: `data-component="SocialShare"` +- 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` + ### spacer Reusable spacer component. @@ -3284,6 +3356,15 @@ Reusable stack component. - Slots: `default` - Events: None +### StatusBanner + +Reusable status banner component. + +- Mount: `data-component="StatusBanner"` +- 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` + ### Sticky Reusable sticky component. @@ -3356,6 +3437,15 @@ Reusable toast component. - Slots: None - Events: `click` +### ToastHost + +Reusable toast host component. + +- Mount: `data-component="ToastHost"` +- Props: `class: string = ""` +- Slots: None +- Events: `click` + ### Typography Reusable typography component. @@ -4292,7 +4382,7 @@ Reusable deprecated feature alert component. Reusable empty state component. - Mount: `data-component="EmptyState"` -- 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 @@ -4301,9 +4391,9 @@ Reusable empty state component. Reusable error state component. - Mount: `data-component="ErrorState"` -- 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` ### FeatureUnavailableState @@ -7113,8 +7203,8 @@ Reusable product page shell component. Reusable public header component. - Mount: `data-component="PublicHeader"` -- 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` ### PublicPageShell @@ -7547,8 +7637,8 @@ Reusable prompt dialog component. Reusable resources mega menu component. - Mount: `data-component="ResourcesMegaMenu"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` +- Props: `class: string = ""` +- Slots: None - Events: None ### SearchDialog @@ -7583,8 +7673,8 @@ Reusable session expired dialog component. Reusable solutions mega menu component. - Mount: `data-component="SolutionsMegaMenu"` -- Props: `title: string = ""`, `description: string = ""`, `open: boolean = false`, `closeLabel: string = "Close"`, `class: string = ""` -- Slots: `default` +- Props: `class: string = ""` +- Slots: None - Events: None ### StepUpAuthenticationDialog diff --git a/packages/ui/README.md b/packages/ui/README.md index cf510702..017f1837 100644 --- a/packages/ui/README.md +++ b/packages/ui/README.md @@ -133,6 +133,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 diff --git a/packages/ui/component-reference.json b/packages/ui/component-reference.json index 561a5c4f..743124b9 100644 --- a/packages/ui/component-reference.json +++ b/packages/ui/component-reference.json @@ -1,6 +1,6 @@ { "generatedFrom": "packages/ui/components/*.wrn", - "count": 891, + "count": 901, "components": [ { "name": "AcceptAllCookiesButton", @@ -4505,6 +4505,30 @@ "required": false, "default": "\"\"" }, + { + "name": "items", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "centered", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "compact", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "showHome", + "type": "boolean", + "required": false, + "default": "true" + }, { "name": "homeLabel", "type": "string", @@ -4516,12 +4540,6 @@ "type": "string", "required": false, "default": "\"/\"" - }, - { - "name": "current", - "type": "string", - "required": false, - "default": "\"Current page\"" } ], "slots": [], @@ -9616,6 +9634,95 @@ "events": [], "source": "components/ContactPageShell.wrn" }, + { + "name": "ContactSalesBanner", + "mount": "ContactSalesBanner", + "category": "core", + "purpose": "Reusable contact sales banner component.", + "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "eyebrow", + "type": "string", + "required": false, + "default": "\"Enterprise identity\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Ready to secure your next application?\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "primaryLabel", + "type": "string", + "required": false, + "default": "\"Contact sales\"" + }, + { + "name": "primaryHref", + "type": "string", + "required": false, + "default": "\"/contact\"" + }, + { + "name": "secondaryLabel", + "type": "string", + "required": false, + "default": "\"Start free\"" + }, + { + "name": "secondaryHref", + "type": "string", + "required": false, + "default": "\"/sign-up\"" + }, + { + "name": "iconClass", + "type": "string", + "required": false, + "default": "\"icon-[lucide--messages-square]\"" + }, + { + "name": "centered", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "compact", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "points", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "trustPoints", + "type": "string", + "required": false, + "default": "[]" + } + ], + "slots": [], + "events": [], + "source": "components/ContactSalesBanner.wrn" + }, { "name": "ContactSalesButton", "mount": "ContactSalesButton", @@ -10145,6 +10252,23 @@ "events": [], "source": "components/CookieCategoryToggle.wrn" }, + { + "name": "CookieConsent", + "mount": "CookieConsent", + "category": "core", + "purpose": "Reusable cookie consent component.", + "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": ["click", "change"], + "source": "components/CookieConsent.wrn" + }, { "name": "CookieDetailsTable", "mount": "CookieDetailsTable", @@ -13171,6 +13295,23 @@ "events": [], "source": "components/DeveloperSearch.wrn" }, + { + "name": "DevelopersMegaMenu", + "mount": "DevelopersMegaMenu", + "category": "core", + "purpose": "Reusable developers mega menu component.", + "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": [], + "source": "components/DevelopersMegaMenu.wrn" + }, { "name": "DevelopersMenu", "mount": "DevelopersMenu", @@ -14686,16 +14827,16 @@ "default": "\"\"" }, { - "name": "icon", + "name": "eyebrow", "type": "string", "required": false, - "default": "\"◇\"" + "default": "\"\"" }, { "name": "title", "type": "string", "required": false, - "default": "\"Nothing here yet\"" + "default": "\"Nothing found\"" }, { "name": "description", @@ -14704,16 +14845,52 @@ "default": "\"\"" }, { - "name": "actionLabel", + "name": "iconClass", + "type": "string", + "required": false, + "default": "\"icon-[lucide--inbox]\"" + }, + { + "name": "primaryLabel", "type": "string", "required": false, "default": "\"\"" }, { - "name": "actionHref", + "name": "primaryHref", "type": "string", "required": false, - "default": "\"#\"" + "default": "\"\"" + }, + { + "name": "secondaryLabel", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "secondaryHref", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "compact", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "centered", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "suggestions", + "type": "string", + "required": false, + "default": "[]" } ], "slots": [], @@ -15404,10 +15581,16 @@ "default": "\"\"" }, { - "name": "code", + "name": "type", "type": "string", "required": false, - "default": "\"500\"" + "default": "\"error\"" + }, + { + "name": "eyebrow", + "type": "string", + "required": false, + "default": "\"\"" }, { "name": "title", @@ -15419,23 +15602,77 @@ "name": "description", "type": "string", "required": false, - "default": "\"Please try again.\"" + "default": "\"\"" }, { - "name": "actionLabel", + "name": "errorCode", "type": "string", "required": false, - "default": "\"Try again\"" + "default": "\"\"" }, { - "name": "actionHref", + "name": "iconClass", "type": "string", "required": false, - "default": "\"/\"" + "default": "\"\"" + }, + { + "name": "primaryLabel", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "primaryHref", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "secondaryLabel", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "secondaryHref", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "retryLabel", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "retryAction", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "centered", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "compact", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "details", + "type": "string", + "required": false, + "default": "[]" } ], "slots": [], - "events": [], + "events": ["click"], "source": "components/ErrorState.wrn" }, { @@ -24908,14 +25145,68 @@ "required": false, "default": "\"\"" }, + { + "name": "eyebrow", + "type": "string", + "required": false, + "default": "\"\"" + }, { "name": "title", "type": "string", "required": false, - "default": "\"Trusted by modern teams\"" + "default": "\"Trusted by teams building modern products\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "logos", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "centered", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "compact", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "variant", + "type": "string", + "required": false, + "default": "\"strip\"" + }, + { + "name": "grayscale", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "showNames", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "maxItems", + "type": "number", + "required": false, + "default": "8" } ], - "slots": ["default"], + "slots": [], "events": [], "source": "components/LogoCloud.wrn" }, @@ -27706,6 +27997,12 @@ "category": "content", "purpose": "Reusable newsletter form component.", "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + }, { "name": "eyebrow", "type": "string", @@ -27716,7 +28013,7 @@ "name": "title", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Stay up to date\"" }, { "name": "description", @@ -27725,38 +28022,98 @@ "default": "\"\"" }, { - "name": "href", + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"Enter your email\"" + }, + { + "name": "buttonLabel", + "type": "string", + "required": false, + "default": "\"Subscribe\"" + }, + { + "name": "action", + "type": "string", + "required": false, + "default": "\"/newsletter/subscribe\"" + }, + { + "name": "method", + "type": "string", + "required": false, + "default": "\"post\"" + }, + { + "name": "emailName", + "type": "string", + "required": false, + "default": "\"email\"" + }, + { + "name": "privacyLabel", "type": "string", "required": false, "default": "\"\"" }, { - "name": "actionLabel", + "name": "privacyHref", "type": "string", "required": false, - "default": "\"Learn more\"" + "default": "\"/privacy\"" }, { - "name": "image", + "name": "successMessage", "type": "string", "required": false, - "default": "\"\"" + "default": "\"You are subscribed.\"" }, { - "name": "alt", + "name": "errorMessage", "type": "string", "required": false, - "default": "\"\"" + "default": "\"Something went wrong. Please try again.\"" }, { - "name": "class", + "name": "iconClass", "type": "string", "required": false, - "default": "\"\"" + "default": "\"icon-[lucide--mail]\"" + }, + { + "name": "centered", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "compact", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "showIcon", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "showPrivacy", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "fullWidth", + "type": "boolean", + "required": false, + "default": "false" } ], - "slots": ["default"], - "events": [], + "slots": [], + "events": ["submit", "input"], "source": "components/NewsletterForm.wrn" }, { @@ -28806,6 +29163,113 @@ "events": [], "source": "components/PageAlert.wrn" }, + { + "name": "PageHeader", + "mount": "PageHeader", + "category": "core", + "purpose": "Reusable page header component.", + "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "eyebrow", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "primaryLabel", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "primaryHref", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "secondaryLabel", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "secondaryHref", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "icon", + "type": "string", + "required": false, + "default": "\"sparkles\"" + }, + { + "name": "centered", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "compact", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "showBreadcrumbs", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "breadcrumbParent", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "breadcrumbParentHref", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "breadcrumbCurrent", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "highlights", + "type": "string", + "required": false, + "default": "[]" + } + ], + "slots": [], + "events": [], + "source": "components/PageHeader.wrn" + }, { "name": "PageHeading", "mount": "PageHeading", @@ -28912,7 +29376,7 @@ "default": "\"\"" }, { - "name": "page", + "name": "currentPage", "type": "number", "required": false, "default": "1" @@ -28927,13 +29391,55 @@ "name": "previousHref", "type": "string", "required": false, - "default": "\"#\"" + "default": "\"\"" }, { "name": "nextHref", "type": "string", "required": false, - "default": "\"#\"" + "default": "\"\"" + }, + { + "name": "pages", + "type": "string", + "required": false, + "default": "[]" + }, + { + "name": "showNumbers", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "showSummary", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "totalItems", + "type": "number", + "required": false, + "default": "0" + }, + { + "name": "pageSize", + "type": "number", + "required": false, + "default": "10" + }, + { + "name": "compact", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "centered", + "type": "boolean", + "required": false, + "default": "false" } ], "slots": [], @@ -32399,6 +32905,23 @@ "events": [], "source": "components/ProductLogo.wrn" }, + { + "name": "ProductMegaMenu", + "mount": "ProductMegaMenu", + "category": "core", + "purpose": "Reusable product mega menu component.", + "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": [], + "source": "components/ProductMegaMenu.wrn" + }, { "name": "ProductMiniCard", "mount": "ProductMiniCard", @@ -33310,28 +33833,10 @@ "type": "string", "required": false, "default": "\"\"" - }, - { - "name": "brand", - "type": "string", - "required": false, - "default": "\"WRNexusJS\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"SSR-first, Bun-native full-stack framework.\"" - }, - { - "name": "copyright", - "type": "string", - "required": false, - "default": "\"© 2026 WorkRoot Workspace\"" } ], - "slots": ["default"], - "events": [], + "slots": [], + "events": ["submit"], "source": "components/PublicFooter.wrn" }, { @@ -33345,39 +33850,9 @@ "type": "string", "required": false, "default": "\"\"" - }, - { - "name": "brand", - "type": "string", - "required": false, - "default": "\"WRNexusJS\"" - }, - { - "name": "homeHref", - "type": "string", - "required": false, - "default": "\"/\"" - }, - { - "name": "signInHref", - "type": "string", - "required": false, - "default": "\"/signin\"" - }, - { - "name": "ctaHref", - "type": "string", - "required": false, - "default": "\"/start\"" - }, - { - "name": "ctaLabel", - "type": "string", - "required": false, - "default": "\"Get started\"" } ], - "slots": ["default", "mobile"], + "slots": [], "events": ["click"], "source": "components/PublicHeader.wrn" }, @@ -33440,6 +33915,23 @@ "events": [], "source": "components/PublicHeaderLogo.wrn" }, + { + "name": "PublicMobileNavigation", + "mount": "PublicMobileNavigation", + "category": "core", + "purpose": "Reusable public mobile navigation component.", + "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": ["click"], + "source": "components/PublicMobileNavigation.wrn" + }, { "name": "PublicPageShell", "mount": "PublicPageShell", @@ -33481,6 +33973,107 @@ "events": [], "source": "components/PublicPageShell.wrn" }, + { + "name": "PublicSearch", + "mount": "PublicSearch", + "category": "core", + "purpose": "Reusable public search component.", + "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "query", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "placeholder", + "type": "string", + "required": false, + "default": "\"Search...\"" + }, + { + "name": "label", + "type": "string", + "required": false, + "default": "\"Search\"" + }, + { + "name": "action", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "method", + "type": "string", + "required": false, + "default": "\"get\"" + }, + { + "name": "name", + "type": "string", + "required": false, + "default": "\"q\"" + }, + { + "name": "buttonLabel", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "clearLabel", + "type": "string", + "required": false, + "default": "\"Clear search\"" + }, + { + "name": "size", + "type": "string", + "required": false, + "default": "\"default\"" + }, + { + "name": "centered", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "fullWidth", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "showShortcut", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "shortcutLabel", + "type": "string", + "required": false, + "default": "\"⌘ K\"" + }, + { + "name": "suggestions", + "type": "string", + "required": false, + "default": "[]" + } + ], + "slots": [], + "events": ["input", "focus", "blur", "click"], + "source": "components/PublicSearch.wrn" + }, { "name": "PublishDateTimePicker", "mount": "PublishDateTimePicker", @@ -35935,30 +36528,6 @@ "category": "overlays", "purpose": "Reusable resources mega menu component.", "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, { "name": "class", "type": "string", @@ -35966,7 +36535,7 @@ "default": "\"\"" } ], - "slots": ["default"], + "slots": [], "events": [], "source": "components/ResourcesMegaMenu.wrn" }, @@ -40069,6 +40638,77 @@ "events": [], "source": "components/SmsSegmentCounter.wrn" }, + { + "name": "SocialShare", + "mount": "SocialShare", + "category": "core", + "purpose": "Reusable social share component.", + "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"Share this page\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "url", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "shareText", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "centered", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "compact", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "showTitle", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "showCopy", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "networks", + "type": "string", + "required": false, + "default": "[]" + } + ], + "slots": [], + "events": ["click"], + "source": "components/SocialShare.wrn" + }, { "name": "SolutionHero", "mount": "SolutionHero", @@ -40198,30 +40838,6 @@ "category": "overlays", "purpose": "Reusable solutions mega menu component.", "props": [ - { - "name": "title", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "description", - "type": "string", - "required": false, - "default": "\"\"" - }, - { - "name": "open", - "type": "boolean", - "required": false, - "default": "false" - }, - { - "name": "closeLabel", - "type": "string", - "required": false, - "default": "\"Close\"" - }, { "name": "class", "type": "string", @@ -40229,7 +40845,7 @@ "default": "\"\"" } ], - "slots": ["default"], + "slots": [], "events": [], "source": "components/SolutionsMegaMenu.wrn" }, @@ -40724,6 +41340,71 @@ "events": [], "source": "components/StatusBadge.wrn" }, + { + "name": "StatusBanner", + "mount": "StatusBanner", + "category": "core", + "purpose": "Reusable status banner component.", + "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "type", + "type": "string", + "required": false, + "default": "\"info\"" + }, + { + "name": "title", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "description", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "actionLabel", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "actionHref", + "type": "string", + "required": false, + "default": "\"\"" + }, + { + "name": "dismissible", + "type": "boolean", + "required": false, + "default": "true" + }, + { + "name": "compact", + "type": "boolean", + "required": false, + "default": "false" + }, + { + "name": "details", + "type": "string", + "required": false, + "default": "[]" + } + ], + "slots": [], + "events": ["click"], + "source": "components/StatusBanner.wrn" + }, { "name": "StatusPageShell", "mount": "StatusPageShell", @@ -43839,6 +44520,23 @@ "events": [], "source": "components/ToastAction.wrn" }, + { + "name": "ToastHost", + "mount": "ToastHost", + "category": "core", + "purpose": "Reusable toast host component.", + "props": [ + { + "name": "class", + "type": "string", + "required": false, + "default": "\"\"" + } + ], + "slots": [], + "events": ["click"], + "source": "components/ToastHost.wrn" + }, { "name": "ToastIcon", "mount": "ToastIcon", diff --git a/packages/ui/components/Breadcrumbs.wrn b/packages/ui/components/Breadcrumbs.wrn index 00036632..2f186735 100644 --- a/packages/ui/components/Breadcrumbs.wrn +++ b/packages/ui/components/Breadcrumbs.wrn @@ -1,11 +1,105 @@ component Breadcrumbs { - props { - class = "" - homeLabel = "Home" - homeHref = "/" - current = "Current page" - } - view { - - } + props { + class: string = "" + items = [] + centered = false + compact = false + showHome = true + homeLabel = "Home" + homeHref = "/" + } + + view { + + } } diff --git a/packages/ui/components/ContactSalesBanner.wrn b/packages/ui/components/ContactSalesBanner.wrn new file mode 100644 index 00000000..58a954d9 --- /dev/null +++ b/packages/ui/components/ContactSalesBanner.wrn @@ -0,0 +1,195 @@ +component ContactSalesBanner { + props { + class: string = "" + eyebrow = "Enterprise identity" + title = "Ready to secure your next application?" + description = "" + + primaryLabel = "Contact sales" + primaryHref = "/contact" + + secondaryLabel = "Start free" + secondaryHref = "/sign-up" + + iconClass = "icon-[lucide--messages-square]" + + centered = false + compact = false + + points = [] + trustPoints = [] + } + + view { +
+
+ + + +
+ +
+ +
+ +
+ + + + {eyebrow} + +
+ + +

+ {title} +

+ + +

+ {description} +

+ + +
+ {#each points.slice(0, 4) as point} +
+ + + + + {point} +
+ {/each} +
+
+ + +
+ + {secondaryLabel} + + + + {primaryLabel} + + + +
+
+ + +
+
+ {#each trustPoints.slice(0, 4) as trustPoint} + + + + {trustPoint.label} + + {/each} +
+
+
+
+
+ } +} diff --git a/packages/ui/components/CookieConsent.wrn b/packages/ui/components/CookieConsent.wrn new file mode 100644 index 00000000..58f63e21 --- /dev/null +++ b/packages/ui/components/CookieConsent.wrn @@ -0,0 +1,372 @@ +component CookieConsent { + props { + class: string = "" + } + state bannerOpen = false + state preferencesOpen = false + + state analyticsCookies = false + state personalizationCookies = false + state marketingCookies = false + + view { +
+ + + + + + + + +
+ } +} diff --git a/packages/ui/components/DevelopersMegaMenu.wrn b/packages/ui/components/DevelopersMegaMenu.wrn new file mode 100644 index 00000000..529dddfc --- /dev/null +++ b/packages/ui/components/DevelopersMegaMenu.wrn @@ -0,0 +1,421 @@ +component DevelopersMegaMenu { + props { + class: string = "" + } + view { +
+
+
+ + +
+
+
+

+ Developers +

+ +

+ Build secure identity into any application +

+ +

+ Explore documentation, APIs, SDKs, examples, and tools built + for modern development teams. +

+
+ + +
+ +
+ + + + + + + + + + + Documentation + + + + + + + Guides for authentication, users, organizations, and + authorization. + + + + + + + + + + + + + + API reference + + + + + + + Complete endpoint, request, response, and error + documentation. + + + + + + + + + + + + + + SDKs + + + + + + + Official libraries for JavaScript, TypeScript, Go, Java, + Python, and more. + + + + + + + + + + + + + + Examples + + + + + + + Ready-to-run projects for common frameworks and identity + flows. + + + + + + + + + + + + + + Webhooks + + + + + + + Respond to user, session, organization, and security events. + + + + + + + + + + + + + + Changelog + + + + + + + Review platform releases, improvements, and migration notes. + + + +
+ + + Open documentation + + + +
+ + + +
+ + +
+
+ + + + Authentication guides + + + + + + Organizations + + + + + + Authorization + + + + + + + + + System status + +
+ + + Developer support + + + +
+
+
+ } +} diff --git a/packages/ui/components/EmptyState.wrn b/packages/ui/components/EmptyState.wrn index 1959bb46..c3c870e6 100644 --- a/packages/ui/components/EmptyState.wrn +++ b/packages/ui/components/EmptyState.wrn @@ -1,13 +1,167 @@ component EmptyState { - props { - class = "" - icon = "◇" - title = "Nothing here yet" - description = "" - actionLabel = "" - actionHref = "#" - } - view { -
{icon}

{title}

{description}

{actionLabel}
- } + props { + class: string = "" + eyebrow = "" + title = "Nothing found" + description = "" + + iconClass = "icon-[lucide--inbox]" + + primaryLabel = "" + primaryHref = "" + + secondaryLabel = "" + secondaryHref = "" + + compact = false + centered = true + + suggestions = [] + } + + view { +
+
+ + + +
+
+ +
+ + + +
+ + +

+ {eyebrow} +

+ + +

+ {title} +

+ + +

+ {description} +

+ + +
+ {#each suggestions.slice(0, 4) as suggestion} + + + + {suggestion.label} + + {/each} +
+ + +
+ + {secondaryLabel} + + + + {primaryLabel} + + + +
+
+
+
+
+ } } diff --git a/packages/ui/components/ErrorState.wrn b/packages/ui/components/ErrorState.wrn index 65bf64ff..b3776e7d 100644 --- a/packages/ui/components/ErrorState.wrn +++ b/packages/ui/components/ErrorState.wrn @@ -1,13 +1,193 @@ component ErrorState { - props { - class = "" - code = "500" - title = "Something went wrong" - description = "Please try again." - actionLabel = "Try again" - actionHref = "/" - } - view { -
{code}

{title}

{description}

{actionLabel}
- } + props { + class: string = "" + type = "error" + + eyebrow = "" + title = "Something went wrong" + description = "" + + errorCode = "" + + iconClass = "" + + primaryLabel = "" + primaryHref = "" + + secondaryLabel = "" + secondaryHref = "" + + retryLabel = "" + retryAction = "" + + centered = true + compact = false + + details = [] + } + + view { +
+
+ + + +
+
+ +
+
+ + + + + +
+
+ + +
+ + {errorCode} + +
+ + +

+ {eyebrow} +

+ + +

+ {title} +

+ + +

+ {description} +

+ + +
+ {#each details.slice(0, 4) as detail} +
+ + + + + {detail.label} +
+ {/each} +
+ + +
+ + + {secondaryLabel} + + + + + + + + {primaryLabel} + + + +
+
+
+
+
+ } } diff --git a/packages/ui/components/LogoCloud.wrn b/packages/ui/components/LogoCloud.wrn index 41d26bbc..bc207fd5 100644 --- a/packages/ui/components/LogoCloud.wrn +++ b/packages/ui/components/LogoCloud.wrn @@ -1,9 +1,150 @@ component LogoCloud { - props { - class = "" - title = "Trusted by modern teams" - } - view { -

{title}

- } + props { + class: string = "" + eyebrow = "" + title = "Trusted by teams building modern products" + description = "" + + logos = [] + + centered = true + compact = false + + variant = "strip" + grayscale = true + showNames = false + maxItems = 8 + } + + view { +
+
+ + + +
+ +
+

+ {eyebrow} +

+ +

+ {title} +

+ +

+ {description} +

+
+ + +
+ {#each logos.slice(0, maxItems) as logo} + + +
+ {logo.alt !== '' ? logo.alt : logo.name} + + + +
+ + +
+

+ {logo.name} +

+ +

+ {logo.description} +

+
+ + {/each} +
+ + +

+ And {logos.length - maxItems} more teams using WrNexus. +

+
+
+
+ } } diff --git a/packages/ui/components/NewsletterForm.wrn b/packages/ui/components/NewsletterForm.wrn index 1ed569a9..c7790ea7 100644 --- a/packages/ui/components/NewsletterForm.wrn +++ b/packages/ui/components/NewsletterForm.wrn @@ -1,13 +1,214 @@ component NewsletterForm { - props { - eyebrow = "" - title = "" - description = "" - href = "" - actionLabel = "Learn more" - image = "" - alt = "" - class = "" - } - view {
{alt}{eyebrow}

{title}

{description}

{actionLabel}
} + props { + class: string = "" + eyebrow = "" + title = "Stay up to date" + description = "" + + placeholder = "Enter your email" + buttonLabel = "Subscribe" + + action = "/newsletter/subscribe" + method = "post" + emailName = "email" + + privacyLabel = "" + privacyHref = "/privacy" + + successMessage = "You are subscribed." + errorMessage = "Something went wrong. Please try again." + + iconClass = "icon-[lucide--mail]" + + centered = false + compact = false + showIcon = true + showPrivacy = true + fullWidth = false + } + + state email = "" + state status = "idle" + state message = "" + + view { +
+
+ + + +
+
+ +
+
+ +
+ + + + + +
+ +
+ +

+ {eyebrow} +

+ + +

+ {title} +

+
+
+ + +

+ {description} +

+
+ + +
+
+ + +
+
+ + + +
+ + +
+
+ +

+ No spam. Unsubscribe at any time. + + + {privacyLabel} + +

+ +
+ {message} +
+
+
+
+
+
+ } } diff --git a/packages/ui/components/PageHeader.wrn b/packages/ui/components/PageHeader.wrn new file mode 100644 index 00000000..6fd1a09d --- /dev/null +++ b/packages/ui/components/PageHeader.wrn @@ -0,0 +1,172 @@ +component PageHeader { + props { + class: string = "" + eyebrow = "" + title = "" + description = "" + + primaryLabel = "" + primaryHref = "" + + secondaryLabel = "" + secondaryHref = "" + + icon = "sparkles" + + centered = false + compact = false + + showBreadcrumbs = false + breadcrumbParent = "" + breadcrumbParentHref = "" + breadcrumbCurrent = "" + + highlights = [] + } + + view { +
+ + + +
+ + +
+ +
+ + +
+ +
+ +
+ + + + + + {eyebrow} + +
+ + +

+ {title} +

+ + +

+ {description} +

+
+ + +
+ + + {secondaryLabel} + + + + + {primaryLabel} + + + +
+
+ + +
+
+ {#each highlights as highlight} +
+
+ + + + +
+

+ {highlight.title} +

+ +

+ {highlight.description} +

+
+
+
+ {/each} +
+
+
+
+ } +} diff --git a/packages/ui/components/Pagination.wrn b/packages/ui/components/Pagination.wrn index 712d1d3c..05d24965 100644 --- a/packages/ui/components/Pagination.wrn +++ b/packages/ui/components/Pagination.wrn @@ -1,12 +1,187 @@ component Pagination { - props { - class = "" - page = 1 - totalPages = 1 - previousHref = "#" - nextHref = "#" - } - view { - - } + props { + class: string = "" + currentPage = 1 + totalPages = 1 + + previousHref = "" + nextHref = "" + + pages = [] + + showNumbers = true + showSummary = true + + totalItems = 0 + pageSize = 10 + + compact = false + centered = false + } + + view { + + } } diff --git a/packages/ui/components/ProductMegaMenu.wrn b/packages/ui/components/ProductMegaMenu.wrn new file mode 100644 index 00000000..09a9d48a --- /dev/null +++ b/packages/ui/components/ProductMegaMenu.wrn @@ -0,0 +1,332 @@ +component ProductMegaMenu { + props { + class: string = "" + } + view { +
+
+
+ + +
+
+
+

+ WrNexus platform +

+ +

+ Everything you need to manage identity +

+
+ + +
+ +
+ + + + + + + + + + + Platform + + + + + + + Unified identity infrastructure for every application. + + + + + + + + + + + + + + Authentication + + + + + + + Passwords, passkeys, social login, MFA, and SSO. + + + + + + + + + + + + + + User management + + + + + + + Profiles, sessions, invitations, and user lifecycle. + + + + + + + + + + + + + + Organizations + + + + + + + Multi-tenant workspaces, teams, domains, and membership. + + + + + + + + + + + + + + Authorization + + + + + + + Roles, permissions, policies, and protected resources. + + + + + + + + + + + + + + Security + + + + + + + Session controls, recovery, audit logs, and threat protection. + + + +
+ + + View all product features + + + +
+ + + + +
+ + +
+
+ + + + Integrations + + + + + + Enterprise SSO + + + + + + Audit logs + +
+ + + Read the documentation + + + +
+
+
+ } +} diff --git a/packages/ui/components/PublicFooter.wrn b/packages/ui/components/PublicFooter.wrn index daea9e2d..7d5b7fee 100644 --- a/packages/ui/components/PublicFooter.wrn +++ b/packages/ui/components/PublicFooter.wrn @@ -1,11 +1,608 @@ component PublicFooter { - props { - class = "" - brand = "WRNexusJS" - description = "SSR-first, Bun-native full-stack framework." - copyright = "© 2026 WorkRoot Workspace" - } - view { - - } + props { + class: string = "" + } + state email = "" + state newsletterSubmitted = false + + view { + + } } diff --git a/packages/ui/components/PublicHeader.wrn b/packages/ui/components/PublicHeader.wrn index db9c0ac6..4168c9a4 100644 --- a/packages/ui/components/PublicHeader.wrn +++ b/packages/ui/components/PublicHeader.wrn @@ -1,14 +1,284 @@ component PublicHeader { - props { - class = "" - brand = "WRNexusJS" - homeHref = "/" - signInHref = "/signin" - ctaHref = "/start" - ctaLabel = "Get started" - } - state mobileOpen = false - view { -
{brand}
Sign in{ctaLabel}
- } + props { + class: string = "" + } + state activeMenu = "" + state mobileMenuOpen = false + state headerScrolled = false + + view { +
+
+ + + + + + + + + + WrNexus + + + + Identity Cloud + + + + + + + + + + + +
+ + + +
+ +
+ + + + + +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+ +
+
+ } } diff --git a/packages/ui/components/PublicMobileNavigation.wrn b/packages/ui/components/PublicMobileNavigation.wrn new file mode 100644 index 00000000..b8640479 --- /dev/null +++ b/packages/ui/components/PublicMobileNavigation.wrn @@ -0,0 +1,589 @@ +component PublicMobileNavigation { + props { + class: string = "" + } + state openSection = "" + + view { +
+
+ + + + + + + + + + + + All systems operational + + + + View service status + + + + + + + + + + +
+ + + + Sign in + + + + Start free + + + +
+ +

+ Secure identity infrastructure for modern applications. +

+ +
+
+ } +} diff --git a/packages/ui/components/PublicSearch.wrn b/packages/ui/components/PublicSearch.wrn new file mode 100644 index 00000000..612c374d --- /dev/null +++ b/packages/ui/components/PublicSearch.wrn @@ -0,0 +1,125 @@ +component PublicSearch { + props { + class: string = "" + query = "" + + placeholder = "Search..." + label = "Search" + + action = "" + method = "get" + name = "q" + + buttonLabel = "" + clearLabel = "Clear search" + + size = "default" + centered = false + fullWidth = false + + showShortcut = false + shortcutLabel = "⌘ K" + + suggestions = [] + } + + state searchValue = query + state focused = false + + view { +
+ + + +
+ + Popular: + + + {#each suggestions.slice(0, 5) as suggestion} + + + + {suggestion.label} + + {/each} +
+
+ } +} diff --git a/packages/ui/components/ResourcesMegaMenu.wrn b/packages/ui/components/ResourcesMegaMenu.wrn index 67694937..e5b32038 100644 --- a/packages/ui/components/ResourcesMegaMenu.wrn +++ b/packages/ui/components/ResourcesMegaMenu.wrn @@ -1,10 +1,365 @@ component ResourcesMegaMenu { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} + props { + class: string = "" + } + view { +
+
+
+ + +
+
+
+

+ Resources +

+ +

+ Learn, build, and get support +

+ +

+ Explore practical guides, customer stories, product updates, + and security resources. +

+
+ + +
+ +
+ + + + + + + + + + + Blog + + + + + + + Product updates, engineering insights, identity trends, and + company news. + + + + + + + + + + + + + + Customer stories + + + + + + + See how teams use WrNexus to secure and scale their + applications. + + + + + + + + + + + + + + Guides + + + + + + + Practical identity, security, SaaS, and architecture + walkthroughs. + + + + + + + + + + + + + + Help center + + + + + + + Find answers for account, workspace, billing, and security + questions. + + + + + + + + + + + + + + Security + + + + + + + Learn how WrNexus protects accounts, sessions, and + organizations. + + + + + + + + + + + + + + Trust center + + + + + + + Review compliance, privacy, infrastructure, and operational + controls. + + + +
+ + + View all resources + + + +
+ + + +
+ + +
+
+ + + + Webinars + + + + + + Events + + + + + + Reports + + + + + + Newsletter + +
+ + + Contact our team + + + +
+
+
+ } } diff --git a/packages/ui/components/SocialShare.wrn b/packages/ui/components/SocialShare.wrn new file mode 100644 index 00000000..b0420ef5 --- /dev/null +++ b/packages/ui/components/SocialShare.wrn @@ -0,0 +1,143 @@ +component SocialShare { + props { + class: string = "" + title = "Share this page" + description = "" + + url = "" + shareText = "" + + centered = false + compact = false + showTitle = true + showCopy = true + + networks = [] + } + + state copied = false + + view { + + } +} diff --git a/packages/ui/components/SolutionsMegaMenu.wrn b/packages/ui/components/SolutionsMegaMenu.wrn index a6f22457..48a1c6f3 100644 --- a/packages/ui/components/SolutionsMegaMenu.wrn +++ b/packages/ui/components/SolutionsMegaMenu.wrn @@ -1,10 +1,368 @@ component SolutionsMegaMenu { - props { - title = "" - description = "" - open = false - closeLabel = "Close" - class = "" - } - view {
} + props { + class: string = "" + } + view { +
+
+
+ + +
+
+
+

+ Solutions +

+ +

+ Identity infrastructure for every stage of growth +

+ +

+ Choose a solution designed around your product, team, and customers. +

+
+ + +
+ +
+ + + + + + + + + + + Startups + + + + + + + Launch secure authentication quickly without slowing product development. + + + + + + + + + + + + + + SaaS platforms + + + + + + + Add users, organizations, roles, SSO, and secure account recovery. + + + + + + + + + + + + + + Enterprise + + + + + + + Support complex organizations, governance, auditability, and scale. + + + + + + + + + + + + + + Developers + + + + + + + APIs, SDKs, webhooks, templates, and developer-friendly workflows. + + + + + + + + + + + + + + Agencies + + + + + + + Manage identities across customer projects and branded experiences. + + + + + + + + + + + + + + B2B products + + + + + + + Secure customer organizations, team access, and enterprise connections. + + + +
+ + + View all solutions + + + +
+ + + +
+ + +
+
+ + + + Customer identity + + + + + + Workforce identity + + + + + + Marketplaces + + + + + + Multi-tenant apps + +
+ + + See customer stories + + + +
+
+
+ } } diff --git a/packages/ui/components/StatusBanner.wrn b/packages/ui/components/StatusBanner.wrn new file mode 100644 index 00000000..83c8f0f7 --- /dev/null +++ b/packages/ui/components/StatusBanner.wrn @@ -0,0 +1,122 @@ +component StatusBanner { + props { + class: string = "" + type = "info" + + title = "" + description = "" + + actionLabel = "" + actionHref = "" + + dismissible = true + compact = false + + details = [] + } + + state visible = true + + view { + + } +} diff --git a/packages/ui/components/ToastHost.wrn b/packages/ui/components/ToastHost.wrn new file mode 100644 index 00000000..36a516b5 --- /dev/null +++ b/packages/ui/components/ToastHost.wrn @@ -0,0 +1,212 @@ +component ToastHost { + props { + class: string = "" + } + state successOpen = false + state errorOpen = false + state warningOpen = false + state infoOpen = false + + state successTitle = "Changes saved" + state successMessage = "Your changes were saved successfully." + + state errorTitle = "Something went wrong" + state errorMessage = "We could not complete your request. Please try again." + + state warningTitle = "Action required" + state warningMessage = "Review the highlighted information before continuing." + + state infoTitle = "New update available" + state infoMessage = "A newer version of this feature is now available." + + view { +
+ +
+
+ +
+ + + + +
+

+ {successTitle} +

+ +

+ {successMessage} +

+
+ + +
+ +
+
+
+
+ + + + + +
+
+ +
+ + + + +
+

+ {warningTitle} +

+ +

+ {warningMessage} +

+
+ + +
+ +
+
+
+
+ + + +
+ } +} diff --git a/packages/ui/package.json b/packages/ui/package.json index 535de76c..8af0addc 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ui", - "version": "0.2.61", + "version": "0.2.62", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/ui/test/ui.test.ts b/packages/ui/test/ui.test.ts index 4e247de7..0fada5d0 100644 --- a/packages/ui/test/ui.test.ts +++ b/packages/ui/test/ui.test.ts @@ -79,6 +79,9 @@ test("component-system CSS includes responsive, theme-token, focus, and reduced- expect(css).toContain("--color-violet-600: var(--wire-color-primary)"); expect(css).toContain("--color-blue-600: var(--wire-color-info)"); expect(css).toContain("--color-red-600: var(--wire-color-danger)"); + expect(css).toMatch(/:root\s*\{[^}]*--color-violet-600: var\(--wire-color-primary\)/s); + expect(css).toContain(".wire-bg-primary"); + expect(css).toContain(".wire-text-muted"); }); test("page shells leave background ownership to the page", () => { diff --git a/packages/ui/ui.css b/packages/ui/ui.css index 78437c37..44455d5d 100644 --- a/packages/ui/ui.css +++ b/packages/ui/ui.css @@ -1050,9 +1050,10 @@ --wire-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); } -/* Tailwind v4 color bridge. Existing utility-authored components inherit the - * configured semantic palette without requiring generated per-palette markup. */ -[data-component] { +/* Tailwind v4 color bridge. Define the aliases at the document root so both + * packaged components and application-authored pages/components inherit the + * palette selected in wrnexus.config.ts. */ +:root { --color-violet-50: color-mix(in srgb, var(--wire-color-primary) 7%, white); --color-violet-100: color-mix(in srgb, var(--wire-color-primary) 14%, white); --color-violet-200: color-mix(in srgb, var(--wire-color-primary) 25%, white); @@ -1096,6 +1097,47 @@ --color-rose-700: color-mix(in srgb, var(--wire-color-danger) 80%, black); } +/* Stable semantic helpers for application-authored markup. These deliberately + * avoid spacing so applications remain in control of their own layout. */ +.wire-bg-page { + background-color: var(--wire-color-bg); +} +.wire-bg-surface { + background-color: var(--wire-color-surface); +} +.wire-bg-surface-2 { + background-color: var(--wire-color-surface-2); +} +.wire-bg-primary { + background-color: var(--wire-color-primary); + color: var(--wire-color-primary-contrast); +} +.wire-bg-secondary { + background-color: var(--wire-color-secondary); + color: var(--wire-color-secondary-contrast); +} +.wire-text { + color: var(--wire-color-text); +} +.wire-text-muted { + color: var(--wire-color-muted); +} +.wire-text-primary { + color: var(--wire-color-primary); +} +.wire-text-success { + color: var(--wire-color-success); +} +.wire-text-warning { + color: var(--wire-color-warning); +} +.wire-text-danger { + color: var(--wire-color-danger); +} +.wire-border { + border-color: var(--wire-color-border); +} + [data-component] { animation: wire-component-enter var(--wire-motion-slow) var(--wire-ease-emphasized) both; } diff --git a/packages/uploader/package.json b/packages/uploader/package.json index 764f18f6..c5a11412 100644 --- a/packages/uploader/package.json +++ b/packages/uploader/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/uploader", - "version": "0.2.61", + "version": "0.2.62", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/validation/package.json b/packages/validation/package.json index 1fb8bcad..0d312a27 100644 --- a/packages/validation/package.json +++ b/packages/validation/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/validation", - "version": "0.2.61", + "version": "0.2.62", "private": true, "type": "module", "main": "src/index.ts",