@smartnet360/svelte-components 0.0.130 → 0.0.132

package/dist/map-v3/features/{cells/custom → custom}/stores/custom-cell-sets.svelte.js

@@ -43,15 +43,23 @@ export class CustomCellSetsStore {
                 this.save();
             });
             // Re-resolve cells when cell data changes (only works if getter is reactive)
+            // Track cell count to detect when cell data is loaded
+            let lastCellCount = 0;
             $effect(() => {
                 const currentCells = this.getCells();
                 const cellCount = currentCells.length;
-                if (cellCount > 0 && this.sets.length > 0) {
-                    // Check if any cells need resolution
-                    const needsResolution = this.sets.some(set => set.cells.some(c => !c.resolvedCell));
-                    if (needsResolution) {
-                        console.log('[CustomCellSetsStore] Re-resolving cells after data loaded');
-                        this.refreshResolutions();
+                // Only trigger when cell count changes (data loaded/updated)
+                if (cellCount !== lastCellCount && cellCount > 0) {
+                    lastCellCount = cellCount;
+                    // Use untrack to read sets without creating a dependency
+                    const sets = $state.snapshot(this.sets);
+                    if (sets.length > 0) {
+                        // Check if any cell-type items need resolution
+                        const needsResolution = sets.some(set => set.cells.some(c => c.geometry === 'cell' && !c.resolvedCell));
+                        if (needsResolution) {
+                            console.log('[CustomCellSetsStore] Re-resolving cells after data loaded');
+                            this.refreshResolutions();
+                        }
                     }
                 }
             });
@@ -85,6 +93,7 @@ export class CustomCellSetsStore {
             groups: importResult.groups,
             extraColumns: importResult.extraColumns,
             baseSize: 50,
+            pointSize: 8,
             opacity: 0.7,
             defaultColor: CUSTOM_CELL_PALETTE[0],
             groupColors,
@@ -157,6 +166,8 @@ export class CustomCellSetsStore {
         if (set) {
             if (settings.baseSize !== undefined)
                 set.baseSize = settings.baseSize;
+            if (settings.pointSize !== undefined)
+                set.pointSize = settings.pointSize;
             if (settings.opacity !== undefined)
                 set.opacity = settings.opacity;
             if (settings.defaultColor !== undefined)
@@ -181,16 +192,22 @@ export class CustomCellSetsStore {
         const set = this.getSet(setId);
         if (!set || !set.visible)
             return [];
-        return set.cells.filter(c => c.resolvedCell && set.visibleGroups.has(c.customGroup));
+        return set.cells.filter(c => 
+        // For cells: need resolved cell. For points: need lat/lon
+        (c.geometry === 'cell' ? c.resolvedCell : (c.lat !== undefined && c.lon !== undefined)) &&
+            set.visibleGroups.has(c.customGroup));
     }
     /**
      * Re-resolve cells after main cell data changes
+     * Only affects items with 'cell' geometry
      */
     refreshResolutions() {
         const cellLookup = buildCellLookup(this.getCells());
         for (const set of this.sets) {
             for (const cell of set.cells) {
-                cell.resolvedCell = cellLookup.get(cell.txId);
+                if (cell.geometry === 'cell') {
+                    cell.resolvedCell = cellLookup.get(cell.id);
+                }
             }
         }
         this.version++;
@@ -228,10 +245,13 @@ export class CustomCellSetsStore {
                 visibleGroups: Array.from(set.visibleGroups),
                 // Don't persist resolved cells - will re-resolve on load
                 cells: set.cells.map(c => ({
-                    txId: c.txId,
+                    id: c.id,
                     customGroup: c.customGroup,
                     sizeFactor: c.sizeFactor,
-                    extraFields: c.extraFields
+                    extraFields: c.extraFields,
+                    geometry: c.geometry,
+                    // Persist lat/lon for point geometry
+                    ...(c.geometry === 'point' ? { lat: c.lat, lon: c.lon } : {})
                 }))
             }));
             localStorage.setItem(this.storageKey, JSON.stringify(data));

package/dist/map-v3/features/{cells/custom → custom}/types.d.ts

@@ -1,32 +1,46 @@
 /**
- * Custom Cells Feature - Type Definitions
+ * Custom Feature - Type Definitions
  *
- * Types for ad-hoc cell layers loaded from CSV files.
- * Custom cells reference existing cells by txId and add custom grouping/sizing.
+ * Types for ad-hoc layers loaded from CSV files.
+ * Supports two geometry types:
+ * - 'cell': References existing cells by id (renders as sector arcs)
+ * - 'point': Standalone lat/lon coordinates (renders as circles)
  */
-import type { Cell } from '../../../../shared/demo';
+import type { Cell } from '../../../shared/demo';
 /**
- * A custom cell entry from CSV import
+ * Geometry type for custom items
+ * - 'cell': Sector arc using resolved cell's azimuth/beamwidth
+ * - 'point': Simple circle at lat/lon coordinates
+ */
+export type CustomItemGeometry = 'cell' | 'point';
+/**
+ * A custom item entry from CSV import
  */
 export interface CustomCell {
-    /** Required: Reference to cell in main data store */
-    txId: string;
+    /** Generic identifier (cellName, txId, or any unique ID) */
+    id: string;
     /** Grouping field for TreeView (defaults to 'default' if not in CSV) */
     customGroup: string;
-    /** Size multiplier for arc radius (defaults to 1) */
+    /** Size multiplier for radius (defaults to 1) */
     sizeFactor: number;
     /** Any additional columns from CSV for tooltips */
     extraFields: Record<string, string | number>;
-    /** Resolved cell data from main store (populated after import) */
+    /** Geometry type: 'cell' for sector arcs, 'point' for circles */
+    geometry: CustomItemGeometry;
+    /** Resolved cell data from main store (only for 'cell' geometry) */
     resolvedCell?: Cell;
+    /** Latitude coordinate (only for 'point' geometry) */
+    lat?: number;
+    /** Longitude coordinate (only for 'point' geometry) */
+    lon?: number;
 }
 /**
  * Import result from CSV parsing
  */
 export interface CustomCellImportResult {
-    /** Successfully parsed and matched cells */
+    /** Successfully parsed items (cells and/or points) */
     cells: CustomCell[];
-    /** Cell IDs that weren't found in main data store */
+    /** IDs that weren't found in main data store (for cell geometry only) */
     unmatchedTxIds: string[];
     /** Discovered custom groups */
     groups: string[];
@@ -34,6 +48,10 @@ export interface CustomCellImportResult {
     extraColumns: string[];
     /** Total rows in CSV */
     totalRows: number;
+    /** Count of cell geometry items */
+    cellCount: number;
+    /** Count of point geometry items */
+    pointCount: number;
 }
 /**
  * A custom cell set - represents one uploaded CSV
@@ -51,8 +69,10 @@ export interface CustomCellSet {
     groups: string[];
     /** Extra column names for tooltip display */
     extraColumns: string[];
-    /** Base arc radius in pixels (multiplied by sizeFactor per cell) */
+    /** Base arc radius in pixels for sector cells (multiplied by sizeFactor per cell) */
     baseSize: number;
+    /** Circle radius in pixels for point geometry */
+    pointSize: number;
     /** Layer opacity (0-1) */
     opacity: number;
     /** Default color for groups without override */

package/dist/map-v3/features/{cells/custom → custom}/types.js

@@ -1,8 +1,10 @@
 /**
- * Custom Cells Feature - Type Definitions
+ * Custom Feature - Type Definitions
  *
- * Types for ad-hoc cell layers loaded from CSV files.
- * Custom cells reference existing cells by txId and add custom grouping/sizing.
+ * Types for ad-hoc layers loaded from CSV files.
+ * Supports two geometry types:
+ * - 'cell': References existing cells by id (renders as sector arcs)
+ * - 'point': Standalone lat/lon coordinates (renders as circles)
  */
 /**
  * Default color palette for custom cell groups

package/dist/map-v3/index.d.ts

@@ -8,7 +8,7 @@ export { default as CellSettingsPanel } from './features/cells/components/CellSe
 export * from './features/cells/stores/cell.data.svelte';
 export * from './features/cells/stores/cell.display.svelte';
 export * from './features/cells/stores/cell.registry.svelte';
-export * as CustomCells from './features/cells/custom';
+export * as CustomCells from './features/custom';
 export * from './features/repeaters/types';
 export { default as RepeatersLayer } from './features/repeaters/layers/RepeatersLayer.svelte';
 export { default as RepeaterLabelsLayer } from './features/repeaters/layers/RepeaterLabelsLayer.svelte';

package/dist/map-v3/index.js

@@ -12,7 +12,7 @@ export * from './features/cells/stores/cell.data.svelte';
 export * from './features/cells/stores/cell.display.svelte';
 export * from './features/cells/stores/cell.registry.svelte';
 // Features - Cells Custom
-export * as CustomCells from './features/cells/custom';
+export * as CustomCells from './features/custom';
 // Features - Repeaters
 export * from './features/repeaters/types';
 export { default as RepeatersLayer } from './features/repeaters/layers/RepeatersLayer.svelte';

package/dist/map-v3/shared/controls/MapControl.svelte

@@ -28,8 +28,10 @@
 		class?: string;
 		/** Child content */
 		children?: import('svelte').Snippet;
-		/** Optional action buttons in header */
+		/** Optional action buttons in header (shown when expanded) */
 		actions?: import('svelte').Snippet;
+		/** Optional action buttons shown when collapsed */
+		collapsedActions?: import('svelte').Snippet;
 		/** Optional offset from map edge (e.g., '12px') */
 		edgeOffset?: string;
 		/** Width of the map control (e.g., '360px') */
@@ -47,6 +49,7 @@
 		class: className = '',
 		children,
 		actions,
+		collapsedActions,
 		edgeOffset = '12px',
 		controlWidth = '420px'
 	}: Props = $props();
@@ -139,7 +142,15 @@
 	data-edge-offset={edgeOffset}
 >
 	{#if title || icon}
-		<div class="map-control-header" title={title}>
+		<div 
+			class="map-control-header" 
+			class:clickable={collapsed && collapsible}
+			title={title}
+			onclick={collapsed && collapsible ? toggleCollapse : undefined}
+			role={collapsed && collapsible ? 'button' : undefined}
+			tabindex={collapsed && collapsible ? 0 : undefined}
+			onkeydown={collapsed && collapsible ? (e) => e.key === 'Enter' && toggleCollapse() : undefined}
+		>
 			<span class="map-control-title">
 				{#if collapsed && iconOnlyWhenCollapsed && icon}
 					<i class="bi bi-{icon}" aria-hidden="true"></i>
@@ -154,19 +165,27 @@
 					{/if}
 				{/if}
 			</span>
-			<div class="map-control-actions">
-				{#if actions}
-					{@render actions()}
-				{/if}
-				{#if collapsible}
-					<button
-						class="map-control-toggle"
-						onclick={toggleCollapse}
-						aria-label={collapsed ? 'Expand' : 'Collapse'}
-						title={collapsed ? 'Expand' : 'Collapse'}
-					>
-						<i class="bi bi-chevron-{collapsed ? 'down' : 'up'}"></i>
-					</button>
+			<div class="map-control-actions" onclick={(e) => e.stopPropagation()}>
+				{#if collapsed}
+					<!-- When collapsed: show only collapsedActions -->
+					{#if collapsedActions}
+						{@render collapsedActions()}
+					{/if}
+				{:else}
+					<!-- When expanded: show actions + close button -->
+					{#if actions}
+						{@render actions()}
+					{/if}
+					{#if collapsible}
+						<button
+							class="map-control-toggle"
+							onclick={toggleCollapse}
+							aria-label="Close"
+							title="Close"
+						>
+							<i class="bi bi-x-lg"></i>
+						</button>
+					{/if}
 				{/if}
 			</div>
 		</div>
@@ -206,6 +225,15 @@
 		color: #212529;
 	}
 
+	.map-control-header.clickable {
+		cursor: pointer;
+		transition: background-color 0.15s ease;
+	}
+
+	.map-control-header.clickable:hover {
+		background: #e9ecef;
+	}
+
 	.map-control-title {
 		flex: 1;
 		user-select: none;

package/dist/map-v3/shared/controls/MapControl.svelte.d.ts

@@ -17,8 +17,10 @@ interface Props {
     class?: string;
     /** Child content */
     children?: import('svelte').Snippet;
-    /** Optional action buttons in header */
+    /** Optional action buttons in header (shown when expanded) */
     actions?: import('svelte').Snippet;
+    /** Optional action buttons shown when collapsed */
+    collapsedActions?: import('svelte').Snippet;
     /** Optional offset from map edge (e.g., '12px') */
     edgeOffset?: string;
     /** Width of the map control (e.g., '360px') */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.130",
+	"version": "0.0.132",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/map-v3/features/cells/custom/components/CustomCellSetManager.svelte

@@ -1,306 +0,0 @@
-<script lang="ts">
-	/**
-	 * Custom Cell Set Manager
-	 * 
-	 * Upload CSV files, view import results, and manage custom cell sets.
-	 * Acts as the main control panel for the custom cells feature.
-	 * Includes filter controls for each loaded set.
-	 */
-	import { MapControl } from '../../../../shared';
-	import type { CustomCellSetsStore } from '../stores/custom-cell-sets.svelte';
-	import type { CustomCellImportResult } from '../types';
-	import CustomCellFilterControl from './CustomCellFilterControl.svelte';
-
-	interface Props {
-		/** The custom cell sets store */
-		setsStore: CustomCellSetsStore;
-		/** Control position on map */
-		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-	}
-
-	let { 
-		setsStore, 
-		position = 'top-left' 
-	}: Props = $props();
-
-	// Derived for reactivity
-	let setsArray = $derived(setsStore.sets);
-
-	// State
-	let showImportModal = $state(false);
-	let importResult = $state<CustomCellImportResult | null>(null);
-	let importFileName = $state('');
-	let importError = $state('');
-	let fileInput: HTMLInputElement;
-
-	/**
-	 * Handle file selection
-	 */
-	function handleFileSelect(event: Event) {
-		const input = event.target as HTMLInputElement;
-		const file = input.files?.[0];
-		
-		if (!file) return;
-		
-		importFileName = file.name.replace(/\.csv$/i, '');
-		importError = '';
-
-		const reader = new FileReader();
-		reader.onload = (e) => {
-			try {
-				const content = e.target?.result as string;
-				importResult = setsStore.importFromCsv(content, file.name);
-				showImportModal = true;
-			} catch (err) {
-				importError = err instanceof Error ? err.message : 'Failed to parse CSV';
-				importResult = null;
-			}
-		};
-		reader.onerror = () => {
-			importError = 'Failed to read file';
-			importResult = null;
-		};
-		reader.readAsText(file);
-
-		// Reset input so same file can be selected again
-		input.value = '';
-	}
-
-	/**
-	 * Confirm import and create set
-	 */
-	function confirmImport() {
-		if (!importResult) return;
-
-		setsStore.createSet(importFileName, importResult);
-		closeModal();
-	}
-
-	/**
-	 * Close the modal
-	 */
-	function closeModal() {
-		showImportModal = false;
-		importResult = null;
-		importFileName = '';
-		importError = '';
-	}
-
-	/**
-	 * Trigger file input click
-	 */
-	function triggerFileInput() {
-		fileInput?.click();
-	}
-
-	/**
-	 * Remove a set
-	 */
-	function removeSet(setId: string) {
-		if (confirm('Remove this custom cell set?')) {
-			setsStore.removeSet(setId);
-		}
-	}
-</script>
-
-<MapControl {position} title="Custom Cells" icon="plus-circle" controlWidth="300px">
-	{#snippet actions()}
-		<button
-			class="btn btn-sm btn-outline-primary border-0 p-1 px-2"
-			title="Import CSV"
-			onclick={triggerFileInput}
-		>
-			<i class="bi bi-upload"></i>
-		</button>
-	{/snippet}
-
-	<div class="custom-cell-manager">
-		<!-- Hidden file input -->
-		<input
-			type="file"
-			accept=".csv"
-			class="d-none"
-			bind:this={fileInput}
-			onchange={handleFileSelect}
-		/>
-
-		<!-- Error message -->
-		{#if importError}
-			<div class="alert alert-danger py-1 px-2 mb-2 small">
-				<i class="bi bi-exclamation-triangle me-1"></i>
-				{importError}
-			</div>
-		{/if}
-
-		<!-- Empty state -->
-		{#if setsStore.sets.length === 0}
-			<div class="text-center p-3">
-				<i class="bi bi-layers fs-1 text-muted"></i>
-				<p class="text-muted small mt-2 mb-0">
-					No custom cell sets loaded.
-				</p>
-				<button 
-					class="btn btn-sm btn-outline-primary mt-2"
-					onclick={triggerFileInput}
-				>
-					<i class="bi bi-upload me-1"></i> Import CSV
-				</button>
-			</div>
-		{:else}
-			<!-- List of sets -->
-			<ul class="list-group list-group-flush">
-				{#each setsStore.sets as set (set.id)}
-					<li class="list-group-item d-flex justify-content-between align-items-center py-2 px-2">
-						<div class="d-flex align-items-center">
-							<button
-								class="btn btn-sm p-0 me-2"
-								title={set.visible ? 'Hide' : 'Show'}
-								onclick={() => setsStore.toggleSetVisibility(set.id)}
-							>
-								<i class="bi bi-eye{set.visible ? '-fill text-primary' : '-slash text-muted'}"></i>
-							</button>
-							<div>
-								<div class="fw-medium small">{set.name}</div>
-								<small class="text-muted">
-									{set.cells.length} cells · {set.groups.length} groups
-								</small>
-							</div>
-						</div>
-						<button
-							class="btn btn-sm btn-outline-danger border-0 p-1"
-							title="Remove"
-							onclick={() => removeSet(set.id)}
-						>
-							<i class="bi bi-trash"></i>
-						</button>
-					</li>
-				{/each}
-			</ul>
-		{/if}
-	</div>
-</MapControl>
-
-<!-- Import Result Modal -->
-{#if showImportModal && importResult}
-	<div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
-		<div class="modal-dialog modal-dialog-centered">
-			<div class="modal-content">
-				<div class="modal-header py-2">
-					<h6 class="modal-title">
-						<i class="bi bi-file-earmark-spreadsheet me-2"></i>
-						Import: {importFileName}
-					</h6>
-					<button type="button" class="btn-close" onclick={closeModal}></button>
-				</div>
-				<div class="modal-body">
-					<!-- Import Summary -->
-					<div class="mb-3">
-						<div class="d-flex justify-content-between align-items-center mb-2">
-							<span class="text-success">
-								<i class="bi bi-check-circle me-1"></i>
-								{importResult.cells.length} cells matched
-							</span>
-							<span class="badge bg-success">{importResult.totalRows} rows</span>
-						</div>
-
-						{#if importResult.unmatchedTxIds.length > 0}
-							<div class="text-warning small mb-2">
-								<i class="bi bi-exclamation-triangle me-1"></i>
-								{importResult.unmatchedTxIds.length} cells not found
-								<button 
-									class="btn btn-link btn-sm p-0 ms-1"
-									type="button"
-									data-bs-toggle="collapse"
-									data-bs-target="#unmatchedList"
-								>
-									(show)
-								</button>
-							</div>
-							<div class="collapse" id="unmatchedList">
-								<div class="small bg-light p-2 rounded" style="max-height: 100px; overflow-y: auto;">
-									{importResult.unmatchedTxIds.slice(0, 20).join(', ')}
-									{#if importResult.unmatchedTxIds.length > 20}
-										<span class="text-muted">... and {importResult.unmatchedTxIds.length - 20} more</span>
-									{/if}
-								</div>
-							</div>
-						{/if}
-					</div>
-
-					<!-- Groups found -->
-					<div class="mb-3">
-						<label class="form-label small fw-medium">Groups Found ({importResult.groups.length})</label>
-						<div class="d-flex flex-wrap gap-1">
-							{#each importResult.groups as group}
-								<span class="badge bg-secondary">{group}</span>
-							{/each}
-						</div>
-					</div>
-
-					<!-- Extra columns -->
-					{#if importResult.extraColumns.length > 0}
-						<div class="mb-3">
-							<label class="form-label small fw-medium">Extra Columns (for tooltips)</label>
-							<div class="d-flex flex-wrap gap-1">
-								{#each importResult.extraColumns as col}
-									<span class="badge bg-info">{col}</span>
-								{/each}
-							</div>
-						</div>
-					{/if}
-
-					<!-- Set Name -->
-					<div class="mb-2">
-						<label for="setName" class="form-label small fw-medium">Set Name</label>
-						<input 
-							type="text" 
-							class="form-control form-control-sm" 
-							id="setName"
-							bind:value={importFileName}
-						/>
-					</div>
-				</div>
-				<div class="modal-footer py-2">
-					<button type="button" class="btn btn-secondary btn-sm" onclick={closeModal}>
-						Cancel
-					</button>
-					<button 
-						type="button" 
-						class="btn btn-primary btn-sm"
-						onclick={confirmImport}
-						disabled={importResult.cells.length === 0}
-					>
-						<i class="bi bi-check-lg me-1"></i>
-						Import {importResult.cells.length} cells
-					</button>
-				</div>
-			</div>
-		</div>
-	</div>
-{/if}
-
-<style>
-	.custom-cell-manager {
-		font-size: 0.875rem;
-	}
-
-	.list-group-item {
-		background: transparent;
-	}
-
-	.modal {
-		z-index: 2000;
-	}
-</style>
-
-<!-- Filter Controls for each set (rendered outside the manager control) -->
-{#each setsArray as set (set.id)}
-	{#key set.id}
-		<CustomCellFilterControl
-			{position}
-			{setsStore}
-			{set}
-			onremove={(id) => setsStore.removeSet(id)}
-		/>
-	{/key}
-{/each}