@finsweet/webflow-apps-utils 1.0.33 → 1.0.37

package/dist/ui/components/layout/Layout.svelte

@@ -59,6 +59,8 @@
 		main?: Snippet;
 		/** Preview bar content snippet */
 		previewBar?: Snippet;
+		/** Custom tabs snippet to override default tab rendering */
+		customTabs?: Snippet;
 		/** Footer content snippet */
 		footer?: Snippet;
 	}
@@ -73,6 +75,7 @@
 		showFooter = true,
 		showSidebar = true,
 		showTabs = true,
+		customTabs,
 		showPreviewBar = true,
 		sidebarWidth = '274px',
 		containerMode = false,
@@ -164,60 +167,64 @@
 >
 	{#if showTabs}
 		<div class="navbar" data-area="navbar">
-			{#each tabs as tab (tab.path)}
-				{@const Icon = tab.icon}
-				{@const notification = getNotification(tab.path)}
-				<button
-					class="tab"
-					class:isActive={activeTab === tab.path}
-					class:warning={notification && !notification?.success}
-					class:success={notification && notification?.success}
-					onclick={() => switchTab(tab.path)}
-				>
-					<Icon />
-					<span
-						class="tab-text"
-						style="color: {activeTab !== tab.path ? 'var(--text2)' : 'var(--actionPrimaryText)'}"
+			{#if customTabs}
+				{@render customTabs()}
+			{:else}
+				{#each tabs as tab (tab.path)}
+					{@const Icon = tab.icon}
+					{@const notification = getNotification(tab.path)}
+					<button
+						class="tab"
+						class:isActive={activeTab === tab.path}
+						class:warning={notification && !notification?.success}
+						class:success={notification && notification?.success}
+						onclick={() => switchTab(tab.path)}
 					>
-						{tab.name}
-					</span>
-
-					{#if notification?.showNotification}
-						{#if notification?.success}
-							<span class="notification-pill success">
-								<CheckCircleOutlinedIcon />
-							</span>
-						{:else}
-							<Tooltip
-								message={notification?.message}
-								placement="right"
-								offsetVal={8}
-								position="fixed"
-								width="max-content"
-							>
-								{#snippet target()}
-									<div class="notification-pill warning-tooltip">
-										<WarningCircleOutlineIcon />
-									</div>
-								{/snippet}
-							</Tooltip>
+						<Icon />
+						<span
+							class="tab-text"
+							style="color: {activeTab !== tab.path ? 'var(--text2)' : 'var(--actionPrimaryText)'}"
+						>
+							{tab.name}
+						</span>
+
+						{#if notification?.showNotification}
+							{#if notification?.success}
+								<span class="notification-pill success">
+									<CheckCircleOutlinedIcon />
+								</span>
+							{:else}
+								<Tooltip
+									message={notification?.message}
+									placement="right"
+									offsetVal={8}
+									position="fixed"
+									width="max-content"
+								>
+									{#snippet target()}
+										<div class="notification-pill warning-tooltip">
+											<WarningCircleOutlineIcon />
+										</div>
+									{/snippet}
+								</Tooltip>
+							{/if}
 						{/if}
-					{/if}
-				</button>
-			{/each}
-		</div>
-	{/if}
-
-	{#if showPreviewBar && showSidebar}
-		<div class="preview-bar" data-area="preview-bar">
-			{#if previewBar}
-				{@render previewBar()}
-			{:else}
-				<div class="preview-bar-content">
-					<span>Preview: {activeTab} tab content</span>
-				</div>
+					</button>
+				{/each}
 			{/if}
 		</div>
+
+		{#if showPreviewBar && showSidebar}
+			<div class="preview-bar" data-area="preview-bar">
+				{#if previewBar}
+					{@render previewBar()}
+				{:else}
+					<div class="preview-bar-content">
+						<span>Preview: {activeTab} tab content</span>
+					</div>
+				{/if}
+			</div>
+		{/if}
 	{/if}
 
 	{#if showSidebar}

package/dist/ui/components/layout/Layout.svelte.d.ts

@@ -47,6 +47,8 @@ interface LayoutProps extends HTMLAttributes<HTMLDivElement> {
     main?: Snippet;
     /** Preview bar content snippet */
     previewBar?: Snippet;
+    /** Custom tabs snippet to override default tab rendering */
+    customTabs?: Snippet;
     /** Footer content snippet */
     footer?: Snippet;
 }

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

@@ -126,6 +126,10 @@
 			searchPlaceholder: {
 				control: 'text',
 				description: 'Placeholder text for search input'
+			},
+			hide: {
+				control: 'object',
+				description: 'Array of group keys or region codes to hide from display'
 			}
 		},
 		args: {
@@ -381,3 +385,93 @@
 		}
 	}}
 />
+
+<Story
+	name="Hide Global Group"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: [],
+		usedRegions: emptyUsedRegions,
+		hide: ['global-parent']
+	}}
+	parameters={{
+		docs: {
+			description: {
+				story:
+					'Demonstrates hiding the Global group using the parent key. The Global option will not be visible.'
+			}
+		}
+	}}
+/>
+
+<Story
+	name="Hide by Region Code"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: [],
+		usedRegions: emptyUsedRegions,
+		hide: ['Global', 'EU']
+	}}
+	parameters={{
+		docs: {
+			description: {
+				story:
+					'Shows hiding multiple groups by their region codes. Both Global and EU groups are hidden.'
+			}
+		}
+	}}
+/>
+
+<Story
+	name="Hide Multiple Groups"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: ['CA', 'MX'],
+		usedRegions: emptyUsedRegions,
+		hide: ['global-parent', 'europe', 'us']
+	}}
+	parameters={{
+		docs: {
+			description: {
+				story:
+					'Demonstrates hiding multiple groups at once. Only the Countries group remains visible, with some regions pre-selected.'
+			}
+		}
+	}}
+/>
+
+<Story
+	name="Three State Checkboxes"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: ['US-CA', 'US-AZ'],
+		usedRegions: emptyUsedRegions,
+		showSelectionDisplay: true
+	}}
+	parameters={{
+		docs: {
+			description: {
+				story:
+					'Demonstrates the three-state checkbox system: empty (no selections), minus icon (partial selections), and checkmark (all selections). The United States group shows a minus icon because only some states are selected (California and Arizona). Try selecting more states to see how the checkbox changes.'
+			}
+		}
+	}}
+/>
+
+<Story
+	name="Three State with Mixed Groups"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: ['US-CA', 'US-AZ', 'US-FL', 'CA', 'MX'],
+		usedRegions: emptyUsedRegions,
+		showSelectionDisplay: true
+	}}
+	parameters={{
+		docs: {
+			description: {
+				story:
+					'Shows three-state checkboxes with mixed selections across multiple groups. The "Select Countries" parent group shows a minus icon because it contains both the US subgroup (partially selected) and individual countries (Canada, Mexico). This demonstrates how parent groups intelligently show partial selection state when their children have mixed selection states.'
+			}
+		}
+	}}
+/>

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

@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { SvelteSet } from 'svelte/reactivity';
 
+	import { SubtractIcon } from '../../icons';
+
+	import Button from '../button/Button.svelte';
 	import { Checkbox } from '../checkbox';
+	import { Tooltip } from '../tooltip';
 	import type { ExtendedRegionGroup, Region, RegionGroup, RegionSelectorProps } from './types.js';
 
 	let {
@@ -18,6 +22,8 @@
 		error,
 		maxVisibleBadges = 2,
 		searchPlaceholder = 'Search regions...',
+		showSelectionDisplay = false,
+		hide = [],
 		class: className = '',
 		...restProps
 	}: RegionSelectorProps = $props();
@@ -31,13 +37,11 @@
 	 * 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);
 		}
