diff --git a/.publish/ai/package.json b/.publish/ai/package.json
index 74ed7b3b..d71e5135 100644
--- a/.publish/ai/package.json
+++ b/.publish/ai/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ai",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "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 699e73ea..e01ba64a 100644
--- a/.publish/authz/package.json
+++ b/.publish/authz/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/authz",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "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 758cde64..4c061bc4 100644
--- a/.publish/cli/package.json
+++ b/.publish/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/cli",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "description": "@wrnexus/cli — part of the WrNexus framework.",
   "license": "MIT",
@@ -28,16 +28,16 @@
     "wrnexus": "./dist/index.js"
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.64",
-    "@wrnexus/router": "^0.2.64",
-    "@wrnexus/csr": "^0.2.64",
-    "@wrnexus/compiler": "^0.2.64",
-    "@wrnexus/styles": "^0.2.64",
-    "@wrnexus/dev-server": "^0.2.64",
-    "@wrnexus/ui": "^0.2.64",
-    "@wrnexus/validation": "^0.2.64",
-    "@wrnexus/i18n": "^0.2.64",
-    "@wrnexus/db": "^0.2.64"
+    "@wrnexus/core": "^0.2.65",
+    "@wrnexus/router": "^0.2.65",
+    "@wrnexus/csr": "^0.2.65",
+    "@wrnexus/compiler": "^0.2.65",
+    "@wrnexus/styles": "^0.2.65",
+    "@wrnexus/dev-server": "^0.2.65",
+    "@wrnexus/ui": "^0.2.65",
+    "@wrnexus/validation": "^0.2.65",
+    "@wrnexus/i18n": "^0.2.65",
+    "@wrnexus/db": "^0.2.65"
   },
   "files": [
     "dist"
diff --git a/.publish/compiler/package.json b/.publish/compiler/package.json
index 47b83535..7a35701b 100644
--- a/.publish/compiler/package.json
+++ b/.publish/compiler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/compiler",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "description": "@wrnexus/compiler — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/.publish/core/package.json b/.publish/core/package.json
index 58ed18cc..5997ee77 100644
--- a/.publish/core/package.json
+++ b/.publish/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/core",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "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 ce64a7ed..7dd052b8 100644
--- a/.publish/csr/package.json
+++ b/.publish/csr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/csr",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "description": "@wrnexus/csr — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.64"
+    "@wrnexus/core": "^0.2.65"
   },
   "files": [
     "dist"
diff --git a/.publish/db/package.json b/.publish/db/package.json
index ae3e29a0..627e5aee 100644
--- a/.publish/db/package.json
+++ b/.publish/db/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/db",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "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 5223a415..33b6e783 100644
--- a/.publish/dev-server/package.json
+++ b/.publish/dev-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-server",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "description": "@wrnexus/dev-server — part of the WrNexus framework.",
   "license": "MIT",
@@ -25,18 +25,18 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.64",
-    "@wrnexus/router": "^0.2.64",
-    "@wrnexus/ssr": "^0.2.64",
-    "@wrnexus/csr": "^0.2.64",
-    "@wrnexus/compiler": "^0.2.64",
-    "@wrnexus/styles": "^0.2.64",
-    "@wrnexus/ui": "^0.2.64",
-    "@wrnexus/validation": "^0.2.64",
-    "@wrnexus/i18n": "^0.2.64",
-    "@wrnexus/db": "^0.2.64",
-    "@wrnexus/pubsub": "^0.2.64",
-    "@wrnexus/uploader": "^0.2.64"
+    "@wrnexus/core": "^0.2.65",
+    "@wrnexus/router": "^0.2.65",
+    "@wrnexus/ssr": "^0.2.65",
+    "@wrnexus/csr": "^0.2.65",
+    "@wrnexus/compiler": "^0.2.65",
+    "@wrnexus/styles": "^0.2.65",
+    "@wrnexus/ui": "^0.2.65",
+    "@wrnexus/validation": "^0.2.65",
+    "@wrnexus/i18n": "^0.2.65",
+    "@wrnexus/db": "^0.2.65",
+    "@wrnexus/pubsub": "^0.2.65",
+    "@wrnexus/uploader": "^0.2.65"
   },
   "files": [
     "dist"
diff --git a/.publish/encryption/package.json b/.publish/encryption/package.json
index 0d88ea66..861cd49c 100644
--- a/.publish/encryption/package.json
+++ b/.publish/encryption/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/encryption",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "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 d5707835..1ae96f5a 100644
--- a/.publish/helpers/package.json
+++ b/.publish/helpers/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/helpers",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "description": "Safe convenience helpers for WrNexus request contexts and common application flows.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.64"
+    "@wrnexus/core": "^0.2.65"
   },
   "files": [
     "dist"
diff --git a/.publish/i18n/package.json b/.publish/i18n/package.json
index e6349d3f..0da4aec8 100644
--- a/.publish/i18n/package.json
+++ b/.publish/i18n/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/i18n",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "description": "@wrnexus/i18n — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.64"
+    "@wrnexus/core": "^0.2.65"
   },
   "files": [
     "dist"
diff --git a/.publish/jwt/package.json b/.publish/jwt/package.json
index 7c712fd8..7141930f 100644
--- a/.publish/jwt/package.json
+++ b/.publish/jwt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/jwt",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "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 298a2f27..8f760cf1 100644
--- a/.publish/mobile/package.json
+++ b/.publish/mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/mobile",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "description": "@wrnexus/mobile — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/native": "^0.2.64"
+    "@wrnexus/native": "^0.2.65"
   },
   "files": [
     "dist"
diff --git a/.publish/native/package.json b/.publish/native/package.json
index b97e4a0f..76455585 100644
--- a/.publish/native/package.json
+++ b/.publish/native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/native",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "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 27e1b60c..5816393a 100644
--- a/.publish/oauth/package.json
+++ b/.publish/oauth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/oauth",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "description": "@wrnexus/oauth — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/.publish/pubsub/package.json b/.publish/pubsub/package.json
index 72657177..3bd8cc9b 100644
--- a/.publish/pubsub/package.json
+++ b/.publish/pubsub/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/pubsub",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "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 f545e1df..d565bd63 100644
--- a/.publish/queue/package.json
+++ b/.publish/queue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/queue",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "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 628226ad..07aac81e 100644
--- a/.publish/reactive/package.json
+++ b/.publish/reactive/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/reactive",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "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 cbbc002d..749283d0 100644
--- a/.publish/router/package.json
+++ b/.publish/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/router",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "description": "@wrnexus/router — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,8 +21,8 @@
     }
   },
   "dependencies": {
-    "@wrnexus/compiler": "^0.2.64",
-    "@wrnexus/core": "^0.2.64"
+    "@wrnexus/compiler": "^0.2.65",
+    "@wrnexus/core": "^0.2.65"
   },
   "files": [
     "dist"
diff --git a/.publish/ssr/package.json b/.publish/ssr/package.json
index f0924e84..caade06d 100644
--- a/.publish/ssr/package.json
+++ b/.publish/ssr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ssr",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "description": "@wrnexus/ssr — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.64"
+    "@wrnexus/core": "^0.2.65"
   },
   "files": [
     "dist"
diff --git a/.publish/styles/package.json b/.publish/styles/package.json
index d81f2e96..9aad185f 100644
--- a/.publish/styles/package.json
+++ b/.publish/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/styles",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "description": "@wrnexus/styles — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/uploader": "^0.2.64"
+    "@wrnexus/uploader": "^0.2.65"
   },
   "files": [
     "dist"
diff --git a/.publish/test/package.json b/.publish/test/package.json
index 79228f37..54a4d700 100644
--- a/.publish/test/package.json
+++ b/.publish/test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/test",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "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 e15532b1..ca7b7db0 100644
--- a/.publish/tracking/package.json
+++ b/.publish/tracking/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/tracking",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "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 11dda934..9e35069c 100644
--- a/.publish/ui/COMPONENTS.md
+++ b/.publish/ui/COMPONENTS.md
@@ -695,7 +695,7 @@ Reusable analytics dashboard preview component.
 Reusable api endpoint card component.
 
 - Mount: `data-component="ApiEndpointCard"`
-- Props: `class: string = ""`, `method: string = "GET"`, `path: string = "/api/example"`, `description: string = ""`
+- Props: `class: string = ""`, `method: string = "GET"`, `path: string = "/api/example"`, `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "View endpoint"`
 - Slots: `default`
 - Events: None
 
@@ -920,7 +920,7 @@ Reusable calendar component.
 Reusable campaign card component.
 
 - Mount: `data-component="CampaignCard"`
-- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""`
+- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = "icon-[lucide--send]"`, `class: string = ""`
 - Slots: `default`
 - Events: None
 
@@ -1001,7 +1001,7 @@ Reusable certificate upload component.
 Reusable channel card component.
 
 - Mount: `data-component="ChannelCard"`
-- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""`
+- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = "icon-[lucide--radio-tower]"`, `class: string = ""`
 - Slots: `default`
 - Events: None
 
@@ -1460,7 +1460,7 @@ Reusable favicon upload component.
 Reusable feature card component.
 
 - Mount: `data-component="FeatureCard"`
-- Props: `class: string = ""`, `icon: string = "✦"`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""`
+- Props: `class: string = ""`, `icon: string = "icon-[lucide--sparkles]"`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""`
 - Slots: None
 - Events: None
 
@@ -1748,7 +1748,7 @@ Reusable inline code component.
 Reusable integration card component.
 
 - Mount: `data-component="IntegrationCard"`
-- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""`
+- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = "icon-[lucide--plug-zap]"`, `class: string = ""`
 - Slots: `default`
 - Events: None
 
@@ -4256,8 +4256,8 @@ Reusable api version badge component.
 Reusable badge component.
 
 - Mount: `data-component="Badge"`
-- Props: `class: string = ""`, `label: string = "Badge"`, `variant: string = "neutral"`
-- Slots: None
+- Props: `class: string = ""`, `label: string = ""`, `variant: string = "neutral"`
+- Slots: `default`
 - Events: None
 
 ### Banner
diff --git a/.publish/ui/component-reference.json b/.publish/ui/component-reference.json
index 743124b9..28b87a8d 100644
--- a/.publish/ui/component-reference.json
+++ b/.publish/ui/component-reference.json
@@ -1498,11 +1498,35 @@
           "required": false,
           "default": "\"/api/example\""
         },
