From df4c1d3e7dacbd385c888d9682585e23190278cc Mon Sep 17 00:00:00 2001
From: Ajay Ghanwat <ghanwat.ajay@workroot.in>
Date: Sun, 19 Jul 2026 13:38:23 +0530
Subject: [PATCH] release: WRNexusJS 0.2.51

---
 .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/ApiEndpointCard.wrn    | 34 ++++++++++++++++++-
 .publish/ui/components/Banner.wrn             | 12 ++++++-
 .publish/ui/components/Breadcrumbs.wrn        | 11 +++++-
 .publish/ui/components/CTASection.wrn         | 15 +++++++-
 .publish/ui/components/Cluster.wrn            | 10 +++++-
 .publish/ui/components/CodeBlock.wrn          | 12 ++++++-
 .publish/ui/components/CookieBanner.wrn       | 12 ++++++-
 .publish/ui/components/DateInput.wrn          | 14 +++++++-
 .publish/ui/components/DatePicker.wrn         | 15 +++++++-
 .publish/ui/components/DateRangePicker.wrn    | 11 +++++-
 .publish/ui/components/DateTimeInput.wrn      | 14 +++++++-
 .publish/ui/components/Drawer.wrn             | 12 ++++++-
 .publish/ui/components/DropdownMenu.wrn       | 10 +++++-
 .publish/ui/components/EmailInput.wrn         | 14 +++++++-
 .publish/ui/components/EmptyState.wrn         | 13 ++++++-
 .publish/ui/components/ErrorState.wrn         | 13 ++++++-
 .publish/ui/components/FeatureCard.wrn        | 12 ++++++-
 .publish/ui/components/FeatureGrid.wrn        | 10 +++++-
 .publish/ui/components/FileUpload.wrn         | 14 +++++++-
 .publish/ui/components/FormErrorSummary.wrn   | 10 +++++-
 .publish/ui/components/FormField.wrn          | 12 ++++++-
 .publish/ui/components/Hero.wrn               | 17 +++++++++-
 .publish/ui/components/IconButton.wrn         |  7 +++-
 .publish/ui/components/Inline.wrn             | 10 +++++-
 .../ui/components/LegalDocumentLayout.wrn     | 11 +++++-
 .publish/ui/components/Link.wrn               | 12 ++++++-
 .publish/ui/components/LogoCloud.wrn          |  9 ++++-
 .publish/ui/components/Modal.wrn              | 14 +++++++-
 .publish/ui/components/NumberInput.wrn        | 14 +++++++-
 .publish/ui/components/OtpInput.wrn           | 11 +++++-
 .publish/ui/components/PageShell.wrn          |  9 ++++-
 .publish/ui/components/Pagination.wrn         | 12 ++++++-
 .publish/ui/components/PasswordInput.wrn      | 14 +++++++-
 .publish/ui/components/PhoneInput.wrn         | 14 +++++++-
 .publish/ui/components/PricingPlanCard.wrn    | 15 +++++++-
 .publish/ui/components/ProgressBar.wrn        | 12 ++++++-
 .publish/ui/components/PublicFooter.wrn       | 11 +++++-
 .publish/ui/components/PublicHeader.wrn       | 14 +++++++-
 .publish/ui/components/RadioGroup.wrn         | 10 +++++-
 .publish/ui/components/SchedulePicker.wrn     |  9 ++++-
 .publish/ui/components/SearchInput.wrn        | 14 +++++++-
 .publish/ui/components/Section.wrn            |  7 +++-
 .publish/ui/components/SectionHeader.wrn      | 12 ++++++-
 .publish/ui/components/StatCard.wrn           | 12 ++++++-
 .publish/ui/components/StatusBadge.wrn        |  9 ++++-
 .publish/ui/components/Tabs.wrn               | 10 +++++-
 .publish/ui/components/TestimonialCard.wrn    | 13 ++++++-
 .publish/ui/components/TextInput.wrn          | 14 +++++++-
 .publish/ui/components/TimeInput.wrn          | 14 +++++++-
 .publish/ui/components/Timeline.wrn           |  9 ++++-
 .publish/ui/components/TimelineItem.wrn       | 12 ++++++-
 .publish/ui/components/TimezoneSelector.wrn   | 11 +++++-
 .publish/ui/components/Toast.wrn              | 13 ++++++-
 .publish/ui/components/UrlInput.wrn           | 14 +++++++-
 .publish/ui/components/VisuallyHidden.wrn     |  9 ++++-
 .publish/ui/components/avatar.wrn             | 12 ++++++-
 .publish/ui/components/badge.wrn              | 10 +++++-
 .publish/ui/components/button.wrn             | 11 +++++-
 .publish/ui/components/card.wrn               | 12 ++++++-
 .publish/ui/components/checkbox.wrn           | 14 +++++++-
 .publish/ui/components/container.wrn          |  5 ++-
 .publish/ui/components/divider.wrn            |  9 ++++-
 .publish/ui/components/grid.wrn               | 10 +++++-
 .publish/ui/components/radio.wrn              | 15 +++++++-
 .publish/ui/components/select.wrn             | 15 +++++++-
 .publish/ui/components/skeleton.wrn           | 11 +++++-
 .publish/ui/components/spinner.wrn            | 10 +++++-
 .publish/ui/components/stack.wrn              | 10 +++++-
 .publish/ui/components/switch.wrn             | 15 +++++++-
 .publish/ui/components/table.wrn              | 10 +++++-
 .publish/ui/components/textarea.wrn           | 18 +++++++++-
 .publish/ui/components/tooltip.wrn            | 10 +++++-
 .publish/ui/package.json                      |  4 +--
 .publish/uploader/package.json                |  4 +--
 .publish/validation/package.json              |  2 +-
 README.md                                     |  4 +--
 docs/GUIDE.md                                 |  4 +--
 examples/basic-app/wrnexus.config.ts          |  4 +--
 packages/ai/package.json                      |  2 +-
 packages/authz/package.json                   |  2 +-
 packages/cli/package.json                     |  2 +-
 packages/cli/src/create.ts                    |  4 +--
 packages/cli/src/update.ts                    |  8 +++++
 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/ApiEndpointCard.wrn    | 34 ++++++++++++++++++-
 packages/ui/components/Banner.wrn             | 12 ++++++-
 packages/ui/components/Breadcrumbs.wrn        | 11 +++++-
 packages/ui/components/CTASection.wrn         | 15 +++++++-
 packages/ui/components/Cluster.wrn            | 10 +++++-
 packages/ui/components/CodeBlock.wrn          | 12 ++++++-
 packages/ui/components/CookieBanner.wrn       | 12 ++++++-
 packages/ui/components/DateInput.wrn          | 14 +++++++-
 packages/ui/components/DatePicker.wrn         | 15 +++++++-
 packages/ui/components/DateRangePicker.wrn    | 11 +++++-
 packages/ui/components/DateTimeInput.wrn      | 14 +++++++-
 packages/ui/components/Drawer.wrn             | 12 ++++++-
 packages/ui/components/DropdownMenu.wrn       | 10 +++++-
 packages/ui/components/EmailInput.wrn         | 14 +++++++-
 packages/ui/components/EmptyState.wrn         | 13 ++++++-
 packages/ui/components/ErrorState.wrn         | 13 ++++++-
 packages/ui/components/FeatureCard.wrn        | 12 ++++++-
 packages/ui/components/FeatureGrid.wrn        | 10 +++++-
 packages/ui/components/FileUpload.wrn         | 14 +++++++-
 packages/ui/components/FormErrorSummary.wrn   | 10 +++++-
 packages/ui/components/FormField.wrn          | 12 ++++++-
 packages/ui/components/Hero.wrn               | 17 +++++++++-
 packages/ui/components/IconButton.wrn         |  7 +++-
 packages/ui/components/Inline.wrn             | 10 +++++-
 .../ui/components/LegalDocumentLayout.wrn     | 11 +++++-
 packages/ui/components/Link.wrn               | 12 ++++++-
 packages/ui/components/LogoCloud.wrn          |  9 ++++-
 packages/ui/components/Modal.wrn              | 14 +++++++-
 packages/ui/components/NumberInput.wrn        | 14 +++++++-
 packages/ui/components/OtpInput.wrn           | 11 +++++-
 packages/ui/components/PageShell.wrn          |  9 ++++-
 packages/ui/components/Pagination.wrn         | 12 ++++++-
 packages/ui/components/PasswordInput.wrn      | 14 +++++++-
 packages/ui/components/PhoneInput.wrn         | 14 +++++++-
 packages/ui/components/PricingPlanCard.wrn    | 15 +++++++-
 packages/ui/components/ProgressBar.wrn        | 12 ++++++-
 packages/ui/components/PublicFooter.wrn       | 11 +++++-
 packages/ui/components/PublicHeader.wrn       | 14 +++++++-
 packages/ui/components/RadioGroup.wrn         | 10 +++++-
 packages/ui/components/SchedulePicker.wrn     |  9 ++++-
 packages/ui/components/SearchInput.wrn        | 14 +++++++-
 packages/ui/components/Section.wrn            |  7 +++-
 packages/ui/components/SectionHeader.wrn      | 12 ++++++-
 packages/ui/components/StatCard.wrn           | 12 ++++++-
 packages/ui/components/StatusBadge.wrn        |  9 ++++-
 packages/ui/components/Tabs.wrn               | 10 +++++-
 packages/ui/components/TestimonialCard.wrn    | 13 ++++++-
 packages/ui/components/TextInput.wrn          | 14 +++++++-
 packages/ui/components/TimeInput.wrn          | 14 +++++++-
 packages/ui/components/Timeline.wrn           |  9 ++++-
 packages/ui/components/TimelineItem.wrn       | 12 ++++++-
 packages/ui/components/TimezoneSelector.wrn   | 11 +++++-
 packages/ui/components/Toast.wrn              | 13 ++++++-
 packages/ui/components/UrlInput.wrn           | 14 +++++++-
 packages/ui/components/VisuallyHidden.wrn     |  9 ++++-
 packages/ui/components/avatar.wrn             | 12 ++++++-
 packages/ui/components/badge.wrn              | 10 +++++-
 packages/ui/components/button.wrn             | 11 +++++-
 packages/ui/components/card.wrn               | 12 ++++++-
 packages/ui/components/checkbox.wrn           | 14 +++++++-
 packages/ui/components/container.wrn          |  5 ++-
 packages/ui/components/divider.wrn            |  9 ++++-
 packages/ui/components/grid.wrn               | 10 +++++-
 packages/ui/components/radio.wrn              | 15 +++++++-
 packages/ui/components/select.wrn             | 15 +++++++-
 packages/ui/components/skeleton.wrn           | 11 +++++-
 packages/ui/components/spinner.wrn            | 10 +++++-
 packages/ui/components/stack.wrn              | 10 +++++-
 packages/ui/components/switch.wrn             | 15 +++++++-
 packages/ui/components/table.wrn              | 10 +++++-
 packages/ui/components/textarea.wrn           | 18 +++++++++-
 packages/ui/components/tooltip.wrn            | 10 +++++-
 packages/ui/package.json                      |  2 +-
 packages/ui/test/ui.test.ts                   |  6 ++++
 packages/uploader/package.json                |  2 +-
 packages/validation/package.json              |  2 +-
 update-package-versions.mjs                   |  2 +-
 203 files changed, 1713 insertions(+), 237 deletions(-)