@@ -170,11 +174,9 @@
 	 */
 	$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()) ||
@@ -267,18 +269,15 @@
 			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)) {
@@ -352,6 +351,50 @@
 		return selectedCount > 0 && selectedCount < group.regions.length;
 	};
 
+	/**
+	 * Check if extended group (with subgroups) is partially selected
+	 */
+	const isExtendedGroupPartiallySelected = (group: ExtendedRegionGroup): boolean => {
+		const allRegions = [...group.regions, ...(group.subGroups?.flatMap((sg) => sg.regions) || [])];
+
+		const availableRegions = allRegions.filter((region) => !usedRegions.regions.has(region.code));
+		const selectedCount = availableRegions.filter((region) =>
+			tempSelectedRegions.includes(region.code)
+		).length;
+
+		return selectedCount > 0 && selectedCount < availableRegions.length;
+	};
+
+	/**
+	 * Check if extended group (with subgroups) is fully selected
+	 */
+	const isExtendedGroupFullySelected = (group: ExtendedRegionGroup): boolean => {
+		const allRegions = [...group.regions, ...(group.subGroups?.flatMap((sg) => sg.regions) || [])];
+
+		const availableRegions = allRegions.filter((region) => !usedRegions.regions.has(region.code));
+		return (
+			availableRegions.length > 0 &&
+			availableRegions.every((region) => tempSelectedRegions.includes(region.code))
+		);
+	};
+
+	/**
+	 * Get checkbox state for a group (none, partial, full)
+	 */
+	const getGroupCheckboxState = (
+		group: ExtendedRegionGroup | RegionGroup
+	): 'none' | 'partial' | 'full' => {
+		if ('subGroups' in group && group.subGroups) {
+			if (isExtendedGroupFullySelected(group)) return 'full';
+			if (isExtendedGroupPartiallySelected(group)) return 'partial';
+			return 'none';
+		} else {
+			if (isGroupFullySelected(group as RegionGroup)) return 'full';
+			if (isGroupPartiallySelected(group as RegionGroup)) return 'partial';
+			return 'none';
+		}
+	};
+
 	/**
 	 * Toggle entire group selection
 	 */