+        {
+          "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": "\"View endpoint\""
         }
       ],
       "slots": ["default"],
@@ -3531,7 +3555,7 @@
           "name": "label",
           "type": "string",
           "required": false,
-          "default": "\"Badge\""
+          "default": "\"\""
         },
         {
           "name": "variant",
@@ -3540,7 +3564,7 @@
           "default": "\"neutral\""
         }
       ],
-      "slots": [],
+      "slots": ["default"],
       "events": [],
       "source": "components/Badge.wrn"
     },
@@ -5296,6 +5320,12 @@
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "icon",
+          "type": "string",
+          "required": false,
+          "default": "\"icon-[lucide--send]\""
+        },
         {
           "name": "class",
           "type": "string",
@@ -6414,6 +6444,12 @@
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "icon",
+          "type": "string",
+          "required": false,
+          "default": "\"icon-[lucide--radio-tower]\""
+        },
         {
           "name": "class",
           "type": "string",
@@ -16546,7 +16582,7 @@
           "name": "icon",
           "type": "string",
           "required": false,
-          "default": "\"✦\""
+          "default": "\"icon-[lucide--sparkles]\""
         },
         {
           "name": "title",
@@ -22571,6 +22607,12 @@
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "icon",
+          "type": "string",
+          "required": false,
+          "default": "\"icon-[lucide--plug-zap]\""
+        },
         {
           "name": "class",
           "type": "string",
diff --git a/.publish/ui/components/AccessibleChartSummary.wrn b/.publish/ui/components/AccessibleChartSummary.wrn
index ad7d2af5..a69b3495 100644
--- a/.publish/ui/components/AccessibleChartSummary.wrn
+++ b/.publish/ui/components/AccessibleChartSummary.wrn
@@ -9,5 +9,7 @@ component AccessibleChartSummary {
     alt = ""
     class = ""
   }
-  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+  view {
+    <article class="wire-card wire-catalog-card {class}"><div class="grid gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center gap-2 text-sm font-bold"><span class="icon-[lucide--chart-no-axes-combined] size-5 text-violet-500" aria-hidden="true"></span>Chart summary</div><dl class="grid gap-3"><div class="flex items-center justify-between gap-4"><dt class="text-sm text-slate-500">Delivered</dt><dd class="font-bold">96.8%</dd></div><div class="flex items-center justify-between gap-4"><dt class="text-sm text-slate-500">Engaged</dt><dd class="font-bold">42.1%</dd></div><div class="flex items-center justify-between gap-4"><dt class="text-sm text-slate-500">Converted</dt><dd class="font-bold">8.7%</dd></div></dl></div>{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
+  }
 }
diff --git a/.publish/ui/components/AnalyticsDashboardPreview.wrn b/.publish/ui/components/AnalyticsDashboardPreview.wrn
index 69fa7f67..a11acc22 100644
--- a/.publish/ui/components/AnalyticsDashboardPreview.wrn
+++ b/.publish/ui/components/AnalyticsDashboardPreview.wrn
@@ -9,5 +9,7 @@ component AnalyticsDashboardPreview {
     alt = ""
     class = ""
   }
-  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+  view {
+    <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Communication performance chart trending upward over seven days" class="grid min-h-64 gap-4 rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center justify-between"><span class="text-sm font-semibold">Delivery trend</span><span class="inline-flex items-center gap-1 text-xs font-bold text-emerald-500"><span class="icon-[lucide--trending-up] size-4" aria-hidden="true"></span>18.4%</span></div><svg viewBox="0 0 600 190" role="presentation" class="h-auto w-full overflow-visible"><defs><linearGradient id="wire-analytics-fill" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="currentColor" stop-opacity="0.28"></stop><stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop></linearGradient></defs><g stroke="currentColor" stroke-opacity="0.12"><path d="M0 30H600M0 80H600M0 130H600M0 180H600"></path></g><path d="M0 157 C55 150 70 118 124 126 S205 152 255 103 S342 91 392 98 S470 67 515 74 S566 38 600 30 L600 190 L0 190 Z" fill="url(#wire-analytics-fill)" class="text-violet-500"></path><path d="M0 157 C55 150 70 118 124 126 S205 152 255 103 S342 91 392 98 S470 67 515 74 S566 38 600 30" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" class="text-violet-500"></path><g fill="currentColor" class="text-violet-500"><circle cx="124" cy="126" r="5"></circle><circle cx="255" cy="103" r="5"></circle><circle cx="392" cy="98" r="5"></circle><circle cx="515" cy="74" r="5"></circle><circle cx="600" cy="30" r="6"></circle></g></svg><div class="flex justify-between text-[0.6875rem] text-slate-500"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
+  }
 }
diff --git a/.publish/ui/components/ApiEndpointCard.wrn b/.publish/ui/components/ApiEndpointCard.wrn
index 1904224d..922fc352 100644
--- a/.publish/ui/components/ApiEndpointCard.wrn
+++ b/.publish/ui/components/ApiEndpointCard.wrn
@@ -3,7 +3,11 @@ component ApiEndpointCard {
         class = ""
         method = "GET"
         path = "/api/example"
+        eyebrow = ""
+        title = ""
         description = ""
+        href = ""
+        actionLabel = "View endpoint"
     }
 
     view {
@@ -17,7 +21,7 @@ component ApiEndpointCard {
                     {method}
                 </span>
                 <code class="text-sm font-semibold">
-                    {path}
+                    {title || path}
                 </code>
             </div>
             <p
@@ -29,6 +33,7 @@ component ApiEndpointCard {
             <div class="mt-4">
                 <slot />
             </div>
+            {#if href}<a href="{href}" class="mt-5 inline-flex items-center gap-2 text-sm font-bold text-violet-600 dark:text-violet-300">{actionLabel}<span class="icon-[lucide--arrow-right] size-4" aria-hidden="true"></span></a>{/if}
         </article>
     }
 }
diff --git a/.publish/ui/components/CampaignCard.wrn b/.publish/ui/components/CampaignCard.wrn
index 20f66081..69e07e07 100644
--- a/.publish/ui/components/CampaignCard.wrn
+++ b/.publish/ui/components/CampaignCard.wrn
@@ -3,7 +3,8 @@ component CampaignCard {
     title = ""
     description = ""
     href = ""
+    icon = "icon-[lucide--send]"
     class = ""
   }
-  view { <article class="wire-card wire-catalog-card wire-catalog-card--campaign {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--campaign {class}"><span class="wire-catalog-card__icon"><span class="{icon} size-5" aria-hidden="true"></span></span>{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a>{/if}</article> }
 }
diff --git a/.publish/ui/components/ChannelCard.wrn b/.publish/ui/components/ChannelCard.wrn
index 935cd108..1e415d74 100644
--- a/.publish/ui/components/ChannelCard.wrn
+++ b/.publish/ui/components/ChannelCard.wrn
@@ -3,7 +3,8 @@ component ChannelCard {
     title = ""
     description = ""
     href = ""
+    icon = "icon-[lucide--radio-tower]"
     class = ""
   }
-  view { <article class="wire-card wire-catalog-card wire-catalog-card--channel {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--channel {class}"><span class="wire-catalog-card__icon"><span class="{icon} size-5" aria-hidden="true"></span></span>{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a>{/if}</article> }
 }
diff --git a/.publish/ui/components/CodeBlock.wrn b/.publish/ui/components/CodeBlock.wrn
index 354f6237..5b8c1c47 100644
--- a/.publish/ui/components/CodeBlock.wrn
+++ b/.publish/ui/components/CodeBlock.wrn
@@ -7,6 +7,6 @@ component CodeBlock {
   }
   state copied = false
   view {
-    <div class="overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 text-slate-100 {class}"><div class="flex min-h-11 items-center justify-between border-b border-slate-800 px-4 text-xs text-slate-400"><span>{filename || language}</span><button type="button" @click="navigator.clipboard.writeText(code); copied = true" class="rounded-lg px-2 py-1 hover:bg-slate-800">{copied ? 'Copied' : 'Copy'}</button></div><pre class="overflow-x-auto p-4 text-sm leading-6"><code>{code}</code></pre></div>
+    <div class="min-w-0 overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 text-slate-100 shadow-2xl shadow-slate-950/20 {class}"><div class="flex min-h-12 items-center justify-between gap-4 border-b border-slate-800 px-4 text-xs text-slate-400"><span class="inline-flex min-w-0 items-center gap-2 truncate"><span class="icon-[lucide--terminal] size-4 shrink-0" aria-hidden="true"></span>{filename || language}</span><button type="button" @click="navigator.clipboard.writeText(code); copied = true" class="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-slate-700 px-2.5 py-1.5 font-semibold text-slate-300 transition hover:border-slate-600 hover:bg-slate-800 hover:text-white"><span class="{copied ? 'icon-[lucide--check]' : 'icon-[lucide--copy]'} size-3.5" aria-hidden="true"></span>{copied ? 'Copied' : 'Copy'}</button></div><pre class="m-0 max-w-full overflow-x-auto whitespace-pre-wrap break-words p-5 font-mono text-[0.8125rem] leading-6 sm:whitespace-pre"><code>{code}</code></pre></div>
   }
 }
diff --git a/.publish/ui/components/ConsentTimelinePreview.wrn b/.publish/ui/components/ConsentTimelinePreview.wrn
index 9fca41dc..5bcb0aca 100644
--- a/.publish/ui/components/ConsentTimelinePreview.wrn
+++ b/.publish/ui/components/ConsentTimelinePreview.wrn
@@ -9,5 +9,7 @@ component ConsentTimelinePreview {
     alt = ""
     class = ""
   }
-  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+  view {
+    <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Consent history showing allowed and suppressed customer channels" class="grid min-h-52 gap-3 rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center gap-3 rounded-xl border border-emerald-500/20 bg-emerald-500/10 p-3"><span class="icon-[lucide--message-circle-check] size-5 text-emerald-500" aria-hidden="true"></span><span class="grid text-sm"><strong>WhatsApp allowed</strong><span class="text-xs text-slate-500">Web form · 12 Jul, 10:24</span></span><span class="ml-auto text-xs font-bold text-emerald-600">Active</span></div><div class="flex items-center gap-3 rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-700 dark:bg-slate-900"><span class="icon-[lucide--mail-check] size-5 text-violet-500" aria-hidden="true"></span><span class="grid text-sm"><strong>Email allowed</strong><span class="text-xs text-slate-500">Preference centre · 08 Jul</span></span><span class="ml-auto text-xs font-bold text-emerald-600">Active</span></div><div class="flex items-center gap-3 rounded-xl border border-rose-500/20 bg-rose-500/5 p-3"><span class="icon-[lucide--phone-off] size-5 text-rose-500" aria-hidden="true"></span><span class="grid text-sm"><strong>Voice suppressed</strong><span class="text-xs text-slate-500">Customer request · 02 Jul</span></span><span class="ml-auto text-xs font-bold text-rose-500">Blocked</span></div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
+  }
 }
diff --git a/.publish/ui/components/ConversationPreview.wrn b/.publish/ui/components/ConversationPreview.wrn
index faad8f8f..14ba92dd 100644
--- a/.publish/ui/components/ConversationPreview.wrn
+++ b/.publish/ui/components/ConversationPreview.wrn
@@ -9,5 +9,7 @@ component ConversationPreview {
     alt = ""
     class = ""
   }
-  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+  view {
+    <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Shared inbox conversation moving from automation to a human teammate" class="grid min-h-52 gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center gap-3 border-b border-slate-200 pb-3 dark:border-slate-800"><span class="grid size-9 place-items-center rounded-full bg-violet-500/10 text-violet-500"><span class="icon-[lucide--message-circle] size-4" aria-hidden="true"></span></span><span class="grid text-sm"><strong>Order support</strong><span class="text-xs text-slate-500">Customer context attached</span></span><span class="ml-auto size-2 rounded-full bg-emerald-500"></span></div><div class="max-w-[82%] rounded-2xl rounded-tl-sm bg-white p-3 text-sm shadow-sm dark:bg-slate-900">Can I change the delivery address?</div><div class="ml-auto max-w-[82%] rounded-2xl rounded-tr-sm bg-violet-600 p-3 text-sm text-white">Absolutely — I’ll help with that now.</div><div class="inline-flex items-center gap-2 text-xs text-slate-500"><span class="icon-[lucide--bot] size-4" aria-hidden="true"></span>Automation handed off to Maya</div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
+  }
 }
