@smartnet360/svelte-components 0.0.1-beta.2

package/dist/Desktop/Desktop.svelte

@@ -0,0 +1,423 @@
+
+
+<script lang="ts">
+    /**
+ * Desktop Component - Main Orchestrator
+ * 
+ * Manages multiple grid configurations and provides a launcher interface.
+ * Users can create new grids, switch between existing ones, and manage their workspace.
+ */
+  import { onMount } from 'svelte';
+  import { GridSelector, type ComponentConfig } from './GridSelector/index.js';
+  import { GridRenderer } from './index.js';
+  import type { GridConfiguration } from './gridLayouts.js';
+
+  // Props
+  export let availableComponents: ComponentConfig[] = [];
+  export let namespace: string = 'default-desktop';
+  export let theme: 'light' | 'dark' = 'light';
+  export let maxGrids: number = 10;
+  export let onLaunch: ((grid: GridConfiguration) => void) | null = null;
+
+  // State
+  let savedGrids: GridConfiguration[] = [];
+  let showGridSelector: boolean = false;
+  let isLoading: boolean = true;
+  let showFullscreenGrid: boolean = false;
+  let currentGrid: GridConfiguration | null = null;
+  let editingGrid: GridConfiguration | null = null;
+
+  // Storage keys
+  const STORAGE_KEY = `${namespace}:grids`;
+
+  // Load saved grids from localStorage
+  function loadSavedGrids() {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored) {
+        savedGrids = JSON.parse(stored);
+      }
+    } catch (error) {
+      console.error('Failed to load saved grids:', error);
+      savedGrids = [];
+    }
+    isLoading = false;
+  }
+
+  // Save grids to localStorage
+  function savePersistentData() {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(savedGrids));
+    } catch (error) {
+      console.error('Failed to save grids:', error);
+    }
+  }
+
+  // Handle new grid creation or editing
+  function handleGridCreated(event: CustomEvent<GridConfiguration>) {
+    const gridData = event.detail;
+    
+    if (editingGrid) {
+      // Update existing grid
+      const updatedGrid: GridConfiguration = {
+        ...gridData,
+        id: editingGrid.id, // Keep the original ID
+        created: editingGrid.created, // Keep original creation date
+        modified: new Date().toISOString() // Update modification date
+      };
+      
+      savedGrids = savedGrids.map(g => g.id === editingGrid!.id ? updatedGrid : g);
+      editingGrid = null;
+    } else {
+      // Create new grid
+      if (savedGrids.length >= maxGrids) {
+        alert(`Maximum of ${maxGrids} grids allowed. Please delete a grid first.`);
+        return;
+      }
+      savedGrids = [...savedGrids, gridData];
+    }
+    
+    showGridSelector = false;
+    savePersistentData();
+  }
+
+  // Handle grid selector cancel
+  function handleGridSelectorCancel() {
+    showGridSelector = false;
+    editingGrid = null;
+  }
+
+  // Show grid selector
+  function openGridSelector() {
+    editingGrid = null; // Clear any editing state
+    showGridSelector = true;
+  }
+
+  // Edit an existing grid
+  function editGrid(grid: GridConfiguration) {
+    editingGrid = grid;
+    showGridSelector = true;
+  }
+
+  // Switch to a specific grid - now opens in fullscreen view
+  function switchToGrid(gridId: string) {
+    if (gridId === '') {
+      // Back to launcher
+      showFullscreenGrid = false;
+      currentGrid = null;
+      return;
+    } else {
+      // Find the grid and open in fullscreen view
+      const grid = savedGrids.find(g => g.id === gridId);
+      if (grid) {
+        currentGrid = grid;
+        showFullscreenGrid = true;
+      }
+    }
+  }
+
+  // Launch grid using callback
+  function launchGrid(gridId: string) {
+    const grid = savedGrids.find(g => g.id === gridId);
+    if (!grid) return;
+
+    // If no launch callback provided, do nothing
+    if (!onLaunch) {
+      console.warn('No onLaunch callback provided - grid launch ignored');
+      return;
+    }
+
+    // Call the parent's launch handler with the grid configuration
+    onLaunch(grid);
+  }
+
+  // Delete a grid
+  function deleteGrid(gridId: string) {
+    if (confirm('Are you sure you want to delete this grid? This action cannot be undone.')) {
+      savedGrids = savedGrids.filter(g => g.id !== gridId);
+      savePersistentData();
+    }
+  }
+
+
+
+  // Export grid configuration
+  function exportGrid(grid: GridConfiguration) {
+    const dataStr = JSON.stringify(grid, null, 2);
+    const dataBlob = new Blob([dataStr], { type: 'application/json' });
+    const url = URL.createObjectURL(dataBlob);
+    
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${grid.name.replace(/[^a-z0-9]/gi, '_').toLowerCase()}_grid.json`;
+    link.click();
+    
+    URL.revokeObjectURL(url);
+  }
+
+  // Close fullscreen grid view
+  function closeFullscreenGrid() {
+    showFullscreenGrid = false;
+    currentGrid = null;
+  }
+
+  // Load data on mount
+  onMount(() => {
+    loadSavedGrids();
+    
+    // Add keyboard event listener
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (showFullscreenGrid && event.key === 'Escape') {
+        closeFullscreenGrid();
+      }
+    };
+    
+    document.addEventListener('keydown', handleKeydown);
+    
+    // Cleanup
+    return () => {
+      document.removeEventListener('keydown', handleKeydown);
+    };
+  });
+</script>
+
+<div class="desktop-orchestrator" class:theme-dark={theme === 'dark'}>
+  {#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 Desktop...</p>
+      </div>
+    </div>
+  {:else if showFullscreenGrid && currentGrid}
+    <!-- Fullscreen Grid View -->
+    <div class="fullscreen-grid">
+      <div class="fullscreen-header">
+        <div class="d-flex justify-content-between align-items-center p-3 border-bottom">
+          <div class="d-flex align-items-center">
+            <button
+              class="btn btn-outline-secondary btn-sm me-3"
+              on:click={closeFullscreenGrid}
+              title="Back to launcher"
+            >
+              <i class="bi bi-arrow-left me-2" aria-hidden="true"></i>
+              Back
+            </button>
+            <h4 class="mb-0">{currentGrid.name}</h4>
+          </div>
+          <div class="text-muted small">
+            Press ESC to exit fullscreen
+          </div>
+        </div>
+      </div>
+      <div class="fullscreen-content">
+        <GridRenderer
+          grid={currentGrid}
+          componentMap={availableComponents.reduce((map, comp) => {
+            map[comp.id] = comp.component;
+            return map;
+          }, {} as Record<string, any>)}
+          fullscreen={true}
+        />
+      </div>
+    </div>
+  {:else if showGridSelector}
+    <GridSelector
+      {availableComponents}
+      {theme}
+      existingGrid={editingGrid}
+      on:gridCreated={handleGridCreated}
+      on:cancel={handleGridSelectorCancel}
+    />
+  {:else}
+    <!-- Launcher View -->
+    <div class="launcher-view">
+      <div class="launcher-header p-4 border-bottom">
+        <div class="d-flex justify-content-between align-items-center">
+          <div>
+            <h2 class="mb-1">Desktop Launcher</h2>
+          </div>
+          <button
+            class="btn btn-primary"
+            on:click={openGridSelector}
+            disabled={savedGrids.length >= maxGrids}
+          >
+            <i class="bi bi-plus me-2" aria-hidden="true"></i>
+            Create New Grid
+          </button>
+        </div>
+      </div>
+
+      <div class="launcher-content p-4">
+        {#if savedGrids.length === 0}
+          <div class="empty-state">
+            <div class="empty-content">
+
+              <button class="btn btn-primary btn-lg" on:click={openGridSelector}>
+                <i class="bi bi-plus me-2" aria-hidden="true"></i>
+                Create New Grid
+              </button>
+            </div>
+          </div>
+        {:else}
+          <div class="grids-container">
+            <div class="row">
+              {#each savedGrids as grid}
+                <div class="col-md-6 col-lg-4 mb-4">
+                  <div class="grid-card card h-100">
+                    <div class="card-body">
+                      <h5 class="card-title">{grid.name}</h5>
+                      <p class="card-text text-muted">
+                        Layout: {grid.layoutId}<br>
+                        Components: {grid.componentAssignments.length}<br>
+                        Created: {new Date(grid.created).toLocaleDateString()}
+                      </p>
+                    </div>
+                    <div class="card-footer bg-transparent">
+                      <div class="d-flex gap-2">
+                        <button
+                          class="btn btn-primary btn-sm"
+                          on:click={() => switchToGrid(grid.id)}
+                        >
+                          Open
+                        </button>
+                        <button
+                          class="btn btn-outline-secondary btn-sm"
+                          on:click={() => editGrid(grid)}
+                          aria-label="Edit grid"
+                          title="Edit grid"
+                        >
+                          <i class="bi bi-pencil" aria-hidden="true"></i>
+                        </button>
+                        <button
+                          class="btn btn-outline-primary btn-sm"
+                          on:click={() => launchGrid(grid.id)}
+                          aria-label="Launch in new window"
+                          title="Launch in new window"
+                        >
+                          <i class="bi bi-box-arrow-up-right" aria-hidden="true"></i>
+                        </button>
+                        <button
+                          class="btn btn-outline-danger btn-sm"
+                          on:click={() => deleteGrid(grid.id)}
+                          aria-label="Delete grid"
+                          title="Delete grid"
+                        >
+                          <i class="bi bi-trash" aria-hidden="true"></i>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              {/each}
+            </div>
+
+            {#if savedGrids.length >= maxGrids}
+              <div class="alert alert-warning">
+                <i class="bi bi-exclamation-triangle me-2" aria-hidden="true"></i>
+                Maximum number of grids ({maxGrids}) reached. Delete a grid to create a new one.
+              </div>
+            {/if}
+          </div>
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .desktop-orchestrator {
+    height: 100vh;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .loading-screen {
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .loading-content {
+    text-align: center;
+  }
+
+  .launcher-view {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .launcher-content {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .fullscreen-grid {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .fullscreen-content {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .empty-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 400px;
+  }
+
+  .empty-content {
+    text-align: center;
+    max-width: 500px;
+  }
+
+  .grid-card {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    cursor: pointer;
+  }
+
+  .grid-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  /* Dark theme */
+  .theme-dark {
+    background: #1a1a1a;
+    color: #fff;
+  }
+
+  .theme-dark .border-bottom {
+    border-color: #404040 !important;
+  }
+
+  .theme-dark .card {
+    background: #2d2d2d;
+    border-color: #404040;
+  }
+
+  .theme-dark .card-footer {
+    border-color: #404040;
+  }
+
+  .theme-dark .text-muted {
+    color: #999 !important;
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 768px) {
+    .launcher-header .d-flex {
+      flex-direction: column;
+      gap: 1rem;
+    }
+  }
+</style>

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

@@ -0,0 +1,26 @@
+import { type ComponentConfig } from './GridSelector/index.js';
+import type { GridConfiguration } from './gridLayouts.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 Desktop: $$__sveltets_2_IsomorphicComponent<{
+    availableComponents?: ComponentConfig[];
+    namespace?: string;
+    theme?: "light" | "dark";
+    maxGrids?: number;
+    onLaunch?: ((grid: GridConfiguration) => void) | null;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Desktop = InstanceType<typeof Desktop>;
+export default Desktop;

package/dist/Desktop/Grid/Half.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  export let position: 'left' | 'right' | 'top' | 'bottom' = 'left';
+</script>
+
+<div class="half {position}">
+  <slot />
+</div>
+
+<style>
+  .half {
+    display: flex;
+    align-items: stretch;
+    justify-content: stretch;
+    border: 1px solid #ccc;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    min-height: 0; /* Important for flex children */
+    min-width: 0;  /* Important for flex children */
+  }
+
+  .half > :global(*) {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    box-sizing: border-box;
+  }
+
+  /* Positions */
+  .left {
+    grid-column: 1 / 2;
+    grid-row: 1 / -1;
+  }
+
+  .right {
+    grid-column: 2 / 3;
+    grid-row: 1 / -1;
+  }
+
+  .top {
+    grid-row: 1 / 2;
+    grid-column: 1 / -1;
+  }
+
+  .bottom {
+    grid-row: 2 / 3;
+    grid-column: 1 / -1;
+  }
+</style>

package/dist/Desktop/Grid/Half.svelte.d.ts

@@ -0,0 +1,29 @@
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Half: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    position?: "left" | "right" | "top" | "bottom";
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Half = InstanceType<typeof Half>;
+export default Half;

package/dist/Desktop/Grid/Quarter.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  export let position: 'left' | 'right' | 'top' | 'bottom';
+  export let topHeight: number = 50;
+  export let bottomHeight: number = 50;
+  export let leftWidth: number = 50;
+  export let rightWidth: number = 50;
+</script>
+
+<div class="quarters {position}" 
+     style="--top-height: {topHeight}%; --bottom-height: {bottomHeight}%; --left-width: {leftWidth}%; --right-width: {rightWidth}%">
+  <div class="quarter top-or-left">
+    <slot name="top-or-left" />
+  </div>
+  <div class="quarter bottom-or-right">
+    <slot name="bottom-or-right" />
+  </div>
+</div>
+
+<style>
+  .quarters {
+    border: 1px solid #aaa;
+    display: grid;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Position the quarters container within the parent grid */
+  .quarters.left {
+    grid-column: 1 / 2;
+    grid-row: 1 / -1; /* Span all rows within the column */
+  }
+
+  .quarters.right {
+    grid-column: 2 / 3;
+    grid-row: 1 / -1; /* Span all rows within the column */
+  }
+
+  .quarters.top {
+    grid-row: 1 / 2;
+    grid-column: 1 / -1;
+  }
+
+  .quarters.bottom {
+    grid-row: 2 / 3;
+    grid-column: 1 / -1;
+  }
+
+  /* Left and Right quarters are stacked (vertical split) */
+  .quarters.left,
+  .quarters.right {
+    grid-template-rows: var(--top-height) var(--bottom-height);
+    grid-template-columns: 1fr;
+  }
+
+  /* Top and Bottom quarters are side-by-side (horizontal split) */
+  .quarters.top,
+  .quarters.bottom {
+    grid-template-columns: var(--left-width) var(--right-width);
+    grid-template-rows: 1fr;
+  }
+
+  .quarter {
+    border: 1px solid #ddd;
+    display: flex;
+    align-items: stretch;
+    justify-content: stretch;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    min-height: 0; /* Important for flex children */
+    min-width: 0;  /* Important for flex children */
+  }
+
+  .quarter > :global(*) {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    box-sizing: border-box;
+  }
+
+  /* Position within the grid */
+  .quarters.left .top-or-left,
+  .quarters.right .top-or-left {
+    grid-row: 1;
+  }
+
+  .quarters.left .bottom-or-right,
+  .quarters.right .bottom-or-right {
+    grid-row: 2;
+  }
+
+  .quarters.top .top-or-left,
+  .quarters.bottom .top-or-left {
+    grid-column: 1;
+  }
+
+  .quarters.top .bottom-or-right,
+  .quarters.bottom .bottom-or-right {
+    grid-column: 2;
+  }
+</style>

package/dist/Desktop/Grid/Quarter.svelte.d.ts

@@ -0,0 +1,27 @@
+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 Quarter: $$__sveltets_2_IsomorphicComponent<{
+    position: "left" | "right" | "top" | "bottom";
+    topHeight?: number;
+    bottomHeight?: number;
+    leftWidth?: number;
+    rightWidth?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'top-or-left': {};
+    'bottom-or-right': {};
+}, {}, string>;
+type Quarter = InstanceType<typeof Quarter>;
+export default Quarter;