@@ -363,7 +406,6 @@
 			if (tempSelectedRegions.includes('Global')) {
 				tempSelectedRegions = [];
 			} else {
-				// Clear all and select only Global
 				tempSelectedRegions = ['Global'];
 			}
 			return;
@@ -373,54 +415,44 @@
 			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'
 		);
@@ -428,11 +460,59 @@
 		if (isFullySelected) {
 			tempSelectedRegions = currentCountrySelections.filter((code) => !groupCodes.includes(code));
 		} else {
-			// Only select available (non-in-use) regions
 			tempSelectedRegions = [...new Set([...currentCountrySelections, ...availableGroupCodes])];
 		}
 	};
 
+	/**
+	 * Gets the instance name for a region from the usedRegions mapping
+	 */
+	const getInstanceName = (regionCode: string): string => {
+		return usedRegions.instanceNames?.get(regionCode) || 'another Instance';
+	};
+
+	/**
+	 * Creates tooltip message for regions in use
+	 */
+	const getInUseTooltipMessage = (regionCode?: string): string => {
+		if (!regionCode) return 'Currently in use on another instance';
+
+		const instanceName = getInstanceName(regionCode);
+		return `Currently in use on ${instanceName}`;
+	};
+
+	/**
+	 * Check if a group should be hidden based on hide prop
+	 */
+	const shouldHideGroup = (group: ExtendedRegionGroup): boolean => {
+		if (hide.length === 0) return false;
+
+		if (hide.includes(group.key) || (group.parentKey && hide.includes(group.parentKey))) {
+			return true;
+		}
+
+		const hasHiddenRegion = group.regions.some((region) => hide.includes(region.code));
+		if (hasHiddenRegion) return true;
+
+		return false;
+	};
+
+	/**
+	 * Check if a subgroup should be hidden based on hide prop
+	 */
+	const shouldHideSubGroup = (subGroup: RegionGroup): boolean => {
+		if (hide.length === 0) return false;
+
+		if (hide.includes(subGroup.key)) {
+			return true;
+		}
+
+		const hasHiddenRegion = subGroup.regions.some((region) => hide.includes(region.code));
+		if (hasHiddenRegion) return true;
+
+		return false;
+	};
+
 	/**
 	 * Apply selections and trigger callback
 	 */
@@ -441,6 +521,18 @@
 	};
 </script>
 