diff --git a/.publish/ui/components/FeatureCard.wrn b/.publish/ui/components/FeatureCard.wrn
index 8f626920..dcf950cc 100644
--- a/.publish/ui/components/FeatureCard.wrn
+++ b/.publish/ui/components/FeatureCard.wrn
@@ -1,12 +1,12 @@
 component FeatureCard {
   props {
     class = ""
-    icon = "✦"
+    icon = "icon-[lucide--sparkles]"
     title = "Feature"
     description = ""
     href = ""
   }
   view {
-    <article class="group rounded-2xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-violet-300 hover:shadow-xl dark:border-slate-800 dark:bg-slate-900 {class}"><div class="flex size-11 items-center justify-center rounded-xl bg-violet-100 text-xl text-violet-700 transition group-hover:scale-110 dark:bg-violet-950 dark:text-violet-300">{icon}</div><h3 class="mt-5 text-lg font-bold">{title}</h3><p class="mt-2 leading-7 text-slate-600 dark:text-slate-300">{description}</p><a data-show="href" href="{href}" class="mt-4 inline-flex font-semibold text-violet-600">Learn more →</a></article>
+    <article class="group rounded-2xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-violet-300 hover:shadow-xl dark:border-slate-800 dark:bg-slate-900 {class}"><div class="flex size-11 items-center justify-center rounded-xl border border-violet-500/20 bg-violet-500/10 text-violet-700 transition group-hover:scale-105 dark:text-violet-300"><span class="{icon} size-5" aria-hidden="true"></span></div><h3 class="mt-5 text-lg font-bold">{title}</h3><p class="mt-2 leading-7 text-slate-600 dark:text-slate-300">{description}</p>{#if href}<a href="{href}" class="mt-4 inline-flex items-center gap-2 font-semibold text-violet-600">Learn more<span class="icon-[lucide--arrow-right] size-4" aria-hidden="true"></span></a>{/if}</article>
   }
 }
diff --git a/.publish/ui/components/FeatureChecklist.wrn b/.publish/ui/components/FeatureChecklist.wrn
index f9b9d4c9..a1dc3b99 100644
--- a/.publish/ui/components/FeatureChecklist.wrn
+++ b/.publish/ui/components/FeatureChecklist.wrn
@@ -9,5 +9,7 @@ component FeatureChecklist {
     alt = ""
     class = ""
   }
-  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+  view {
+    <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="presentation" class="grid grid-cols-[auto_1fr] gap-4 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60"><span class="grid size-10 place-items-center rounded-xl bg-violet-500/10 text-violet-500"><span class="icon-[lucide--list-checks] size-5" aria-hidden="true"></span></span><div class="grid gap-2"><span class="h-2 w-4/5 rounded-full bg-slate-200 dark:bg-slate-800"></span><span class="h-2 w-3/5 rounded-full bg-slate-200 dark:bg-slate-800"></span><span class="h-2 w-2/3 rounded-full bg-slate-200 dark:bg-slate-800"></span></div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
+  }
 }
