@finsweet/webflow-apps-utils 1.0.28 → 1.0.29

package/dist/ui/components/regions/RegionSelector.svelte

@@ -0,0 +1,1110 @@
+<script lang="ts">
+	import { SvelteSet } from 'svelte/reactivity';
+
+	import { Checkbox } from '../checkbox';
+	import type { ExtendedRegionGroup, Region, RegionGroup, RegionSelectorProps } from './types.js';
+
+	let {
+		regionGroups,
+		selectedRegions = [],
+		onRegionsChange,
+		usedRegions = {
+			regions: new Set(),
+			isGlobalUsed: false,
+			isEUGroupUsed: false,
+			byInstance: new Map()
+		},
+		isLoading = false,
+		error,
+		maxVisibleBadges = 2,
+		searchPlaceholder = 'Search regions...',
+		class: className = '',
+		...restProps
+	}: RegionSelectorProps = $props();
+
+	let searchQuery = $state('');
+	let tempSelectedRegions = $state<string[]>([...selectedRegions]);
+	let expandedGroups = new SvelteSet<string>();
+	let previousSelectedRegions = $state<string[]>([...selectedRegions]);
+
+	/**
+	 * Sync with prop changes and trigger callback
+	 */
+	$effect(() => {
+		// Sync from prop to internal state when prop changes externally
+		if (JSON.stringify(selectedRegions) !== JSON.stringify(previousSelectedRegions)) {
+			tempSelectedRegions = [...selectedRegions];
+			previousSelectedRegions = [...selectedRegions];
+		}
+
+		// Trigger callback when internal state changes
+		if (JSON.stringify(tempSelectedRegions) !== JSON.stringify(selectedRegions)) {
+			onRegionsChange?.(tempSelectedRegions);
+		}
+	});
+
+	let restructuredGroups = $derived.by((): ExtendedRegionGroup[] => {
+		const globalGroup = regionGroups.find((g) => g.regions.some((r) => r.code === 'Global'));
+		const euGroup = regionGroups.find(
+			(g) => g.key.toLowerCase().includes('eu') || g.name.toLowerCase().includes('european')
+		);
+
+		const usGroup = regionGroups.find(
+			(g) => g.key === 'us' || g.name.toLowerCase() === 'united states'
+		);
+		const otherCountries = regionGroups.filter(
+			(g) =>
+				g !== globalGroup &&
+				g !== euGroup &&
+				g !== usGroup &&
+				!g.regions.some((r) => r.code === 'Global')
+		);
+
+		const mainGroups: ExtendedRegionGroup[] = [];
+
+		if (globalGroup) {
+			mainGroups.push({
+				...globalGroup,
+				isMainParent: true,
+				parentKey: 'global-parent'
+			});
+		}
+
+		if (euGroup) {
+			mainGroups.push({
+				...euGroup,
+				isMainParent: true,
+				parentKey: 'eu-parent'
+			});
+		}
+
+		if (otherCountries.length > 0 || usGroup) {
+			const selectCountriesRegions: Region[] = [];
+			const selectCountriesSubGroups: RegionGroup[] = [];
+
+			if (usGroup) {
+				selectCountriesSubGroups.push(usGroup);
+			}
+
+			otherCountries.forEach((group) => {
+				selectCountriesRegions.push(...group.regions);
+			});
+
+			mainGroups.push({
+				name: 'Select Countries',
+				key: 'select-countries-parent',
+				regions: selectCountriesRegions,
+				total: selectCountriesRegions.length + (usGroup ? usGroup.total : 0),
+				isMainParent: true,
+				parentKey: 'select-countries-parent',
+				subGroups: selectCountriesSubGroups
+			});
+		}
+
+		return mainGroups;
+	});
+
+	let selectedMainParent = $derived.by(() => {
+		if (tempSelectedRegions.includes('Global')) return 'global-parent';
+
+		if (tempSelectedRegions.includes('EU')) {
+			return 'eu-parent';
+		}
+
+		const selectCountriesGroup = restructuredGroups.find(
+			(g) => g.parentKey === 'select-countries-parent'
+		);
+		if (selectCountriesGroup) {
+			const hasAnySelected =
+				selectCountriesGroup.regions.some((r) => tempSelectedRegions.includes(r.code)) ||
+				selectCountriesGroup.subGroups?.some((sg) =>
+					sg.regions.some((r) => tempSelectedRegions.includes(r.code))
+				);
+			if (hasAnySelected) return 'select-countries-parent';
+		}
+
+		return null;
+	});
+
+	let isGlobalSelected = $derived(tempSelectedRegions.includes('Global'));
+
+	let filteredGroups = $derived.by(() => {
+		if (!searchQuery) return restructuredGroups;
+
+		const filtered = restructuredGroups
+			.map((group) => {
+				const filteredRegions = group.regions.filter(
+					(region) =>
+						region.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+						region.code.toLowerCase().includes(searchQuery.toLowerCase()) ||
+						group.name.toLowerCase().includes(searchQuery.toLowerCase())
+				);
+
+				const filteredSubGroups = group.subGroups
+					?.map((subGroup) => ({
+						...subGroup,
+						regions: subGroup.regions.filter(
+							(region) =>
+								region.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+								region.code.toLowerCase().includes(searchQuery.toLowerCase()) ||
+								subGroup.name.toLowerCase().includes(searchQuery.toLowerCase())
+						)
+					}))
+					.filter((sg) => sg.regions.length > 0);
+
+				return {
+					...group,
+					regions: filteredRegions,
+					subGroups: filteredSubGroups
+				};
+			})
+			.filter(
+				(group) => group.regions.length > 0 || (group.subGroups && group.subGroups.length > 0)
+			);
+
+		return filtered;
+	});
+
+	/**
+	 * Auto-expand groups when searching
+	 */
+	$effect(() => {
+		if (searchQuery) {
+			// Clear first
+			expandedGroups.clear();
+
+			restructuredGroups.forEach((group) => {
+				// Check if this group has matching content
+				const hasMatchingRegions = group.regions.some(
+					(region) =>
+						region.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+						region.code.toLowerCase().includes(searchQuery.toLowerCase())
+				);
+
+				const hasMatchingSubGroups = group.subGroups?.some((sg) =>
+					sg.regions.some(
+						(region) =>
+							region.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+							region.code.toLowerCase().includes(searchQuery.toLowerCase())
+					)
+				);
+
+				if (hasMatchingRegions || hasMatchingSubGroups) {
+					expandedGroups.add(group.key);
+					group.subGroups?.forEach((sg) => {
+						const sgHasMatching = sg.regions.some(
+							(region) =>
+								region.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+								region.code.toLowerCase().includes(searchQuery.toLowerCase())
+						);
+						if (sgHasMatching) {
+							expandedGroups.add(sg.key);
+						}
+					});
+				}
+			});
+		}
+	});
+
+	let tempSelectedRegionObjects = $derived.by(() => {
+		const selected: Region[] = [];
+
+		if (tempSelectedRegions.includes('Global')) {
+			const globalGroup = regionGroups.find((g) => g.regions.some((r) => r.code === 'Global'));
+			const globalRegion = globalGroup?.regions.find((r) => r.code === 'Global');
+			if (globalRegion) {
+				selected.push(globalRegion);
+			}
+		} else if (tempSelectedRegions.includes('EU')) {
+			const euGroup = regionGroups.find((g) => g.key === 'europe');
+			if (euGroup) {
+				selected.push({
+					code: 'EU',
+					name: euGroup.name
+				});
+			}
+		} else {
+			const allRegions = regionGroups.flatMap((g) => g.regions);
+			tempSelectedRegions.forEach((code) => {
+				const region = allRegions.find((r) => r.code === code);
+				if (region) {
+					selected.push(region);
+				}
+			});
+		}
+
+		return selected;
+	});
+
+	let visibleBadges = $derived(tempSelectedRegionObjects.slice(0, maxVisibleBadges));
+	let remainingBadgesCount = $derived(
+		Math.max(0, tempSelectedRegionObjects.length - maxVisibleBadges)
+	);
+
+	/**
+	 * Toggle group expansion
+	 */
+	const toggleGroupExpansion = (groupKey: string) => {
+		if (expandedGroups.has(groupKey)) {
+			expandedGroups.delete(groupKey);
+		} else {
+			expandedGroups.add(groupKey);
+		}
+	};
+
+	/**
+	 * Check if group is expanded
+	 */
+	const isGroupExpanded = (groupKey: string): boolean => {
+		return expandedGroups.has(groupKey);
+	};
+
+	/**
+	 * Toggle region selection
+	 */
+	const toggleRegion = (code: string) => {
+		if (code === 'Global') {
+			if (tempSelectedRegions.includes('Global')) {
+				tempSelectedRegions = [];
+			} else {
+				// Clear all and select only Global
+				tempSelectedRegions = ['Global'];
+			}
+		} else if (code === 'EU') {
+			if (tempSelectedRegions.includes('EU')) {
+				tempSelectedRegions = [];
+			} else {
+				// Clear all and select only EU
+				tempSelectedRegions = ['EU'];
+			}
+		} else {
+			// Selecting a country - clear Global and EU
+			const filteredRegions = tempSelectedRegions.filter((c) => c !== 'Global' && c !== 'EU');
+
+			if (filteredRegions.includes(code)) {
+				tempSelectedRegions = filteredRegions.filter((c) => c !== code);
+			} else {
+				tempSelectedRegions = [...filteredRegions, code];
+			}
+		}
+	};
+
+	/**
+	 * Remove region from selection
+	 */
+	const removeRegion = (code: string) => {
+		if (code === 'Global' || code === 'EU') {
+			tempSelectedRegions = [];
+		} else {
+			tempSelectedRegions = tempSelectedRegions.filter(
+				(c) => c !== code && c !== 'Global' && c !== 'EU'
+			);
+		}
+		onRegionsChange?.(tempSelectedRegions);
+	};
+
+	/**
+	 * Clear all selections
+	 */
+	const clearAll = () => {
+		tempSelectedRegions = [];
+		onRegionsChange?.([]);
+	};
+
+	/**
+	 * Check if all group regions are in use
+	 */
+	const areAllGroupRegionsInUse = (group: RegionGroup): boolean => {
+		return group.regions.every((region) => usedRegions.regions.has(region.code));
+	};
+
+	/**
+	 * Check if all group and sub-group regions are in use
+	 */
+	const areAllGroupAndSubGroupRegionsInUse = (group: ExtendedRegionGroup): boolean => {
+		const mainRegionsInUse = group.regions.every((region) => usedRegions.regions.has(region.code));
+
+		if (!group.subGroups || group.subGroups.length === 0) {
+			return mainRegionsInUse;
+		}
+
+		const allSubGroupsInUse = group.subGroups.every((subGroup) =>
+			areAllGroupRegionsInUse(subGroup)
+		);
+
+		return mainRegionsInUse && allSubGroupsInUse;
+	};
+
+	/**
+	 * Check if all group regions are selected
+	 */
+	const isGroupFullySelected = (group: RegionGroup): boolean => {
+		return group.regions.every((region) => tempSelectedRegions.includes(region.code));
+	};
+
+	/**
+	 * Check if some group regions are selected
+	 */
+	const isGroupPartiallySelected = (group: RegionGroup): boolean => {
+		const selectedCount = group.regions.filter((region) =>
+			tempSelectedRegions.includes(region.code)
+		).length;
+		return selectedCount > 0 && selectedCount < group.regions.length;
+	};
+
+	/**
+	 * Toggle entire group selection
+	 */
+	const toggleGroup = (group: ExtendedRegionGroup) => {
+		const hasGlobal = group.regions.some((r) => r.code === 'Global');
+		const isEUGroup = group.key === 'europe' || group.parentKey === 'eu-parent';
+
+		if (hasGlobal) {
+			if (tempSelectedRegions.includes('Global')) {
+				tempSelectedRegions = [];
+			} else {
+				// Clear all and select only Global
+				tempSelectedRegions = ['Global'];
+			}
+			return;
+		}
+
+		if (isEUGroup && group.isMainParent) {
+			if (tempSelectedRegions.includes('EU')) {
+				tempSelectedRegions = [];
+			} else {
+				// Clear all and select only EU
+				tempSelectedRegions = ['EU'];
+			}
+			return;
+		}
+
+		if (group.isMainParent) {
+			// This is the "Select Countries" group
+			const allGroupAndSubGroupRegions = [
+				...group.regions.map((r) => r.code),
+				...(group.subGroups?.flatMap((sg) => sg.regions.map((r) => r.code)) || [])
+			];
+
+			// Filter out regions that are already in use
+			const availableRegions = allGroupAndSubGroupRegions.filter(
+				(code) => !usedRegions.regions.has(code)
+			);
+
+			// Clear Global and EU when selecting countries
+			const currentCountrySelections = tempSelectedRegions.filter(
+				(code) => code !== 'Global' && code !== 'EU'
+			);
+
+			// Check if all available (non-in-use) regions are selected
+			const allAvailableSelected = availableRegions.every((code) =>
+				currentCountrySelections.includes(code)
+			);
+
+			if (allAvailableSelected) {
+				// Deselect all available countries
+				tempSelectedRegions = currentCountrySelections.filter(
+					(code) => !availableRegions.includes(code)
+				);
+			} else {
+				// Select all available countries (excluding Global, EU, and in-use regions)
+				tempSelectedRegions = [...new Set([...currentCountrySelections, ...availableRegions])];
+			}
+			return;
+		}
+
+		// Sub-group toggle (like United States)
+		const isFullySelected = isGroupFullySelected(group);
+		const groupCodes = group.regions.map((r) => r.code);
+
+		// Filter out regions that are already in use
+		const availableGroupCodes = groupCodes.filter((code) => !usedRegions.regions.has(code));
+
+		// Clear Global and EU when selecting countries
+		const currentCountrySelections = tempSelectedRegions.filter(
+			(code) => code !== 'Global' && code !== 'EU'
+		);
+
+		if (isFullySelected) {
+			tempSelectedRegions = currentCountrySelections.filter((code) => !groupCodes.includes(code));
+		} else {
+			// Only select available (non-in-use) regions
+			tempSelectedRegions = [...new Set([...currentCountrySelections, ...availableGroupCodes])];
+		}
+	};
+
+	/**
+	 * Apply selections and trigger callback
+	 */
+	const applySelections = () => {
+		onRegionsChange?.(tempSelectedRegions);
+	};
+</script>
+
+<div class="region-selector {className}" {...restProps}>
+	<div class="search-actions-row">
+		<div class="search-section">
+			<input
+				type="text"
+				class="search-input"
+				placeholder={searchPlaceholder}
+				bind:value={searchQuery}
+			/>
+		</div>
+		{#if tempSelectedRegions.length > 0}
+			<button type="button" class="clear-btn" onclick={clearAll}>Clear all</button>
+		{/if}
+	</div>
+
+	{#if tempSelectedRegions.length > 0}
+		<div class="selection-display">
+			<div class="selected-items">
+				{#each visibleBadges as region (region.code)}
+					<span class="selected-badge">
+						{region.name}
+						<span
+							role="button"
+							tabindex="0"
+							class="remove-btn"
+							onclick={(e) => {
+								e.stopPropagation();
+								removeRegion(region.code);
+							}}
+							onkeydown={(e) => {
+								if (e.key === 'Enter' || e.key === ' ') {
+									e.preventDefault();
+									e.stopPropagation();
+									removeRegion(region.code);
+								}
+							}}
+						>
+							&times;
+						</span>
+					</span>
+				{/each}
+				{#if remainingBadgesCount > 0}
+					<span class="more-badge"> + {remainingBadgesCount} more </span>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	<div class="options-list">
+		{#if isLoading}
+			<div class="empty-state">
+				<span class="empty-text">Loading regions...</span>
+			</div>
+		{:else if error}
+			<div class="empty-state">
+				<span class="empty-text error">Failed to load regions</span>
+				<span class="empty-text-sub">{error}</span>
+			</div>
+		{:else if filteredGroups.length === 0}
+			<div class="empty-state">
+				<span class="empty-text">No regions found</span>
+				{#if searchQuery}
+					<span class="empty-text-sub">Try searching with different terms</span>
+				{/if}
+			</div>
+		{:else}
+			{#each filteredGroups as group (group.key)}
+				{@const isMainParent = group.isMainParent}
+				{@const isThisMainParentSelected = selectedMainParent === group.parentKey}
+				{@const hasGlobal = group.regions.some((r) => r.code === 'Global')}
+				{@const isEUGroup = group.key === 'europe' || group.parentKey === 'eu-parent'}
+				{@const isNonExpandable = hasGlobal || isEUGroup}
+				{@const isGlobalGroupUsed = hasGlobal && usedRegions.isGlobalUsed}
+				{@const isEUGroupUsed = isEUGroup && usedRegions.isEUGroupUsed}
+				{@const allGroupRegionsInUse = areAllGroupAndSubGroupRegionsInUse(group)}
+				{@const isGroupUsedByOther = isGlobalGroupUsed || isEUGroupUsed || allGroupRegionsInUse}
+				{@const isGroupDisabled = isGroupUsedByOther}
+
+				<div class="option-group" class:disabled={isGroupDisabled} class:main-parent={isMainParent}>
+					{#if isMainParent}
+						<button
+							type="button"
+							class="group-label main-parent-label"
+							class:fully-selected={isThisMainParentSelected}
+							class:expanded={isGroupExpanded(group.key)}
+							class:disabled={isGroupDisabled}
+							class:in-use={isGroupUsedByOther}
+							onclick={() => {
+								if (isGroupDisabled) return;
+
+								if (isNonExpandable) {
+									toggleGroup(group);
+								} else {
+									toggleGroupExpansion(group.key);
+								}
+							}}
+							onkeydown={(e) => {
+								if (e.key === 'Enter' || e.key === ' ') {
+									e.preventDefault();
+									if (isGroupDisabled) return;
+
+									if (isNonExpandable) {
+										toggleGroup(group);
+									} else {
+										toggleGroupExpansion(group.key);
+									}
+								}
+							}}
+							disabled={isGroupDisabled}
+						>
+							<div
+								role="radio"
+								tabindex="-1"
+								aria-checked={isThisMainParentSelected}
+								onclick={(e) => {
+									if (!isNonExpandable) {
+										e.stopPropagation();
+										if (!isGroupDisabled) {
+											toggleGroup(group);
+											if (!isGroupExpanded(group.key)) {
+												toggleGroupExpansion(group.key);
+											}
+										}
+									}
+								}}
+								onkeydown={(e) => {
+									if (!isNonExpandable && (e.key === 'Enter' || e.key === ' ')) {
+										e.preventDefault();
+										e.stopPropagation();
+										if (!isGroupDisabled) {
+											toggleGroup(group);
+											if (!isGroupExpanded(group.key)) {
+												toggleGroupExpansion(group.key);
+											}
+										}
+									}
+								}}
+							>
+								<Checkbox
+									checked={isThisMainParentSelected}
+									variant="radio"
+									disabled={isGroupDisabled}
+								/>
+							</div>
+							<span class="group-label-text">
+								{group.name}
+								{#if isGroupUsedByOther}
+									<span class="in-use-badge">(in-use)</span>
+								{/if}
+							</span>
+							{#if !isNonExpandable}
+								<span class="group-chevron">
+									<svg viewBox="0 0 20 20" fill="currentColor">
+										<path
+											fill-rule="evenodd"
+											d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+											clip-rule="evenodd"
+										/>
+									</svg>
+								</span>
+							{/if}
+						</button>
+					{/if}
+
+					{#if !isMainParent || isGroupExpanded(group.key)}
+						{#if group.subGroups && group.subGroups.length > 0}
+							{#each group.subGroups as subGroup (subGroup.key)}
+								{@const allSubGroupRegionsInUse = areAllGroupRegionsInUse(subGroup)}
+								{@const isSubGroupDisabled = allSubGroupRegionsInUse}
+								{@const isSubGroupFullySelected = isGroupFullySelected(subGroup)}
+								{@const isSubGroupPartiallySelected = isGroupPartiallySelected(subGroup)}
+								{@const isSubGroupExpanded = isGroupExpanded(subGroup.key)}
+
+								<div class="sub-group">
+									<button
+										type="button"
+										class="group-label sub-group-label"
+										class:fully-selected={isSubGroupFullySelected}
+										class:partially-selected={isSubGroupPartiallySelected}
+										class:expanded={isSubGroupExpanded}
+										class:disabled={isSubGroupDisabled}
+										class:in-use={allSubGroupRegionsInUse}
+										onclick={() => {
+											if (!isSubGroupDisabled) {
+												toggleGroupExpansion(subGroup.key);
+											}
+										}}
+										disabled={isSubGroupDisabled}
+									>
+										<div
+											role="checkbox"
+											tabindex="0"
+											aria-checked={isSubGroupFullySelected
+												? 'true'
+												: isSubGroupPartiallySelected
+													? 'mixed'
+													: 'false'}
+											onclick={(e) => {
+												e.stopPropagation();
+												if (!isSubGroupDisabled) {
+													toggleGroup(subGroup);
+												}
+											}}
+											onkeydown={(e) => {
+												if (e.key === 'Enter' || e.key === ' ') {
+													e.preventDefault();
+													e.stopPropagation();
+													if (!isSubGroupDisabled) {
+														toggleGroup(subGroup);
+													}
+												}
+											}}
+										>
+											{#if isSubGroupPartiallySelected}
+												<div class="partially-selected-box">
+													<svg viewBox="0 0 20 20" fill="currentColor">
+														<path d="M5 10h10v1H5z" />
+													</svg>
+												</div>
+											{:else}
+												<Checkbox checked={isSubGroupFullySelected} disabled={isSubGroupDisabled} />
+											{/if}
+										</div>
+										<span class="group-label-text sub-group-text">
+											{subGroup.name}
+											{#if allSubGroupRegionsInUse}
+												<span class="in-use-badge">(in-use)</span>
+											{/if}
+										</span>
+										<span class="group-chevron">
+											<svg viewBox="0 0 20 20" fill="currentColor">
+												<path
+													fill-rule="evenodd"
+													d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+													clip-rule="evenodd"
+												/>
+											</svg>
+										</span>
+									</button>
+
+									{#if isSubGroupExpanded}
+										{#each subGroup.regions as region (region.code)}
+											{@const isRegionInUse = usedRegions.regions.has(region.code)}
+											{@const isRegionDisabled = isRegionInUse}
+
+											<button
+												type="button"
+												class="option-item sub-group-item"
+												class:disabled={isRegionDisabled}
+												class:in-use={isRegionInUse}
+												onclick={() => {
+													if (!isRegionDisabled) {
+														toggleRegion(region.code);
+													}
+												}}
+												disabled={isRegionDisabled}
+											>
+												<Checkbox
+													checked={tempSelectedRegions.includes(region.code)}
+													disabled={isRegionDisabled}
+												/>
+												<span class="option-label">
+													{region.name}
+													<span class="region-code-badge">
+														{region.code}
+														{#if isRegionInUse}
+															<span class="in-use-badge">(in-use)</span>
+														{/if}
+													</span>
+												</span>
+											</button>
+										{/each}
+									{/if}
+								</div>
+							{/each}
+						{/if}
+
+						{#if !isMainParent || group.regions.length > 0}
+							{#each group.regions as region (region.code)}
+								{@const isRegionInUse = usedRegions.regions.has(region.code)}
+								{@const isRegionDisabled = isRegionInUse}
+
+								<button
+									type="button"
+									class="option-item"
+									class:indented={isMainParent}
+									class:disabled={isRegionDisabled}
+									class:in-use={isRegionInUse}
+									onclick={() => {
+										if (!isRegionDisabled) {
+											toggleRegion(region.code);
+										}
+									}}
+									disabled={isRegionDisabled}
+								>
+									<Checkbox
+										checked={tempSelectedRegions.includes(region.code)}
+										disabled={isRegionDisabled}
+									/>
+									<span class="option-label">
+										{region.name}
+										<span class="region-code-badge">
+											{region.code}
+											{#if isRegionInUse}
+												<span class="in-use-badge">(in-use)</span>
+											{/if}
+										</span>
+									</span>
+								</button>
+							{/each}
+						{/if}
+					{/if}
+				</div>
+			{/each}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.region-selector {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		height: 100%;
+	}
+
+	.search-actions-row {
+		display: flex;
+		gap: 8px;
+		align-items: flex-start;
+		position: sticky;
+		top: 0;
+		background: var(--background2);
+		z-index: 10;
+	}
+
+	.search-section {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.search-input {
+		width: 100%;
+		padding: 6px 10px;
+		background: var(--background3);
+		border: 1px solid var(--border1);
+		border-radius: 4px;
+		color: var(--text1);
+		font-size: 11.5px;
+	}
+
+	.search-input:focus {
+		outline: none;
+		border-color: var(--actionPrimaryBackground);
+	}
+
+	.clear-btn {
+		padding: 6px 12px;
+		background: var(--background3);
+		border: 1px solid var(--border1);
+		border-radius: 4px;
+		font-size: 11px;
+		cursor: pointer;
+		color: var(--text1);
+		white-space: nowrap;
+		flex-shrink: 0;
+	}
+
+	.clear-btn:hover {
+		background: var(--background3);
+		border-color: var(--blueBorder);
+	}
+
+	.selection-display {
+		padding: 8px 0;
+	}
+
+	.selected-items {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 6px;
+	}
+
+	.selected-badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		padding: 4px 8px;
+		background: var(--background3);
+		border: 1px solid var(--border1);
+		border-radius: 4px;
+		font-size: 11px;
+	}
+
+	.selected-badge:hover {
+		background: var(--background3);
+	}
+
+	.more-badge {
+		display: inline-flex;
+		align-items: center;
+		padding: 4px 8px;
+		background: var(--background3);
+		border: 1px solid var(--border1);
+		border-radius: 4px;
+		font-size: 11px;
+		color: var(--text2);
+		font-weight: 500;
+	}
+
+	.remove-btn {
+		display: flex;
+		align-items: end;
+		justify-content: center;
+		padding: 0;
+		width: 14px;
+		height: 14px;
+		background: none;
+		border: none;
+		border-radius: 3px;
+		cursor: pointer;
+		font-size: 1rem;
+		line-height: 1;
+		color: var(--text3);
+	}
+
+	.options-list {
+		overflow-y: auto;
+		padding-right: 4px;
+		flex: 1;
+		max-height: 300px;
+	}
+
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 4px;
+		padding: 40px 20px;
+		text-align: center;
+	}
+
+	.empty-text {
+		font-size: 11px;
+		color: var(--text2);
+	}
+
+	.empty-text.error {
+		color: var(--redText);
+	}
+
+	.empty-text-sub {
+		font-size: 11px;
+		color: var(--text3);
+	}
+
+	.option-group {
+		margin-bottom: 8px;
+	}
+
+	.option-group:last-child {
+		margin-bottom: 0;
+	}
+
+	.option-group.main-parent:last-child {
+		border-bottom: none;
+	}
+
+	.sub-group {
+		margin-bottom: 4px;
+	}
+
+	.group-label {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 8px;
+		background: none;
+		border: none;
+		border-radius: 4px;
+		cursor: pointer;
+		text-align: left;
+		margin-bottom: 4px;
+	}
+
+	.group-label:hover {
+		background: var(--background3);
+	}
+
+	.group-label.partially-selected {
+		background: var(--background3);
+	}
+
+	.main-parent-label:hover {
+		background: var(--background3);
+	}
+
+	.main-parent-label.fully-selected {
+		background: var(--background3);
+	}
+
+	.sub-group-label {
+		padding: 6px 12px;
+		width: calc(100% - 28px);
+		margin-left: 20px;
+	}
+
+	.group-label-text {
+		flex: 1;
+		font-size: 11px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--text2);
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	.main-parent-label .group-label-text {
+		font-size: 12px;
+		font-weight: 700;
+		color: var(--text1);
+	}
+
+	.sub-group-text {
+		font-size: 10.5px;
+		font-weight: 500;
+		text-transform: none;
+	}
+
+	.group-chevron {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 16px;
+		height: 16px;
+		margin-left: auto;
+		flex-shrink: 0;
+		color: var(--text3);
+	}
+
+	.group-label.expanded .group-chevron {
+		transform: rotate(180deg);
+	}
+
+	.group-chevron svg {
+		width: 14px;
+		height: 14px;
+	}
+
+	.group-checkbox {
+		width: 18px;
+		height: 18px;
+		cursor: pointer;
+	}
+
+	.group-checkbox:hover {
+		opacity: 0.8;
+	}
+
+	.option-item {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 8px 12px;
+		background: none;
+		border: none;
+		border-radius: 4px;
+		cursor: pointer;
+		text-align: left;
+	}
+
+	.option-item:hover {
+		background: var(--background3);
+	}
+
+	.option-item.indented {
+		width: calc(100% - 28px);
+		margin-left: 20px;
+	}
+
+	.sub-group-item {
+		width: calc(100% - 56px);
+		margin-left: 56px;
+	}
+
+	.option-item :global(.checkbox),
+	.group-label :global(.checkbox) {
+		flex-shrink: 0;
+	}
+
+	.partially-selected-box {
+		width: 16px;
+		height: 16px;
+		flex-shrink: 0;
+		border: 2px solid var(--border1);
+		border-radius: 4px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--actionPrimaryBackground);
+		border-color: var(--actionPrimaryBackground);
+	}
+
+	.partially-selected-box svg {
+		width: 14px;
+		height: 14px;
+		color: white;
+	}
+
+	.option-item.disabled,
+	.group-label.disabled,
+	.option-group.disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.option-item.disabled:hover,
+	.group-label.disabled:hover {
+		background: none;
+	}
+
+	.option-label {
+		flex: 1;
+		font-size: 11.5px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: 8px;
+		color: var(--text2);
+	}
+
+	.region-code-badge {
+		font-size: 10px;
+		color: var(--text3);
+		font-family: monospace;
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+	}
+
+	.in-use-badge {
+		font-size: 9px;
+		color: var(--yellowText, #f59e0b);
+		font-family:
+			system-ui,
+			-apple-system,
+			sans-serif;
+		font-weight: 500;
+		font-style: italic;
+	}
+
+	.option-item.in-use,
+	.group-label.in-use {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	.option-item.in-use:hover,
+	.group-label.in-use:hover {
+		background: none;
+	}
+</style>