refactor(createFilterStore): move from store pattern to svelte 5 runes usage

src/shared/ui/CheckboxFilter/CheckboxFilter.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { Property } from '$shared/lib/store';
+import type { Filter } from '$shared/lib/utils';
 import { Badge } from '$shared/shadcn/ui/badge';
 import { buttonVariants } from '$shared/shadcn/ui/button';
 import { Checkbox } from '$shared/shadcn/ui/checkbox';
@@ -8,6 +8,7 @@ import { Label } from '$shared/shadcn/ui/label';
 import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 import { onMount } from 'svelte';
 import { cubicOut } from 'svelte/easing';
+import type { FormEventHandler } from 'svelte/elements';
 import { slide } from 'svelte/transition';
 
 /**
@@ -26,13 +27,11 @@ import { slide } from 'svelte/transition';
 interface PropertyFilterProps {
     /** Label for this filter group (e.g., "Properties", "Tags") */
     displayedLabel: string;
-    /** Array of properties with their selection states */
-    properties: Property[];
-    /** Callback when a property checkbox is toggled */
-    onPropertyToggle: (id: string) => void;
+    /** Filter entity */
+    filter: Filter;
 }
 
-const { displayedLabel, properties, onPropertyToggle }: PropertyFilterProps = $props();
+const { displayedLabel, filter }: PropertyFilterProps = $props();
 
 // Toggle state - defaults to open for better discoverability
 let isOpen = $state(true);
@@ -63,8 +62,10 @@ const slideConfig = $derived({
 });
 
 // Derived for reactive updates when properties change - avoids recomputing on every render
-const selectedCount = $derived(properties.filter(c => c.selected).length);
+const selectedCount = $derived(filter.selectedCount);
 const hasSelection = $derived(selectedCount > 0);
+
+$inspect(filter.properties).with(console.trace);
 </script>
 
 <!-- Collapsible card wrapper with subtle hover state for affordance -->
@@ -114,7 +115,7 @@ const hasSelection = $derived(selectedCount > 0);
                 <div class="flex flex-col gap-0.5">
                     <!-- Each item: checkbox + label with interactive hover/focus states -->
                     <!-- Keyed by property.id for efficient DOM updates -->
-                    {#each properties as property (property.id)}
+                    {#each filter.properties as property (property.id)}
                         <Label
                             for={property.id}
                             class="
@@ -129,8 +130,7 @@ const hasSelection = $derived(selectedCount > 0);
                             -->
                             <Checkbox
                                 id={property.id}
-                                checked={property.selected}
-                                onclick={() => onPropertyToggle(property.id)}
+                                bind:checked={property.selected}
                                 class="
                                     shrink-0 cursor-pointer transition-all duration-150 ease-out
                                     data-[state=checked]:scale-100

src/shared/ui/index.ts

@@ -4,6 +4,12 @@
  * Exports all shared UI components and their types
  */
 
+import CheckboxFilter from './CheckboxFilter/CheckboxFilter.svelte';
+import ComboControl from './ComboControl/ComboControl.stories.svelte';
 import VirtualList from './VirtualList/VirtualList.svelte';
 
-export { VirtualList };
+export {
+    CheckboxFilter,
+    ComboControl,
+    VirtualList,
+};