diff --git a/.publish/ui/components/IntegrationCard.wrn b/.publish/ui/components/IntegrationCard.wrn
index ffe85722..e4fd9d30 100644
--- a/.publish/ui/components/IntegrationCard.wrn
+++ b/.publish/ui/components/IntegrationCard.wrn
@@ -3,7 +3,8 @@ component IntegrationCard {
     title = ""
     description = ""
     href = ""
+    icon = "icon-[lucide--plug-zap]"
     class = ""
   }
-  view { <article class="wire-card wire-catalog-card wire-catalog-card--integration {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--integration {class}"><span class="wire-catalog-card__icon"><span class="{icon} size-5" aria-hidden="true"></span></span>{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a>{/if}</article> }
 }
diff --git a/.publish/ui/components/SectionActions.wrn b/.publish/ui/components/SectionActions.wrn
index df707cc7..3e9e1c65 100644
--- a/.publish/ui/components/SectionActions.wrn
+++ b/.publish/ui/components/SectionActions.wrn
@@ -7,5 +7,7 @@ component SectionActions {
     disabled = false
     class = ""
   }
-  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+  view {
+    <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button>{/if}</span>
+  }
 }
diff --git a/.publish/ui/components/SmartRouteDiagram.wrn b/.publish/ui/components/SmartRouteDiagram.wrn
index 848b436d..3401b7f3 100644
--- a/.publish/ui/components/SmartRouteDiagram.wrn
+++ b/.publish/ui/components/SmartRouteDiagram.wrn
@@ -7,5 +7,5 @@ component SmartRouteDiagram {
     loading = false
     class = ""
   }
-  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption>{#if title}<strong>{title}</strong>{/if}{#if value}<span class="wire-metric__value">{value}</span>{/if}{#if description}<span class="wire-muted">{description}</span>{/if}</figcaption>{#if loading}<div class="wire-skeleton wire-catalog-visualization__skeleton"></div>{:else}<div class="wire-catalog-visualization__content"><slot /></div>{/if}{#if summary}<p class="wire-visually-hidden">{summary}</p>{/if}</figure> }
 }
diff --git a/.publish/ui/components/TrustBadgeList.wrn b/.publish/ui/components/TrustBadgeList.wrn
index a5e3e4ac..e504eedf 100644
--- a/.publish/ui/components/TrustBadgeList.wrn
+++ b/.publish/ui/components/TrustBadgeList.wrn
@@ -6,5 +6,10 @@ component TrustBadgeList {
     emptyText = "No items available."
     class = ""
   }
-  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+  view {
+    <section class="wire-catalog-collection {class}">
+      {#if title || description}<header>{#if title}<h2>{title}</h2>{/if}{#if description}<p>{description}</p>{/if}</header>{/if}
+      {#if empty}<p role="status" class="wire-muted">{emptyText}</p>{:else}<div role="list" class="wire-catalog-collection__items"><slot /></div>{/if}
+    </section>
+  }
 }
diff --git a/.publish/ui/components/UnifiedTimelinePreview.wrn b/.publish/ui/components/UnifiedTimelinePreview.wrn
index 7a463085..4e0fbb4b 100644
--- a/.publish/ui/components/UnifiedTimelinePreview.wrn
+++ b/.publish/ui/components/UnifiedTimelinePreview.wrn
@@ -9,5 +9,7 @@ component UnifiedTimelinePreview {
     alt = ""
     class = ""
   }
-  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+  view {
+    <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Unified customer timeline across automated and human interactions" class="grid min-h-52 gap-0 rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60"><div class="grid grid-cols-[auto_1fr_auto] items-start gap-3"><span class="grid size-8 place-items-center rounded-lg bg-violet-500/10 text-violet-500"><span class="icon-[lucide--zap] size-4" aria-hidden="true"></span></span><span><strong class="block text-sm">Workflow triggered</strong><span class="text-xs text-slate-500">Order status changed</span></span><time class="text-xs text-slate-500">09:42</time></div><div class="ml-4 h-5 border-l border-dashed border-slate-300 dark:border-slate-700"></div><div class="grid grid-cols-[auto_1fr_auto] items-start gap-3"><span class="grid size-8 place-items-center rounded-lg bg-emerald-500/10 text-emerald-500"><span class="icon-[lucide--message-square-check] size-4" aria-hidden="true"></span></span><span><strong class="block text-sm">WhatsApp delivered</strong><span class="text-xs text-slate-500">Template: order shipped</span></span><time class="text-xs text-slate-500">09:43</time></div><div class="ml-4 h-5 border-l border-dashed border-slate-300 dark:border-slate-700"></div><div class="grid grid-cols-[auto_1fr_auto] items-start gap-3"><span class="grid size-8 place-items-center rounded-lg bg-sky-500/10 text-sky-500"><span class="icon-[lucide--user-round-check] size-4" aria-hidden="true"></span></span><span><strong class="block text-sm">Human follow-up</strong><span class="text-xs text-slate-500">Assigned to support</span></span><time class="text-xs text-slate-500">09:48</time></div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
+  }
 }
diff --git a/.publish/ui/components/WorkflowCanvasPreview.wrn b/.publish/ui/components/WorkflowCanvasPreview.wrn
index 70d47a4b..97d92844 100644
--- a/.publish/ui/components/WorkflowCanvasPreview.wrn
+++ b/.publish/ui/components/WorkflowCanvasPreview.wrn
@@ -9,5 +9,10 @@ component WorkflowCanvasPreview {
     alt = ""
     class = ""
   }
