diff --git a/.publish/ai/package.json b/.publish/ai/package.json
index dcdbc935..23b12d45 100644
--- a/.publish/ai/package.json
+++ b/.publish/ai/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ai",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "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 304d41a8..1d310f86 100644
--- a/.publish/authz/package.json
+++ b/.publish/authz/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/authz",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "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 53b06814..acf6e052 100644
--- a/.publish/cli/package.json
+++ b/.publish/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/cli",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "@wrnexus/cli — part of the WrNexus framework.",
   "license": "MIT",
@@ -28,18 +28,18 @@
     "wrnexus": "./dist/index.js"
   },
   "dependencies": {
-    "@wrnexus/core": "^0.3.3",
-    "@wrnexus/router": "^0.3.3",
-    "@wrnexus/csr": "^0.3.3",
-    "@wrnexus/compiler": "^0.3.3",
-    "@wrnexus/styles": "^0.3.3",
-    "@wrnexus/dev-server": "^0.3.3",
-    "@wrnexus/ui": "^0.3.3",
-    "@wrnexus/validation": "^0.3.3",
-    "@wrnexus/i18n": "^0.3.3",
-    "@wrnexus/db": "^0.3.3",
-    "@wrnexus/plugin": "^0.3.3",
-    "@wrnexus/syntax": "^0.3.3"
+    "@wrnexus/core": "^0.3.4",
+    "@wrnexus/router": "^0.3.4",
+    "@wrnexus/csr": "^0.3.4",
+    "@wrnexus/compiler": "^0.3.4",
+    "@wrnexus/styles": "^0.3.4",
+    "@wrnexus/dev-server": "^0.3.4",
+    "@wrnexus/ui": "^0.3.4",
+    "@wrnexus/validation": "^0.3.4",
+    "@wrnexus/i18n": "^0.3.4",
+    "@wrnexus/db": "^0.3.4",
+    "@wrnexus/plugin": "^0.3.4",
+    "@wrnexus/syntax": "^0.3.4"
   },
   "files": [
     "dist"
diff --git a/.publish/compiler/package.json b/.publish/compiler/package.json
index 907bd150..ab9bc2f4 100644
--- a/.publish/compiler/package.json
+++ b/.publish/compiler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/compiler",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "@wrnexus/compiler — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/syntax": "^0.3.3"
+    "@wrnexus/syntax": "^0.3.4"
   },
   "files": [
     "dist"
diff --git a/.publish/core/package.json b/.publish/core/package.json
index d71fe40c..e6a72f84 100644
--- a/.publish/core/package.json
+++ b/.publish/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/core",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "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 8adabfe3..1daeafb7 100644
--- a/.publish/csr/package.json
+++ b/.publish/csr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/csr",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "@wrnexus/csr — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.3.3"
+    "@wrnexus/core": "^0.3.4"
   },
   "files": [
     "dist"
diff --git a/.publish/db/package.json b/.publish/db/package.json
index 275d7206..084c0939 100644
--- a/.publish/db/package.json
+++ b/.publish/db/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/db",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "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 3fc56209..7c45b3d7 100644
--- a/.publish/dev-server/package.json
+++ b/.publish/dev-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-server",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "@wrnexus/dev-server — part of the WrNexus framework.",
   "license": "MIT",
@@ -25,20 +25,20 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.3.3",
-    "@wrnexus/dev-toolbar": "^0.3.3",
-    "@wrnexus/router": "^0.3.3",
-    "@wrnexus/ssr": "^0.3.3",
-    "@wrnexus/csr": "^0.3.3",
-    "@wrnexus/compiler": "^0.3.3",
-    "@wrnexus/styles": "^0.3.3",
-    "@wrnexus/ui": "^0.3.3",
-    "@wrnexus/validation": "^0.3.3",
-    "@wrnexus/i18n": "^0.3.3",
-    "@wrnexus/db": "^0.3.3",
-    "@wrnexus/pubsub": "^0.3.3",
-    "@wrnexus/uploader": "^0.3.3",
-    "@wrnexus/plugin": "^0.3.3"
+    "@wrnexus/core": "^0.3.4",
+    "@wrnexus/dev-toolbar": "^0.3.4",
+    "@wrnexus/router": "^0.3.4",
+    "@wrnexus/ssr": "^0.3.4",
+    "@wrnexus/csr": "^0.3.4",
+    "@wrnexus/compiler": "^0.3.4",
+    "@wrnexus/styles": "^0.3.4",
+    "@wrnexus/ui": "^0.3.4",
+    "@wrnexus/validation": "^0.3.4",
+    "@wrnexus/i18n": "^0.3.4",
+    "@wrnexus/db": "^0.3.4",
+    "@wrnexus/pubsub": "^0.3.4",
+    "@wrnexus/uploader": "^0.3.4",
+    "@wrnexus/plugin": "^0.3.4"
   },
   "files": [
     "dist"
diff --git a/.publish/dev-toolbar/package.json b/.publish/dev-toolbar/package.json
index 8debb5ff..7f97d34a 100644
--- a/.publish/dev-toolbar/package.json
+++ b/.publish/dev-toolbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-toolbar",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "@wrnexus/dev-toolbar — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/.publish/encryption/package.json b/.publish/encryption/package.json
index 79870d23..4a533091 100644
--- a/.publish/encryption/package.json
+++ b/.publish/encryption/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/encryption",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "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 4976ddbb..4a9e465a 100644
--- a/.publish/helpers/package.json
+++ b/.publish/helpers/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/helpers",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "Safe convenience helpers for WrNexus request contexts and common application flows.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.3.3"
+    "@wrnexus/core": "^0.3.4"
   },
   "files": [
     "dist"
diff --git a/.publish/i18n/package.json b/.publish/i18n/package.json
index d1a35553..3ec12835 100644
--- a/.publish/i18n/package.json
+++ b/.publish/i18n/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/i18n",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "@wrnexus/i18n — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.3.3"
+    "@wrnexus/core": "^0.3.4"
   },
   "files": [
     "dist"
diff --git a/.publish/jwt/package.json b/.publish/jwt/package.json
index e19095f8..0aaba8bb 100644
--- a/.publish/jwt/package.json
+++ b/.publish/jwt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/jwt",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "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 8a86f743..1d5fcc09 100644
--- a/.publish/mobile/package.json
+++ b/.publish/mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/mobile",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "@wrnexus/mobile — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/native": "^0.3.3"
+    "@wrnexus/native": "^0.3.4"
   },
   "files": [
     "dist"
diff --git a/.publish/native/package.json b/.publish/native/package.json
index 1b583a08..7df3d4bb 100644
--- a/.publish/native/package.json
+++ b/.publish/native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/native",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "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 f682b0cd..d8be3c3b 100644
--- a/.publish/oauth/package.json
+++ b/.publish/oauth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/oauth",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "@wrnexus/oauth — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/.publish/plugin/package.json b/.publish/plugin/package.json
index c8ba135a..f6b98d88 100644
--- a/.publish/plugin/package.json
+++ b/.publish/plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/plugin",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "@wrnexus/plugin — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/syntax": "^0.3.3"
+    "@wrnexus/syntax": "^0.3.4"
   },
   "files": [
     "dist"
diff --git a/.publish/pubsub/package.json b/.publish/pubsub/package.json
index fe4c636f..7bd89f23 100644
--- a/.publish/pubsub/package.json
+++ b/.publish/pubsub/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/pubsub",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "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 61e83fdf..8c5ba981 100644
--- a/.publish/queue/package.json
+++ b/.publish/queue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/queue",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "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 97892da0..ba22581c 100644
--- a/.publish/reactive/package.json
+++ b/.publish/reactive/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/reactive",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "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 65d732c5..ea9ed237 100644
--- a/.publish/router/package.json
+++ b/.publish/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/router",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "@wrnexus/router — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,8 +21,8 @@
     }
   },
   "dependencies": {
-    "@wrnexus/compiler": "^0.3.3",
-    "@wrnexus/core": "^0.3.3"
+    "@wrnexus/compiler": "^0.3.4",
+    "@wrnexus/core": "^0.3.4"
   },
   "files": [
     "dist"
diff --git a/.publish/ssr/package.json b/.publish/ssr/package.json
index 96613eb3..bcbc663c 100644
--- a/.publish/ssr/package.json
+++ b/.publish/ssr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ssr",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "@wrnexus/ssr — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.3.3"
+    "@wrnexus/core": "^0.3.4"
   },
   "files": [
     "dist"
diff --git a/.publish/styles/package.json b/.publish/styles/package.json
index 1e3f7676..f50a3856 100644
--- a/.publish/styles/package.json
+++ b/.publish/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/styles",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "@wrnexus/styles — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,9 +21,9 @@
     }
   },
   "dependencies": {
-    "@wrnexus/uploader": "^0.3.3",
-    "@wrnexus/core": "^0.3.3",
-    "@wrnexus/plugin": "^0.3.3"
+    "@wrnexus/uploader": "^0.3.4",
+    "@wrnexus/core": "^0.3.4",
+    "@wrnexus/plugin": "^0.3.4"
   },
   "files": [
     "dist"
diff --git a/.publish/syntax/package.json b/.publish/syntax/package.json
index 7e20c376..cca20f91 100644
--- a/.publish/syntax/package.json
+++ b/.publish/syntax/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/syntax",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "@wrnexus/syntax — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/.publish/test/package.json b/.publish/test/package.json
index fd832e23..967d74bf 100644
--- a/.publish/test/package.json
+++ b/.publish/test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/test",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "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 6a20aacc..eee41a03 100644
--- a/.publish/tracking/package.json
+++ b/.publish/tracking/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/tracking",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "@wrnexus/tracking — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/.publish/ui/COMPONENTS.md b/.publish/ui/COMPONENTS.md
index ae885d92..3b2817cd 100644
--- a/.publish/ui/COMPONENTS.md
+++ b/.publish/ui/COMPONENTS.md
@@ -1,6 +1,6 @@
 # WRNexus UI component reference
 
-This reference is generated from the 901 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default.
+This reference is generated from the 902 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default.
 
 ## Actions
 
@@ -45,8 +45,8 @@ Reusable back button component.
 Reusable button component.
 
 - Mount: `data-component="Button"`
-- Props: `label: string = "Button"`, `type: string = "button"`, `variant: string = "primary"`, `size: string = "md"`, `disabled: boolean = false`, `loading: boolean = false`, `icon: string = ""`, `className: string = ""`
-- Slots: None
+- Props: `label: string = "Button"`, `type: string = "button"`, `variant: string = "primary"`, `size: string = "md"`, `disabled: boolean = false`, `loading: boolean = false`, `icon: string = ""`, `iconPosition: string = "start"`, `fullWidth: boolean = false`, `className: string = ""`
+- Slots: `default`
 - Events: None
 
 ### CenteredCTA
@@ -225,7 +225,7 @@ Reusable field actions component.
 Reusable final c t a component.
 
 - Mount: `data-component="FinalCTA"`
-- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""`
+- Props: `label: string = "Get started"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""`
 - Slots: `default`
 - Events: None
 
@@ -992,7 +992,7 @@ Reusable certificate upload component.
 Reusable channel card component.
 
 - Mount: `data-component="ChannelCard"`
-- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = "icon-[lucide--radio-tower]"`, `class: string = ""`
+- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = ""`, `actionLabel: string = ""`, `class: string = ""`
 - Slots: `default`
 - Events: None
 
@@ -1046,16 +1046,16 @@ Reusable code component.
 Reusable code block component.
 
 - Mount: `data-component="CodeBlock"`
-- Props: `class: string = ""`, `language: string = "text"`, `filename: string = ""`, `code: string = ""`
+- Props: `language: string = "text"`, `title: string = ""`, `code: string = ""`, `copyable: boolean = true`, `class: string = ""`
 - Slots: None
-- Events: `click`
+- Events: None
 
 ### CodeTabs
 
 Reusable code tabs component.
 
 - Mount: `data-component="CodeTabs"`
-- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""`
+- Props: `class: string = ""`
 - Slots: `default`
 - Events: None
 
@@ -2126,7 +2126,7 @@ Reusable pricing contact form component.
 Reusable pricing plan card component.
 
 - Mount: `data-component="PricingPlanCard"`
-- Props: `class: string = ""`, `name: string = "Starter"`, `description: string = ""`, `price: string = "₹0"`, `period: string = "/month"`, `featured: boolean = false`, `ctaLabel: string = "Choose plan"`, `ctaHref: string = "#"`
+- Props: `class: string = ""`, `name: string = "Starter"`, `description: string = ""`, `price: string = "₹0"`, `period: string = "/month"`, `featured: boolean = false`, `badgeLabel: string = "Most popular"`, `ctaLabel: string = "Choose plan"`, `ctaHref: string = "#"`
 - Slots: `default`
 - Events: None
 
@@ -2135,7 +2135,7 @@ Reusable pricing plan card component.
 Reusable product card component.
 
 - Mount: `data-component="ProductCard"`
-- Props: `eyebrow: string = "Product"`, `title: string = "Product name"`, `description: string = ""`, `href: string = "#"`, `actionLabel: string = "Learn more"`, `status: string = ""`, `class: string = ""`
+- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `status: string = ""`, `class: string = ""`
 - Slots: None
 - Events: None
 
@@ -2947,7 +2947,7 @@ Reusable chip component.
 Reusable cluster component.
 
 - Mount: `data-component="Cluster"`
-- Props: `gap: string = "4"`, `className: string = ""`
+- Props: `class: string = ""`
 - Slots: `default`
 - Events: None
 
@@ -3320,6 +3320,15 @@ Reusable section heading component.
 - Slots: `default`
 - Events: None
 
+### SegmentedButtonGroup
+
+Reusable segmented button group component.
+
+- Mount: `data-component="SegmentedButtonGroup"`
+- Props: `label: string = "Options"`, `items: string = []`, `active: string = ""`, `size: string = "md"`, `fullWidth: boolean = false`, `class: string = ""`
+- Slots: None
+- Events: `click`
+
 ### Select
 
 Reusable select component.
@@ -3894,7 +3903,7 @@ Reusable member list component.
 Reusable metric grid component.
 
 - Mount: `data-component="MetricGrid"`
-- Props: `label: string = "Key metrics"`, `metrics: string = []`, `class: string = ""`
+- Props: `label: string = "Platform metrics"`, `metrics: string = []`, `compact: boolean = false`, `columns: number = 4`, `class: string = ""`
 - Slots: None
 - Events: None
 
@@ -3957,7 +3966,7 @@ Reusable policy version table component.
 Reusable pricing comparison table component.
 
 - Mount: `data-component="PricingComparisonTable"`
-- Props: `caption: string = "Plan comparison"`, `plans: string = []`, `features: string = []`, `class: string = ""`
+- Props: `caption: string = "Plan comparison"`, `plans: string = []`, `features: string = []`, `featuredPlan: string = ""`, `class: string = ""`
 - Slots: None
 - Events: None
 
@@ -4146,7 +4155,7 @@ Reusable subprocessor table component.
 Reusable table component.
 
 - Mount: `data-component="Table"`
-- Props: `class: string = ""`, `caption: string = "Data table"`, `responsive: boolean = true`
+- Props: `class: string = ""`, `caption: string = "Data table"`, `responsive: boolean = true`, `striped: boolean = false`, `hoverable: boolean = true`, `compact: boolean = false`
 - Slots: `default`
 - Events: None
 
@@ -4256,7 +4265,7 @@ Reusable api version badge component.
 Reusable badge component.
 
 - Mount: `data-component="Badge"`
-- Props: `class: string = ""`, `label: string = ""`, `variant: string = "neutral"`
+- Props: `class: string = ""`, `label: string = ""`, `variant: string = "neutral"`, `size: string = "md"`
 - Slots: `default`
 - Events: None
 
@@ -4661,8 +4670,8 @@ Reusable privacy notice component.
 Reusable product status badge component.
 
 - Mount: `data-component="ProductStatusBadge"`
-- Props: `label: string = "ProductStatus"`, `variant: string = "default"`, `class: string = ""`
-- Slots: `default`
+- Props: `label: string = "Available"`, `status: string = ""`, `class: string = ""`
+- Slots: None
 - Events: None
 
 ### RateLimitedState
@@ -7765,8 +7774,8 @@ Reusable channel fallback diagram component.
 Reusable channel flow component.
 
 - Mount: `data-component="ChannelFlow"`
-- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""`
-- Slots: `default`
+- Props: `class: string = ""`
+- Slots: None
 - Events: None
 
 ### ChecklistProgress
diff --git a/.publish/ui/component-reference.json b/.publish/ui/component-reference.json
index a888af63..df0ae73b 100644
--- a/.publish/ui/component-reference.json
+++ b/.publish/ui/component-reference.json
@@ -1,6 +1,6 @@
 {
   "generatedFrom": "packages/ui/components/*.wrn",
-  "count": 901,
+  "count": 902,
   "components": [
     {
       "name": "AcceptAllCookiesButton",
@@ -3604,6 +3604,12 @@
           "type": "string",
           "required": false,
           "default": "\"neutral\""
+        },
+        {
+          "name": "size",
+          "type": "string",
+          "required": false,
+          "default": "\"md\""
         }
       ],
       "slots": ["default"],
@@ -4914,6 +4920,18 @@
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "iconPosition",
+          "type": "string",
+          "required": false,
+          "default": "\"start\""
+        },
+        {
+          "name": "fullWidth",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
         {
           "name": "className",
           "type": "string",
@@ -4921,7 +4939,7 @@
           "default": "\"\""
         }
       ],
-      "slots": [],
+      "slots": ["default"],
       "events": [],
       "source": "components/Button.wrn"
     },
@@ -6490,7 +6508,13 @@
           "name": "icon",
           "type": "string",
           "required": false,
-          "default": "\"icon-[lucide--radio-tower]\""
+          "default": "\"\""
+        },
+        {
+          "name": "actionLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
         },
         {
           "name": "class",
@@ -6644,36 +6668,6 @@
       "category": "visualization",
       "purpose": "Reusable channel flow component.",
       "props": [
-        {
-          "name": "title",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
-        {
-          "name": "value",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
-        {
-          "name": "description",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
-        {
-          "name": "summary",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
-        {
-          "name": "loading",
-          "type": "boolean",
-          "required": false,
-          "default": "false"
-        },
         {
           "name": "class",
           "type": "string",
@@ -6681,7 +6675,7 @@
           "default": "\"\""
         }
       ],
-      "slots": ["default"],
+      "slots": [],
       "events": [],
       "source": "components/ChannelFlow.wrn"
     },
@@ -7605,13 +7599,7 @@
       "purpose": "Reusable cluster component.",
       "props": [
         {
-          "name": "gap",
-          "type": "string",
-          "required": false,
-          "default": "\"4\""
-        },
-        {
-          "name": "className",
+          "name": "class",
           "type": "string",
           "required": false,
           "default": "\"\""
@@ -7686,12 +7674,6 @@
       "category": "content",
       "purpose": "Reusable code block component.",
       "props": [
-        {
-          "name": "class",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
         {
           "name": "language",
           "type": "string",
@@ -7699,7 +7681,7 @@
           "default": "\"text\""
         },
         {
-          "name": "filename",
+          "name": "title",
           "type": "string",
           "required": false,
           "default": "\"\""
@@ -7709,10 +7691,22 @@
           "type": "string",
           "required": false,
           "default": "\"\""
+        },
+        {
+          "name": "copyable",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "class",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
         }
       ],
       "slots": [],
-      "events": ["click"],
+      "events": [],
       "source": "components/CodeBlock.wrn"
     },
     {
@@ -7933,48 +7927,6 @@
       "category": "content",
       "purpose": "Reusable code tabs component.",
       "props": [
-        {
-          "name": "eyebrow",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
-        {
-          "name": "title",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
-        {
-          "name": "description",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
-        {
-          "name": "href",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
-        {
-          "name": "actionLabel",
-          "type": "string",
-          "required": false,
-          "default": "\"Learn more\""
-        },
-        {
-          "name": "image",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
-        {
-          "name": "alt",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
         {
           "name": "class",
           "type": "string",
@@ -17783,7 +17735,7 @@
           "name": "label",
           "type": "string",
           "required": false,
-          "default": "\"Action\""
+          "default": "\"Get started\""
         },
         {
           "name": "href",
@@ -26760,7 +26712,7 @@
           "name": "label",
           "type": "string",
           "required": false,
-          "default": "\"Key metrics\""
+          "default": "\"Platform metrics\""
         },
         {
           "name": "metrics",
@@ -26768,6 +26720,18 @@
           "required": false,
           "default": "[]"
         },
+        {
+          "name": "compact",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "columns",
+          "type": "number",
+          "required": false,
+          "default": "4"
+        },
         {
           "name": "class",
           "type": "string",
@@ -31831,6 +31795,12 @@
           "required": false,
           "default": "[]"
         },
+        {
+          "name": "featuredPlan",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
         {
           "name": "class",
           "type": "string",
@@ -32102,6 +32072,12 @@
           "required": false,
           "default": "false"
         },
+        {
+          "name": "badgeLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"Most popular\""
+        },
         {
           "name": "ctaLabel",
           "type": "string",
@@ -32547,13 +32523,13 @@
           "name": "eyebrow",
           "type": "string",
           "required": false,
-          "default": "\"Product\""
+          "default": "\"\""
         },
         {
           "name": "title",
           "type": "string",
           "required": false,
-          "default": "\"Product name\""
+          "default": "\"\""
         },
         {
           "name": "description",
@@ -32565,7 +32541,7 @@
           "name": "href",
           "type": "string",
           "required": false,
-          "default": "\"#\""
+          "default": "\"\""
         },
         {
           "name": "actionLabel",
@@ -33269,13 +33245,13 @@
           "name": "label",
           "type": "string",
           "required": false,
-          "default": "\"ProductStatus\""
+          "default": "\"Available\""
         },
         {
-          "name": "variant",
+          "name": "status",
           "type": "string",
           "required": false,
-          "default": "\"default\""
+          "default": "\"\""
         },
         {
           "name": "class",
@@ -33284,7 +33260,7 @@
           "default": "\"\""
         }
       ],
-      "slots": ["default"],
+      "slots": [],
       "events": [],
       "source": "components/ProductStatusBadge.wrn"
     },
@@ -39570,6 +39546,53 @@
       "events": [],
       "source": "components/SecurityReportForm.wrn"
     },
+    {
+      "name": "SegmentedButtonGroup",
+      "mount": "SegmentedButtonGroup",
+      "category": "core",
+      "purpose": "Reusable segmented button group component.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "required": false,
+          "default": "\"Options\""
+        },
+        {
+          "name": "items",
+          "type": "string",
+          "required": false,
+          "default": "[]"
+        },
+        {
+          "name": "active",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "size",
+          "type": "string",
+          "required": false,
+          "default": "\"md\""
+        },
+        {
+          "name": "fullWidth",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "class",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        }
+      ],
+      "slots": [],
+      "events": ["click"],
+      "source": "components/SegmentedButtonGroup.wrn"
+    },
     {
       "name": "Select",
       "mount": "Select",
@@ -42991,6 +43014,24 @@
           "type": "boolean",
           "required": false,
           "default": "true"
+        },
+        {
+          "name": "striped",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "hoverable",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "compact",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
         }
       ],
       "slots": ["default"],
diff --git a/.publish/ui/components/AnalyticsDashboardPreview.wrn b/.publish/ui/components/AnalyticsDashboardPreview.wrn
index 3bdef32a..a647c5d8 100644
--- a/.publish/ui/components/AnalyticsDashboardPreview.wrn
+++ b/.publish/ui/components/AnalyticsDashboardPreview.wrn
@@ -11,59 +11,71 @@ component AnalyticsDashboardPreview {
   }
 
   view {
-    <section class="px-4 py-10 sm:px-6 sm:py-12 lg:px-8 lg:py-14 {class}">
-      <div
-        class="mx-auto grid w-full max-w-7xl gap-8 overflow-hidden rounded-3xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-5 shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.08))] sm:p-7 lg:grid-cols-[minmax(0,1.15fr)_minmax(20rem,0.85fr)] lg:items-center lg:p-8"
-      >
-        <div>
+    <section class="wire-analytics-preview {class}">
+      <div class="wire-analytics-preview__surface">
+        <div class="wire-analytics-preview__visual">
           {#if image}
-          <img
-            src="{image}"
-            alt="{alt}"
-            class="aspect-[16/9] w-full rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] object-cover"
-          />
+            <img
+              src="{image}"
+              alt="{alt}"
+              class="wire-analytics-preview__image"
+            />
           {:else}
-          <div
-            class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-2,#f8fafc)] p-4 sm:p-5"
-            role="img"
-            aria-label="Delivery trend rising over seven days"
-          >
-            <div class="flex items-center justify-between gap-4 text-sm">
-              <strong class="text-[var(--wire-color-text,#0f172a)]">Delivery trend</strong>
-              <span class="font-bold text-[var(--wire-color-success,#059669)]">↗ 18.4%</span>
-            </div>
-            <svg
-              class="mt-4 h-auto w-full text-[var(--wire-color-primary,#059669)]"
-              viewBox="0 0 700 250"
-              aria-hidden="true"
+            <div
+              class="wire-analytics-preview__chart"
+              role="img"
+              aria-label="Delivery trend rising over seven days"
             >
-              <defs>
-                <linearGradient
-                  id="wire-analytics-area"
-                  x1="0"
-                  y1="0"
-                  x2="0"
-                  y2="1"
-                >
-                  <stop offset="0%" stop-color="currentColor" stop-opacity=".24"></stop>
-                  <stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop>
-                </linearGradient>
-              </defs>
-              <g fill="none" stroke="var(--wire-color-border,#e2e8f0)"><path d="M20 50H680M20 115H680M20 180H680M20 230H680"></path></g>
-              <path fill="url(#wire-analytics-area)" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32 L680 230 L20 230Z"></path>
-              <path fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32"></path>
-            </svg>
-            <div class="mt-2 flex justify-between text-[0.7rem] text-[var(--wire-color-muted,#64748b)]"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>
-          </div>
+              <div class="wire-analytics-preview__chart-header">
+                <strong>Delivery trend</strong>
+                <span>↗ 18.4%</span>
+              </div>
+
+              <svg
+                class="wire-analytics-preview__chart-svg"
+                viewBox="0 0 700 250"
+                aria-hidden="true"
+              >
+                <defs>
+                  <linearGradient id="wire-analytics-area" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stop-color="currentColor" stop-opacity=".3"></stop>
+                    <stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop>
+                  </linearGradient>
+                </defs>
+                <g fill="none" stroke="var(--wire-color-border,#e2e8f0)">
+                  <path d="M20 50H680M20 115H680M20 180H680M20 230H680"></path>
+                </g>
+                <path fill="url(#wire-analytics-area)" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32 L680 230 L20 230Z"></path>
+                <path fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32"></path>
+              </svg>
+
+              <div class="wire-analytics-preview__days">
+                <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
+              </div>
+            </div>
           {/if}
         </div>
 
-        <div>
-          {#if eyebrow}<p class="m-0 text-xs font-bold uppercase tracking-[0.16em] text-[var(--wire-color-primary,#059669)]">{eyebrow}</p>{/if}
-          {#if title}<h2 class="mt-4 text-3xl font-semibold tracking-[-0.035em] text-[var(--wire-color-text,#0f172a)]">{title}</h2>{/if}
-          {#if description}<p class="mt-4 leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
-          <div class="mt-5"><slot /></div>
-          {#if href}<a href="{href}" class="mt-6 inline-flex items-center gap-2 font-semibold text-[var(--wire-color-primary,#059669)] no-underline">{actionLabel}<span aria-hidden="true">→</span></a>{/if}
+        <div class="wire-analytics-preview__content">
+          {#if eyebrow}
+            <p class="wire-analytics-preview__eyebrow">{eyebrow}</p>
+          {/if}
+
+          {#if title}
+            <h2 class="wire-analytics-preview__title">{title}</h2>
+          {/if}
+
+          {#if description}
+            <p class="wire-analytics-preview__description">{description}</p>
+          {/if}
+
+          <div class="wire-analytics-preview__metrics"><slot /></div>
+
+          {#if href}
+            <a href="{href}" class="wire-analytics-preview__action">
+              {actionLabel}<span aria-hidden="true">→</span>
+            </a>
+          {/if}
         </div>
       </div>
     </section>
diff --git a/.publish/ui/components/MetricGrid.wrn b/.publish/ui/components/MetricGrid.wrn
index 536ad57a..f46510bf 100644
--- a/.publish/ui/components/MetricGrid.wrn
+++ b/.publish/ui/components/MetricGrid.wrn
@@ -2,26 +2,32 @@ component MetricGrid {
   props {
     label = "Platform metrics"
     metrics = []
+    compact = false
+    columns = 4
     class = ""
   }
 
   view {
-    <section class="px-4 sm:px-6 lg:px-8 {class}" aria-label="{label}">
-      <div class="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+    <section
+      class="wire-metric-grid-shell {compact ? 'wire-metric-grid-shell--compact' : ''} {class}"
+      aria-label="{label}"
+    >
+      <div
+        class="wire-metric-grid"
+        class:wire-metric-grid--compact='{compact}'
+        data-columns="{columns}"
+      >
         {#each metrics as metric}
-          <article class="flex min-h-40 flex-col justify-center rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-6 shadow-[var(--wire-shadow-1,0_1px_2px_rgb(0_0_0/0.05))]">
-            <strong class="text-3xl font-semibold leading-none tracking-[-0.04em] text-[var(--wire-color-text,#0f172a)] sm:text-4xl">
-              {metric.value}
-            </strong>
-            <span class="mt-4 font-semibold text-[var(--wire-color-text,#0f172a)]">{metric.label}</span>
+          <article class="wire-metric-card" class:wire-metric-card--compact='{compact}'>
+            <strong class="wire-metric-card__value">{metric.value}</strong>
+            <span class="wire-metric-card__label">{metric.label}</span>
+
             {#if metric.description}
-              <p class="mt-2 text-sm leading-6 text-[var(--wire-color-muted,#64748b)]">{metric.description}</p>
+              <p class="wire-metric-card__description">{metric.description}</p>
             {/if}
           </article>
         {:empty}
-          <p class="col-span-full rounded-2xl border border-dashed border-[var(--wire-color-border,#e2e8f0)] p-8 text-center text-[var(--wire-color-muted,#64748b)]">
-            No metrics available.
-          </p>
+          <p class="wire-metric-grid__empty">No metrics available.</p>
         {/each}
       </div>
     </section>
diff --git a/.publish/ui/components/SegmentedButtonGroup.wrn b/.publish/ui/components/SegmentedButtonGroup.wrn
new file mode 100644
index 00000000..65cdbc6b
--- /dev/null
+++ b/.publish/ui/components/SegmentedButtonGroup.wrn
@@ -0,0 +1,44 @@
+component SegmentedButtonGroup {
+  props {
+    label = "Options"
+    items = []
+    active = ""
+    size = "md"
+    fullWidth = false
+    class = ""
+  }
+
+  state current = active
+
+  view {
+    <div
+      class="wire-segmented-group {fullWidth ? 'wire-segmented-group--full' : ''} wire-segmented-group--{size} {class}"
+      role="tablist"
+      aria-label="{label}"
+    >
+      {#each items as item, index}
+        <button
+          type="button"
+          role="tab"
+          aria-selected="{current === item.value}"
+          disabled="{item.disabled}"
+          class="wire-segmented-group__button"
+          class:wire-segmented-group__button--active='{current === item.value}'
+          @click="current = item.value"
+        >
+          {#if item.icon}
+            <span class="wire-segmented-group__icon {item.icon}" aria-hidden="true"></span>
+          {/if}
+
+          <span class="wire-segmented-group__label">{item.label}</span>
+
+          {#if item.badge}
+            <span class="wire-segmented-group__badge">{item.badge}</span>
+          {/if}
+        </button>
+      {:empty}
+        <span class="wire-segmented-group__empty">No options available</span>
+      {/each}
+    </div>
+  }
+}
diff --git a/.publish/ui/package.json b/.publish/ui/package.json
index 8c2b8a02..70356c5f 100644
--- a/.publish/ui/package.json
+++ b/.publish/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "@wrnexus/ui — part of the WrNexus framework.",
   "license": "MIT",
@@ -25,7 +25,7 @@
     "./ui.css": "./ui.css"
   },
   "dependencies": {
-    "@wrnexus/core": "^0.3.3"
+    "@wrnexus/core": "^0.3.4"
   },
   "files": [
     "dist",
diff --git a/.publish/ui/ui.css b/.publish/ui/ui.css
index 44950f06..c57b35ad 100644
--- a/.publish/ui/ui.css
+++ b/.publish/ui/ui.css
@@ -1820,367 +1820,423 @@
   }
 }
 
-/* --- Theme-safe pricing, action, badge, table and channel refinements ------ */
-:where([data-wrn-component]) {
+/* --- Segmented button group --------------------------------------------- */
+.wire-segmented-group {
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(max-content, 1fr);
+  align-items: stretch;
+  gap: 0.25rem;
+  max-width: 100%;
+  padding: 0.3rem;
+  overflow-x: auto;
   color: var(--wire-color-text);
-  font-family: var(--wire-font-sans);
-}
-
-.wire-page-shell {
-  min-height: 100%;
-  background: var(--wire-color-bg);
-  color: var(--wire-color-text);
-}
-
-.wire-section {
-  padding-block: var(--wire-space-section-sm, 3.5rem);
-}
-
-@media (min-width: 1024px) {
-  .wire-section {
-    padding-block: var(--wire-space-section, 5rem);
-  }
-}
-
-.wire-container {
-  max-width: var(--wire-container-max, 80rem);
-  padding-inline: clamp(1rem, 2.5vw, 2rem);
-}
-
-.wire-btn {
-  min-height: 2.75rem;
-  border-radius: 0.75rem;
-  padding-inline: 1rem;
-  font-size: 0.875rem;
-  font-weight: 650;
-  letter-spacing: -0.01em;
-  box-shadow: none;
-}
-
-.wire-btn--primary {
-  border-color: var(--wire-color-primary);
-  background: var(--wire-color-primary);
-  color: var(--wire-color-primary-contrast);
-  box-shadow: var(--wire-shadow-sm, var(--wire-shadow-1));
-}
-
-.wire-btn--primary:hover:not(:disabled) {
-  border-color: var(--wire-color-primary-hover);
-  background: var(--wire-color-primary-hover);
-  color: var(--wire-color-primary-contrast);
-  transform: translateY(-1px);
-  box-shadow: var(--wire-shadow-md, var(--wire-shadow-1));
-}
-
-.wire-btn--secondary,
-.wire-btn--default {
-  border-color: var(--wire-color-border-strong, var(--wire-color-border));
-  background: var(--wire-color-surface);
-  color: var(--wire-color-text);
-  box-shadow: var(--wire-shadow-sm, var(--wire-shadow-1));
-}
-
-.wire-btn--secondary:hover:not(:disabled),
-.wire-btn--default:hover:not(:disabled) {
-  border-color: var(--wire-color-primary);
-  background: var(--wire-color-surface-2);
-  color: var(--wire-color-primary);
-  transform: translateY(-1px);
-}
-
-.wire-btn--ghost {
-  border-color: transparent;
-  background: transparent;
-  color: var(--wire-color-text);
-}
-
-.wire-btn--ghost:hover:not(:disabled) {
-  border-color: var(--wire-color-border);
-  background: var(--wire-color-surface-2);
-  color: var(--wire-color-primary);
-}
-
-.wire-btn--danger {
-  border-color: var(--wire-color-danger);
-  background: var(--wire-color-danger);
-  color: #fff;
-}
-
-.wire-btn--danger:hover:not(:disabled) {
-  filter: brightness(0.94);
-  transform: translateY(-1px);
-}
-
-.wire-btn--sm {
-  min-height: 2.25rem;
-  padding: 0.45rem 0.75rem;
-  font-size: 0.8125rem;
-}
-
-.wire-btn--md {
-  min-height: 2.75rem;
-  padding: 0.625rem 1rem;
-}
-
-.wire-btn--lg {
-  min-height: 3rem;
-  padding: 0.75rem 1.25rem;
-  font-size: 0.9375rem;
-}
-
-.wire-badge {
-  display: inline-flex;
-  width: fit-content;
-  align-items: center;
-  gap: 0.375rem;
+  background: color-mix(in srgb, var(--wire-color-surface-2) 86%, transparent);
   border: 1px solid var(--wire-color-border);
-  border-radius: 9999px;
-  background: var(--wire-color-surface-2);
-  color: var(--wire-color-text-muted, var(--wire-color-muted));
-  font-weight: 650;
+  border-radius: calc(var(--wire-radius-sm) + 0.25rem);
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, var(--wire-color-text) 4%, transparent),
+    var(--wire-shadow-1);
+  scrollbar-width: none;
+}
+
+.wire-segmented-group::-webkit-scrollbar {
+  display: none;
+}
+
+.wire-segmented-group--full {
+  display: grid;
+  width: 100%;
+}
+
+.wire-segmented-group__button {
+  position: relative;
+  isolation: isolate;
+  display: inline-flex;
+  min-width: 0;
+  min-height: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  padding: 0.55rem 0.9rem;
+  overflow: hidden;
+  color: var(--wire-color-muted);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--wire-radius-sm);
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 700;
   line-height: 1;
   white-space: nowrap;
+  cursor: pointer;
+  transition:
+    color var(--wire-motion-base) var(--wire-ease-standard),
+    background-color var(--wire-motion-base) var(--wire-ease-standard),
+    border-color var(--wire-motion-base) var(--wire-ease-standard),
+    box-shadow var(--wire-motion-base) var(--wire-ease-standard),
+    transform var(--wire-motion-base) var(--wire-ease-emphasized);
 }
 
-.wire-badge--sm {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.6875rem;
-}
-
-.wire-badge--md {
-  padding: 0.375rem 0.625rem;
-  font-size: 0.75rem;
-}
-
-.wire-badge--lg {
-  padding: 0.45rem 0.75rem;
-  font-size: 0.8125rem;
-}
-
-.wire-badge--neutral {
-  border-color: var(--wire-color-border);
-  background: var(--wire-color-surface-2);
-  color: var(--wire-color-text-muted, var(--wire-color-muted));
-}
-
-.wire-badge--brand {
-  border-color: color-mix(in srgb, var(--wire-color-primary) 30%, transparent);
-  background: var(--wire-color-primary-soft);
-  color: var(--wire-color-primary);
-}
-
-.wire-badge--success {
-  border-color: color-mix(in srgb, var(--wire-color-success) 30%, transparent);
-  background: var(
-    --wire-color-success-soft,
-    color-mix(in srgb, var(--wire-color-success) 12%, transparent)
-  );
-  color: var(--wire-color-success);
-}
-
-.wire-badge--warning {
-  border-color: color-mix(in srgb, var(--wire-color-warning) 30%, transparent);
-  background: var(
-    --wire-color-warning-soft,
-    color-mix(in srgb, var(--wire-color-warning) 12%, transparent)
-  );
-  color: var(--wire-color-warning);
-}
-
-.wire-badge--danger {
-  border-color: color-mix(in srgb, var(--wire-color-danger) 30%, transparent);
-  background: var(
-    --wire-color-danger-soft,
-    color-mix(in srgb, var(--wire-color-danger) 12%, transparent)
-  );
-  color: var(--wire-color-danger);
-}
-
-.wire-table-wrap {
-  width: 100%;
-  max-width: 100%;
-  overflow-x: auto;
-  scrollbar-gutter: stable;
-  border: 1px solid var(--wire-color-border);
-  border-radius: var(--wire-radius, 1rem);
-  background: var(--wire-color-surface);
-}
-
-.wire-table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  background: var(--wire-color-surface);
-  color: var(--wire-color-text);
-  font-size: 0.875rem;
-}
-
-.wire-table th,
-.wire-table td {
-  padding: 1rem 1.25rem;
-  border-bottom: 1px solid var(--wire-color-border);
-  vertical-align: middle;
-}
-
-.wire-table thead th {
-  background: var(--wire-color-surface-2);
-  color: var(--wire-color-text);
-  font-size: 0.75rem;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-.wire-table tbody th {
-  color: var(--wire-color-text);
-  font-weight: 650;
-}
-
-.wire-table tbody td {
-  color: var(--wire-color-text-muted, var(--wire-color-muted));
-}
-
-.wire-table tbody tr:last-child > * {
-  border-bottom: 0;
-}
-
-.wire-table--hoverable tbody tr:hover > *,
-.wire-comparison-table tbody tr:hover > * {
-  background: var(--wire-color-surface-2);
-}
-
-.wire-table--striped tbody tr:nth-child(even) > * {
-  background: color-mix(in srgb, var(--wire-color-surface-2) 72%, transparent);
-}
-
-.wire-table--compact th,
-.wire-table--compact td {
-  padding: 0.7rem 0.9rem;
-}
-
-.wire-comparison-table th:not(:first-child),
-.wire-comparison-table td:not(:first-child) {
-  text-align: center;
-}
-
-.wire-comparison-table thead th:first-child,
-.wire-comparison-table tbody th {
-  position: sticky;
-  left: 0;
-  z-index: 1;
-  background: var(--wire-color-surface);
-}
-
-.wire-comparison-table thead th:first-child {
-  z-index: 2;
-  background: var(--wire-color-surface-2);
-}
-
-.wire-channel-card {
-  isolation: isolate;
-}
-
-.wire-channel-card__icon {
-  position: relative;
-  overflow: hidden;
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wire-color-primary) 5%, transparent);
-}
-
-.wire-channel-card__icon::after {
+.wire-segmented-group__button::before {
   content: "";
   position: absolute;
-  inset: auto -0.5rem -0.75rem auto;
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--wire-color-primary) 14%, transparent);
-  pointer-events: none;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--wire-color-surface);
+  box-shadow: var(--wire-shadow-1);
+  opacity: 0;
+  transform: scale(0.88);
+  transition:
+    opacity var(--wire-motion-base) var(--wire-ease-standard),
+    transform var(--wire-motion-slow) var(--wire-ease-emphasized);
 }
 
-.wire-channel-card__icon > span {
-  position: relative;
-  z-index: 1;
-  display: block;
-  width: 1.25rem;
-  height: 1.25rem;
+.wire-segmented-group__button:hover:not(:disabled) {
+  color: var(--wire-color-text);
+  background: color-mix(in srgb, var(--wire-color-surface) 65%, transparent);
+}
+
+.wire-segmented-group__button--active {
+  color: var(--wire-color-text);
+  border-color: color-mix(in srgb, var(--wire-color-primary) 22%, var(--wire-color-border));
+  transform: translateY(-1px);
+}
+
+.wire-segmented-group__button--active::before {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.wire-segmented-group__button--active .wire-segmented-group__label {
+  animation: wire-segmented-label-in var(--wire-motion-slow) var(--wire-ease-emphasized) both;
+}
+
+.wire-segmented-group__button:focus-visible {
+  outline: 2px solid var(--wire-color-primary);
+  outline-offset: 1px;
+}
+
+.wire-segmented-group__button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.wire-segmented-group__badge {
+  display: inline-flex;
+  min-height: 1.35rem;
+  align-items: center;
+  padding: 0.15rem 0.45rem;
+  color: var(--wire-color-success);
+  background: color-mix(in srgb, var(--wire-color-success) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--wire-color-success) 22%, transparent);
+  border-radius: 999px;
+  font-size: 0.7rem;
+  font-weight: 800;
+}
+
+.wire-segmented-group__icon {
+  width: 1rem;
+  height: 1rem;
+  flex: none;
   color: currentColor;
 }
 
-.wire-channel-card__icon > span::before {
-  display: block;
-  width: 100%;
-  height: 100%;
+.wire-segmented-group--sm .wire-segmented-group__button {
+  min-height: 2.15rem;
+  padding: 0.4rem 0.7rem;
+  font-size: 0.8rem;
 }
 
-/* --- Channel card --------------------------------------------------------- */
+.wire-segmented-group--lg .wire-segmented-group__button {
+  min-height: 3rem;
+  padding: 0.7rem 1.15rem;
+  font-size: 0.95rem;
+}
 
-.wire-channel-card__icon {
+.wire-segmented-group__empty {
+  padding: 0.65rem 0.9rem;
+  color: var(--wire-color-muted);
+  font-size: 0.875rem;
+}
+
+@keyframes wire-segmented-label-in {
+  from {
+    opacity: 0.68;
+    transform: translateY(3px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* --- Analytics dashboard preview ---------------------------------------- */
+.wire-analytics-preview {
+  width: 100%;
+  min-width: 0;
+}
+
+.wire-analytics-preview__surface {
   display: grid;
-  width: 3rem;
-  height: 3rem;
-  flex: 0 0 3rem;
-  place-items: center;
-  overflow: hidden;
-
-  color: color-mix(in srgb, var(--wire-color-primary) 72%, var(--wire-color-text));
-
-  border: 1px solid color-mix(in srgb, var(--wire-color-primary) 38%, var(--wire-color-border));
-
-  border-radius: 0.875rem;
-
-  background: linear-gradient(
-    145deg,
-    color-mix(in srgb, var(--wire-color-primary) 18%, var(--wire-color-surface)),
-    color-mix(in srgb, var(--wire-color-primary) 8%, var(--wire-color-surface-2))
-  );
-
-  box-shadow:
-    inset 0 1px 0 color-mix(in srgb, var(--wire-color-text) 8%, transparent),
-    0 0.75rem 1.75rem color-mix(in srgb, var(--wire-color-primary) 12%, transparent);
-}
-
-.wire-channel-card__icon-glyph {
-  display: block;
-  width: 1.5rem;
-  height: 1.5rem;
-  color: inherit;
-  font-size: 1.5rem;
-  line-height: 1;
-}
-
-.wire-channel-card__icon-glyph::before {
-  display: block;
+  grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr);
+  gap: clamp(1.5rem, 4vw, 3.5rem);
+  align-items: center;
   width: 100%;
-  height: 100%;
-  color: inherit;
+  min-width: 0;
+  padding: clamp(1.25rem, 3vw, 2rem);
+  overflow: hidden;
+  color: var(--wire-color-text);
+  background:
+    radial-gradient(
+      circle at 100% 0%,
+      color-mix(in srgb, var(--wire-color-primary) 10%, transparent),
+      transparent 38%
+    ),
+    var(--wire-color-surface);
+  border: 1px solid var(--wire-color-border);
+  border-radius: calc(var(--wire-radius) * 1.35);
+  box-shadow: 0 1.25rem 3.5rem color-mix(in srgb, var(--wire-color-text) 9%, transparent);
 }
 
-/* Improve contrast when the current theme uses a dark primary color. */
-[data-theme="dark"] .wire-channel-card__icon,
-.dark .wire-channel-card__icon {
-  color: color-mix(in srgb, var(--wire-color-primary) 48%, white);
-
-  border-color: color-mix(in srgb, var(--wire-color-primary) 42%, var(--wire-color-border));
-
-  background: linear-gradient(
-    145deg,
-    color-mix(in srgb, var(--wire-color-primary) 24%, var(--wire-color-surface)),
-    color-mix(in srgb, var(--wire-color-primary) 12%, var(--wire-color-surface-2))
-  );
+.wire-analytics-preview__visual,
+.wire-analytics-preview__content {
+  min-width: 0;
 }
 
-@media (hover: hover) and (pointer: fine) {
-  .wire-channel-card:hover .wire-channel-card__icon {
-    color: color-mix(in srgb, var(--wire-color-primary) 82%, var(--wire-color-text));
+.wire-analytics-preview__chart,
+.wire-analytics-preview__image {
+  width: 100%;
+  border: 1px solid color-mix(in srgb, var(--wire-color-border) 88%, transparent);
+  border-radius: calc(var(--wire-radius) * 0.95);
+  background: color-mix(in srgb, var(--wire-color-surface-2) 92%, transparent);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--wire-color-text) 4%, transparent);
+}
 
-    border-color: color-mix(in srgb, var(--wire-color-primary) 62%, var(--wire-color-border));
+.wire-analytics-preview__image {
+  aspect-ratio: 16 / 10;
+  object-fit: cover;
+}
 
-    transform: translateY(-2px);
+.wire-analytics-preview__chart {
+  padding: clamp(1rem, 2vw, 1.35rem);
+}
+
+.wire-analytics-preview__chart-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  color: var(--wire-color-text);
+  font-size: 0.875rem;
+}
+
+.wire-analytics-preview__chart-header span {
+  color: var(--wire-color-success);
+  font-weight: 800;
+}
+
+.wire-analytics-preview__chart-svg {
+  width: 100%;
+  height: auto;
+  margin-top: 1rem;
+  color: var(--wire-color-primary);
+}
+
+.wire-analytics-preview__days {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  color: var(--wire-color-muted);
+  font-size: 0.7rem;
+}
+
+.wire-analytics-preview__content {
+  display: grid;
+  align-content: center;
+}
+
+.wire-analytics-preview__eyebrow {
+  margin: 0;
+  color: var(--wire-color-primary);
+  font-size: 0.75rem;
+  font-weight: 800;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.wire-analytics-preview__title {
+  max-width: 13ch;
+  margin: 0;
+  color: var(--wire-color-text);
+  font-size: clamp(1.85rem, 4vw, 3rem);
+  line-height: 1.03;
+  font-weight: 750;
+  letter-spacing: -0.045em;
+}
+
+.wire-analytics-preview__eyebrow + .wire-analytics-preview__title {
+  margin-top: 0.8rem;
+}
+
+.wire-analytics-preview__description {
+  max-width: 34rem;
+  margin: 1rem 0 0;
+  color: var(--wire-color-muted);
+  font-size: 1rem;
+  line-height: 1.7;
+}
+
+.wire-analytics-preview__metrics {
+  min-width: 0;
+  margin-top: 1.5rem;
+}
+
+.wire-analytics-preview__action {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+  color: var(--wire-color-primary);
+  font-weight: 750;
+  text-decoration: none;
+}
+
+.wire-analytics-preview__action span {
+  transition: transform var(--wire-motion-base) var(--wire-ease-emphasized);
+}
+
+.wire-analytics-preview__action:hover span {
+  transform: translateX(0.25rem);
+}
+
+/* --- Metric grid refinements -------------------------------------------- */
+.wire-metric-grid-shell {
+  width: 100%;
+  min-width: 0;
+}
+
+.wire-metric-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
+  gap: 1rem;
+  min-width: 0;
+}
+
+.wire-metric-grid[data-columns="2"] {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.wire-metric-grid[data-columns="3"] {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.wire-metric-grid[data-columns="4"] {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.wire-metric-card {
+  display: flex;
+  min-width: 0;
+  min-height: 9.5rem;
+  flex-direction: column;
+  justify-content: center;
+  padding: 1.25rem;
+  color: var(--wire-color-text);
+  background: var(--wire-color-surface);
+  border: 1px solid var(--wire-color-border);
+  border-radius: calc(var(--wire-radius) * 0.9);
+  box-shadow: var(--wire-shadow-1);
+}
+
+.wire-metric-card__value {
+  overflow-wrap: anywhere;
+  color: var(--wire-color-text);
+  font-size: clamp(1.65rem, 3vw, 2.25rem);
+  line-height: 1;
+  font-weight: 750;
+  letter-spacing: -0.045em;
+}
+
+.wire-metric-card__label {
+  margin-top: 0.7rem;
+  color: var(--wire-color-text);
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+
+.wire-metric-card__description {
+  margin: 0.45rem 0 0;
+  color: var(--wire-color-muted);
+  font-size: 0.8rem;
+  line-height: 1.5;
+}
+
+.wire-metric-grid--compact {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.wire-metric-card--compact {
+  min-height: 7.25rem;
+  padding: 1rem;
+  text-align: left;
+  background: color-mix(in srgb, var(--wire-color-surface-2) 72%, var(--wire-color-surface));
+  box-shadow: none;
+}
+
+.wire-metric-card--compact .wire-metric-card__value {
+  font-size: clamp(1rem, 2vw, 1.35rem);
+  line-height: 1.15;
+}
+
+.wire-metric-card--compact .wire-metric-card__label {
+  margin-top: 0.45rem;
+  color: var(--wire-color-muted);
+  font-size: 0.75rem;
+}
+
+.wire-metric-grid__empty {
+  grid-column: 1 / -1;
+  margin: 0;
+  padding: 1.5rem;
+  color: var(--wire-color-muted);
+  text-align: center;
+  border: 1px dashed var(--wire-color-border);
+  border-radius: var(--wire-radius);
+}
+
+@media (max-width: 900px) {
+  .wire-analytics-preview__surface {
+    grid-template-columns: 1fr;
   }
 
-  [data-theme="dark"] .wire-channel-card:hover .wire-channel-card__icon,
-  .dark .wire-channel-card:hover .wire-channel-card__icon {
-    color: color-mix(in srgb, var(--wire-color-primary) 58%, white);
+  .wire-analytics-preview__title {
+    max-width: 18ch;
+  }
+}
+
+@media (max-width: 640px) {
+  .wire-segmented-group {
+    width: 100%;
+  }
+
+  .wire-segmented-group__button {
+    min-width: max-content;
+  }
+
+  .wire-metric-grid,
+  .wire-metric-grid[data-columns="2"],
+  .wire-metric-grid[data-columns="3"],
+  .wire-metric-grid[data-columns="4"],
+  .wire-metric-grid--compact {
+    grid-template-columns: 1fr;
+  }
+
+  .wire-metric-card--compact {
+    min-height: auto;
   }
 }
diff --git a/.publish/uploader/package.json b/.publish/uploader/package.json
index 2a5934e4..86e2f028 100644
--- a/.publish/uploader/package.json
+++ b/.publish/uploader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/uploader",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "@wrnexus/uploader — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.3.3"
+    "@wrnexus/core": "^0.3.4"
   },
   "files": [
     "dist"
diff --git a/.publish/validation/package.json b/.publish/validation/package.json
index b47a3f80..70e89ed8 100644
--- a/.publish/validation/package.json
+++ b/.publish/validation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/validation",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "@wrnexus/validation — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/packages/ai/package.json b/packages/ai/package.json
index 323284a5..55fda26b 100644
--- a/packages/ai/package.json
+++ b/packages/ai/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ai",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "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 801607b6..84c5338a 100644
--- a/packages/authz/package.json
+++ b/packages/authz/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/authz",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 9988ef1d..20cde5bb 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/cli",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/cli/src/update.ts b/packages/cli/src/update.ts
index f8a105ce..25c21919 100644
--- a/packages/cli/src/update.ts
+++ b/packages/cli/src/update.ts
@@ -977,6 +977,14 @@ const MIGRATIONS: Migration[] = [
       // Compiler-only fix. Existing WRN source files require no migration.
     },
   },
+  {
+    version: "0.3.4",
+    id: "component-fix",
+    description: "UI component fixes.",
+    apply() {
+      // Compiler-only fix. Existing WRN source files require no 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 cd81581e..34e200b1 100644
--- a/packages/compiler/package.json
+++ b/packages/compiler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/compiler",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/core/package.json b/packages/core/package.json
index b497aae9..8cda5adb 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/core",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/csr/package.json b/packages/csr/package.json
index dce32785..d6e007fa 100644
--- a/packages/csr/package.json
+++ b/packages/csr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/csr",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/db/package.json b/packages/db/package.json
index e22f988a..e34b289f 100644
--- a/packages/db/package.json
+++ b/packages/db/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/db",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
index ff983378..6a66c525 100644
--- a/packages/dev-server/package.json
+++ b/packages/dev-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-server",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/dev-toolbar/package.json b/packages/dev-toolbar/package.json
index 738b2df5..480e3428 100644
--- a/packages/dev-toolbar/package.json
+++ b/packages/dev-toolbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-toolbar",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": true,
   "type": "module",
   "sideEffects": false,
diff --git a/packages/encryption/package.json b/packages/encryption/package.json
index 0b2b58e8..af6aa82e 100644
--- a/packages/encryption/package.json
+++ b/packages/encryption/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/encryption",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/helpers/package.json b/packages/helpers/package.json
index 2d016e64..53257653 100644
--- a/packages/helpers/package.json
+++ b/packages/helpers/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/helpers",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "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 1714c892..d45cdab6 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/i18n",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/jwt/package.json b/packages/jwt/package.json
index defa874d..5b0b7198 100644
--- a/packages/jwt/package.json
+++ b/packages/jwt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/jwt",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/mobile/package.json b/packages/mobile/package.json
index ecd7975b..be8835bd 100644
--- a/packages/mobile/package.json
+++ b/packages/mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/mobile",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/native/package.json b/packages/native/package.json
index 9122d78b..217547c3 100644
--- a/packages/native/package.json
+++ b/packages/native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/native",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/oauth/package.json b/packages/oauth/package.json
index fe029dbb..9a234802 100644
--- a/packages/oauth/package.json
+++ b/packages/oauth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/oauth",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/plugin/package.json b/packages/plugin/package.json
index 60bd95c4..2c491ce3 100644
--- a/packages/plugin/package.json
+++ b/packages/plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/plugin",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/pubsub/package.json b/packages/pubsub/package.json
index b8ff1ed3..85531a56 100644
--- a/packages/pubsub/package.json
+++ b/packages/pubsub/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/pubsub",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/queue/package.json b/packages/queue/package.json
index e0187335..a184a140 100644
--- a/packages/queue/package.json
+++ b/packages/queue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/queue",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/reactive/package.json b/packages/reactive/package.json
index 269aa694..d2064ff7 100644
--- a/packages/reactive/package.json
+++ b/packages/reactive/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/reactive",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/router/package.json b/packages/router/package.json
index 84909ebb..959dc0a0 100644
--- a/packages/router/package.json
+++ b/packages/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/router",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/ssr/package.json b/packages/ssr/package.json
index ac3347dc..7a5e3ed0 100644
--- a/packages/ssr/package.json
+++ b/packages/ssr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ssr",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 9edfeb37..cfa7d127 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/styles",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/syntax/package.json b/packages/syntax/package.json
index f43580c1..0a30139c 100644
--- a/packages/syntax/package.json
+++ b/packages/syntax/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/syntax",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/test/package.json b/packages/test/package.json
index 4e9e681f..7748ca16 100644
--- a/packages/test/package.json
+++ b/packages/test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/test",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/tracking/package.json b/packages/tracking/package.json
index d2a18dc6..4a404fe6 100644
--- a/packages/tracking/package.json
+++ b/packages/tracking/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/tracking",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/ui/COMPONENTS.md b/packages/ui/COMPONENTS.md
index ae885d92..3b2817cd 100644
--- a/packages/ui/COMPONENTS.md
+++ b/packages/ui/COMPONENTS.md
@@ -1,6 +1,6 @@
 # WRNexus UI component reference
 
-This reference is generated from the 901 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default.
+This reference is generated from the 902 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default.
 
 ## Actions
 
@@ -45,8 +45,8 @@ Reusable back button component.
 Reusable button component.
 
 - Mount: `data-component="Button"`
-- Props: `label: string = "Button"`, `type: string = "button"`, `variant: string = "primary"`, `size: string = "md"`, `disabled: boolean = false`, `loading: boolean = false`, `icon: string = ""`, `className: string = ""`
-- Slots: None
+- Props: `label: string = "Button"`, `type: string = "button"`, `variant: string = "primary"`, `size: string = "md"`, `disabled: boolean = false`, `loading: boolean = false`, `icon: string = ""`, `iconPosition: string = "start"`, `fullWidth: boolean = false`, `className: string = ""`
+- Slots: `default`
 - Events: None
 
 ### CenteredCTA
@@ -225,7 +225,7 @@ Reusable field actions component.
 Reusable final c t a component.
 
 - Mount: `data-component="FinalCTA"`
-- Props: `label: string = "Action"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""`
+- Props: `label: string = "Get started"`, `href: string = ""`, `type: string = "button"`, `variant: string = "primary"`, `disabled: boolean = false`, `class: string = ""`
 - Slots: `default`
 - Events: None
 
@@ -992,7 +992,7 @@ Reusable certificate upload component.
 Reusable channel card component.
 
 - Mount: `data-component="ChannelCard"`
-- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = "icon-[lucide--radio-tower]"`, `class: string = ""`
+- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = ""`, `actionLabel: string = ""`, `class: string = ""`
 - Slots: `default`
 - Events: None
 
@@ -1046,16 +1046,16 @@ Reusable code component.
 Reusable code block component.
 
 - Mount: `data-component="CodeBlock"`
-- Props: `class: string = ""`, `language: string = "text"`, `filename: string = ""`, `code: string = ""`
+- Props: `language: string = "text"`, `title: string = ""`, `code: string = ""`, `copyable: boolean = true`, `class: string = ""`
 - Slots: None
-- Events: `click`
+- Events: None
 
 ### CodeTabs
 
 Reusable code tabs component.
 
 - Mount: `data-component="CodeTabs"`
-- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `image: string = ""`, `alt: string = ""`, `class: string = ""`
+- Props: `class: string = ""`
 - Slots: `default`
 - Events: None
 
@@ -2126,7 +2126,7 @@ Reusable pricing contact form component.
 Reusable pricing plan card component.
 
 - Mount: `data-component="PricingPlanCard"`
-- Props: `class: string = ""`, `name: string = "Starter"`, `description: string = ""`, `price: string = "₹0"`, `period: string = "/month"`, `featured: boolean = false`, `ctaLabel: string = "Choose plan"`, `ctaHref: string = "#"`
+- Props: `class: string = ""`, `name: string = "Starter"`, `description: string = ""`, `price: string = "₹0"`, `period: string = "/month"`, `featured: boolean = false`, `badgeLabel: string = "Most popular"`, `ctaLabel: string = "Choose plan"`, `ctaHref: string = "#"`
 - Slots: `default`
 - Events: None
 
@@ -2135,7 +2135,7 @@ Reusable pricing plan card component.
 Reusable product card component.
 
 - Mount: `data-component="ProductCard"`
-- Props: `eyebrow: string = "Product"`, `title: string = "Product name"`, `description: string = ""`, `href: string = "#"`, `actionLabel: string = "Learn more"`, `status: string = ""`, `class: string = ""`
+- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `status: string = ""`, `class: string = ""`
 - Slots: None
 - Events: None
 
@@ -2947,7 +2947,7 @@ Reusable chip component.
 Reusable cluster component.
 
 - Mount: `data-component="Cluster"`
-- Props: `gap: string = "4"`, `className: string = ""`
+- Props: `class: string = ""`
 - Slots: `default`
 - Events: None
 
@@ -3320,6 +3320,15 @@ Reusable section heading component.
 - Slots: `default`
 - Events: None
 
+### SegmentedButtonGroup
+
+Reusable segmented button group component.
+
+- Mount: `data-component="SegmentedButtonGroup"`
+- Props: `label: string = "Options"`, `items: string = []`, `active: string = ""`, `size: string = "md"`, `fullWidth: boolean = false`, `class: string = ""`
+- Slots: None
+- Events: `click`
+
 ### Select
 
 Reusable select component.
@@ -3894,7 +3903,7 @@ Reusable member list component.
 Reusable metric grid component.
 
 - Mount: `data-component="MetricGrid"`
-- Props: `label: string = "Key metrics"`, `metrics: string = []`, `class: string = ""`
+- Props: `label: string = "Platform metrics"`, `metrics: string = []`, `compact: boolean = false`, `columns: number = 4`, `class: string = ""`
 - Slots: None
 - Events: None
 
@@ -3957,7 +3966,7 @@ Reusable policy version table component.
 Reusable pricing comparison table component.
 
 - Mount: `data-component="PricingComparisonTable"`
-- Props: `caption: string = "Plan comparison"`, `plans: string = []`, `features: string = []`, `class: string = ""`
+- Props: `caption: string = "Plan comparison"`, `plans: string = []`, `features: string = []`, `featuredPlan: string = ""`, `class: string = ""`
 - Slots: None
 - Events: None
 
@@ -4146,7 +4155,7 @@ Reusable subprocessor table component.
 Reusable table component.
 
 - Mount: `data-component="Table"`
-- Props: `class: string = ""`, `caption: string = "Data table"`, `responsive: boolean = true`
+- Props: `class: string = ""`, `caption: string = "Data table"`, `responsive: boolean = true`, `striped: boolean = false`, `hoverable: boolean = true`, `compact: boolean = false`
 - Slots: `default`
 - Events: None
 
@@ -4256,7 +4265,7 @@ Reusable api version badge component.
 Reusable badge component.
 
 - Mount: `data-component="Badge"`
-- Props: `class: string = ""`, `label: string = ""`, `variant: string = "neutral"`
+- Props: `class: string = ""`, `label: string = ""`, `variant: string = "neutral"`, `size: string = "md"`
 - Slots: `default`
 - Events: None
 
@@ -4661,8 +4670,8 @@ Reusable privacy notice component.
 Reusable product status badge component.
 
 - Mount: `data-component="ProductStatusBadge"`
-- Props: `label: string = "ProductStatus"`, `variant: string = "default"`, `class: string = ""`
-- Slots: `default`
+- Props: `label: string = "Available"`, `status: string = ""`, `class: string = ""`
+- Slots: None
 - Events: None
 
 ### RateLimitedState
@@ -7765,8 +7774,8 @@ Reusable channel fallback diagram component.
 Reusable channel flow component.
 
 - Mount: `data-component="ChannelFlow"`
-- Props: `title: string = ""`, `value: string = ""`, `description: string = ""`, `summary: string = ""`, `loading: boolean = false`, `class: string = ""`
-- Slots: `default`
+- Props: `class: string = ""`
+- Slots: None
 - Events: None
 
 ### ChecklistProgress
diff --git a/packages/ui/component-reference.json b/packages/ui/component-reference.json
index a888af63..df0ae73b 100644
--- a/packages/ui/component-reference.json
+++ b/packages/ui/component-reference.json
@@ -1,6 +1,6 @@
 {
   "generatedFrom": "packages/ui/components/*.wrn",
-  "count": 901,
+  "count": 902,
   "components": [
     {
       "name": "AcceptAllCookiesButton",
@@ -3604,6 +3604,12 @@
           "type": "string",
           "required": false,
           "default": "\"neutral\""
+        },
+        {
+          "name": "size",
+          "type": "string",
+          "required": false,
+          "default": "\"md\""
         }
       ],
       "slots": ["default"],
@@ -4914,6 +4920,18 @@
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "iconPosition",
+          "type": "string",
+          "required": false,
+          "default": "\"start\""
+        },
+        {
+          "name": "fullWidth",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
         {
           "name": "className",
           "type": "string",
@@ -4921,7 +4939,7 @@
           "default": "\"\""
         }
       ],
-      "slots": [],
+      "slots": ["default"],
       "events": [],
       "source": "components/Button.wrn"
     },
@@ -6490,7 +6508,13 @@
           "name": "icon",
           "type": "string",
           "required": false,
-          "default": "\"icon-[lucide--radio-tower]\""
+          "default": "\"\""
+        },
+        {
+          "name": "actionLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
         },
         {
           "name": "class",
@@ -6644,36 +6668,6 @@
       "category": "visualization",
       "purpose": "Reusable channel flow component.",
       "props": [
-        {
-          "name": "title",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
-        {
-          "name": "value",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
-        {
-          "name": "description",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
-        {
-          "name": "summary",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
-        {
-          "name": "loading",
-          "type": "boolean",
-          "required": false,
-          "default": "false"
-        },
         {
           "name": "class",
           "type": "string",
@@ -6681,7 +6675,7 @@
           "default": "\"\""
         }
       ],
-      "slots": ["default"],
+      "slots": [],
       "events": [],
       "source": "components/ChannelFlow.wrn"
     },
@@ -7605,13 +7599,7 @@
       "purpose": "Reusable cluster component.",
       "props": [
         {
-          "name": "gap",
-          "type": "string",
-          "required": false,
-          "default": "\"4\""
-        },
-        {
-          "name": "className",
+          "name": "class",
           "type": "string",
           "required": false,
           "default": "\"\""
@@ -7686,12 +7674,6 @@
       "category": "content",
       "purpose": "Reusable code block component.",
       "props": [
-        {
-          "name": "class",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
         {
           "name": "language",
           "type": "string",
@@ -7699,7 +7681,7 @@
           "default": "\"text\""
         },
         {
-          "name": "filename",
+          "name": "title",
           "type": "string",
           "required": false,
           "default": "\"\""
@@ -7709,10 +7691,22 @@
           "type": "string",
           "required": false,
           "default": "\"\""
+        },
+        {
+          "name": "copyable",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "class",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
         }
       ],
       "slots": [],
-      "events": ["click"],
+      "events": [],
       "source": "components/CodeBlock.wrn"
     },
     {
@@ -7933,48 +7927,6 @@
       "category": "content",
       "purpose": "Reusable code tabs component.",
       "props": [
-        {
-          "name": "eyebrow",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
-        {
-          "name": "title",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
-        {
-          "name": "description",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
-        {
-          "name": "href",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
-        {
-          "name": "actionLabel",
-          "type": "string",
-          "required": false,
-          "default": "\"Learn more\""
-        },
-        {
-          "name": "image",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
-        {
-          "name": "alt",
-          "type": "string",
-          "required": false,
-          "default": "\"\""
-        },
         {
           "name": "class",
           "type": "string",
@@ -17783,7 +17735,7 @@
           "name": "label",
           "type": "string",
           "required": false,
-          "default": "\"Action\""
+          "default": "\"Get started\""
         },
         {
           "name": "href",
@@ -26760,7 +26712,7 @@
           "name": "label",
           "type": "string",
           "required": false,
-          "default": "\"Key metrics\""
+          "default": "\"Platform metrics\""
         },
         {
           "name": "metrics",
@@ -26768,6 +26720,18 @@
           "required": false,
           "default": "[]"
         },
+        {
+          "name": "compact",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "columns",
+          "type": "number",
+          "required": false,
+          "default": "4"
+        },
         {
           "name": "class",
           "type": "string",
@@ -31831,6 +31795,12 @@
           "required": false,
           "default": "[]"
         },
+        {
+          "name": "featuredPlan",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
         {
           "name": "class",
           "type": "string",
@@ -32102,6 +32072,12 @@
           "required": false,
           "default": "false"
         },
+        {
+          "name": "badgeLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"Most popular\""
+        },
         {
           "name": "ctaLabel",
           "type": "string",
@@ -32547,13 +32523,13 @@
           "name": "eyebrow",
           "type": "string",
           "required": false,
-          "default": "\"Product\""
+          "default": "\"\""
         },
         {
           "name": "title",
           "type": "string",
           "required": false,
-          "default": "\"Product name\""
+          "default": "\"\""
         },
         {
           "name": "description",
@@ -32565,7 +32541,7 @@
           "name": "href",
           "type": "string",
           "required": false,
-          "default": "\"#\""
+          "default": "\"\""
         },
         {
           "name": "actionLabel",
@@ -33269,13 +33245,13 @@
           "name": "label",
           "type": "string",
           "required": false,
-          "default": "\"ProductStatus\""
+          "default": "\"Available\""
         },
         {
-          "name": "variant",
+          "name": "status",
           "type": "string",
           "required": false,
-          "default": "\"default\""
+          "default": "\"\""
         },
         {
           "name": "class",
@@ -33284,7 +33260,7 @@
           "default": "\"\""
         }
       ],
-      "slots": ["default"],
+      "slots": [],
       "events": [],
       "source": "components/ProductStatusBadge.wrn"
     },
@@ -39570,6 +39546,53 @@
       "events": [],
       "source": "components/SecurityReportForm.wrn"
     },
+    {
+      "name": "SegmentedButtonGroup",
+      "mount": "SegmentedButtonGroup",
+      "category": "core",
+      "purpose": "Reusable segmented button group component.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "required": false,
+          "default": "\"Options\""
+        },
+        {
+          "name": "items",
+          "type": "string",
+          "required": false,
+          "default": "[]"
+        },
+        {
+          "name": "active",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "size",
+          "type": "string",
+          "required": false,
+          "default": "\"md\""
+        },
+        {
+          "name": "fullWidth",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "class",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        }
+      ],
+      "slots": [],
+      "events": ["click"],
+      "source": "components/SegmentedButtonGroup.wrn"
+    },
     {
       "name": "Select",
       "mount": "Select",
@@ -42991,6 +43014,24 @@
           "type": "boolean",
           "required": false,
           "default": "true"
+        },
+        {
+          "name": "striped",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "hoverable",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "compact",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
         }
       ],
       "slots": ["default"],
diff --git a/packages/ui/components/AnalyticsDashboardPreview.wrn b/packages/ui/components/AnalyticsDashboardPreview.wrn
index 3bdef32a..a647c5d8 100644
--- a/packages/ui/components/AnalyticsDashboardPreview.wrn
+++ b/packages/ui/components/AnalyticsDashboardPreview.wrn
@@ -11,59 +11,71 @@ component AnalyticsDashboardPreview {
   }
 
   view {
-    <section class="px-4 py-10 sm:px-6 sm:py-12 lg:px-8 lg:py-14 {class}">
-      <div
-        class="mx-auto grid w-full max-w-7xl gap-8 overflow-hidden rounded-3xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-5 shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.08))] sm:p-7 lg:grid-cols-[minmax(0,1.15fr)_minmax(20rem,0.85fr)] lg:items-center lg:p-8"
-      >
-        <div>
+    <section class="wire-analytics-preview {class}">
+      <div class="wire-analytics-preview__surface">
+        <div class="wire-analytics-preview__visual">
           {#if image}
-          <img
-            src="{image}"
-            alt="{alt}"
-            class="aspect-[16/9] w-full rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] object-cover"
-          />
+            <img
+              src="{image}"
+              alt="{alt}"
+              class="wire-analytics-preview__image"
+            />
           {:else}
-          <div
-            class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-2,#f8fafc)] p-4 sm:p-5"
-            role="img"
-            aria-label="Delivery trend rising over seven days"
-          >
-            <div class="flex items-center justify-between gap-4 text-sm">
-              <strong class="text-[var(--wire-color-text,#0f172a)]">Delivery trend</strong>
-              <span class="font-bold text-[var(--wire-color-success,#059669)]">↗ 18.4%</span>
-            </div>
-            <svg
-              class="mt-4 h-auto w-full text-[var(--wire-color-primary,#059669)]"
-              viewBox="0 0 700 250"
-              aria-hidden="true"
+            <div
+              class="wire-analytics-preview__chart"
+              role="img"
+              aria-label="Delivery trend rising over seven days"
             >
-              <defs>
-                <linearGradient
-                  id="wire-analytics-area"
-                  x1="0"
-                  y1="0"
-                  x2="0"
-                  y2="1"
-                >
-                  <stop offset="0%" stop-color="currentColor" stop-opacity=".24"></stop>
-                  <stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop>
-                </linearGradient>
-              </defs>
-              <g fill="none" stroke="var(--wire-color-border,#e2e8f0)"><path d="M20 50H680M20 115H680M20 180H680M20 230H680"></path></g>
-              <path fill="url(#wire-analytics-area)" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32 L680 230 L20 230Z"></path>
-              <path fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32"></path>
-            </svg>
-            <div class="mt-2 flex justify-between text-[0.7rem] text-[var(--wire-color-muted,#64748b)]"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>
-          </div>
+              <div class="wire-analytics-preview__chart-header">
+                <strong>Delivery trend</strong>
+                <span>↗ 18.4%</span>
+              </div>
+
+              <svg
+                class="wire-analytics-preview__chart-svg"
+                viewBox="0 0 700 250"
+                aria-hidden="true"
+              >
+                <defs>
+                  <linearGradient id="wire-analytics-area" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stop-color="currentColor" stop-opacity=".3"></stop>
+                    <stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop>
+                  </linearGradient>
+                </defs>
+                <g fill="none" stroke="var(--wire-color-border,#e2e8f0)">
+                  <path d="M20 50H680M20 115H680M20 180H680M20 230H680"></path>
+                </g>
+                <path fill="url(#wire-analytics-area)" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32 L680 230 L20 230Z"></path>
+                <path fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32"></path>
+              </svg>
+
+              <div class="wire-analytics-preview__days">
+                <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
+              </div>
+            </div>
           {/if}
         </div>
 
-        <div>
-          {#if eyebrow}<p class="m-0 text-xs font-bold uppercase tracking-[0.16em] text-[var(--wire-color-primary,#059669)]">{eyebrow}</p>{/if}
-          {#if title}<h2 class="mt-4 text-3xl font-semibold tracking-[-0.035em] text-[var(--wire-color-text,#0f172a)]">{title}</h2>{/if}
-          {#if description}<p class="mt-4 leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
-          <div class="mt-5"><slot /></div>
-          {#if href}<a href="{href}" class="mt-6 inline-flex items-center gap-2 font-semibold text-[var(--wire-color-primary,#059669)] no-underline">{actionLabel}<span aria-hidden="true">→</span></a>{/if}
+        <div class="wire-analytics-preview__content">
+          {#if eyebrow}
+            <p class="wire-analytics-preview__eyebrow">{eyebrow}</p>
+          {/if}
+
+          {#if title}
+            <h2 class="wire-analytics-preview__title">{title}</h2>
+          {/if}
+
+          {#if description}
+            <p class="wire-analytics-preview__description">{description}</p>
+          {/if}
+
+          <div class="wire-analytics-preview__metrics"><slot /></div>
+
+          {#if href}
+            <a href="{href}" class="wire-analytics-preview__action">
+              {actionLabel}<span aria-hidden="true">→</span>
+            </a>
+          {/if}
         </div>
       </div>
     </section>
diff --git a/packages/ui/components/MetricGrid.wrn b/packages/ui/components/MetricGrid.wrn
index 536ad57a..f46510bf 100644
--- a/packages/ui/components/MetricGrid.wrn
+++ b/packages/ui/components/MetricGrid.wrn
@@ -2,26 +2,32 @@ component MetricGrid {
   props {
     label = "Platform metrics"
     metrics = []
+    compact = false
+    columns = 4
     class = ""
   }
 
   view {
-    <section class="px-4 sm:px-6 lg:px-8 {class}" aria-label="{label}">
-      <div class="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+    <section
+      class="wire-metric-grid-shell {compact ? 'wire-metric-grid-shell--compact' : ''} {class}"
+      aria-label="{label}"
+    >
+      <div
+        class="wire-metric-grid"
+        class:wire-metric-grid--compact='{compact}'
+        data-columns="{columns}"
+      >
         {#each metrics as metric}
-          <article class="flex min-h-40 flex-col justify-center rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-6 shadow-[var(--wire-shadow-1,0_1px_2px_rgb(0_0_0/0.05))]">
-            <strong class="text-3xl font-semibold leading-none tracking-[-0.04em] text-[var(--wire-color-text,#0f172a)] sm:text-4xl">
-              {metric.value}
-            </strong>
-            <span class="mt-4 font-semibold text-[var(--wire-color-text,#0f172a)]">{metric.label}</span>
+          <article class="wire-metric-card" class:wire-metric-card--compact='{compact}'>
+            <strong class="wire-metric-card__value">{metric.value}</strong>
+            <span class="wire-metric-card__label">{metric.label}</span>
+
             {#if metric.description}
-              <p class="mt-2 text-sm leading-6 text-[var(--wire-color-muted,#64748b)]">{metric.description}</p>
+              <p class="wire-metric-card__description">{metric.description}</p>
             {/if}
           </article>
         {:empty}
-          <p class="col-span-full rounded-2xl border border-dashed border-[var(--wire-color-border,#e2e8f0)] p-8 text-center text-[var(--wire-color-muted,#64748b)]">
-            No metrics available.
-          </p>
+          <p class="wire-metric-grid__empty">No metrics available.</p>
         {/each}
       </div>
     </section>
diff --git a/packages/ui/components/SegmentedButtonGroup.wrn b/packages/ui/components/SegmentedButtonGroup.wrn
new file mode 100644
index 00000000..65cdbc6b
--- /dev/null
+++ b/packages/ui/components/SegmentedButtonGroup.wrn
@@ -0,0 +1,44 @@
+component SegmentedButtonGroup {
+  props {
+    label = "Options"
+    items = []
+    active = ""
+    size = "md"
+    fullWidth = false
+    class = ""
+  }
+
+  state current = active
+
+  view {
+    <div
+      class="wire-segmented-group {fullWidth ? 'wire-segmented-group--full' : ''} wire-segmented-group--{size} {class}"
+      role="tablist"
+      aria-label="{label}"
+    >
+      {#each items as item, index}
+        <button
+          type="button"
+          role="tab"
+          aria-selected="{current === item.value}"
+          disabled="{item.disabled}"
+          class="wire-segmented-group__button"
+          class:wire-segmented-group__button--active='{current === item.value}'
+          @click="current = item.value"
+        >
+          {#if item.icon}
+            <span class="wire-segmented-group__icon {item.icon}" aria-hidden="true"></span>
+          {/if}
+
+          <span class="wire-segmented-group__label">{item.label}</span>
+
+          {#if item.badge}
+            <span class="wire-segmented-group__badge">{item.badge}</span>
+          {/if}
+        </button>
+      {:empty}
+        <span class="wire-segmented-group__empty">No options available</span>
+      {/each}
+    </div>
+  }
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 750b1e84..39f73654 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/ui/ui.css b/packages/ui/ui.css
index 44950f06..c57b35ad 100644
--- a/packages/ui/ui.css
+++ b/packages/ui/ui.css
@@ -1820,367 +1820,423 @@
   }
 }
 
-/* --- Theme-safe pricing, action, badge, table and channel refinements ------ */
-:where([data-wrn-component]) {
+/* --- Segmented button group --------------------------------------------- */
+.wire-segmented-group {
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(max-content, 1fr);
+  align-items: stretch;
+  gap: 0.25rem;
+  max-width: 100%;
+  padding: 0.3rem;
+  overflow-x: auto;
   color: var(--wire-color-text);
-  font-family: var(--wire-font-sans);
-}
-
-.wire-page-shell {
-  min-height: 100%;
-  background: var(--wire-color-bg);
-  color: var(--wire-color-text);
-}
-
-.wire-section {
-  padding-block: var(--wire-space-section-sm, 3.5rem);
-}
-
-@media (min-width: 1024px) {
-  .wire-section {
-    padding-block: var(--wire-space-section, 5rem);
-  }
-}
-
-.wire-container {
-  max-width: var(--wire-container-max, 80rem);
-  padding-inline: clamp(1rem, 2.5vw, 2rem);
-}
-
-.wire-btn {
-  min-height: 2.75rem;
-  border-radius: 0.75rem;
-  padding-inline: 1rem;
-  font-size: 0.875rem;
-  font-weight: 650;
-  letter-spacing: -0.01em;
-  box-shadow: none;
-}
-
-.wire-btn--primary {
-  border-color: var(--wire-color-primary);
-  background: var(--wire-color-primary);
-  color: var(--wire-color-primary-contrast);
-  box-shadow: var(--wire-shadow-sm, var(--wire-shadow-1));
-}
-
-.wire-btn--primary:hover:not(:disabled) {
-  border-color: var(--wire-color-primary-hover);
-  background: var(--wire-color-primary-hover);
-  color: var(--wire-color-primary-contrast);
-  transform: translateY(-1px);
-  box-shadow: var(--wire-shadow-md, var(--wire-shadow-1));
-}
-
-.wire-btn--secondary,
-.wire-btn--default {
-  border-color: var(--wire-color-border-strong, var(--wire-color-border));
-  background: var(--wire-color-surface);
-  color: var(--wire-color-text);
-  box-shadow: var(--wire-shadow-sm, var(--wire-shadow-1));
-}
-
-.wire-btn--secondary:hover:not(:disabled),
-.wire-btn--default:hover:not(:disabled) {
-  border-color: var(--wire-color-primary);
-  background: var(--wire-color-surface-2);
-  color: var(--wire-color-primary);
-  transform: translateY(-1px);
-}
-
-.wire-btn--ghost {
-  border-color: transparent;
-  background: transparent;
-  color: var(--wire-color-text);
-}
-
-.wire-btn--ghost:hover:not(:disabled) {
-  border-color: var(--wire-color-border);
-  background: var(--wire-color-surface-2);
-  color: var(--wire-color-primary);
-}
-
-.wire-btn--danger {
-  border-color: var(--wire-color-danger);
-  background: var(--wire-color-danger);
-  color: #fff;
-}
-
-.wire-btn--danger:hover:not(:disabled) {
-  filter: brightness(0.94);
-  transform: translateY(-1px);
-}
-
-.wire-btn--sm {
-  min-height: 2.25rem;
-  padding: 0.45rem 0.75rem;
-  font-size: 0.8125rem;
-}
-
-.wire-btn--md {
-  min-height: 2.75rem;
-  padding: 0.625rem 1rem;
-}
-
-.wire-btn--lg {
-  min-height: 3rem;
-  padding: 0.75rem 1.25rem;
-  font-size: 0.9375rem;
-}
-
-.wire-badge {
-  display: inline-flex;
-  width: fit-content;
-  align-items: center;
-  gap: 0.375rem;
+  background: color-mix(in srgb, var(--wire-color-surface-2) 86%, transparent);
   border: 1px solid var(--wire-color-border);
-  border-radius: 9999px;
-  background: var(--wire-color-surface-2);
-  color: var(--wire-color-text-muted, var(--wire-color-muted));
-  font-weight: 650;
+  border-radius: calc(var(--wire-radius-sm) + 0.25rem);
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, var(--wire-color-text) 4%, transparent),
+    var(--wire-shadow-1);
+  scrollbar-width: none;
+}
+
+.wire-segmented-group::-webkit-scrollbar {
+  display: none;
+}
+
+.wire-segmented-group--full {
+  display: grid;
+  width: 100%;
+}
+
+.wire-segmented-group__button {
+  position: relative;
+  isolation: isolate;
+  display: inline-flex;
+  min-width: 0;
+  min-height: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  padding: 0.55rem 0.9rem;
+  overflow: hidden;
+  color: var(--wire-color-muted);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--wire-radius-sm);
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 700;
   line-height: 1;
   white-space: nowrap;
+  cursor: pointer;
+  transition:
+    color var(--wire-motion-base) var(--wire-ease-standard),
+    background-color var(--wire-motion-base) var(--wire-ease-standard),
+    border-color var(--wire-motion-base) var(--wire-ease-standard),
+    box-shadow var(--wire-motion-base) var(--wire-ease-standard),
+    transform var(--wire-motion-base) var(--wire-ease-emphasized);
 }
 
-.wire-badge--sm {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.6875rem;
-}
-
-.wire-badge--md {
-  padding: 0.375rem 0.625rem;
-  font-size: 0.75rem;
-}
-
-.wire-badge--lg {
-  padding: 0.45rem 0.75rem;
-  font-size: 0.8125rem;
-}
-
-.wire-badge--neutral {
-  border-color: var(--wire-color-border);
-  background: var(--wire-color-surface-2);
-  color: var(--wire-color-text-muted, var(--wire-color-muted));
-}
-
-.wire-badge--brand {
-  border-color: color-mix(in srgb, var(--wire-color-primary) 30%, transparent);
-  background: var(--wire-color-primary-soft);
-  color: var(--wire-color-primary);
-}
-
-.wire-badge--success {
-  border-color: color-mix(in srgb, var(--wire-color-success) 30%, transparent);
-  background: var(
-    --wire-color-success-soft,
-    color-mix(in srgb, var(--wire-color-success) 12%, transparent)
-  );
-  color: var(--wire-color-success);
-}
-
-.wire-badge--warning {
-  border-color: color-mix(in srgb, var(--wire-color-warning) 30%, transparent);
-  background: var(
-    --wire-color-warning-soft,
-    color-mix(in srgb, var(--wire-color-warning) 12%, transparent)
-  );
-  color: var(--wire-color-warning);
-}
-
-.wire-badge--danger {
-  border-color: color-mix(in srgb, var(--wire-color-danger) 30%, transparent);
-  background: var(
-    --wire-color-danger-soft,
-    color-mix(in srgb, var(--wire-color-danger) 12%, transparent)
-  );
-  color: var(--wire-color-danger);
-}
-
-.wire-table-wrap {
-  width: 100%;
-  max-width: 100%;
-  overflow-x: auto;
-  scrollbar-gutter: stable;
-  border: 1px solid var(--wire-color-border);
-  border-radius: var(--wire-radius, 1rem);
-  background: var(--wire-color-surface);
-}
-
-.wire-table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  background: var(--wire-color-surface);
-  color: var(--wire-color-text);
-  font-size: 0.875rem;
-}
-
-.wire-table th,
-.wire-table td {
-  padding: 1rem 1.25rem;
-  border-bottom: 1px solid var(--wire-color-border);
-  vertical-align: middle;
-}
-
-.wire-table thead th {
-  background: var(--wire-color-surface-2);
-  color: var(--wire-color-text);
-  font-size: 0.75rem;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-.wire-table tbody th {
-  color: var(--wire-color-text);
-  font-weight: 650;
-}
-
-.wire-table tbody td {
-  color: var(--wire-color-text-muted, var(--wire-color-muted));
-}
-
-.wire-table tbody tr:last-child > * {
-  border-bottom: 0;
-}
-
-.wire-table--hoverable tbody tr:hover > *,
-.wire-comparison-table tbody tr:hover > * {
-  background: var(--wire-color-surface-2);
-}
-
-.wire-table--striped tbody tr:nth-child(even) > * {
-  background: color-mix(in srgb, var(--wire-color-surface-2) 72%, transparent);
-}
-
-.wire-table--compact th,
-.wire-table--compact td {
-  padding: 0.7rem 0.9rem;
-}
-
-.wire-comparison-table th:not(:first-child),
-.wire-comparison-table td:not(:first-child) {
-  text-align: center;
-}
-
-.wire-comparison-table thead th:first-child,
-.wire-comparison-table tbody th {
-  position: sticky;
-  left: 0;
-  z-index: 1;
-  background: var(--wire-color-surface);
-}
-
-.wire-comparison-table thead th:first-child {
-  z-index: 2;
-  background: var(--wire-color-surface-2);
-}
-
-.wire-channel-card {
-  isolation: isolate;
-}
-
-.wire-channel-card__icon {
-  position: relative;
-  overflow: hidden;
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wire-color-primary) 5%, transparent);
-}
-
-.wire-channel-card__icon::after {
+.wire-segmented-group__button::before {
   content: "";
   position: absolute;
-  inset: auto -0.5rem -0.75rem auto;
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--wire-color-primary) 14%, transparent);
-  pointer-events: none;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--wire-color-surface);
+  box-shadow: var(--wire-shadow-1);
+  opacity: 0;
+  transform: scale(0.88);
+  transition:
+    opacity var(--wire-motion-base) var(--wire-ease-standard),
+    transform var(--wire-motion-slow) var(--wire-ease-emphasized);
 }
 
-.wire-channel-card__icon > span {
-  position: relative;
-  z-index: 1;
-  display: block;
-  width: 1.25rem;
-  height: 1.25rem;
+.wire-segmented-group__button:hover:not(:disabled) {
+  color: var(--wire-color-text);
+  background: color-mix(in srgb, var(--wire-color-surface) 65%, transparent);
+}
+
+.wire-segmented-group__button--active {
+  color: var(--wire-color-text);
+  border-color: color-mix(in srgb, var(--wire-color-primary) 22%, var(--wire-color-border));
+  transform: translateY(-1px);
+}
+
+.wire-segmented-group__button--active::before {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.wire-segmented-group__button--active .wire-segmented-group__label {
+  animation: wire-segmented-label-in var(--wire-motion-slow) var(--wire-ease-emphasized) both;
+}
+
+.wire-segmented-group__button:focus-visible {
+  outline: 2px solid var(--wire-color-primary);
+  outline-offset: 1px;
+}
+
+.wire-segmented-group__button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.wire-segmented-group__badge {
+  display: inline-flex;
+  min-height: 1.35rem;
+  align-items: center;
+  padding: 0.15rem 0.45rem;
+  color: var(--wire-color-success);
+  background: color-mix(in srgb, var(--wire-color-success) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--wire-color-success) 22%, transparent);
+  border-radius: 999px;
+  font-size: 0.7rem;
+  font-weight: 800;
+}
+
+.wire-segmented-group__icon {
+  width: 1rem;
+  height: 1rem;
+  flex: none;
   color: currentColor;
 }
 
-.wire-channel-card__icon > span::before {
-  display: block;
-  width: 100%;
-  height: 100%;
+.wire-segmented-group--sm .wire-segmented-group__button {
+  min-height: 2.15rem;
+  padding: 0.4rem 0.7rem;
+  font-size: 0.8rem;
 }
 
-/* --- Channel card --------------------------------------------------------- */
+.wire-segmented-group--lg .wire-segmented-group__button {
+  min-height: 3rem;
+  padding: 0.7rem 1.15rem;
+  font-size: 0.95rem;
+}
 
-.wire-channel-card__icon {
+.wire-segmented-group__empty {
+  padding: 0.65rem 0.9rem;
+  color: var(--wire-color-muted);
+  font-size: 0.875rem;
+}
+
+@keyframes wire-segmented-label-in {
+  from {
+    opacity: 0.68;
+    transform: translateY(3px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* --- Analytics dashboard preview ---------------------------------------- */
+.wire-analytics-preview {
+  width: 100%;
+  min-width: 0;
+}
+
+.wire-analytics-preview__surface {
   display: grid;
-  width: 3rem;
-  height: 3rem;
-  flex: 0 0 3rem;
-  place-items: center;
-  overflow: hidden;
-
-  color: color-mix(in srgb, var(--wire-color-primary) 72%, var(--wire-color-text));
-
-  border: 1px solid color-mix(in srgb, var(--wire-color-primary) 38%, var(--wire-color-border));
-
-  border-radius: 0.875rem;
-
-  background: linear-gradient(
-    145deg,
-    color-mix(in srgb, var(--wire-color-primary) 18%, var(--wire-color-surface)),
-    color-mix(in srgb, var(--wire-color-primary) 8%, var(--wire-color-surface-2))
-  );
-
-  box-shadow:
-    inset 0 1px 0 color-mix(in srgb, var(--wire-color-text) 8%, transparent),
-    0 0.75rem 1.75rem color-mix(in srgb, var(--wire-color-primary) 12%, transparent);
-}
-
-.wire-channel-card__icon-glyph {
-  display: block;
-  width: 1.5rem;
-  height: 1.5rem;
-  color: inherit;
-  font-size: 1.5rem;
-  line-height: 1;
-}
-
-.wire-channel-card__icon-glyph::before {
-  display: block;
+  grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr);
+  gap: clamp(1.5rem, 4vw, 3.5rem);
+  align-items: center;
   width: 100%;
-  height: 100%;
-  color: inherit;
+  min-width: 0;
+  padding: clamp(1.25rem, 3vw, 2rem);
+  overflow: hidden;
+  color: var(--wire-color-text);
+  background:
+    radial-gradient(
+      circle at 100% 0%,
+      color-mix(in srgb, var(--wire-color-primary) 10%, transparent),
+      transparent 38%
+    ),
+    var(--wire-color-surface);
+  border: 1px solid var(--wire-color-border);
+  border-radius: calc(var(--wire-radius) * 1.35);
+  box-shadow: 0 1.25rem 3.5rem color-mix(in srgb, var(--wire-color-text) 9%, transparent);
 }
 
-/* Improve contrast when the current theme uses a dark primary color. */
-[data-theme="dark"] .wire-channel-card__icon,
-.dark .wire-channel-card__icon {
-  color: color-mix(in srgb, var(--wire-color-primary) 48%, white);
-
-  border-color: color-mix(in srgb, var(--wire-color-primary) 42%, var(--wire-color-border));
-
-  background: linear-gradient(
-    145deg,
-    color-mix(in srgb, var(--wire-color-primary) 24%, var(--wire-color-surface)),
-    color-mix(in srgb, var(--wire-color-primary) 12%, var(--wire-color-surface-2))
-  );
+.wire-analytics-preview__visual,
+.wire-analytics-preview__content {
+  min-width: 0;
 }
 
-@media (hover: hover) and (pointer: fine) {
-  .wire-channel-card:hover .wire-channel-card__icon {
-    color: color-mix(in srgb, var(--wire-color-primary) 82%, var(--wire-color-text));
+.wire-analytics-preview__chart,
+.wire-analytics-preview__image {
+  width: 100%;
+  border: 1px solid color-mix(in srgb, var(--wire-color-border) 88%, transparent);
+  border-radius: calc(var(--wire-radius) * 0.95);
+  background: color-mix(in srgb, var(--wire-color-surface-2) 92%, transparent);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--wire-color-text) 4%, transparent);
+}
 
-    border-color: color-mix(in srgb, var(--wire-color-primary) 62%, var(--wire-color-border));
+.wire-analytics-preview__image {
+  aspect-ratio: 16 / 10;
+  object-fit: cover;
+}
 
-    transform: translateY(-2px);
+.wire-analytics-preview__chart {
+  padding: clamp(1rem, 2vw, 1.35rem);
+}
+
+.wire-analytics-preview__chart-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  color: var(--wire-color-text);
+  font-size: 0.875rem;
+}
+
+.wire-analytics-preview__chart-header span {
+  color: var(--wire-color-success);
+  font-weight: 800;
+}
+
+.wire-analytics-preview__chart-svg {
+  width: 100%;
+  height: auto;
+  margin-top: 1rem;
+  color: var(--wire-color-primary);
+}
+
+.wire-analytics-preview__days {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  color: var(--wire-color-muted);
+  font-size: 0.7rem;
+}
+
+.wire-analytics-preview__content {
+  display: grid;
+  align-content: center;
+}
+
+.wire-analytics-preview__eyebrow {
+  margin: 0;
+  color: var(--wire-color-primary);
+  font-size: 0.75rem;
+  font-weight: 800;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.wire-analytics-preview__title {
+  max-width: 13ch;
+  margin: 0;
+  color: var(--wire-color-text);
+  font-size: clamp(1.85rem, 4vw, 3rem);
+  line-height: 1.03;
+  font-weight: 750;
+  letter-spacing: -0.045em;
+}
+
+.wire-analytics-preview__eyebrow + .wire-analytics-preview__title {
+  margin-top: 0.8rem;
+}
+
+.wire-analytics-preview__description {
+  max-width: 34rem;
+  margin: 1rem 0 0;
+  color: var(--wire-color-muted);
+  font-size: 1rem;
+  line-height: 1.7;
+}
+
+.wire-analytics-preview__metrics {
+  min-width: 0;
+  margin-top: 1.5rem;
+}
+
+.wire-analytics-preview__action {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+  color: var(--wire-color-primary);
+  font-weight: 750;
+  text-decoration: none;
+}
+
+.wire-analytics-preview__action span {
+  transition: transform var(--wire-motion-base) var(--wire-ease-emphasized);
+}
+
+.wire-analytics-preview__action:hover span {
+  transform: translateX(0.25rem);
+}
+
+/* --- Metric grid refinements -------------------------------------------- */
+.wire-metric-grid-shell {
+  width: 100%;
+  min-width: 0;
+}
+
+.wire-metric-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
+  gap: 1rem;
+  min-width: 0;
+}
+
+.wire-metric-grid[data-columns="2"] {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.wire-metric-grid[data-columns="3"] {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.wire-metric-grid[data-columns="4"] {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.wire-metric-card {
+  display: flex;
+  min-width: 0;
+  min-height: 9.5rem;
+  flex-direction: column;
+  justify-content: center;
+  padding: 1.25rem;
+  color: var(--wire-color-text);
+  background: var(--wire-color-surface);
+  border: 1px solid var(--wire-color-border);
+  border-radius: calc(var(--wire-radius) * 0.9);
+  box-shadow: var(--wire-shadow-1);
+}
+
+.wire-metric-card__value {
+  overflow-wrap: anywhere;
+  color: var(--wire-color-text);
+  font-size: clamp(1.65rem, 3vw, 2.25rem);
+  line-height: 1;
+  font-weight: 750;
+  letter-spacing: -0.045em;
+}
+
+.wire-metric-card__label {
+  margin-top: 0.7rem;
+  color: var(--wire-color-text);
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+
+.wire-metric-card__description {
+  margin: 0.45rem 0 0;
+  color: var(--wire-color-muted);
+  font-size: 0.8rem;
+  line-height: 1.5;
+}
+
+.wire-metric-grid--compact {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.wire-metric-card--compact {
+  min-height: 7.25rem;
+  padding: 1rem;
+  text-align: left;
+  background: color-mix(in srgb, var(--wire-color-surface-2) 72%, var(--wire-color-surface));
+  box-shadow: none;
+}
+
+.wire-metric-card--compact .wire-metric-card__value {
+  font-size: clamp(1rem, 2vw, 1.35rem);
+  line-height: 1.15;
+}
+
+.wire-metric-card--compact .wire-metric-card__label {
+  margin-top: 0.45rem;
+  color: var(--wire-color-muted);
+  font-size: 0.75rem;
+}
+
+.wire-metric-grid__empty {
+  grid-column: 1 / -1;
+  margin: 0;
+  padding: 1.5rem;
+  color: var(--wire-color-muted);
+  text-align: center;
+  border: 1px dashed var(--wire-color-border);
+  border-radius: var(--wire-radius);
+}
+
+@media (max-width: 900px) {
+  .wire-analytics-preview__surface {
+    grid-template-columns: 1fr;
   }
 
-  [data-theme="dark"] .wire-channel-card:hover .wire-channel-card__icon,
-  .dark .wire-channel-card:hover .wire-channel-card__icon {
-    color: color-mix(in srgb, var(--wire-color-primary) 58%, white);
+  .wire-analytics-preview__title {
+    max-width: 18ch;
+  }
+}
+
+@media (max-width: 640px) {
+  .wire-segmented-group {
+    width: 100%;
+  }
+
+  .wire-segmented-group__button {
+    min-width: max-content;
+  }
+
+  .wire-metric-grid,
+  .wire-metric-grid[data-columns="2"],
+  .wire-metric-grid[data-columns="3"],
+  .wire-metric-grid[data-columns="4"],
+  .wire-metric-grid--compact {
+    grid-template-columns: 1fr;
+  }
+
+  .wire-metric-card--compact {
+    min-height: auto;
   }
 }
diff --git a/packages/uploader/package.json b/packages/uploader/package.json
index 7b923faf..8a4a038f 100644
--- a/packages/uploader/package.json
+++ b/packages/uploader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/uploader",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/validation/package.json b/packages/validation/package.json
index f0abd16b..5dd47eb0 100644
--- a/packages/validation/package.json
+++ b/packages/validation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/validation",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/scripts/release.ts b/scripts/release.ts
index 40d3a50f..124a7700 100644
--- a/scripts/release.ts
+++ b/scripts/release.ts
@@ -195,6 +195,10 @@ function verifyDocs(all: PackageInfo[], version: string) {
 function prepare(all: PackageInfo[], version: string) {
   requireMigration(version);
   console.log(`\nPreparing WRNexusJS ${version} (${all.length} packages)…\n`);
+
+  run(process.execPath, ["run", "scripts/generate-ui-component-reference.mjs"]);
+
+  run(process.execPath, ["run", "format"]);
   run(process.execPath, ["run", "check"]);
   run(process.execPath, ["run", "scripts/publish-packages.ts"]);
   validateStaging(all, version);
@@ -203,11 +207,71 @@ function prepare(all: PackageInfo[], version: string) {
   );
 }
 
+function verifyUiComponentReference(): void {
+  const result = run(
+    process.execPath,
+    ["run", "scripts/generate-ui-component-reference.mjs"],
+    root,
+    {
+      capture: true,
+      allowFailure: true,
+    },
+  );
+
+  if (result.status !== 0) {
+    const detail = result.stderr || result.stdout || "";
+
+    throw new Error(`Failed to generate the UI component reference.${detail ? `\n${detail}` : ""}`);
+  }
+
+  const changed =
+    output(
+      "git",
+      [
+        "diff",
+        "--name-only",
+        "--",
+        "packages/ui/component-reference.json",
+        "packages/ui/COMPONENTS.md",
+      ],
+      root,
+    ).trim() ||
+    output(
+      "git",
+      [
+        "ls-files",
+        "--others",
+        "--exclude-standard",
+        "--",
+        "packages/ui/component-reference.json",
+        "packages/ui/COMPONENTS.md",
+      ],
+      root,
+    ).trim();
+
+  if (changed) {
+    throw new Error(
+      "UI component reference is stale. Run " +
+        "`bun run scripts/generate-ui-component-reference.mjs`, " +
+        "then format, commit, and push the generated files.",
+    );
+  }
+}
+
 function publish(all: PackageInfo[], version: string) {
   if (!existsSync(docsRoot)) throw new Error(`Docs repository not found: ${docsRoot}`);
   requireMigration(version);
   requireCleanAndPushed(root, "Framework");
   requireCleanAndPushed(docsRoot, "Docs");
+  verifyUiComponentReference();
+
+  run(process.execPath, ["run", "scripts/generate-ui-component-reference.mjs"]);
+
+  run(process.execPath, ["run", "format"]);
+
+  requireCleanAndPushed(root, "Framework after generated references");
+
+  run(process.execPath, ["run", "scripts/publish-packages.ts"]);
 
   // Rebuild from the committed source and refuse publication if staging drifts.
   run(process.execPath, ["run", "scripts/publish-packages.ts"]);
diff --git a/update-package-versions.mjs b/update-package-versions.mjs
index 453b5e30..0fe2b9fa 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.3.3";
+const version = "0.3.4";
 
 const dependencyGroups = [
   "dependencies",