diff --git a/.publish/ai/package.json b/.publish/ai/package.json
index 558456b9..694ef9be 100644
--- a/.publish/ai/package.json
+++ b/.publish/ai/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ai",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "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 b84f5142..84404d72 100644
--- a/.publish/authz/package.json
+++ b/.publish/authz/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/authz",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "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 db9d1bd2..3662e500 100644
--- a/.publish/cli/package.json
+++ b/.publish/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/cli",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "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.50",
-    "@wrnexus/router": "^0.2.50",
-    "@wrnexus/csr": "^0.2.50",
-    "@wrnexus/compiler": "^0.2.50",
-    "@wrnexus/styles": "^0.2.50",
-    "@wrnexus/dev-server": "^0.2.50",
-    "@wrnexus/ui": "^0.2.50",
-    "@wrnexus/validation": "^0.2.50",
-    "@wrnexus/i18n": "^0.2.50",
-    "@wrnexus/db": "^0.2.50"
+    "@wrnexus/core": "^0.2.51",
+    "@wrnexus/router": "^0.2.51",
+    "@wrnexus/csr": "^0.2.51",
+    "@wrnexus/compiler": "^0.2.51",
+    "@wrnexus/styles": "^0.2.51",
+    "@wrnexus/dev-server": "^0.2.51",
+    "@wrnexus/ui": "^0.2.51",
+    "@wrnexus/validation": "^0.2.51",
+    "@wrnexus/i18n": "^0.2.51",
+    "@wrnexus/db": "^0.2.51"
   },
   "files": [
     "dist"
diff --git a/.publish/compiler/package.json b/.publish/compiler/package.json
index f06b3a7a..e8ec989c 100644
--- a/.publish/compiler/package.json
+++ b/.publish/compiler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/compiler",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "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 fd712234..eefaf8a4 100644
--- a/.publish/core/package.json
+++ b/.publish/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/core",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "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 431fa052..2d1815bd 100644
--- a/.publish/csr/package.json
+++ b/.publish/csr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/csr",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "description": "@wrnexus/csr — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.50"
+    "@wrnexus/core": "^0.2.51"
   },
   "files": [
     "dist"
diff --git a/.publish/db/package.json b/.publish/db/package.json
index 57e4a0c5..eb3e530a 100644
--- a/.publish/db/package.json
+++ b/.publish/db/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/db",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "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 2356ae9f..488d7442 100644
--- a/.publish/dev-server/package.json
+++ b/.publish/dev-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-server",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "description": "@wrnexus/dev-server — part of the WrNexus framework.",
   "license": "MIT",
@@ -25,18 +25,18 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.50",
-    "@wrnexus/router": "^0.2.50",
-    "@wrnexus/ssr": "^0.2.50",
-    "@wrnexus/csr": "^0.2.50",
-    "@wrnexus/compiler": "^0.2.50",
-    "@wrnexus/styles": "^0.2.50",
-    "@wrnexus/ui": "^0.2.50",
-    "@wrnexus/validation": "^0.2.50",
-    "@wrnexus/i18n": "^0.2.50",
-    "@wrnexus/db": "^0.2.50",
-    "@wrnexus/pubsub": "^0.2.50",
-    "@wrnexus/uploader": "^0.2.50"
+    "@wrnexus/core": "^0.2.51",
+    "@wrnexus/router": "^0.2.51",
+    "@wrnexus/ssr": "^0.2.51",
+    "@wrnexus/csr": "^0.2.51",
+    "@wrnexus/compiler": "^0.2.51",
+    "@wrnexus/styles": "^0.2.51",
+    "@wrnexus/ui": "^0.2.51",
+    "@wrnexus/validation": "^0.2.51",
+    "@wrnexus/i18n": "^0.2.51",
+    "@wrnexus/db": "^0.2.51",
+    "@wrnexus/pubsub": "^0.2.51",
+    "@wrnexus/uploader": "^0.2.51"
   },
   "files": [
     "dist"
diff --git a/.publish/encryption/package.json b/.publish/encryption/package.json
index d1884c15..4613833a 100644
--- a/.publish/encryption/package.json
+++ b/.publish/encryption/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/encryption",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "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 97245cfe..ae15bb32 100644
--- a/.publish/helpers/package.json
+++ b/.publish/helpers/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/helpers",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "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.50"
+    "@wrnexus/core": "^0.2.51"
   },
   "files": [
     "dist"
diff --git a/.publish/i18n/package.json b/.publish/i18n/package.json
index c7356425..7d8c48a7 100644
--- a/.publish/i18n/package.json
+++ b/.publish/i18n/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/i18n",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "description": "@wrnexus/i18n — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.50"
+    "@wrnexus/core": "^0.2.51"
   },
   "files": [
     "dist"
diff --git a/.publish/jwt/package.json b/.publish/jwt/package.json
index 9a3dd56e..256ab1e4 100644
--- a/.publish/jwt/package.json
+++ b/.publish/jwt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/jwt",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "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 6ce3d643..e1893d0b 100644
--- a/.publish/mobile/package.json
+++ b/.publish/mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/mobile",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "description": "@wrnexus/mobile — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/native": "^0.2.50"
+    "@wrnexus/native": "^0.2.51"
   },
   "files": [
     "dist"
diff --git a/.publish/native/package.json b/.publish/native/package.json
index 149eb19a..1f8192b2 100644
--- a/.publish/native/package.json
+++ b/.publish/native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/native",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "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 8d3d29fd..23b563bc 100644
--- a/.publish/oauth/package.json
+++ b/.publish/oauth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/oauth",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "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 1204ad18..ca709f38 100644
--- a/.publish/pubsub/package.json
+++ b/.publish/pubsub/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/pubsub",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "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 a2a61b2d..835c6c9b 100644
--- a/.publish/queue/package.json
+++ b/.publish/queue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/queue",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "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 e6473330..255afb24 100644
--- a/.publish/reactive/package.json
+++ b/.publish/reactive/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/reactive",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "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 61057843..b7f621d8 100644
--- a/.publish/router/package.json
+++ b/.publish/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/router",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "description": "@wrnexus/router — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,8 +21,8 @@
     }
   },
   "dependencies": {
-    "@wrnexus/compiler": "^0.2.50",
-    "@wrnexus/core": "^0.2.50"
+    "@wrnexus/compiler": "^0.2.51",
+    "@wrnexus/core": "^0.2.51"
   },
   "files": [
     "dist"
diff --git a/.publish/ssr/package.json b/.publish/ssr/package.json
index e37805d3..63997d61 100644
--- a/.publish/ssr/package.json
+++ b/.publish/ssr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ssr",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "description": "@wrnexus/ssr — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.50"
+    "@wrnexus/core": "^0.2.51"
   },
   "files": [
     "dist"
diff --git a/.publish/styles/package.json b/.publish/styles/package.json
index 830a3be3..066b454c 100644
--- a/.publish/styles/package.json
+++ b/.publish/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/styles",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "description": "@wrnexus/styles — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/uploader": "^0.2.50"
+    "@wrnexus/uploader": "^0.2.51"
   },
   "files": [
     "dist"
diff --git a/.publish/test/package.json b/.publish/test/package.json
index 3e3ab1e3..3463d98c 100644
--- a/.publish/test/package.json
+++ b/.publish/test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/test",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "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 233549ec..2dba0a11 100644
--- a/.publish/tracking/package.json
+++ b/.publish/tracking/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/tracking",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "description": "@wrnexus/tracking — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/.publish/ui/components/ApiEndpointCard.wrn b/.publish/ui/components/ApiEndpointCard.wrn
index 61c7cc70..b0e222bc 100644
--- a/.publish/ui/components/ApiEndpointCard.wrn
+++ b/.publish/ui/components/ApiEndpointCard.wrn
@@ -1 +1,33 @@
-component ApiEndpointCard { props { method = "GET" path = "/api/example" description = "" } view { <article class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900"><div class="flex flex-wrap items-center gap-3"><span class="rounded-lg px-2.5 py-1 font-mono text-xs font-bold {method === 'GET' ? 'bg-emerald-100 text-emerald-700' : method === 'POST' ? 'bg-blue-100 text-blue-700' : method === 'DELETE' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'}">{method}</span><code class="text-sm font-semibold">{path}</code></div><p data-show="description" class="mt-3 text-sm text-slate-500">{description}</p><div class="mt-4"><slot /></div></article> } }
+component ApiEndpointCard {
+    props {
+        method = "GET"
+        path = "/api/example"
+        description = ""
+    }
+
+    view {
+        <article
+            class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900"
+        >
+            <div class="flex flex-wrap items-center gap-3" >
+                <span
+                    class="rounded-lg px-2.5 py-1 font-mono text-xs font-bold {method === 'GET' ? 'bg-emerald-100 text-emerald-700' : method === 'POST' ? 'bg-blue-100 text-blue-700' : method === 'DELETE' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'}"
+                >
+                    {method}
+                </span>
+                <code class="text-sm font-semibold">
+                    {path}
+                </code>
+            </div>
+            <p
+                data-show="description"
+                class="mt-3 text-sm text-slate-500"
+            >
+                {description}
+            </p>
+            <div class="mt-4">
+                <slot />
+            </div>
+        </article>
+    }
+}
diff --git a/.publish/ui/components/Banner.wrn b/.publish/ui/components/Banner.wrn
index 48b6dbff..efa864fa 100644
--- a/.publish/ui/components/Banner.wrn
+++ b/.publish/ui/components/Banner.wrn
@@ -1 +1,11 @@
-component Banner { props { text = "Announcement" href = "" actionLabel = "Learn more" variant = "brand" } view { <aside class="px-4 py-3 text-center text-sm font-medium {variant === 'warning' ? 'bg-amber-400 text-amber-950' : 'bg-violet-600 text-white'}"><span>{text}</span><a data-show="href" href="{href}" class="ml-2 underline underline-offset-4">{actionLabel} →</a></aside> } }
+component Banner {
+  props {
+    text = "Announcement"
+    href = ""
+    actionLabel = "Learn more"
+    variant = "brand"
+  }
+  view {
+    <aside class="px-4 py-3 text-center text-sm font-medium {variant === 'warning' ? 'bg-amber-400 text-amber-950' : 'bg-violet-600 text-white'}"><span>{text}</span><a data-show="href" href="{href}" class="ml-2 underline underline-offset-4">{actionLabel} →</a></aside>
+  }
+}
diff --git a/.publish/ui/components/Breadcrumbs.wrn b/.publish/ui/components/Breadcrumbs.wrn
index f82d47a1..e0fe271f 100644
--- a/.publish/ui/components/Breadcrumbs.wrn
+++ b/.publish/ui/components/Breadcrumbs.wrn
@@ -1 +1,10 @@
-component Breadcrumbs { props { homeLabel = "Home" homeHref = "/" current = "Current page" } view { <nav aria-label="Breadcrumb"><ol class="flex flex-wrap items-center gap-2 text-sm"><li><a href="{homeHref}" class="text-slate-500 hover:text-violet-600">{homeLabel}</a></li><li aria-hidden="true" class="text-slate-400">/</li><li aria-current="page" class="font-medium text-slate-900 dark:text-white">{current}</li></ol></nav> } }
+component Breadcrumbs {
+  props {
+    homeLabel = "Home"
+    homeHref = "/"
+    current = "Current page"
+  }
+  view {
+    <nav aria-label="Breadcrumb"><ol class="flex flex-wrap items-center gap-2 text-sm"><li><a href="{homeHref}" class="text-slate-500 hover:text-violet-600">{homeLabel}</a></li><li aria-hidden="true" class="text-slate-400">/</li><li aria-current="page" class="font-medium text-slate-900 dark:text-white">{current}</li></ol></nav>
+  }
+}
diff --git a/.publish/ui/components/CTASection.wrn b/.publish/ui/components/CTASection.wrn
index 345d4fec..19014e22 100644
--- a/.publish/ui/components/CTASection.wrn
+++ b/.publish/ui/components/CTASection.wrn
@@ -1 +1,14 @@
-component CTASection { props { eyebrow = "Ready?" title = "Start building today" description = "" primaryLabel = "Get started" primaryHref = "#" secondaryLabel = "Contact sales" secondaryHref = "#" } view { <section class="overflow-hidden rounded-3xl bg-gradient-to-br from-violet-600 via-violet-700 to-fuchsia-700 px-6 py-12 text-center text-white shadow-2xl sm:px-12 sm:py-16"><p class="text-sm font-bold uppercase tracking-[0.18em] text-violet-100">{eyebrow}</p><h2 class="mx-auto mt-3 max-w-3xl text-3xl font-black sm:text-4xl">{title}</h2><p data-show="description" class="mx-auto mt-4 max-w-2xl text-violet-100">{description}</p><div class="mt-8 flex flex-wrap justify-center gap-3"><a href="{primaryHref}" class="inline-flex min-h-12 items-center rounded-xl bg-white px-5 font-semibold text-violet-700 shadow-lg transition hover:-translate-y-0.5">{primaryLabel}</a><a data-show="secondaryLabel" href="{secondaryHref}" class="inline-flex min-h-12 items-center rounded-xl border border-white/30 px-5 font-semibold text-white transition hover:bg-white/10">{secondaryLabel}</a></div></section> } }
+component CTASection {
+  props {
+    eyebrow = "Ready?"
+    title = "Start building today"
+    description = ""
+    primaryLabel = "Get started"
+    primaryHref = "#"
+    secondaryLabel = "Contact sales"
+    secondaryHref = "#"
+  }
+  view {
+    <section class="overflow-hidden rounded-3xl bg-gradient-to-br from-violet-600 via-violet-700 to-fuchsia-700 px-6 py-12 text-center text-white shadow-2xl sm:px-12 sm:py-16"><p class="text-sm font-bold uppercase tracking-[0.18em] text-violet-100">{eyebrow}</p><h2 class="mx-auto mt-3 max-w-3xl text-3xl font-black sm:text-4xl">{title}</h2><p data-show="description" class="mx-auto mt-4 max-w-2xl text-violet-100">{description}</p><div class="mt-8 flex flex-wrap justify-center gap-3"><a href="{primaryHref}" class="inline-flex min-h-12 items-center rounded-xl bg-white px-5 font-semibold text-violet-700 shadow-lg transition hover:-translate-y-0.5">{primaryLabel}</a><a data-show="secondaryLabel" href="{secondaryHref}" class="inline-flex min-h-12 items-center rounded-xl border border-white/30 px-5 font-semibold text-white transition hover:bg-white/10">{secondaryLabel}</a></div></section>
+  }
+}
diff --git a/.publish/ui/components/Cluster.wrn b/.publish/ui/components/Cluster.wrn
index 0eacf0fa..a5cbd6dd 100644
--- a/.publish/ui/components/Cluster.wrn
+++ b/.publish/ui/components/Cluster.wrn
@@ -1 +1,9 @@
-component Cluster { props { gap = "4" className = "" } view { <div class="flex flex-wrap items-center gap-{gap} {className}"><slot /></div> } }
+component Cluster {
+  props {
+    gap = "4"
+    className = ""
+  }
+  view {
+    <div class="flex flex-wrap items-center gap-{gap} {className}"><slot /></div>
+  }
+}
diff --git a/.publish/ui/components/CodeBlock.wrn b/.publish/ui/components/CodeBlock.wrn
index 7d986a71..9e5f5bbe 100644
--- a/.publish/ui/components/CodeBlock.wrn
+++ b/.publish/ui/components/CodeBlock.wrn
@@ -1 +1,11 @@
-component CodeBlock { props { language = "text" filename = "" code = "" } state copied = false view { <div class="overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 text-slate-100"><div class="flex min-h-11 items-center justify-between border-b border-slate-800 px-4 text-xs text-slate-400"><span>{filename || language}</span><button type="button" @click="navigator.clipboard.writeText(code); copied = true" class="rounded-lg px-2 py-1 hover:bg-slate-800">{copied ? 'Copied' : 'Copy'}</button></div><pre class="overflow-x-auto p-4 text-sm leading-6"><code>{code}</code></pre></div> } }
+component CodeBlock {
+  props {
+    language = "text"
+    filename = ""
+    code = ""
+  }
+  state copied = false
+  view {
+    <div class="overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 text-slate-100"><div class="flex min-h-11 items-center justify-between border-b border-slate-800 px-4 text-xs text-slate-400"><span>{filename || language}</span><button type="button" @click="navigator.clipboard.writeText(code); copied = true" class="rounded-lg px-2 py-1 hover:bg-slate-800">{copied ? 'Copied' : 'Copy'}</button></div><pre class="overflow-x-auto p-4 text-sm leading-6"><code>{code}</code></pre></div>
+  }
+}
diff --git a/.publish/ui/components/CookieBanner.wrn b/.publish/ui/components/CookieBanner.wrn
index 22105f13..0d52ec67 100644
--- a/.publish/ui/components/CookieBanner.wrn
+++ b/.publish/ui/components/CookieBanner.wrn
@@ -1 +1,11 @@
-component CookieBanner { props { title = "We use cookies" description = "We use essential cookies and optional analytics to improve your experience." privacyHref = "/privacy" } state visible = true view { <aside data-show="visible" class="fixed inset-x-4 bottom-4 z-50 mx-auto max-w-4xl rounded-3xl border border-slate-200 bg-white/95 p-5 shadow-2xl backdrop-blur-xl dark:border-slate-800 dark:bg-slate-900/95" role="dialog" aria-label="Cookie preferences"><div class="flex flex-col gap-5 md:flex-row md:items-center"><div class="min-w-0 flex-1"><h2 class="font-bold">{title}</h2><p class="mt-1 text-sm text-slate-500">{description} <a href="{privacyHref}" class="text-violet-600 underline">Privacy policy</a></p></div><div class="flex flex-wrap gap-2"><button @click="visible = false" class="min-h-11 rounded-xl border border-slate-300 px-4 text-sm font-semibold dark:border-slate-700">Reject optional</button><button @click="visible = false" class="min-h-11 rounded-xl bg-violet-600 px-4 text-sm font-semibold text-white">Accept all</button></div></div></aside> } }
+component CookieBanner {
+  props {
+    title = "We use cookies"
+    description = "We use essential cookies and optional analytics to improve your experience."
+    privacyHref = "/privacy"
+  }
+  state visible = true
+  view {
+    <aside data-show="visible" class="fixed inset-x-4 bottom-4 z-50 mx-auto max-w-4xl rounded-3xl border border-slate-200 bg-white/95 p-5 shadow-2xl backdrop-blur-xl dark:border-slate-800 dark:bg-slate-900/95" role="dialog" aria-label="Cookie preferences"><div class="flex flex-col gap-5 md:flex-row md:items-center"><div class="min-w-0 flex-1"><h2 class="font-bold">{title}</h2><p class="mt-1 text-sm text-slate-500">{description} <a href="{privacyHref}" class="text-violet-600 underline">Privacy policy</a></p></div><div class="flex flex-wrap gap-2"><button @click="visible = false" class="min-h-11 rounded-xl border border-slate-300 px-4 text-sm font-semibold dark:border-slate-700">Reject optional</button><button @click="visible = false" class="min-h-11 rounded-xl bg-violet-600 px-4 text-sm font-semibold text-white">Accept all</button></div></div></aside>
+  }
+}
diff --git a/.publish/ui/components/DateInput.wrn b/.publish/ui/components/DateInput.wrn
index 9080cd6c..30dfdcb7 100644
--- a/.publish/ui/components/DateInput.wrn
+++ b/.publish/ui/components/DateInput.wrn
@@ -1,5 +1,17 @@
 component DateInput {
-  props { id = "" name = "" label = "Date" value = "" placeholder = "" help = "" error = "" required = false disabled = false readonly = false autocomplete = "" }
+  props {
+    id = ""
+    name = ""
+    label = "Date"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
   view {
     <div class="space-y-2">
       <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
diff --git a/.publish/ui/components/DatePicker.wrn b/.publish/ui/components/DatePicker.wrn
index 81d01061..cc21325b 100644
--- a/.publish/ui/components/DatePicker.wrn
+++ b/.publish/ui/components/DatePicker.wrn
@@ -1 +1,14 @@
-component DatePicker { props { id = "date" name = "date" label = "Date" value = "" min = "" max = "" required = false } view { <DateInput id="{id}" name="{name}" label="{label}" value="{value}" required="{required}" /> } }
+component DatePicker {
+  props {
+    id = "date"
+    name = "date"
+    label = "Date"
+    value = ""
+    min = ""
+    max = ""
+    required = false
+  }
+  view {
+    <DateInput id="{id}" name="{name}" label="{label}" value="{value}" required="{required}" />
+  }
+}
diff --git a/.publish/ui/components/DateRangePicker.wrn b/.publish/ui/components/DateRangePicker.wrn
index d4b1e135..9d51a33e 100644
--- a/.publish/ui/components/DateRangePicker.wrn
+++ b/.publish/ui/components/DateRangePicker.wrn
@@ -1 +1,10 @@
-component DateRangePicker { props { label = "Date range" startName = "startDate" endName = "endDate" } view { <fieldset><legend class="mb-2 text-sm font-semibold">{label}</legend><div class="grid gap-3 sm:grid-cols-2"><DateInput id="{startName}" name="{startName}" label="Start date" /><DateInput id="{endName}" name="{endName}" label="End date" /></div></fieldset> } }
+component DateRangePicker {
+  props {
+    label = "Date range"
+    startName = "startDate"
+    endName = "endDate"
+  }
+  view {
+    <fieldset><legend class="mb-2 text-sm font-semibold">{label}</legend><div class="grid gap-3 sm:grid-cols-2"><DateInput id="{startName}" name="{startName}" label="Start date" /><DateInput id="{endName}" name="{endName}" label="End date" /></div></fieldset>
+  }
+}
diff --git a/.publish/ui/components/DateTimeInput.wrn b/.publish/ui/components/DateTimeInput.wrn
index 45d08b5f..7c27351b 100644
--- a/.publish/ui/components/DateTimeInput.wrn
+++ b/.publish/ui/components/DateTimeInput.wrn
@@ -1,5 +1,17 @@
 component DateTimeInput {
-  props { id = "" name = "" label = "DateTime" value = "" placeholder = "" help = "" error = "" required = false disabled = false readonly = false autocomplete = "" }
+  props {
+    id = ""
+    name = ""
+    label = "DateTime"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
   view {
     <div class="space-y-2">
       <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
diff --git a/.publish/ui/components/Drawer.wrn b/.publish/ui/components/Drawer.wrn
index 1ade407e..7d249ead 100644
--- a/.publish/ui/components/Drawer.wrn
+++ b/.publish/ui/components/Drawer.wrn
@@ -1 +1,11 @@
-component Drawer { props { title = "Panel" open = false side = "right" } state visible = open view { <div data-show="visible" class="fixed inset-0 z-50" role="dialog" aria-modal="true"><button class="absolute inset-0 bg-slate-950/50" aria-label="Close" @click="visible = false"></button><aside class="absolute inset-y-0 w-[min(92vw,28rem)] overflow-auto bg-white p-6 shadow-2xl transition dark:bg-slate-900 {side === 'left' ? 'left-0' : 'right-0'}"><header class="flex items-center justify-between"><h2 class="text-xl font-bold">{title}</h2><button @click="visible = false" class="size-10 rounded-xl hover:bg-slate-100">×</button></header><div class="mt-6"><slot /></div></aside></div> } }
+component Drawer {
+  props {
+    title = "Panel"
+    open = false
+    side = "right"
+  }
+  state visible = open
+  view {
+    <div data-show="visible" class="fixed inset-0 z-50" role="dialog" aria-modal="true"><button class="absolute inset-0 bg-slate-950/50" aria-label="Close" @click="visible = false"></button><aside class="absolute inset-y-0 w-[min(92vw,28rem)] overflow-auto bg-white p-6 shadow-2xl transition dark:bg-slate-900 {side === 'left' ? 'left-0' : 'right-0'}"><header class="flex items-center justify-between"><h2 class="text-xl font-bold">{title}</h2><button @click="visible = false" class="size-10 rounded-xl hover:bg-slate-100">×</button></header><div class="mt-6"><slot /></div></aside></div>
+  }
+}
diff --git a/.publish/ui/components/DropdownMenu.wrn b/.publish/ui/components/DropdownMenu.wrn
index b94eab50..ed27afbb 100644
--- a/.publish/ui/components/DropdownMenu.wrn
+++ b/.publish/ui/components/DropdownMenu.wrn
@@ -1 +1,9 @@
-component DropdownMenu { props { label = "Menu" } state open = false view { <div class="relative inline-block"><button type="button" aria-haspopup="menu" aria-expanded="{open}" @click="open = !open" class="inline-flex min-h-11 items-center gap-2 rounded-xl border border-slate-300 px-4 text-sm font-semibold dark:border-slate-700">{label}<span aria-hidden="true">⌄</span></button><div data-show="open" role="menu" class="absolute right-0 z-30 mt-2 min-w-48 rounded-xl border border-slate-200 bg-white p-1.5 shadow-xl dark:border-slate-800 dark:bg-slate-900"><slot /></div></div> } }
+component DropdownMenu {
+  props {
+    label = "Menu"
+  }
+  state open = false
+  view {
+    <div class="relative inline-block"><button type="button" aria-haspopup="menu" aria-expanded="{open}" @click="open = !open" class="inline-flex min-h-11 items-center gap-2 rounded-xl border border-slate-300 px-4 text-sm font-semibold dark:border-slate-700">{label}<span aria-hidden="true">⌄</span></button><div data-show="open" role="menu" class="absolute right-0 z-30 mt-2 min-w-48 rounded-xl border border-slate-200 bg-white p-1.5 shadow-xl dark:border-slate-800 dark:bg-slate-900"><slot /></div></div>
+  }
+}
diff --git a/.publish/ui/components/EmailInput.wrn b/.publish/ui/components/EmailInput.wrn
index 172bfc66..b35d84d3 100644
--- a/.publish/ui/components/EmailInput.wrn
+++ b/.publish/ui/components/EmailInput.wrn
@@ -1,5 +1,17 @@
 component EmailInput {
-  props { id = "" name = "" label = "Email" value = "" placeholder = "" help = "" error = "" required = false disabled = false readonly = false autocomplete = "" }
+  props {
+    id = ""
+    name = ""
+    label = "Email"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
   view {
     <div class="space-y-2">
       <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
diff --git a/.publish/ui/components/EmptyState.wrn b/.publish/ui/components/EmptyState.wrn
index 709f8a2b..f1bd4a73 100644
--- a/.publish/ui/components/EmptyState.wrn
+++ b/.publish/ui/components/EmptyState.wrn
@@ -1 +1,12 @@
-component EmptyState { props { icon = "◇" title = "Nothing here yet" description = "" actionLabel = "" actionHref = "#" } view { <div class="rounded-3xl border border-dashed border-slate-300 px-6 py-14 text-center dark:border-slate-700"><div class="mx-auto flex size-14 items-center justify-center rounded-2xl bg-violet-100 text-2xl text-violet-700 dark:bg-violet-950 dark:text-violet-300">{icon}</div><h3 class="mt-4 text-lg font-bold">{title}</h3><p data-show="description" class="mx-auto mt-2 max-w-md text-sm text-slate-500">{description}</p><a data-show="actionLabel" href="{actionHref}" class="mt-5 inline-flex min-h-11 items-center rounded-xl bg-violet-600 px-4 py-2.5 text-sm font-semibold text-white">{actionLabel}</a></div> } }
+component EmptyState {
+  props {
+    icon = "◇"
+    title = "Nothing here yet"
+    description = ""
+    actionLabel = ""
+    actionHref = "#"
+  }
+  view {
+    <div class="rounded-3xl border border-dashed border-slate-300 px-6 py-14 text-center dark:border-slate-700"><div class="mx-auto flex size-14 items-center justify-center rounded-2xl bg-violet-100 text-2xl text-violet-700 dark:bg-violet-950 dark:text-violet-300">{icon}</div><h3 class="mt-4 text-lg font-bold">{title}</h3><p data-show="description" class="mx-auto mt-2 max-w-md text-sm text-slate-500">{description}</p><a data-show="actionLabel" href="{actionHref}" class="mt-5 inline-flex min-h-11 items-center rounded-xl bg-violet-600 px-4 py-2.5 text-sm font-semibold text-white">{actionLabel}</a></div>
+  }
+}
diff --git a/.publish/ui/components/ErrorState.wrn b/.publish/ui/components/ErrorState.wrn
index ff3c12e1..a04c3bf1 100644
--- a/.publish/ui/components/ErrorState.wrn
+++ b/.publish/ui/components/ErrorState.wrn
@@ -1 +1,12 @@
-component ErrorState { props { code = "500" title = "Something went wrong" description = "Please try again." actionLabel = "Try again" actionHref = "/" } view { <div class="mx-auto max-w-2xl px-4 py-24 text-center"><div class="text-8xl font-black text-violet-100 dark:text-violet-950">{code}</div><h1 class="-mt-4 text-3xl font-black">{title}</h1><p class="mt-4 text-slate-500">{description}</p><a href="{actionHref}" class="mt-8 inline-flex min-h-12 items-center rounded-xl bg-violet-600 px-5 font-semibold text-white">{actionLabel}</a></div> } }
+component ErrorState {
+  props {
+    code = "500"
+    title = "Something went wrong"
+    description = "Please try again."
+    actionLabel = "Try again"
+    actionHref = "/"
+  }
+  view {
+    <div class="mx-auto max-w-2xl px-4 py-24 text-center"><div class="text-8xl font-black text-violet-100 dark:text-violet-950">{code}</div><h1 class="-mt-4 text-3xl font-black">{title}</h1><p class="mt-4 text-slate-500">{description}</p><a href="{actionHref}" class="mt-8 inline-flex min-h-12 items-center rounded-xl bg-violet-600 px-5 font-semibold text-white">{actionLabel}</a></div>
+  }
+}
diff --git a/.publish/ui/components/FeatureCard.wrn b/.publish/ui/components/FeatureCard.wrn
index fd33286c..03b0e8ee 100644
--- a/.publish/ui/components/FeatureCard.wrn
+++ b/.publish/ui/components/FeatureCard.wrn
@@ -1 +1,11 @@
-component FeatureCard { props { icon = "✦" title = "Feature" description = "" href = "" } view { <article class="group rounded-2xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-violet-300 hover:shadow-xl dark:border-slate-800 dark:bg-slate-900"><div class="flex size-11 items-center justify-center rounded-xl bg-violet-100 text-xl text-violet-700 transition group-hover:scale-110 dark:bg-violet-950 dark:text-violet-300">{icon}</div><h3 class="mt-5 text-lg font-bold">{title}</h3><p class="mt-2 leading-7 text-slate-600 dark:text-slate-300">{description}</p><a data-show="href" href="{href}" class="mt-4 inline-flex font-semibold text-violet-600">Learn more →</a></article> } }
+component FeatureCard {
+  props {
+    icon = "✦"
+    title = "Feature"
+    description = ""
+    href = ""
+  }
+  view {
+    <article class="group rounded-2xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-violet-300 hover:shadow-xl dark:border-slate-800 dark:bg-slate-900"><div class="flex size-11 items-center justify-center rounded-xl bg-violet-100 text-xl text-violet-700 transition group-hover:scale-110 dark:bg-violet-950 dark:text-violet-300">{icon}</div><h3 class="mt-5 text-lg font-bold">{title}</h3><p class="mt-2 leading-7 text-slate-600 dark:text-slate-300">{description}</p><a data-show="href" href="{href}" class="mt-4 inline-flex font-semibold text-violet-600">Learn more →</a></article>
+  }
+}
diff --git a/.publish/ui/components/FeatureGrid.wrn b/.publish/ui/components/FeatureGrid.wrn
index a660073c..c3b19a2f 100644
--- a/.publish/ui/components/FeatureGrid.wrn
+++ b/.publish/ui/components/FeatureGrid.wrn
@@ -1 +1,9 @@
-component FeatureGrid { props { columns = 3 className = "" } view { <div class="grid gap-5 {columns === 2 ? 'md:grid-cols-2' : columns === 4 ? 'sm:grid-cols-2 xl:grid-cols-4' : 'md:grid-cols-2 lg:grid-cols-3'} {className}"><slot /></div> } }
+component FeatureGrid {
+  props {
+    columns = 3
+    className = ""
+  }
+  view {
+    <div class="grid gap-5 {columns === 2 ? 'md:grid-cols-2' : columns === 4 ? 'sm:grid-cols-2 xl:grid-cols-4' : 'md:grid-cols-2 lg:grid-cols-3'} {className}"><slot /></div>
+  }
+}
diff --git a/.publish/ui/components/FileUpload.wrn b/.publish/ui/components/FileUpload.wrn
index f65c5e5b..505e14a4 100644
--- a/.publish/ui/components/FileUpload.wrn
+++ b/.publish/ui/components/FileUpload.wrn
@@ -1 +1,13 @@
-component FileUpload { props { id = "file" name = "file" label = "Upload file" accept = "" multiple = false help = "Drag and drop or browse" } view { <label for="{id}" class="flex min-h-40 cursor-pointer flex-col items-center justify-center rounded-2xl border-2 border-dashed border-slate-300 bg-slate-50 p-6 text-center transition hover:border-violet-500 hover:bg-violet-50/50 focus-within:ring-4 focus-within:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-900/50"><span class="text-3xl" aria-hidden="true">⇧</span><span class="mt-2 font-semibold">{label}</span><span class="mt-1 text-sm text-slate-500">{help}</span><input id="{id}" name="{name}" type="file" accept="{accept}" multiple="{multiple}" class="sr-only" /></label> } }
+component FileUpload {
+  props {
+    id = "file"
+    name = "file"
+    label = "Upload file"
+    accept = ""
+    multiple = false
+    help = "Drag and drop or browse"
+  }
+  view {
+    <label for="{id}" class="flex min-h-40 cursor-pointer flex-col items-center justify-center rounded-2xl border-2 border-dashed border-slate-300 bg-slate-50 p-6 text-center transition hover:border-violet-500 hover:bg-violet-50/50 focus-within:ring-4 focus-within:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-900/50"><span class="text-3xl" aria-hidden="true">⇧</span><span class="mt-2 font-semibold">{label}</span><span class="mt-1 text-sm text-slate-500">{help}</span><input id="{id}" name="{name}" type="file" accept="{accept}" multiple="{multiple}" class="sr-only" /></label>
+  }
+}
diff --git a/.publish/ui/components/FormErrorSummary.wrn b/.publish/ui/components/FormErrorSummary.wrn
index 5538bcb4..de99a058 100644
--- a/.publish/ui/components/FormErrorSummary.wrn
+++ b/.publish/ui/components/FormErrorSummary.wrn
@@ -1 +1,9 @@
-component FormErrorSummary { props { title = "Please fix the following" visible = true } view { <section data-show="visible" role="alert" aria-live="polite" class="rounded-2xl border border-red-200 bg-red-50 p-4 text-red-900 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200"><h3 class="font-semibold">{title}</h3><div class="mt-2 text-sm"><slot /></div></section> } }
+component FormErrorSummary {
+  props {
+    title = "Please fix the following"
+    visible = true
+  }
+  view {
+    <section data-show="visible" role="alert" aria-live="polite" class="rounded-2xl border border-red-200 bg-red-50 p-4 text-red-900 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200"><h3 class="font-semibold">{title}</h3><div class="mt-2 text-sm"><slot /></div></section>
+  }
+}
diff --git a/.publish/ui/components/FormField.wrn b/.publish/ui/components/FormField.wrn
index 0500b8e7..4ab7a609 100644
--- a/.publish/ui/components/FormField.wrn
+++ b/.publish/ui/components/FormField.wrn
@@ -1 +1,11 @@
-component FormField { props { label = "Field" help = "" error = "" required = false } view { <div class="space-y-2"><div class="text-sm font-semibold">{label}<span data-show="required" class="ml-1 text-red-500">*</span></div><slot /><p data-show="help && !error" class="text-sm text-slate-500">{help}</p><p data-show="error" role="alert" class="text-sm font-medium text-red-600">{error}</p></div> } }
+component FormField {
+  props {
+    label = "Field"
+    help = ""
+    error = ""
+    required = false
+  }
+  view {
+    <div class="space-y-2"><div class="text-sm font-semibold">{label}<span data-show="required" class="ml-1 text-red-500">*</span></div><slot /><p data-show="help && !error" class="text-sm text-slate-500">{help}</p><p data-show="error" role="alert" class="text-sm font-medium text-red-600">{error}</p></div>
+  }
+}
diff --git a/.publish/ui/components/Hero.wrn b/.publish/ui/components/Hero.wrn
index 7116d775..2008458d 100644
--- a/.publish/ui/components/Hero.wrn
+++ b/.publish/ui/components/Hero.wrn
@@ -1 +1,16 @@
-component Hero { props { eyebrow = "" title = "Build faster with WRNexusJS" highlight = "" description = "" primaryLabel = "Get started" primaryHref = "#" secondaryLabel = "Learn more" secondaryHref = "#" align = "center" } view { <section class="relative isolate overflow-hidden py-20 sm:py-28"><div class="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top,rgba(124,58,237,.18),transparent_45%)]"></div><div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"><div class="max-w-4xl {align === 'center' ? 'mx-auto text-center' : ''}"><Badge data-show="eyebrow" label="{eyebrow}" variant="brand" /><h1 class="mt-6 text-4xl font-black tracking-tight text-slate-950 sm:text-6xl dark:text-white">{title} <span data-show="highlight" class="bg-gradient-to-r from-violet-600 to-fuchsia-500 bg-clip-text text-transparent">{highlight}</span></h1><p data-show="description" class="mt-6 text-lg leading-8 text-slate-600 sm:text-xl dark:text-slate-300">{description}</p><div class="mt-8 flex flex-wrap gap-3 {align === 'center' ? 'justify-center' : ''}"><a href="{primaryHref}" class="inline-flex min-h-12 items-center rounded-xl bg-violet-600 px-5 font-semibold text-white shadow-lg shadow-violet-600/20 transition hover:-translate-y-0.5 hover:bg-violet-700">{primaryLabel}</a><a data-show="secondaryLabel" href="{secondaryHref}" class="inline-flex min-h-12 items-center rounded-xl border border-slate-300 bg-white px-5 font-semibold text-slate-900 transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-white">{secondaryLabel}</a></div><div class="mt-10"><slot /></div></div></div></section> } }
+component Hero {
+  props {
+    eyebrow = ""
+    title = "Build faster with WRNexusJS"
+    highlight = ""
+    description = ""
+    primaryLabel = "Get started"
+    primaryHref = "#"
+    secondaryLabel = "Learn more"
+    secondaryHref = "#"
+    align = "center"
+  }
+  view {
+    <section class="relative isolate overflow-hidden py-20 sm:py-28"><div class="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top,rgba(124,58,237,.18),transparent_45%)]"></div><div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"><div class="max-w-4xl {align === 'center' ? 'mx-auto text-center' : ''}"><Badge data-show="eyebrow" label="{eyebrow}" variant="brand" /><h1 class="mt-6 text-4xl font-black tracking-tight text-slate-950 sm:text-6xl dark:text-white">{title} <span data-show="highlight" class="bg-gradient-to-r from-violet-600 to-fuchsia-500 bg-clip-text text-transparent">{highlight}</span></h1><p data-show="description" class="mt-6 text-lg leading-8 text-slate-600 sm:text-xl dark:text-slate-300">{description}</p><div class="mt-8 flex flex-wrap gap-3 {align === 'center' ? 'justify-center' : ''}"><a href="{primaryHref}" class="inline-flex min-h-12 items-center rounded-xl bg-violet-600 px-5 font-semibold text-white shadow-lg shadow-violet-600/20 transition hover:-translate-y-0.5 hover:bg-violet-700">{primaryLabel}</a><a data-show="secondaryLabel" href="{secondaryHref}" class="inline-flex min-h-12 items-center rounded-xl border border-slate-300 bg-white px-5 font-semibold text-slate-900 transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-white">{secondaryLabel}</a></div><div class="mt-10"><slot /></div></div></div></section>
+  }
+}
diff --git a/.publish/ui/components/IconButton.wrn b/.publish/ui/components/IconButton.wrn
index af222dd9..6f42850e 100644
--- a/.publish/ui/components/IconButton.wrn
+++ b/.publish/ui/components/IconButton.wrn
@@ -1,4 +1,9 @@
 component IconButton {
-  props { label = "Action" icon = "•" variant = "ghost" disabled = false }
+  props {
+    label = "Action"
+    icon = "•"
+    variant = "ghost"
+    disabled = false
+  }
   view { <button type="button" aria-label="{label}" title="{label}" disabled="{disabled}" class="inline-flex size-11 items-center justify-center rounded-xl transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 disabled:opacity-50 {variant === 'primary' ? 'bg-violet-600 text-white hover:bg-violet-700' : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'}"><span aria-hidden="true">{icon}</span></button> }
 }
diff --git a/.publish/ui/components/Inline.wrn b/.publish/ui/components/Inline.wrn
index 36184c48..43cc7fbd 100644
--- a/.publish/ui/components/Inline.wrn
+++ b/.publish/ui/components/Inline.wrn
@@ -1 +1,9 @@
-component Inline { props { gap = "4" className = "" } view { <div class="flex flex-wrap items-center gap-{gap} {className}"><slot /></div> } }
+component Inline {
+  props {
+    gap = "4"
+    className = ""
+  }
+  view {
+    <div class="flex flex-wrap items-center gap-{gap} {className}"><slot /></div>
+  }
+}
diff --git a/.publish/ui/components/LegalDocumentLayout.wrn b/.publish/ui/components/LegalDocumentLayout.wrn
index 850d3cda..f2866f3f 100644
--- a/.publish/ui/components/LegalDocumentLayout.wrn
+++ b/.publish/ui/components/LegalDocumentLayout.wrn
@@ -1 +1,10 @@
-component LegalDocumentLayout { props { title = "Legal document" effectiveDate = "" updatedDate = "" } view { <article class="mx-auto grid max-w-7xl gap-10 px-4 py-14 lg:grid-cols-[16rem_minmax(0,1fr)] lg:px-8"><aside class="lg:sticky lg:top-24 lg:self-start"><div class="text-sm font-semibold">On this page</div><nav class="mt-4 text-sm text-slate-500"><slot name="toc" /></nav></aside><main class="min-w-0 max-w-3xl"><header class="border-b border-slate-200 pb-8 dark:border-slate-800"><h1 class="text-4xl font-black tracking-tight">{title}</h1><div class="mt-4 flex flex-wrap gap-4 text-sm text-slate-500"><span data-show="effectiveDate">Effective: {effectiveDate}</span><span data-show="updatedDate">Updated: {updatedDate}</span></div></header><div class="prose prose-slate mt-8 max-w-none dark:prose-invert"><slot /></div></main></article> } }
+component LegalDocumentLayout {
+  props {
+    title = "Legal document"
+    effectiveDate = ""
+    updatedDate = ""
+  }
+  view {
+    <article class="mx-auto grid max-w-7xl gap-10 px-4 py-14 lg:grid-cols-[16rem_minmax(0,1fr)] lg:px-8"><aside class="lg:sticky lg:top-24 lg:self-start"><div class="text-sm font-semibold">On this page</div><nav class="mt-4 text-sm text-slate-500"><slot name="toc" /></nav></aside><main class="min-w-0 max-w-3xl"><header class="border-b border-slate-200 pb-8 dark:border-slate-800"><h1 class="text-4xl font-black tracking-tight">{title}</h1><div class="mt-4 flex flex-wrap gap-4 text-sm text-slate-500"><span data-show="effectiveDate">Effective: {effectiveDate}</span><span data-show="updatedDate">Updated: {updatedDate}</span></div></header><div class="prose prose-slate mt-8 max-w-none dark:prose-invert"><slot /></div></main></article>
+  }
+}
diff --git a/.publish/ui/components/Link.wrn b/.publish/ui/components/Link.wrn
index a5d42625..cde2a1cb 100644
--- a/.publish/ui/components/Link.wrn
+++ b/.publish/ui/components/Link.wrn
@@ -1 +1,11 @@
-component Link { props { href = "#" label = "Link" external = false className = "" } view { <a href="{href}" target="{external ? '_blank' : ''}" rel="{external ? 'noreferrer' : ''}" class="font-medium text-violet-600 underline-offset-4 transition hover:text-violet-700 hover:underline focus-visible:rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 {className}">{label}<span data-show="external" aria-hidden="true"> ↗</span></a> } }
+component Link {
+  props {
+    href = "#"
+    label = "Link"
+    external = false
+    className = ""
+  }
+  view {
+    <a href="{href}" target="{external ? '_blank' : ''}" rel="{external ? 'noreferrer' : ''}" class="font-medium text-violet-600 underline-offset-4 transition hover:text-violet-700 hover:underline focus-visible:rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 {className}">{label}<span data-show="external" aria-hidden="true"> ↗</span></a>
+  }
+}
diff --git a/.publish/ui/components/LogoCloud.wrn b/.publish/ui/components/LogoCloud.wrn
index 4f640904..1d367671 100644
--- a/.publish/ui/components/LogoCloud.wrn
+++ b/.publish/ui/components/LogoCloud.wrn
@@ -1 +1,8 @@
-component LogoCloud { props { title = "Trusted by modern teams" } view { <section aria-label="{title}"><p class="text-center text-sm font-semibold uppercase tracking-wider text-slate-500">{title}</p><div class="mt-6 flex flex-wrap items-center justify-center gap-x-10 gap-y-6 opacity-70 grayscale transition hover:grayscale-0"><slot /></div></section> } }
+component LogoCloud {
+  props {
+    title = "Trusted by modern teams"
+  }
+  view {
+    <section aria-label="{title}"><p class="text-center text-sm font-semibold uppercase tracking-wider text-slate-500">{title}</p><div class="mt-6 flex flex-wrap items-center justify-center gap-x-10 gap-y-6 opacity-70 grayscale transition hover:grayscale-0"><slot /></div></section>
+  }
+}
diff --git a/.publish/ui/components/Modal.wrn b/.publish/ui/components/Modal.wrn
index 44f99872..3c0217da 100644
--- a/.publish/ui/components/Modal.wrn
+++ b/.publish/ui/components/Modal.wrn
@@ -1 +1,13 @@
-component Modal { props { title = "Dialog" description = "" open = false size = "md" closeLabel = "Close" } state visible = open view { <div data-show="visible" class="fixed inset-0 z-50 flex items-end justify-center p-4 sm:items-center" role="dialog" aria-modal="true" aria-labelledby="modal-title"><button class="absolute inset-0 bg-slate-950/60 backdrop-blur-sm" aria-label="{closeLabel}" @click="visible = false"></button><section class="relative max-h-[90vh] w-full overflow-auto rounded-3xl border border-slate-200 bg-white p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900 {size === 'sm' ? 'max-w-md' : size === 'lg' ? 'max-w-4xl' : 'max-w-2xl'}"><header class="flex items-start justify-between gap-4"><div><h2 id="modal-title" class="text-xl font-bold">{title}</h2><p data-show="description" class="mt-1 text-sm text-slate-500">{description}</p></div><button type="button" aria-label="{closeLabel}" @click="visible = false" class="inline-flex size-10 items-center justify-center rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800">×</button></header><div class="mt-5"><slot /></div></section></div> } }
+component Modal {
+  props {
+    title = "Dialog"
+    description = ""
+    open = false
+    size = "md"
+    closeLabel = "Close"
+  }
+  state visible = open
+  view {
+    <div data-show="visible" class="fixed inset-0 z-50 flex items-end justify-center p-4 sm:items-center" role="dialog" aria-modal="true" aria-labelledby="modal-title"><button class="absolute inset-0 bg-slate-950/60 backdrop-blur-sm" aria-label="{closeLabel}" @click="visible = false"></button><section class="relative max-h-[90vh] w-full overflow-auto rounded-3xl border border-slate-200 bg-white p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900 {size === 'sm' ? 'max-w-md' : size === 'lg' ? 'max-w-4xl' : 'max-w-2xl'}"><header class="flex items-start justify-between gap-4"><div><h2 id="modal-title" class="text-xl font-bold">{title}</h2><p data-show="description" class="mt-1 text-sm text-slate-500">{description}</p></div><button type="button" aria-label="{closeLabel}" @click="visible = false" class="inline-flex size-10 items-center justify-center rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800">×</button></header><div class="mt-5"><slot /></div></section></div>
+  }
+}
diff --git a/.publish/ui/components/NumberInput.wrn b/.publish/ui/components/NumberInput.wrn
index 8c21268a..592150b4 100644
--- a/.publish/ui/components/NumberInput.wrn
+++ b/.publish/ui/components/NumberInput.wrn
@@ -1,5 +1,17 @@
 component NumberInput {
-  props { id = "" name = "" label = "Number" value = "" placeholder = "" help = "" error = "" required = false disabled = false readonly = false autocomplete = "" }
+  props {
+    id = ""
+    name = ""
+    label = "Number"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
   view {
     <div class="space-y-2">
       <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
diff --git a/.publish/ui/components/OtpInput.wrn b/.publish/ui/components/OtpInput.wrn
index 6a4aeb78..7cc19d47 100644
--- a/.publish/ui/components/OtpInput.wrn
+++ b/.publish/ui/components/OtpInput.wrn
@@ -1 +1,10 @@
-component OtpInput { props { name = "otp" length = 6 label = "Verification code" } view { <fieldset><legend class="mb-3 text-sm font-semibold">{label}</legend><input name="{name}" inputmode="numeric" autocomplete="one-time-code" maxlength="{length}" pattern="[0-9]*" class="min-h-14 w-full rounded-2xl border border-slate-300 bg-white px-4 text-center font-mono text-2xl tracking-[0.5em] outline-none transition focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-950" /></fieldset> } }
+component OtpInput {
+  props {
+    name = "otp"
+    length = 6
+    label = "Verification code"
+  }
+  view {
+    <fieldset><legend class="mb-3 text-sm font-semibold">{label}</legend><input name="{name}" inputmode="numeric" autocomplete="one-time-code" maxlength="{length}" pattern="[0-9]*" class="min-h-14 w-full rounded-2xl border border-slate-300 bg-white px-4 text-center font-mono text-2xl tracking-[0.5em] outline-none transition focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-950" /></fieldset>
+  }
+}
diff --git a/.publish/ui/components/PageShell.wrn b/.publish/ui/components/PageShell.wrn
index 28a6ec31..e228102e 100644
--- a/.publish/ui/components/PageShell.wrn
+++ b/.publish/ui/components/PageShell.wrn
@@ -1 +1,8 @@
-component PageShell { props { className = "" } view { <div class="min-h-screen bg-white text-slate-950 antialiased selection:bg-violet-200 dark:bg-slate-950 dark:text-white dark:selection:bg-violet-800 {className}"><slot /></div> } }
+component PageShell {
+  props {
+    className = ""
+  }
+  view {
+    <div class="min-h-screen bg-white text-slate-950 antialiased selection:bg-violet-200 dark:bg-slate-950 dark:text-white dark:selection:bg-violet-800 {className}"><slot /></div>
+  }
+}
diff --git a/.publish/ui/components/Pagination.wrn b/.publish/ui/components/Pagination.wrn
index 56fc5563..e5853b8b 100644
--- a/.publish/ui/components/Pagination.wrn
+++ b/.publish/ui/components/Pagination.wrn
@@ -1 +1,11 @@
-component Pagination { props { page = 1 totalPages = 1 previousHref = "#" nextHref = "#" } view { <nav aria-label="Pagination" class="flex items-center justify-between gap-4"><a href="{previousHref}" aria-disabled="{page <= 1}" class="inline-flex min-h-11 items-center rounded-xl border border-slate-300 px-4 text-sm font-semibold aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:border-slate-700">← Previous</a><span class="text-sm text-slate-500">Page {page} of {totalPages}</span><a href="{nextHref}" aria-disabled="{page >= totalPages}" class="inline-flex min-h-11 items-center rounded-xl border border-slate-300 px-4 text-sm font-semibold aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:border-slate-700">Next →</a></nav> } }
+component Pagination {
+  props {
+    page = 1
+    totalPages = 1
+    previousHref = "#"
+    nextHref = "#"
+  }
+  view {
+    <nav aria-label="Pagination" class="flex items-center justify-between gap-4"><a href="{previousHref}" aria-disabled="{page <= 1}" class="inline-flex min-h-11 items-center rounded-xl border border-slate-300 px-4 text-sm font-semibold aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:border-slate-700">← Previous</a><span class="text-sm text-slate-500">Page {page} of {totalPages}</span><a href="{nextHref}" aria-disabled="{page >= totalPages}" class="inline-flex min-h-11 items-center rounded-xl border border-slate-300 px-4 text-sm font-semibold aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:border-slate-700">Next →</a></nav>
+  }
+}
diff --git a/.publish/ui/components/PasswordInput.wrn b/.publish/ui/components/PasswordInput.wrn
index 3c9f401a..7761b3bf 100644
--- a/.publish/ui/components/PasswordInput.wrn
+++ b/.publish/ui/components/PasswordInput.wrn
@@ -1,5 +1,17 @@
 component PasswordInput {
-  props { id = "" name = "" label = "Password" value = "" placeholder = "" help = "" error = "" required = false disabled = false readonly = false autocomplete = "" }
+  props {
+    id = ""
+    name = ""
+    label = "Password"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
   view {
     <div class="space-y-2">
       <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
diff --git a/.publish/ui/components/PhoneInput.wrn b/.publish/ui/components/PhoneInput.wrn
index accd7386..8a61a4f7 100644
--- a/.publish/ui/components/PhoneInput.wrn
+++ b/.publish/ui/components/PhoneInput.wrn
@@ -1,5 +1,17 @@
 component PhoneInput {
-  props { id = "" name = "" label = "Phone" value = "" placeholder = "" help = "" error = "" required = false disabled = false readonly = false autocomplete = "" }
+  props {
+    id = ""
+    name = ""
+    label = "Phone"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
   view {
     <div class="space-y-2">
       <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
diff --git a/.publish/ui/components/PricingPlanCard.wrn b/.publish/ui/components/PricingPlanCard.wrn
index 1e583db9..c40bc9d3 100644
--- a/.publish/ui/components/PricingPlanCard.wrn
+++ b/.publish/ui/components/PricingPlanCard.wrn
@@ -1 +1,14 @@
-component PricingPlanCard { props { name = "Starter" description = "" price = "₹0" period = "/month" featured = false ctaLabel = "Choose plan" ctaHref = "#" } view { <article class="relative flex h-full flex-col rounded-3xl border p-6 shadow-sm {featured ? 'border-violet-500 bg-violet-50/50 ring-2 ring-violet-500 dark:bg-violet-950/20' : 'border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900'}"><Badge data-show="featured" label="Most popular" variant="brand" /><h3 class="mt-4 text-xl font-bold">{name}</h3><p class="mt-2 text-sm text-slate-500">{description}</p><div class="mt-6"><span class="text-4xl font-black">{price}</span><span class="text-slate-500">{period}</span></div><div class="mt-6 flex-1"><slot /></div><a href="{ctaHref}" class="mt-6 inline-flex min-h-12 items-center justify-center rounded-xl font-semibold transition {featured ? 'bg-violet-600 text-white hover:bg-violet-700' : 'border border-slate-300 hover:bg-slate-50 dark:border-slate-700'}">{ctaLabel}</a></article> } }
+component PricingPlanCard {
+  props {
+    name = "Starter"
+    description = ""
+    price = "₹0"
+    period = "/month"
+    featured = false
+    ctaLabel = "Choose plan"
+    ctaHref = "#"
+  }
+  view {
+    <article class="relative flex h-full flex-col rounded-3xl border p-6 shadow-sm {featured ? 'border-violet-500 bg-violet-50/50 ring-2 ring-violet-500 dark:bg-violet-950/20' : 'border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900'}"><Badge data-show="featured" label="Most popular" variant="brand" /><h3 class="mt-4 text-xl font-bold">{name}</h3><p class="mt-2 text-sm text-slate-500">{description}</p><div class="mt-6"><span class="text-4xl font-black">{price}</span><span class="text-slate-500">{period}</span></div><div class="mt-6 flex-1"><slot /></div><a href="{ctaHref}" class="mt-6 inline-flex min-h-12 items-center justify-center rounded-xl font-semibold transition {featured ? 'bg-violet-600 text-white hover:bg-violet-700' : 'border border-slate-300 hover:bg-slate-50 dark:border-slate-700'}">{ctaLabel}</a></article>
+  }
+}
diff --git a/.publish/ui/components/ProgressBar.wrn b/.publish/ui/components/ProgressBar.wrn
index e64fd37c..112c7ba1 100644
--- a/.publish/ui/components/ProgressBar.wrn
+++ b/.publish/ui/components/ProgressBar.wrn
@@ -1 +1,11 @@
-component ProgressBar { props { value = 0 max = 100 label = "Progress" showValue = true } view { <div><div class="mb-2 flex justify-between text-sm"><span>{label}</span><span data-show="showValue">{value}%</span></div><div class="h-2 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-800" role="progressbar" aria-valuenow="{value}" aria-valuemin="0" aria-valuemax="{max}"><div class="h-full rounded-full bg-violet-600 transition-all duration-500" style="width: {value}%"></div></div></div> } }
+component ProgressBar {
+  props {
+    value = 0
+    max = 100
+    label = "Progress"
+    showValue = true
+  }
+  view {
+    <div><div class="mb-2 flex justify-between text-sm"><span>{label}</span><span data-show="showValue">{value}%</span></div><div class="h-2 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-800" role="progressbar" aria-valuenow="{value}" aria-valuemin="0" aria-valuemax="{max}"><div class="h-full rounded-full bg-violet-600 transition-all duration-500" style="width: {value}%"></div></div></div>
+  }
+}
diff --git a/.publish/ui/components/PublicFooter.wrn b/.publish/ui/components/PublicFooter.wrn
index a98e8da6..d78dd08b 100644
--- a/.publish/ui/components/PublicFooter.wrn
+++ b/.publish/ui/components/PublicFooter.wrn
@@ -1 +1,10 @@
-component PublicFooter { props { brand = "WRNexusJS" description = "SSR-first, Bun-native full-stack framework." copyright = "© 2026 WorkRoot Workspace" } view { <footer class="border-t border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-950"><div class="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8"><div class="grid gap-10 lg:grid-cols-[1.2fr_2fr]"><div><div class="text-xl font-black">{brand}</div><p class="mt-3 max-w-sm text-sm leading-6 text-slate-500">{description}</p></div><div class="grid grid-cols-2 gap-8 sm:grid-cols-4"><slot /></div></div><div class="mt-12 flex flex-col gap-4 border-t border-slate-200 pt-6 text-sm text-slate-500 sm:flex-row sm:items-center sm:justify-between dark:border-slate-800"><span>{copyright}</span><button data-wire-theme-toggle type="button" class="min-h-10 rounded-xl border border-slate-300 px-3 dark:border-slate-700">Toggle theme</button></div></div></footer> } }
+component PublicFooter {
+  props {
+    brand = "WRNexusJS"
+    description = "SSR-first, Bun-native full-stack framework."
+    copyright = "© 2026 WorkRoot Workspace"
+  }
+  view {
+    <footer class="border-t border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-950"><div class="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8"><div class="grid gap-10 lg:grid-cols-[1.2fr_2fr]"><div><div class="text-xl font-black">{brand}</div><p class="mt-3 max-w-sm text-sm leading-6 text-slate-500">{description}</p></div><div class="grid grid-cols-2 gap-8 sm:grid-cols-4"><slot /></div></div><div class="mt-12 flex flex-col gap-4 border-t border-slate-200 pt-6 text-sm text-slate-500 sm:flex-row sm:items-center sm:justify-between dark:border-slate-800"><span>{copyright}</span><button data-wire-theme-toggle type="button" class="min-h-10 rounded-xl border border-slate-300 px-3 dark:border-slate-700">Toggle theme</button></div></div></footer>
+  }
+}
diff --git a/.publish/ui/components/PublicHeader.wrn b/.publish/ui/components/PublicHeader.wrn
index 03d2244b..7af3caf2 100644
--- a/.publish/ui/components/PublicHeader.wrn
+++ b/.publish/ui/components/PublicHeader.wrn
@@ -1 +1,13 @@
-component PublicHeader { props { brand = "WRNexusJS" homeHref = "/" signInHref = "/signin" ctaHref = "/start" ctaLabel = "Get started" } state mobileOpen = false view { <header class="sticky top-0 z-40 border-b border-slate-200/80 bg-white/85 backdrop-blur-xl dark:border-slate-800 dark:bg-slate-950/85"><div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8"><a href="{homeHref}" class="text-lg font-black tracking-tight">{brand}</a><nav class="hidden items-center gap-7 md:flex" aria-label="Primary"><slot /></nav><div class="hidden items-center gap-3 md:flex"><a href="{signInHref}" class="text-sm font-semibold">Sign in</a><a href="{ctaHref}" class="inline-flex min-h-10 items-center rounded-xl bg-violet-600 px-4 text-sm font-semibold text-white">{ctaLabel}</a><button data-wire-theme-toggle type="button" aria-label="Toggle theme" class="size-10 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800">◐</button></div><button type="button" aria-label="Open menu" aria-expanded="{mobileOpen}" @click="mobileOpen = !mobileOpen" class="size-11 rounded-xl md:hidden">☰</button></div><div data-show="mobileOpen" class="border-t border-slate-200 px-4 py-5 md:hidden dark:border-slate-800"><div class="space-y-3"><slot name="mobile" /></div><div class="mt-5 grid grid-cols-2 gap-3"><a href="{signInHref}" class="inline-flex min-h-11 items-center justify-center rounded-xl border border-slate-300 font-semibold">Sign in</a><a href="{ctaHref}" class="inline-flex min-h-11 items-center justify-center rounded-xl bg-violet-600 font-semibold text-white">{ctaLabel}</a></div></div></header> } }
+component PublicHeader {
+  props {
+    brand = "WRNexusJS"
+    homeHref = "/"
+    signInHref = "/signin"
+    ctaHref = "/start"
+    ctaLabel = "Get started"
+  }
+  state mobileOpen = false
+  view {
+    <header class="sticky top-0 z-40 border-b border-slate-200/80 bg-white/85 backdrop-blur-xl dark:border-slate-800 dark:bg-slate-950/85"><div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8"><a href="{homeHref}" class="text-lg font-black tracking-tight">{brand}</a><nav class="hidden items-center gap-7 md:flex" aria-label="Primary"><slot /></nav><div class="hidden items-center gap-3 md:flex"><a href="{signInHref}" class="text-sm font-semibold">Sign in</a><a href="{ctaHref}" class="inline-flex min-h-10 items-center rounded-xl bg-violet-600 px-4 text-sm font-semibold text-white">{ctaLabel}</a><button data-wire-theme-toggle type="button" aria-label="Toggle theme" class="size-10 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800">◐</button></div><button type="button" aria-label="Open menu" aria-expanded="{mobileOpen}" @click="mobileOpen = !mobileOpen" class="size-11 rounded-xl md:hidden">☰</button></div><div data-show="mobileOpen" class="border-t border-slate-200 px-4 py-5 md:hidden dark:border-slate-800"><div class="space-y-3"><slot name="mobile" /></div><div class="mt-5 grid grid-cols-2 gap-3"><a href="{signInHref}" class="inline-flex min-h-11 items-center justify-center rounded-xl border border-slate-300 font-semibold">Sign in</a><a href="{ctaHref}" class="inline-flex min-h-11 items-center justify-center rounded-xl bg-violet-600 font-semibold text-white">{ctaLabel}</a></div></div></header>
+  }
+}
diff --git a/.publish/ui/components/RadioGroup.wrn b/.publish/ui/components/RadioGroup.wrn
index 0b47c681..f0332343 100644
--- a/.publish/ui/components/RadioGroup.wrn
+++ b/.publish/ui/components/RadioGroup.wrn
@@ -1 +1,9 @@
-component RadioGroup { props { label = "Choose one" name = "choice" } view { <fieldset class="space-y-3"><legend class="text-sm font-semibold text-slate-900 dark:text-white">{label}</legend><div class="space-y-2"><slot /></div></fieldset> } }
+component RadioGroup {
+  props {
+    label = "Choose one"
+    name = "choice"
+  }
+  view {
+    <fieldset class="space-y-3"><legend class="text-sm font-semibold text-slate-900 dark:text-white">{label}</legend><div class="space-y-2"><slot /></div></fieldset>
+  }
+}
diff --git a/.publish/ui/components/SchedulePicker.wrn b/.publish/ui/components/SchedulePicker.wrn
index 0e2524c3..c3a64bd2 100644
--- a/.publish/ui/components/SchedulePicker.wrn
+++ b/.publish/ui/components/SchedulePicker.wrn
@@ -1 +1,8 @@
-component SchedulePicker { props { label = "Schedule" } view { <fieldset class="space-y-4 rounded-2xl border border-slate-200 p-5 dark:border-slate-800"><legend class="px-2 font-semibold">{label}</legend><DateTimeInput id="scheduleAt" name="scheduleAt" label="Date and time" /><TimezoneSelector /></fieldset> } }
+component SchedulePicker {
+  props {
+    label = "Schedule"
+  }
+  view {
+    <fieldset class="space-y-4 rounded-2xl border border-slate-200 p-5 dark:border-slate-800"><legend class="px-2 font-semibold">{label}</legend><DateTimeInput id="scheduleAt" name="scheduleAt" label="Date and time" /><TimezoneSelector /></fieldset>
+  }
+}
diff --git a/.publish/ui/components/SearchInput.wrn b/.publish/ui/components/SearchInput.wrn
index 68db6c7d..d74df598 100644
--- a/.publish/ui/components/SearchInput.wrn
+++ b/.publish/ui/components/SearchInput.wrn
@@ -1,5 +1,17 @@
 component SearchInput {
-  props { id = "" name = "" label = "Search" value = "" placeholder = "" help = "" error = "" required = false disabled = false readonly = false autocomplete = "" }
+  props {
+    id = ""
+    name = ""
+    label = "Search"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
   view {
     <div class="space-y-2">
       <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
diff --git a/.publish/ui/components/Section.wrn b/.publish/ui/components/Section.wrn
index 979096d9..81cf8331 100644
--- a/.publish/ui/components/Section.wrn
+++ b/.publish/ui/components/Section.wrn
@@ -1,5 +1,10 @@
 component Section {
-  props { id = "" size = "default" surface = "default" className = "" }
+  props {
+    id = ""
+    size = "default"
+    surface = "default"
+    className = ""
+  }
   view {
     <section id="{id}" class="{size === 'compact' ? 'py-10 sm:py-14' : size === 'spacious' ? 'py-20 sm:py-28' : 'py-14 sm:py-20'} {surface === 'muted' ? 'bg-slate-50 dark:bg-slate-900/50' : surface === 'brand' ? 'bg-violet-600 text-white' : ''} {className}"><slot /></section>
   }
diff --git a/.publish/ui/components/SectionHeader.wrn b/.publish/ui/components/SectionHeader.wrn
index 1f75bdb7..41313925 100644
--- a/.publish/ui/components/SectionHeader.wrn
+++ b/.publish/ui/components/SectionHeader.wrn
@@ -1 +1,11 @@
-component SectionHeader { props { eyebrow = "" title = "Section title" description = "" align = "left" } view { <header class="max-w-3xl {align === 'center' ? 'mx-auto text-center' : ''}"><p data-show="eyebrow" class="mb-3 text-sm font-bold uppercase tracking-[0.18em] text-violet-600 dark:text-violet-400">{eyebrow}</p><h2 class="text-3xl font-bold tracking-tight text-slate-950 sm:text-4xl dark:text-white">{title}</h2><p data-show="description" class="mt-4 text-lg leading-8 text-slate-600 dark:text-slate-300">{description}</p><div class="mt-6"><slot /></div></header> } }
+component SectionHeader {
+  props {
+    eyebrow = ""
+    title = "Section title"
+    description = ""
+    align = "left"
+  }
+  view {
+    <header class="max-w-3xl {align === 'center' ? 'mx-auto text-center' : ''}"><p data-show="eyebrow" class="mb-3 text-sm font-bold uppercase tracking-[0.18em] text-violet-600 dark:text-violet-400">{eyebrow}</p><h2 class="text-3xl font-bold tracking-tight text-slate-950 sm:text-4xl dark:text-white">{title}</h2><p data-show="description" class="mt-4 text-lg leading-8 text-slate-600 dark:text-slate-300">{description}</p><div class="mt-6"><slot /></div></header>
+  }
+}
diff --git a/.publish/ui/components/StatCard.wrn b/.publish/ui/components/StatCard.wrn
index c68cc41e..c29c69a6 100644
--- a/.publish/ui/components/StatCard.wrn
+++ b/.publish/ui/components/StatCard.wrn
@@ -1 +1,11 @@
-component StatCard { props { label = "Metric" value = "0" change = "" trend = "neutral" } view { <article class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900"><p class="text-sm font-medium text-slate-500">{label}</p><div class="mt-2 flex items-end justify-between gap-3"><p class="text-3xl font-bold tracking-tight">{value}</p><span data-show="change" class="text-sm font-semibold {trend === 'up' ? 'text-emerald-600' : trend === 'down' ? 'text-red-600' : 'text-slate-500'}">{trend === 'up' ? '↑' : trend === 'down' ? '↓' : ''} {change}</span></div></article> } }
+component StatCard {
+  props {
+    label = "Metric"
+    value = "0"
+    change = ""
+    trend = "neutral"
+  }
+  view {
+    <article class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900"><p class="text-sm font-medium text-slate-500">{label}</p><div class="mt-2 flex items-end justify-between gap-3"><p class="text-3xl font-bold tracking-tight">{value}</p><span data-show="change" class="text-sm font-semibold {trend === 'up' ? 'text-emerald-600' : trend === 'down' ? 'text-red-600' : 'text-slate-500'}">{trend === 'up' ? '↑' : trend === 'down' ? '↓' : ''} {change}</span></div></article>
+  }
+}
diff --git a/.publish/ui/components/StatusBadge.wrn b/.publish/ui/components/StatusBadge.wrn
index aea0c8d2..cfbaeda7 100644
--- a/.publish/ui/components/StatusBadge.wrn
+++ b/.publish/ui/components/StatusBadge.wrn
@@ -1 +1,8 @@
-component StatusBadge { props { status = "operational" } view { <span class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold {status === 'operational' ? 'bg-emerald-100 text-emerald-700' : status === 'degraded' ? 'bg-amber-100 text-amber-700' : status === 'outage' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'}"><span class="size-2 rounded-full bg-current"></span>{status}</span> } }
+component StatusBadge {
+  props {
+    status = "operational"
+  }
+  view {
+    <span class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold {status === 'operational' ? 'bg-emerald-100 text-emerald-700' : status === 'degraded' ? 'bg-amber-100 text-amber-700' : status === 'outage' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'}"><span class="size-2 rounded-full bg-current"></span>{status}</span>
+  }
+}
diff --git a/.publish/ui/components/Tabs.wrn b/.publish/ui/components/Tabs.wrn
index 9197f888..a4a5b832 100644
--- a/.publish/ui/components/Tabs.wrn
+++ b/.publish/ui/components/Tabs.wrn
@@ -1 +1,9 @@
-component Tabs { props { active = "first" } state current = active view { <div><div role="tablist" class="flex gap-1 overflow-x-auto rounded-xl bg-slate-100 p-1 dark:bg-slate-800"><button role="tab" aria-selected="{current === 'first'}" @click="current = 'first'" class="min-h-10 flex-1 rounded-lg px-4 text-sm font-semibold transition {current === 'first' ? 'bg-white shadow dark:bg-slate-900' : 'text-slate-500'}">First</button><button role="tab" aria-selected="{current === 'second'}" @click="current = 'second'" class="min-h-10 flex-1 rounded-lg px-4 text-sm font-semibold transition {current === 'second' ? 'bg-white shadow dark:bg-slate-900' : 'text-slate-500'}">Second</button></div><div data-show="current === 'first'" role="tabpanel" class="pt-5"><slot name="first" /></div><div data-show="current === 'second'" role="tabpanel" class="pt-5"><slot name="second" /></div></div> } }
+component Tabs {
+  props {
+    active = "first"
+  }
+  state current = active
+  view {
+    <div><div role="tablist" class="flex gap-1 overflow-x-auto rounded-xl bg-slate-100 p-1 dark:bg-slate-800"><button role="tab" aria-selected="{current === 'first'}" @click="current = 'first'" class="min-h-10 flex-1 rounded-lg px-4 text-sm font-semibold transition {current === 'first' ? 'bg-white shadow dark:bg-slate-900' : 'text-slate-500'}">First</button><button role="tab" aria-selected="{current === 'second'}" @click="current = 'second'" class="min-h-10 flex-1 rounded-lg px-4 text-sm font-semibold transition {current === 'second' ? 'bg-white shadow dark:bg-slate-900' : 'text-slate-500'}">Second</button></div><div data-show="current === 'first'" role="tabpanel" class="pt-5"><slot name="first" /></div><div data-show="current === 'second'" role="tabpanel" class="pt-5"><slot name="second" /></div></div>
+  }
+}
diff --git a/.publish/ui/components/TestimonialCard.wrn b/.publish/ui/components/TestimonialCard.wrn
index 9ecafd0b..d18622a9 100644
--- a/.publish/ui/components/TestimonialCard.wrn
+++ b/.publish/ui/components/TestimonialCard.wrn
@@ -1 +1,12 @@
-component TestimonialCard { props { quote = "Great product." name = "Customer" role = "" company = "" avatar = "" } view { <figure class="rounded-3xl border border-slate-200 bg-white p-7 shadow-sm dark:border-slate-800 dark:bg-slate-900"><blockquote class="text-lg leading-8 text-slate-700 dark:text-slate-200">“{quote}”</blockquote><figcaption class="mt-6 flex items-center gap-3"><Avatar src="{avatar}" initials="{name.slice(0,2)}" /><div><div class="font-semibold">{name}</div><div class="text-sm text-slate-500">{role}<span data-show="company"> · {company}</span></div></div></figcaption></figure> } }
+component TestimonialCard {
+  props {
+    quote = "Great product."
+    name = "Customer"
+    role = ""
+    company = ""
+    avatar = ""
+  }
+  view {
+    <figure class="rounded-3xl border border-slate-200 bg-white p-7 shadow-sm dark:border-slate-800 dark:bg-slate-900"><blockquote class="text-lg leading-8 text-slate-700 dark:text-slate-200">“{quote}”</blockquote><figcaption class="mt-6 flex items-center gap-3"><Avatar src="{avatar}" initials="{name.slice(0,2)}" /><div><div class="font-semibold">{name}</div><div class="text-sm text-slate-500">{role}<span data-show="company"> · {company}</span></div></div></figcaption></figure>
+  }
+}
diff --git a/.publish/ui/components/TextInput.wrn b/.publish/ui/components/TextInput.wrn
index 16cf6adf..d764d29a 100644
--- a/.publish/ui/components/TextInput.wrn
+++ b/.publish/ui/components/TextInput.wrn
@@ -1,5 +1,17 @@
 component TextInput {
-  props { id = "" name = "" label = "Text" value = "" placeholder = "" help = "" error = "" required = false disabled = false readonly = false autocomplete = "" }
+  props {
+    id = ""
+    name = ""
+    label = "Text"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
   view {
     <div class="space-y-2">
       <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
diff --git a/.publish/ui/components/TimeInput.wrn b/.publish/ui/components/TimeInput.wrn
index 744b73c4..db359c80 100644
--- a/.publish/ui/components/TimeInput.wrn
+++ b/.publish/ui/components/TimeInput.wrn
@@ -1,5 +1,17 @@
 component TimeInput {
-  props { id = "" name = "" label = "Time" value = "" placeholder = "" help = "" error = "" required = false disabled = false readonly = false autocomplete = "" }
+  props {
+    id = ""
+    name = ""
+    label = "Time"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
   view {
     <div class="space-y-2">
       <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
diff --git a/.publish/ui/components/Timeline.wrn b/.publish/ui/components/Timeline.wrn
index c53511da..67383575 100644
--- a/.publish/ui/components/Timeline.wrn
+++ b/.publish/ui/components/Timeline.wrn
@@ -1 +1,8 @@
-component Timeline { props { title = "Timeline" } view { <section><h2 class="text-lg font-bold">{title}</h2><ol class="mt-5 border-l border-slate-200 pl-6 dark:border-slate-800"><slot /></ol></section> } }
+component Timeline {
+  props {
+    title = "Timeline"
+  }
+  view {
+    <section><h2 class="text-lg font-bold">{title}</h2><ol class="mt-5 border-l border-slate-200 pl-6 dark:border-slate-800"><slot /></ol></section>
+  }
+}
diff --git a/.publish/ui/components/TimelineItem.wrn b/.publish/ui/components/TimelineItem.wrn
index 60ae1571..bee45a78 100644
--- a/.publish/ui/components/TimelineItem.wrn
+++ b/.publish/ui/components/TimelineItem.wrn
@@ -1 +1,11 @@
-component TimelineItem { props { title = "Event" date = "" description = "" status = "default" } view { <li class="relative pb-8 last:pb-0"><span class="absolute -left-[1.85rem] top-1 size-3 rounded-full ring-4 ring-white dark:ring-slate-950 {status === 'success' ? 'bg-emerald-500' : status === 'warning' ? 'bg-amber-500' : 'bg-violet-500'}"></span><div class="flex flex-wrap items-baseline justify-between gap-2"><h3 class="font-semibold">{title}</h3><time class="text-xs text-slate-500">{date}</time></div><p data-show="description" class="mt-1 text-sm text-slate-500">{description}</p></li> } }
+component TimelineItem {
+  props {
+    title = "Event"
+    date = ""
+    description = ""
+    status = "default"
+  }
+  view {
+    <li class="relative pb-8 last:pb-0"><span class="absolute -left-[1.85rem] top-1 size-3 rounded-full ring-4 ring-white dark:ring-slate-950 {status === 'success' ? 'bg-emerald-500' : status === 'warning' ? 'bg-amber-500' : 'bg-violet-500'}"></span><div class="flex flex-wrap items-baseline justify-between gap-2"><h3 class="font-semibold">{title}</h3><time class="text-xs text-slate-500">{date}</time></div><p data-show="description" class="mt-1 text-sm text-slate-500">{description}</p></li>
+  }
+}
diff --git a/.publish/ui/components/TimezoneSelector.wrn b/.publish/ui/components/TimezoneSelector.wrn
index 95292cab..5c99e272 100644
--- a/.publish/ui/components/TimezoneSelector.wrn
+++ b/.publish/ui/components/TimezoneSelector.wrn
@@ -1 +1,10 @@
-component TimezoneSelector { props { id = "timezone" name = "timezone" label = "Timezone" } view { <Select id="{id}" name="{name}" label="{label}"><option value="UTC">UTC</option><option value="Asia/Kolkata">Asia/Kolkata</option><option value="America/New_York">America/New_York</option><option value="Europe/London">Europe/London</option></Select> } }
+component TimezoneSelector {
+  props {
+    id = "timezone"
+    name = "timezone"
+    label = "Timezone"
+  }
+  view {
+    <Select id="{id}" name="{name}" label="{label}"><option value="UTC">UTC</option><option value="Asia/Kolkata">Asia/Kolkata</option><option value="America/New_York">America/New_York</option><option value="Europe/London">Europe/London</option></Select>
+  }
+}
diff --git a/.publish/ui/components/Toast.wrn b/.publish/ui/components/Toast.wrn
index 7fc6fec1..36e4ca6c 100644
--- a/.publish/ui/components/Toast.wrn
+++ b/.publish/ui/components/Toast.wrn
@@ -1 +1,12 @@
-component Toast { props { title = "Saved" description = "" variant = "success" duration = 5000 } state visible = true view { <div data-show="visible" role="status" aria-live="polite" class="pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-2xl border bg-white p-4 shadow-2xl dark:border-slate-800 dark:bg-slate-900"><span class="mt-0.5 flex size-8 items-center justify-center rounded-full {variant === 'success' ? 'bg-emerald-100 text-emerald-700' : variant === 'danger' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'}">{variant === 'success' ? '✓' : variant === 'danger' ? '!' : 'i'}</span><div class="min-w-0 flex-1"><p class="font-semibold">{title}</p><p data-show="description" class="mt-1 text-sm text-slate-500">{description}</p></div><button type="button" aria-label="Close" @click="visible = false" class="rounded-lg p-1 text-slate-400 hover:bg-slate-100">×</button></div> } }
+component Toast {
+  props {
+    title = "Saved"
+    description = ""
+    variant = "success"
+    duration = 5000
+  }
+  state visible = true
+  view {
+    <div data-show="visible" role="status" aria-live="polite" class="pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-2xl border bg-white p-4 shadow-2xl dark:border-slate-800 dark:bg-slate-900"><span class="mt-0.5 flex size-8 items-center justify-center rounded-full {variant === 'success' ? 'bg-emerald-100 text-emerald-700' : variant === 'danger' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'}">{variant === 'success' ? '✓' : variant === 'danger' ? '!' : 'i'}</span><div class="min-w-0 flex-1"><p class="font-semibold">{title}</p><p data-show="description" class="mt-1 text-sm text-slate-500">{description}</p></div><button type="button" aria-label="Close" @click="visible = false" class="rounded-lg p-1 text-slate-400 hover:bg-slate-100">×</button></div>
+  }
+}
diff --git a/.publish/ui/components/UrlInput.wrn b/.publish/ui/components/UrlInput.wrn
index 5b50c4d9..2fdb643a 100644
--- a/.publish/ui/components/UrlInput.wrn
+++ b/.publish/ui/components/UrlInput.wrn
@@ -1,5 +1,17 @@
 component UrlInput {
-  props { id = "" name = "" label = "Url" value = "" placeholder = "" help = "" error = "" required = false disabled = false readonly = false autocomplete = "" }
+  props {
+    id = ""
+    name = ""
+    label = "Url"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
   view {
     <div class="space-y-2">
       <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
diff --git a/.publish/ui/components/VisuallyHidden.wrn b/.publish/ui/components/VisuallyHidden.wrn
index 1023aa08..6d093b9c 100644
--- a/.publish/ui/components/VisuallyHidden.wrn
+++ b/.publish/ui/components/VisuallyHidden.wrn
@@ -1 +1,8 @@
-component VisuallyHidden { props { className = "" } view { <div class="sr-only {className}"><slot /></div> } }
+component VisuallyHidden {
+  props {
+    className = ""
+  }
+  view {
+    <div class="sr-only {className}"><slot /></div>
+  }
+}
diff --git a/.publish/ui/components/avatar.wrn b/.publish/ui/components/avatar.wrn
index 31d858b6..0dd934e5 100644
--- a/.publish/ui/components/avatar.wrn
+++ b/.publish/ui/components/avatar.wrn
@@ -1 +1,11 @@
-component Avatar { props { src = "" alt = "" initials = "WR" size = "md" } view { <span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500 font-semibold text-white {size === 'sm' ? 'size-8 text-xs' : size === 'lg' ? 'size-14 text-base' : 'size-10 text-sm'}"><img data-show="src" src="{src}" alt="{alt}" class="h-full w-full object-cover" /><span data-show="!src" aria-hidden="true">{initials}</span></span> } }
+component Avatar {
+  props {
+    src = ""
+    alt = ""
+    initials = "WR"
+    size = "md"
+  }
+  view {
+    <span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500 font-semibold text-white {size === 'sm' ? 'size-8 text-xs' : size === 'lg' ? 'size-14 text-base' : 'size-10 text-sm'}"><img data-show="src" src="{src}" alt="{alt}" class="h-full w-full object-cover" /><span data-show="!src" aria-hidden="true">{initials}</span></span>
+  }
+}
diff --git a/.publish/ui/components/badge.wrn b/.publish/ui/components/badge.wrn
index edc169f7..7bd696b5 100644
--- a/.publish/ui/components/badge.wrn
+++ b/.publish/ui/components/badge.wrn
@@ -1 +1,9 @@
-component Badge { props { label = "Badge" variant = "neutral" } view { <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset {variant === 'success' ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-950/40 dark:text-emerald-300' : variant === 'warning' ? 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-950/40 dark:text-amber-300' : variant === 'danger' ? 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-950/40 dark:text-red-300' : variant === 'brand' ? 'bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-950/40 dark:text-violet-300' : 'bg-slate-100 text-slate-700 ring-slate-600/10 dark:bg-slate-800 dark:text-slate-300'}">{label}</span> } }
+component Badge {
+  props {
+    label = "Badge"
+    variant = "neutral"
+  }
+  view {
+    <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset {variant === 'success' ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-950/40 dark:text-emerald-300' : variant === 'warning' ? 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-950/40 dark:text-amber-300' : variant === 'danger' ? 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-950/40 dark:text-red-300' : variant === 'brand' ? 'bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-950/40 dark:text-violet-300' : 'bg-slate-100 text-slate-700 ring-slate-600/10 dark:bg-slate-800 dark:text-slate-300'}">{label}</span>
+  }
+}
diff --git a/.publish/ui/components/button.wrn b/.publish/ui/components/button.wrn
index 8a7187e9..d20ff2a5 100644
--- a/.publish/ui/components/button.wrn
+++ b/.publish/ui/components/button.wrn
@@ -1,5 +1,14 @@
 component Button {
-  props { label = "Button" type = "button" variant = "primary" size = "md" disabled = false loading = false icon = "" className = "" }
+  props {
+    label = "Button"
+    type = "button"
+    variant = "primary"
+    size = "md"
+    disabled = false
+    loading = false
+    icon = ""
+    className = ""
+  }
   view {
     <button type="{type}" disabled="{disabled || loading}" aria-busy="{loading}" class="inline-flex min-h-11 items-center justify-center gap-2 rounded-xl font-semibold transition-all duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] {size === 'sm' ? 'px-3 py-2 text-sm' : size === 'lg' ? 'px-6 py-3.5 text-base' : 'px-4 py-2.5 text-sm'} {variant === 'secondary' ? 'border border-slate-300 bg-white text-slate-900 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-white dark:hover:bg-slate-800' : variant === 'ghost' ? 'text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800' : variant === 'danger' ? 'bg-red-600 text-white hover:bg-red-700' : 'bg-violet-600 text-white shadow-sm hover:-translate-y-0.5 hover:bg-violet-700 hover:shadow-md'} {className}">
       <span data-show="loading" class="size-4 animate-spin rounded-full border-2 border-current border-r-transparent"></span>
diff --git a/.publish/ui/components/card.wrn b/.publish/ui/components/card.wrn
index 3b0ce315..a99a532d 100644
--- a/.publish/ui/components/card.wrn
+++ b/.publish/ui/components/card.wrn
@@ -1 +1,11 @@
-component Card { props { variant = "default" padding = "md" interactive = false className = "" } view { <article class="rounded-2xl border border-slate-200 bg-white text-slate-950 shadow-sm transition duration-300 dark:border-slate-800 dark:bg-slate-900 dark:text-white {padding === 'sm' ? 'p-4' : padding === 'lg' ? 'p-8' : 'p-6'} {variant === 'glass' ? 'bg-white/75 backdrop-blur-xl dark:bg-slate-900/70' : variant === 'elevated' ? 'shadow-xl shadow-slate-950/5' : ''} {interactive ? 'hover:-translate-y-1 hover:shadow-xl' : ''} {className}"><slot /></article> } }
+component Card {
+  props {
+    variant = "default"
+    padding = "md"
+    interactive = false
+    className = ""
+  }
+  view {
+    <article class="rounded-2xl border border-slate-200 bg-white text-slate-950 shadow-sm transition duration-300 dark:border-slate-800 dark:bg-slate-900 dark:text-white {padding === 'sm' ? 'p-4' : padding === 'lg' ? 'p-8' : 'p-6'} {variant === 'glass' ? 'bg-white/75 backdrop-blur-xl dark:bg-slate-900/70' : variant === 'elevated' ? 'shadow-xl shadow-slate-950/5' : ''} {interactive ? 'hover:-translate-y-1 hover:shadow-xl' : ''} {className}"><slot /></article>
+  }
+}
diff --git a/.publish/ui/components/checkbox.wrn b/.publish/ui/components/checkbox.wrn
index 034c0b2c..28709f45 100644
--- a/.publish/ui/components/checkbox.wrn
+++ b/.publish/ui/components/checkbox.wrn
@@ -1 +1,13 @@
-component Checkbox { props { id = "" name = "" label = "Checkbox" description = "" checked = false disabled = false } view { <label for="{id}" class="flex min-h-11 cursor-pointer items-start gap-3 rounded-xl p-2 transition hover:bg-slate-50 dark:hover:bg-slate-900"><input id="{id}" name="{name}" type="checkbox" checked="{checked}" disabled="{disabled}" class="mt-0.5 size-5 rounded border-slate-300 text-violet-600 focus:ring-violet-500 dark:border-slate-700 dark:bg-slate-950" /><span><span class="block text-sm font-semibold text-slate-900 dark:text-white">{label}</span><span data-show="description" class="mt-0.5 block text-sm text-slate-500 dark:text-slate-400">{description}</span></span></label> } }
+component Checkbox {
+  props {
+    id = ""
+    name = ""
+    label = "Checkbox"
+    description = ""
+    checked = false
+    disabled = false
+  }
+  view {
+    <label for="{id}" class="flex min-h-11 cursor-pointer items-start gap-3 rounded-xl p-2 transition hover:bg-slate-50 dark:hover:bg-slate-900"><input id="{id}" name="{name}" type="checkbox" checked="{checked}" disabled="{disabled}" class="mt-0.5 size-5 rounded border-slate-300 text-violet-600 focus:ring-violet-500 dark:border-slate-700 dark:bg-slate-950" /><span><span class="block text-sm font-semibold text-slate-900 dark:text-white">{label}</span><span data-show="description" class="mt-0.5 block text-sm text-slate-500 dark:text-slate-400">{description}</span></span></label>
+  }
+}
diff --git a/.publish/ui/components/container.wrn b/.publish/ui/components/container.wrn
index fbc3a023..be0b0c80 100644
--- a/.publish/ui/components/container.wrn
+++ b/.publish/ui/components/container.wrn
@@ -1,5 +1,8 @@
 component Container {
-  props { size = "default" className = "" }
+  props {
+    size = "default"
+    className = ""
+  }
   view {
     <div class="mx-auto w-full px-4 sm:px-6 lg:px-8 {size === 'narrow' ? 'max-w-3xl' : size === 'wide' ? 'max-w-screen-2xl' : 'max-w-7xl'} {className}"><slot /></div>
   }
diff --git a/.publish/ui/components/divider.wrn b/.publish/ui/components/divider.wrn
index be692b33..844e0c98 100644
--- a/.publish/ui/components/divider.wrn
+++ b/.publish/ui/components/divider.wrn
@@ -1 +1,8 @@
-component Divider { props { className = "" } view { <div class="h-px w-full bg-slate-200 dark:bg-slate-800 {className}"><slot /></div> } }
+component Divider {
+  props {
+    className = ""
+  }
+  view {
+    <div class="h-px w-full bg-slate-200 dark:bg-slate-800 {className}"><slot /></div>
+  }
+}
diff --git a/.publish/ui/components/grid.wrn b/.publish/ui/components/grid.wrn
index 44894974..ef0facc6 100644
--- a/.publish/ui/components/grid.wrn
+++ b/.publish/ui/components/grid.wrn
@@ -1 +1,9 @@
-component Grid { props { gap = "4" className = "" } view { <div class="grid gap-{gap} {className}"><slot /></div> } }
+component Grid {
+  props {
+    gap = "4"
+    className = ""
+  }
+  view {
+    <div class="grid gap-{gap} {className}"><slot /></div>
+  }
+}
diff --git a/.publish/ui/components/radio.wrn b/.publish/ui/components/radio.wrn
index 8bd61fbb..3feb7eef 100644
--- a/.publish/ui/components/radio.wrn
+++ b/.publish/ui/components/radio.wrn
@@ -1 +1,14 @@
-component Radio { props { id = "" name = "choice" value = "" label = "Option" description = "" checked = false disabled = false } view { <label for="{id}" class="flex min-h-11 cursor-pointer items-start gap-3 rounded-xl border border-slate-200 p-3 transition hover:border-violet-400 dark:border-slate-800"><input id="{id}" name="{name}" type="radio" value="{value}" checked="{checked}" disabled="{disabled}" class="mt-0.5 size-5 border-slate-300 text-violet-600 focus:ring-violet-500" /><span><span class="block text-sm font-semibold">{label}</span><span data-show="description" class="text-sm text-slate-500">{description}</span></span></label> } }
+component Radio {
+  props {
+    id = ""
+    name = "choice"
+    value = ""
+    label = "Option"
+    description = ""
+    checked = false
+    disabled = false
+  }
+  view {
+    <label for="{id}" class="flex min-h-11 cursor-pointer items-start gap-3 rounded-xl border border-slate-200 p-3 transition hover:border-violet-400 dark:border-slate-800"><input id="{id}" name="{name}" type="radio" value="{value}" checked="{checked}" disabled="{disabled}" class="mt-0.5 size-5 border-slate-300 text-violet-600 focus:ring-violet-500" /><span><span class="block text-sm font-semibold">{label}</span><span data-show="description" class="text-sm text-slate-500">{description}</span></span></label>
+  }
+}
diff --git a/.publish/ui/components/select.wrn b/.publish/ui/components/select.wrn
index a21e672a..60b2f815 100644
--- a/.publish/ui/components/select.wrn
+++ b/.publish/ui/components/select.wrn
@@ -1 +1,14 @@
-component Select { props { id = "" name = "" label = "Select" help = "" error = "" required = false disabled = false } view { <div class="space-y-2"><label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label><select id="{id}" name="{name}" required="{required}" disabled="{disabled}" class="min-h-11 w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-950 dark:text-white"><slot /></select><p data-show="help && !error" class="text-sm text-slate-500">{help}</p><p data-show="error" role="alert" class="text-sm font-medium text-red-600">{error}</p></div> } }
+component Select {
+  props {
+    id = ""
+    name = ""
+    label = "Select"
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+  }
+  view {
+    <div class="space-y-2"><label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label><select id="{id}" name="{name}" required="{required}" disabled="{disabled}" class="min-h-11 w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-950 dark:text-white"><slot /></select><p data-show="help && !error" class="text-sm text-slate-500">{help}</p><p data-show="error" role="alert" class="text-sm font-medium text-red-600">{error}</p></div>
+  }
+}
diff --git a/.publish/ui/components/skeleton.wrn b/.publish/ui/components/skeleton.wrn
index 3baf5208..b43e0abd 100644
--- a/.publish/ui/components/skeleton.wrn
+++ b/.publish/ui/components/skeleton.wrn
@@ -1 +1,10 @@
-component Skeleton { props { height = "4" rounded = "lg" className = "" } view { <div aria-hidden="true" class="animate-pulse bg-slate-200 dark:bg-slate-800 h-{height} rounded-{rounded} {className}"></div> } }
+component Skeleton {
+  props {
+    height = "4"
+    rounded = "lg"
+    className = ""
+  }
+  view {
+    <div aria-hidden="true" class="animate-pulse bg-slate-200 dark:bg-slate-800 h-{height} rounded-{rounded} {className}"></div>
+  }
+}
diff --git a/.publish/ui/components/spinner.wrn b/.publish/ui/components/spinner.wrn
index 84f647ae..98bd90e2 100644
--- a/.publish/ui/components/spinner.wrn
+++ b/.publish/ui/components/spinner.wrn
@@ -1 +1,9 @@
-component Spinner { props { label = "Loading" size = "md" } view { <span role="status" aria-label="{label}" class="inline-block animate-spin rounded-full border-2 border-slate-300 border-r-violet-600 {size === 'sm' ? 'size-4' : size === 'lg' ? 'size-10' : 'size-6'}"></span> } }
+component Spinner {
+  props {
+    label = "Loading"
+    size = "md"
+  }
+  view {
+    <span role="status" aria-label="{label}" class="inline-block animate-spin rounded-full border-2 border-slate-300 border-r-violet-600 {size === 'sm' ? 'size-4' : size === 'lg' ? 'size-10' : 'size-6'}"></span>
+  }
+}
diff --git a/.publish/ui/components/stack.wrn b/.publish/ui/components/stack.wrn
index 41826b0e..6c53bc53 100644
--- a/.publish/ui/components/stack.wrn
+++ b/.publish/ui/components/stack.wrn
@@ -1 +1,9 @@
-component Stack { props { gap = "4" className = "" } view { <div class="flex flex-col gap-{gap} {className}"><slot /></div> } }
+component Stack {
+  props {
+    gap = "4"
+    className = ""
+  }
+  view {
+    <div class="flex flex-col gap-{gap} {className}"><slot /></div>
+  }
+}
diff --git a/.publish/ui/components/switch.wrn b/.publish/ui/components/switch.wrn
index 9d8ab9dc..1777d7bb 100644
--- a/.publish/ui/components/switch.wrn
+++ b/.publish/ui/components/switch.wrn
@@ -1 +1,14 @@
-component Switch { props { id = "" name = "" label = "Switch" description = "" checked = false disabled = false } state on = checked view { <button id="{id}" type="button" role="switch" aria-checked="{on}" disabled="{disabled}" @click="on = !on" class="flex w-full items-center justify-between gap-4 rounded-xl p-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 disabled:opacity-50"><span><span class="block text-sm font-semibold">{label}</span><span data-show="description" class="text-sm text-slate-500">{description}</span></span><span class="relative inline-flex h-6 w-11 shrink-0 rounded-full transition {on ? 'bg-violet-600' : 'bg-slate-300 dark:bg-slate-700'}"><span class="absolute top-0.5 size-5 rounded-full bg-white shadow transition-transform {on ? 'translate-x-5' : 'translate-x-0.5'}"></span></span><input type="hidden" name="{name}" value="{on ? 'true' : 'false'}" /></button> } }
+component Switch {
+  props {
+    id = ""
+    name = ""
+    label = "Switch"
+    description = ""
+    checked = false
+    disabled = false
+  }
+  state on = checked
+  view {
+    <button id="{id}" type="button" role="switch" aria-checked="{on}" disabled="{disabled}" @click="on = !on" class="flex w-full items-center justify-between gap-4 rounded-xl p-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 disabled:opacity-50"><span><span class="block text-sm font-semibold">{label}</span><span data-show="description" class="text-sm text-slate-500">{description}</span></span><span class="relative inline-flex h-6 w-11 shrink-0 rounded-full transition {on ? 'bg-violet-600' : 'bg-slate-300 dark:bg-slate-700'}"><span class="absolute top-0.5 size-5 rounded-full bg-white shadow transition-transform {on ? 'translate-x-5' : 'translate-x-0.5'}"></span></span><input type="hidden" name="{name}" value="{on ? 'true' : 'false'}" /></button>
+  }
+}
diff --git a/.publish/ui/components/table.wrn b/.publish/ui/components/table.wrn
index 00e7c083..a9820020 100644
--- a/.publish/ui/components/table.wrn
+++ b/.publish/ui/components/table.wrn
@@ -1 +1,9 @@
-component Table { props { caption = "Data table" responsive = true } view { <div class="w-full overflow-x-auto rounded-2xl border border-slate-200 dark:border-slate-800"><table class="w-full min-w-[640px] border-collapse text-left text-sm"><caption class="sr-only">{caption}</caption><slot /></table></div> } }
+component Table {
+  props {
+    caption = "Data table"
+    responsive = true
+  }
+  view {
+    <div class="w-full overflow-x-auto rounded-2xl border border-slate-200 dark:border-slate-800"><table class="w-full min-w-[640px] border-collapse text-left text-sm"><caption class="sr-only">{caption}</caption><slot /></table></div>
+  }
+}
diff --git a/.publish/ui/components/textarea.wrn b/.publish/ui/components/textarea.wrn
index 2cf1bcd6..1c81bb9e 100644
--- a/.publish/ui/components/textarea.wrn
+++ b/.publish/ui/components/textarea.wrn
@@ -1 +1,17 @@
-component Textarea { props { id = "" name = "" label = "Message" value = "" placeholder = "" rows = 5 help = "" error = "" required = false disabled = false } view { <div class="space-y-2"><label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label><textarea id="{id}" name="{name}" rows="{rows}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" aria-invalid="{!!error}" class="w-full resize-y rounded-xl border bg-white px-3.5 py-3 text-slate-950 shadow-sm outline-none transition focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 dark:bg-slate-950 dark:text-white {error ? 'border-red-500' : 'border-slate-300 dark:border-slate-700'}">{value}</textarea><p data-show="help && !error" class="text-sm text-slate-500">{help}</p><p data-show="error" role="alert" class="text-sm font-medium text-red-600">{error}</p></div> } }
+component Textarea {
+  props {
+    id = ""
+    name = ""
+    label = "Message"
+    value = ""
+    placeholder = ""
+    rows = 5
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+  }
+  view {
+    <div class="space-y-2"><label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label><textarea id="{id}" name="{name}" rows="{rows}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" aria-invalid="{!!error}" class="w-full resize-y rounded-xl border bg-white px-3.5 py-3 text-slate-950 shadow-sm outline-none transition focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 dark:bg-slate-950 dark:text-white {error ? 'border-red-500' : 'border-slate-300 dark:border-slate-700'}">{value}</textarea><p data-show="help && !error" class="text-sm text-slate-500">{help}</p><p data-show="error" role="alert" class="text-sm font-medium text-red-600">{error}</p></div>
+  }
+}
diff --git a/.publish/ui/components/tooltip.wrn b/.publish/ui/components/tooltip.wrn
index 828b27e6..58c1b613 100644
--- a/.publish/ui/components/tooltip.wrn
+++ b/.publish/ui/components/tooltip.wrn
@@ -1 +1,9 @@
-component Tooltip { props { text = "Helpful information" position = "top" } view { <span class="group relative inline-flex"><slot /><span role="tooltip" class="pointer-events-none absolute z-40 w-max max-w-xs rounded-lg bg-slate-950 px-2.5 py-1.5 text-xs font-medium text-white opacity-0 shadow-lg transition duration-200 group-hover:opacity-100 group-focus-within:opacity-100 {position === 'bottom' ? 'left-1/2 top-full mt-2 -translate-x-1/2' : 'bottom-full left-1/2 mb-2 -translate-x-1/2'}">{text}</span></span> } }
+component Tooltip {
+  props {
+    text = "Helpful information"
+    position = "top"
+  }
+  view {
+    <span class="group relative inline-flex"><slot /><span role="tooltip" class="pointer-events-none absolute z-40 w-max max-w-xs rounded-lg bg-slate-950 px-2.5 py-1.5 text-xs font-medium text-white opacity-0 shadow-lg transition duration-200 group-hover:opacity-100 group-focus-within:opacity-100 {position === 'bottom' ? 'left-1/2 top-full mt-2 -translate-x-1/2' : 'bottom-full left-1/2 mb-2 -translate-x-1/2'}">{text}</span></span>
+  }
+}
diff --git a/.publish/ui/package.json b/.publish/ui/package.json
index e5910ad2..0c861e73 100644
--- a/.publish/ui/package.json
+++ b/.publish/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "description": "@wrnexus/ui — part of the WrNexus framework.",
   "license": "MIT",
@@ -23,7 +23,7 @@
     "./ui.css": "./ui.css"
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.50"
+    "@wrnexus/core": "^0.2.51"
   },
   "files": [
     "dist",
diff --git a/.publish/uploader/package.json b/.publish/uploader/package.json
index 2dd5a856..1e836b17 100644
--- a/.publish/uploader/package.json
+++ b/.publish/uploader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/uploader",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "description": "@wrnexus/uploader — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.50"
+    "@wrnexus/core": "^0.2.51"
   },
   "files": [
     "dist"
diff --git a/.publish/validation/package.json b/.publish/validation/package.json
index 2aff8cff..90ddfb11 100644
--- a/.publish/validation/package.json
+++ b/.publish/validation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/validation",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "description": "@wrnexus/validation — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/README.md b/README.md
index 423aa502..690383a9 100644
--- a/README.md
+++ b/README.md
@@ -666,8 +666,8 @@ runs at dev-serve time and at `wrnexus build`, and returns the final CSS:
 const config: AppConfig = {
   styles: {
     entry: "app/styles/global.css",
-    process: async ({ entryPath }) =>
-      await Bun.$`bunx @tailwindcss/cli -i ${entryPath} --minify`.text(),
+    process: async ({ entryPath, appRoot }) =>
+      await Bun.$.cwd(appRoot)`bunx @tailwindcss/cli -i ${entryPath} --minify`.text(),
   },
 };
 ```
diff --git a/docs/GUIDE.md b/docs/GUIDE.md
index 0c45d378..3f9eb10d 100644
--- a/docs/GUIDE.md
+++ b/docs/GUIDE.md
@@ -532,10 +532,10 @@ Add a CSS framework two ways:
 ```ts
 styles: {
   entry: "app/styles/global.css",
-  process: async ({ entryPath, mode }) => {
+  process: async ({ entryPath, appRoot, mode }) => {
     const args = ["@tailwindcss/cli", "-i", entryPath!];
     if (mode === "production") args.push("--minify");
-    return await Bun.$`bunx ${args}`.text();
+    return await Bun.$.cwd(appRoot)`bunx ${args}`.text();
   },
 }
 ```
diff --git a/examples/basic-app/wrnexus.config.ts b/examples/basic-app/wrnexus.config.ts
index 78935286..b5316c99 100644
--- a/examples/basic-app/wrnexus.config.ts
+++ b/examples/basic-app/wrnexus.config.ts
@@ -54,10 +54,10 @@ const config: AppConfig = {
     // Real Tailwind v4 build. Runs once at dev-serve time (cached, re-run on a
     // restart) and at `wrnexus build`. `@tailwindcss/cli` writes to stdout by
     // default, so we just capture and return the final CSS string.
-    process: async ({ entryPath, mode }) => {
+    process: async ({ entryPath, appRoot, mode }) => {
       const args = ["@tailwindcss/cli", "-i", entryPath!];
       if (mode === "production") args.push("--minify");
-      return await Bun.$`bunx ${args}`.text();
+      return await Bun.$.cwd(appRoot)`bunx ${args}`.text();
     },
   },
 
diff --git a/packages/ai/package.json b/packages/ai/package.json
index fb3b6ab2..1e7eed9f 100644
--- a/packages/ai/package.json
+++ b/packages/ai/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ai",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "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 fee6cb55..0b1f8614 100644
--- a/packages/authz/package.json
+++ b/packages/authz/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/authz",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 70fdf4b9..73d28dae 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/cli",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/cli/src/create.ts b/packages/cli/src/create.ts
index 258aa29a..0f5e7f90 100644
--- a/packages/cli/src/create.ts
+++ b/packages/cli/src/create.ts
@@ -253,10 +253,10 @@ const config: AppConfig = {
     // and at \`wrnexus build\`. \`@tailwindcss/cli\` writes to stdout, so we capture
     // and return the final CSS. Delete this hook to drop Tailwind — global.css is
     // still bundled and served as-is.
-    process: async ({ entryPath, mode }) => {
+    process: async ({ entryPath, appRoot, mode }) => {
       const args = ["@tailwindcss/cli", "-i", entryPath!];
       if (mode === "production") args.push("--minify");
-      return await Bun.$\`bunx \${args}\`.text();
+      return await Bun.$.cwd(appRoot)\`bunx \${args}\`.text();
     },
   },
 
diff --git a/packages/cli/src/update.ts b/packages/cli/src/update.ts
index a3065a81..16591c07 100644
--- a/packages/cli/src/update.ts
+++ b/packages/cli/src/update.ts
@@ -525,6 +525,14 @@ const MIGRATIONS: Migration[] = [
       // No generated application files require automatic migration.
     },
   },
+  {
+    version: "0.2.51",
+    id: "ui-package-repair",
+    description: "Repairs bundled UI component syntax and app-local stylesheet processing.",
+    apply() {
+      // No generated application files require automatic migration.
+    },
+  },
 ];
 
 /** 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 88f3c4ec..72c7de50 100644
--- a/packages/compiler/package.json
+++ b/packages/compiler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/compiler",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/core/package.json b/packages/core/package.json
index 6ced0c2b..035d10e8 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/core",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/csr/package.json b/packages/csr/package.json
index bffe0247..efe7758d 100644
--- a/packages/csr/package.json
+++ b/packages/csr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/csr",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/db/package.json b/packages/db/package.json
index 9409aa3c..3673e882 100644
--- a/packages/db/package.json
+++ b/packages/db/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/db",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
index 5dde08ca..f1ec8c4e 100644
--- a/packages/dev-server/package.json
+++ b/packages/dev-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-server",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/encryption/package.json b/packages/encryption/package.json
index 8482d5d4..e8df45c8 100644
--- a/packages/encryption/package.json
+++ b/packages/encryption/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/encryption",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/helpers/package.json b/packages/helpers/package.json
index 0e46834e..c049b1d1 100644
--- a/packages/helpers/package.json
+++ b/packages/helpers/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/helpers",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "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 234461a6..8a163abf 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/i18n",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/jwt/package.json b/packages/jwt/package.json
index c718d02e..d4f833f6 100644
--- a/packages/jwt/package.json
+++ b/packages/jwt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/jwt",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/mobile/package.json b/packages/mobile/package.json
index ca001a6b..4d6b6d07 100644
--- a/packages/mobile/package.json
+++ b/packages/mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/mobile",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/native/package.json b/packages/native/package.json
index 1b26e8a9..4fd8dd48 100644
--- a/packages/native/package.json
+++ b/packages/native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/native",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/oauth/package.json b/packages/oauth/package.json
index 50e8aef0..2fd7c03a 100644
--- a/packages/oauth/package.json
+++ b/packages/oauth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/oauth",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/pubsub/package.json b/packages/pubsub/package.json
index d9447c65..13aa3d9d 100644
--- a/packages/pubsub/package.json
+++ b/packages/pubsub/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/pubsub",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/queue/package.json b/packages/queue/package.json
index f99c8593..77b641d6 100644
--- a/packages/queue/package.json
+++ b/packages/queue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/queue",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/reactive/package.json b/packages/reactive/package.json
index 406f214a..f93b08c5 100644
--- a/packages/reactive/package.json
+++ b/packages/reactive/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/reactive",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/router/package.json b/packages/router/package.json
index bda677b9..2060649d 100644
--- a/packages/router/package.json
+++ b/packages/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/router",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/ssr/package.json b/packages/ssr/package.json
index ed0e26eb..91302234 100644
--- a/packages/ssr/package.json
+++ b/packages/ssr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ssr",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 48bca8ed..91b646ab 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/styles",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/test/package.json b/packages/test/package.json
index 93909cd0..90ee93ca 100644
--- a/packages/test/package.json
+++ b/packages/test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/test",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/tracking/package.json b/packages/tracking/package.json
index f7167c6b..e0c309d6 100644
--- a/packages/tracking/package.json
+++ b/packages/tracking/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/tracking",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/ui/components/ApiEndpointCard.wrn b/packages/ui/components/ApiEndpointCard.wrn
index 61c7cc70..b0e222bc 100644
--- a/packages/ui/components/ApiEndpointCard.wrn
+++ b/packages/ui/components/ApiEndpointCard.wrn
@@ -1 +1,33 @@
-component ApiEndpointCard { props { method = "GET" path = "/api/example" description = "" } view { <article class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900"><div class="flex flex-wrap items-center gap-3"><span class="rounded-lg px-2.5 py-1 font-mono text-xs font-bold {method === 'GET' ? 'bg-emerald-100 text-emerald-700' : method === 'POST' ? 'bg-blue-100 text-blue-700' : method === 'DELETE' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'}">{method}</span><code class="text-sm font-semibold">{path}</code></div><p data-show="description" class="mt-3 text-sm text-slate-500">{description}</p><div class="mt-4"><slot /></div></article> } }
+component ApiEndpointCard {
+    props {
+        method = "GET"
+        path = "/api/example"
+        description = ""
+    }
+
+    view {
+        <article
+            class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900"
+        >
+            <div class="flex flex-wrap items-center gap-3" >
+                <span
+                    class="rounded-lg px-2.5 py-1 font-mono text-xs font-bold {method === 'GET' ? 'bg-emerald-100 text-emerald-700' : method === 'POST' ? 'bg-blue-100 text-blue-700' : method === 'DELETE' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'}"
+                >
+                    {method}
+                </span>
+                <code class="text-sm font-semibold">
+                    {path}
+                </code>
+            </div>
+            <p
+                data-show="description"
+                class="mt-3 text-sm text-slate-500"
+            >
+                {description}
+            </p>
+            <div class="mt-4">
+                <slot />
+            </div>
+        </article>
+    }
+}
diff --git a/packages/ui/components/Banner.wrn b/packages/ui/components/Banner.wrn
index 48b6dbff..efa864fa 100644
--- a/packages/ui/components/Banner.wrn
+++ b/packages/ui/components/Banner.wrn
@@ -1 +1,11 @@
-component Banner { props { text = "Announcement" href = "" actionLabel = "Learn more" variant = "brand" } view { <aside class="px-4 py-3 text-center text-sm font-medium {variant === 'warning' ? 'bg-amber-400 text-amber-950' : 'bg-violet-600 text-white'}"><span>{text}</span><a data-show="href" href="{href}" class="ml-2 underline underline-offset-4">{actionLabel} →</a></aside> } }
+component Banner {
+  props {
+    text = "Announcement"
+    href = ""
+    actionLabel = "Learn more"
+    variant = "brand"
+  }
+  view {
+    <aside class="px-4 py-3 text-center text-sm font-medium {variant === 'warning' ? 'bg-amber-400 text-amber-950' : 'bg-violet-600 text-white'}"><span>{text}</span><a data-show="href" href="{href}" class="ml-2 underline underline-offset-4">{actionLabel} →</a></aside>
+  }
+}
diff --git a/packages/ui/components/Breadcrumbs.wrn b/packages/ui/components/Breadcrumbs.wrn
index f82d47a1..e0fe271f 100644
--- a/packages/ui/components/Breadcrumbs.wrn
+++ b/packages/ui/components/Breadcrumbs.wrn
@@ -1 +1,10 @@
-component Breadcrumbs { props { homeLabel = "Home" homeHref = "/" current = "Current page" } view { <nav aria-label="Breadcrumb"><ol class="flex flex-wrap items-center gap-2 text-sm"><li><a href="{homeHref}" class="text-slate-500 hover:text-violet-600">{homeLabel}</a></li><li aria-hidden="true" class="text-slate-400">/</li><li aria-current="page" class="font-medium text-slate-900 dark:text-white">{current}</li></ol></nav> } }
+component Breadcrumbs {
+  props {
+    homeLabel = "Home"
+    homeHref = "/"
+    current = "Current page"
+  }
+  view {
+    <nav aria-label="Breadcrumb"><ol class="flex flex-wrap items-center gap-2 text-sm"><li><a href="{homeHref}" class="text-slate-500 hover:text-violet-600">{homeLabel}</a></li><li aria-hidden="true" class="text-slate-400">/</li><li aria-current="page" class="font-medium text-slate-900 dark:text-white">{current}</li></ol></nav>
+  }
+}
diff --git a/packages/ui/components/CTASection.wrn b/packages/ui/components/CTASection.wrn
index 345d4fec..19014e22 100644
--- a/packages/ui/components/CTASection.wrn
+++ b/packages/ui/components/CTASection.wrn
@@ -1 +1,14 @@
-component CTASection { props { eyebrow = "Ready?" title = "Start building today" description = "" primaryLabel = "Get started" primaryHref = "#" secondaryLabel = "Contact sales" secondaryHref = "#" } view { <section class="overflow-hidden rounded-3xl bg-gradient-to-br from-violet-600 via-violet-700 to-fuchsia-700 px-6 py-12 text-center text-white shadow-2xl sm:px-12 sm:py-16"><p class="text-sm font-bold uppercase tracking-[0.18em] text-violet-100">{eyebrow}</p><h2 class="mx-auto mt-3 max-w-3xl text-3xl font-black sm:text-4xl">{title}</h2><p data-show="description" class="mx-auto mt-4 max-w-2xl text-violet-100">{description}</p><div class="mt-8 flex flex-wrap justify-center gap-3"><a href="{primaryHref}" class="inline-flex min-h-12 items-center rounded-xl bg-white px-5 font-semibold text-violet-700 shadow-lg transition hover:-translate-y-0.5">{primaryLabel}</a><a data-show="secondaryLabel" href="{secondaryHref}" class="inline-flex min-h-12 items-center rounded-xl border border-white/30 px-5 font-semibold text-white transition hover:bg-white/10">{secondaryLabel}</a></div></section> } }
+component CTASection {
+  props {
+    eyebrow = "Ready?"
+    title = "Start building today"
+    description = ""
+    primaryLabel = "Get started"
+    primaryHref = "#"
+    secondaryLabel = "Contact sales"
+    secondaryHref = "#"
+  }
+  view {
+    <section class="overflow-hidden rounded-3xl bg-gradient-to-br from-violet-600 via-violet-700 to-fuchsia-700 px-6 py-12 text-center text-white shadow-2xl sm:px-12 sm:py-16"><p class="text-sm font-bold uppercase tracking-[0.18em] text-violet-100">{eyebrow}</p><h2 class="mx-auto mt-3 max-w-3xl text-3xl font-black sm:text-4xl">{title}</h2><p data-show="description" class="mx-auto mt-4 max-w-2xl text-violet-100">{description}</p><div class="mt-8 flex flex-wrap justify-center gap-3"><a href="{primaryHref}" class="inline-flex min-h-12 items-center rounded-xl bg-white px-5 font-semibold text-violet-700 shadow-lg transition hover:-translate-y-0.5">{primaryLabel}</a><a data-show="secondaryLabel" href="{secondaryHref}" class="inline-flex min-h-12 items-center rounded-xl border border-white/30 px-5 font-semibold text-white transition hover:bg-white/10">{secondaryLabel}</a></div></section>
+  }
+}
diff --git a/packages/ui/components/Cluster.wrn b/packages/ui/components/Cluster.wrn
index 0eacf0fa..a5cbd6dd 100644
--- a/packages/ui/components/Cluster.wrn
+++ b/packages/ui/components/Cluster.wrn
@@ -1 +1,9 @@
-component Cluster { props { gap = "4" className = "" } view { <div class="flex flex-wrap items-center gap-{gap} {className}"><slot /></div> } }
+component Cluster {
+  props {
+    gap = "4"
+    className = ""
+  }
+  view {
+    <div class="flex flex-wrap items-center gap-{gap} {className}"><slot /></div>
+  }
+}
diff --git a/packages/ui/components/CodeBlock.wrn b/packages/ui/components/CodeBlock.wrn
index 7d986a71..9e5f5bbe 100644
--- a/packages/ui/components/CodeBlock.wrn
+++ b/packages/ui/components/CodeBlock.wrn
@@ -1 +1,11 @@
-component CodeBlock { props { language = "text" filename = "" code = "" } state copied = false view { <div class="overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 text-slate-100"><div class="flex min-h-11 items-center justify-between border-b border-slate-800 px-4 text-xs text-slate-400"><span>{filename || language}</span><button type="button" @click="navigator.clipboard.writeText(code); copied = true" class="rounded-lg px-2 py-1 hover:bg-slate-800">{copied ? 'Copied' : 'Copy'}</button></div><pre class="overflow-x-auto p-4 text-sm leading-6"><code>{code}</code></pre></div> } }
+component CodeBlock {
+  props {
+    language = "text"
+    filename = ""
+    code = ""
+  }
+  state copied = false
+  view {
+    <div class="overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 text-slate-100"><div class="flex min-h-11 items-center justify-between border-b border-slate-800 px-4 text-xs text-slate-400"><span>{filename || language}</span><button type="button" @click="navigator.clipboard.writeText(code); copied = true" class="rounded-lg px-2 py-1 hover:bg-slate-800">{copied ? 'Copied' : 'Copy'}</button></div><pre class="overflow-x-auto p-4 text-sm leading-6"><code>{code}</code></pre></div>
+  }
+}
diff --git a/packages/ui/components/CookieBanner.wrn b/packages/ui/components/CookieBanner.wrn
index 22105f13..0d52ec67 100644
--- a/packages/ui/components/CookieBanner.wrn
+++ b/packages/ui/components/CookieBanner.wrn
@@ -1 +1,11 @@
-component CookieBanner { props { title = "We use cookies" description = "We use essential cookies and optional analytics to improve your experience." privacyHref = "/privacy" } state visible = true view { <aside data-show="visible" class="fixed inset-x-4 bottom-4 z-50 mx-auto max-w-4xl rounded-3xl border border-slate-200 bg-white/95 p-5 shadow-2xl backdrop-blur-xl dark:border-slate-800 dark:bg-slate-900/95" role="dialog" aria-label="Cookie preferences"><div class="flex flex-col gap-5 md:flex-row md:items-center"><div class="min-w-0 flex-1"><h2 class="font-bold">{title}</h2><p class="mt-1 text-sm text-slate-500">{description} <a href="{privacyHref}" class="text-violet-600 underline">Privacy policy</a></p></div><div class="flex flex-wrap gap-2"><button @click="visible = false" class="min-h-11 rounded-xl border border-slate-300 px-4 text-sm font-semibold dark:border-slate-700">Reject optional</button><button @click="visible = false" class="min-h-11 rounded-xl bg-violet-600 px-4 text-sm font-semibold text-white">Accept all</button></div></div></aside> } }
+component CookieBanner {
+  props {
+    title = "We use cookies"
+    description = "We use essential cookies and optional analytics to improve your experience."
+    privacyHref = "/privacy"
+  }
+  state visible = true
+  view {
+    <aside data-show="visible" class="fixed inset-x-4 bottom-4 z-50 mx-auto max-w-4xl rounded-3xl border border-slate-200 bg-white/95 p-5 shadow-2xl backdrop-blur-xl dark:border-slate-800 dark:bg-slate-900/95" role="dialog" aria-label="Cookie preferences"><div class="flex flex-col gap-5 md:flex-row md:items-center"><div class="min-w-0 flex-1"><h2 class="font-bold">{title}</h2><p class="mt-1 text-sm text-slate-500">{description} <a href="{privacyHref}" class="text-violet-600 underline">Privacy policy</a></p></div><div class="flex flex-wrap gap-2"><button @click="visible = false" class="min-h-11 rounded-xl border border-slate-300 px-4 text-sm font-semibold dark:border-slate-700">Reject optional</button><button @click="visible = false" class="min-h-11 rounded-xl bg-violet-600 px-4 text-sm font-semibold text-white">Accept all</button></div></div></aside>
+  }
+}
diff --git a/packages/ui/components/DateInput.wrn b/packages/ui/components/DateInput.wrn
index 9080cd6c..30dfdcb7 100644
--- a/packages/ui/components/DateInput.wrn
+++ b/packages/ui/components/DateInput.wrn
@@ -1,5 +1,17 @@
 component DateInput {
-  props { id = "" name = "" label = "Date" value = "" placeholder = "" help = "" error = "" required = false disabled = false readonly = false autocomplete = "" }
+  props {
+    id = ""
+    name = ""
+    label = "Date"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
   view {
     <div class="space-y-2">
       <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
diff --git a/packages/ui/components/DatePicker.wrn b/packages/ui/components/DatePicker.wrn
index 81d01061..cc21325b 100644
--- a/packages/ui/components/DatePicker.wrn
+++ b/packages/ui/components/DatePicker.wrn
@@ -1 +1,14 @@
-component DatePicker { props { id = "date" name = "date" label = "Date" value = "" min = "" max = "" required = false } view { <DateInput id="{id}" name="{name}" label="{label}" value="{value}" required="{required}" /> } }
+component DatePicker {
+  props {
+    id = "date"
+    name = "date"
+    label = "Date"
+    value = ""
+    min = ""
+    max = ""
+    required = false
+  }
+  view {
+    <DateInput id="{id}" name="{name}" label="{label}" value="{value}" required="{required}" />
+  }
+}
diff --git a/packages/ui/components/DateRangePicker.wrn b/packages/ui/components/DateRangePicker.wrn
index d4b1e135..9d51a33e 100644
--- a/packages/ui/components/DateRangePicker.wrn
+++ b/packages/ui/components/DateRangePicker.wrn
@@ -1 +1,10 @@
-component DateRangePicker { props { label = "Date range" startName = "startDate" endName = "endDate" } view { <fieldset><legend class="mb-2 text-sm font-semibold">{label}</legend><div class="grid gap-3 sm:grid-cols-2"><DateInput id="{startName}" name="{startName}" label="Start date" /><DateInput id="{endName}" name="{endName}" label="End date" /></div></fieldset> } }
+component DateRangePicker {
+  props {
+    label = "Date range"
+    startName = "startDate"
+    endName = "endDate"
+  }
+  view {
+    <fieldset><legend class="mb-2 text-sm font-semibold">{label}</legend><div class="grid gap-3 sm:grid-cols-2"><DateInput id="{startName}" name="{startName}" label="Start date" /><DateInput id="{endName}" name="{endName}" label="End date" /></div></fieldset>
+  }
+}
diff --git a/packages/ui/components/DateTimeInput.wrn b/packages/ui/components/DateTimeInput.wrn
index 45d08b5f..7c27351b 100644
--- a/packages/ui/components/DateTimeInput.wrn
+++ b/packages/ui/components/DateTimeInput.wrn
@@ -1,5 +1,17 @@
 component DateTimeInput {
-  props { id = "" name = "" label = "DateTime" value = "" placeholder = "" help = "" error = "" required = false disabled = false readonly = false autocomplete = "" }
+  props {
+    id = ""
+    name = ""
+    label = "DateTime"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
   view {
     <div class="space-y-2">
       <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
diff --git a/packages/ui/components/Drawer.wrn b/packages/ui/components/Drawer.wrn
index 1ade407e..7d249ead 100644
--- a/packages/ui/components/Drawer.wrn
+++ b/packages/ui/components/Drawer.wrn
@@ -1 +1,11 @@
-component Drawer { props { title = "Panel" open = false side = "right" } state visible = open view { <div data-show="visible" class="fixed inset-0 z-50" role="dialog" aria-modal="true"><button class="absolute inset-0 bg-slate-950/50" aria-label="Close" @click="visible = false"></button><aside class="absolute inset-y-0 w-[min(92vw,28rem)] overflow-auto bg-white p-6 shadow-2xl transition dark:bg-slate-900 {side === 'left' ? 'left-0' : 'right-0'}"><header class="flex items-center justify-between"><h2 class="text-xl font-bold">{title}</h2><button @click="visible = false" class="size-10 rounded-xl hover:bg-slate-100">×</button></header><div class="mt-6"><slot /></div></aside></div> } }
+component Drawer {
+  props {
+    title = "Panel"
+    open = false
+    side = "right"
+  }
+  state visible = open
+  view {
+    <div data-show="visible" class="fixed inset-0 z-50" role="dialog" aria-modal="true"><button class="absolute inset-0 bg-slate-950/50" aria-label="Close" @click="visible = false"></button><aside class="absolute inset-y-0 w-[min(92vw,28rem)] overflow-auto bg-white p-6 shadow-2xl transition dark:bg-slate-900 {side === 'left' ? 'left-0' : 'right-0'}"><header class="flex items-center justify-between"><h2 class="text-xl font-bold">{title}</h2><button @click="visible = false" class="size-10 rounded-xl hover:bg-slate-100">×</button></header><div class="mt-6"><slot /></div></aside></div>
+  }
+}
diff --git a/packages/ui/components/DropdownMenu.wrn b/packages/ui/components/DropdownMenu.wrn
index b94eab50..ed27afbb 100644
--- a/packages/ui/components/DropdownMenu.wrn
+++ b/packages/ui/components/DropdownMenu.wrn
@@ -1 +1,9 @@
-component DropdownMenu { props { label = "Menu" } state open = false view { <div class="relative inline-block"><button type="button" aria-haspopup="menu" aria-expanded="{open}" @click="open = !open" class="inline-flex min-h-11 items-center gap-2 rounded-xl border border-slate-300 px-4 text-sm font-semibold dark:border-slate-700">{label}<span aria-hidden="true">⌄</span></button><div data-show="open" role="menu" class="absolute right-0 z-30 mt-2 min-w-48 rounded-xl border border-slate-200 bg-white p-1.5 shadow-xl dark:border-slate-800 dark:bg-slate-900"><slot /></div></div> } }
+component DropdownMenu {
+  props {
+    label = "Menu"
+  }
+  state open = false
+  view {
+    <div class="relative inline-block"><button type="button" aria-haspopup="menu" aria-expanded="{open}" @click="open = !open" class="inline-flex min-h-11 items-center gap-2 rounded-xl border border-slate-300 px-4 text-sm font-semibold dark:border-slate-700">{label}<span aria-hidden="true">⌄</span></button><div data-show="open" role="menu" class="absolute right-0 z-30 mt-2 min-w-48 rounded-xl border border-slate-200 bg-white p-1.5 shadow-xl dark:border-slate-800 dark:bg-slate-900"><slot /></div></div>
+  }
+}
diff --git a/packages/ui/components/EmailInput.wrn b/packages/ui/components/EmailInput.wrn
index 172bfc66..b35d84d3 100644
--- a/packages/ui/components/EmailInput.wrn
+++ b/packages/ui/components/EmailInput.wrn
@@ -1,5 +1,17 @@
 component EmailInput {
-  props { id = "" name = "" label = "Email" value = "" placeholder = "" help = "" error = "" required = false disabled = false readonly = false autocomplete = "" }
+  props {
+    id = ""
+    name = ""
+    label = "Email"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
   view {
     <div class="space-y-2">
       <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
diff --git a/packages/ui/components/EmptyState.wrn b/packages/ui/components/EmptyState.wrn
index 709f8a2b..f1bd4a73 100644
--- a/packages/ui/components/EmptyState.wrn
+++ b/packages/ui/components/EmptyState.wrn
@@ -1 +1,12 @@
-component EmptyState { props { icon = "◇" title = "Nothing here yet" description = "" actionLabel = "" actionHref = "#" } view { <div class="rounded-3xl border border-dashed border-slate-300 px-6 py-14 text-center dark:border-slate-700"><div class="mx-auto flex size-14 items-center justify-center rounded-2xl bg-violet-100 text-2xl text-violet-700 dark:bg-violet-950 dark:text-violet-300">{icon}</div><h3 class="mt-4 text-lg font-bold">{title}</h3><p data-show="description" class="mx-auto mt-2 max-w-md text-sm text-slate-500">{description}</p><a data-show="actionLabel" href="{actionHref}" class="mt-5 inline-flex min-h-11 items-center rounded-xl bg-violet-600 px-4 py-2.5 text-sm font-semibold text-white">{actionLabel}</a></div> } }
+component EmptyState {
+  props {
+    icon = "◇"
+    title = "Nothing here yet"
+    description = ""
+    actionLabel = ""
+    actionHref = "#"
+  }
+  view {
+    <div class="rounded-3xl border border-dashed border-slate-300 px-6 py-14 text-center dark:border-slate-700"><div class="mx-auto flex size-14 items-center justify-center rounded-2xl bg-violet-100 text-2xl text-violet-700 dark:bg-violet-950 dark:text-violet-300">{icon}</div><h3 class="mt-4 text-lg font-bold">{title}</h3><p data-show="description" class="mx-auto mt-2 max-w-md text-sm text-slate-500">{description}</p><a data-show="actionLabel" href="{actionHref}" class="mt-5 inline-flex min-h-11 items-center rounded-xl bg-violet-600 px-4 py-2.5 text-sm font-semibold text-white">{actionLabel}</a></div>
+  }
+}
diff --git a/packages/ui/components/ErrorState.wrn b/packages/ui/components/ErrorState.wrn
index ff3c12e1..a04c3bf1 100644
--- a/packages/ui/components/ErrorState.wrn
+++ b/packages/ui/components/ErrorState.wrn
@@ -1 +1,12 @@
-component ErrorState { props { code = "500" title = "Something went wrong" description = "Please try again." actionLabel = "Try again" actionHref = "/" } view { <div class="mx-auto max-w-2xl px-4 py-24 text-center"><div class="text-8xl font-black text-violet-100 dark:text-violet-950">{code}</div><h1 class="-mt-4 text-3xl font-black">{title}</h1><p class="mt-4 text-slate-500">{description}</p><a href="{actionHref}" class="mt-8 inline-flex min-h-12 items-center rounded-xl bg-violet-600 px-5 font-semibold text-white">{actionLabel}</a></div> } }
+component ErrorState {
+  props {
+    code = "500"
+    title = "Something went wrong"
+    description = "Please try again."
+    actionLabel = "Try again"
+    actionHref = "/"
+  }
+  view {
+    <div class="mx-auto max-w-2xl px-4 py-24 text-center"><div class="text-8xl font-black text-violet-100 dark:text-violet-950">{code}</div><h1 class="-mt-4 text-3xl font-black">{title}</h1><p class="mt-4 text-slate-500">{description}</p><a href="{actionHref}" class="mt-8 inline-flex min-h-12 items-center rounded-xl bg-violet-600 px-5 font-semibold text-white">{actionLabel}</a></div>
+  }
+}
diff --git a/packages/ui/components/FeatureCard.wrn b/packages/ui/components/FeatureCard.wrn
index fd33286c..03b0e8ee 100644
--- a/packages/ui/components/FeatureCard.wrn
+++ b/packages/ui/components/FeatureCard.wrn
@@ -1 +1,11 @@
-component FeatureCard { props { icon = "✦" title = "Feature" description = "" href = "" } view { <article class="group rounded-2xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-violet-300 hover:shadow-xl dark:border-slate-800 dark:bg-slate-900"><div class="flex size-11 items-center justify-center rounded-xl bg-violet-100 text-xl text-violet-700 transition group-hover:scale-110 dark:bg-violet-950 dark:text-violet-300">{icon}</div><h3 class="mt-5 text-lg font-bold">{title}</h3><p class="mt-2 leading-7 text-slate-600 dark:text-slate-300">{description}</p><a data-show="href" href="{href}" class="mt-4 inline-flex font-semibold text-violet-600">Learn more →</a></article> } }
+component FeatureCard {
+  props {
+    icon = "✦"
+    title = "Feature"
+    description = ""
+    href = ""
+  }
+  view {
+    <article class="group rounded-2xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-violet-300 hover:shadow-xl dark:border-slate-800 dark:bg-slate-900"><div class="flex size-11 items-center justify-center rounded-xl bg-violet-100 text-xl text-violet-700 transition group-hover:scale-110 dark:bg-violet-950 dark:text-violet-300">{icon}</div><h3 class="mt-5 text-lg font-bold">{title}</h3><p class="mt-2 leading-7 text-slate-600 dark:text-slate-300">{description}</p><a data-show="href" href="{href}" class="mt-4 inline-flex font-semibold text-violet-600">Learn more →</a></article>
+  }
+}
diff --git a/packages/ui/components/FeatureGrid.wrn b/packages/ui/components/FeatureGrid.wrn
index a660073c..c3b19a2f 100644
--- a/packages/ui/components/FeatureGrid.wrn
+++ b/packages/ui/components/FeatureGrid.wrn
@@ -1 +1,9 @@
-component FeatureGrid { props { columns = 3 className = "" } view { <div class="grid gap-5 {columns === 2 ? 'md:grid-cols-2' : columns === 4 ? 'sm:grid-cols-2 xl:grid-cols-4' : 'md:grid-cols-2 lg:grid-cols-3'} {className}"><slot /></div> } }
+component FeatureGrid {
+  props {
+    columns = 3
+    className = ""
+  }
+  view {
+    <div class="grid gap-5 {columns === 2 ? 'md:grid-cols-2' : columns === 4 ? 'sm:grid-cols-2 xl:grid-cols-4' : 'md:grid-cols-2 lg:grid-cols-3'} {className}"><slot /></div>
+  }
+}
diff --git a/packages/ui/components/FileUpload.wrn b/packages/ui/components/FileUpload.wrn
index f65c5e5b..505e14a4 100644
--- a/packages/ui/components/FileUpload.wrn
+++ b/packages/ui/components/FileUpload.wrn
@@ -1 +1,13 @@
-component FileUpload { props { id = "file" name = "file" label = "Upload file" accept = "" multiple = false help = "Drag and drop or browse" } view { <label for="{id}" class="flex min-h-40 cursor-pointer flex-col items-center justify-center rounded-2xl border-2 border-dashed border-slate-300 bg-slate-50 p-6 text-center transition hover:border-violet-500 hover:bg-violet-50/50 focus-within:ring-4 focus-within:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-900/50"><span class="text-3xl" aria-hidden="true">⇧</span><span class="mt-2 font-semibold">{label}</span><span class="mt-1 text-sm text-slate-500">{help}</span><input id="{id}" name="{name}" type="file" accept="{accept}" multiple="{multiple}" class="sr-only" /></label> } }
+component FileUpload {
+  props {
+    id = "file"
+    name = "file"
+    label = "Upload file"
+    accept = ""
+    multiple = false
+    help = "Drag and drop or browse"
+  }
+  view {
+    <label for="{id}" class="flex min-h-40 cursor-pointer flex-col items-center justify-center rounded-2xl border-2 border-dashed border-slate-300 bg-slate-50 p-6 text-center transition hover:border-violet-500 hover:bg-violet-50/50 focus-within:ring-4 focus-within:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-900/50"><span class="text-3xl" aria-hidden="true">⇧</span><span class="mt-2 font-semibold">{label}</span><span class="mt-1 text-sm text-slate-500">{help}</span><input id="{id}" name="{name}" type="file" accept="{accept}" multiple="{multiple}" class="sr-only" /></label>
+  }
+}
diff --git a/packages/ui/components/FormErrorSummary.wrn b/packages/ui/components/FormErrorSummary.wrn
index 5538bcb4..de99a058 100644
--- a/packages/ui/components/FormErrorSummary.wrn
+++ b/packages/ui/components/FormErrorSummary.wrn
@@ -1 +1,9 @@
-component FormErrorSummary { props { title = "Please fix the following" visible = true } view { <section data-show="visible" role="alert" aria-live="polite" class="rounded-2xl border border-red-200 bg-red-50 p-4 text-red-900 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200"><h3 class="font-semibold">{title}</h3><div class="mt-2 text-sm"><slot /></div></section> } }
+component FormErrorSummary {
+  props {
+    title = "Please fix the following"
+    visible = true
+  }
+  view {
+    <section data-show="visible" role="alert" aria-live="polite" class="rounded-2xl border border-red-200 bg-red-50 p-4 text-red-900 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200"><h3 class="font-semibold">{title}</h3><div class="mt-2 text-sm"><slot /></div></section>
+  }
+}
diff --git a/packages/ui/components/FormField.wrn b/packages/ui/components/FormField.wrn
index 0500b8e7..4ab7a609 100644
--- a/packages/ui/components/FormField.wrn
+++ b/packages/ui/components/FormField.wrn
@@ -1 +1,11 @@
-component FormField { props { label = "Field" help = "" error = "" required = false } view { <div class="space-y-2"><div class="text-sm font-semibold">{label}<span data-show="required" class="ml-1 text-red-500">*</span></div><slot /><p data-show="help && !error" class="text-sm text-slate-500">{help}</p><p data-show="error" role="alert" class="text-sm font-medium text-red-600">{error}</p></div> } }
+component FormField {
+  props {
+    label = "Field"
+    help = ""
+    error = ""
+    required = false
+  }
+  view {
+    <div class="space-y-2"><div class="text-sm font-semibold">{label}<span data-show="required" class="ml-1 text-red-500">*</span></div><slot /><p data-show="help && !error" class="text-sm text-slate-500">{help}</p><p data-show="error" role="alert" class="text-sm font-medium text-red-600">{error}</p></div>
+  }
+}
diff --git a/packages/ui/components/Hero.wrn b/packages/ui/components/Hero.wrn
index 7116d775..2008458d 100644
--- a/packages/ui/components/Hero.wrn
+++ b/packages/ui/components/Hero.wrn
@@ -1 +1,16 @@
-component Hero { props { eyebrow = "" title = "Build faster with WRNexusJS" highlight = "" description = "" primaryLabel = "Get started" primaryHref = "#" secondaryLabel = "Learn more" secondaryHref = "#" align = "center" } view { <section class="relative isolate overflow-hidden py-20 sm:py-28"><div class="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top,rgba(124,58,237,.18),transparent_45%)]"></div><div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"><div class="max-w-4xl {align === 'center' ? 'mx-auto text-center' : ''}"><Badge data-show="eyebrow" label="{eyebrow}" variant="brand" /><h1 class="mt-6 text-4xl font-black tracking-tight text-slate-950 sm:text-6xl dark:text-white">{title} <span data-show="highlight" class="bg-gradient-to-r from-violet-600 to-fuchsia-500 bg-clip-text text-transparent">{highlight}</span></h1><p data-show="description" class="mt-6 text-lg leading-8 text-slate-600 sm:text-xl dark:text-slate-300">{description}</p><div class="mt-8 flex flex-wrap gap-3 {align === 'center' ? 'justify-center' : ''}"><a href="{primaryHref}" class="inline-flex min-h-12 items-center rounded-xl bg-violet-600 px-5 font-semibold text-white shadow-lg shadow-violet-600/20 transition hover:-translate-y-0.5 hover:bg-violet-700">{primaryLabel}</a><a data-show="secondaryLabel" href="{secondaryHref}" class="inline-flex min-h-12 items-center rounded-xl border border-slate-300 bg-white px-5 font-semibold text-slate-900 transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-white">{secondaryLabel}</a></div><div class="mt-10"><slot /></div></div></div></section> } }
+component Hero {
+  props {
+    eyebrow = ""
+    title = "Build faster with WRNexusJS"
+    highlight = ""
+    description = ""
+    primaryLabel = "Get started"
+    primaryHref = "#"
+    secondaryLabel = "Learn more"
+    secondaryHref = "#"
+    align = "center"
+  }
+  view {
+    <section class="relative isolate overflow-hidden py-20 sm:py-28"><div class="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top,rgba(124,58,237,.18),transparent_45%)]"></div><div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"><div class="max-w-4xl {align === 'center' ? 'mx-auto text-center' : ''}"><Badge data-show="eyebrow" label="{eyebrow}" variant="brand" /><h1 class="mt-6 text-4xl font-black tracking-tight text-slate-950 sm:text-6xl dark:text-white">{title} <span data-show="highlight" class="bg-gradient-to-r from-violet-600 to-fuchsia-500 bg-clip-text text-transparent">{highlight}</span></h1><p data-show="description" class="mt-6 text-lg leading-8 text-slate-600 sm:text-xl dark:text-slate-300">{description}</p><div class="mt-8 flex flex-wrap gap-3 {align === 'center' ? 'justify-center' : ''}"><a href="{primaryHref}" class="inline-flex min-h-12 items-center rounded-xl bg-violet-600 px-5 font-semibold text-white shadow-lg shadow-violet-600/20 transition hover:-translate-y-0.5 hover:bg-violet-700">{primaryLabel}</a><a data-show="secondaryLabel" href="{secondaryHref}" class="inline-flex min-h-12 items-center rounded-xl border border-slate-300 bg-white px-5 font-semibold text-slate-900 transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-white">{secondaryLabel}</a></div><div class="mt-10"><slot /></div></div></div></section>
+  }
+}
diff --git a/packages/ui/components/IconButton.wrn b/packages/ui/components/IconButton.wrn
index af222dd9..6f42850e 100644
--- a/packages/ui/components/IconButton.wrn
+++ b/packages/ui/components/IconButton.wrn
@@ -1,4 +1,9 @@
 component IconButton {
-  props { label = "Action" icon = "•" variant = "ghost" disabled = false }
+  props {
+    label = "Action"
+    icon = "•"
+    variant = "ghost"
+    disabled = false
+  }
   view { <button type="button" aria-label="{label}" title="{label}" disabled="{disabled}" class="inline-flex size-11 items-center justify-center rounded-xl transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 disabled:opacity-50 {variant === 'primary' ? 'bg-violet-600 text-white hover:bg-violet-700' : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'}"><span aria-hidden="true">{icon}</span></button> }
 }
diff --git a/packages/ui/components/Inline.wrn b/packages/ui/components/Inline.wrn
index 36184c48..43cc7fbd 100644
--- a/packages/ui/components/Inline.wrn
+++ b/packages/ui/components/Inline.wrn
@@ -1 +1,9 @@
-component Inline { props { gap = "4" className = "" } view { <div class="flex flex-wrap items-center gap-{gap} {className}"><slot /></div> } }
+component Inline {
+  props {
+    gap = "4"
+    className = ""
+  }
+  view {
+    <div class="flex flex-wrap items-center gap-{gap} {className}"><slot /></div>
+  }
+}
diff --git a/packages/ui/components/LegalDocumentLayout.wrn b/packages/ui/components/LegalDocumentLayout.wrn
index 850d3cda..f2866f3f 100644
--- a/packages/ui/components/LegalDocumentLayout.wrn
+++ b/packages/ui/components/LegalDocumentLayout.wrn
@@ -1 +1,10 @@
-component LegalDocumentLayout { props { title = "Legal document" effectiveDate = "" updatedDate = "" } view { <article class="mx-auto grid max-w-7xl gap-10 px-4 py-14 lg:grid-cols-[16rem_minmax(0,1fr)] lg:px-8"><aside class="lg:sticky lg:top-24 lg:self-start"><div class="text-sm font-semibold">On this page</div><nav class="mt-4 text-sm text-slate-500"><slot name="toc" /></nav></aside><main class="min-w-0 max-w-3xl"><header class="border-b border-slate-200 pb-8 dark:border-slate-800"><h1 class="text-4xl font-black tracking-tight">{title}</h1><div class="mt-4 flex flex-wrap gap-4 text-sm text-slate-500"><span data-show="effectiveDate">Effective: {effectiveDate}</span><span data-show="updatedDate">Updated: {updatedDate}</span></div></header><div class="prose prose-slate mt-8 max-w-none dark:prose-invert"><slot /></div></main></article> } }
+component LegalDocumentLayout {
+  props {
+    title = "Legal document"
+    effectiveDate = ""
+    updatedDate = ""
+  }
+  view {
+    <article class="mx-auto grid max-w-7xl gap-10 px-4 py-14 lg:grid-cols-[16rem_minmax(0,1fr)] lg:px-8"><aside class="lg:sticky lg:top-24 lg:self-start"><div class="text-sm font-semibold">On this page</div><nav class="mt-4 text-sm text-slate-500"><slot name="toc" /></nav></aside><main class="min-w-0 max-w-3xl"><header class="border-b border-slate-200 pb-8 dark:border-slate-800"><h1 class="text-4xl font-black tracking-tight">{title}</h1><div class="mt-4 flex flex-wrap gap-4 text-sm text-slate-500"><span data-show="effectiveDate">Effective: {effectiveDate}</span><span data-show="updatedDate">Updated: {updatedDate}</span></div></header><div class="prose prose-slate mt-8 max-w-none dark:prose-invert"><slot /></div></main></article>
+  }
+}
diff --git a/packages/ui/components/Link.wrn b/packages/ui/components/Link.wrn
index a5d42625..cde2a1cb 100644
--- a/packages/ui/components/Link.wrn
+++ b/packages/ui/components/Link.wrn
@@ -1 +1,11 @@
-component Link { props { href = "#" label = "Link" external = false className = "" } view { <a href="{href}" target="{external ? '_blank' : ''}" rel="{external ? 'noreferrer' : ''}" class="font-medium text-violet-600 underline-offset-4 transition hover:text-violet-700 hover:underline focus-visible:rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 {className}">{label}<span data-show="external" aria-hidden="true"> ↗</span></a> } }
+component Link {
+  props {
+    href = "#"
+    label = "Link"
+    external = false
+    className = ""
+  }
+  view {
+    <a href="{href}" target="{external ? '_blank' : ''}" rel="{external ? 'noreferrer' : ''}" class="font-medium text-violet-600 underline-offset-4 transition hover:text-violet-700 hover:underline focus-visible:rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 {className}">{label}<span data-show="external" aria-hidden="true"> ↗</span></a>
+  }
+}
diff --git a/packages/ui/components/LogoCloud.wrn b/packages/ui/components/LogoCloud.wrn
index 4f640904..1d367671 100644
--- a/packages/ui/components/LogoCloud.wrn
+++ b/packages/ui/components/LogoCloud.wrn
@@ -1 +1,8 @@
-component LogoCloud { props { title = "Trusted by modern teams" } view { <section aria-label="{title}"><p class="text-center text-sm font-semibold uppercase tracking-wider text-slate-500">{title}</p><div class="mt-6 flex flex-wrap items-center justify-center gap-x-10 gap-y-6 opacity-70 grayscale transition hover:grayscale-0"><slot /></div></section> } }
+component LogoCloud {
+  props {
+    title = "Trusted by modern teams"
+  }
+  view {
+    <section aria-label="{title}"><p class="text-center text-sm font-semibold uppercase tracking-wider text-slate-500">{title}</p><div class="mt-6 flex flex-wrap items-center justify-center gap-x-10 gap-y-6 opacity-70 grayscale transition hover:grayscale-0"><slot /></div></section>
+  }
+}
diff --git a/packages/ui/components/Modal.wrn b/packages/ui/components/Modal.wrn
index 44f99872..3c0217da 100644
--- a/packages/ui/components/Modal.wrn
+++ b/packages/ui/components/Modal.wrn
@@ -1 +1,13 @@
-component Modal { props { title = "Dialog" description = "" open = false size = "md" closeLabel = "Close" } state visible = open view { <div data-show="visible" class="fixed inset-0 z-50 flex items-end justify-center p-4 sm:items-center" role="dialog" aria-modal="true" aria-labelledby="modal-title"><button class="absolute inset-0 bg-slate-950/60 backdrop-blur-sm" aria-label="{closeLabel}" @click="visible = false"></button><section class="relative max-h-[90vh] w-full overflow-auto rounded-3xl border border-slate-200 bg-white p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900 {size === 'sm' ? 'max-w-md' : size === 'lg' ? 'max-w-4xl' : 'max-w-2xl'}"><header class="flex items-start justify-between gap-4"><div><h2 id="modal-title" class="text-xl font-bold">{title}</h2><p data-show="description" class="mt-1 text-sm text-slate-500">{description}</p></div><button type="button" aria-label="{closeLabel}" @click="visible = false" class="inline-flex size-10 items-center justify-center rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800">×</button></header><div class="mt-5"><slot /></div></section></div> } }
+component Modal {
+  props {
+    title = "Dialog"
+    description = ""
+    open = false
+    size = "md"
+    closeLabel = "Close"
+  }
+  state visible = open
+  view {
+    <div data-show="visible" class="fixed inset-0 z-50 flex items-end justify-center p-4 sm:items-center" role="dialog" aria-modal="true" aria-labelledby="modal-title"><button class="absolute inset-0 bg-slate-950/60 backdrop-blur-sm" aria-label="{closeLabel}" @click="visible = false"></button><section class="relative max-h-[90vh] w-full overflow-auto rounded-3xl border border-slate-200 bg-white p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900 {size === 'sm' ? 'max-w-md' : size === 'lg' ? 'max-w-4xl' : 'max-w-2xl'}"><header class="flex items-start justify-between gap-4"><div><h2 id="modal-title" class="text-xl font-bold">{title}</h2><p data-show="description" class="mt-1 text-sm text-slate-500">{description}</p></div><button type="button" aria-label="{closeLabel}" @click="visible = false" class="inline-flex size-10 items-center justify-center rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800">×</button></header><div class="mt-5"><slot /></div></section></div>
+  }
+}
diff --git a/packages/ui/components/NumberInput.wrn b/packages/ui/components/NumberInput.wrn
index 8c21268a..592150b4 100644
--- a/packages/ui/components/NumberInput.wrn
+++ b/packages/ui/components/NumberInput.wrn
@@ -1,5 +1,17 @@
 component NumberInput {
-  props { id = "" name = "" label = "Number" value = "" placeholder = "" help = "" error = "" required = false disabled = false readonly = false autocomplete = "" }
+  props {
+    id = ""
+    name = ""
+    label = "Number"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
   view {
     <div class="space-y-2">
       <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
diff --git a/packages/ui/components/OtpInput.wrn b/packages/ui/components/OtpInput.wrn
index 6a4aeb78..7cc19d47 100644
--- a/packages/ui/components/OtpInput.wrn
+++ b/packages/ui/components/OtpInput.wrn
@@ -1 +1,10 @@
-component OtpInput { props { name = "otp" length = 6 label = "Verification code" } view { <fieldset><legend class="mb-3 text-sm font-semibold">{label}</legend><input name="{name}" inputmode="numeric" autocomplete="one-time-code" maxlength="{length}" pattern="[0-9]*" class="min-h-14 w-full rounded-2xl border border-slate-300 bg-white px-4 text-center font-mono text-2xl tracking-[0.5em] outline-none transition focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-950" /></fieldset> } }
+component OtpInput {
+  props {
+    name = "otp"
+    length = 6
+    label = "Verification code"
+  }
+  view {
+    <fieldset><legend class="mb-3 text-sm font-semibold">{label}</legend><input name="{name}" inputmode="numeric" autocomplete="one-time-code" maxlength="{length}" pattern="[0-9]*" class="min-h-14 w-full rounded-2xl border border-slate-300 bg-white px-4 text-center font-mono text-2xl tracking-[0.5em] outline-none transition focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-950" /></fieldset>
+  }
+}
diff --git a/packages/ui/components/PageShell.wrn b/packages/ui/components/PageShell.wrn
index 28a6ec31..e228102e 100644
--- a/packages/ui/components/PageShell.wrn
+++ b/packages/ui/components/PageShell.wrn
@@ -1 +1,8 @@
-component PageShell { props { className = "" } view { <div class="min-h-screen bg-white text-slate-950 antialiased selection:bg-violet-200 dark:bg-slate-950 dark:text-white dark:selection:bg-violet-800 {className}"><slot /></div> } }
+component PageShell {
+  props {
+    className = ""
+  }
+  view {
+    <div class="min-h-screen bg-white text-slate-950 antialiased selection:bg-violet-200 dark:bg-slate-950 dark:text-white dark:selection:bg-violet-800 {className}"><slot /></div>
+  }
+}
diff --git a/packages/ui/components/Pagination.wrn b/packages/ui/components/Pagination.wrn
index 56fc5563..e5853b8b 100644
--- a/packages/ui/components/Pagination.wrn
+++ b/packages/ui/components/Pagination.wrn
@@ -1 +1,11 @@
-component Pagination { props { page = 1 totalPages = 1 previousHref = "#" nextHref = "#" } view { <nav aria-label="Pagination" class="flex items-center justify-between gap-4"><a href="{previousHref}" aria-disabled="{page <= 1}" class="inline-flex min-h-11 items-center rounded-xl border border-slate-300 px-4 text-sm font-semibold aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:border-slate-700">← Previous</a><span class="text-sm text-slate-500">Page {page} of {totalPages}</span><a href="{nextHref}" aria-disabled="{page >= totalPages}" class="inline-flex min-h-11 items-center rounded-xl border border-slate-300 px-4 text-sm font-semibold aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:border-slate-700">Next →</a></nav> } }
+component Pagination {
+  props {
+    page = 1
+    totalPages = 1
+    previousHref = "#"
+    nextHref = "#"
+  }
+  view {
+    <nav aria-label="Pagination" class="flex items-center justify-between gap-4"><a href="{previousHref}" aria-disabled="{page <= 1}" class="inline-flex min-h-11 items-center rounded-xl border border-slate-300 px-4 text-sm font-semibold aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:border-slate-700">← Previous</a><span class="text-sm text-slate-500">Page {page} of {totalPages}</span><a href="{nextHref}" aria-disabled="{page >= totalPages}" class="inline-flex min-h-11 items-center rounded-xl border border-slate-300 px-4 text-sm font-semibold aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:border-slate-700">Next →</a></nav>
+  }
+}
diff --git a/packages/ui/components/PasswordInput.wrn b/packages/ui/components/PasswordInput.wrn
index 3c9f401a..7761b3bf 100644
--- a/packages/ui/components/PasswordInput.wrn
+++ b/packages/ui/components/PasswordInput.wrn
@@ -1,5 +1,17 @@
 component PasswordInput {
-  props { id = "" name = "" label = "Password" value = "" placeholder = "" help = "" error = "" required = false disabled = false readonly = false autocomplete = "" }
+  props {
+    id = ""
+    name = ""
+    label = "Password"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
   view {
     <div class="space-y-2">
       <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
diff --git a/packages/ui/components/PhoneInput.wrn b/packages/ui/components/PhoneInput.wrn
index accd7386..8a61a4f7 100644
--- a/packages/ui/components/PhoneInput.wrn
+++ b/packages/ui/components/PhoneInput.wrn
@@ -1,5 +1,17 @@
 component PhoneInput {
-  props { id = "" name = "" label = "Phone" value = "" placeholder = "" help = "" error = "" required = false disabled = false readonly = false autocomplete = "" }
+  props {
+    id = ""
+    name = ""
+    label = "Phone"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
   view {
     <div class="space-y-2">
       <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
diff --git a/packages/ui/components/PricingPlanCard.wrn b/packages/ui/components/PricingPlanCard.wrn
index 1e583db9..c40bc9d3 100644
--- a/packages/ui/components/PricingPlanCard.wrn
+++ b/packages/ui/components/PricingPlanCard.wrn
@@ -1 +1,14 @@
-component PricingPlanCard { props { name = "Starter" description = "" price = "₹0" period = "/month" featured = false ctaLabel = "Choose plan" ctaHref = "#" } view { <article class="relative flex h-full flex-col rounded-3xl border p-6 shadow-sm {featured ? 'border-violet-500 bg-violet-50/50 ring-2 ring-violet-500 dark:bg-violet-950/20' : 'border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900'}"><Badge data-show="featured" label="Most popular" variant="brand" /><h3 class="mt-4 text-xl font-bold">{name}</h3><p class="mt-2 text-sm text-slate-500">{description}</p><div class="mt-6"><span class="text-4xl font-black">{price}</span><span class="text-slate-500">{period}</span></div><div class="mt-6 flex-1"><slot /></div><a href="{ctaHref}" class="mt-6 inline-flex min-h-12 items-center justify-center rounded-xl font-semibold transition {featured ? 'bg-violet-600 text-white hover:bg-violet-700' : 'border border-slate-300 hover:bg-slate-50 dark:border-slate-700'}">{ctaLabel}</a></article> } }
+component PricingPlanCard {
+  props {
+    name = "Starter"
+    description = ""
+    price = "₹0"
+    period = "/month"
+    featured = false
+    ctaLabel = "Choose plan"
+    ctaHref = "#"
+  }
+  view {
+    <article class="relative flex h-full flex-col rounded-3xl border p-6 shadow-sm {featured ? 'border-violet-500 bg-violet-50/50 ring-2 ring-violet-500 dark:bg-violet-950/20' : 'border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900'}"><Badge data-show="featured" label="Most popular" variant="brand" /><h3 class="mt-4 text-xl font-bold">{name}</h3><p class="mt-2 text-sm text-slate-500">{description}</p><div class="mt-6"><span class="text-4xl font-black">{price}</span><span class="text-slate-500">{period}</span></div><div class="mt-6 flex-1"><slot /></div><a href="{ctaHref}" class="mt-6 inline-flex min-h-12 items-center justify-center rounded-xl font-semibold transition {featured ? 'bg-violet-600 text-white hover:bg-violet-700' : 'border border-slate-300 hover:bg-slate-50 dark:border-slate-700'}">{ctaLabel}</a></article>
+  }
+}
diff --git a/packages/ui/components/ProgressBar.wrn b/packages/ui/components/ProgressBar.wrn
index e64fd37c..112c7ba1 100644
--- a/packages/ui/components/ProgressBar.wrn
+++ b/packages/ui/components/ProgressBar.wrn
@@ -1 +1,11 @@
-component ProgressBar { props { value = 0 max = 100 label = "Progress" showValue = true } view { <div><div class="mb-2 flex justify-between text-sm"><span>{label}</span><span data-show="showValue">{value}%</span></div><div class="h-2 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-800" role="progressbar" aria-valuenow="{value}" aria-valuemin="0" aria-valuemax="{max}"><div class="h-full rounded-full bg-violet-600 transition-all duration-500" style="width: {value}%"></div></div></div> } }
+component ProgressBar {
+  props {
+    value = 0
+    max = 100
+    label = "Progress"
+    showValue = true
+  }
+  view {
+    <div><div class="mb-2 flex justify-between text-sm"><span>{label}</span><span data-show="showValue">{value}%</span></div><div class="h-2 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-800" role="progressbar" aria-valuenow="{value}" aria-valuemin="0" aria-valuemax="{max}"><div class="h-full rounded-full bg-violet-600 transition-all duration-500" style="width: {value}%"></div></div></div>
+  }
+}
diff --git a/packages/ui/components/PublicFooter.wrn b/packages/ui/components/PublicFooter.wrn
index a98e8da6..d78dd08b 100644
--- a/packages/ui/components/PublicFooter.wrn
+++ b/packages/ui/components/PublicFooter.wrn
@@ -1 +1,10 @@
-component PublicFooter { props { brand = "WRNexusJS" description = "SSR-first, Bun-native full-stack framework." copyright = "© 2026 WorkRoot Workspace" } view { <footer class="border-t border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-950"><div class="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8"><div class="grid gap-10 lg:grid-cols-[1.2fr_2fr]"><div><div class="text-xl font-black">{brand}</div><p class="mt-3 max-w-sm text-sm leading-6 text-slate-500">{description}</p></div><div class="grid grid-cols-2 gap-8 sm:grid-cols-4"><slot /></div></div><div class="mt-12 flex flex-col gap-4 border-t border-slate-200 pt-6 text-sm text-slate-500 sm:flex-row sm:items-center sm:justify-between dark:border-slate-800"><span>{copyright}</span><button data-wire-theme-toggle type="button" class="min-h-10 rounded-xl border border-slate-300 px-3 dark:border-slate-700">Toggle theme</button></div></div></footer> } }
+component PublicFooter {
+  props {
+    brand = "WRNexusJS"
+    description = "SSR-first, Bun-native full-stack framework."
+    copyright = "© 2026 WorkRoot Workspace"
+  }
+  view {
+    <footer class="border-t border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-950"><div class="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8"><div class="grid gap-10 lg:grid-cols-[1.2fr_2fr]"><div><div class="text-xl font-black">{brand}</div><p class="mt-3 max-w-sm text-sm leading-6 text-slate-500">{description}</p></div><div class="grid grid-cols-2 gap-8 sm:grid-cols-4"><slot /></div></div><div class="mt-12 flex flex-col gap-4 border-t border-slate-200 pt-6 text-sm text-slate-500 sm:flex-row sm:items-center sm:justify-between dark:border-slate-800"><span>{copyright}</span><button data-wire-theme-toggle type="button" class="min-h-10 rounded-xl border border-slate-300 px-3 dark:border-slate-700">Toggle theme</button></div></div></footer>
+  }
+}
diff --git a/packages/ui/components/PublicHeader.wrn b/packages/ui/components/PublicHeader.wrn
index 03d2244b..7af3caf2 100644
--- a/packages/ui/components/PublicHeader.wrn
+++ b/packages/ui/components/PublicHeader.wrn
@@ -1 +1,13 @@
-component PublicHeader { props { brand = "WRNexusJS" homeHref = "/" signInHref = "/signin" ctaHref = "/start" ctaLabel = "Get started" } state mobileOpen = false view { <header class="sticky top-0 z-40 border-b border-slate-200/80 bg-white/85 backdrop-blur-xl dark:border-slate-800 dark:bg-slate-950/85"><div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8"><a href="{homeHref}" class="text-lg font-black tracking-tight">{brand}</a><nav class="hidden items-center gap-7 md:flex" aria-label="Primary"><slot /></nav><div class="hidden items-center gap-3 md:flex"><a href="{signInHref}" class="text-sm font-semibold">Sign in</a><a href="{ctaHref}" class="inline-flex min-h-10 items-center rounded-xl bg-violet-600 px-4 text-sm font-semibold text-white">{ctaLabel}</a><button data-wire-theme-toggle type="button" aria-label="Toggle theme" class="size-10 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800">◐</button></div><button type="button" aria-label="Open menu" aria-expanded="{mobileOpen}" @click="mobileOpen = !mobileOpen" class="size-11 rounded-xl md:hidden">☰</button></div><div data-show="mobileOpen" class="border-t border-slate-200 px-4 py-5 md:hidden dark:border-slate-800"><div class="space-y-3"><slot name="mobile" /></div><div class="mt-5 grid grid-cols-2 gap-3"><a href="{signInHref}" class="inline-flex min-h-11 items-center justify-center rounded-xl border border-slate-300 font-semibold">Sign in</a><a href="{ctaHref}" class="inline-flex min-h-11 items-center justify-center rounded-xl bg-violet-600 font-semibold text-white">{ctaLabel}</a></div></div></header> } }
+component PublicHeader {
+  props {
+    brand = "WRNexusJS"
+    homeHref = "/"
+    signInHref = "/signin"
+    ctaHref = "/start"
+    ctaLabel = "Get started"
+  }
+  state mobileOpen = false
+  view {
+    <header class="sticky top-0 z-40 border-b border-slate-200/80 bg-white/85 backdrop-blur-xl dark:border-slate-800 dark:bg-slate-950/85"><div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8"><a href="{homeHref}" class="text-lg font-black tracking-tight">{brand}</a><nav class="hidden items-center gap-7 md:flex" aria-label="Primary"><slot /></nav><div class="hidden items-center gap-3 md:flex"><a href="{signInHref}" class="text-sm font-semibold">Sign in</a><a href="{ctaHref}" class="inline-flex min-h-10 items-center rounded-xl bg-violet-600 px-4 text-sm font-semibold text-white">{ctaLabel}</a><button data-wire-theme-toggle type="button" aria-label="Toggle theme" class="size-10 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800">◐</button></div><button type="button" aria-label="Open menu" aria-expanded="{mobileOpen}" @click="mobileOpen = !mobileOpen" class="size-11 rounded-xl md:hidden">☰</button></div><div data-show="mobileOpen" class="border-t border-slate-200 px-4 py-5 md:hidden dark:border-slate-800"><div class="space-y-3"><slot name="mobile" /></div><div class="mt-5 grid grid-cols-2 gap-3"><a href="{signInHref}" class="inline-flex min-h-11 items-center justify-center rounded-xl border border-slate-300 font-semibold">Sign in</a><a href="{ctaHref}" class="inline-flex min-h-11 items-center justify-center rounded-xl bg-violet-600 font-semibold text-white">{ctaLabel}</a></div></div></header>
+  }
+}
diff --git a/packages/ui/components/RadioGroup.wrn b/packages/ui/components/RadioGroup.wrn
index 0b47c681..f0332343 100644
--- a/packages/ui/components/RadioGroup.wrn
+++ b/packages/ui/components/RadioGroup.wrn
@@ -1 +1,9 @@
-component RadioGroup { props { label = "Choose one" name = "choice" } view { <fieldset class="space-y-3"><legend class="text-sm font-semibold text-slate-900 dark:text-white">{label}</legend><div class="space-y-2"><slot /></div></fieldset> } }
+component RadioGroup {
+  props {
+    label = "Choose one"
+    name = "choice"
+  }
+  view {
+    <fieldset class="space-y-3"><legend class="text-sm font-semibold text-slate-900 dark:text-white">{label}</legend><div class="space-y-2"><slot /></div></fieldset>
+  }
+}
diff --git a/packages/ui/components/SchedulePicker.wrn b/packages/ui/components/SchedulePicker.wrn
index 0e2524c3..c3a64bd2 100644
--- a/packages/ui/components/SchedulePicker.wrn
+++ b/packages/ui/components/SchedulePicker.wrn
@@ -1 +1,8 @@
-component SchedulePicker { props { label = "Schedule" } view { <fieldset class="space-y-4 rounded-2xl border border-slate-200 p-5 dark:border-slate-800"><legend class="px-2 font-semibold">{label}</legend><DateTimeInput id="scheduleAt" name="scheduleAt" label="Date and time" /><TimezoneSelector /></fieldset> } }
+component SchedulePicker {
+  props {
+    label = "Schedule"
+  }
+  view {
+    <fieldset class="space-y-4 rounded-2xl border border-slate-200 p-5 dark:border-slate-800"><legend class="px-2 font-semibold">{label}</legend><DateTimeInput id="scheduleAt" name="scheduleAt" label="Date and time" /><TimezoneSelector /></fieldset>
+  }
+}
diff --git a/packages/ui/components/SearchInput.wrn b/packages/ui/components/SearchInput.wrn
index 68db6c7d..d74df598 100644
--- a/packages/ui/components/SearchInput.wrn
+++ b/packages/ui/components/SearchInput.wrn
@@ -1,5 +1,17 @@
 component SearchInput {
-  props { id = "" name = "" label = "Search" value = "" placeholder = "" help = "" error = "" required = false disabled = false readonly = false autocomplete = "" }
+  props {
+    id = ""
+    name = ""
+    label = "Search"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
   view {
     <div class="space-y-2">
       <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
diff --git a/packages/ui/components/Section.wrn b/packages/ui/components/Section.wrn
index 979096d9..81cf8331 100644
--- a/packages/ui/components/Section.wrn
+++ b/packages/ui/components/Section.wrn
@@ -1,5 +1,10 @@
 component Section {
-  props { id = "" size = "default" surface = "default" className = "" }
+  props {
+    id = ""
+    size = "default"
+    surface = "default"
+    className = ""
+  }
   view {
     <section id="{id}" class="{size === 'compact' ? 'py-10 sm:py-14' : size === 'spacious' ? 'py-20 sm:py-28' : 'py-14 sm:py-20'} {surface === 'muted' ? 'bg-slate-50 dark:bg-slate-900/50' : surface === 'brand' ? 'bg-violet-600 text-white' : ''} {className}"><slot /></section>
   }
diff --git a/packages/ui/components/SectionHeader.wrn b/packages/ui/components/SectionHeader.wrn
index 1f75bdb7..41313925 100644
--- a/packages/ui/components/SectionHeader.wrn
+++ b/packages/ui/components/SectionHeader.wrn
@@ -1 +1,11 @@
-component SectionHeader { props { eyebrow = "" title = "Section title" description = "" align = "left" } view { <header class="max-w-3xl {align === 'center' ? 'mx-auto text-center' : ''}"><p data-show="eyebrow" class="mb-3 text-sm font-bold uppercase tracking-[0.18em] text-violet-600 dark:text-violet-400">{eyebrow}</p><h2 class="text-3xl font-bold tracking-tight text-slate-950 sm:text-4xl dark:text-white">{title}</h2><p data-show="description" class="mt-4 text-lg leading-8 text-slate-600 dark:text-slate-300">{description}</p><div class="mt-6"><slot /></div></header> } }
+component SectionHeader {
+  props {
+    eyebrow = ""
+    title = "Section title"
+    description = ""
+    align = "left"
+  }
+  view {
+    <header class="max-w-3xl {align === 'center' ? 'mx-auto text-center' : ''}"><p data-show="eyebrow" class="mb-3 text-sm font-bold uppercase tracking-[0.18em] text-violet-600 dark:text-violet-400">{eyebrow}</p><h2 class="text-3xl font-bold tracking-tight text-slate-950 sm:text-4xl dark:text-white">{title}</h2><p data-show="description" class="mt-4 text-lg leading-8 text-slate-600 dark:text-slate-300">{description}</p><div class="mt-6"><slot /></div></header>
+  }
+}
diff --git a/packages/ui/components/StatCard.wrn b/packages/ui/components/StatCard.wrn
index c68cc41e..c29c69a6 100644
--- a/packages/ui/components/StatCard.wrn
+++ b/packages/ui/components/StatCard.wrn
@@ -1 +1,11 @@
-component StatCard { props { label = "Metric" value = "0" change = "" trend = "neutral" } view { <article class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900"><p class="text-sm font-medium text-slate-500">{label}</p><div class="mt-2 flex items-end justify-between gap-3"><p class="text-3xl font-bold tracking-tight">{value}</p><span data-show="change" class="text-sm font-semibold {trend === 'up' ? 'text-emerald-600' : trend === 'down' ? 'text-red-600' : 'text-slate-500'}">{trend === 'up' ? '↑' : trend === 'down' ? '↓' : ''} {change}</span></div></article> } }
+component StatCard {
+  props {
+    label = "Metric"
+    value = "0"
+    change = ""
+    trend = "neutral"
+  }
+  view {
+    <article class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900"><p class="text-sm font-medium text-slate-500">{label}</p><div class="mt-2 flex items-end justify-between gap-3"><p class="text-3xl font-bold tracking-tight">{value}</p><span data-show="change" class="text-sm font-semibold {trend === 'up' ? 'text-emerald-600' : trend === 'down' ? 'text-red-600' : 'text-slate-500'}">{trend === 'up' ? '↑' : trend === 'down' ? '↓' : ''} {change}</span></div></article>
+  }
+}
diff --git a/packages/ui/components/StatusBadge.wrn b/packages/ui/components/StatusBadge.wrn
index aea0c8d2..cfbaeda7 100644
--- a/packages/ui/components/StatusBadge.wrn
+++ b/packages/ui/components/StatusBadge.wrn
@@ -1 +1,8 @@
-component StatusBadge { props { status = "operational" } view { <span class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold {status === 'operational' ? 'bg-emerald-100 text-emerald-700' : status === 'degraded' ? 'bg-amber-100 text-amber-700' : status === 'outage' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'}"><span class="size-2 rounded-full bg-current"></span>{status}</span> } }
+component StatusBadge {
+  props {
+    status = "operational"
+  }
+  view {
+    <span class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold {status === 'operational' ? 'bg-emerald-100 text-emerald-700' : status === 'degraded' ? 'bg-amber-100 text-amber-700' : status === 'outage' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'}"><span class="size-2 rounded-full bg-current"></span>{status}</span>
+  }
+}
diff --git a/packages/ui/components/Tabs.wrn b/packages/ui/components/Tabs.wrn
index 9197f888..a4a5b832 100644
--- a/packages/ui/components/Tabs.wrn
+++ b/packages/ui/components/Tabs.wrn
@@ -1 +1,9 @@
-component Tabs { props { active = "first" } state current = active view { <div><div role="tablist" class="flex gap-1 overflow-x-auto rounded-xl bg-slate-100 p-1 dark:bg-slate-800"><button role="tab" aria-selected="{current === 'first'}" @click="current = 'first'" class="min-h-10 flex-1 rounded-lg px-4 text-sm font-semibold transition {current === 'first' ? 'bg-white shadow dark:bg-slate-900' : 'text-slate-500'}">First</button><button role="tab" aria-selected="{current === 'second'}" @click="current = 'second'" class="min-h-10 flex-1 rounded-lg px-4 text-sm font-semibold transition {current === 'second' ? 'bg-white shadow dark:bg-slate-900' : 'text-slate-500'}">Second</button></div><div data-show="current === 'first'" role="tabpanel" class="pt-5"><slot name="first" /></div><div data-show="current === 'second'" role="tabpanel" class="pt-5"><slot name="second" /></div></div> } }
+component Tabs {
+  props {
+    active = "first"
+  }
+  state current = active
+  view {
+    <div><div role="tablist" class="flex gap-1 overflow-x-auto rounded-xl bg-slate-100 p-1 dark:bg-slate-800"><button role="tab" aria-selected="{current === 'first'}" @click="current = 'first'" class="min-h-10 flex-1 rounded-lg px-4 text-sm font-semibold transition {current === 'first' ? 'bg-white shadow dark:bg-slate-900' : 'text-slate-500'}">First</button><button role="tab" aria-selected="{current === 'second'}" @click="current = 'second'" class="min-h-10 flex-1 rounded-lg px-4 text-sm font-semibold transition {current === 'second' ? 'bg-white shadow dark:bg-slate-900' : 'text-slate-500'}">Second</button></div><div data-show="current === 'first'" role="tabpanel" class="pt-5"><slot name="first" /></div><div data-show="current === 'second'" role="tabpanel" class="pt-5"><slot name="second" /></div></div>
+  }
+}
diff --git a/packages/ui/components/TestimonialCard.wrn b/packages/ui/components/TestimonialCard.wrn
index 9ecafd0b..d18622a9 100644
--- a/packages/ui/components/TestimonialCard.wrn
+++ b/packages/ui/components/TestimonialCard.wrn
@@ -1 +1,12 @@
-component TestimonialCard { props { quote = "Great product." name = "Customer" role = "" company = "" avatar = "" } view { <figure class="rounded-3xl border border-slate-200 bg-white p-7 shadow-sm dark:border-slate-800 dark:bg-slate-900"><blockquote class="text-lg leading-8 text-slate-700 dark:text-slate-200">“{quote}”</blockquote><figcaption class="mt-6 flex items-center gap-3"><Avatar src="{avatar}" initials="{name.slice(0,2)}" /><div><div class="font-semibold">{name}</div><div class="text-sm text-slate-500">{role}<span data-show="company"> · {company}</span></div></div></figcaption></figure> } }
+component TestimonialCard {
+  props {
+    quote = "Great product."
+    name = "Customer"
+    role = ""
+    company = ""
+    avatar = ""
+  }
+  view {
+    <figure class="rounded-3xl border border-slate-200 bg-white p-7 shadow-sm dark:border-slate-800 dark:bg-slate-900"><blockquote class="text-lg leading-8 text-slate-700 dark:text-slate-200">“{quote}”</blockquote><figcaption class="mt-6 flex items-center gap-3"><Avatar src="{avatar}" initials="{name.slice(0,2)}" /><div><div class="font-semibold">{name}</div><div class="text-sm text-slate-500">{role}<span data-show="company"> · {company}</span></div></div></figcaption></figure>
+  }
+}
diff --git a/packages/ui/components/TextInput.wrn b/packages/ui/components/TextInput.wrn
index 16cf6adf..d764d29a 100644
--- a/packages/ui/components/TextInput.wrn
+++ b/packages/ui/components/TextInput.wrn
@@ -1,5 +1,17 @@
 component TextInput {
-  props { id = "" name = "" label = "Text" value = "" placeholder = "" help = "" error = "" required = false disabled = false readonly = false autocomplete = "" }
+  props {
+    id = ""
+    name = ""
+    label = "Text"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
   view {
     <div class="space-y-2">
       <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
diff --git a/packages/ui/components/TimeInput.wrn b/packages/ui/components/TimeInput.wrn
index 744b73c4..db359c80 100644
--- a/packages/ui/components/TimeInput.wrn
+++ b/packages/ui/components/TimeInput.wrn
@@ -1,5 +1,17 @@
 component TimeInput {
-  props { id = "" name = "" label = "Time" value = "" placeholder = "" help = "" error = "" required = false disabled = false readonly = false autocomplete = "" }
+  props {
+    id = ""
+    name = ""
+    label = "Time"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
   view {
     <div class="space-y-2">
       <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
diff --git a/packages/ui/components/Timeline.wrn b/packages/ui/components/Timeline.wrn
index c53511da..67383575 100644
--- a/packages/ui/components/Timeline.wrn
+++ b/packages/ui/components/Timeline.wrn
@@ -1 +1,8 @@
-component Timeline { props { title = "Timeline" } view { <section><h2 class="text-lg font-bold">{title}</h2><ol class="mt-5 border-l border-slate-200 pl-6 dark:border-slate-800"><slot /></ol></section> } }
+component Timeline {
+  props {
+    title = "Timeline"
+  }
+  view {
+    <section><h2 class="text-lg font-bold">{title}</h2><ol class="mt-5 border-l border-slate-200 pl-6 dark:border-slate-800"><slot /></ol></section>
+  }
+}
diff --git a/packages/ui/components/TimelineItem.wrn b/packages/ui/components/TimelineItem.wrn
index 60ae1571..bee45a78 100644
--- a/packages/ui/components/TimelineItem.wrn
+++ b/packages/ui/components/TimelineItem.wrn
@@ -1 +1,11 @@
-component TimelineItem { props { title = "Event" date = "" description = "" status = "default" } view { <li class="relative pb-8 last:pb-0"><span class="absolute -left-[1.85rem] top-1 size-3 rounded-full ring-4 ring-white dark:ring-slate-950 {status === 'success' ? 'bg-emerald-500' : status === 'warning' ? 'bg-amber-500' : 'bg-violet-500'}"></span><div class="flex flex-wrap items-baseline justify-between gap-2"><h3 class="font-semibold">{title}</h3><time class="text-xs text-slate-500">{date}</time></div><p data-show="description" class="mt-1 text-sm text-slate-500">{description}</p></li> } }
+component TimelineItem {
+  props {
+    title = "Event"
+    date = ""
+    description = ""
+    status = "default"
+  }
+  view {
+    <li class="relative pb-8 last:pb-0"><span class="absolute -left-[1.85rem] top-1 size-3 rounded-full ring-4 ring-white dark:ring-slate-950 {status === 'success' ? 'bg-emerald-500' : status === 'warning' ? 'bg-amber-500' : 'bg-violet-500'}"></span><div class="flex flex-wrap items-baseline justify-between gap-2"><h3 class="font-semibold">{title}</h3><time class="text-xs text-slate-500">{date}</time></div><p data-show="description" class="mt-1 text-sm text-slate-500">{description}</p></li>
+  }
+}
diff --git a/packages/ui/components/TimezoneSelector.wrn b/packages/ui/components/TimezoneSelector.wrn
index 95292cab..5c99e272 100644
--- a/packages/ui/components/TimezoneSelector.wrn
+++ b/packages/ui/components/TimezoneSelector.wrn
@@ -1 +1,10 @@
-component TimezoneSelector { props { id = "timezone" name = "timezone" label = "Timezone" } view { <Select id="{id}" name="{name}" label="{label}"><option value="UTC">UTC</option><option value="Asia/Kolkata">Asia/Kolkata</option><option value="America/New_York">America/New_York</option><option value="Europe/London">Europe/London</option></Select> } }
+component TimezoneSelector {
+  props {
+    id = "timezone"
+    name = "timezone"
+    label = "Timezone"
+  }
+  view {
+    <Select id="{id}" name="{name}" label="{label}"><option value="UTC">UTC</option><option value="Asia/Kolkata">Asia/Kolkata</option><option value="America/New_York">America/New_York</option><option value="Europe/London">Europe/London</option></Select>
+  }
+}
diff --git a/packages/ui/components/Toast.wrn b/packages/ui/components/Toast.wrn
index 7fc6fec1..36e4ca6c 100644
--- a/packages/ui/components/Toast.wrn
+++ b/packages/ui/components/Toast.wrn
@@ -1 +1,12 @@
-component Toast { props { title = "Saved" description = "" variant = "success" duration = 5000 } state visible = true view { <div data-show="visible" role="status" aria-live="polite" class="pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-2xl border bg-white p-4 shadow-2xl dark:border-slate-800 dark:bg-slate-900"><span class="mt-0.5 flex size-8 items-center justify-center rounded-full {variant === 'success' ? 'bg-emerald-100 text-emerald-700' : variant === 'danger' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'}">{variant === 'success' ? '✓' : variant === 'danger' ? '!' : 'i'}</span><div class="min-w-0 flex-1"><p class="font-semibold">{title}</p><p data-show="description" class="mt-1 text-sm text-slate-500">{description}</p></div><button type="button" aria-label="Close" @click="visible = false" class="rounded-lg p-1 text-slate-400 hover:bg-slate-100">×</button></div> } }
+component Toast {
+  props {
+    title = "Saved"
+    description = ""
+    variant = "success"
+    duration = 5000
+  }
+  state visible = true
+  view {
+    <div data-show="visible" role="status" aria-live="polite" class="pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-2xl border bg-white p-4 shadow-2xl dark:border-slate-800 dark:bg-slate-900"><span class="mt-0.5 flex size-8 items-center justify-center rounded-full {variant === 'success' ? 'bg-emerald-100 text-emerald-700' : variant === 'danger' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'}">{variant === 'success' ? '✓' : variant === 'danger' ? '!' : 'i'}</span><div class="min-w-0 flex-1"><p class="font-semibold">{title}</p><p data-show="description" class="mt-1 text-sm text-slate-500">{description}</p></div><button type="button" aria-label="Close" @click="visible = false" class="rounded-lg p-1 text-slate-400 hover:bg-slate-100">×</button></div>
+  }
+}
diff --git a/packages/ui/components/UrlInput.wrn b/packages/ui/components/UrlInput.wrn
index 5b50c4d9..2fdb643a 100644
--- a/packages/ui/components/UrlInput.wrn
+++ b/packages/ui/components/UrlInput.wrn
@@ -1,5 +1,17 @@
 component UrlInput {
-  props { id = "" name = "" label = "Url" value = "" placeholder = "" help = "" error = "" required = false disabled = false readonly = false autocomplete = "" }
+  props {
+    id = ""
+    name = ""
+    label = "Url"
+    value = ""
+    placeholder = ""
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+    readonly = false
+    autocomplete = ""
+  }
   view {
     <div class="space-y-2">
       <label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label>
diff --git a/packages/ui/components/VisuallyHidden.wrn b/packages/ui/components/VisuallyHidden.wrn
index 1023aa08..6d093b9c 100644
--- a/packages/ui/components/VisuallyHidden.wrn
+++ b/packages/ui/components/VisuallyHidden.wrn
@@ -1 +1,8 @@
-component VisuallyHidden { props { className = "" } view { <div class="sr-only {className}"><slot /></div> } }
+component VisuallyHidden {
+  props {
+    className = ""
+  }
+  view {
+    <div class="sr-only {className}"><slot /></div>
+  }
+}
diff --git a/packages/ui/components/avatar.wrn b/packages/ui/components/avatar.wrn
index 31d858b6..0dd934e5 100644
--- a/packages/ui/components/avatar.wrn
+++ b/packages/ui/components/avatar.wrn
@@ -1 +1,11 @@
-component Avatar { props { src = "" alt = "" initials = "WR" size = "md" } view { <span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500 font-semibold text-white {size === 'sm' ? 'size-8 text-xs' : size === 'lg' ? 'size-14 text-base' : 'size-10 text-sm'}"><img data-show="src" src="{src}" alt="{alt}" class="h-full w-full object-cover" /><span data-show="!src" aria-hidden="true">{initials}</span></span> } }
+component Avatar {
+  props {
+    src = ""
+    alt = ""
+    initials = "WR"
+    size = "md"
+  }
+  view {
+    <span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500 font-semibold text-white {size === 'sm' ? 'size-8 text-xs' : size === 'lg' ? 'size-14 text-base' : 'size-10 text-sm'}"><img data-show="src" src="{src}" alt="{alt}" class="h-full w-full object-cover" /><span data-show="!src" aria-hidden="true">{initials}</span></span>
+  }
+}
diff --git a/packages/ui/components/badge.wrn b/packages/ui/components/badge.wrn
index edc169f7..7bd696b5 100644
--- a/packages/ui/components/badge.wrn
+++ b/packages/ui/components/badge.wrn
@@ -1 +1,9 @@
-component Badge { props { label = "Badge" variant = "neutral" } view { <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset {variant === 'success' ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-950/40 dark:text-emerald-300' : variant === 'warning' ? 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-950/40 dark:text-amber-300' : variant === 'danger' ? 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-950/40 dark:text-red-300' : variant === 'brand' ? 'bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-950/40 dark:text-violet-300' : 'bg-slate-100 text-slate-700 ring-slate-600/10 dark:bg-slate-800 dark:text-slate-300'}">{label}</span> } }
+component Badge {
+  props {
+    label = "Badge"
+    variant = "neutral"
+  }
+  view {
+    <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset {variant === 'success' ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-950/40 dark:text-emerald-300' : variant === 'warning' ? 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-950/40 dark:text-amber-300' : variant === 'danger' ? 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-950/40 dark:text-red-300' : variant === 'brand' ? 'bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-950/40 dark:text-violet-300' : 'bg-slate-100 text-slate-700 ring-slate-600/10 dark:bg-slate-800 dark:text-slate-300'}">{label}</span>
+  }
+}
diff --git a/packages/ui/components/button.wrn b/packages/ui/components/button.wrn
index 8a7187e9..d20ff2a5 100644
--- a/packages/ui/components/button.wrn
+++ b/packages/ui/components/button.wrn
@@ -1,5 +1,14 @@
 component Button {
-  props { label = "Button" type = "button" variant = "primary" size = "md" disabled = false loading = false icon = "" className = "" }
+  props {
+    label = "Button"
+    type = "button"
+    variant = "primary"
+    size = "md"
+    disabled = false
+    loading = false
+    icon = ""
+    className = ""
+  }
   view {
     <button type="{type}" disabled="{disabled || loading}" aria-busy="{loading}" class="inline-flex min-h-11 items-center justify-center gap-2 rounded-xl font-semibold transition-all duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] {size === 'sm' ? 'px-3 py-2 text-sm' : size === 'lg' ? 'px-6 py-3.5 text-base' : 'px-4 py-2.5 text-sm'} {variant === 'secondary' ? 'border border-slate-300 bg-white text-slate-900 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-white dark:hover:bg-slate-800' : variant === 'ghost' ? 'text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800' : variant === 'danger' ? 'bg-red-600 text-white hover:bg-red-700' : 'bg-violet-600 text-white shadow-sm hover:-translate-y-0.5 hover:bg-violet-700 hover:shadow-md'} {className}">
       <span data-show="loading" class="size-4 animate-spin rounded-full border-2 border-current border-r-transparent"></span>
diff --git a/packages/ui/components/card.wrn b/packages/ui/components/card.wrn
index 3b0ce315..a99a532d 100644
--- a/packages/ui/components/card.wrn
+++ b/packages/ui/components/card.wrn
@@ -1 +1,11 @@
-component Card { props { variant = "default" padding = "md" interactive = false className = "" } view { <article class="rounded-2xl border border-slate-200 bg-white text-slate-950 shadow-sm transition duration-300 dark:border-slate-800 dark:bg-slate-900 dark:text-white {padding === 'sm' ? 'p-4' : padding === 'lg' ? 'p-8' : 'p-6'} {variant === 'glass' ? 'bg-white/75 backdrop-blur-xl dark:bg-slate-900/70' : variant === 'elevated' ? 'shadow-xl shadow-slate-950/5' : ''} {interactive ? 'hover:-translate-y-1 hover:shadow-xl' : ''} {className}"><slot /></article> } }
+component Card {
+  props {
+    variant = "default"
+    padding = "md"
+    interactive = false
+    className = ""
+  }
+  view {
+    <article class="rounded-2xl border border-slate-200 bg-white text-slate-950 shadow-sm transition duration-300 dark:border-slate-800 dark:bg-slate-900 dark:text-white {padding === 'sm' ? 'p-4' : padding === 'lg' ? 'p-8' : 'p-6'} {variant === 'glass' ? 'bg-white/75 backdrop-blur-xl dark:bg-slate-900/70' : variant === 'elevated' ? 'shadow-xl shadow-slate-950/5' : ''} {interactive ? 'hover:-translate-y-1 hover:shadow-xl' : ''} {className}"><slot /></article>
+  }
+}
diff --git a/packages/ui/components/checkbox.wrn b/packages/ui/components/checkbox.wrn
index 034c0b2c..28709f45 100644
--- a/packages/ui/components/checkbox.wrn
+++ b/packages/ui/components/checkbox.wrn
@@ -1 +1,13 @@
-component Checkbox { props { id = "" name = "" label = "Checkbox" description = "" checked = false disabled = false } view { <label for="{id}" class="flex min-h-11 cursor-pointer items-start gap-3 rounded-xl p-2 transition hover:bg-slate-50 dark:hover:bg-slate-900"><input id="{id}" name="{name}" type="checkbox" checked="{checked}" disabled="{disabled}" class="mt-0.5 size-5 rounded border-slate-300 text-violet-600 focus:ring-violet-500 dark:border-slate-700 dark:bg-slate-950" /><span><span class="block text-sm font-semibold text-slate-900 dark:text-white">{label}</span><span data-show="description" class="mt-0.5 block text-sm text-slate-500 dark:text-slate-400">{description}</span></span></label> } }
+component Checkbox {
+  props {
+    id = ""
+    name = ""
+    label = "Checkbox"
+    description = ""
+    checked = false
+    disabled = false
+  }
+  view {
+    <label for="{id}" class="flex min-h-11 cursor-pointer items-start gap-3 rounded-xl p-2 transition hover:bg-slate-50 dark:hover:bg-slate-900"><input id="{id}" name="{name}" type="checkbox" checked="{checked}" disabled="{disabled}" class="mt-0.5 size-5 rounded border-slate-300 text-violet-600 focus:ring-violet-500 dark:border-slate-700 dark:bg-slate-950" /><span><span class="block text-sm font-semibold text-slate-900 dark:text-white">{label}</span><span data-show="description" class="mt-0.5 block text-sm text-slate-500 dark:text-slate-400">{description}</span></span></label>
+  }
+}
diff --git a/packages/ui/components/container.wrn b/packages/ui/components/container.wrn
index fbc3a023..be0b0c80 100644
--- a/packages/ui/components/container.wrn
+++ b/packages/ui/components/container.wrn
@@ -1,5 +1,8 @@
 component Container {
-  props { size = "default" className = "" }
+  props {
+    size = "default"
+    className = ""
+  }
   view {
     <div class="mx-auto w-full px-4 sm:px-6 lg:px-8 {size === 'narrow' ? 'max-w-3xl' : size === 'wide' ? 'max-w-screen-2xl' : 'max-w-7xl'} {className}"><slot /></div>
   }
diff --git a/packages/ui/components/divider.wrn b/packages/ui/components/divider.wrn
index be692b33..844e0c98 100644
--- a/packages/ui/components/divider.wrn
+++ b/packages/ui/components/divider.wrn
@@ -1 +1,8 @@
-component Divider { props { className = "" } view { <div class="h-px w-full bg-slate-200 dark:bg-slate-800 {className}"><slot /></div> } }
+component Divider {
+  props {
+    className = ""
+  }
+  view {
+    <div class="h-px w-full bg-slate-200 dark:bg-slate-800 {className}"><slot /></div>
+  }
+}
diff --git a/packages/ui/components/grid.wrn b/packages/ui/components/grid.wrn
index 44894974..ef0facc6 100644
--- a/packages/ui/components/grid.wrn
+++ b/packages/ui/components/grid.wrn
@@ -1 +1,9 @@
-component Grid { props { gap = "4" className = "" } view { <div class="grid gap-{gap} {className}"><slot /></div> } }
+component Grid {
+  props {
+    gap = "4"
+    className = ""
+  }
+  view {
+    <div class="grid gap-{gap} {className}"><slot /></div>
+  }
+}
diff --git a/packages/ui/components/radio.wrn b/packages/ui/components/radio.wrn
index 8bd61fbb..3feb7eef 100644
--- a/packages/ui/components/radio.wrn
+++ b/packages/ui/components/radio.wrn
@@ -1 +1,14 @@
-component Radio { props { id = "" name = "choice" value = "" label = "Option" description = "" checked = false disabled = false } view { <label for="{id}" class="flex min-h-11 cursor-pointer items-start gap-3 rounded-xl border border-slate-200 p-3 transition hover:border-violet-400 dark:border-slate-800"><input id="{id}" name="{name}" type="radio" value="{value}" checked="{checked}" disabled="{disabled}" class="mt-0.5 size-5 border-slate-300 text-violet-600 focus:ring-violet-500" /><span><span class="block text-sm font-semibold">{label}</span><span data-show="description" class="text-sm text-slate-500">{description}</span></span></label> } }
+component Radio {
+  props {
+    id = ""
+    name = "choice"
+    value = ""
+    label = "Option"
+    description = ""
+    checked = false
+    disabled = false
+  }
+  view {
+    <label for="{id}" class="flex min-h-11 cursor-pointer items-start gap-3 rounded-xl border border-slate-200 p-3 transition hover:border-violet-400 dark:border-slate-800"><input id="{id}" name="{name}" type="radio" value="{value}" checked="{checked}" disabled="{disabled}" class="mt-0.5 size-5 border-slate-300 text-violet-600 focus:ring-violet-500" /><span><span class="block text-sm font-semibold">{label}</span><span data-show="description" class="text-sm text-slate-500">{description}</span></span></label>
+  }
+}
diff --git a/packages/ui/components/select.wrn b/packages/ui/components/select.wrn
index a21e672a..60b2f815 100644
--- a/packages/ui/components/select.wrn
+++ b/packages/ui/components/select.wrn
@@ -1 +1,14 @@
-component Select { props { id = "" name = "" label = "Select" help = "" error = "" required = false disabled = false } view { <div class="space-y-2"><label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label><select id="{id}" name="{name}" required="{required}" disabled="{disabled}" class="min-h-11 w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-950 dark:text-white"><slot /></select><p data-show="help && !error" class="text-sm text-slate-500">{help}</p><p data-show="error" role="alert" class="text-sm font-medium text-red-600">{error}</p></div> } }
+component Select {
+  props {
+    id = ""
+    name = ""
+    label = "Select"
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+  }
+  view {
+    <div class="space-y-2"><label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label><select id="{id}" name="{name}" required="{required}" disabled="{disabled}" class="min-h-11 w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-slate-950 shadow-sm outline-none transition focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 dark:border-slate-700 dark:bg-slate-950 dark:text-white"><slot /></select><p data-show="help && !error" class="text-sm text-slate-500">{help}</p><p data-show="error" role="alert" class="text-sm font-medium text-red-600">{error}</p></div>
+  }
+}
diff --git a/packages/ui/components/skeleton.wrn b/packages/ui/components/skeleton.wrn
index 3baf5208..b43e0abd 100644
--- a/packages/ui/components/skeleton.wrn
+++ b/packages/ui/components/skeleton.wrn
@@ -1 +1,10 @@
-component Skeleton { props { height = "4" rounded = "lg" className = "" } view { <div aria-hidden="true" class="animate-pulse bg-slate-200 dark:bg-slate-800 h-{height} rounded-{rounded} {className}"></div> } }
+component Skeleton {
+  props {
+    height = "4"
+    rounded = "lg"
+    className = ""
+  }
+  view {
+    <div aria-hidden="true" class="animate-pulse bg-slate-200 dark:bg-slate-800 h-{height} rounded-{rounded} {className}"></div>
+  }
+}
diff --git a/packages/ui/components/spinner.wrn b/packages/ui/components/spinner.wrn
index 84f647ae..98bd90e2 100644
--- a/packages/ui/components/spinner.wrn
+++ b/packages/ui/components/spinner.wrn
@@ -1 +1,9 @@
-component Spinner { props { label = "Loading" size = "md" } view { <span role="status" aria-label="{label}" class="inline-block animate-spin rounded-full border-2 border-slate-300 border-r-violet-600 {size === 'sm' ? 'size-4' : size === 'lg' ? 'size-10' : 'size-6'}"></span> } }
+component Spinner {
+  props {
+    label = "Loading"
+    size = "md"
+  }
+  view {
+    <span role="status" aria-label="{label}" class="inline-block animate-spin rounded-full border-2 border-slate-300 border-r-violet-600 {size === 'sm' ? 'size-4' : size === 'lg' ? 'size-10' : 'size-6'}"></span>
+  }
+}
diff --git a/packages/ui/components/stack.wrn b/packages/ui/components/stack.wrn
index 41826b0e..6c53bc53 100644
--- a/packages/ui/components/stack.wrn
+++ b/packages/ui/components/stack.wrn
@@ -1 +1,9 @@
-component Stack { props { gap = "4" className = "" } view { <div class="flex flex-col gap-{gap} {className}"><slot /></div> } }
+component Stack {
+  props {
+    gap = "4"
+    className = ""
+  }
+  view {
+    <div class="flex flex-col gap-{gap} {className}"><slot /></div>
+  }
+}
diff --git a/packages/ui/components/switch.wrn b/packages/ui/components/switch.wrn
index 9d8ab9dc..1777d7bb 100644
--- a/packages/ui/components/switch.wrn
+++ b/packages/ui/components/switch.wrn
@@ -1 +1,14 @@
-component Switch { props { id = "" name = "" label = "Switch" description = "" checked = false disabled = false } state on = checked view { <button id="{id}" type="button" role="switch" aria-checked="{on}" disabled="{disabled}" @click="on = !on" class="flex w-full items-center justify-between gap-4 rounded-xl p-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 disabled:opacity-50"><span><span class="block text-sm font-semibold">{label}</span><span data-show="description" class="text-sm text-slate-500">{description}</span></span><span class="relative inline-flex h-6 w-11 shrink-0 rounded-full transition {on ? 'bg-violet-600' : 'bg-slate-300 dark:bg-slate-700'}"><span class="absolute top-0.5 size-5 rounded-full bg-white shadow transition-transform {on ? 'translate-x-5' : 'translate-x-0.5'}"></span></span><input type="hidden" name="{name}" value="{on ? 'true' : 'false'}" /></button> } }
+component Switch {
+  props {
+    id = ""
+    name = ""
+    label = "Switch"
+    description = ""
+    checked = false
+    disabled = false
+  }
+  state on = checked
+  view {
+    <button id="{id}" type="button" role="switch" aria-checked="{on}" disabled="{disabled}" @click="on = !on" class="flex w-full items-center justify-between gap-4 rounded-xl p-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 disabled:opacity-50"><span><span class="block text-sm font-semibold">{label}</span><span data-show="description" class="text-sm text-slate-500">{description}</span></span><span class="relative inline-flex h-6 w-11 shrink-0 rounded-full transition {on ? 'bg-violet-600' : 'bg-slate-300 dark:bg-slate-700'}"><span class="absolute top-0.5 size-5 rounded-full bg-white shadow transition-transform {on ? 'translate-x-5' : 'translate-x-0.5'}"></span></span><input type="hidden" name="{name}" value="{on ? 'true' : 'false'}" /></button>
+  }
+}
diff --git a/packages/ui/components/table.wrn b/packages/ui/components/table.wrn
index 00e7c083..a9820020 100644
--- a/packages/ui/components/table.wrn
+++ b/packages/ui/components/table.wrn
@@ -1 +1,9 @@
-component Table { props { caption = "Data table" responsive = true } view { <div class="w-full overflow-x-auto rounded-2xl border border-slate-200 dark:border-slate-800"><table class="w-full min-w-[640px] border-collapse text-left text-sm"><caption class="sr-only">{caption}</caption><slot /></table></div> } }
+component Table {
+  props {
+    caption = "Data table"
+    responsive = true
+  }
+  view {
+    <div class="w-full overflow-x-auto rounded-2xl border border-slate-200 dark:border-slate-800"><table class="w-full min-w-[640px] border-collapse text-left text-sm"><caption class="sr-only">{caption}</caption><slot /></table></div>
+  }
+}
diff --git a/packages/ui/components/textarea.wrn b/packages/ui/components/textarea.wrn
index 2cf1bcd6..1c81bb9e 100644
--- a/packages/ui/components/textarea.wrn
+++ b/packages/ui/components/textarea.wrn
@@ -1 +1,17 @@
-component Textarea { props { id = "" name = "" label = "Message" value = "" placeholder = "" rows = 5 help = "" error = "" required = false disabled = false } view { <div class="space-y-2"><label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label><textarea id="{id}" name="{name}" rows="{rows}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" aria-invalid="{!!error}" class="w-full resize-y rounded-xl border bg-white px-3.5 py-3 text-slate-950 shadow-sm outline-none transition focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 dark:bg-slate-950 dark:text-white {error ? 'border-red-500' : 'border-slate-300 dark:border-slate-700'}">{value}</textarea><p data-show="help && !error" class="text-sm text-slate-500">{help}</p><p data-show="error" role="alert" class="text-sm font-medium text-red-600">{error}</p></div> } }
+component Textarea {
+  props {
+    id = ""
+    name = ""
+    label = "Message"
+    value = ""
+    placeholder = ""
+    rows = 5
+    help = ""
+    error = ""
+    required = false
+    disabled = false
+  }
+  view {
+    <div class="space-y-2"><label for="{id}" class="block text-sm font-semibold text-slate-800 dark:text-slate-200">{label}<span data-show="required" class="ml-1 text-red-500">*</span></label><textarea id="{id}" name="{name}" rows="{rows}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" aria-invalid="{!!error}" class="w-full resize-y rounded-xl border bg-white px-3.5 py-3 text-slate-950 shadow-sm outline-none transition focus:border-violet-500 focus:ring-4 focus:ring-violet-500/10 dark:bg-slate-950 dark:text-white {error ? 'border-red-500' : 'border-slate-300 dark:border-slate-700'}">{value}</textarea><p data-show="help && !error" class="text-sm text-slate-500">{help}</p><p data-show="error" role="alert" class="text-sm font-medium text-red-600">{error}</p></div>
+  }
+}
diff --git a/packages/ui/components/tooltip.wrn b/packages/ui/components/tooltip.wrn
index 828b27e6..58c1b613 100644
--- a/packages/ui/components/tooltip.wrn
+++ b/packages/ui/components/tooltip.wrn
@@ -1 +1,9 @@
-component Tooltip { props { text = "Helpful information" position = "top" } view { <span class="group relative inline-flex"><slot /><span role="tooltip" class="pointer-events-none absolute z-40 w-max max-w-xs rounded-lg bg-slate-950 px-2.5 py-1.5 text-xs font-medium text-white opacity-0 shadow-lg transition duration-200 group-hover:opacity-100 group-focus-within:opacity-100 {position === 'bottom' ? 'left-1/2 top-full mt-2 -translate-x-1/2' : 'bottom-full left-1/2 mb-2 -translate-x-1/2'}">{text}</span></span> } }
+component Tooltip {
+  props {
+    text = "Helpful information"
+    position = "top"
+  }
+  view {
+    <span class="group relative inline-flex"><slot /><span role="tooltip" class="pointer-events-none absolute z-40 w-max max-w-xs rounded-lg bg-slate-950 px-2.5 py-1.5 text-xs font-medium text-white opacity-0 shadow-lg transition duration-200 group-hover:opacity-100 group-focus-within:opacity-100 {position === 'bottom' ? 'left-1/2 top-full mt-2 -translate-x-1/2' : 'bottom-full left-1/2 mb-2 -translate-x-1/2'}">{text}</span></span>
+  }
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2241a6ae..ca5953a9 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "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 b278ab41..39e27fe1 100644
--- a/packages/ui/test/ui.test.ts
+++ b/packages/ui/test/ui.test.ts
@@ -1,6 +1,7 @@
 import { expect, test } from "bun:test";
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
+import { compileWireFile } from "../../compiler/src/index.ts";
 import { uiComponentNames, uiComponentsDir, uiCss } from "../src/index.ts";
 
 test("bundled UI assets are discoverable and readable", () => {
@@ -8,3 +9,8 @@ test("bundled UI assets are discoverable and readable", () => {
   expect(readFileSync(join(uiComponentsDir(), "Button.wrn"), "utf8")).toContain("component Button");
   expect(uiCss()).toContain("--wire-");
 });
+
+test.each(uiComponentNames())("bundled UI component %s compiles", (name) => {
+  const path = join(uiComponentsDir(), `${name}.wrn`);
+  expect(() => compileWireFile(readFileSync(path, "utf8"), path)).not.toThrow();
+});
diff --git a/packages/uploader/package.json b/packages/uploader/package.json
index 63619b7f..82ca40bc 100644
--- a/packages/uploader/package.json
+++ b/packages/uploader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/uploader",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/validation/package.json b/packages/validation/package.json
index 78fb2c9e..f18249f2 100644
--- a/packages/validation/package.json
+++ b/packages/validation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/validation",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/update-package-versions.mjs b/update-package-versions.mjs
index c7f9dac4..2835856e 100644
--- a/update-package-versions.mjs
+++ b/update-package-versions.mjs
@@ -1,7 +1,7 @@
 import { existsSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
 
-const version = "0.2.50";
+const version = "0.2.51";
 
 const dependencyGroups = [
   "dependencies",