-  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+  view {
+    <article class="wire-card wire-catalog-card {class}">
+      {#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Automation workflow with trigger, decision, and channel delivery steps" class="relative grid min-h-52 grid-cols-[1fr_auto_1fr] items-center gap-3 overflow-hidden rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60"><div class="grid gap-2 rounded-xl border border-slate-200 bg-white p-3 shadow-sm dark:border-slate-700 dark:bg-slate-900"><span class="icon-[lucide--webhook] size-5 text-violet-500" aria-hidden="true"></span><strong class="text-sm">Event received</strong><span class="text-xs text-slate-500">Order shipped</span></div><span class="icon-[lucide--arrow-right] size-5 text-slate-400" aria-hidden="true"></span><div class="grid gap-2 rounded-xl border border-violet-500/30 bg-violet-500/10 p-3"><span class="icon-[lucide--workflow] size-5 text-violet-500" aria-hidden="true"></span><strong class="text-sm">Smart route</strong><span class="text-xs text-slate-500">Consent + availability</span></div><span class="absolute bottom-3 left-1/2 inline-flex -translate-x-1/2 items-center gap-2 rounded-full border border-emerald-500/20 bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-600 dark:text-emerald-300"><span class="icon-[lucide--circle-check] size-3.5" aria-hidden="true"></span>Delivered</span></div>{/if}
+      {#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}
+    </article>
+  }
 }
diff --git a/.publish/ui/components/badge.wrn b/.publish/ui/components/badge.wrn
index 5012e018..875f9362 100644
--- a/.publish/ui/components/badge.wrn
+++ b/.publish/ui/components/badge.wrn
@@ -1,10 +1,10 @@
 component Badge {
   props {
     class = ""
-    label = "Badge"
+    label = ""
     variant = "neutral"
   }
   view {
-    <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset {variant === 'success' ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-950/40 dark:text-emerald-300' : variant === 'warning' ? 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-950/40 dark:text-amber-300' : variant === 'danger' ? 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-950/40 dark:text-red-300' : variant === 'brand' ? 'bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-950/40 dark:text-violet-300' : 'bg-slate-100 text-slate-700 ring-slate-600/10 dark:bg-slate-800 dark:text-slate-300'} {class}">{label}</span>
+    <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset {variant === 'success' ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-950/40 dark:text-emerald-300' : variant === 'warning' ? 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-950/40 dark:text-amber-300' : variant === 'danger' ? 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-950/40 dark:text-red-300' : variant === 'brand' ? 'bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-950/40 dark:text-violet-300' : 'bg-slate-100 text-slate-700 ring-slate-600/10 dark:bg-slate-800 dark:text-slate-300'} {class}">{label}<slot /></span>
   }
 }
diff --git a/.publish/ui/package.json b/.publish/ui/package.json
index ec96f696..70f49506 100644
--- a/.publish/ui/package.json
+++ b/.publish/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "description": "@wrnexus/ui — part of the WrNexus framework.",
   "license": "MIT",
@@ -25,7 +25,7 @@
     "./ui.css": "./ui.css"
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.64"
+    "@wrnexus/core": "^0.2.65"
   },
   "files": [
     "dist",
diff --git a/.publish/ui/ui.css b/.publish/ui/ui.css
index 6ac0b917..65e36d33 100644
--- a/.publish/ui/ui.css
+++ b/.publish/ui/ui.css
@@ -1365,7 +1365,7 @@
     transform var(--wire-motion-base) var(--wire-ease-emphasized);
 }
 .wire-catalog-card::before {
-  display: grid;
+  display: none;
   width: 2.75rem;
   height: 2.75rem;
   place-items: center;
@@ -1377,6 +1377,17 @@
   border-radius: calc(var(--wire-radius) * 0.8);
   background: color-mix(in srgb, var(--wire-color-primary) 12%, transparent);
 }
+.wire-catalog-card__icon {
+  display: grid;
+  width: 2.75rem;
+  height: 2.75rem;
+  place-items: center;
+  margin-bottom: 0.35rem;
+  color: var(--wire-color-primary);
+  border: 1px solid color-mix(in srgb, var(--wire-color-primary) 28%, transparent);
+  border-radius: calc(var(--wire-radius) * 0.8);
+  background: color-mix(in srgb, var(--wire-color-primary) 10%, transparent);
+}
 .wire-catalog-card--channel::before {
   content: "◉";
 }
diff --git a/.publish/uploader/package.json b/.publish/uploader/package.json
index 4525bd08..6dd288e3 100644
--- a/.publish/uploader/package.json
+++ b/.publish/uploader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/uploader",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "description": "@wrnexus/uploader — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.64"
+    "@wrnexus/core": "^0.2.65"
   },
   "files": [
     "dist"
diff --git a/.publish/validation/package.json b/.publish/validation/package.json
index 161e75b2..76f21bda 100644
--- a/.publish/validation/package.json
+++ b/.publish/validation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/validation",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "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 c92be37e..eb816768 100644
--- a/packages/ai/package.json
+++ b/packages/ai/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ai",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "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 94bd334a..ff4b4921 100644
--- a/packages/authz/package.json
+++ b/packages/authz/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/authz",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index bbe37111..85cb21e9 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/cli",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/compiler/package.json b/packages/compiler/package.json
index 2a4486c7..2388ecfb 100644
--- a/packages/compiler/package.json
+++ b/packages/compiler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/compiler",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/core/package.json b/packages/core/package.json
index a48150b8..88357025 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/core",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/csr/package.json b/packages/csr/package.json
index 822c78c2..d0279cd9 100644
--- a/packages/csr/package.json
+++ b/packages/csr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/csr",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/db/package.json b/packages/db/package.json
index 3ff3933d..6aa0963f 100644
--- a/packages/db/package.json
+++ b/packages/db/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/db",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
index f32051a3..e5a9e438 100644
--- a/packages/dev-server/package.json
+++ b/packages/dev-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-server",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/encryption/package.json b/packages/encryption/package.json
index aba82f1a..78d121b1 100644
--- a/packages/encryption/package.json
+++ b/packages/encryption/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/encryption",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/helpers/package.json b/packages/helpers/package.json
index c94ef104..5efdb77e 100644
--- a/packages/helpers/package.json
+++ b/packages/helpers/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/helpers",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "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 f31cf8bd..46891718 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/i18n",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/jwt/package.json b/packages/jwt/package.json
index f030fae1..11d74c7d 100644
--- a/packages/jwt/package.json
+++ b/packages/jwt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/jwt",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/mobile/package.json b/packages/mobile/package.json
index 705d89ef..9f0a6691 100644
--- a/packages/mobile/package.json
+++ b/packages/mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/mobile",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/native/package.json b/packages/native/package.json
index c821a3ba..2bfdee13 100644
--- a/packages/native/package.json
+++ b/packages/native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/native",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/oauth/package.json b/packages/oauth/package.json
index f317f9a2..f0610ea7 100644
--- a/packages/oauth/package.json
+++ b/packages/oauth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/oauth",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/pubsub/package.json b/packages/pubsub/package.json
index 159d90f1..adb3b60d 100644
--- a/packages/pubsub/package.json
+++ b/packages/pubsub/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/pubsub",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/queue/package.json b/packages/queue/package.json
index ea9fad27..95fd376b 100644
--- a/packages/queue/package.json
+++ b/packages/queue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/queue",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/reactive/package.json b/packages/reactive/package.json
index 284f739b..79656314 100644
--- a/packages/reactive/package.json
+++ b/packages/reactive/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/reactive",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/router/package.json b/packages/router/package.json
index 545e3222..666f0871 100644
--- a/packages/router/package.json
+++ b/packages/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/router",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/ssr/package.json b/packages/ssr/package.json
index cae93cec..fbefb857 100644
--- a/packages/ssr/package.json
+++ b/packages/ssr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ssr",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 1968c6c4..0fde2d1a 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/styles",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/test/package.json b/packages/test/package.json
index cd060a3d..9c12f6e0 100644
--- a/packages/test/package.json
+++ b/packages/test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/test",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/tracking/package.json b/packages/tracking/package.json
index 1c1ed4fd..3797c757 100644
--- a/packages/tracking/package.json
+++ b/packages/tracking/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/tracking",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/ui/COMPONENTS.md b/packages/ui/COMPONENTS.md
index 11dda934..9e35069c 100644
--- a/packages/ui/COMPONENTS.md
+++ b/packages/ui/COMPONENTS.md
@@ -695,7 +695,7 @@ Reusable analytics dashboard preview component.
 Reusable api endpoint card component.
 
 - Mount: `data-component="ApiEndpointCard"`
-- Props: `class: string = ""`, `method: string = "GET"`, `path: string = "/api/example"`, `description: string = ""`
+- Props: `class: string = ""`, `method: string = "GET"`, `path: string = "/api/example"`, `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "View endpoint"`
 - Slots: `default`
 - Events: None
 
@@ -920,7 +920,7 @@ Reusable calendar component.
 Reusable campaign card component.
 
 - Mount: `data-component="CampaignCard"`
-- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""`
+- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = "icon-[lucide--send]"`, `class: string = ""`
 - Slots: `default`
 - Events: None
 
@@ -1001,7 +1001,7 @@ Reusable certificate upload component.
 Reusable channel card component.
 
 - Mount: `data-component="ChannelCard"`
-- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""`
+- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = "icon-[lucide--radio-tower]"`, `class: string = ""`
 - Slots: `default`
 - Events: None
 
@@ -1460,7 +1460,7 @@ Reusable favicon upload component.
 Reusable feature card component.
 
 - Mount: `data-component="FeatureCard"`
-- Props: `class: string = ""`, `icon: string = "✦"`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""`
+- Props: `class: string = ""`, `icon: string = "icon-[lucide--sparkles]"`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""`
 - Slots: None
 - Events: None
 
@@ -1748,7 +1748,7 @@ Reusable inline code component.
 Reusable integration card component.
 
 - Mount: `data-component="IntegrationCard"`
-- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `class: string = ""`
+- Props: `title: string = ""`, `description: string = ""`, `href: string = ""`, `icon: string = "icon-[lucide--plug-zap]"`, `class: string = ""`
 - Slots: `default`
 - Events: None
 
@@ -4256,8 +4256,8 @@ Reusable api version badge component.
 Reusable badge component.
 
 - Mount: `data-component="Badge"`
-- Props: `class: string = ""`, `label: string = "Badge"`, `variant: string = "neutral"`
-- Slots: None
+- Props: `class: string = ""`, `label: string = ""`, `variant: string = "neutral"`
+- Slots: `default`
 - Events: None
 
 ### Banner
diff --git a/packages/ui/component-reference.json b/packages/ui/component-reference.json
index 743124b9..28b87a8d 100644
--- a/packages/ui/component-reference.json
+++ b/packages/ui/component-reference.json
@@ -1498,11 +1498,35 @@
           "required": false,
           "default": "\"/api/example\""
         },
+        {
+          "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": "\"View endpoint\""
         }
       ],
       "slots": ["default"],
