fix: window select theme

Author: serafimcloud

plugins/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@21st-extension/angular",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "type": "module",
   "keywords": [
     "21st-extension",

plugins/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@21st-extension/react",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "type": "module",
   "keywords": [
     "21st-extension",

plugins/template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@21st-extension/plugin-example",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "private": true,
   "type": "module",
   "keywords": [

plugins/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@21st-extension/vue",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "type": "module",
   "keywords": [
     "21st-extension",

toolbar/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@21st-extension/toolbar",
   "private": false,
-  "version": "0.5.6",
+  "version": "0.5.7",
   "type": "module",
   "description": "21st.dev toolbar SDK for AI Agent interaction.",
   "keywords": [

toolbar/core/src/components/toolbar/panels/window-selection.tsx

@@ -31,33 +31,33 @@ export function WindowSelectionPanel() {
   };
 
   return (
-    <section className="pointer-events-auto flex max-h-full min-h-48 w-[480px] flex-col items-stretch justify-start rounded-xl border border-border/30 bg-zinc-50/80 shadow-md backdrop-blur-md">
+    <section className="pointer-events-auto flex max-h-full min-h-48 w-[480px] flex-col items-stretch justify-start rounded-xl border border-border/30 bg-background/80 shadow-md backdrop-blur-md">
       <div className="flex items-center justify-between px-4 pt-3 pb-3">
-        <h2 className="font-medium text-base text-zinc-950">
+        <h2 className="font-medium text-base text-foreground">
           Select IDE Window
         </h2>
       </div>
 
-      <div className="flex flex-col border-border/30 border-t px-4 py-3 text-zinc-950">
+      <div className="flex flex-col border-border/30 border-t px-4 py-3 text-foreground">
         <div className="space-y-3">
           <div className="flex items-start justify-between gap-4">
             <div className="flex-1">
               <div className="mb-1 flex items-center gap-2">
                 <label
                   htmlFor="window-selection-select"
-                  className="font-medium text-sm text-zinc-700"
+                  className="font-medium text-foreground text-sm"
                 >
                   IDE Window
                 </label>
                 <button
                   type="button"
                   onClick={handleRefresh}
-                  className="border-none bg-transparent p-0 font-normal text-xs text-zinc-500 hover:text-zinc-700"
+                  className="border-none bg-transparent p-0 font-normal text-muted-foreground text-xs hover:text-foreground"
                 >
                   {showRefreshed ? 'Refreshed' : 'Refresh'}
                 </button>
               </div>
-              <p className="text-xs text-zinc-600 leading-relaxed">
+              <p className="text-muted-foreground text-xs leading-relaxed">
                 Connect to your code editor workspace.
               </p>
             </div>
@@ -89,27 +89,27 @@ export function WindowSelectionPanel() {
             </p>
           )}
           {!isDiscovering && windows.length === 0 && !discoveryError && (
-            <p className="text-sm text-zinc-500">
+            <p className="text-muted-foreground text-sm">
               No IDE windows found. Make sure the Stagewise extension is
               installed and running.
             </p>
           )}
 
           {selectedSession && (
-            <div className="rounded-lg bg-zinc-100/90 p-3">
-              <p className="text-sm text-zinc-800">
+            <div className="rounded-lg bg-muted/90 p-3">
+              <p className="text-foreground text-sm">
                 <span className="font-medium">Connected:</span>{' '}
                 {selectedSession.displayName}
               </p>
-              <p className="mt-1 text-xs text-zinc-600">
+              <p className="mt-1 text-muted-foreground text-xs">
                 Session ID: {selectedSession.sessionId.substring(0, 8)}...
               </p>
             </div>
           )}
 
           {!selectedSession && windows.length > 0 && (
-            <div className="rounded-lg border border-zinc-300/50 bg-zinc-100/90 p-3">
-              <p className="text-sm text-zinc-700">
+            <div className="rounded-lg border border-border bg-muted/90 p-3">
+              <p className="text-foreground text-sm">
                 <span className="font-medium">No window selected:</span> Please
                 select an IDE window above to connect.
               </p>

toolbar/next/package.json

@@ -1,7 +1,7 @@
-  {
+{
   "name": "@21st-extension/toolbar-next",
   "private": false,
-  "version": "0.5.6",
+  "version": "0.5.7",
   "type": "module",
   "files": [
     "dist"

toolbar/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@21st-extension/toolbar-react",
   "private": false,
-  "version": "0.5.6",
+  "version": "0.5.7",
   "type": "module",
   "files": [
     "dist"

toolbar/vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@21st-extension/toolbar-vue",
   "private": false,
-  "version": "0.5.6",
+  "version": "0.5.7",
   "type": "module",
   "files": [
     "dist"