feat: deployable design studio and updated component showcase

app/pages/components/back-to-top.wrn

@@ -44,7 +44,7 @@ page BackToTopDetail {
             <pre><code data-playground-code>&lt;BackToTop /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
-          
+
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>15 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -63,7 +63,7 @@ page BackToTopDetail {
         <div class="demo-workbench">
           <div id="back-to-top-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"><BackToTop threshold="500" label="Back to top" ariaLabel="Scroll back to top" icon="icon-[lucide--arrow-up]" position="right" offset="md" behavior="smooth" showProgress="false" showLabel="false" alwaysVisible="true" size="default" color="primary" variant="solid" shape="round" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Floating round control usage">
@@ -82,7 +82,7 @@ page BackToTopDetail {
         <div class="demo-workbench">
           <div id="back-to-top-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"><BackToTop threshold="500" label="Back to top" ariaLabel="Scroll back to top" icon="icon-[lucide--arrow-up]" position="right" offset="md" behavior="smooth" showProgress="false" showLabel="true" alwaysVisible="true" size="default" color="primary" variant="soft" shape="pill" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Pill control with label usage">
@@ -104,7 +104,7 @@ page BackToTopDetail {
         <div class="demo-workbench">
           <div id="back-to-top-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"><BackToTop threshold="500" label="Back to top" ariaLabel="Scroll back to top" icon="icon-[lucide--arrow-up]" position="left" offset="lg" behavior="smooth" showProgress="true" showLabel="false" alwaysVisible="true" size="default" color="primary" variant="outline" shape="round" class="" /></div>
           </div>
           <section class="demo-code" aria-label="Progress-aware control usage">
@@ -119,7 +119,7 @@ page BackToTopDetail {
           </section>
         </div>
       </article></div></section>
-        
+
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>threshold</code></td><td>number</td><td><code>500</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Back to top"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Scroll back to top"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--arrow-up]"</code></td><td>No</td></tr><tr><td><code>position</code></td><td>string</td><td><code>"right"</code></td><td>No</td></tr><tr><td><code>offset</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>behavior</code></td><td>string</td><td><code>"smooth"</code></td><td>No</td></tr><tr><td><code>showProgress</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>alwaysVisible</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>shape</code></td><td>string</td><td><code>"round"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">