@@ -3531,7 +3555,7 @@
           "name": "label",
           "type": "string",
           "required": false,
-          "default": "\"Badge\""
+          "default": "\"\""
         },
         {
           "name": "variant",
@@ -3540,7 +3564,7 @@
           "default": "\"neutral\""
         }
       ],
-      "slots": [],
+      "slots": ["default"],
       "events": [],
       "source": "components/Badge.wrn"
     },
@@ -5296,6 +5320,12 @@
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "icon",
+          "type": "string",
+          "required": false,
+          "default": "\"icon-[lucide--send]\""
+        },
         {
           "name": "class",
           "type": "string",
@@ -6414,6 +6444,12 @@
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "icon",
+          "type": "string",
+          "required": false,
+          "default": "\"icon-[lucide--radio-tower]\""
+        },
         {
           "name": "class",
           "type": "string",
@@ -16546,7 +16582,7 @@
           "name": "icon",
           "type": "string",
           "required": false,
-          "default": "\"✦\""
+          "default": "\"icon-[lucide--sparkles]\""
         },
         {
           "name": "title",
@@ -22571,6 +22607,12 @@
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "icon",
+          "type": "string",
+          "required": false,
+          "default": "\"icon-[lucide--plug-zap]\""
+        },
         {
           "name": "class",
           "type": "string",
diff --git a/packages/ui/components/AccessibleChartSummary.wrn b/packages/ui/components/AccessibleChartSummary.wrn
index ad7d2af5..a69b3495 100644
--- a/packages/ui/components/AccessibleChartSummary.wrn
+++ b/packages/ui/components/AccessibleChartSummary.wrn
@@ -9,5 +9,7 @@ component AccessibleChartSummary {
     alt = ""
     class = ""
   }
-  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+  view {
+    <article class="wire-card wire-catalog-card {class}"><div class="grid gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center gap-2 text-sm font-bold"><span class="icon-[lucide--chart-no-axes-combined] size-5 text-violet-500" aria-hidden="true"></span>Chart summary</div><dl class="grid gap-3"><div class="flex items-center justify-between gap-4"><dt class="text-sm text-slate-500">Delivered</dt><dd class="font-bold">96.8%</dd></div><div class="flex items-center justify-between gap-4"><dt class="text-sm text-slate-500">Engaged</dt><dd class="font-bold">42.1%</dd></div><div class="flex items-center justify-between gap-4"><dt class="text-sm text-slate-500">Converted</dt><dd class="font-bold">8.7%</dd></div></dl></div>{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
+  }
 }
diff --git a/packages/ui/components/AnalyticsDashboardPreview.wrn b/packages/ui/components/AnalyticsDashboardPreview.wrn
index 69fa7f67..a11acc22 100644
--- a/packages/ui/components/AnalyticsDashboardPreview.wrn
+++ b/packages/ui/components/AnalyticsDashboardPreview.wrn
@@ -9,5 +9,7 @@ component AnalyticsDashboardPreview {
     alt = ""
     class = ""
   }
-  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+  view {
+    <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Communication performance chart trending upward over seven days" class="grid min-h-64 gap-4 rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center justify-between"><span class="text-sm font-semibold">Delivery trend</span><span class="inline-flex items-center gap-1 text-xs font-bold text-emerald-500"><span class="icon-[lucide--trending-up] size-4" aria-hidden="true"></span>18.4%</span></div><svg viewBox="0 0 600 190" role="presentation" class="h-auto w-full overflow-visible"><defs><linearGradient id="wire-analytics-fill" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="currentColor" stop-opacity="0.28"></stop><stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop></linearGradient></defs><g stroke="currentColor" stroke-opacity="0.12"><path d="M0 30H600M0 80H600M0 130H600M0 180H600"></path></g><path d="M0 157 C55 150 70 118 124 126 S205 152 255 103 S342 91 392 98 S470 67 515 74 S566 38 600 30 L600 190 L0 190 Z" fill="url(#wire-analytics-fill)" class="text-violet-500"></path><path d="M0 157 C55 150 70 118 124 126 S205 152 255 103 S342 91 392 98 S470 67 515 74 S566 38 600 30" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" class="text-violet-500"></path><g fill="currentColor" class="text-violet-500"><circle cx="124" cy="126" r="5"></circle><circle cx="255" cy="103" r="5"></circle><circle cx="392" cy="98" r="5"></circle><circle cx="515" cy="74" r="5"></circle><circle cx="600" cy="30" r="6"></circle></g></svg><div class="flex justify-between text-[0.6875rem] text-slate-500"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
+  }
 }
diff --git a/packages/ui/components/ApiEndpointCard.wrn b/packages/ui/components/ApiEndpointCard.wrn
index 1904224d..922fc352 100644
--- a/packages/ui/components/ApiEndpointCard.wrn
+++ b/packages/ui/components/ApiEndpointCard.wrn
@@ -3,7 +3,11 @@ component ApiEndpointCard {
         class = ""
         method = "GET"
         path = "/api/example"
+        eyebrow = ""
+        title = ""
         description = ""
+        href = ""
+        actionLabel = "View endpoint"
     }
 
     view {
@@ -17,7 +21,7 @@ component ApiEndpointCard {
                     {method}
                 </span>
                 <code class="text-sm font-semibold">
-                    {path}
+                    {title || path}
                 </code>
             </div>
             <p
@@ -29,6 +33,7 @@ component ApiEndpointCard {
             <div class="mt-4">
                 <slot />
             </div>
+            {#if href}<a href="{href}" class="mt-5 inline-flex items-center gap-2 text-sm font-bold text-violet-600 dark:text-violet-300">{actionLabel}<span class="icon-[lucide--arrow-right] size-4" aria-hidden="true"></span></a>{/if}
         </article>
     }
 }
diff --git a/packages/ui/components/CampaignCard.wrn b/packages/ui/components/CampaignCard.wrn
index 20f66081..69e07e07 100644
--- a/packages/ui/components/CampaignCard.wrn
+++ b/packages/ui/components/CampaignCard.wrn
@@ -3,7 +3,8 @@ component CampaignCard {
     title = ""
     description = ""
     href = ""
+    icon = "icon-[lucide--send]"
     class = ""
   }
-  view { <article class="wire-card wire-catalog-card wire-catalog-card--campaign {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--campaign {class}"><span class="wire-catalog-card__icon"><span class="{icon} size-5" aria-hidden="true"></span></span>{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a>{/if}</article> }
 }
diff --git a/packages/ui/components/ChannelCard.wrn b/packages/ui/components/ChannelCard.wrn
index 935cd108..1e415d74 100644
--- a/packages/ui/components/ChannelCard.wrn
+++ b/packages/ui/components/ChannelCard.wrn
@@ -3,7 +3,8 @@ component ChannelCard {
     title = ""
     description = ""
     href = ""
+    icon = "icon-[lucide--radio-tower]"
     class = ""
   }
-  view { <article class="wire-card wire-catalog-card wire-catalog-card--channel {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--channel {class}"><span class="wire-catalog-card__icon"><span class="{icon} size-5" aria-hidden="true"></span></span>{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a>{/if}</article> }
 }
diff --git a/packages/ui/components/CodeBlock.wrn b/packages/ui/components/CodeBlock.wrn
index 354f6237..5b8c1c47 100644
--- a/packages/ui/components/CodeBlock.wrn
+++ b/packages/ui/components/CodeBlock.wrn
@@ -7,6 +7,6 @@ component CodeBlock {
   }
   state copied = false
   view {
-    <div class="overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 text-slate-100 {class}"><div class="flex min-h-11 items-center justify-between border-b border-slate-800 px-4 text-xs text-slate-400"><span>{filename || language}</span><button type="button" @click="navigator.clipboard.writeText(code); copied = true" class="rounded-lg px-2 py-1 hover:bg-slate-800">{copied ? 'Copied' : 'Copy'}</button></div><pre class="overflow-x-auto p-4 text-sm leading-6"><code>{code}</code></pre></div>
+    <div class="min-w-0 overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 text-slate-100 shadow-2xl shadow-slate-950/20 {class}"><div class="flex min-h-12 items-center justify-between gap-4 border-b border-slate-800 px-4 text-xs text-slate-400"><span class="inline-flex min-w-0 items-center gap-2 truncate"><span class="icon-[lucide--terminal] size-4 shrink-0" aria-hidden="true"></span>{filename || language}</span><button type="button" @click="navigator.clipboard.writeText(code); copied = true" class="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-slate-700 px-2.5 py-1.5 font-semibold text-slate-300 transition hover:border-slate-600 hover:bg-slate-800 hover:text-white"><span class="{copied ? 'icon-[lucide--check]' : 'icon-[lucide--copy]'} size-3.5" aria-hidden="true"></span>{copied ? 'Copied' : 'Copy'}</button></div><pre class="m-0 max-w-full overflow-x-auto whitespace-pre-wrap break-words p-5 font-mono text-[0.8125rem] leading-6 sm:whitespace-pre"><code>{code}</code></pre></div>
   }
 }
diff --git a/packages/ui/components/ConsentTimelinePreview.wrn b/packages/ui/components/ConsentTimelinePreview.wrn
index 9fca41dc..5bcb0aca 100644
--- a/packages/ui/components/ConsentTimelinePreview.wrn
+++ b/packages/ui/components/ConsentTimelinePreview.wrn
@@ -9,5 +9,7 @@ component ConsentTimelinePreview {
     alt = ""
     class = ""
   }
-  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+  view {
+    <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Consent history showing allowed and suppressed customer channels" class="grid min-h-52 gap-3 rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center gap-3 rounded-xl border border-emerald-500/20 bg-emerald-500/10 p-3"><span class="icon-[lucide--message-circle-check] size-5 text-emerald-500" aria-hidden="true"></span><span class="grid text-sm"><strong>WhatsApp allowed</strong><span class="text-xs text-slate-500">Web form · 12 Jul, 10:24</span></span><span class="ml-auto text-xs font-bold text-emerald-600">Active</span></div><div class="flex items-center gap-3 rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-700 dark:bg-slate-900"><span class="icon-[lucide--mail-check] size-5 text-violet-500" aria-hidden="true"></span><span class="grid text-sm"><strong>Email allowed</strong><span class="text-xs text-slate-500">Preference centre · 08 Jul</span></span><span class="ml-auto text-xs font-bold text-emerald-600">Active</span></div><div class="flex items-center gap-3 rounded-xl border border-rose-500/20 bg-rose-500/5 p-3"><span class="icon-[lucide--phone-off] size-5 text-rose-500" aria-hidden="true"></span><span class="grid text-sm"><strong>Voice suppressed</strong><span class="text-xs text-slate-500">Customer request · 02 Jul</span></span><span class="ml-auto text-xs font-bold text-rose-500">Blocked</span></div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
+  }
 }
diff --git a/packages/ui/components/ConversationPreview.wrn b/packages/ui/components/ConversationPreview.wrn
index faad8f8f..14ba92dd 100644
--- a/packages/ui/components/ConversationPreview.wrn
+++ b/packages/ui/components/ConversationPreview.wrn
@@ -9,5 +9,7 @@ component ConversationPreview {
     alt = ""
     class = ""
   }
-  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+  view {
+    <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Shared inbox conversation moving from automation to a human teammate" class="grid min-h-52 gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center gap-3 border-b border-slate-200 pb-3 dark:border-slate-800"><span class="grid size-9 place-items-center rounded-full bg-violet-500/10 text-violet-500"><span class="icon-[lucide--message-circle] size-4" aria-hidden="true"></span></span><span class="grid text-sm"><strong>Order support</strong><span class="text-xs text-slate-500">Customer context attached</span></span><span class="ml-auto size-2 rounded-full bg-emerald-500"></span></div><div class="max-w-[82%] rounded-2xl rounded-tl-sm bg-white p-3 text-sm shadow-sm dark:bg-slate-900">Can I change the delivery address?</div><div class="ml-auto max-w-[82%] rounded-2xl rounded-tr-sm bg-violet-600 p-3 text-sm text-white">Absolutely — I’ll help with that now.</div><div class="inline-flex items-center gap-2 text-xs text-slate-500"><span class="icon-[lucide--bot] size-4" aria-hidden="true"></span>Automation handed off to Maya</div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
+  }
 }
