better panels

src/workspaces/components/Workspace/PanelSlot.tsx

@@ -1,4 +1,5 @@
 import type { LayoutPanel, WidgetRegistry } from './types';
+import { Card } from '../Card';
 import { WidgetPicker } from './WidgetPicker';
 import { LayoutEditor } from './LayoutEditor';
 
@@ -20,10 +21,7 @@ export const PanelSlot = ({ panel, registry, editing, isLastPanel, onSetWidget,
 
   if (!WidgetComponent) {
     return (
-      <div
-        className="relative h-full w-full flex flex-col items-center justify-center gap-3 p-4 rounded-lg border backdrop-blur-xl"
-        style={{ backgroundColor: 'rgba(255, 255, 255, 0.12)', borderColor: 'rgba(255, 255, 255, 0.2)' }}
-      >
+      <Card className="relative h-full w-full flex flex-col items-center justify-center gap-3 p-4">
         <WidgetPicker registry={registry} onSelect={(type) => onSetWidget(panel.id, type)} />
         <div className="flex gap-1">
           <button
@@ -50,18 +48,18 @@ export const PanelSlot = ({ panel, registry, editing, isLastPanel, onSetWidget,
             </button>
           )}
         </div>
-      </div>
+      </Card>
     );
   }
 
   return (
     <div
-      className="relative h-full w-full overflow-hidden rounded-lg border backdrop-blur-xl"
+      className="relative h-full w-full overflow-hidden rounded-lg border backdrop-blur-xl p-2"
       style={{ backgroundColor: 'rgba(255, 255, 255, 0.12)', borderColor: 'rgba(255, 255, 255, 0.2)' }}
     >
-      <div className="h-full w-full [&>*]:!h-full [&>*]:!flex [&>*]:!flex-col [&>*]:!rounded-none [&>*]:!border-0 [&>*]:!shadow-none [&>*>*:last-child]:!flex-1 [&>*>*:last-child]:!min-h-0 [&>*>*:last-child]:!max-h-none [&>*>*:last-child]:!overflow-auto" style={{ ['--card-bg' as string]: 'transparent', ['--card-grid-color' as string]: 'transparent' }}>
+      <Card className="h-full w-full overflow-hidden p-0 [&>*]:!h-full [&>*]:!flex [&>*]:!flex-col [&>*]:!rounded-none [&>*]:!border-0 [&>*]:!shadow-none [&>*>*:last-child]:!flex-1 [&>*>*:last-child]:!min-h-0 [&>*>*:last-child]:!max-h-none [&>*>*:last-child]:!overflow-hidden">
         <WidgetComponent panelId={panel.id} />
-      </div>
+      </Card>
       {editing && (
         <LayoutEditor
           panelId={panel.id}