@smartnet360/svelte-components 0.0.1 → 0.0.3

package/dist/Desktop/README.md

@@ -1,279 +0,0 @@
-# Desktop Component - Grid Orchestrator
-
-## Overview
-
-The **Desktop component** acts as a powerful orchestrator for managing multiple grid layouts within your application. It serves as a launchpad that allows users to create, configure, and switch between different grid-based layouts, each containing various components.
-
-## Architecture
-
-### Core Components
-
-1. **Desktop (Launcher)** - Main orchestrator component
-2. **Grid Selector** - Configuration interface for creating new grids
-3. **Grid** - Individual layout engine (implemented in `/Grid/`)
-
-### How It Works
-
-```
-Desktop (Orchestrator)
-├── Stores multiple grid configurations
-├── Displays launcher interface
-└── Manages grid lifecycle
-
-Grid Selector
-├── Layout type selection
-├── Component assignment
-└── Grid naming
-
-Grid (Layout Engine)
-├── Renders chosen layout
-├── Handles component placement
-└── Supports resizing & fullscreen
-```
-
-## Features
-
-### ✅ Multi-Grid Management
-- **Grid Storage**: Persists multiple grid configurations with unique names
-- **Launcher View**: Visual interface showing all available grids
-- **Grid Switching**: Seamless switching between different layouts
-
-### ✅ Grid Creation & Configuration
-- **Layout Types**: Pre-built options (half-half, half+quarters, etc.)
-- **Component Assignment**: Drag-and-drop component placement into grid cells
-- **Custom Naming**: User-defined names for each grid configuration
-
-### ✅ Reusability & Isolation
-- **Namespace Support**: App-specific prefixes for data isolation
-- **Component Injection**: Parent app provides available components
-- **State Management**: Isolated settings per application instance
-
-## Usage
-
-### Basic Setup
-
-```svelte
-<script lang="ts">
-  import { Desktop } from '$lib/Desktop/index.js';
-
-  // Available components for grid cells
-  const availableComponents = [
-    { id: 'chart', name: 'Chart', component: Chart },
-    { id: 'list', name: 'Task List', component: List },
-    { id: 'form', name: 'Contact Form', component: Form }
-  ];
-
-  // App-specific namespace
-  const namespace = 'myApp-desktop';
-</script>
-
-<Desktop {availableComponents} {namespace} />
-```
-
-### Component Registration
-
-```typescript
-const availableComponents = [
-  {
-    id: 'chart',
-    name: 'Analytics Chart',
-    component: ChartComponent,
-    icon: '📊',
-    description: 'Data visualization component'
-  },
-  {
-    id: 'tasks',
-    name: 'Task Manager',
-    component: TaskListComponent,
-    icon: '✅',
-    description: 'Project task management'
-  }
-];
-```
-
-## Grid Layout Types
-
-### Built-in Layouts
-
-1. **Half-Half** - Two equal vertical sections
-2. **Half+Quarters** - Left half + right stacked quarters
-3. **Quarters+Half** - Left stacked quarters + right half
-4. **All-Quarters** - Four equal quadrants
-
-### Custom Layouts
-
-The system supports extending with custom layout types by implementing the Grid interface.
-
-## Data Management
-
-### Namespace Isolation
-
-```typescript
-// Each app gets its own data space
-const namespace = 'myApp-desktop';
-
-// Data is stored as:
-// myApp-desktop:grids
-// myApp-desktop:settings
-// myApp-desktop:layouts
-```
-
-### Grid Configuration Storage
-
-```json
-{
-  "id": "dashboard-grid",
-  "name": "Main Dashboard",
-  "layout": "half-quarters",
-  "components": {
-    "top-left": "chart",
-    "bottom-left": "tasks",
-    "top-right": "form",
-    "bottom-right": "text"
-  },
-  "created": "2025-01-15T10:30:00Z"
-}
-```
-
-## API Reference
-
-### Desktop Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `availableComponents` | `ComponentConfig[]` | ✅ | Components available for grid cells |
-| `namespace` | `string` | ✅ | App-specific identifier for data isolation |
-| `theme` | `string` | ❌ | Visual theme ('light', 'dark', 'auto') |
-| `maxGrids` | `number` | ❌ | Maximum number of grids (default: 10) |
-
-### ComponentConfig Interface
-
-```typescript
-interface ComponentConfig {
-  id: string;           // Unique identifier
-  name: string;         // Display name
-  component: any;       // Svelte component
-  icon?: string;        // Icon emoji or URL
-  description?: string; // Help text
-  category?: string;    // Grouping category
-}
-```
-
-## Integration Examples
-
-### With SvelteKit
-
-```svelte
-<!-- +page.svelte -->
-<script lang="ts">
-  import { Desktop } from '$lib/Desktop/index.js';
-  import { Chart, List, Form } from '$lib/components/index.js';
-
-  const components = [
-    { id: 'chart', name: 'Chart', component: Chart },
-    { id: 'list', name: 'List', component: List },
-    { id: 'form', name: 'Form', component: Form }
-  ];
-</script>
-
-<svelte:head>
-  <title>My App - Desktop</title>
-</svelte:head>
-
-<Desktop {components} namespace="my-svelte-app" />
-```
-
-### With Custom Components
-
-```svelte
-<script lang="ts">
-  import { Desktop } from '$lib/Desktop/index.js';
-  import CustomChart from './components/CustomChart.svelte';
-  import UserProfile from './components/UserProfile.svelte';
-
-  const components = [
-    {
-      id: 'custom-chart',
-      name: 'Custom Analytics',
-      component: CustomChart,
-      icon: '📈',
-      category: 'Analytics'
-    },
-    {
-      id: 'user-profile',
-      name: 'User Profile',
-      component: UserProfile,
-      icon: '👤',
-      category: 'User Management'
-    }
-  ];
-</script>
-
-<Desktop {components} namespace="enterprise-app" />
-```
-
-## Current Implementation Status
-
-### ✅ Completed Features
-- Grid layout engine with resizing
-- Component assignment system
-- Basic launcher interface
-- Namespace-based data isolation
-
-### 🔄 In Development
-- Visual grid selector interface
-- Drag-and-drop component assignment
-- Grid naming and management
-- Advanced layout customization
-
-### 📋 Planned Features
-- Grid templates and presets
-- Component marketplace
-- Grid sharing and export
-- Advanced theming options
-
-## Best Practices
-
-### Component Design
-- **Keep components focused** - Each component should have a single responsibility
-- **Handle resize events** - Components should respond to container size changes
-- **Use consistent APIs** - Follow established prop and event patterns
-
-### Performance
-- **Lazy loading** - Load components only when needed
-- **Memoization** - Cache expensive computations
-- **Virtual scrolling** - For large component lists
-
-### User Experience
-- **Clear naming** - Use descriptive names for grids and components
-- **Visual feedback** - Show loading states and transitions
-- **Error handling** - Graceful fallbacks for missing components
-
-## Troubleshooting
-
-### Common Issues
-
-**Components not loading**
-- Check component registration in `availableComponents`
-- Verify component exports and imports
-
-**Grid configurations not saving**
-- Ensure namespace is properly set
-- Check browser storage permissions
-
-**Layout not responsive**
-- Verify Grid component implementation
-- Check CSS Grid support in target browsers
-
-## Contributing
-
-When adding new features:
-
-1. **Follow the orchestrator pattern** - Desktop manages, Grid renders
-2. **Maintain namespace isolation** - All data operations use the provided namespace
-3. **Test component compatibility** - Ensure new components work with the Grid system
-4. **Update documentation** - Keep README and API docs current
-
----
-
-**Is this clear enough?** The Desktop component acts as an orchestrator that manages multiple Grid instances, providing a launcher interface for users to create, configure, and switch between different grid layouts. Each grid can contain different components arranged in various layout patterns, with all configurations isolated by namespace for multi-app reusability.