diff --git a/packages/ui/components/FeatureCard.wrn b/packages/ui/components/FeatureCard.wrn
index 8f626920..dcf950cc 100644
--- a/packages/ui/components/FeatureCard.wrn
+++ b/packages/ui/components/FeatureCard.wrn
@@ -1,12 +1,12 @@
 component FeatureCard {
   props {
     class = ""
-    icon = "✦"
+    icon = "icon-[lucide--sparkles]"
     title = "Feature"
     description = ""
     href = ""
   }
   view {
-    <article class="group rounded-2xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-violet-300 hover:shadow-xl dark:border-slate-800 dark:bg-slate-900 {class}"><div class="flex size-11 items-center justify-center rounded-xl bg-violet-100 text-xl text-violet-700 transition group-hover:scale-110 dark:bg-violet-950 dark:text-violet-300">{icon}</div><h3 class="mt-5 text-lg font-bold">{title}</h3><p class="mt-2 leading-7 text-slate-600 dark:text-slate-300">{description}</p><a data-show="href" href="{href}" class="mt-4 inline-flex font-semibold text-violet-600">Learn more →</a></article>
+    <article class="group rounded-2xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-violet-300 hover:shadow-xl dark:border-slate-800 dark:bg-slate-900 {class}"><div class="flex size-11 items-center justify-center rounded-xl border border-violet-500/20 bg-violet-500/10 text-violet-700 transition group-hover:scale-105 dark:text-violet-300"><span class="{icon} size-5" aria-hidden="true"></span></div><h3 class="mt-5 text-lg font-bold">{title}</h3><p class="mt-2 leading-7 text-slate-600 dark:text-slate-300">{description}</p>{#if href}<a href="{href}" class="mt-4 inline-flex items-center gap-2 font-semibold text-violet-600">Learn more<span class="icon-[lucide--arrow-right] size-4" aria-hidden="true"></span></a>{/if}</article>
   }
 }
diff --git a/packages/ui/components/FeatureChecklist.wrn b/packages/ui/components/FeatureChecklist.wrn
index f9b9d4c9..a1dc3b99 100644
--- a/packages/ui/components/FeatureChecklist.wrn
+++ b/packages/ui/components/FeatureChecklist.wrn
@@ -9,5 +9,7 @@ component FeatureChecklist {
     alt = ""
     class = ""
   }
-  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+  view {
+    <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="presentation" class="grid grid-cols-[auto_1fr] gap-4 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60"><span class="grid size-10 place-items-center rounded-xl bg-violet-500/10 text-violet-500"><span class="icon-[lucide--list-checks] size-5" aria-hidden="true"></span></span><div class="grid gap-2"><span class="h-2 w-4/5 rounded-full bg-slate-200 dark:bg-slate-800"></span><span class="h-2 w-3/5 rounded-full bg-slate-200 dark:bg-slate-800"></span><span class="h-2 w-2/3 rounded-full bg-slate-200 dark:bg-slate-800"></span></div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
+  }
 }
diff --git a/packages/ui/components/IntegrationCard.wrn b/packages/ui/components/IntegrationCard.wrn
index ffe85722..e4fd9d30 100644
--- a/packages/ui/components/IntegrationCard.wrn
+++ b/packages/ui/components/IntegrationCard.wrn
@@ -3,7 +3,8 @@ component IntegrationCard {
     title = ""
     description = ""
     href = ""
+    icon = "icon-[lucide--plug-zap]"
     class = ""
   }
-  view { <article class="wire-card wire-catalog-card wire-catalog-card--integration {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
+  view { <article class="wire-card wire-catalog-card wire-catalog-card--integration {class}"><span class="wire-catalog-card__icon"><span class="{icon} size-5" aria-hidden="true"></span></span>{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a>{/if}</article> }
 }
diff --git a/packages/ui/components/SectionActions.wrn b/packages/ui/components/SectionActions.wrn
index df707cc7..3e9e1c65 100644
--- a/packages/ui/components/SectionActions.wrn
+++ b/packages/ui/components/SectionActions.wrn
@@ -7,5 +7,7 @@ component SectionActions {
     disabled = false
     class = ""
   }
-  view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
+  view {
+    <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button>{/if}</span>
+  }
 }
diff --git a/packages/ui/components/SmartRouteDiagram.wrn b/packages/ui/components/SmartRouteDiagram.wrn
index 848b436d..3401b7f3 100644
--- a/packages/ui/components/SmartRouteDiagram.wrn
+++ b/packages/ui/components/SmartRouteDiagram.wrn
@@ -7,5 +7,5 @@ component SmartRouteDiagram {
     loading = false
     class = ""
   }
