@smartnet360/svelte-components 0.0.1-beta.2

package/dist/Desktop/GridRenderer.svelte

@@ -0,0 +1,328 @@
+<script lang="ts">
+  /**
+   * GridRenderer Component
+   * 
+   * Reusable component that renders a GridConfiguration using Half/Quarter components.
+   * Can be used in full-screen mode, embedded in other apps, or anywhere else.
+   */
+  import { Half, Quarter, ResizeHandle, resizeStore } from '../index.js';
+  import type { GridConfiguration } from './gridLayouts.js';
+
+  // Props
+  export let grid: GridConfiguration;
+  export let componentMap: Record<string, any> = {};
+  export let fullscreen: boolean = false;
+  export let showEmptySlots: boolean = true;
+  export let enableResize: boolean = true;
+
+  // Resize state
+  let leftWidth = 50;
+  let rightWidth = 50;
+  let topHeight = 50;
+  let bottomHeight = 50;
+
+  // Subscribe to resize store changes
+  if (enableResize) {
+    resizeStore.subscribe((state: any) => {
+      leftWidth = state.leftWidth;
+      rightWidth = state.rightWidth;
+      topHeight = state.topHeight;
+      bottomHeight = state.bottomHeight;
+    });
+  }
+
+  // Handle resize events
+  function handleResize(event: CustomEvent) {
+    if (!enableResize) return;
+    
+    const { horizontalSize, verticalSize } = event.detail;
+    if (horizontalSize !== undefined && verticalSize !== undefined) {
+      resizeStore.update2D(horizontalSize, verticalSize);
+    }
+  }
+
+  // Get component for assignment
+  function getComponent(componentId: string) {
+    return componentMap[componentId];
+  }
+
+  // Get assigned component for a slot
+  function getAssignedComponent(slotId: string) {
+    if (!grid) return null;
+    
+    const assignment = grid.componentAssignments.find(a => a.slotId === slotId);
+    if (!assignment) return null;
+    
+    return getComponent(assignment.componentId);
+  }
+
+  // Render a slot with component or empty state
+  function renderSlot(slotId: string, slotName: string) {
+    const component = getAssignedComponent(slotId);
+    
+    if (component) {
+      return {
+        hasComponent: true,
+        component: component
+      };
+    } else if (showEmptySlots) {
+      return {
+        hasComponent: false,
+        emptyMessage: `No component assigned to ${slotName} section`
+      };
+    }
+    
+    return { hasComponent: false };
+  }
+</script>
+
+<!-- Slot rendering snippet -->
+{#snippet slotContent(slotId, slotName)}
+  {@const slot = renderSlot(slotId, slotName)}
+  {#if slot.hasComponent}
+    <div class="component-wrapper">
+      <svelte:component this={slot.component} />
+    </div>
+  {:else if slot.emptyMessage}
+    <div class="empty-slot">
+      <p>{slot.emptyMessage}</p>
+    </div>
+  {/if}
+{/snippet}
+
+{#if grid}
+  <!-- Render the grid based on layout type -->
+  {#if grid.layoutId === 'half-horizontal'}
+    <div class="grid-container" class:fullscreen 
+         style="grid-template-columns: {leftWidth}% {rightWidth}%; grid-template-rows: 1fr;">
+      <!-- Left Half -->
+      <Half position="left">
+        {@render slotContent('left', 'left')}
+      </Half>
+      
+      <!-- Right Half -->
+      <Half position="right">
+        {@render slotContent('right', 'right')}
+      </Half>
+    </div>
+  
+  {:else if grid.layoutId === 'half-vertical'}
+    <div class="grid-container" class:fullscreen 
+         style="grid-template-columns: 1fr; grid-template-rows: {topHeight}% {bottomHeight}%;">
+      <!-- Top Half -->
+      <Half position="top">
+        {@render slotContent('top', 'top')}
+      </Half>
+      
+      <!-- Bottom Half -->
+      <Half position="bottom">
+        {@render slotContent('bottom', 'bottom')}
+      </Half>
+    </div>
+
+  {:else if grid.layoutId === 'left-half-right-quarters'}
+    <div class="grid-container" class:fullscreen 
+         style="grid-template-columns: {leftWidth}% {rightWidth}%; grid-template-rows: {topHeight}% {bottomHeight}%;">
+      <!-- Left Half -->
+      <Half position="left">
+        {@render slotContent('left', 'left')}
+      </Half>
+      
+      <!-- Right side with quarters -->
+      <Quarter position="right" topHeight={topHeight} bottomHeight={bottomHeight} leftWidth={leftWidth} rightWidth={rightWidth}>
+        <div slot="top-or-left">
+          {@render slotContent('top-right', 'top-right')}
+        </div>
+        
+        <div slot="bottom-or-right">
+          {@render slotContent('bottom-right', 'bottom-right')}
+        </div>
+      </Quarter>
+    </div>
+
+  {:else if grid.layoutId === 'right-half-left-quarters'}
+    <div class="grid-container" class:fullscreen 
+         style="grid-template-columns: {leftWidth}% {rightWidth}%; grid-template-rows: {topHeight}% {bottomHeight}%;">
+      <!-- Left side with quarters -->
+      <Quarter position="left" topHeight={topHeight} bottomHeight={bottomHeight} leftWidth={leftWidth} rightWidth={rightWidth}>
+        <div slot="top-or-left">
+          {@render slotContent('top-left', 'top-left')}
+        </div>
+        
+        <div slot="bottom-or-right">
+          {@render slotContent('bottom-left', 'bottom-left')}
+        </div>
+      </Quarter>
+
+      <!-- Right Half -->
+      <Half position="right">
+        {@render slotContent('right', 'right')}
+      </Half>
+    </div>
+
+  {:else if grid.layoutId === 'top-half-bottom-quarters'}
+    <div class="grid-container" class:fullscreen 
+         style="grid-template-columns: {leftWidth}% {rightWidth}%; grid-template-rows: {topHeight}% {bottomHeight}%;">
+      <!-- Top Half -->
+      <Half position="top">
+        {@render slotContent('top', 'top')}
+      </Half>
+
+      <!-- Bottom side with quarters -->
+      <Quarter position="bottom" topHeight={topHeight} bottomHeight={bottomHeight} leftWidth={leftWidth} rightWidth={rightWidth}>
+        <div slot="top-or-left">
+          {@render slotContent('bottom-left', 'bottom-left')}
+        </div>
+        
+        <div slot="bottom-or-right">
+          {@render slotContent('bottom-right', 'bottom-right')}
+        </div>
+      </Quarter>
+    </div>
+
+  {:else if grid.layoutId === 'bottom-half-top-quarters'}
+    <div class="grid-container" class:fullscreen 
+         style="grid-template-columns: {leftWidth}% {rightWidth}%; grid-template-rows: {topHeight}% {bottomHeight}%;">
+      <!-- Top side with quarters -->
+      <Quarter position="top" topHeight={topHeight} bottomHeight={bottomHeight} leftWidth={leftWidth} rightWidth={rightWidth}>
+        <div slot="top-or-left">
+          {@render slotContent('top-left', 'top-left')}
+        </div>
+        
+        <div slot="bottom-or-right">
+          {@render slotContent('top-right', 'top-right')}
+        </div>
+      </Quarter>
+
+      <!-- Bottom Half -->
+      <Half position="bottom">
+        {@render slotContent('bottom', 'bottom')}
+      </Half>
+    </div>
+
+  {:else if grid.layoutId === 'quarters'}
+    <div class="grid-container" class:fullscreen 
+         style="grid-template-columns: {leftWidth}% {rightWidth}%; grid-template-rows: {topHeight}% {bottomHeight}%;">
+      <!-- Top quarters -->
+      <Quarter position="top" topHeight={topHeight} bottomHeight={bottomHeight} leftWidth={leftWidth} rightWidth={rightWidth}>
+        <div slot="top-or-left">
+          {@render slotContent('top-left', 'top-left')}
+        </div>
+        
+        <div slot="bottom-or-right">
+          {@render slotContent('top-right', 'top-right')}
+        </div>
+      </Quarter>
+      
+      <!-- Bottom quarters -->
+      <Quarter position="bottom" topHeight={topHeight} bottomHeight={bottomHeight} leftWidth={leftWidth} rightWidth={rightWidth}>
+        <div slot="top-or-left">
+          {@render slotContent('bottom-left', 'bottom-left')}
+        </div>
+        
+        <div slot="bottom-or-right">
+          {@render slotContent('bottom-right', 'bottom-right')}
+        </div>
+      </Quarter>
+    </div>
+
+  {:else}
+    <div class="error-container">
+      <div class="error-content">
+        <div class="error-icon">🤷</div>
+        <h3>Unsupported Layout</h3>
+        <p class="text-muted">Layout type "{grid.layoutId}" is not yet supported</p>
+      </div>
+    </div>
+  {/if}
+  
+  <!-- Universal Resize Handle - applies to all valid layouts -->
+  {#if grid && enableResize}
+    <ResizeHandle
+      horizontalSize={leftWidth}
+      verticalSize={topHeight}
+      on:resize={handleResize}
+    />
+  {/if}
+{:else}
+  <div class="error-container">
+    <div class="error-content">
+      <div class="error-icon">⚠️</div>
+      <h3>No Grid Configuration</h3>
+      <p class="text-muted">No grid configuration provided</p>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .grid-container {
+    height: 100%;
+    width: 100%;
+    display: grid;
+    position: relative;
+    background: #f0f0f0;
+  }
+
+  .grid-container.fullscreen {
+    height: 100vh;
+    width: 100vw;
+  }
+
+  .component-wrapper {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .component-wrapper > :global(*) {
+    flex: 1;
+    min-height: 0;
+    min-width: 0;
+    max-width: 100%;
+    max-height: 100%;
+    box-sizing: border-box;
+  }
+
+  .empty-slot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f8f9fa;
+    border: 2px dashed #dee2e6;
+    margin: 8px;
+    border-radius: 8px;
+    color: #6c757d;
+    min-height: 100px;
+  }
+
+  .empty-slot p {
+    margin: 0;
+    font-style: italic;
+    text-align: center;
+    padding: 1rem;
+  }
+
+  .error-container {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f8f9fa;
+  }
+
+  .error-content {
+    text-align: center;
+    max-width: 400px;
+    padding: 2rem;
+  }
+
+  .error-icon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+  }
+</style>

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

@@ -0,0 +1,25 @@
+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 GridRenderer: $$__sveltets_2_IsomorphicComponent<{
+    grid: GridConfiguration;
+    componentMap?: Record<string, any>;
+    fullscreen?: boolean;
+    showEmptySlots?: boolean;
+    enableResize?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type GridRenderer = InstanceType<typeof GridRenderer>;
+export default GridRenderer;

package/dist/Desktop/GridSelector/ComponentPalette.svelte

@@ -0,0 +1,243 @@
+<script lang="ts">
+  /**
+   * Component Info Panel
+   * 
+   * Simple informational display of available components.
+   * No drag-and-drop needed since dropdowns handle selection.
+   */
+  import type { ComponentConfig } from './GridSelector.svelte';
+
+  export let availableComponents: ComponentConfig[] = [];
+
+  // Group components by category if available
+  $: componentsByCategory = availableComponents.reduce((acc, component) => {
+    const category = component.category || 'General';
+    if (!acc[category]) acc[category] = [];
+    acc[category].push(component);
+    return acc;
+  }, {} as Record<string, ComponentConfig[]>);
+
+  $: categoryKeys = Object.keys(componentsByCategory).sort();
+</script>
+
+<div class="component-info p-3">
+  <div class="info-header mb-3">
+    <h6 class="mb-1">
+      <span class="step-number badge bg-info me-2">ℹ️</span>
+      Available Components
+    </h6>
+    <small class="text-muted">
+      {availableComponents.length} components ready to use
+    </small>
+  </div>
+
+  {#if availableComponents.length === 0}
+    <div class="empty-state text-center py-4">
+      <div class="text-muted mb-2">
+        <i class="fas fa-cube" style="font-size: 2rem; opacity: 0.3;"></i>
+      </div>
+      <p class="text-muted mb-0">No components available</p>
+    </div>
+  {:else}
+    <div class="components-list">
+      {#each categoryKeys as category}
+        <div class="component-category mb-3">
+          {#if categoryKeys.length > 1}
+            <div class="category-title mb-2">
+              <small class="text-muted fw-bold">{category}</small>
+            </div>
+          {/if}
+          
+          <div class="component-items">
+            {#each componentsByCategory[category] as component}
+              <div class="component-item-info">
+                <div class="component-icon">
+                  {#if component.icon}
+                    {#if component.icon.startsWith('http') || component.icon.startsWith('/') || component.icon.startsWith('.')}
+                      <img src={component.icon} alt={component.name} />
+                    {:else}
+                      <span class="icon-emoji">{component.icon}</span>
+                    {/if}
+                  {:else}
+                    <span class="icon-default">📦</span>
+                  {/if}
+                </div>
+                
+                <div class="component-info">
+                  <div class="component-name">{component.name}</div>
+                  {#if component.description}
+                    <div class="component-description">{component.description}</div>
+                  {/if}
+                </div>
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/each}
+    </div>
+
+    <div class="usage-instructions mt-3 p-2 bg-light rounded">
+      <small class="text-muted">
+        <i class="fas fa-info-circle me-1"></i>
+        Use the dropdowns in the preview area to assign components
+      </small>
+    </div>
+  {/if}
+</div>
+
+
+<style>
+  .component-info {
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+  }
+
+  .component-item-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px;
+    border: 1px solid #e9ecef;
+    border-radius: 6px;
+    background: #fff;
+    margin-bottom: 6px;
+    transition: all 0.2s ease;
+  }
+
+  .component-item-info:hover {
+    border-color: #007bff;
+    background: #f8f9fa;
+  }
+
+  .component-icon {
+    flex-shrink: 0;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f8f9fa;
+    border-radius: 4px;
+    border: 1px solid #dee2e6;
+  }
+
+  .component-icon img {
+    width: 20px;
+    height: 20px;
+    object-fit: contain;
+  }
+
+  .icon-emoji,
+  .icon-default {
+    font-size: 16px;
+    line-height: 1;
+  }
+
+  .component-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .component-name {
+    font-weight: 500;
+    font-size: 13px;
+    color: #333;
+    margin-bottom: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .component-description {
+    font-size: 11px;
+    color: #666;
+    line-height: 1.3;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .category-title {
+    border-bottom: 1px solid #dee2e6;
+    padding-bottom: 4px;
+  }
+
+  .usage-instructions {
+    position: sticky;
+    bottom: 0;
+    background: #f8f9fa !important;
+    border: 1px solid #dee2e6;
+  }
+
+  .step-number {
+    font-size: 12px;
+    width: 20px;
+    height: 20px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+  }
+
+  /* Dark theme support */
+  :global(.theme-dark) .component-item-info {
+    background: #3d3d3d;
+    border-color: #555;
+    color: #fff;
+  }
+
+  :global(.theme-dark) .component-item-info:hover {
+    border-color: #4dabf7;
+    background: #404040;
+  }
+
+  :global(.theme-dark) .component-icon {
+    background: #2d2d2d;
+    border-color: #555;
+  }
+
+  :global(.theme-dark) .component-name {
+    color: #fff;
+  }
+
+  :global(.theme-dark) .component-description {
+    color: #ccc;
+  }
+
+  :global(.theme-dark) .usage-instructions {
+    background: #2d2d2d !important;
+    border-color: #555;
+  }
+
+  :global(.theme-dark) .category-title {
+    border-color: #555;
+  }
+
+  /* Scrollbar styling */
+  .component-info::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .component-info::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+
+  .component-info::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+  }
+
+  .component-info::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+  }
+</style>

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

@@ -0,0 +1,27 @@
+/**
+   * Component Info Panel
+   *
+   * Simple informational display of available components.
+   * No drag-and-drop needed since dropdowns handle selection.
+   */
+import type { ComponentConfig } from './GridSelector.svelte';
+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 ComponentPalette: $$__sveltets_2_IsomorphicComponent<{
+    availableComponents?: ComponentConfig[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ComponentPalette = InstanceType<typeof ComponentPalette>;
+export default ComponentPalette;