feat: deployable design studio and updated component showcase

app/pages/core.wrn

@@ -3,16 +3,36 @@ page CoreShowcase {
   layout = "showcase"
   seo {
     title = "Core components"
-    description = "2 core components from @wrnexus/ui."
+    description = "4 core components from @wrnexus/ui."
   }
   view {
     <header class="showcase-hero showcase-hero--category">
       <span class="showcase-eyebrow">Component category</span>
       <h1 class="showcase-title">Core</h1>
-      <p class="showcase-description">2 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
-      <div class="category-meta"><span>2 components</span><span>Multiple use cases</span><span>4 live configurations</span></div>
+      <p class="showcase-description">4 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
+      <div class="category-meta"><span>4 components</span><span>Multiple use cases</span><span>10 live configurations</span></div>
     </header>
     <div class="catalog-grid">
+      <article class="catalog-card" data-interactive-preview="false">
+        <div class="catalog-card-preview">
+          <div class="catalog-card-glow" aria-hidden="true"></div>
+          <div class="catalog-card-stage"><DrawflowCanvas toolbar="true" class="showcase-instance showcase-instance--1" /></div>
+        </div>
+        <div class="catalog-card-body">
+          <div><span class="catalog-card-category">Core</span><h2>Drawflow Canvas</h2><p>Reusable drawflow canvas component.</p></div>
+          <div class="catalog-card-footer"><span>3 props · 0 slots</span><a href="/components/drawflow-canvas">Explore component <span aria-hidden="true">→</span></a></div>
+        </div>
+      </article>
+      <article class="catalog-card" data-interactive-preview="false">
+        <div class="catalog-card-preview">
+          <div class="catalog-card-glow" aria-hidden="true"></div>
+          <div class="catalog-card-stage"><FlowCanvas nodes='[{"id":"flow-canvas-0-1","key":"flow-canvas-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#flow-canvas-demo","actionHref":"#flow-canvas-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"flow-canvas-0-2","key":"flow-canvas-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#flow-canvas-demo","actionHref":"#flow-canvas-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' palette='[{"id":"flow-canvas-0-1","key":"flow-canvas-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#flow-canvas-demo","actionHref":"#flow-canvas-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"flow-canvas-0-2","key":"flow-canvas-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#flow-canvas-demo","actionHref":"#flow-canvas-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' label="Flow Canvas" arrangeLabel="Flow Canvas" connectLabel="Flow Canvas" size="default" class="showcase-instance showcase-instance--1" /></div>
+        </div>
+        <div class="catalog-card-body">
+          <div><span class="catalog-card-category">Core</span><h2>Flow Canvas</h2><p>Reusable flow canvas component.</p></div>
+          <div class="catalog-card-footer"><span>9 props · 0 slots</span><a href="/components/flow-canvas">Explore component <span aria-hidden="true">→</span></a></div>
+        </div>
+      </article>
       <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>