-  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
+  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption>{#if title}<strong>{title}</strong>{/if}{#if value}<span class="wire-metric__value">{value}</span>{/if}{#if description}<span class="wire-muted">{description}</span>{/if}</figcaption>{#if loading}<div class="wire-skeleton wire-catalog-visualization__skeleton"></div>{:else}<div class="wire-catalog-visualization__content"><slot /></div>{/if}{#if summary}<p class="wire-visually-hidden">{summary}</p>{/if}</figure> }
 }
diff --git a/packages/ui/components/TrustBadgeList.wrn b/packages/ui/components/TrustBadgeList.wrn
index a5e3e4ac..e504eedf 100644
--- a/packages/ui/components/TrustBadgeList.wrn
+++ b/packages/ui/components/TrustBadgeList.wrn
@@ -6,5 +6,10 @@ component TrustBadgeList {
     emptyText = "No items available."
     class = ""
   }
-  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
+  view {
+    <section class="wire-catalog-collection {class}">
+      {#if title || description}<header>{#if title}<h2>{title}</h2>{/if}{#if description}<p>{description}</p>{/if}</header>{/if}
+      {#if empty}<p role="status" class="wire-muted">{emptyText}</p>{:else}<div role="list" class="wire-catalog-collection__items"><slot /></div>{/if}
+    </section>
+  }
 }
diff --git a/packages/ui/components/UnifiedTimelinePreview.wrn b/packages/ui/components/UnifiedTimelinePreview.wrn
index 7a463085..4e0fbb4b 100644
--- a/packages/ui/components/UnifiedTimelinePreview.wrn
+++ b/packages/ui/components/UnifiedTimelinePreview.wrn
@@ -9,5 +9,7 @@ component UnifiedTimelinePreview {
     alt = ""
     class = ""
   }
-  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+  view {
+    <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Unified customer timeline across automated and human interactions" class="grid min-h-52 gap-0 rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60"><div class="grid grid-cols-[auto_1fr_auto] items-start gap-3"><span class="grid size-8 place-items-center rounded-lg bg-violet-500/10 text-violet-500"><span class="icon-[lucide--zap] size-4" aria-hidden="true"></span></span><span><strong class="block text-sm">Workflow triggered</strong><span class="text-xs text-slate-500">Order status changed</span></span><time class="text-xs text-slate-500">09:42</time></div><div class="ml-4 h-5 border-l border-dashed border-slate-300 dark:border-slate-700"></div><div class="grid grid-cols-[auto_1fr_auto] items-start gap-3"><span class="grid size-8 place-items-center rounded-lg bg-emerald-500/10 text-emerald-500"><span class="icon-[lucide--message-square-check] size-4" aria-hidden="true"></span></span><span><strong class="block text-sm">WhatsApp delivered</strong><span class="text-xs text-slate-500">Template: order shipped</span></span><time class="text-xs text-slate-500">09:43</time></div><div class="ml-4 h-5 border-l border-dashed border-slate-300 dark:border-slate-700"></div><div class="grid grid-cols-[auto_1fr_auto] items-start gap-3"><span class="grid size-8 place-items-center rounded-lg bg-sky-500/10 text-sky-500"><span class="icon-[lucide--user-round-check] size-4" aria-hidden="true"></span></span><span><strong class="block text-sm">Human follow-up</strong><span class="text-xs text-slate-500">Assigned to support</span></span><time class="text-xs text-slate-500">09:48</time></div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
+  }
 }
diff --git a/packages/ui/components/WorkflowCanvasPreview.wrn b/packages/ui/components/WorkflowCanvasPreview.wrn
index 70d47a4b..97d92844 100644
--- a/packages/ui/components/WorkflowCanvasPreview.wrn
+++ b/packages/ui/components/WorkflowCanvasPreview.wrn
@@ -9,5 +9,10 @@ component WorkflowCanvasPreview {
     alt = ""
     class = ""
   }
-  view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
+  view {
+    <article class="wire-card wire-catalog-card {class}">
+      {#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Automation workflow with trigger, decision, and channel delivery steps" class="relative grid min-h-52 grid-cols-[1fr_auto_1fr] items-center gap-3 overflow-hidden rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60"><div class="grid gap-2 rounded-xl border border-slate-200 bg-white p-3 shadow-sm dark:border-slate-700 dark:bg-slate-900"><span class="icon-[lucide--webhook] size-5 text-violet-500" aria-hidden="true"></span><strong class="text-sm">Event received</strong><span class="text-xs text-slate-500">Order shipped</span></div><span class="icon-[lucide--arrow-right] size-5 text-slate-400" aria-hidden="true"></span><div class="grid gap-2 rounded-xl border border-violet-500/30 bg-violet-500/10 p-3"><span class="icon-[lucide--workflow] size-5 text-violet-500" aria-hidden="true"></span><strong class="text-sm">Smart route</strong><span class="text-xs text-slate-500">Consent + availability</span></div><span class="absolute bottom-3 left-1/2 inline-flex -translate-x-1/2 items-center gap-2 rounded-full border border-emerald-500/20 bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-600 dark:text-emerald-300"><span class="icon-[lucide--circle-check] size-3.5" aria-hidden="true"></span>Delivered</span></div>{/if}
+      {#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}
+    </article>
+  }
 }
diff --git a/packages/ui/components/badge.wrn b/packages/ui/components/badge.wrn
index 5012e018..875f9362 100644
--- a/packages/ui/components/badge.wrn
+++ b/packages/ui/components/badge.wrn
@@ -1,10 +1,10 @@
 component Badge {
   props {
     class = ""
-    label = "Badge"
+    label = ""
     variant = "neutral"
   }
   view {
-    <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset {variant === 'success' ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-950/40 dark:text-emerald-300' : variant === 'warning' ? 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-950/40 dark:text-amber-300' : variant === 'danger' ? 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-950/40 dark:text-red-300' : variant === 'brand' ? 'bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-950/40 dark:text-violet-300' : 'bg-slate-100 text-slate-700 ring-slate-600/10 dark:bg-slate-800 dark:text-slate-300'} {class}">{label}</span>
+    <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset {variant === 'success' ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-950/40 dark:text-emerald-300' : variant === 'warning' ? 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-950/40 dark:text-amber-300' : variant === 'danger' ? 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-950/40 dark:text-red-300' : variant === 'brand' ? 'bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-950/40 dark:text-violet-300' : 'bg-slate-100 text-slate-700 ring-slate-600/10 dark:bg-slate-800 dark:text-slate-300'} {class}">{label}<slot /></span>
   }
 }
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 31efe175..790fae95 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/ui/ui.css b/packages/ui/ui.css
index 6ac0b917..65e36d33 100644
--- a/packages/ui/ui.css
+++ b/packages/ui/ui.css
@@ -1365,7 +1365,7 @@
     transform var(--wire-motion-base) var(--wire-ease-emphasized);
 }
 .wire-catalog-card::before {
-  display: grid;
+  display: none;
   width: 2.75rem;
   height: 2.75rem;
   place-items: center;
@@ -1377,6 +1377,17 @@
   border-radius: calc(var(--wire-radius) * 0.8);
   background: color-mix(in srgb, var(--wire-color-primary) 12%, transparent);
 }
+.wire-catalog-card__icon {
+  display: grid;
+  width: 2.75rem;
+  height: 2.75rem;
+  place-items: center;
+  margin-bottom: 0.35rem;
+  color: var(--wire-color-primary);
+  border: 1px solid color-mix(in srgb, var(--wire-color-primary) 28%, transparent);
+  border-radius: calc(var(--wire-radius) * 0.8);
+  background: color-mix(in srgb, var(--wire-color-primary) 10%, transparent);
+}
 .wire-catalog-card--channel::before {
   content: "◉";
 }
diff --git a/packages/uploader/package.json b/packages/uploader/package.json
index 5962d38c..29146635 100644
--- a/packages/uploader/package.json
+++ b/packages/uploader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/uploader",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/validation/package.json b/packages/validation/package.json
index e7b04f73..403a8111 100644
--- a/packages/validation/package.json
+++ b/packages/validation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/validation",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/update-package-versions.mjs b/update-package-versions.mjs
index bc65b9c5..859a4930 100644
--- a/update-package-versions.mjs
+++ b/update-package-versions.mjs
@@ -1,7 +1,7 @@
 import { existsSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
 
-const version = "0.2.61";
+const version = "0.2.65";
 
 const dependencyGroups = [
   "dependencies",