Add tab-based navigation to designer left sidebar

packages/designer/src/components/ComponentPalette.tsx

@@ -166,12 +166,8 @@ export const ComponentPalette: React.FC<ComponentPaletteProps> = React.memo(({ c
   }, []);
 
   return (
-    <div className={cn("flex flex-col h-full bg-gray-50/50 border-r w-72 overflow-hidden", className)}>
+    <div className={cn("flex flex-col h-full bg-gray-50/50 w-72 overflow-hidden", className)}>
         <div className="px-4 py-3 border-b bg-white shrink-0 space-y-3">
-            <div>
-                <h2 className="text-sm font-semibold text-gray-900">Components</h2>
-                <p className="text-xs text-gray-500 mt-0.5">Drag to add to canvas</p>
-            </div>
             <div className="relative">
                 <input
                     type="text"

packages/designer/src/components/ComponentTree.tsx

@@ -163,15 +163,7 @@ export const ComponentTree: React.FC<ComponentTreeProps> = React.memo(({ classNa
     }, [setSelectedNodeId]);
 
     return (
-        <div className={cn("flex flex-col h-full bg-white border-r", className)}>
-            <div className="px-4 py-3 border-b shrink-0">
-                <div className="flex items-center gap-2">
-                    <Layers size={16} className="text-blue-600" />
-                    <h2 className="text-sm font-semibold text-gray-900">Component Tree</h2>
-                </div>
-                <p className="text-xs text-gray-500 mt-0.5">Navigate and organize components</p>
-            </div>
-
+        <div className={cn("flex flex-col h-full bg-white", className)}>
             <ScrollArea className="flex-1">
                 <div className="p-2">
                     {schema && (

packages/designer/src/components/Designer.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import { DesignerProvider } from '../context/DesignerContext';
-import { ComponentPalette } from './ComponentPalette';
-import { ComponentTree } from './ComponentTree';
+import { LeftSidebar } from './LeftSidebar';
 import { Canvas } from './Canvas';
 import { PropertyPanel } from './PropertyPanel';
 import { useDesigner } from '../context/DesignerContext';
@@ -22,8 +21,7 @@ export const DesignerContent: React.FC = () => {
     removeNode, 
     selectedNodeId, 
     canUndo, 
-    canRedo,
-    showComponentTree 
+    canRedo
   } = useDesigner();
 
   // Keyboard shortcuts
@@ -75,18 +73,11 @@ export const DesignerContent: React.FC = () => {
       {/* <Toolbar /> removed, moved to parent */}
 
       <div className="flex-1 flex overflow-hidden">
-        {/* Left Sidebar - Component Palette */}
+        {/* Left Sidebar - Combined Component Palette and Tree */}
         <div className="w-72 flex-shrink-0 z-10 shadow-[1px_0_5px_rgba(0,0,0,0.03)] h-full">
-           <ComponentPalette className="h-full border-r-0" />
+           <LeftSidebar className="h-full border-r-0" />
         </div>
 
-        {/* Component Tree (Optional) */}
-        {showComponentTree && (
-          <div className="w-64 flex-shrink-0 z-10 h-full">
-            <ComponentTree className="h-full" />
-          </div>
-        )}
-
         {/* Main Canvas Area */}
         <div className="flex-1 relative bg-gray-100 z-0">
            <Canvas className="h-full w-full" />

packages/designer/src/components/LeftSidebar.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { ComponentPalette } from './ComponentPalette';
+import { ComponentTree } from './ComponentTree';
+import { cn } from '@object-ui/components';
+import { Layers, Box } from 'lucide-react';
+
+interface LeftSidebarProps {
+  className?: string;
+}
+
+type TabType = 'palette' | 'tree';
+
+export const LeftSidebar: React.FC<LeftSidebarProps> = React.memo(({ className }) => {
+  const [activeTab, setActiveTab] = useState<TabType>('palette');
+
+  return (
+    <div className={cn("flex flex-col h-full bg-white w-72", className)}>
+      {/* Tab Headers */}
+      <div className="flex border-b bg-gray-50/50 shrink-0">
+        <button
+          onClick={() => setActiveTab('palette')}
+          className={cn(
+            "flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium transition-all relative",
+            activeTab === 'palette'
+              ? "text-blue-600 bg-white border-b-2 border-blue-600"
+              : "text-gray-600 hover:text-gray-900 hover:bg-gray-100/50"
+          )}
+        >
+          <Box size={16} />
+          <span>Components</span>
+        </button>
+        <button
+          onClick={() => setActiveTab('tree')}
+          className={cn(
+            "flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium transition-all relative",
+            activeTab === 'tree'
+              ? "text-blue-600 bg-white border-b-2 border-blue-600"
+              : "text-gray-600 hover:text-gray-900 hover:bg-gray-100/50"
+          )}
+        >
+          <Layers size={16} />
+          <span>Tree</span>
+        </button>
+      </div>
+
+      {/* Tab Content */}
+      <div className="flex-1 overflow-hidden">
+        {activeTab === 'palette' ? (
+          <ComponentPalette className="h-full" />
+        ) : (
+          <ComponentTree className="h-full" />
+        )}
+      </div>
+    </div>
+  );
+});
+
+LeftSidebar.displayName = 'LeftSidebar';

packages/designer/src/components/Toolbar.tsx

@@ -12,7 +12,6 @@ import {
     Upload,
     Copy,
     FileJson,
-    Layers,
 } from 'lucide-react';
 import {
     Dialog,
@@ -41,9 +40,7 @@ export const Toolbar: React.FC = React.memo(() => {
         canUndo, 
         canRedo, 
         viewportMode, 
-        setViewportMode,
-        showComponentTree,
-        setShowComponentTree
+        setViewportMode
     } = useDesigner();
     const [showExportDialog, setShowExportDialog] = useState(false);
     const [showImportDialog, setShowImportDialog] = useState(false);
@@ -167,26 +164,6 @@ export const Toolbar: React.FC = React.memo(() => {
                             <TooltipContent>Mobile View (375px)</TooltipContent>
                         </Tooltip>
                     </div>
-
-                    {/* Component Tree Toggle */}
-                    <Tooltip>
-                        <TooltipTrigger asChild>
-                            <Button 
-                                variant="ghost" 
-                                size="sm" 
-                                className={cn(
-                                    "h-8 w-8 p-0 transition-all",
-                                    showComponentTree ? "text-blue-600" : "text-gray-500 hover:text-gray-900"
-                                )}
-                                onClick={() => setShowComponentTree(!showComponentTree)}
-                            >
-                                <Layers size={16} />
-                            </Button>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                            {showComponentTree ? 'Hide' : 'Show'} Component Tree
-                        </TooltipContent>
-                    </Tooltip>
             </div>
 
             {/* Right Actions */}

packages/designer/src/context/DesignerContext.tsx

@@ -16,8 +16,6 @@ export interface DesignerContextValue {
   setDraggingNodeId: React.Dispatch<React.SetStateAction<string | null>>;
   viewportMode: ViewportMode;
   setViewportMode: React.Dispatch<React.SetStateAction<ViewportMode>>;
-  showComponentTree: boolean;
-  setShowComponentTree: React.Dispatch<React.SetStateAction<boolean>>;
   addNode: (parentId: string | null, node: SchemaNode, index?: number) => void;
   updateNode: (id: string, updates: Partial<SchemaNode>) => void;
   removeNode: (id: string) => void;
@@ -203,7 +201,6 @@ export const DesignerProvider: React.FC<DesignerProviderProps> = ({
   const [draggingType, setDraggingType] = useState<string | null>(null);
   const [draggingNodeId, setDraggingNodeId] = useState<string | null>(null);
   const [viewportMode, setViewportMode] = useState<ViewportMode>('desktop');
-  const [showComponentTree, setShowComponentTree] = useState(true);
 
   // Undo/Redo state
   const [history, setHistory] = useState<SchemaNode[]>([ensureNodeIds(initialSchema || defaultSchema)]);
@@ -339,8 +336,6 @@ export const DesignerProvider: React.FC<DesignerProviderProps> = ({
       setDraggingNodeId,
       viewportMode,
       setViewportMode,
-      showComponentTree,
-      setShowComponentTree,
       addNode,
       updateNode,
       removeNode,

packages/designer/src/index.ts

@@ -12,6 +12,7 @@ export { PropertyPanel } from './components/PropertyPanel';
 export { Toolbar } from './components/Toolbar';
 export { ComponentTree } from './components/ComponentTree';
 export { ContextMenu } from './components/ContextMenu';
+export { LeftSidebar } from './components/LeftSidebar';
 
 export const name = '@object-ui/designer';
 export const version = '0.1.0';