@smartnet360/svelte-components 0.0.1-beta.2

package/dist/Desktop/GridViewer.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+  /**
+   * GridViewer Component
+   * 
+   * Standalone component for viewing grids in fullscreen mode.
+   * Reads grid configuration from localStorage and renders using GridRenderer.
+   * Used in dedicated routes for new window/tab grid viewing.
+   */
+  import { onMount } from 'svelte';
+  import { GridRenderer } from './index.js';
+  import type { GridConfiguration } from './gridLayouts.js';
+  import type { ComponentConfig } from './GridSelector/index.js';
+  
+  // Accept available components as props
+  export let availableComponents: ComponentConfig[] = [];
+  
+  let grid: GridConfiguration | null = null;
+  let componentMap: Record<string, any> = {};
+  let isLoading = true;
+  let error: string | null = null;
+  
+  onMount(() => {
+    try {
+      const urlParams = new URLSearchParams(window.location.search);
+      const gridKey = urlParams.get('key');
+      
+      if (gridKey) {
+        const storedData = localStorage.getItem(gridKey);
+        if (storedData) {
+          const data = JSON.parse(storedData);
+          grid = data.grid;
+          
+          // Build componentMap from available components
+          componentMap = availableComponents.reduce((map, comp) => {
+            map[comp.id] = comp.component;
+            return map;
+          }, {} as Record<string, any>);
+          
+          // Clean up localStorage
+          localStorage.removeItem(gridKey);
+        } else {
+          error = 'Grid data not found or expired';
+        }
+      } else {
+        error = 'No grid key provided';
+      }
+    } catch (err) {
+      error = 'Failed to load grid configuration';
+      console.error('GridViewer error:', err);
+    } finally {
+      isLoading = false;
+    }
+  });
+</script>
+
+<svelte:head>
+  <title>{grid ? grid.name : 'Grid Viewer'}</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+    }
+  </style>
+</svelte:head>
+
+{#if isLoading}
+  <div class="loading-screen">
+    <div class="loading-content">
+      <div class="spinner-border text-primary" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+      <p class="mt-3">Loading grid...</p>
+    </div>
+  </div>
+{:else if error}
+  <div class="error-screen">
+    <div class="error-content">
+      <div class="error-icon">⚠️</div>
+      <h3>Grid Not Found</h3>
+      <p class="text-muted">{error}</p>
+      <button class="btn btn-primary" on:click={() => window.close()}>
+        Close Window
+      </button>
+    </div>
+  </div>
+{:else if grid}
+  <GridRenderer {grid} {componentMap} fullscreen={true} enableResize={true} />
+{:else}
+  <div class="error-screen">
+    <div class="error-content">
+      <div class="error-icon">🤷</div>
+      <h3>No Grid Available</h3>
+      <p class="text-muted">No grid configuration available to display</p>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .loading-screen,
+  .error-screen {
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f8f9fa;
+  }
+
+  .loading-content,
+  .error-content {
+    text-align: center;
+    max-width: 400px;
+    padding: 2rem;
+  }
+
+  .error-icon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+  }
+
+  .spinner-border {
+    width: 3rem;
+    height: 3rem;
+  }
+</style>

package/dist/Desktop/GridViewer.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentConfig } from './GridSelector/index.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const GridViewer: $$__sveltets_2_IsomorphicComponent<{
+    availableComponents?: ComponentConfig[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type GridViewer = InstanceType<typeof GridViewer>;
+export default GridViewer;

package/dist/Desktop/README.md

@@ -0,0 +1,279 @@
+# 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.

package/dist/Desktop/gridLayouts.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Grid Layout Configurations
+ *
+ * Defines all available grid layout types that can be created using the existing
+ * Half and Quarter components. Each layout specifies the component structure,
+ * slots for content assignment, and metadata for the Grid Selector.
+ */
+export interface GridSlot {
+    id: string;
+    name: string;
+    description: string;
+    position: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+export interface GridLayoutDefinition {
+    id: string;
+    name: string;
+    description: string;
+    icon: string;
+    category: 'basic' | 'asymmetric' | 'symmetric';
+    slots: GridSlot[];
+    componentStructure: {
+        type: 'Half' | 'Quarter' | 'Container';
+        position?: 'left' | 'right' | 'top' | 'bottom';
+        children?: any[];
+    }[];
+    previewSvg: string;
+}
+export interface ComponentAssignment {
+    slotId: string;
+    componentId: string;
+}
+export interface GridConfiguration {
+    id: string;
+    name: string;
+    layoutId: string;
+    componentAssignments: ComponentAssignment[];
+    created: string;
+    modified: string;
+}
+/**
+ * All available grid layout definitions
+ * Based on the existing Half and Quarter components
+ */
+export declare const GRID_LAYOUTS: Record<string, GridLayoutDefinition>;
+/**
+ * Get layout by ID
+ */
+export declare function getLayoutById(id: string): GridLayoutDefinition | undefined;
+/**
+ * Get all layouts by category
+ */
+export declare function getLayoutsByCategory(category: 'basic' | 'asymmetric' | 'symmetric'): GridLayoutDefinition[];
+/**
+ * Get all available layouts
+ */
+export declare function getAllLayouts(): GridLayoutDefinition[];
+/**
+ * Get layouts ordered by complexity (basic -> asymmetric -> symmetric)
+ */
+export declare function getLayoutsOrdered(): GridLayoutDefinition[];
+/**
+ * Validate if a component assignment is complete
+ */
+export declare function validateComponentAssignments(layoutId: string, assignments: ComponentAssignment[]): {
+    isValid: boolean;
+    missingSlots: string[];
+};
+/**
+ * Create a new grid configuration
+ */
+export declare function createGridConfiguration(name: string, layoutId: string, assignments: ComponentAssignment[]): GridConfiguration;