feat: sync showcase with WRNexusJS 0.8.72 and @wrnexus/ui 0.8.88

- Sync app, public, scripts, test and examples from the framework's
  component-showcase: redesigned component demos, marketing blocks under
  /blocks, template and preview galleries, distinct Timeline/Section
  variants, Chat Bubble receipts, a top-placement Drawer demo, and the
  playground code panel fix (objects in array props no longer blank out).
- Standalone adaptations kept: the generator and tests read
  component-reference.json from the published @wrnexus/ui, and tests use
  the published @wrnexus/compiler and @wrnexus/syntax.
- Dependencies: every @wrnexus/* package to its latest release (ui 0.8.88,
  styles 0.8.26, core 0.8.16, cli 0.8.72, ...), happy-dom for the
  playground tests, Tailwind 4.3; bun.lock and package-lock.json refreshed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

app/pages/components/avatar.wrn

@@ -2,23 +2,23 @@
 page AvatarDetail {
   layout = "showcase"
   state playground_src = ctx.url.searchParams.get("pg_src") ?? ""
-  state playground_alt = ctx.url.searchParams.get("pg_alt") ?? ""
-  state playground_initials = ctx.url.searchParams.get("pg_initials") ?? ""
+  state playground_alt = ctx.url.searchParams.get("pg_alt") ?? "Aisha Khan"
+  state playground_initials = ctx.url.searchParams.get("pg_initials") ?? "AK"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
   state playground_shape = ctx.url.searchParams.get("pg_shape") ?? "circle"
   state playground_status = ctx.url.searchParams.get("pg_status") ?? ""
-  state playground_statusLabel = ctx.url.searchParams.get("pg_statusLabel") ?? "Avatar"
+  state playground_statusLabel = ctx.url.searchParams.get("pg_statusLabel") ?? ""
   state playground_statusPosition = ctx.url.searchParams.get("pg_statusPosition") ?? "bottom"
   state playground_badge = ctx.url.searchParams.get("pg_badge") ?? ""
   state playground_badgeIcon = ctx.url.searchParams.get("pg_badgeIcon") ?? ""
-  state playground_badgeLabel = ctx.url.searchParams.get("pg_badgeLabel") ?? "Avatar"
-  state playground_tooltip = ctx.url.searchParams.get("pg_tooltip") ?? ""
-  state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default avatar for a modern application."
+  state playground_badgeLabel = ctx.url.searchParams.get("pg_badgeLabel") ?? ""
+  state playground_tooltip = ctx.url.searchParams.get("pg_tooltip") ?? "Aisha Khan · Product designer"
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? "Aisha Khan"
+  state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
   state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "lazy"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "Avatar"
     description = "Theme-aware, responsive avatar component."
@@ -45,9 +45,10 @@ page AvatarDetail {
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Avatar
-  statusLabel="Avatar"
-  badgeLabel="Avatar"
-  description="A polished default avatar for a modern application."
+  alt="Aisha Khan"
+  initials="AK"
+  tooltip="Aisha Khan · Product designer"
+  name="Aisha Khan"
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
@@ -55,7 +56,7 @@ page AvatarDetail {
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>18 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-avatar-src"><span><strong>src</strong><small>string</small></span><input id="playground-avatar-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-avatar-alt"><span><strong>alt</strong><small>string</small></span><input id="playground-avatar-alt" name="pg_alt" type="text" value="" /></label><label class="playground-field" for="playground-avatar-initials"><span><strong>initials</strong><small>string</small></span><input id="playground-avatar-initials" name="pg_initials" type="text" value="" /></label><label class="playground-field" for="playground-avatar-size"><span><strong>size</strong><small>string</small></span><select id="playground-avatar-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-avatar-color"><span><strong>color</strong><small>string</small></span><select id="playground-avatar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-avatar-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-avatar-variant" name="pg_variant" type="text" value="solid" /></label><label class="playground-field" for="playground-avatar-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-avatar-shape" name="pg_shape"><option value="circle" selected>circle</option><option value="round">round</option><option value="rounded">rounded</option><option value="pill">pill</option></select></label><label class="playground-field" for="playground-avatar-status"><span><strong>status</strong><small>string</small></span><input id="playground-avatar-status" name="pg_status" type="text" value="" /></label><label class="playground-field" for="playground-avatar-statusLabel"><span><strong>status Label</strong><small>string</small></span><input id="playground-avatar-statusLabel" name="pg_statusLabel" type="text" value="Avatar" /></label><label class="playground-field" for="playground-avatar-statusPosition"><span><strong>status Position</strong><small>string</small></span><input id="playground-avatar-statusPosition" name="pg_statusPosition" type="text" value="bottom" /></label><label class="playground-field" for="playground-avatar-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-avatar-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-avatar-badgeIcon"><span><strong>badge Icon</strong><small>string</small></span><input id="playground-avatar-badgeIcon" name="pg_badgeIcon" type="text" value="" /></label><label class="playground-field" for="playground-avatar-badgeLabel"><span><strong>badge Label</strong><small>string</small></span><input id="playground-avatar-badgeLabel" name="pg_badgeLabel" type="text" value="Avatar" /></label><label class="playground-field" for="playground-avatar-tooltip"><span><strong>tooltip</strong><small>string</small></span><input id="playground-avatar-tooltip" name="pg_tooltip" type="text" value="" /></label><label class="playground-field" for="playground-avatar-name"><span><strong>name</strong><small>string</small></span><input id="playground-avatar-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-avatar-description"><span><strong>description</strong><small>string</small></span><input id="playground-avatar-description" name="pg_description" type="text" value="A polished default avatar for a modern application." /></label><label class="playground-field" for="playground-avatar-loading"><span><strong>loading</strong><small>string</small></span><input id="playground-avatar-loading" name="pg_loading" type="text" value="lazy" /></label><label class="playground-field" for="playground-avatar-class"><span><strong>class</strong><small>string</small></span><input id="playground-avatar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-avatar-src"><span><strong>src</strong><small>string</small></span><input id="playground-avatar-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-avatar-alt"><span><strong>alt</strong><small>string</small></span><input id="playground-avatar-alt" name="pg_alt" type="text" value="Aisha Khan" /></label><label class="playground-field" for="playground-avatar-initials"><span><strong>initials</strong><small>string</small></span><input id="playground-avatar-initials" name="pg_initials" type="text" value="AK" /></label><label class="playground-field" for="playground-avatar-size"><span><strong>size</strong><small>string</small></span><select id="playground-avatar-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-avatar-color"><span><strong>color</strong><small>string</small></span><select id="playground-avatar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-avatar-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-avatar-variant" name="pg_variant" type="text" value="solid" /></label><label class="playground-field" for="playground-avatar-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-avatar-shape" name="pg_shape"><option value="circle" selected>circle</option><option value="round">round</option><option value="rounded">rounded</option><option value="pill">pill</option></select></label><label class="playground-field" for="playground-avatar-status"><span><strong>status</strong><small>string</small></span><input id="playground-avatar-status" name="pg_status" type="text" value="" /></label><label class="playground-field" for="playground-avatar-statusLabel"><span><strong>status Label</strong><small>string</small></span><input id="playground-avatar-statusLabel" name="pg_statusLabel" type="text" value="" /></label><label class="playground-field" for="playground-avatar-statusPosition"><span><strong>status Position</strong><small>string</small></span><input id="playground-avatar-statusPosition" name="pg_statusPosition" type="text" value="bottom" /></label><label class="playground-field" for="playground-avatar-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-avatar-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-avatar-badgeIcon"><span><strong>badge Icon</strong><small>string</small></span><input id="playground-avatar-badgeIcon" name="pg_badgeIcon" type="text" value="" /></label><label class="playground-field" for="playground-avatar-badgeLabel"><span><strong>badge Label</strong><small>string</small></span><input id="playground-avatar-badgeLabel" name="pg_badgeLabel" type="text" value="" /></label><label class="playground-field" for="playground-avatar-tooltip"><span><strong>tooltip</strong><small>string</small></span><input id="playground-avatar-tooltip" name="pg_tooltip" type="text" value="Aisha Khan · Product designer" /></label><label class="playground-field" for="playground-avatar-name"><span><strong>name</strong><small>string</small></span><input id="playground-avatar-name" name="pg_name" type="text" value="Aisha Khan" /></label><label class="playground-field" for="playground-avatar-description"><span><strong>description</strong><small>string</small></span><input id="playground-avatar-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-avatar-loading"><span><strong>loading</strong><small>string</small></span><input id="playground-avatar-loading" name="pg_loading" type="text" value="lazy" /></label><label class="playground-field" for="playground-avatar-class"><span><strong>class</strong><small>string</small></span><input id="playground-avatar-class" name="pg_class" type="text" value="" /></label></div>
         </form>
       </div>
     </section>
@@ -70,15 +71,16 @@ page AvatarDetail {
         <div class="demo-workbench">
           <div id="avatar-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-
-            <div class="demo-render"><Avatar size="md" variant="solid" statusLabel="Avatar" badgeLabel="Avatar" description="A polished default avatar for a modern application." class="showcase-instance showcase-instance--1" /></div>
+            
+            <div class="demo-render"><Avatar src="" alt="Aisha Khan" initials="AK" size="md" color="primary" variant="solid" shape="circle" status="" statusLabel="" statusPosition="bottom" badge="" badgeIcon="" badgeLabel="" tooltip="Aisha Khan · Product designer" name="Aisha Khan" description="" loading="lazy" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Avatar
-  statusLabel="Avatar"
-  badgeLabel="Avatar"
-  description="A polished default avatar for a modern application."
+  alt="Aisha Khan"
+  initials="AK"
+  tooltip="Aisha Khan · Product designer"
+  name="Aisha Khan"
 /&gt;</code></pre>
           </section>
         </div>
@@ -91,17 +93,17 @@ page AvatarDetail {
         <div class="demo-workbench">
           <div id="avatar-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-
-            <div class="demo-render"><Avatar size="sm" variant="secondary" statusLabel="Compact example" badgeLabel="Compact example" description="A compact configuration for dashboards and dense product surfaces." class="showcase-instance showcase-instance--2" /></div>
+            
+            <div class="demo-render"><Avatar src="" alt="Aisha Khan" initials="AK" size="sm" color="primary" variant="solid" shape="circle" status="" statusLabel="" statusPosition="bottom" badge="" badgeIcon="" badgeLabel="" tooltip="Aisha Khan · Product designer" name="Aisha Khan" description="" loading="lazy" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Avatar
+  alt="Aisha Khan"
+  initials="AK"
   size="sm"
-  variant="secondary"
-  statusLabel="Compact example"
-  badgeLabel="Compact example"
-  description="A compact configuration for dashboards and dense product surfaces."
+  tooltip="Aisha Khan · Product designer"
+  name="Aisha Khan"
 /&gt;</code></pre>
           </section>
         </div>
@@ -114,17 +116,18 @@ page AvatarDetail {
         <div class="demo-workbench">
           <div id="avatar-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-
-            <div class="demo-render"><Avatar size="lg" variant="success" statusLabel="Advanced example" badgeLabel="Advanced example" description="A richer configuration demonstrating additional content and hierarchy." class="showcase-instance showcase-instance--3" /></div>
+            
+            <div class="demo-render"><Avatar src="" alt="Aisha Khan" initials="AK" size="md" color="primary" variant="solid" shape="circle" status="online" statusLabel="" statusPosition="bottom" badge="" badgeIcon="" badgeLabel="" tooltip="Aisha Khan · Product designer" name="Aisha Khan" description="Product designer" loading="lazy" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Avatar
-  size="lg"
-  variant="success"
-  statusLabel="Advanced example"
-  badgeLabel="Advanced example"
-  description="A richer configuration demonstrating additional content and hierarchy."
+  alt="Aisha Khan"
+  initials="AK"
+  status="online"
+  tooltip="Aisha Khan · Product designer"
+  name="Aisha Khan"
+  description="Product designer"
 /&gt;</code></pre>
           </section>
         </div>