feat: deployable design studio and updated component showcase

app/pages/components/toaster.wrn

@@ -65,7 +65,7 @@ page ToasterDetail {
         <div class="demo-workbench">
           <div id="toaster-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"><div class="showcase-toast-demo"><button type="button" @click='toast.success("Your changes are live", { title: "Published" })'>success</button><button type="button" @click='toast.error("We could not reach the server", { title: "Network error" })'>danger</button><button type="button" @click='toast.warning("Your trial ends in 3 days", { title: "Heads up", icon: "icon-[lucide--hourglass]" })'>warning + custom icon</button><button type="button" @click='toast.info("Export queued")'>info</button><button type="button" @click='toast("Note deleted", { title: "Deleted", actionLabel: "Undo" })'>one action</button><button type="button" @click='toast.warning("This file changed elsewhere", { title: "Conflict", duration: 0, actions: [{ label: "Keep mine" }, { label: "Discard", tone: "danger" }] })'>two actions (sticky)</button><button type="button" @click='toast("No icon on this one", { icon: false })'>icon suppressed</button><button type="button" @click='toast.success("Gone in 1.5s", { duration: 1500 })'>short duration</button><button type="button" @click='toast.clear()'>clear all</button></div><Toaster size="default" position="bottom-right" duration="4500" max="4" pauseOnHover="true" showIcon="true" closable="true" showProgress="true" closeLabel="Toaster" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Raise notifications from anywhere usage">