@smartnet360/svelte-components 0.0.1-beta.2

package/dist/Desktop/GridSelector/LayoutPicker.svelte

@@ -0,0 +1,241 @@
+
+<script lang="ts">
+    /**
+ * Layout Picker Component
+ * 
+ * Displays available grid layouts organized by category with visual previews.
+ * Users can click to select a layout type.
+ */
+
+  import { createEventDispatcher } from 'svelte';
+  import type { GridLayoutDefinition } from '../gridLayouts.js';
+
+  export let basicLayouts: GridLayoutDefinition[] = [];
+  export let asymmetricLayouts: GridLayoutDefinition[] = [];
+  export let symmetricLayouts: GridLayoutDefinition[] = [];
+  export let selectedLayoutId: string = '';
+
+  const dispatch = createEventDispatcher<{
+    layoutSelected: { layoutId: string };
+  }>();
+
+  function selectLayout(layoutId: string) {
+    dispatch('layoutSelected', { layoutId });
+  }
+</script>
+
+<div class="layout-picker p-3">
+  <div class="picker-header mb-3">
+    <h6 class="mb-1">
+      <span class="step-number badge bg-primary me-2">1</span>
+      Choose Layout
+    </h6>
+  </div>
+
+  <!-- Basic Layouts -->
+  {#if basicLayouts.length > 0}
+    <div class="layout-category mb-4">
+      <div class="category-header mb-2">
+        <span class="badge bg-primary">Basic</span>
+        <small class="text-muted ms-2">Simple half layouts (1x1)</small>
+      </div>
+      
+      <div class="layout-grid">
+        {#each basicLayouts as layout}
+          <button
+            class="layout-option btn"
+            class:selected={selectedLayoutId === layout.id}
+            on:click={() => selectLayout(layout.id)}
+            title={layout.description}
+          >
+            <div class="layout-preview">
+              {@html layout.previewSvg}
+            </div>
+            <div class="layout-info">
+              <div class="layout-name">{layout.name}</div>
+              <div class="layout-icon">{layout.icon}</div>
+            </div>
+          </button>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
+  <!-- Asymmetric Layouts -->
+  {#if asymmetricLayouts.length > 0}
+    <div class="layout-category mb-4">
+      <div class="category-header mb-2">
+        <span class="badge bg-primary">Asymmetric</span>
+        <small class="text-muted ms-2">Mixed half + quarters (1x2, 2x1)</small>
+      </div>
+      
+      <div class="layout-grid">
+        {#each asymmetricLayouts as layout}
+          <button
+            class="layout-option btn"
+            class:selected={selectedLayoutId === layout.id}
+            on:click={() => selectLayout(layout.id)}
+            title={layout.description}
+          >
+            <div class="layout-preview">
+              {@html layout.previewSvg}
+            </div>
+            <div class="layout-info">
+              <div class="layout-name">{layout.name}</div>
+              <div class="layout-icon">{layout.icon}</div>
+            </div>
+          </button>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
+  <!-- Symmetric Layouts -->
+  {#if symmetricLayouts.length > 0}
+    <div class="layout-category mb-4">
+      <div class="category-header mb-2">
+        <span class="badge bg-primary">Symmetric</span>
+        <small class="text-muted ms-2">Equal quarters (2x2)</small>
+      </div>
+      
+      <div class="layout-grid">
+        {#each symmetricLayouts as layout}
+          <button
+            class="layout-option btn"
+            class:selected={selectedLayoutId === layout.id}
+            on:click={() => selectLayout(layout.id)}
+            title={layout.description}
+          >
+            <div class="layout-preview">
+              {@html layout.previewSvg}
+            </div>
+            <div class="layout-info">
+              <div class="layout-name">{layout.name}</div>
+              <div class="layout-icon">{layout.icon}</div>
+            </div>
+          </button>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .layout-picker {
+    border-bottom: 1px solid #dee2e6;
+  }
+
+  .category-header {
+    display: flex;
+    align-items: center;
+  }
+
+  .layout-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+  }
+
+  .layout-option {
+    border: 2px solid #dee2e6;
+    border-radius: 8px;
+    padding: 8px;
+    background: #fff;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    text-align: center;
+    min-height: 80px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .layout-option:hover {
+    border-color: #007bff;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
+  }
+
+  .layout-option.selected {
+    border-color: #007bff;
+    background: #e7f3ff;
+    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+  }
+
+  .layout-preview {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 4px;
+  }
+
+  .layout-preview :global(svg) {
+    width: 100%;
+    max-width: 60px;
+    height: auto;
+  }
+
+  .layout-info {
+    flex-shrink: 0;
+  }
+
+  .layout-name {
+    font-size: 10px;
+    font-weight: 500;
+    color: #333;
+    line-height: 1.2;
+    margin-bottom: 2px;
+  }
+
+  .layout-icon {
+    font-size: 12px;
+    opacity: 0.7;
+  }
+
+  .layout-option.selected .layout-name {
+    color: #007bff;
+    font-weight: 600;
+  }
+
+  /* Dark theme support */
+  :global(.theme-dark) .layout-option {
+    background: #3d3d3d;
+    border-color: #555;
+    color: #fff;
+  }
+
+  :global(.theme-dark) .layout-option:hover {
+    border-color: #4dabf7;
+  }
+
+  :global(.theme-dark) .layout-option.selected {
+    border-color: #4dabf7;
+    background: #1a2a3a;
+  }
+
+  :global(.theme-dark) .layout-name {
+    color: #fff;
+  }
+
+  :global(.theme-dark) .layout-option.selected .layout-name {
+    color: #4dabf7;
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 768px) {
+    .layout-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .step-number {
+    font-size: 12px;
+    width: 20px;
+    height: 20px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+  }
+</style>

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

@@ -0,0 +1,28 @@
+import type { GridLayoutDefinition } 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 LayoutPicker: $$__sveltets_2_IsomorphicComponent<{
+    basicLayouts?: GridLayoutDefinition[];
+    asymmetricLayouts?: GridLayoutDefinition[];
+    symmetricLayouts?: GridLayoutDefinition[];
+    selectedLayoutId?: string;
+}, {
+    layoutSelected: CustomEvent<{
+        layoutId: string;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type LayoutPicker = InstanceType<typeof LayoutPicker>;
+export default LayoutPicker;

package/dist/Desktop/GridSelector/LayoutPreview.svelte

@@ -0,0 +1,309 @@
+
+
+<script lang="ts">
+  /**
+   * Layout Preview Component
+   * 
+   * Shows a visual preview of the selected layout with dropdown selectors for components.
+   * Much simpler than drag & drop - users just select components from dropdowns.
+   */
+  import { createEventDispatcher } from 'svelte';
+  import type { GridLayoutDefinition, ComponentAssignment } from '../gridLayouts.js';
+  import type { ComponentConfig } from './GridSelector.svelte';
+
+  export let selectedLayout: GridLayoutDefinition | null = null;
+  export let componentAssignments: ComponentAssignment[] = [];
+  export let availableComponents: ComponentConfig[] = [];
+
+  const dispatch = createEventDispatcher<{
+    componentAssigned: { slotId: string; componentId: string };
+    componentRemoved: { slotId: string };
+  }>();
+
+  // Get component assignment for a slot
+  function getAssignedComponent(slotId: string): ComponentConfig | null {
+    const assignment = componentAssignments.find(a => a.slotId === slotId);
+    if (!assignment) return null;
+    
+    return availableComponents.find(c => c.id === assignment.componentId) || null;
+  }
+
+  // Handle component selection from dropdown
+  function handleComponentSelect(slotId: string, event: Event) {
+    const target = event.target as HTMLSelectElement;
+    const componentId = target.value;
+    
+    if (componentId === '') {
+      // Empty selection - remove component
+      dispatch('componentRemoved', { slotId });
+    } else {
+      // Component selected - assign it
+      dispatch('componentAssigned', { slotId, componentId });
+    }
+  }
+
+  // Get selected value for dropdown
+  function getSelectedValue(slotId: string): string {
+    const assignment = componentAssignments.find(a => a.slotId === slotId);
+    return assignment?.componentId || '';
+  }
+</script>
+
+<div class="layout-preview">
+  {#if !selectedLayout}
+    <div class="empty-preview">
+      <div class="empty-content">
+        <div class="empty-icon">🎨</div>
+        <h5>Select a Layout</h5>
+        <p class="text-muted">Choose a layout from the left panel to see the preview</p>
+      </div>
+    </div>
+  {:else}
+    <div class="preview-header mb-3">
+      <h5 class="mb-1">
+        <span class="step-number badge bg-primary me-2">2</span>
+        {selectedLayout.name}
+      </h5>
+      <p class="text-muted mb-0">{selectedLayout.description}</p>
+    </div>
+
+    <div class="preview-container">
+      <!-- Simple grid with dropdowns for each slot -->
+      <div class="grid-preview" style="display: grid; gap: 12px; height: 100%;">
+        {#each selectedLayout.slots as slot}
+          {@const assignedComponent = getAssignedComponent(slot.id)}
+          <div
+            class="slot-selector"
+            class:has-component={assignedComponent}
+            style="
+              grid-column: {Math.floor(slot.position.x / 50) + 1} / span 1; 
+              grid-row: {Math.floor(slot.position.y / 50) + 1} / span 1;
+              {selectedLayout.id === 'half-horizontal' ? 'grid-template-columns: 1fr 1fr; grid-template-rows: 1fr;' : ''}
+              {selectedLayout.id === 'half-vertical' ? 'grid-template-columns: 1fr; grid-template-rows: 1fr 1fr;' : ''}
+              {selectedLayout.id.includes('quarters') || selectedLayout.id.includes('left-half') || selectedLayout.id.includes('right-half') || selectedLayout.id.includes('top-half') || selectedLayout.id.includes('bottom-half') ? 'grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;' : ''}
+            "
+          >
+            <div class="slot-content">
+              <div class="slot-header">
+                <h6 class="slot-name mb-2">{slot.name}</h6>
+              </div>
+              
+              <div class="component-selector">
+                <select 
+                  class="form-select"
+                  value={getSelectedValue(slot.id)}
+                  on:change={(e) => handleComponentSelect(slot.id, e)}
+                  aria-label="Select component for {slot.name}"
+                >
+                  <option value="">Choose a component...</option>
+                  {#each availableComponents as component}
+                    <option value={component.id}>
+                      {component.icon || '📦'} {component.name}
+                    </option>
+                  {/each}
+                </select>
+              </div>
+
+              {#if assignedComponent}
+                <div class="selected-component mt-3">
+                  <div class="component-preview">
+                    <div class="component-icon">
+                      {#if assignedComponent.icon}
+                        {#if assignedComponent.icon.startsWith('http') || assignedComponent.icon.startsWith('/') || assignedComponent.icon.startsWith('.')}
+                          <img src={assignedComponent.icon} alt={assignedComponent.name} />
+                        {:else}
+                          <span class="icon-emoji">{assignedComponent.icon}</span>
+                        {/if}
+                      {:else}
+                        <span class="icon-default">📦</span>
+                      {/if}
+                    </div>
+                    <div class="component-info">
+                      <div class="component-name">{assignedComponent.name}</div>
+                      {#if assignedComponent.description}
+                        <small class="component-description text-muted">{assignedComponent.description}</small>
+                      {/if}
+                    </div>
+                  </div>
+                </div>
+              {/if}
+            </div>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .layout-preview {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .empty-preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    min-height: 400px;
+  }
+
+  .empty-content {
+    text-align: center;
+    max-width: 300px;
+  }
+
+  .empty-icon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+    opacity: 0.3;
+  }
+
+  .preview-container {
+    flex: 1;
+    padding: 20px;
+    min-height: 400px;
+  }
+
+  .grid-preview {
+    display: grid;
+    gap: 12px;
+    height: 100%;
+    border: 2px dashed #dee2e6;
+    border-radius: 12px;
+    padding: 12px;
+    background: #fafafa;
+  }
+
+  .slot-selector {
+    background: white;
+    border: 2px solid #dee2e6;
+    border-radius: 8px;
+    padding: 16px;
+    min-height: 120px;
+    display: flex;
+    flex-direction: column;
+    transition: all 0.2s ease;
+  }
+
+  .slot-selector:hover {
+    border-color: #007bff;
+    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
+  }
+
+  .slot-selector.has-component {
+    border-color: #28a745;
+    background: #f8fff9;
+  }
+
+  .slot-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .slot-header {
+    text-align: center;
+    margin-bottom: 12px;
+  }
+
+  .slot-name {
+    font-weight: 600;
+    color: #495057;
+    margin-bottom: 0;
+    font-size: 14px;
+  }
+
+  .component-selector {
+    margin-bottom: 12px;
+  }
+
+  .selected-component {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .component-preview {
+    text-align: center;
+    width: 100%;
+  }
+
+  .component-icon {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f8f9fa;
+    border-radius: 6px;
+    border: 1px solid #dee2e6;
+    margin: 0 auto 8px;
+  }
+
+  .component-icon img {
+    width: 24px;
+    height: 24px;
+    object-fit: contain;
+  }
+
+  .icon-emoji,
+  .icon-default {
+    font-size: 20px;
+    line-height: 1;
+  }
+
+  .component-info {
+    text-align: center;
+  }
+
+  .component-name {
+    font-weight: 500;
+    font-size: 13px;
+    color: #333;
+    margin-bottom: 4px;
+  }
+
+  .component-description {
+    font-size: 11px;
+    line-height: 1.3;
+    color: #6c757d;
+  }
+
+  /* Dark theme support */
+  :global(.theme-dark) .grid-preview {
+    background: #2d2d2d;
+    border-color: #555;
+  }
+
+  :global(.theme-dark) .slot-selector {
+    background: #3d3d3d;
+    border-color: #555;
+    color: #fff;
+  }
+
+  :global(.theme-dark) .slot-selector:hover {
+    border-color: #4dabf7;
+  }
+
+  :global(.theme-dark) .slot-selector.has-component {
+    border-color: #51cf66;
+    background: #2d3d2d;
+  }
+
+  :global(.theme-dark) .component-icon {
+    background: #2d2d2d;
+    border-color: #555;
+  }
+
+  :global(.theme-dark) .component-name {
+    color: #fff;
+  }
+
+  :global(.theme-dark) .slot-name {
+    color: #ccc;
+  }
+</style>

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

@@ -0,0 +1,32 @@
+import type { GridLayoutDefinition, ComponentAssignment } from '../gridLayouts.js';
+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 LayoutPreview: $$__sveltets_2_IsomorphicComponent<{
+    selectedLayout?: GridLayoutDefinition | null;
+    componentAssignments?: ComponentAssignment[];
+    availableComponents?: ComponentConfig[];
+}, {
+    componentAssigned: CustomEvent<{
+        slotId: string;
+        componentId: string;
+    }>;
+    componentRemoved: CustomEvent<{
+        slotId: string;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type LayoutPreview = InstanceType<typeof LayoutPreview>;
+export default LayoutPreview;

package/dist/Desktop/GridSelector/index.d.ts

@@ -0,0 +1,4 @@
+export { default as GridSelector, type ComponentConfig } from './GridSelector.svelte';
+export { default as LayoutPicker } from './LayoutPicker.svelte';
+export { default as LayoutPreview } from './LayoutPreview.svelte';
+export { default as ConfigurationPanel } from './ConfigurationPanel.svelte';

package/dist/Desktop/GridSelector/index.js

@@ -0,0 +1,4 @@
+export { default as GridSelector } from './GridSelector.svelte';
+export { default as LayoutPicker } from './LayoutPicker.svelte';
+export { default as LayoutPreview } from './LayoutPreview.svelte';
+export { default as ConfigurationPanel } from './ConfigurationPanel.svelte';