@smartnet360/svelte-components 0.0.53 → 0.0.55

package/dist/core/TreeView/TreeNode.svelte

@@ -1,14 +1,25 @@
 <script lang="ts">
 	import type { NodeState, TreeStoreValue } from './tree.model';
+	import type { Snippet } from 'svelte';
 	import TreeNode from './TreeNode.svelte';
 
+	interface NodeSlotProps {
+		node: NodeState['node'];
+		state: {
+			checked: boolean;
+			indeterminate: boolean;
+			expanded: boolean;
+		};
+	}
+
 	interface Props {
 		nodeState: NodeState;
 		store: TreeStoreValue;
 		showIndeterminate?: boolean;
+		children?: Snippet<[NodeSlotProps]>;
 	}
 
-	let { nodeState, store, showIndeterminate = true }: Props = $props();
+	let { nodeState, store, showIndeterminate = true, children }: Props = $props();
 
 	// Computed states
 	let isChecked = $derived(store.state.checkedPaths.has(nodeState.path));
@@ -25,8 +36,8 @@
 			.filter((node): node is NodeState => node !== undefined)
 	);
 
-	// Indentation based on level
-	let indentStyle = $derived(`padding-left: ${nodeState.level * 1.5}rem`);
+	// Indentation based on level (20px per level for consistent visual hierarchy)
+	let indentStyle = $derived(`margin-left: ${nodeState.level * 20}px`);
 
 	function handleToggle() {
 		store.toggle(nodeState.path);
@@ -40,50 +51,52 @@
 </script>
 
 <div class="tree-node" style={indentStyle}>
-	<div class="tree-node-content">
+	<div class="d-flex align-items-center gap-1">
 		<!-- Expand/Collapse Button -->
 		{#if hasChildren}
 			<button
 				type="button"
-				class="btn btn-sm btn-link expand-toggle p-0"
+				class="expand-toggle"
+				style="width: 20px; height: 20px; font-size: 10px;"
 				onclick={handleExpandToggle}
 				aria-label={isExpanded ? 'Collapse' : 'Expand'}
 			>
-				{#if isExpanded}
-					<i class="bi bi-chevron-down"></i>
-				{:else}
-					<i class="bi bi-chevron-right"></i>
-				{/if}
+				{isExpanded ? '▼' : '▶'}
 			</button>
 		{:else}
-			<span class="expand-placeholder"></span>
+			<div class="expand-placeholder"></div>
 		{/if}
 
 		<!-- Checkbox -->
-		<div class="form-check">
+		<div class="form-check d-flex align-items-center flex-fill">
 			<input
 				type="checkbox"
-				class="form-check-input"
+				class="form-check-input me-2 my-0"
 				class:indeterminate={isIndeterminate}
 				checked={isChecked}
 				indeterminate={isIndeterminate}
 				onchange={handleToggle}
 				id={`checkbox-${nodeState.path}`}
 			/>
-			<label class="form-check-label" for={`checkbox-${nodeState.path}`}>
+			<label class="form-check-label user-select-none mb-0 lh-1" for={`checkbox-${nodeState.path}`}>
 				{#if nodeState.node.icon}
 					<span class="node-icon">{nodeState.node.icon}</span>
 				{/if}
 				<span class="node-label">{nodeState.node.label}</span>
 			</label>
 		</div>
+
+		<!-- Slot for additional controls -->
+		<div class="ms-auto">
+			{@render children?.({ node: nodeState.node, state: { checked: isChecked, indeterminate: isIndeterminate, expanded: isExpanded } })}
+		</div>
 	</div>
 
 	<!-- Recursive Children -->
 	{#if hasChildren && isExpanded}
 		<div class="tree-node-children">
 			{#each childNodes as childNode (childNode.path)}
-				<TreeNode nodeState={childNode} {store} {showIndeterminate} />
+				<TreeNode nodeState={childNode} {store} {showIndeterminate} {children} />
 			{/each}
 		</div>
 	{/if}
@@ -91,33 +104,26 @@
 
 <style>
 	.tree-node {
-		position: relative;
-	}
-
-	.tree-node-content {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.25rem 0;
-		min-height: 2rem;
+		display: block;
 	}
 
 	.expand-toggle {
-		width: 1.5rem;
-		height: 1.5rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
+		width: 20px;
+		height: 20px;
+		font-size: 10px;
 		border: none;
 		background: none;
 		cursor: pointer;
 		color: #6c757d;
-		text-decoration: none;
+		line-height: 1;
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
 	.expand-toggle:hover {
-		color: #495057;
-		background-color: #f8f9fa;
+		background-color: rgba(0, 0, 0, 0.05);
 		border-radius: 0.25rem;
 	}
 
@@ -127,21 +133,13 @@
 	}
 
 	.expand-placeholder {
-		width: 1.5rem;
-		height: 1.5rem;
+		width: 20px;
+		height: 20px;
 		display: inline-block;
 	}
 
-	.form-check {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		margin: 0;
-	}
-
 	.form-check-input {
 		cursor: pointer;
-		margin: 0;
 		flex-shrink: 0;
 	}
 
@@ -157,8 +155,6 @@
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
-		margin: 0;
-		user-select: none;
 	}
 
 	.node-icon {
@@ -168,6 +164,5 @@
 
 	.node-label {
 		font-size: 0.875rem;
-		line-height: 1.5;
 	}
 </style>

package/dist/core/TreeView/TreeNode.svelte.d.ts

@@ -1,9 +1,19 @@
 import type { NodeState, TreeStoreValue } from './tree.model';
+import type { Snippet } from 'svelte';
 import TreeNode from './TreeNode.svelte';
+interface NodeSlotProps {
+    node: NodeState['node'];
+    state: {
+        checked: boolean;
+        indeterminate: boolean;
+        expanded: boolean;
+    };
+}
 interface Props {
     nodeState: NodeState;
     store: TreeStoreValue;
     showIndeterminate?: boolean;
+    children?: Snippet<[NodeSlotProps]>;
 }
 declare const TreeNode: import("svelte").Component<Props, {}, "">;
 type TreeNode = ReturnType<typeof TreeNode>;

package/dist/core/TreeView/TreeView.svelte

@@ -1,19 +1,31 @@
 <script lang="ts">
 	import type { TreeStoreValue } from './tree.model';
+	import type { Snippet } from 'svelte';
 	import TreeNode from './TreeNode.svelte';
 
+	interface NodeSlotProps {
+		node: any;
+		state: {
+			checked: boolean;
+			indeterminate: boolean;
+			expanded: boolean;
+		};
+	}
+
 	interface Props {
 		store: TreeStoreValue;
 		showIndeterminate?: boolean;
 		showControls?: boolean;
 		height?: string;
+		children?: Snippet<[NodeSlotProps]>;
 	}
 
 	let {
 		store,
 		showIndeterminate = true,
 		showControls = true,
-		height = '100%'
+		height = '100%',
+		children
 	}: Props = $props();
 
 	// Get root nodes
@@ -97,7 +109,7 @@
 
 		<div class="tree-nodes">
 			{#each rootNodes as rootNode (rootNode.path)}
-				<TreeNode nodeState={rootNode} {store} {showIndeterminate} />
+				<TreeNode nodeState={rootNode} {store} {showIndeterminate} {children} />
 			{/each}
 		</div>
 	</div>

package/dist/core/TreeView/TreeView.svelte.d.ts

@@ -1,9 +1,19 @@
 import type { TreeStoreValue } from './tree.model';
+import type { Snippet } from 'svelte';
+interface NodeSlotProps {
+    node: any;
+    state: {
+        checked: boolean;
+        indeterminate: boolean;
+        expanded: boolean;
+    };
+}
 interface Props {
     store: TreeStoreValue;
     showIndeterminate?: boolean;
     showControls?: boolean;
     height?: string;
+    children?: Snippet<[NodeSlotProps]>;
 }
 declare const TreeView: import("svelte").Component<Props, {}, "">;
 type TreeView = ReturnType<typeof TreeView>;

package/dist/core/TreeView/tree-utils.d.ts

@@ -28,6 +28,9 @@ export declare function getPathLevel(path: string, separator?: string): number;
 export declare function flattenTree<T = any>(nodes: TreeNode<T>[], config: TreeConfig<T>, parentPath?: string, level?: number): Map<string, NodeState>;
 /**
  * Calculate which nodes should be indeterminate
+ * A node is indeterminate if:
+ * - It has children AND
+ * - Some (but not all) of its direct children are checked OR indeterminate
  */
 export declare function calculateIndeterminateStates(nodes: Map<string, NodeState>, checkedPaths: Set<string>): Set<string>;
 /**

package/dist/core/TreeView/tree-utils.js

@@ -76,21 +76,45 @@ export function flattenTree(nodes, config, parentPath = '', level = 0) {
 }
 /**
  * Calculate which nodes should be indeterminate
+ * A node is indeterminate if:
+ * - It has children AND
+ * - Some (but not all) of its direct children are checked OR indeterminate
  */
 export function calculateIndeterminateStates(nodes, checkedPaths) {
     const indeterminate = new Set();
-    // For each node with children
-    nodes.forEach((nodeState, path) => {
+    // For each node with children, check from deepest to shallowest
+    // This ensures we calculate indeterminate state correctly
+    const nodesArray = Array.from(nodes.entries());
+    // Sort by level (deepest first) to ensure we process children before parents
+    nodesArray.sort((a, b) => b[1].level - a[1].level);
+    for (const [path, nodeState] of nodesArray) {
+        // Skip leaf nodes - they can't be indeterminate
         if (nodeState.childPaths.length === 0)
-            return; // Leaf nodes can't be indeterminate
-        const checkedChildren = nodeState.childPaths.filter(childPath => checkedPaths.has(childPath));
-        const allChecked = checkedChildren.length === nodeState.childPaths.length;
-        const noneChecked = checkedChildren.length === 0;
-        // Indeterminate if some (but not all) children are checked
-        if (!allChecked && !noneChecked) {
+            continue;
+        // Count direct children that are either checked or indeterminate
+        let checkedCount = 0;
+        let indeterminateCount = 0;
+        for (const childPath of nodeState.childPaths) {
+            if (checkedPaths.has(childPath)) {
+                checkedCount++;
+            }
+            else if (indeterminate.has(childPath)) {
+                indeterminateCount++;
+            }
+        }
+        const totalChildren = nodeState.childPaths.length;
+        const affectedChildren = checkedCount + indeterminateCount;
+        // Node is indeterminate if:
+        // 1. Some children are checked/indeterminate, but not all
+        // 2. At least one child is indeterminate (even if all are checked/indeterminate)
+        if (affectedChildren > 0 && affectedChildren < totalChildren) {
             indeterminate.add(path);
         }
-    });
+        else if (indeterminateCount > 0) {
+            // If any child is indeterminate, parent is indeterminate
+            indeterminate.add(path);
+        }
+    }
     return indeterminate;
 }
 /**

package/dist/core/TreeView/tree.store.js

@@ -3,7 +3,7 @@
  * Svelte writable store for managing tree state with persistence
  */
 import { writable } from 'svelte/store';
-import { flattenTree, buildInitialState, calculateIndeterminateStates, getDescendantPaths, getParentPath, saveStateToStorage, loadStateFromStorage, clearStorageForNamespace } from './tree-utils';
+import { flattenTree, buildInitialState, calculateIndeterminateStates, getDescendantPaths, getParentPath, getAncestorPaths, saveStateToStorage, loadStateFromStorage, clearStorageForNamespace } from './tree-utils';
 import { log } from '../logger';
 /**
  * Create a tree store with state management and persistence
@@ -70,6 +70,11 @@ export function createTreeStore(config) {
     }
     /**
      * Toggle a node's checked state (with cascading)
+     *
+     * Logic:
+     * 1. Toggle the clicked node
+     * 2. Cascade DOWN to all descendants (check/uncheck all children)
+     * 3. Propagate UP to all ancestors (update based on their children's states)
      */
     function toggle(path) {
         log('🔄 Toggling node', { path });
@@ -81,16 +86,17 @@ export function createTreeStore(config) {
             }
             const newChecked = !state.checkedPaths.has(path);
             const newCheckedPaths = new Set(state.checkedPaths);
-            // Update this node
+            log('📌 Toggle action', { path, newChecked });
+            // STEP 1: Update this node
             if (newChecked) {
                 newCheckedPaths.add(path);
             }
             else {
                 newCheckedPaths.delete(path);
             }
-            // Cascade to all descendants
+            // STEP 2: CASCADE DOWN - Update all descendants to match
             const descendants = getDescendantPaths(path, state.nodes, separator);
-            log('📦 Cascading to descendants', {
+            log('⬇️ Cascading to descendants', {
                 path,
                 descendantCount: descendants.length,
                 newChecked
@@ -103,29 +109,48 @@ export function createTreeStore(config) {
                     newCheckedPaths.delete(descendantPath);
                 }
             });
-            // Update ancestors (check for indeterminate states)
-            let currentPath = path;
-            while (true) {
-                const parentPath = getParentPath(currentPath, separator);
-                if (!parentPath)
-                    break;
-                const parent = state.nodes.get(parentPath);
-                if (!parent)
-                    break;
-                // Count checked children
-                const checkedChildren = parent.childPaths.filter(childPath => newCheckedPaths.has(childPath));
-                // If all children checked, check parent; if none checked, uncheck parent
-                if (checkedChildren.length === parent.childPaths.length) {
-                    newCheckedPaths.add(parentPath);
+            // STEP 3: PROPAGATE UP - Update all ancestors based on their children
+            // We need to update from the deepest ancestor up to the root
+            const ancestorPaths = getAncestorPaths(path, separator);
+            log('⬆️ Propagating to ancestors', {
+                path,
+                ancestorCount: ancestorPaths.length,
+                ancestors: ancestorPaths
+            });
+            // Process ancestors from deepest to shallowest (reverse order)
+            // This ensures we calculate states correctly as we go up
+            for (let i = ancestorPaths.length - 1; i >= 0; i--) {
+                const ancestorPath = ancestorPaths[i];
+                const ancestor = state.nodes.get(ancestorPath);
+                if (!ancestor)
+                    continue;
+                // Count how many direct children are checked
+                const checkedChildrenCount = ancestor.childPaths.filter(childPath => newCheckedPaths.has(childPath)).length;
+                const totalChildren = ancestor.childPaths.length;
+                log('👨‍👧‍👦 Checking ancestor children', {
+                    ancestorPath,
+                    checkedChildrenCount,
+                    totalChildren
+                });
+                // Update ancestor based on children states:
+                // - All children checked → check parent
+                // - No children checked → uncheck parent
+                // - Some children checked → uncheck parent (will show indeterminate)
+                if (checkedChildrenCount === totalChildren) {
+                    newCheckedPaths.add(ancestorPath);
+                    log('✅ All children checked, checking parent', { ancestorPath });
                 }
-                else if (checkedChildren.length === 0) {
-                    newCheckedPaths.delete(parentPath);
+                else {
+                    newCheckedPaths.delete(ancestorPath);
+                    if (checkedChildrenCount > 0) {
+                        log('➖ Some children checked, parent will be indeterminate', { ancestorPath });
+                    }
+                    else {
+                        log('❌ No children checked, unchecking parent', { ancestorPath });
+                    }
                 }
-                // If some checked, parent state depends on whether we're checking or unchecking
-                // For better UX: leave parent as-is (will show indeterminate)
-                currentPath = parentPath;
             }
-            // Recalculate indeterminate states
+            // STEP 4: Recalculate indeterminate states
             const newIndeterminatePaths = calculateIndeterminateStates(state.nodes, newCheckedPaths);
             log('✅ Toggle complete', {
                 path,

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export * from './core/index.js';
-export * from './map/index.js';
+export * from './map-v2/index.js';
 export * from './apps/index.js';

package/dist/index.js

@@ -2,7 +2,7 @@
 // This approach keeps the main index clean and allows for easy expansion
 // Core components (Desktop orchestration + Charts + TreeView)
 export * from './core/index.js';
-// Map components (Mapbox cellular visualization)
-export * from './map/index.js';
+// Map components (Mapbox cellular visualization - v2)
+export * from './map-v2/index.js';
 // Complete applications
 export * from './apps/index.js';