@smartnet360/svelte-components 0.0.1-beta.2

package/dist/Desktop/GridSelector/ConfigurationPanel.svelte

@@ -0,0 +1,242 @@
+
+
+<script lang="ts">
+    /**
+ * Configuration Panel Component
+ * 
+ * Provides the form for naming the grid and save/cancel actions.
+ * Shows validation errors and completion status.
+ */
+  import { createEventDispatcher } from 'svelte';
+
+  export let gridName: string = '';
+  export let isValid: boolean = false;
+  export let validationErrors: string[] = [];
+
+  const dispatch = createEventDispatcher<{
+    nameChanged: { name: string };
+    save: void;
+    cancel: void;
+  }>();
+
+  let nameInput: HTMLInputElement;
+
+  function handleNameInput(event: Event) {
+    const target = event.target as HTMLInputElement;
+    dispatch('nameChanged', { name: target.value });
+  }
+
+  function handleSave() {
+    if (isValid) {
+      dispatch('save');
+    }
+  }
+
+  function handleCancel() {
+    dispatch('cancel');
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' && isValid) {
+      handleSave();
+    } else if (event.key === 'Escape') {
+      handleCancel();
+    }
+  }
+</script>
+
+<div class="configuration-panel p-3">
+  <div class="row align-items-center">
+    <!-- Grid Name Input -->
+    <div class="col-md-6">
+      <div class="form-group mb-0">
+        <label for="gridName" class="form-label mb-1">
+          <span class="step-number badge bg-primary me-2">3</span>
+          <strong>Grid Name</strong>
+        </label>
+        <input
+          bind:this={nameInput}
+          type="text"
+          id="gridName"
+          class="form-control"
+          class:is-invalid={validationErrors.some(e => e.includes('name'))}
+          placeholder="Enter grid name..."
+          bind:value={gridName}
+          on:input={handleNameInput}
+          on:keydown={handleKeydown}
+          maxlength="50"
+        />
+        {#if validationErrors.some(e => e.includes('name'))}
+          <div class="invalid-feedback">
+            {validationErrors.find(e => e.includes('name'))}
+          </div>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Validation Status -->
+    <div class="col-md-3">
+      <div class="validation-status">
+        {#if validationErrors.length > 0}
+          <div class="status-indicator text-warning">
+            <i class="bi bi-exclamation-triangle me-1"></i>
+            <small>
+              {validationErrors.length} issue{validationErrors.length !== 1 ? 's' : ''} remaining
+            </small>
+          </div>
+          <div class="validation-errors mt-1">
+            {#each validationErrors as error}
+              <div class="text-danger small">
+                <i class="bi bi-x me-1"></i>
+                {error}
+              </div>
+            {/each}
+          </div>
+        {:else if gridName.trim()}
+          <div class="status-indicator text-success">
+            <i class="bi bi-check-circle me-1"></i>
+            <small>Ready to create</small>
+          </div>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Action Buttons -->
+    <div class="col-md-3 text-end">
+      <div class="btn-group">
+        <button
+          type="button"
+          class="btn btn-outline-secondary"
+          on:click={handleCancel}
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary"
+          class:disabled={!isValid}
+          disabled={!isValid}
+          on:click={handleSave}
+        >
+          <i class="fas fa-save me-1"></i>
+          Create Grid
+        </button>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+<style>
+  .configuration-panel {
+    background: #f8f9fa;
+    border-top: 1px solid #dee2e6;
+    min-height: 120px;
+  }
+
+  .validation-status {
+    min-height: 60px;
+  }
+
+  .status-indicator {
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+  }
+
+  .validation-errors {
+    max-height: 80px;
+    overflow-y: auto;
+  }
+
+  .btn.disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  /* Ensure form controls have proper spacing */
+  .form-group {
+    margin-bottom: 0;
+  }
+
+  .form-label {
+    font-size: 14px;
+    font-weight: 500;
+    color: #495057;
+  }
+
+  .form-control {
+    font-size: 14px;
+  }
+
+  .form-control:focus {
+    border-color: #007bff;
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  }
+
+  /* Dark theme support */
+  :global(.theme-dark) .configuration-panel {
+    background: #2d2d2d;
+    border-color: #555;
+    color: #fff;
+  }
+
+  :global(.theme-dark) .form-label {
+    color: #fff;
+  }
+
+  :global(.theme-dark) .form-control {
+    background: #3d3d3d;
+    border-color: #555;
+    color: #fff;
+  }
+
+  :global(.theme-dark) .form-control:focus {
+    border-color: #4dabf7;
+    box-shadow: 0 0 0 0.2rem rgba(77, 171, 247, 0.25);
+  }
+
+  :global(.theme-dark) .btn-outline-secondary {
+    border-color: #6c757d;
+    color: #6c757d;
+  }
+
+  :global(.theme-dark) .btn-outline-secondary:hover {
+    background: #6c757d;
+    color: #fff;
+  }
+
+  /* Custom scrollbar for validation errors */
+  .validation-errors::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  .validation-errors::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+
+  .validation-errors::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 2px;
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 768px) {
+    .configuration-panel .row {
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .col-md-3.text-end {
+      text-align: center !important;
+    }
+
+    .btn-group {
+      width: 100%;
+    }
+
+    .btn-group .btn {
+      flex: 1;
+    }
+  }
+</style>

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

@@ -0,0 +1,28 @@
+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 ConfigurationPanel: $$__sveltets_2_IsomorphicComponent<{
+    gridName?: string;
+    isValid?: boolean;
+    validationErrors?: string[];
+}, {
+    nameChanged: CustomEvent<{
+        name: string;
+    }>;
+    save: CustomEvent<void>;
+    cancel: CustomEvent<void>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ConfigurationPanel = InstanceType<typeof ConfigurationPanel>;
+export default ConfigurationPanel;

package/dist/Desktop/GridSelector/GridSelector.svelte

@@ -0,0 +1,232 @@
+
+
+<script context="module" lang="ts">
+    /**
+ * Grid Selector Component
+ * 
+ * Visual interface for creating new grid configurations by:
+ * 1. Selecting a layout type from available options
+ * 2. Assigning components to grid slots via drag & drop
+ * 3. Naming and saving the grid configuration
+ */
+  // Component configuration interface
+  export interface ComponentConfig {
+    id: string;
+    name: string;
+    component: any;
+    icon?: string;
+    description?: string;
+    category?: string;
+  }
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import { 
+    getAllLayouts, 
+    getLayoutsByCategory, 
+    validateComponentAssignments,
+    createGridConfiguration,
+    type GridLayoutDefinition,
+    type ComponentAssignment,
+    type GridConfiguration
+  } from '../gridLayouts.js';
+  import LayoutPicker from './LayoutPicker.svelte';
+  import LayoutPreview from './LayoutPreview.svelte';
+  import ConfigurationPanel from './ConfigurationPanel.svelte';
+
+  // Props
+  export let availableComponents: ComponentConfig[] = [];
+  export let initialLayout: string = '';
+  export let theme: 'light' | 'dark' = 'light';
+  export let existingGrid: GridConfiguration | null = null;
+
+  const dispatch = createEventDispatcher<{
+    gridCreated: GridConfiguration;
+    cancel: void;
+  }>();
+
+  // State
+  let selectedLayoutId: string = initialLayout;
+  let selectedLayout: GridLayoutDefinition | null = null;
+  let gridName: string = '';
+  let componentAssignments: ComponentAssignment[] = [];
+  let isValid: boolean = false;
+  let validationErrors: string[] = [];
+
+  // Initialize state from existing grid if provided
+  if (existingGrid) {
+    selectedLayoutId = existingGrid.layoutId;
+    gridName = existingGrid.name;
+    componentAssignments = [...existingGrid.componentAssignments];
+  }
+
+  // Reactive updates
+  $: selectedLayout = selectedLayoutId ? getAllLayouts().find(l => l.id === selectedLayoutId) || null : null;
+  $: {
+    if (selectedLayout) {
+      const validation = validateComponentAssignments(selectedLayoutId, componentAssignments);
+      isValid = validation.isValid && gridName.trim().length > 0;
+      validationErrors = [
+        ...(gridName.trim().length === 0 ? ['Grid name is required'] : []),
+        ...validation.missingSlots.map(slot => `Component required for ${slot}`)
+      ];
+    } else {
+      isValid = false;
+      validationErrors = selectedLayoutId ? [] : ['Please select a layout'];
+    }
+  }
+
+  // Event handlers
+  function handleLayoutSelected(event: CustomEvent<{ layoutId: string }>) {
+    selectedLayoutId = event.detail.layoutId;
+    // Reset assignments when layout changes
+    componentAssignments = [];
+  }
+
+  function handleComponentAssigned(event: CustomEvent<{ slotId: string; componentId: string }>) {
+    const { slotId, componentId } = event.detail;
+    
+    // Remove any existing assignment for this slot
+    componentAssignments = componentAssignments.filter(a => a.slotId !== slotId);
+    
+    // Add new assignment if componentId is provided
+    if (componentId) {
+      componentAssignments = [...componentAssignments, { slotId, componentId }];
+    }
+  }
+
+  function handleComponentRemoved(event: CustomEvent<{ slotId: string }>) {
+    const { slotId } = event.detail;
+    componentAssignments = componentAssignments.filter(a => a.slotId !== slotId);
+  }
+
+  function handleGridNameChanged(event: CustomEvent<{ name: string }>) {
+    gridName = event.detail.name;
+  }
+
+  function handleSave() {
+    if (!isValid || !selectedLayout) return;
+
+    const gridConfig = createGridConfiguration(
+      gridName.trim(),
+      selectedLayoutId,
+      componentAssignments
+    );
+
+    dispatch('gridCreated', gridConfig);
+  }
+
+  function handleCancel() {
+    dispatch('cancel');
+  }
+
+  // Get layouts organized by category
+  const basicLayouts = getLayoutsByCategory('basic');
+  const asymmetricLayouts = getLayoutsByCategory('asymmetric');
+  const symmetricLayouts = getLayoutsByCategory('symmetric');
+</script>
+
+<div class="grid-selector" class:theme-dark={theme === 'dark'}>
+  <div class="container-fluid h-100">
+    <div class="row h-100">
+      <!-- Left Panel: Layout Selection & Component Palette -->
+      <div class="col-md-4 border-end bg-light h-100 d-flex flex-column">
+
+        <!-- Layout Picker -->
+        <div class="flex-grow-1 overflow-auto">
+          <LayoutPicker 
+            {basicLayouts}
+            {asymmetricLayouts} 
+            {symmetricLayouts}
+            {selectedLayoutId}
+            on:layoutSelected={handleLayoutSelected}
+          />
+        </div>
+      </div>
+
+      <!-- Right Panel: Preview & Configuration -->
+      <div class="col-md-8 h-100 d-flex flex-column">
+        <!-- Layout Preview -->
+        <div class="flex-grow-1 p-3">
+          <LayoutPreview 
+            {selectedLayout}
+            {componentAssignments}
+            {availableComponents}
+            on:componentAssigned={handleComponentAssigned}
+            on:componentRemoved={handleComponentRemoved}
+          />
+        </div>
+
+        <!-- Configuration Panel -->
+        <div class="flex-shrink-0 border-top">
+          <ConfigurationPanel
+            {gridName}
+            {isValid}
+            {validationErrors}
+            on:nameChanged={handleGridNameChanged}
+            on:save={handleSave}
+            on:cancel={handleCancel}
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .grid-selector {
+    height: 100vh;
+    background: #fff;
+  }
+
+  .grid-selector.theme-dark {
+    background: #1a1a1a;
+    color: #fff;
+  }
+
+  .grid-selector.theme-dark .bg-light {
+    background: #2d2d2d !important;
+    color: #fff;
+  }
+
+  .grid-selector.theme-dark .border-end,
+  .grid-selector.theme-dark .border-top {
+    border-color: #404040 !important;
+  }
+
+  /* Ensure full height usage */
+  .h-100 {
+    height: 100% !important;
+  }
+
+  /* Custom scrollbar for component palette */
+  .overflow-auto::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .overflow-auto::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+
+  .overflow-auto::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+  }
+
+  .overflow-auto::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+  }
+
+  .theme-dark .overflow-auto::-webkit-scrollbar-track {
+    background: #2d2d2d;
+  }
+
+  .theme-dark .overflow-auto::-webkit-scrollbar-thumb {
+    background: #555;
+  }
+
+  .theme-dark .overflow-auto::-webkit-scrollbar-thumb:hover {
+    background: #666;
+  }
+</style>

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

@@ -0,0 +1,43 @@
+/**
+* Grid Selector Component
+*
+* Visual interface for creating new grid configurations by:
+* 1. Selecting a layout type from available options
+* 2. Assigning components to grid slots via drag & drop
+* 3. Naming and saving the grid configuration
+*/
+export interface ComponentConfig {
+    id: string;
+    name: string;
+    component: any;
+    icon?: string;
+    description?: string;
+    category?: string;
+}
+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 GridSelector: $$__sveltets_2_IsomorphicComponent<{
+    availableComponents?: ComponentConfig[];
+    initialLayout?: string;
+    theme?: "light" | "dark";
+    existingGrid?: GridConfiguration | null;
+}, {
+    gridCreated: CustomEvent<GridConfiguration>;
+    cancel: CustomEvent<void>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type GridSelector = InstanceType<typeof GridSelector>;
+export default GridSelector;