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/block-library.wrn

@@ -1,11 +1,5 @@
 page BlockLibrary {
-  layout = "showcase"
-  seo { title = "UI blocks" description = "Complete sections composed from WRNexus UI components." }
-  view {
-    <div class="page-marketplace page-blocks">
-      <nav class="market-tabs"><a href="#all">All blocks</a><a href="#marketing">Marketing</a><a href="#application">Application UI</a><a href="#ecommerce">Ecommerce</a><a href="#blog">Blog & Articles</a></nav>
-      <header><span class="showcase-eyebrow">Composable sections</span><h1>Ready-to-use UI blocks</h1><p>Complete responsive sections composed exclusively from the components in this library.</p></header>
-      <div class="market-grid"><article class="market-card"><div class="market-preview market-preview--1"><span class="icon-[lucide--layout-template] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Marketing</small><h2>Hero sections</h2><p>Hero, actions, product proof, and visual stage.</p><a href="/components/container">View components →</a></div></article><article class="market-card"><div class="market-preview market-preview--2"><span class="icon-[lucide--grid-2x2] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Marketing</small><h2>Feature grids</h2><p>Responsive benefits and product capability sections.</p><a href="/components/grid">View components →</a></div></article><article class="market-card"><div class="market-preview market-preview--3"><span class="icon-[lucide--badge-dollar-sign] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Marketing</small><h2>Pricing sections</h2><p>Tier cards, comparison grids, and CTAs.</p><a href="/components/container">View components →</a></div></article><article class="market-card"><div class="market-preview market-preview--4"><span class="icon-[lucide--panel-left] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Application UI</small><h2>Application shells</h2><p>Headers, sidebars, content, and command areas.</p><a href="/components/grid">View components →</a></div></article><article class="market-card"><div class="market-preview market-preview--1"><span class="icon-[lucide--chart-no-axes-combined] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Application UI</small><h2>Dashboard stats</h2><p>Metrics, trends, filters, and summaries.</p><a href="/components/container">View components →</a></div></article><article class="market-card"><div class="market-preview market-preview--2"><span class="icon-[lucide--shopping-cart] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Ecommerce</small><h2>Checkout panels</h2><p>Cart, address, payment, and order summary.</p><a href="/components/grid">View components →</a></div></article><article class="market-card"><div class="market-preview market-preview--3"><span class="icon-[lucide--newspaper] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Blog & Articles</small><h2>Article layouts</h2><p>Editorial headers, content, author, and sharing.</p><a href="/components/container">View components →</a></div></article><article class="market-card"><div class="market-preview market-preview--4"><span class="icon-[lucide--shield-check] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Application UI</small><h2>Authentication</h2><p>Sign in, registration, recovery, and verification.</p><a href="/components/grid">View components →</a></div></article></div>
-    </div>
-  }
+ layout = "gallery"
+ seo { title = "UI blocks" }
+ view { <header class="docs-intro"><span class="showcase-eyebrow">Composed sections</span><h1>Ready-to-use blocks</h1><p>Real sections with live previews and complete source code.</p></header><div class="example-catalog"><a class="example-card" href="/blocks/announcement-bar"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Announcement Bar</h2><p>Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/ctasection"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>CTASection</h2><p>Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/feature-card"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Feature Card</h2><p>Present one linked feature or service with media, icon, badge, description, and action.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/feature-grid"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Feature Grid</h2><p>Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/feature-icon-card"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Feature Icon Card</h2><p>Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/footer"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Footer</h2><p>Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/hero"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Hero</h2><p>Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/hero-actions"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Hero Actions</h2><p>Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/marketing-section-header"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Marketing Section Header</h2><p>Introduce marketing content with an eyebrow, title, description, and optional linked action.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/metric-grid"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Metric Grid</h2><p>Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/page-header"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Page Header</h2><p>Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/section-header"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Section Header</h2><p>Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/split-hero"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Split Hero</h2><p>Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/stats-bar"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Stats Bar</h2><p>Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.</p><strong>Open example →</strong></diLine truncated
 }