[WIP] Scaffold initial Electron project for Object Studio

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.cjs

@@ -0,0 +1,19 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true, node: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', 'dist-electron', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true, allowExportNames: ['buttonVariants'] },
+    ],
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+  },
+}

.gitignore

@@ -0,0 +1,13 @@
+node_modules
+dist
+dist-electron
+.vscode
+*.log
+.DS_Store
+out
+*.zip
+*.dmg
+*.exe
+*.deb
+*.rpm
+.idea

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "arrowParens": "always"
+}

DEVELOPMENT.md

@@ -0,0 +1,211 @@
+# Object Studio - Developer Guide
+
+## 🚀 Quick Start
+
+### Prerequisites
+- Node.js 18+ and npm
+- Git
+
+### Installation
+
+```bash
+# Clone the repository
+git clone https://github.com/objectstack-ai/studio.git
+cd studio
+
+# Install dependencies
+npm install
+
+# Start development server with Hot Module Replacement (HMR)
+npm run dev
+```
+
+The application will launch in development mode with Electron. The renderer process supports HMR, so changes to React components will be reflected immediately without restarting the app.
+
+## 📁 Project Structure
+
+```
+studio/
+├── src/
+│   ├── main/              # Electron Main Process
+│   │   ├── index.ts       # Main entry point, window creation
+│   │   └── ipc.ts         # IPC handlers for file operations
+│   ├── preload/           # Electron Preload Script
+│   │   └── index.ts       # Typed IPC API exposed to renderer
+│   └── renderer/          # React Renderer Process
+│       ├── components/
+│       │   ├── connection/     # Connection Manager
+│       │   ├── data-grid/      # TanStack Table implementation
+│       │   ├── layout/         # IDE layout components
+│       │   ├── schema-editor/  # Monaco Editor integration
+│       │   └── ui/             # Shadcn UI components
+│       ├── pages/         # Route pages
+│       ├── stores/        # Zustand state management
+│       ├── styles/        # Global CSS & Tailwind
+│       └── lib/           # Utility functions
+├── index.html             # HTML entry point
+├── vite.config.ts         # Vite configuration
+└── package.json           # Dependencies and scripts
+```
+
+## 🛠️ Tech Stack
+
+### Core
+- **Electron**: Desktop application framework
+- **React 18**: UI library
+- **TypeScript**: Strict type safety
+- **Vite**: Build tool with HMR support
+
+### UI & Styling
+- **Tailwind CSS**: Utility-first CSS framework
+- **Shadcn UI**: High-quality React components
+- **Lucide React**: Icon library
+
+### Key Libraries
+- **React Router DOM**: Client-side routing (HashRouter for Electron)
+- **Zustand**: Lightweight state management
+- **TanStack Table**: High-performance data grid (10k+ rows)
+- **React Resizable Panels**: Resizable split panes
+- **Monaco Editor**: VS Code editor integration
+- **React Flow**: Visual schema diagram (future feature)
+
+## 🎨 Application Architecture
+
+### IDE Layout
+
+The application follows a VS Code-inspired layout:
+
+1. **Activity Bar** (Leftmost): Navigation icons for main views
+2. **Sidebar** (Resizable): Context-specific content (e.g., database tree)
+3. **Main Workspace** (Tabbed): Multiple open documents with split view support
+4. **Status Bar** (Bottom): Connection status and app info
+
+### IPC Communication
+
+The application uses a strictly typed IPC pattern:
+
+```typescript
+// In renderer process
+const filePath = await window.electron.openFile()
+const result = await window.electron.readFile(filePath)
+
+// Main process handlers are in src/main/ipc.ts
+// Preload script exposes the API in src/preload/index.ts
+```
+
+### State Management
+
+Zustand store manages:
+- Active connections
+- Open tabs
+- UI state (sidebar width, etc.)
+
+```typescript
+import { useAppStore } from '@/stores/app-store'
+
+const tabs = useAppStore((state) => state.tabs)
+const addTab = useAppStore((state) => state.addTab)
+```
+
+## 🚧 Available Scripts
+
+```bash
+# Development
+npm run dev              # Start Electron in dev mode with HMR
+
+# Building
+npm run build:dev        # Build for testing (no package)
+npm run build            # Full production build with electron-builder
+
+# Code Quality
+npm run lint             # Run ESLint
+npm run format           # Format code with Prettier
+npm run type-check       # TypeScript type checking
+```
+
+## 🔌 Key Features Implemented
+
+### 1. Connection Manager
+- Clean home screen for connecting to databases
+- Support for SQLite, Excel, and remote ObjectOS
+- Recent connections tracking (UI ready, persistence needed)
+
+### 2. Data Grid
+- TanStack Table with pagination
+- Resizable columns
+- Sticky header
+- Optimized for large datasets (10k+ rows)
+
+### 3. Schema Editor
+- Monaco Editor integration (same as VS Code)
+- JSON schema editing
+- Dark theme by default
+- Auto-complete and validation
+
+### 4. IDE Layout
+- Resizable sidebar
+- Tab management
+- Activity bar navigation
+- Status bar with connection info
+
+## 🎯 Next Steps
+
+To complete the implementation:
+
+1. **Database Integration**: Add SQLite driver for reading actual data
+2. **Excel Parser**: Integrate library for Excel/CSV import
+3. **Remote API**: Implement ObjectOS API client
+4. **Schema Validation**: Add JSON schema validation
+5. **Data Persistence**: Store recent connections and preferences
+6. **Split Views**: Enable side-by-side schema and data view
+7. **Query Runner**: Add SQL query execution panel
+
+## 🐛 Troubleshooting
+
+### HMR not working
+- Restart the dev server with `npm run dev`
+- Clear `dist` and `dist-electron` folders
+
+### Build fails
+- Ensure all TypeScript errors are fixed: `npm run type-check`
+- Check for linting errors: `npm run lint`
+
+### Electron window doesn't open
+- Check console for errors
+- Verify Node.js version (18+)
+- Try deleting `node_modules` and reinstalling
+
+## 📝 Development Guidelines
+
+### Code Style
+- Use TypeScript strict mode
+- Follow existing component patterns
+- Keep components small and focused
+- Use Tailwind for styling
+- Dark mode first design
+
+### File Naming
+- Components: PascalCase (e.g., `DataGrid.tsx`)
+- Utilities: kebab-case (e.g., `utils.ts`)
+- Pages: kebab-case (e.g., `home.tsx`)
+
+### Import Aliases
+- `@/` → `src/renderer/`
+- `@main/` → `src/main/`
+- `@preload/` → `src/preload/`
+
+## 🔐 Security
+
+- Context isolation is enabled
+- Node integration is disabled in renderer
+- All filesystem operations go through IPC
+- Preload script exposes minimal, typed API
+
+## 📚 Additional Resources
+
+- [Electron Documentation](https://www.electronjs.org/docs)
+- [React Documentation](https://react.dev)
+- [Vite Guide](https://vitejs.dev/guide/)
+- [Tailwind CSS](https://tailwindcss.com/docs)
+- [Shadcn UI](https://ui.shadcn.com)
+- [TanStack Table](https://tanstack.com/table/v8)