feat: deployable design studio and updated component showcase

app/pages/components/timeline.wrn

@@ -279,7 +279,7 @@ page TimelineDetail {
         <div class="demo-workbench">
           <div id="timeline-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"><Timeline size="default" title="Request progress" description="Latest updates for this service request." items='[{"title":"Request submitted","description":"Received successfully","time":"09:30","status":"complete"},{"title":"Verification","description":"Documents are being reviewed","time":"10:15","current":true},{"title":"Decision","description":"Pending verification","time":"—"}]' variant="default" numbered="false" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Application timeline usage">
@@ -323,7 +323,7 @@ page TimelineDetail {
         <div class="demo-workbench">
           <div id="timeline-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"><Timeline size="sm" title="Recent activity" description="A compact configuration for dashboards and dense product surfaces." items='[{"title":"Status changed","time":"Today"},{"title":"Comment added","time":"Yesterday"},{"title":"Document uploaded","time":"3 days ago"}]' variant="compact" numbered="false" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact activity history usage">
@@ -364,7 +364,7 @@ page TimelineDetail {
         <div class="demo-workbench">
           <div id="timeline-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"><Timeline size="lg" title="Implementation milestones" description="Planned delivery sequence." items='[{"title":"Foundation","description":"Tokens, themes, and primitives","icon":"icon-[lucide--layers-3]","status":"complete"},{"title":"Components","description":"Reusable UI and documentation","icon":"icon-[lucide--blocks]","current":true},{"title":"Applications","description":"Compose production interfaces","icon":"icon-[lucide--rocket]"}]' variant="alternate" numbered="false" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich milestone timeline usage">