+{#snippet customCheckbox(state: 'none' | 'partial' | 'full', disabled: boolean = false)}
+	{#if state === 'full'}
+		<Checkbox checked={true} {disabled} />
+	{:else if state === 'partial'}
+		<div class="partially-selected-box" class:disabled>
+			<SubtractIcon />
+		</div>
+	{:else}
+		<Checkbox checked={false} {disabled} />
+	{/if}
+{/snippet}
+
 <div class="region-selector {className}" {...restProps}>
 	<div class="search-actions-row">
 		<div class="search-section">
@@ -452,11 +544,11 @@
 			/>
 		</div>
 		{#if tempSelectedRegions.length > 0}
-			<button type="button" class="clear-btn" onclick={clearAll}>Clear all</button>
+			<Button text="Clear all" variant="secondary" onclick={clearAll} class="clear-btn" />
 		{/if}
 	</div>
 
-	{#if tempSelectedRegions.length > 0}
+	{#if showSelectionDisplay && tempSelectedRegions.length > 0}
 		<div class="selection-display">
 			<div class="selected-items">
 				{#each visibleBadges as region (region.code)}
@@ -519,7 +611,12 @@
 				{@const isGroupUsedByOther = isGlobalGroupUsed || isEUGroupUsed || allGroupRegionsInUse}
 				{@const isGroupDisabled = isGroupUsedByOther}
 
-				<div class="option-group" class:disabled={isGroupDisabled} class:main-parent={isMainParent}>
+				<div
+					class="option-group"
+					class:disabled={isGroupDisabled}
+					class:main-parent={isMainParent}
+					class:hidden={shouldHideGroup(group)}
+				>
 					{#if isMainParent}
 						<button
 							type="button"
@@ -579,18 +676,29 @@
 									}
 								}}
 							>
-								<Checkbox
-									checked={isThisMainParentSelected}
-									variant="radio"
-									disabled={isGroupDisabled}
-								/>
+								<Tooltip
+									message={getInUseTooltipMessage()}
+									placement="top"
+									listener="hover"
+									offsetVal={6}
+									width="auto"
+									position="fixed"
+									padding="6px 8px"
+									disabled={!isGroupDisabled}
+								>
+									{#snippet target()}
+										{@render customCheckbox(getGroupCheckboxState(group), isGroupDisabled)}
+									{/snippet}
+								</Tooltip>
+							</div>
+							<div class="group-label-text-wrapper">
+								<span class="group-label-text" class:in-use={isGroupUsedByOther}>
+									<span class="group-name">{group.name}</span>
+									{#if isGroupUsedByOther}
+										<span class="in-use-badge">In use</span>
+									{/if}
+								</span>
 							</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">
@@ -614,7 +722,7 @@
 								{@const isSubGroupPartiallySelected = isGroupPartiallySelected(subGroup)}
 								{@const isSubGroupExpanded = isGroupExpanded(subGroup.key)}
 
-								<div class="sub-group">
+								<div class="sub-group" class:hidden={shouldHideSubGroup(subGroup)}>
 									<button
 										type="button"
 										class="group-label sub-group-label"
@@ -654,22 +762,19 @@
 												}
 											}}
 										>
-											{#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}
+											{@render customCheckbox(getGroupCheckboxState(subGroup), isSubGroupDisabled)}
+										</div>
+										<div class="group-label-text-wrapper">
+											<span
+												class="group-label-text sub-group-text"
+												class:in-use={allSubGroupRegionsInUse}
+											>
+												<span class="group-name">{subGroup.name}</span>
+												{#if allSubGroupRegionsInUse}
+													<span class="in-use-badge">In use</span>
+												{/if}
+											</span>
 										</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
@@ -686,32 +791,51 @@
 											{@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}
+											{#if isRegionDisabled}
+												<button
+													type="button"
+													class="option-item sub-group-item"
+													class:disabled={isRegionDisabled}
+													class:in-use={isRegionInUse}
+													style="cursor: not-allowed;"
+												>
+													<Tooltip
+														message={getInUseTooltipMessage(region.code)}
+														placement="top"
+														listener="hover"
+														offsetVal={6}
+														width="auto"
+														position="fixed"
+														padding="6px 8px"
+													>
+														{#snippet target()}
+															<Checkbox
+																checked={tempSelectedRegions.includes(region.code)}
+																disabled={isRegionDisabled}
+															/>
+														{/snippet}
+													</Tooltip>
+													<span
+														class="option-label"
+														class:in-use={isRegionInUse}
+														class:disabled={isRegionDisabled}
+													>
+														<span class="region-name">{region.name}</span>
+														<span class="in-use-badge">In use</span>
+													</span>
+												</button>
+											{:else}
+												<button
+													type="button"
+													class="option-item sub-group-item"
+													onclick={() => toggleRegion(region.code)}
+												>
+													<Checkbox checked={tempSelectedRegions.includes(region.code)} />
+													<span class="option-label">
+														<span class="region-name">{region.name}</span>
 													</span>
-												</span>
-											</button>
+												</button>
+											{/if}
 										{/each}
 									{/if}
 								</div>
@@ -723,33 +847,53 @@
 								{@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}
+								{#if isRegionDisabled}
+									<button
+										type="button"
+										class="option-item"
+										class:indented={isMainParent}
+										class:disabled={isRegionDisabled}
+										class:in-use={isRegionInUse}
+										style="cursor: not-allowed;"
+										disabled={true}
+									>
+										<Tooltip
+											message={getInUseTooltipMessage(region.code)}
+											placement="top"
+											listener="hover"
+											offsetVal={6}
+											width="auto"
+											padding="6px 8px"
+										>
+											{#snippet target()}
+												<Checkbox
+													checked={tempSelectedRegions.includes(region.code)}
+													disabled={isRegionDisabled}
+												/>
+											{/snippet}
+										</Tooltip>
+										<span
+											class="option-label"
+											class:disabled={isRegionDisabled}
+											class:in-use={isRegionInUse}
+										>
+											<span class="region-name">{region.name}</span>
+											<span class="in-use-badge">In use</span>
+										</span>
+									</button>
+								{:else}
+									<button
+										type="button"
+										class="option-item"
+										class:indented={isMainParent}
+										onclick={() => toggleRegion(region.code)}
+									>
+										<Checkbox checked={tempSelectedRegions.includes(region.code)} />
+										<span class="option-label">
+											<span class="region-name">{region.name}</span>
 										</span>
-									</span>
-								</button>
+									</button>
+								{/if}
 							{/each}
 						{/if}
 					{/if}
@@ -773,7 +917,6 @@
 		align-items: flex-start;
 		position: sticky;
 		top: 0;
-		background: var(--background2);
 		z-index: 10;
 	}
 
@@ -784,36 +927,52 @@
 
 	.search-input {
 		width: 100%;
-		padding: 6px 10px;
-		background: var(--background3);
-		border: 1px solid var(--border1);
+		height: 24px;
+		padding: 0 4px;
+		background-color: var(--background1);
+		border: 1px solid var(--border1, #212121);
 		border-radius: 4px;
-		color: var(--text1);
-		font-size: 11.5px;
+		color: var(--text3);
+		font-style: normal;
+		line-height: 16px;
+		letter-spacing: -0.115px;
+		box-shadow:
+			0px 16px 16px -16px rgba(0, 0, 0, 0.13) inset,
+			0px 12px 12px -12px rgba(0, 0, 0, 0.13) inset,
+			0px 8px 8px -8px rgba(0, 0, 0, 0.17) inset,
+			0px 4px 4px -4px rgba(0, 0, 0, 0.17) inset,
+			0px 3px 3px -3px rgba(0, 0, 0, 0.17) inset,
+			0px 1px 1px -1px rgba(0, 0, 0, 0.13) inset;
+		display: flex;
+		align-items: center;
+	}
+
+	.search-input::placeholder {
+		color: var(--text2) !important;
+		opacity: 1;
+	}
+
+	.search-input::-ms-input-placeholder {
+		color: var(--text2) !important;
 	}
 
 	.search-input:focus {
 		outline: none;
-		border-color: var(--actionPrimaryBackground);
+		border-color: var(--blueBorder);
 	}
 
 	.clear-btn {
-		padding: 6px 12px;
+		height: 24px;
+		padding: 0 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;
 	}
@@ -828,11 +987,10 @@
 		display: inline-flex;
 		align-items: center;
 		gap: 4px;
-		padding: 4px 8px;
+		padding: 4px 0;
 		background: var(--background3);
 		border: 1px solid var(--border1);
 		border-radius: 4px;
-		font-size: 11px;
 	}
 
 	.selected-badge:hover {
@@ -842,13 +1000,11 @@
 	.more-badge {
 		display: inline-flex;
 		align-items: center;
-		padding: 4px 8px;
+		padding: 4px 0;
 		background: var(--background3);
 		border: 1px solid var(--border1);
 		border-radius: 4px;
-		font-size: 11px;
 		color: var(--text2);
-		font-weight: 500;
 	}
 
 	.remove-btn {
@@ -862,7 +1018,6 @@
 		border: none;
 		border-radius: 3px;
 		cursor: pointer;
-		font-size: 1rem;
 		line-height: 1;
 		color: var(--text3);
 	}
@@ -885,7 +1040,6 @@
 	}
 
 	.empty-text {
-		font-size: 11px;
 		color: var(--text2);
 	}
 
@@ -894,12 +1048,20 @@
 	}
 
 	.empty-text-sub {
-		font-size: 11px;
 		color: var(--text3);
 	}
 
 	.option-group {
-		margin-bottom: 8px;
+		display: flex;
+		padding: 0 4px;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 2px;
+		align-self: stretch;
+	}
+
+	.option-group.hidden {
+		display: none;
 	}
 
 	.option-group:last-child {
@@ -911,7 +1073,17 @@
 	}
 
 	.sub-group {
-		margin-bottom: 4px;
+		display: flex;
+		padding: 0 4px;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 2px;
+		align-self: stretch;
+		width: 100%;
+	}
+
+	.sub-group.hidden {
+		display: none;
 	}
 
 	.group-label {
@@ -919,58 +1091,59 @@
 		display: flex;
 		align-items: center;
 		gap: 10px;
-		padding: 8px;
+		padding: 4px 0;
 		background: none;
 		border: none;
 		border-radius: 4px;
 		cursor: pointer;
 		text-align: left;
-		margin-bottom: 4px;
 	}
 
-	.group-label:hover {
-		background: var(--background3);
+	.sub-group-label {
+		padding: 4px 0;
+		width: calc(100% - 8px);
+		margin-left: 12px;
 	}
 
-	.group-label.partially-selected {
-		background: var(--background3);
+	.group-label-text {
+		flex: 1;
+		letter-spacing: 0.05em;
+		color: var(--text2);
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 6px;
 	}
 
-	.main-parent-label:hover {
-		background: var(--background3);
+	.group-label-text-wrapper {
+		flex: 1;
+		display: flex;
+		align-items: center;
 	}
 
-	.main-parent-label.fully-selected {
-		background: var(--background3);
+	.group-name {
+		flex: 1;
 	}
 
-	.sub-group-label {
-		padding: 6px 12px;
-		width: calc(100% - 28px);
-		margin-left: 20px;
+	.group-label-text.in-use .group-name {
+		opacity: 0.4 !important;
 	}
 
-	.group-label-text {
+	.group-label-text-wrapper {
 		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);
+	.group-name {
+		flex: 1;
+	}
+
+	.group-label-text.in-use .group-name {
+		opacity: 0.4 !important;
 	}
 
 	.sub-group-text {
-		font-size: 10.5px;
-		font-weight: 500;
 		text-transform: none;
 	}
 
@@ -1000,35 +1173,28 @@
 		cursor: pointer;
 	}
 
-	.group-checkbox:hover {
-		opacity: 0.8;
-	}
-
 	.option-item {
 		width: 100%;
 		display: flex;
 		align-items: center;
 		gap: 10px;
-		padding: 8px 12px;
+		padding: 4px 0;
 		background: none;
+		height: 24px;
 		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;
+		width: calc(100% - 16px);
+		margin-left: 16px;
 	}
 
 	.sub-group-item {
-		width: calc(100% - 56px);
-		margin-left: 56px;
+		width: calc(100% - 32px);
+		margin-left: 32px;
 	}
 
 	.option-item :global(.checkbox),
@@ -1036,6 +1202,11 @@
 		flex-shrink: 0;
 	}
 
+	[role='radio'],
+	[role='checkbox'] {
+		width: 16px;
+		height: 16px;
+	}
 	.partially-selected-box {
 		width: 16px;
 		height: 16px;
@@ -1049,27 +1220,36 @@
 		border-color: var(--actionPrimaryBackground);
 	}
 
-	.partially-selected-box svg {
+	.partially-selected-box.disabled {
+		background: var(--background3);
+		border-color: var(--border1);
+		opacity: 0.4;
+	}
+
+	.partially-selected-box :global(svg) {
 		width: 14px;
 		height: 14px;
 		color: white;
 	}
 
+	.partially-selected-box.disabled svg {
+		color: var(--text3);
+	}
+
 	.option-item.disabled,
 	.group-label.disabled,
 	.option-group.disabled {
-		opacity: 0.5;
 		cursor: not-allowed;
+		opacity: 1 !important;
 	}
 
-	.option-item.disabled:hover,
-	.group-label.disabled:hover {
-		background: none;
+	.group-label.in-use {
+		cursor: not-allowed;
+		opacity: 1 !important;
 	}
 
 	.option-label {
 		flex: 1;
-		font-size: 11.5px;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
@@ -1077,34 +1257,30 @@
 		color: var(--text2);
 	}
 
-	.region-code-badge {
-		font-size: 10px;
-		color: var(--text3);
-		font-family: monospace;
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
+	.region-name {
+		flex: 1;
+	}
+
+	.option-label.disabled .region-name,
+	.option-label.in-use .region-name {
+		opacity: 0.4 !important;
 	}
 
 	.in-use-badge {
+		display: flex;
+		align-items: center;
+		background:
+			linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%),
+			linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%);
+		border-radius: 36px;
+		padding: 4px 6px;
 		font-size: 9px;
-		color: var(--yellowText, #f59e0b);
-		font-family:
-			system-ui,
-			-apple-system,
-			sans-serif;
-		font-weight: 500;
-		font-style: italic;
+		color: var(--text2, #b9b9b9);
+		flex-shrink: 0;
 	}
 
-	.option-item.in-use,
-	.group-label.in-use {
-		opacity: 0.6;
+	.option-item.in-use {
 		cursor: not-allowed;
-	}
-
-	.option-item.in-use:hover,
-	.group-label.in-use:hover {
-		background: none;
+		opacity: 1 !important;
 	}
 </style>

package/dist/ui/components/regions/types.d.ts

@@ -18,6 +18,7 @@ export interface UsedRegions {
     isGlobalUsed: boolean;
     isEUGroupUsed: boolean;
     byInstance: Map<string, Set<string>>;
+    instanceNames?: Map<string, string>;
 }
 export interface RegionSelectorProps {
     regionGroups: RegionGroup[];
@@ -25,8 +26,10 @@ export interface RegionSelectorProps {
     onRegionsChange?: (regions: string[]) => void;
     usedRegions?: UsedRegions;
     isLoading?: boolean;
+    showSelectionDisplay?: boolean;
     error?: string;
     maxVisibleBadges?: number;
     searchPlaceholder?: string;
+    hide?: string[];
     class?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsweet/webflow-apps-utils",
-  "version": "1.0.33",
+  "version": "1.0.37",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {
@@ -37,69 +37,70 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@changesets/changelog-git": "^0.1.14",
-    "@changesets/cli": "^2.27.1",
-    "@chromatic-com/storybook": "^4",
-    "@eslint/compat": "^1.2.5",
-    "@eslint/js": "^9.18.0",
-    "@playwright/test": "^1.49.1",
-    "@storybook/addon-a11y": "^9.0.10",
-    "@storybook/addon-docs": "^9.0.10",
-    "@storybook/addon-svelte-csf": "^5.0.3",
-    "@storybook/addon-vitest": "^9.0.10",
-    "@storybook/sveltekit": "^9.0.10",
-    "@sveltejs/adapter-auto": "^6.0.0",
-    "@sveltejs/kit": "^2.16.0",
-    "@sveltejs/package": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^5.0.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/svelte": "^5.2.4",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/js-cookie": "^3.0.6",
-    "@types/lodash": "^4.17.18",
-    "@types/lodash-es": "^4.17.12",
-    "@types/luxon": "^3.6.2",
-    "@types/node": "^22",
+    "@changesets/changelog-git": "0.2.1",
+    "@changesets/cli": "2.29.7",
+    "@chromatic-com/storybook": "4.1.1",
+    "@eslint/compat": "1.4.0",
+    "@eslint/js": "9.36.0",
+    "@playwright/test": "1.55.1",
+    "@storybook/addon-a11y": "9.1.8",
+    "@storybook/addon-docs": "9.1.8",
+    "@storybook/addon-svelte-csf": "5.0.8",
+    "@storybook/addon-vitest": "9.1.8",
+    "@storybook/sveltekit": "9.1.8",
+    "@sveltejs/adapter-auto": "6.1.0",
+    "@sveltejs/kit": "2.43.2",
+    "@sveltejs/package": "2.5.4",
+    "@sveltejs/vite-plugin-svelte": "5.1.1",
+    "@testing-library/jest-dom": "6.8.0",
+    "@testing-library/svelte": "5.2.8",
+    "@testing-library/user-event": "14.6.1",
+    "@types/js-cookie": "3.0.6",
+    "@types/lodash": "4.17.20",
+    "@types/lodash-es": "4.17.12",
+    "@types/luxon": "3.7.1",
+    "@types/node": "22.18.6",
     "@vitest/browser": "3.2.3",
     "@vitest/coverage-v8": "3.2.3",
-    "@webflow/designer-extension-typings": "latest",
-    "eslint": "^9.18.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-storybook": "^9.0.10",
-    "eslint-plugin-svelte": "^3.0.0",
-    "globals": "^16.0.0",
-    "jsdom": "^26.0.0",
-    "prettier": "^3.4.2",
-    "prettier-plugin-svelte": "^3.3.3",
-    "publint": "^0.3.2",
-    "storybook": "^9.0.10",
-    "svelte": "^5.0.0",
-    "svelte-check": "^4.0.0",
-    "typescript": "^5.0.0",
-    "typescript-eslint": "^8.20.0",
-    "vite": "^6.2.6",
-    "vitest": "^3.2.3"
+    "@webflow/designer-extension-typings": "2.0.23",
+    "eslint": "9.36.0",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-simple-import-sort": "12.1.1",
+    "eslint-plugin-storybook": "9.1.8",
+    "eslint-plugin-svelte": "3.12.4",
+    "globals": "16.4.0",
+    "js-yaml": "4.1.1",
+    "jsdom": "26.1.0",
+    "prettier": "3.6.2",
+    "prettier-plugin-svelte": "3.4.0",
+    "publint": "0.3.13",
+    "storybook": "9.1.8",
+    "svelte": "5.39.5",
+    "svelte-check": "4.3.2",
+    "typescript": "5.9.2",
+    "typescript-eslint": "8.44.1",
+    "vite": "7.1.7",
+    "vitest": "3.2.4"
   },
   "keywords": [
     "svelte"
   ],
   "dependencies": {
-    "@floating-ui/dom": "^1.7.1",
-    "cheerio": "^1.1.0",
-    "copy-text-to-clipboard": "^3.2.2",
-    "csv-parse": "^5.6.0",
-    "js-cookie": "^3.0.5",
-    "just-debounce": "^1.1.0",
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
-    "luxon": "^3.6.1",
-    "motion": "^10.18.0",
-    "svelte-routing": "^2.13.0",
-    "swiper": "^11.2.8",
-    "terser": "^5.43.1",
-    "uuid": "^11.1.0",
-    "zod": "^3.25.64"
+    "@floating-ui/dom": "1.7.4",
+    "cheerio": "1.1.2",
+    "copy-text-to-clipboard": "3.2.2",
+    "csv-parse": "5.6.0",
+    "js-cookie": "3.0.5",
+    "just-debounce": "1.1.0",
+    "lodash": "4.17.21",
+    "lodash-es": "4.17.21",
+    "luxon": "3.7.2",
+    "motion": "10.18.0",
+    "svelte-routing": "2.13.0",
+    "swiper": "11.2.10",
+    "terser": "5.44.0",
+    "uuid": "11.1.0",
+    "zod": "3.25.76"
   },
   "scripts": {
     "dev": "vite dev",