@persona/design-system 0.10.0 → 0.10.2

package/dist/{TableControls-DxSFqRwJ.mjs → TableControls-C5fNNdmT.mjs}

@@ -23,15 +23,15 @@ import { r as InputGroup } from "./Input-Dap055xf.mjs";
 import Input_default from "./components/Input/index.mjs";
 import { c as MenuList, s as MenuItem } from "./Menu-Dw6Rcpk6.mjs";
 import { n as DropdownMenu_default } from "./DropdownMenu-CedsmO5h.mjs";
-import { t as Combobox } from "./Combobox-CcFJo68g.mjs";
-import { n as Select, r as SelectHeader, t as Option } from "./Select-BJ9ACmRD.mjs";
-import { s as Popover_default } from "./Popover-BcII7usF.mjs";
-import { i as Modal_default } from "./Modal-kjUptzg1.mjs";
-import { r as DateRangePicker, t as DatePicker } from "./DatePicker-D0cvVbzq.mjs";
-import { t as Toggle } from "./Toggle-BLdemkh_.mjs";
+import { n as Select, r as SelectHeader, t as Option } from "./Select-hnXfPywt.mjs";
+import { s as Popover_default } from "./Popover-532iYFek.mjs";
+import { i as Modal_default } from "./Modal-IJdbLORi.mjs";
+import { t as Combobox } from "./Combobox-BXHCfVpE.mjs";
+import { r as DateRangePicker, t as DatePicker } from "./DatePicker-CkNQjfCN.mjs";
+import { t as ListBox } from "./ListBox-BLoJVezh.mjs";
 import { i as selectedPresetFor, n as parseDateFilterValue, r as resolveDateFilterValue, t as formatDateFilterValue } from "./date-filter-D0ys8s0D.mjs";
-import { t as ListBox } from "./ListBox-C80J7DCG.mjs";
-import { m as FormField, o as ComboboxField } from "./FormField-cSG93kuo.mjs";
+import { m as FormField, o as ComboboxField } from "./FormField-D0y1uRV5.mjs";
+import { t as Toggle } from "./Toggle-BsqSNYok.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
 import { Fragment, createContext, createElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -41,14 +41,14 @@ import { CaretDownIcon as CaretDownIcon$1, CircleInfoIcon as CircleInfoIcon$1, L
 import { debounce, isEqual, noop, partition, startCase, union, uniqueId } from "lodash-es";
 import { useId } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import Fuse from "fuse.js";
 import { DragIcon as DragIcon$1 } from "@persona/icons/24px";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { DndContext, PointerSensor, closestCenter, pointerWithin, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, horizontalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
+import Fuse from "fuse.js";
 import { parseAbsolute, parseDate, toCalendarDate, toZoned } from "@internationalized/date";
-import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 import { v4 } from "uuid";
+import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 //#region components/DataTable/FormControlLabel/FormControlLabel.ts
 const FormControlLabel = styled(Label$1).attrs(() => ({
 	size: "md",
@@ -696,13 +696,36 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 		const allViews = views ?? [];
 		return [allViews.filter((view) => !hiddenIds.has(view.id)), allViews.filter((view) => hiddenIds.has(view.id))];
 	}, [views, hiddenViewIds]);
+	const shownViewsKey = shownViews.map((view) => view.id).join("\n");
+	const [selectedSlot, setSelectedSlot] = useState(null);
+	const selectedSlotIndex = selectedSlot != null && selectedSlot.viewId === currentView && selectedSlot.shownViewsKey === shownViewsKey ? selectedSlot.index : null;
+	const stripViews = useMemo(() => {
+		const selectedView = shownViews.find((view) => view.id === currentView);
+		if (selectedSlotIndex == null || !selectedView) return shownViews;
+		const otherViews = shownViews.filter((view) => view !== selectedView);
+		return [
+			...otherViews.slice(0, selectedSlotIndex),
+			selectedView,
+			...otherViews.slice(selectedSlotIndex)
+		];
+	}, [
+		shownViews,
+		currentView,
+		selectedSlotIndex
+	]);
 	const onResize = useCallback(() => {
 		if (!tabListRef.current) return;
 		const containerRect = tabListRef.current.getBoundingClientRect();
 		const tabListContainer = tabListRef.current;
 		const firstOverflowIndex = Array.from(tabListContainer.querySelectorAll("[data-tab-view]")).findIndex((el) => !rectContainsRect(containerRect, el.getBoundingClientRect()));
-		const nextOverflowViews = firstOverflowIndex === -1 ? [] : shownViews.slice(firstOverflowIndex);
+		const nextOverflowViews = firstOverflowIndex === -1 ? [] : stripViews.slice(firstOverflowIndex);
 		setOverflowViews((prev) => prev.length === nextOverflowViews.length && prev.every((view, index) => view === nextOverflowViews[index]) ? prev : nextOverflowViews);
+		const selectedIndex = stripViews.findIndex((view) => view.id === currentView);
+		if (onReorderViews && currentView && firstOverflowIndex > 0 && selectedIndex >= firstOverflowIndex) setSelectedSlot({
+			viewId: currentView,
+			shownViewsKey,
+			index: firstOverflowIndex - 1
+		});
 		const firstRowElements = Array.from(tabListContainer.children).filter((el) => el instanceof HTMLElement && el !== tabOverflowRef.current && rectContainsRect(containerRect, el.getBoundingClientRect()));
 		const anchor = firstRowElements[firstRowElements.length - 1];
 		setOverflowLeft(anchor ? anchor.offsetLeft + anchor.offsetWidth + OVERFLOW_GAP : null);
@@ -710,7 +733,12 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 		setIsAddViewOverflowing(addViewButton instanceof HTMLElement && !firstRowElements.includes(addViewButton));
 		const tabOverflowWidth = tabOverflowRef.current?.getBoundingClientRect().width;
 		if (tabOverflowWidth) setTabOverflowWidth((prev) => prev != null && prev > tabOverflowWidth && prev - tabOverflowWidth < OVERFLOW_WIDTH_SHRINK_THRESHOLD ? prev : tabOverflowWidth);
-	}, [shownViews]);
+	}, [
+		currentView,
+		onReorderViews,
+		shownViewsKey,
+		stripViews
+	]);
 	useLayoutEffect(() => {
 		const tabList = tabListRef.current;
 		if (!showViews || !tabList) return;
@@ -735,7 +763,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 	}, [
 		onResize,
 		showViews,
-		shownViews
+		stripViews
 	]);
 	const isCurrentViewInOverflow = useMemo(() => !!currentView && [...overflowViews, ...hiddenViews].some((view) => view.id === currentView), [
 		currentView,
@@ -781,13 +809,22 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 			y: 0
 		};
 	}, []);
+	const orderedViewIds = useMemo(() => {
+		let shownIndex = 0;
+		const hiddenIds = new Set(hiddenViews.map((view) => view.id));
+		return (views ?? []).map((view) => hiddenIds.has(view.id) ? view.id : stripViews[shownIndex++].id);
+	}, [
+		views,
+		hiddenViews,
+		stripViews
+	]);
 	const moveView = (viewId, toIndex) => {
 		if (!views || !onReorderViews) return;
-		const viewIds = views.map((view) => view.id);
+		const viewIds = orderedViewIds;
 		const reordered = moveItemByIndex(viewIds, viewIds.indexOf(viewId), toIndex);
 		if (reordered !== viewIds) onReorderViews(reordered);
 	};
-	const indexOfView = (viewId) => views?.findIndex((view) => view.id === viewId) ?? -1;
+	const indexOfView = (viewId) => orderedViewIds.indexOf(viewId);
 	const openViewFromMenu = (viewId) => {
 		if (hiddenViews.some((view) => view.id === viewId)) onViewHiddenChange?.(viewId, false);
 		moveView(viewId, 0);
@@ -798,7 +835,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 	};
 	const hideView = (viewId) => {
 		const overflowIds = new Set(overflowViews.map((view) => view.id));
-		const visibleViews = shownViews.filter((view) => !overflowIds.has(view.id));
+		const visibleViews = stripViews.filter((view) => !overflowIds.has(view.id));
 		const index = visibleViews.findIndex((view) => view.id === viewId);
 		const isCurrent = viewId === currentView;
 		const focusTarget = isCurrent || index === -1 ? void 0 : visibleViews[index + 1] ?? visibleViews[index - 1];
@@ -807,8 +844,10 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 		document.getElementById(`${TAB_ID_PREFIX}${focusTarget ? focusTarget.id : "default"}`)?.focus({ preventScroll: true });
 	};
 	const moveViewWithKeyboard = (viewId, direction) => {
-		const neighbor = shownViews[shownViews.findIndex((view) => view.id === viewId) + direction];
+		const neighbor = stripViews[stripViews.findIndex((view) => view.id === viewId) + direction];
 		if (!neighbor) return;
+		const swapIds = [viewId, neighbor.id];
+		if (currentView != null && swapIds.includes(currentView) && swapIds.some((id) => overflowViews.some((view) => view.id === id))) return;
 		moveView(viewId, indexOfView(neighbor.id));
 	};
 	const handleAddView = async () => {
@@ -996,10 +1035,10 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 				}, view.id);
 			}),
 			onReorderViews ? /* @__PURE__ */ jsx(SortableContext, {
-				items: shownViews.map((view) => view.id),
+				items: stripViews.map((view) => view.id),
 				strategy: horizontalListSortingStrategy,
-				children: shownViews.map((view) => /* @__PURE__ */ jsx(SortableSavedViewTab, { ...getSavedViewTabProps(view) }, view.id))
-			}) : shownViews.map((view) => /* @__PURE__ */ jsx(SavedViewTabSlot, { ...getSavedViewTabProps(view) }, view.id)),
+				children: stripViews.map((view) => /* @__PURE__ */ jsx(SortableSavedViewTab, { ...getSavedViewTabProps(view) }, view.id))
+			}) : stripViews.map((view) => /* @__PURE__ */ jsx(SavedViewTabSlot, { ...getSavedViewTabProps(view) }, view.id)),
 			canEditViews && onAddView && /* @__PURE__ */ jsx(AddViewButton, {
 				id: ADD_VIEW_BUTTON_ID,
 				size: "md",
@@ -1174,7 +1213,7 @@ const FilterCombobox = styled.div`
     `}
 `;
 const InputFilter = ({ config, compact, onActiveChange }) => {
-	const [value, setValue] = useState(config.value);
+	const [value, setValue] = useState(config.value ?? "");
 	const onChangeRef = useRef(config.onChange);
 	onChangeRef.current = config.onChange;
 	const onActiveChangeRef = useRef(onActiveChange);
@@ -1183,13 +1222,13 @@ const InputFilter = ({ config, compact, onActiveChange }) => {
 		onActiveChangeRef.current(nextValue.length > 0);
 		onChangeRef.current(nextValue);
 	}, 300), []);
-	useEffect(() => setValue(config.value), [config.value]);
+	useEffect(() => setValue(config.value ?? ""), [config.value]);
 	useEffect(() => () => debouncedOnChange.cancel(), [debouncedOnChange]);
 	return /* @__PURE__ */ jsx(Input_default, {
 		"aria-label": config.name,
 		placeholder: config.placeholder,
 		size: compact ? "sm" : void 0,
-		value,
+		value: value ?? "",
 		onChange: ({ target: { value: nextValue } }) => {
 			setValue(nextValue);
 			debouncedOnChange(nextValue);
@@ -1201,7 +1240,7 @@ const SelectFilter = ({ config, compact, onActiveChange }) => {
 	return /* @__PURE__ */ jsx(Select, {
 		"aria-label": config.name,
 		placeholder: config.placeholder ?? strings.selectFilterOption,
-		value: config.value,
+		value: config.value ?? null,
 		width: "auto",
 		minWidth: 150,
 		size: compact ? "sm" : void 0,
@@ -1382,7 +1421,7 @@ const synchronizeActiveFilters = (filters, activeFilters, filterResolver) => {
 		...activeFromConfig,
 		...retainedDefaultVisible,
 		...configuring
-	].sort((first, second) => first.id - second.id);
+	].filter((active, index, all) => all.findIndex((other) => other.id === active.id) === index).sort((first, second) => first.id - second.id);
 	return next.length === 0 ? [createUnsetFilter(activeFilters)] : next;
 };
 const Filter = ({ config, compact, hideFilterSelection, filterResolver }) => {
@@ -1452,7 +1491,7 @@ const FilterSelection = ({ value, disabled, compact, filterResolver }) => {
 		width: "auto",
 		minWidth: 120,
 		placeholder: strings.selectFilterType,
-		value,
+		value: value ?? null,
 		size: compact ? "sm" : void 0,
 		disabled,
 		onValueChange: replaceFilter,
@@ -1507,598 +1546,155 @@ const Filters = ({ compact, filterResolver, ...props }) => {
 	});
 };
 //#endregion
-//#region components/DataTable/dnd/StyledIconDrag.tsx
-const StyledIconDrag = styled(DragIcon$1)`
-  display: ${({ $shouldHide = false }) => $shouldHide ? "none" : "inline"};
-
-  ${({ $horizontal = false }) => $horizontal ? css`
-          transform: rotate(90deg);
-        ` : ""}
-
-  ${({ $active = false, $hover = false }) => $active ? css`
-          cursor: grabbing;
-          opacity: 1;
-        ` : $hover ? css`
-            cursor: grab;
-            opacity: 1;
-          ` : css`
-            cursor: normal;
-            opacity: 0.4;
-          `}
-
-  transition: opacity 0.2s ease-in-out;
-
-  path {
-    stroke: ${({ theme }) => semanticColor(theme, "FgPrimary", Color.CoreSlate1000)};
-    stroke-width: 1px;
-  }
-`;
-//#endregion
-//#region components/DataTable/dnd/utils.ts
+//#region components/DataTable/TableControls/FiltersV2/operators.ts
 /**
-* reorder returns a reordered version of the inputed list by swapping the element
-* at startIndex with the one at endIndex
+* Operator vocabulary per field type. The UI uses this to populate the
+* operator dropdown in the Filter popover and to gate which operators are
+* reachable for a given field. `is_empty` / `is_not_empty` apply broadly;
+* everything else is type-specific.
+*
+* The first entry for each type is the default operator selected when a
+* pill is created from the picker.
 */
-function reorder(list, startIndex, endIndex) {
-	const result = Array.from(list);
-	const [removed] = result.splice(startIndex, 1);
-	result.splice(endIndex, 0, removed);
-	return result;
+const OPERATORS_BY_TYPE = {
+	string: [
+		"is",
+		"is_not",
+		"contains",
+		"does_not_contain",
+		"is_empty",
+		"is_not_empty"
+	],
+	email: [
+		"is",
+		"is_not",
+		"contains",
+		"does_not_contain",
+		"is_empty",
+		"is_not_empty"
+	],
+	choices: [
+		"is",
+		"is_not",
+		"is_empty",
+		"is_not_empty"
+	],
+	multi_choices: [
+		"is",
+		"is_not",
+		"is_empty",
+		"is_not_empty"
+	],
+	boolean: ["is"],
+	integer: [
+		"is",
+		"is_not",
+		"is_empty",
+		"is_not_empty"
+	],
+	float: [
+		"is",
+		"is_not",
+		"is_empty",
+		"is_not_empty"
+	],
+	date: [
+		"is",
+		"before",
+		"after",
+		"between",
+		"is_empty",
+		"is_not_empty"
+	],
+	array: [
+		"contains",
+		"does_not_contain",
+		"is_empty",
+		"is_not_empty"
+	],
+	tags_conditions: ["is"],
+	signals: ["is"],
+	date_range: ["is"]
+};
+/**
+* Numeric comparison operators. Together with `is` (is equal to) they give
+* `integer` and `float` fields greater-than / less-than / equal-to filtering.
+* Inclusive bounds are deliberately not offered: "at least 5" is
+* `gt 5` OR `is 5`, built with the Rules editor.
+*
+* They are opt-in rather than part of the default numeric vocabulary above:
+* a host whose backend serializes them lists them in the field's
+* `allowedOperators` (e.g. `['is', ...NUMERIC_COMPARISON_OPERATORS]`).
+* Adding them to the default vocabulary would surface operators in every
+* existing numeric field whose host can't serialize them.
+*/
+const NUMERIC_COMPARISON_OPERATORS = ["gt", "lt"];
+const NUMERIC_COMPARISON_OPERATOR_SET = new Set(NUMERIC_COMPARISON_OPERATORS);
+const NUMERIC_FIELD_TYPES = new Set(["integer", "float"]);
+function isNumericComparisonOperator(operator) {
+	return NUMERIC_COMPARISON_OPERATOR_SET.has(operator);
 }
 /**
-* Translates a drag result into indices into the full list. dnd reports positions among the
-* rendered rows, which diverge from the full list as soon as the view is filtered.
+* Whether a comparison value is complete for a numeric field: a finite
+* number, and a safe integer when the field is an `integer`. Strings are
+* rejected — the numeric value controls always emit numbers, so a string
+* here is a corrupted or hand-crafted rule the backend can't compare.
+*/
+function isCompleteNumericComparisonValue(value, fieldType) {
+	if (typeof value !== "number" || !Number.isFinite(value)) return false;
+	return fieldType === "integer" ? Number.isSafeInteger(value) : true;
+}
+/**
+* Carry `value` into a numeric comparison. Equality rules on numeric fields
+* tolerate strings (v1 URLs hydrate `'5'`), but a comparison is only complete
+* with a number, so a numeric string is converted — truncated on `integer`
+* fields, matching what `IntegerValueControl` emits — and anything else
+* becomes an empty draft rather than a committed rule validation rejects.
+*/
+function numericComparisonValue(value, fieldType) {
+	const parsed = typeof value === "number" ? value : typeof value === "string" && value.trim() !== "" ? Number(value) : NaN;
+	if (!Number.isFinite(parsed)) return "";
+	const normalized = fieldType === "integer" ? Math.trunc(parsed) : parsed;
+	return isCompleteNumericComparisonValue(normalized, fieldType) ? normalized : "";
+}
+/**
+* Whether `(fieldType, operator)` is a built-in numeric comparison — the
+* case validators and labels specialize. Comparisons on non-numeric types
+* (only reachable through `condition`) are not.
+*/
+function isNumericComparison(operator, fieldType) {
+	return fieldType != null && NUMERIC_FIELD_TYPES.has(fieldType) && isNumericComparisonOperator(operator);
+}
+/** Operators that have no value control (the operator itself is the predicate). */
+const VALUELESS_OPERATORS = new Set(["is_empty", "is_not_empty"]);
+/**
+* Operators whose value is a {@link DateRangeFilterValue} rather than the
+* scalar its field type would otherwise carry. The value control, the draft
+* seed, and every validator branch on this rather than on field type alone —
+* a `date` field carries an ISO day string for `is` / `before` / `after` and
+* a `{ startDate, endDate }` pair for `between`.
+*/
+const RANGE_OPERATORS = new Set(["between"]);
+const TIME_COMPONENT$1 = /T\d{2}:\d{2}/;
+function getOperatorsForType(type) {
+	return OPERATORS_BY_TYPE[type] ?? [];
+}
+/**
+* Effective operator vocabulary for a concrete field: its `allowedOperators`
+* allow-list, or the field type's full vocabulary when the allow-list is
+* absent or empty. An empty allow-list means "unconstrained" rather than
+* "no operators" — the latter would leave the field selectable in the picker
+* but incapable of producing a rule that passes validation.
 *
-* Returns null when either end cannot be resolved, in which case the drag should be ignored
-* rather than applied at the wrong position.
+* Prefer this over {@link getOperatorsForType} anywhere a real field is in
+* hand — the popover's operator dropdown, `FieldRegistry`, validation — so a
+* field can never surface an operator the host application can't serialize.
 */
-function resolveDragIndices(listKeys, renderedKeys, draggableId, destinationIndex) {
-	const destinationKey = renderedKeys[destinationIndex];
-	if (destinationKey == null) return null;
-	const from = listKeys.indexOf(draggableId);
-	const to = listKeys.indexOf(destinationKey);
-	return from === -1 || to === -1 ? null : {
-		from,
-		to
-	};
-}
-//#endregion
-//#region components/DataTable/TableControls/TableViewConfigurationDropdown.tsx
-const SHOWN_DROPPABLE_ID = "cases-view__configure-shown-columns";
-const startsCapitalized = (label) => {
-	const first = label.charAt(0);
-	return first !== "" && first === first.toUpperCase() && first !== first.toLowerCase();
-};
-const byLabel = (a, b) => {
-	const aCapitalized = startsCapitalized(a.label);
-	if (aCapitalized !== startsCapitalized(b.label)) return aCapitalized ? -1 : 1;
-	return a.label.localeCompare(b.label, void 0, { numeric: true });
-};
-const DndSection = styled("div")`
-  max-height: 400px;
-
-  overflow: scroll;
-  ::-webkit-scrollbar {
-    display: none;
-  }
-`;
-const DndItemWrapper = styled("div")`
-  background: white;
-  ${semanticOnly((tokens) => `background: ${tokens.SurfacePrimary};`)}
-  width: 100%;
-  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", theme.color.border.secondary)};
-  padding: ${Spacing[2]} ${Spacing[2]};
-
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: left;
-`;
-const SuffixContainer = styled("div")`
-  padding-left: ${Spacing[2]};
-  margin-left: auto;
-  align-self: center;
-`;
-const SearchContainer = styled.div`
-  display: flex;
-`;
-const StyledSearchInput = styled(SearchInput)`
-  width: 100%;
-`;
-const PopoverCard$1 = styled(Card_default)`
-  width: 300px;
-  padding: ${Spacing[4]};
-`;
-const TriggerIconButton = forwardRef(function TriggerIconButton({ disabled, ...elemProps }, ref) {
-	const strings = usePDSStrings();
-	return /* @__PURE__ */ jsx(Button, {
-		disabled,
-		width: "icon",
-		variant: "basic",
-		size: "md",
-		...elemProps,
-		ref,
-		"data-tour-target": "table-properties-button",
-		"aria-label": strings.tableProperties,
-		children: /* @__PURE__ */ jsx(SettingsIcon, {})
-	});
-});
-const TooltipButtonWrapper = styled("div")`
-  display: inline-block;
-`;
-const TableViewConfigurationDropdown = ({ disabled = false, disabledTooltipMessage, size = "md", variant = "basic", ...props }) => {
-	const strings = usePDSStrings();
-	return disabled ? /* @__PURE__ */ jsx(Tooltip, {
-		trigger: /* @__PURE__ */ jsx(TooltipButtonWrapper, { children: /* @__PURE__ */ jsx(TriggerIconButton, {
-			disabled: true,
-			size,
-			variant
-		}) }),
-		children: disabledTooltipMessage ?? strings.configureViewPermissionDenied
-	}) : /* @__PURE__ */ jsxs(Popover_default, { children: [/* @__PURE__ */ jsx(Popover_default.Trigger, {
-		asChild: true,
-		children: /* @__PURE__ */ jsx(TriggerIconButton, {
-			disabled: false,
-			size,
-			variant
-		})
-	}), /* @__PURE__ */ jsx(Popover_default.Content, {
-		style: { zIndex: Z_INDICES.dropdown },
-		sideOffset: 8,
-		side: "bottom",
-		align: "end",
-		children: /* @__PURE__ */ jsx(PopoverCard$1, {
-			elevated: true,
-			children: /* @__PURE__ */ jsx(TableViewConfiguration, { ...props })
-		})
-	})] });
-};
-const TableViewConfiguration = ({ columnConfiguration, attributeOptions, updateColumnConfiguration, getColumnDisabled, sortByRelevance = false }) => {
-	const strings = usePDSStrings();
-	const [searchTerm, setSearchTerm] = useState("");
-	const fuse = useMemo(() => {
-		return new Fuse(attributeOptions, sortByRelevance ? {
-			shouldSort: true,
-			threshold: .3,
-			ignoreLocation: true,
-			includeScore: true,
-			minMatchCharLength: 1,
-			keys: [{
-				name: "label",
-				weight: 1
-			}]
-		} : {
-			shouldSort: false,
-			threshold: .4,
-			location: 0,
-			distance: 100,
-			minMatchCharLength: 1,
-			keys: [{
-				name: "label",
-				weight: 1
-			}]
-		});
-	}, [attributeOptions, sortByRelevance]);
-	const allOptions = useMemo(() => union(attributeOptions, columnConfiguration), [attributeOptions, columnConfiguration]);
-	const filteredSearchOptions = useMemo(() => {
-		if (searchTerm === "") return allOptions;
-		const results = fuse.search(searchTerm);
-		if (!sortByRelevance) return results.map(({ item }) => item);
-		return [...results].sort((a, b) => (a.score ?? 0) - (b.score ?? 0) || byLabel(a.item, b.item)).map(({ item }) => item);
-	}, [
-		allOptions,
-		fuse,
-		searchTerm,
-		sortByRelevance
-	]);
-	const hiddenAttributes = useMemo(() => {
-		const columnConfigurationKeys = new Set(columnConfiguration.map((c) => c.key));
-		const hidden = filteredSearchOptions.filter((attribute) => !columnConfigurationKeys.has(attribute.key));
-		if (!sortByRelevance || searchTerm !== "") return hidden;
-		const [systemColumns, customFields] = partition(hidden, (a) => !a.isCustomField);
-		return [...systemColumns, ...[...customFields].sort(byLabel)];
-	}, [
-		columnConfiguration,
-		filteredSearchOptions,
-		sortByRelevance,
-		searchTerm
-	]);
-	const filteredShownAttributes = useMemo(() => {
-		return columnConfiguration.filter((column) => filteredSearchOptions.map((o) => o.key).includes(column.key));
-	}, [columnConfiguration, filteredSearchOptions]);
-	const handleDragEnd = (result, _provided) => {
-		const { destination, source } = result;
-		if (!destination || destination.droppableId === source.droppableId && destination.index === source.index) return;
-		const indices = resolveDragIndices(columnConfiguration.map((c) => c.key), filteredShownAttributes.map((c) => c.key), result.draggableId, destination.index);
-		if (!indices) return;
-		updateColumnConfiguration(reorder(columnConfiguration, indices.from, indices.to));
-	};
-	const generateShownAttributesToggle = (column) => () => {
-		updateColumnConfiguration(columnConfiguration.filter((a) => a.key !== column.key));
-	};
-	const generateHiddenAttributesToggle = (column) => () => {
-		updateColumnConfiguration(columnConfiguration.concat({
-			key: column.key,
-			label: column.label
-		}));
-	};
-	const shownColumnIds = useMemo(() => {
-		return columnConfiguration.map((c) => c.key);
-	}, [columnConfiguration]);
-	const shownDndItemProps = filteredShownAttributes.map((column, index) => {
-		const isDisabledByDefault = columnConfiguration.length === 1;
-		const isDisabledByCustom = getColumnDisabled?.(column.key, shownColumnIds) ?? false;
-		const shouldDisableDragForColumn = isDisabledByCustom && index === filteredShownAttributes.length - 1;
-		return {
-			column,
-			index,
-			isDisabled: isDisabledByDefault || isDisabledByCustom,
-			isToggled: true,
-			shouldDisableDrag: shouldDisableDragForColumn,
-			handleToggle: generateShownAttributesToggle(column)
-		};
-	});
-	const hiddenDndItemProps = hiddenAttributes.map((column, index) => {
-		return {
-			column,
-			index,
-			isToggled: false,
-			shouldDisableDrag: true,
-			handleToggle: generateHiddenAttributesToggle(column)
-		};
-	});
-	return /* @__PURE__ */ jsxs("div", { children: [
-		/* @__PURE__ */ jsx(Label$1, {
-			size: "lg",
-			weight: "bold",
-			children: strings.configureColumns
-		}),
-		/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
-		/* @__PURE__ */ jsx(SearchContainer, { children: /* @__PURE__ */ jsx(StyledSearchInput, {
-			title: null,
-			value: searchTerm,
-			handleInput: setSearchTerm,
-			size: "md",
-			placeholder: strings.searchColumns,
-			dataTest: "checklist-item-panel-item-table__search"
-		}) }),
-		/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
-		shownDndItemProps.length > 0 || hiddenDndItemProps.length > 0 ? /* @__PURE__ */ jsxs(DndSection, { children: [
-			shownDndItemProps.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Paragraph, { children: strings.shownColumns }), /* @__PURE__ */ jsx(DragDropContext, {
-				onDragEnd: handleDragEnd,
-				children: /* @__PURE__ */ jsx(Droppable, {
-					droppableId: SHOWN_DROPPABLE_ID,
-					renderClone: (provided, _snapshot, rubric) => {
-						return /* @__PURE__ */ jsx("div", {
-							...provided.draggableProps,
-							...provided.dragHandleProps,
-							ref: provided.innerRef,
-							children: /* @__PURE__ */ jsx(AttributeDnd, { ...shownDndItemProps[rubric.source.index] })
-						});
-					},
-					children: (provided) => {
-						return /* @__PURE__ */ jsxs("div", {
-							ref: provided.innerRef,
-							...provided.droppableProps,
-							children: [shownDndItemProps.map((props, idx) => {
-								return /* @__PURE__ */ jsx(Draggable, {
-									draggableId: props.column.key,
-									index: idx,
-									isDragDisabled: props.shouldDisableDrag,
-									children: (provided) => {
-										return /* @__PURE__ */ jsx("div", {
-											ref: provided.innerRef,
-											...provided.draggableProps,
-											...provided.dragHandleProps,
-											children: /* @__PURE__ */ jsx(AttributeDnd, { ...props })
-										});
-									}
-								}, `${props.column.key}`);
-							}), provided.placeholder]
-						});
-					}
-				})
-			})] }),
-			/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
-			hiddenDndItemProps.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Paragraph, { children: strings.hiddenColumns }), hiddenDndItemProps.map((props) => /* @__PURE__ */ jsx(AttributeDnd, { ...props }, props.column.key))] })
-		] }) : /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Paragraph, { children: strings.noMatchingColumns }) })
-	] });
-};
-const OverflowText = styled("div")`
-  max-width: 160px;
-  flex-wrap: wrap;
-  display: flex;
-`;
-const AttributeDnd = ({ column, index, isDisabled = false, isToggled, shouldDisableDrag, handleToggle }) => {
-	const strings = usePDSStrings();
-	return /* @__PURE__ */ jsxs(DndItemWrapper, { children: [
-		/* @__PURE__ */ jsx(StyledIconDrag, {
-			$active: true,
-			$shouldHide: shouldDisableDrag
-		}),
-		/* @__PURE__ */ jsx(OverflowText, { children: /* @__PURE__ */ jsx(Paragraph, {
-			color: "primary",
-			size: "sm",
-			children: column.label
-		}) }),
-		/* @__PURE__ */ jsx(SuffixContainer, { children: /* @__PURE__ */ jsx(Toggle, {
-			value: isToggled,
-			disabled: isDisabled,
-			onChange: handleToggle,
-			"aria-label": isToggled ? strings.hideColumn(column.label) : strings.showColumn(column.label)
-		}) })
-	] }, `${column.key}-${index}`);
-};
-//#endregion
-//#region components/DataTable/TableControls/TableControls.tsx
-const EMPTY_FILTERS = [];
-const resolveFilterArea = (filterPanel, configuredFilterPanel) => filterPanel ?? configuredFilterPanel;
-const hasNewFilterId = (currentIds, previousIds) => {
-	const previous = new Set(previousIds.split("\0").filter(Boolean));
-	return currentIds.split("\0").some((id) => id !== "" && !previous.has(id));
-};
-const TableControls = ({ filters = EMPTY_FILTERS, filterResolver, filterPanel, searchProps, defaultShowFilters, showFilters: controlledShowFilters, setShowFilters: controlledSetShowFilters, className, tableActions, propertiesButton, isLoading, isFilterPanelLoading, showViews, canEditViews, onSelectView, views, hiddenViewIds, currentView, onAddView, onViewNameChange, onReorderViews, onViewHiddenChange, onDuplicateView, onDeleteView, onSaveView, onSetDefaultView, onUnsetDefaultView, isViewDirty, selectedRows, bulkActions, onClearSelection, title, presetViews, compact, columnConfigurationProps, showFiltersAlways = false, onError, "data-tour-target": dataTourTarget }) => {
-	const filtersId = useId();
-	const enabledFilters = useMemo(() => filters.filter((filter) => filter.enabled !== false), [filters]);
-	const [activeFilters, setActiveFilters] = useState(() => getActiveFilters(enabledFilters, [], true, filterResolver));
-	const resolvedFilterPanel = resolveFilterArea(filterPanel, enabledFilters.length > 0 ? /* @__PURE__ */ jsx(TableControlsProvider, {
-		filters: enabledFilters,
-		activeFilters,
-		setActiveFilters,
-		children: /* @__PURE__ */ jsx(Filters, {
-			id: filtersId,
-			compact,
-			filterResolver
-		})
-	}) : void 0);
-	const [internalShowFilters, internalSetShowFilters] = useState(defaultShowFilters ?? (filterPanel == null && activeFilters.length > 0));
-	useEffect(() => {
-		setActiveFilters((current) => synchronizeActiveFilters(enabledFilters, current, filterResolver));
-	}, [enabledFilters, filterResolver]);
-	const activeFilterIds = enabledFilters.filter((filter) => isFilterActive(filter, filterResolver)).map((filter) => filter.id).sort().join("\0");
-	const configuredFilterIds = activeFilters.flatMap((filter) => filter.config ? [filter.config.id] : []).sort().join("\0");
-	const previousActiveFilterIds = useRef(activeFilterIds);
-	const previousConfiguredFilterIds = useRef(configuredFilterIds);
-	useEffect(() => {
-		const becameActive = hasNewFilterId(activeFilterIds, previousActiveFilterIds.current);
-		const newlyConfigured = hasNewFilterId(configuredFilterIds, previousConfiguredFilterIds.current);
-		previousActiveFilterIds.current = activeFilterIds;
-		previousConfiguredFilterIds.current = configuredFilterIds;
-		if (defaultShowFilters == null && filterPanel == null && (becameActive || newlyConfigured)) internalSetShowFilters(true);
-	}, [
-		activeFilterIds,
-		configuredFilterIds,
-		defaultShowFilters,
-		filterPanel
-	]);
-	const showFilters = controlledShowFilters != null ? controlledShowFilters : internalShowFilters;
-	const setShowFilters = controlledSetShowFilters != null ? controlledSetShowFilters : internalSetShowFilters;
-	const enhancedPropertiesButton = useMemo(() => {
-		if (!columnConfigurationProps && !propertiesButton) return;
-		const elements = [];
-		if (propertiesButton) elements.push(propertiesButton);
-		if (columnConfigurationProps) elements.push(/* @__PURE__ */ jsx(TableViewConfigurationDropdown, {
-			disabled: false,
-			...columnConfigurationProps
-		}, "column-config"));
-		if (elements.length === 1) return elements[0];
-		return /* @__PURE__ */ jsx(StyledEnhancedPropertiesButton, { children: elements });
-	}, [columnConfigurationProps, propertiesButton]);
-	return /* @__PURE__ */ jsx(Container, {
-		className,
-		children: /* @__PURE__ */ jsx(ControlBar, {
-			showViews: compact ? false : showViews,
-			views: compact ? void 0 : views,
-			hiddenViewIds: compact ? void 0 : hiddenViewIds,
-			onSelectView: compact ? void 0 : onSelectView,
-			currentView: compact ? void 0 : currentView,
-			onAddView: compact ? void 0 : onAddView,
-			onDeleteView: compact ? void 0 : onDeleteView,
-			onDuplicateView: compact ? void 0 : onDuplicateView,
-			onViewNameChange: compact ? void 0 : onViewNameChange,
-			onReorderViews: compact ? void 0 : onReorderViews,
-			onViewHiddenChange: compact ? void 0 : onViewHiddenChange,
-			onSaveView: compact ? void 0 : onSaveView,
-			...!compact && onSetDefaultView ? {
-				onSetDefaultView,
-				onUnsetDefaultView
-			} : {
-				onSetDefaultView: void 0,
-				onUnsetDefaultView: void 0
-			},
-			isViewDirty,
-			canEditViews: compact ? false : canEditViews,
-			showFilters: showFilters && (showFiltersAlways || !isFilterPanelLoading),
-			setShowFilters: (resolvedFilterPanel != null || isFilterPanelLoading) && !showFiltersAlways ? setShowFilters : void 0,
-			filtersId,
-			searchProps,
-			propertiesButton: enhancedPropertiesButton,
-			tableActions,
-			isLoading,
-			isFilterPanelLoading,
-			selectedRows,
-			bulkActions,
-			onClearSelection,
-			title,
-			"data-tour-target": dataTourTarget,
-			presetViews: compact ? void 0 : presetViews,
-			compact,
-			onError,
-			filterPanel: resolvedFilterPanel
-		})
-	});
-};
-const Container = styled(Stack)`
-  margin-bottom: ${Spacing[2]};
-`;
-const StyledEnhancedPropertiesButton = styled.div`
-  display: flex;
-  gap: ${Spacing[1]};
-`;
-//#endregion
-//#region components/DataTable/TableControls/FiltersV2/date-rule-intent.ts
-function dateRuleIntent(change, writesEnabled) {
-	if (change.source === "clear") return { kind: "clear" };
-	if (change.source === "calendar" || !writesEnabled) return change.range == null ? { kind: "clear" } : {
-		kind: "absolute",
-		range: change.range
-	};
-	return {
-		kind: "relative",
-		preset: change.preset,
-		range: change.range
-	};
-}
-//#endregion
-//#region components/DataTable/TableControls/FiltersV2/operators.ts
-/**
-* Operator vocabulary per field type. The UI uses this to populate the
-* operator dropdown in the Filter popover and to gate which operators are
-* reachable for a given field. `is_empty` / `is_not_empty` apply broadly;
-* everything else is type-specific.
-*
-* The first entry for each type is the default operator selected when a
-* pill is created from the picker.
-*/
-const OPERATORS_BY_TYPE = {
-	string: [
-		"is",
-		"is_not",
-		"contains",
-		"does_not_contain",
-		"is_empty",
-		"is_not_empty"
-	],
-	email: [
-		"is",
-		"is_not",
-		"contains",
-		"does_not_contain",
-		"is_empty",
-		"is_not_empty"
-	],
-	choices: [
-		"is",
-		"is_not",
-		"is_empty",
-		"is_not_empty"
-	],
-	multi_choices: [
-		"is",
-		"is_not",
-		"is_empty",
-		"is_not_empty"
-	],
-	boolean: ["is"],
-	integer: [
-		"is",
-		"is_not",
-		"is_empty",
-		"is_not_empty"
-	],
-	float: [
-		"is",
-		"is_not",
-		"is_empty",
-		"is_not_empty"
-	],
-	date: [
-		"is",
-		"before",
-		"after",
-		"between",
-		"is_empty",
-		"is_not_empty"
-	],
-	array: [
-		"contains",
-		"does_not_contain",
-		"is_empty",
-		"is_not_empty"
-	],
-	tags_conditions: ["is"],
-	signals: ["is"],
-	date_range: ["is"]
-};
-/**
-* Numeric comparison operators. Together with `is` (is equal to) they give
-* `integer` and `float` fields greater-than / less-than / equal-to filtering.
-* Inclusive bounds are deliberately not offered: "at least 5" is
-* `gt 5` OR `is 5`, built with the Rules editor.
-*
-* They are opt-in rather than part of the default numeric vocabulary above:
-* a host whose backend serializes them lists them in the field's
-* `allowedOperators` (e.g. `['is', ...NUMERIC_COMPARISON_OPERATORS]`).
-* Adding them to the default vocabulary would surface operators in every
-* existing numeric field whose host can't serialize them.
-*/
-const NUMERIC_COMPARISON_OPERATORS = ["gt", "lt"];
-const NUMERIC_COMPARISON_OPERATOR_SET = new Set(NUMERIC_COMPARISON_OPERATORS);
-const NUMERIC_FIELD_TYPES = new Set(["integer", "float"]);
-function isNumericComparisonOperator(operator) {
-	return NUMERIC_COMPARISON_OPERATOR_SET.has(operator);
-}
-/**
-* Whether a comparison value is complete for a numeric field: a finite
-* number, and a safe integer when the field is an `integer`. Strings are
-* rejected — the numeric value controls always emit numbers, so a string
-* here is a corrupted or hand-crafted rule the backend can't compare.
-*/
-function isCompleteNumericComparisonValue(value, fieldType) {
-	if (typeof value !== "number" || !Number.isFinite(value)) return false;
-	return fieldType === "integer" ? Number.isSafeInteger(value) : true;
-}
-/**
-* Carry `value` into a numeric comparison. Equality rules on numeric fields
-* tolerate strings (v1 URLs hydrate `'5'`), but a comparison is only complete
-* with a number, so a numeric string is converted — truncated on `integer`
-* fields, matching what `IntegerValueControl` emits — and anything else
-* becomes an empty draft rather than a committed rule validation rejects.
-*/
-function numericComparisonValue(value, fieldType) {
-	const parsed = typeof value === "number" ? value : typeof value === "string" && value.trim() !== "" ? Number(value) : NaN;
-	if (!Number.isFinite(parsed)) return "";
-	const normalized = fieldType === "integer" ? Math.trunc(parsed) : parsed;
-	return isCompleteNumericComparisonValue(normalized, fieldType) ? normalized : "";
-}
-/**
-* Whether `(fieldType, operator)` is a built-in numeric comparison — the
-* case validators and labels specialize. Comparisons on non-numeric types
-* (only reachable through `condition`) are not.
-*/
-function isNumericComparison(operator, fieldType) {
-	return fieldType != null && NUMERIC_FIELD_TYPES.has(fieldType) && isNumericComparisonOperator(operator);
-}
-/** Operators that have no value control (the operator itself is the predicate). */
-const VALUELESS_OPERATORS = new Set(["is_empty", "is_not_empty"]);
-/**
-* Operators whose value is a {@link DateRangeFilterValue} rather than the
-* scalar its field type would otherwise carry. The value control, the draft
-* seed, and every validator branch on this rather than on field type alone —
-* a `date` field carries an ISO day string for `is` / `before` / `after` and
-* a `{ startDate, endDate }` pair for `between`.
-*/
-const RANGE_OPERATORS = new Set(["between"]);
-const TIME_COMPONENT$1 = /T\d{2}:\d{2}/;
-function getOperatorsForType(type) {
-	return OPERATORS_BY_TYPE[type] ?? [];
-}
-/**
-* Effective operator vocabulary for a concrete field: its `allowedOperators`
-* allow-list, or the field type's full vocabulary when the allow-list is
-* absent or empty. An empty allow-list means "unconstrained" rather than
-* "no operators" — the latter would leave the field selectable in the picker
-* but incapable of producing a rule that passes validation.
-*
-* Prefer this over {@link getOperatorsForType} anywhere a real field is in
-* hand — the popover's operator dropdown, `FieldRegistry`, validation — so a
-* field can never surface an operator the host application can't serialize.
-*/
-function getOperatorsForField(field) {
-	if (field.condition != null) return field.condition.operators.map(({ operator }) => operator);
-	const { allowedOperators } = field;
-	if (allowedOperators == null || allowedOperators.length === 0) return getOperatorsForType(field.type);
-	return allowedOperators;
+function getOperatorsForField(field) {
+	if (field.condition != null) return field.condition.operators.map(({ operator }) => operator);
+	const { allowedOperators } = field;
+	if (allowedOperators == null || allowedOperators.length === 0) return getOperatorsForType(field.type);
+	return allowedOperators;
 }
 function getDefaultOperatorForType(type) {
 	const list = OPERATORS_BY_TYPE[type];
@@ -2291,25 +1887,6 @@ function reconcileValueForOperator(field, nextOperator, previousOperator, value)
 	return value ?? emptyValueForRule(field, nextOperator);
 }
 //#endregion
-//#region components/DataTable/TableControls/FiltersV2/date-range-rule-value.ts
-/**
-* The absolute bounds a rule should be queried with, or `null` when it does not
-* carry a date range.
-*
-* Relative metadata wins over the stored snapshot: the snapshot is a picture of
-* the window when it was saved, and the point of a relative rule is that the
-* window moves. The operator gate is part of this rather than the caller's job —
-* metadata only ever describes a range, so resolving it onto a scalar rule
-* would put a `{ startDate, endDate }` object where the wire expects a day.
-*/
-function resolveDateRangeRuleValue(rule, fieldType) {
-	if (!carriesDateRange(rule.operator, fieldType)) return null;
-	const relative = parseDateFilterValue(rule.relativeDate);
-	if (relative?.kind === "relative") return resolveDateFilterValue(relative);
-	const parsed = parseDateFilterValue(rule.value);
-	return parsed ? resolveDateFilterValue(parsed) : null;
-}
-//#endregion
 //#region components/DataTable/TableControls/FiltersV2/format-date-value.ts
 const TIME_COMPONENT = /T\d{2}:\d{2}/;
 /**
@@ -2738,7 +2315,7 @@ const FILTER_SIZE_TOKENS = {
 const PopoverContent = styled(PopoverPrimitive.Content)`
   z-index: ${Z_INDICES.modalDropdown};
 `;
-const PopoverCard = styled(Card_default)`
+const PopoverCard$1 = styled(Card_default)`
   width: ${({ $wide }) => $wide ? "520px" : "384px"};
   max-width: calc(100vw - ${Spacing[4]});
   margin-bottom: 0;
@@ -2972,7 +2549,7 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 				event.preventDefault();
 				handleOpenChange(false);
 			},
-			children: /* @__PURE__ */ jsxs(PopoverCard, {
+			children: /* @__PURE__ */ jsxs(PopoverCard$1, {
 				elevated: true,
 				$wide: wide,
 				children: [/* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(Paragraph, {
@@ -3264,6 +2841,20 @@ function ChoicesValueControl({ field, operator, value, onChange, onCommit, ariaL
 	});
 }
 //#endregion
+//#region components/DataTable/TableControls/FiltersV2/date-rule-intent.ts
+function dateRuleIntent(change, writesEnabled) {
+	if (change.source === "clear") return { kind: "clear" };
+	if (change.source === "calendar" || !writesEnabled) return change.range == null ? { kind: "clear" } : {
+		kind: "absolute",
+		range: change.range
+	};
+	return {
+		kind: "relative",
+		preset: change.preset,
+		range: change.range
+	};
+}
+//#endregion
 //#region components/DataTable/TableControls/FiltersV2/value-controls/DateRangeValueControl/DateRangeValueControl.tsx
 const CALENDAR_DATE = /^(\d{4}-\d{2}-\d{2})/;
 const DATE_ONLY$1 = /^\d{4}-\d{2}-\d{2}$/;
@@ -4500,722 +4091,1182 @@ function isFilterRuleValue(value) {
 	return false;
 }
 /**
-* Strip rules referencing unregistered `fieldId`s from a decoded state.
-* Pairs with `isFilterStateV2` for defense-in-depth: even after the
-* shape guard passes, a rule with a `fieldId` that doesn't exist in the
-* current resource's registry would silently render nothing in the UI
-* but still reach the adapter and ship to the backend. Pruning closes
-* that gap.
-*
-* Empty AND-groups created by pruning are also dropped, since the
-* adapter prunes them on serialize anyway and the editor UI hides
-* empty groups too.
-*
-* Skips its own work and returns the input unchanged when `registry`
-* is `undefined` — useful for callers that hydrate before the registry
-* is built.
-*
-* For valueless operators (`is_empty`, etc.) the value contract is
-* `null`. Non-valueless operators keep in-progress draft values (an empty
-* string / empty array) so a pill the user is mid-editing survives the
-* report/hydrate round-trip and stays visible — top-level and compound
-* rules are treated alike here, and the serialize boundary
-* (`hasCompleteValue`) is what drops incomplete rules from the request.
+* Strip rules referencing unregistered `fieldId`s from a decoded state.
+* Pairs with `isFilterStateV2` for defense-in-depth: even after the
+* shape guard passes, a rule with a `fieldId` that doesn't exist in the
+* current resource's registry would silently render nothing in the UI
+* but still reach the adapter and ship to the backend. Pruning closes
+* that gap.
+*
+* Empty AND-groups created by pruning are also dropped, since the
+* adapter prunes them on serialize anyway and the editor UI hides
+* empty groups too.
+*
+* Skips its own work and returns the input unchanged when `registry`
+* is `undefined` — useful for callers that hydrate before the registry
+* is built.
+*
+* For valueless operators (`is_empty`, etc.) the value contract is
+* `null`. Non-valueless operators keep in-progress draft values (an empty
+* string / empty array) so a pill the user is mid-editing survives the
+* report/hydrate round-trip and stays visible — top-level and compound
+* rules are treated alike here, and the serialize boundary
+* (`hasCompleteValue`) is what drops incomplete rules from the request.
+*/
+function pruneToRegistry(state, registry) {
+	if (!registry) return state;
+	const coerced = coerceBooleanRules(state, registry);
+	return {
+		topLevelRules: coerced.topLevelRules.filter((rule) => isRuleAllowed(rule, registry, { allowDraftValues: true })),
+		compound: { groups: coerced.compound.groups.map((group) => ({ rules: group.rules.filter((rule) => isRuleAllowed(rule, registry, { allowDraftValues: true })) })).filter((group) => group.rules.length > 0) }
+	};
+}
+/**
+* Normalizes boolean-field rules into the in-memory contract the new UI
+* and adapter expect — `is` / `is_not` + a real boolean `value`. Two
+* legacy shapes are coerced, both only for rules whose registered field
+* type is `boolean`:
+*
+* - Pre–value-control rules using the `is_true` / `is_false` operators
+*   (from saved views) become `is` + boolean `value` so they survive
+*   operator-vocabulary pruning and render in the new UI.
+* - v1-URL bookmarks hydrate query params as strings, so
+*   `filter[custom][active]=true` arrives as `{ operator: 'is', value:
+*   'true' }`. The string is coerced back to a boolean so the adapter
+*   emits the legacy `is_true` / `is_false` wire operator instead of
+*   shipping the raw string (which would break old boolean bookmarks).
+*   Non-`'true'`/`'false'` strings are left as-is and dropped later by
+*   `isRuleAllowed`.
+*/
+function coerceBooleanRule(rule, registry) {
+	const field = registry.get(rule.fieldId);
+	if (!field || field.condition != null || field.type !== "boolean") return rule;
+	if (rule.operator === "is_true") return {
+		...rule,
+		operator: "is",
+		value: true
+	};
+	if (rule.operator === "is_false") return {
+		...rule,
+		operator: "is",
+		value: false
+	};
+	if (rule.operator === "is" || rule.operator === "is_not") {
+		if (rule.value === "true") return {
+			...rule,
+			value: true
+		};
+		if (rule.value === "false") return {
+			...rule,
+			value: false
+		};
+	}
+	return rule;
+}
+function coerceBooleanRules(state, registry) {
+	return {
+		topLevelRules: state.topLevelRules.map((r) => coerceBooleanRule(r, registry)),
+		compound: { groups: state.compound.groups.map((g) => ({ rules: g.rules.map((r) => coerceBooleanRule(r, registry)) })) }
+	};
+}
+function isDraftRuleValue(rule, registry) {
+	const field = registry.get(rule.fieldId);
+	if (!field) return false;
+	const config = getConditionOperator(field, rule.operator);
+	if (config != null) switch (config.valueType) {
+		case "none":
+		case "boolean": return false;
+		case "string_array": return Array.isArray(rule.value) && rule.value.length === 0;
+		default: return rule.value === "" || rule.value == null;
+	}
+	if (isValuelessOperator(rule.operator)) return false;
+	if (isRangeOperator(rule.operator)) return !isCompleteDateRange(rule.value);
+	switch (field.type) {
+		case "multi_choices":
+		case "tags_conditions":
+		case "signals": return Array.isArray(rule.value) && rule.value.length === 0;
+		case "date": return rule.value === "" || rule.value == null;
+		case "date_range": return false;
+		case "boolean": return false;
+		default: return rule.value === "" || rule.value == null;
+	}
+}
+function isRuleAllowed(rule, registry, options = { allowDraftValues: false }) {
+	const field = registry.get(rule.fieldId);
+	if (field == null) return false;
+	if (!registry.operatorsFor(rule.fieldId).includes(rule.operator)) return false;
+	if (field.condition != null) return hasCompleteConditionValue(rule, field) || options.allowDraftValues && isDraftRuleValue(rule, registry);
+	if (isValuelessOperator(rule.operator)) return rule.value == null;
+	if (options.allowDraftValues && isDraftRuleValue(rule, registry)) return true;
+	if (isRangeOperator(rule.operator)) return isCompleteDateRange(rule.value);
+	if (isNumericComparison(rule.operator, field.type)) return isCompleteNumericComparisonValue(rule.value, field.type);
+	if (registry.get(rule.fieldId)?.type === "boolean") return typeof rule.value === "boolean";
+	if (registry.get(rule.fieldId)?.type === "date") return typeof rule.value === "string" && rule.value.length > 0;
+	if (registry.get(rule.fieldId)?.type === "multi_choices") {
+		if (Array.isArray(rule.value)) return rule.value.length > 0;
+		return typeof rule.value === "string" && rule.value.length > 0;
+	}
+	if (registry.get(rule.fieldId)?.type === "date_range") return isCompleteDateRange(rule.value);
+	const conditionGroupType = registry.get(rule.fieldId)?.type;
+	if (conditionGroupType === "tags_conditions" || conditionGroupType === "signals") return Array.isArray(rule.value) && rule.value.length > 0;
+	return rule.value != null && typeof rule.value !== "boolean";
+}
+/**
+* Whether `rule` carries a complete value for its field type — the
+* serialize-boundary predicate `pruneEmptyRulesForSerialize` uses to drop
+* half-edited rules from the request (a value-requiring operator like
+* `is_not` with no value yet makes the backend reject the whole request).
+*
+* Deliberately stricter than `isRuleAllowed`'s hydration policy, which keeps
+* an empty string so an in-progress pill survives the state round-trip and
+* stays visible for the user to finish. Checks value completeness only — it
+* does not gate operator vocabulary or registry membership.
+*/
+function hasCompleteValue(rule, registry) {
+	const field = registry.get(rule.fieldId);
+	if (field?.condition != null) return hasCompleteConditionValue(rule, field);
+	if (isValuelessOperator(rule.operator)) return rule.value == null;
+	const { value } = rule;
+	if (value == null) return false;
+	if (isRangeOperator(rule.operator)) return isCompleteDateRange(value);
+	if (field != null && isNumericComparison(rule.operator, field.type)) return isCompleteNumericComparisonValue(value, field.type);
+	switch (registry.get(rule.fieldId)?.type) {
+		case "boolean": return typeof value === "boolean";
+		case "date": return typeof value === "string" && value.length > 0;
+		case "multi_choices": return Array.isArray(value) ? value.length > 0 : typeof value === "string" && value.length > 0;
+		case "tags_conditions":
+		case "signals": return Array.isArray(value) && value.length > 0;
+		case "date_range": return isCompleteDateRange(value);
+		default:
+			if (typeof value === "string") return value.length > 0;
+			if (Array.isArray(value)) return value.length > 0;
+			return typeof value !== "boolean";
+	}
+}
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/useFilterStateV2.ts
+const nextRuleId = () => `top-rule-${v4()}`;
+/**
+* Owns `FilterStateV2` for a filter surface and exposes a small mutator API.
+*
+* When `advancedRulesEnabled` is false, `compound.groups` is forced to
+* `[]`.
+*
+* Putting that invariant here (rather than in the components) keeps
+* `TableControls/FiltersV2` callers from accidentally leaking compound state when
+* the owning view has opted out.
+*
+* The mutator surface is deliberately small: top-level rules get
+* upsert/remove, the compound expression gets whole-value writes. That
+* matches how the UI emits changes — simple pills mutate one rule at a
+* time; the rules popover always emits a full compound expression as
+* one `onChange`.
+*
+* A pill the user has picked but not yet valued is held by the bar rather
+* than committed. Which pills those are is recorded when the picker mints
+* them rather than inferred: they are never reported, so incoming state never
+* describes one and hydration has nothing to reconcile against them. They
+* stay in the same row as the committed pills, so giving one a value doesn't
+* move it.
+*/
+function useFilterStateV2(options) {
+	const { initialState = EMPTY_FILTER_STATE, advancedRulesEnabled = true, registry } = options;
+	const [internal, setInternal] = useState(() => ({
+		all: pruneToRegistry(initialState, registry),
+		heldIds: /* @__PURE__ */ new Set()
+	}));
+	const { all, heldIds } = internal;
+	const lastHydratedState = useRef(all);
+	useEffect(() => {
+		const nextHydratedState = pruneToRegistry(initialState, registry);
+		const hydrate = !isEqual(nextHydratedState, lastHydratedState.current);
+		if (hydrate) lastHydratedState.current = nextHydratedState;
+		setInternal((prev) => {
+			const pruned = pruneHeldRules(prev, registry);
+			return hydrate ? withHeldRules(nextHydratedState, pruned) : pruned;
+		});
+	}, [initialState, registry]);
+	const state = useMemo(() => enforceAdvancedRulesEnabled(all, advancedRulesEnabled), [all, advancedRulesEnabled]);
+	return {
+		state,
+		committedState: useMemo(() => heldIds.size === 0 ? state : {
+			...state,
+			topLevelRules: state.topLevelRules.filter((rule) => !heldIds.has(rule.id))
+		}, [state, heldIds]),
+		advancedRulesEnabled,
+		setState: useCallback((next) => {
+			setInternal({
+				all: pruneToRegistry(next, registry),
+				heldIds: /* @__PURE__ */ new Set()
+			});
+		}, [registry]),
+		setCompound: useCallback((compound) => {
+			setInternal((prev) => ({
+				...prev,
+				all: {
+					...prev.all,
+					compound
+				}
+			}));
+		}, []),
+		reset: useCallback(() => {
+			setInternal({
+				all: {
+					topLevelRules: [],
+					compound: { groups: [] }
+				},
+				heldIds: /* @__PURE__ */ new Set()
+			});
+		}, []),
+		addTopLevelRule: useCallback((rule) => {
+			const id = nextRuleId();
+			const added = {
+				...rule,
+				id
+			};
+			setInternal((prev) => ({
+				all: {
+					...prev.all,
+					topLevelRules: [...prev.all.topLevelRules, added]
+				},
+				heldIds: registry.get(rule.fieldId)?.condition != null || isHeldRule(added, registry) ? withId(prev.heldIds, id) : prev.heldIds
+			}));
+			return id;
+		}, [registry]),
+		updateTopLevelRule: useCallback((id, update) => {
+			setInternal((prev) => {
+				const idx = prev.all.topLevelRules.findIndex((r) => r.id === id);
+				const currentRule = prev.all.topLevelRules[idx];
+				if (currentRule == null) return prev;
+				const rule = typeof update === "function" ? update(currentRule) : update;
+				const topLevelRules = [...prev.all.topLevelRules];
+				topLevelRules[idx] = {
+					...rule,
+					id
+				};
+				const heldIds = isHeldRule(rule, registry) ? withId(prev.heldIds, id) : withoutId(prev.heldIds, id);
+				return {
+					all: {
+						...prev.all,
+						topLevelRules
+					},
+					heldIds
+				};
+			});
+		}, [registry]),
+		removeTopLevelRule: useCallback((id) => {
+			setInternal((prev) => {
+				const topLevelRules = prev.all.topLevelRules.filter((r) => r.id !== id);
+				if (topLevelRules.length === prev.all.topLevelRules.length) return prev;
+				return {
+					all: {
+						...prev.all,
+						topLevelRules
+					},
+					heldIds: prev.heldIds.has(id) ? withoutId(prev.heldIds, id) : prev.heldIds
+				};
+			});
+		}, [])
+	};
+}
+/**
+* A pill the picker minted that has no value yet. `null` and not "empty":
+* `''` and `[]` are values a user can choose, and a filter cleared to one is
+* still a filter.
 */
-function pruneToRegistry(state, registry) {
-	if (!registry) return state;
-	const coerced = coerceBooleanRules(state, registry);
-	return {
-		topLevelRules: coerced.topLevelRules.filter((rule) => isRuleAllowed(rule, registry, { allowDraftValues: true })),
-		compound: { groups: coerced.compound.groups.map((group) => ({ rules: group.rules.filter((rule) => isRuleAllowed(rule, registry, { allowDraftValues: true })) })).filter((group) => group.rules.length > 0) }
-	};
+function isHeldRule(rule, registry) {
+	if (registry.get(rule.fieldId)?.condition != null) return !hasCompleteValue(rule, registry);
+	return !isValuelessOperator(rule.operator) && rule.value == null;
+}
+function heldRulesOf(state) {
+	return state.heldIds.size === 0 ? [] : state.all.topLevelRules.filter((rule) => state.heldIds.has(rule.id));
 }
 /**
-* Normalizes boolean-field rules into the in-memory contract the new UI
-* and adapter expect — `is` / `is_not` + a real boolean `value`. Two
-* legacy shapes are coerced, both only for rules whose registered field
-* type is `boolean`:
-*
-* - Pre–value-control rules using the `is_true` / `is_false` operators
-*   (from saved views) become `is` + boolean `value` so they survive
-*   operator-vocabulary pruning and render in the new UI.
-* - v1-URL bookmarks hydrate query params as strings, so
-*   `filter[custom][active]=true` arrives as `{ operator: 'is', value:
-*   'true' }`. The string is coerced back to a boolean so the adapter
-*   emits the legacy `is_true` / `is_false` wire operator instead of
-*   shipping the raw string (which would break old boolean bookmarks).
-*   Non-`'true'`/`'false'` strings are left as-is and dropped later by
-*   `isRuleAllowed`.
+* Lays incoming committed rules into the row, keeping the held pills where the
+* user left them: a held pill goes back after however many committed rules
+* preceded it before. An id the incoming state now uses is the parent's, so the
+* held pill of that id gives way rather than duplicating it.
 */
-function coerceBooleanRule(rule, registry) {
-	const field = registry.get(rule.fieldId);
-	if (!field || field.condition != null || field.type !== "boolean") return rule;
-	if (rule.operator === "is_true") return {
-		...rule,
-		operator: "is",
-		value: true
+function withHeldRules(committed, prev) {
+	if (prev.heldIds.size === 0) return {
+		all: committed,
+		heldIds: prev.heldIds
 	};
-	if (rule.operator === "is_false") return {
-		...rule,
-		operator: "is",
-		value: false
+	const incoming = committed.topLevelRules;
+	const incomingIds = new Set(incoming.map((rule) => rule.id));
+	const topLevelRules = [];
+	const heldIds = /* @__PURE__ */ new Set();
+	let taken = 0;
+	let committedBefore = 0;
+	prev.all.topLevelRules.forEach((rule) => {
+		if (!prev.heldIds.has(rule.id)) {
+			committedBefore += 1;
+			return;
+		}
+		if (incomingIds.has(rule.id)) return;
+		while (taken < committedBefore && taken < incoming.length) {
+			topLevelRules.push(incoming[taken]);
+			taken += 1;
+		}
+		topLevelRules.push(rule);
+		heldIds.add(rule.id);
+	});
+	if (heldIds.size === 0) return {
+		all: committed,
+		heldIds
 	};
-	if (rule.operator === "is" || rule.operator === "is_not") {
-		if (rule.value === "true") return {
-			...rule,
-			value: true
-		};
-		if (rule.value === "false") return {
-			...rule,
-			value: false
-		};
+	while (taken < incoming.length) {
+		topLevelRules.push(incoming[taken]);
+		taken += 1;
 	}
-	return rule;
+	return {
+		all: {
+			...committed,
+			topLevelRules
+		},
+		heldIds
+	};
 }
-function coerceBooleanRules(state, registry) {
+/**
+* Drops held pills whose field or operator the registry no longer supports,
+* preserving the state's identity when there are none so an unchanged registry
+* can't loop the effect.
+*/
+function pruneHeldRules(state, registry) {
+	const droppedIds = new Set(heldRulesOf(state).filter((rule) => !registry.has(rule.fieldId) || !registry.operatorsFor(rule.fieldId).includes(rule.operator)).map((rule) => rule.id));
+	if (droppedIds.size === 0) return state;
+	const heldIds = new Set(state.heldIds);
+	droppedIds.forEach((id) => heldIds.delete(id));
 	return {
-		topLevelRules: state.topLevelRules.map((r) => coerceBooleanRule(r, registry)),
-		compound: { groups: state.compound.groups.map((g) => ({ rules: g.rules.map((r) => coerceBooleanRule(r, registry)) })) }
+		all: {
+			...state.all,
+			topLevelRules: state.all.topLevelRules.filter((rule) => !droppedIds.has(rule.id))
+		},
+		heldIds
 	};
 }
-function isDraftRuleValue(rule, registry) {
-	const field = registry.get(rule.fieldId);
-	if (!field) return false;
-	const config = getConditionOperator(field, rule.operator);
-	if (config != null) switch (config.valueType) {
-		case "none":
-		case "boolean": return false;
-		case "string_array": return Array.isArray(rule.value) && rule.value.length === 0;
-		default: return rule.value === "" || rule.value == null;
-	}
-	if (isValuelessOperator(rule.operator)) return false;
-	if (isRangeOperator(rule.operator)) return !isCompleteDateRange(rule.value);
-	switch (field.type) {
-		case "multi_choices":
-		case "tags_conditions":
-		case "signals": return Array.isArray(rule.value) && rule.value.length === 0;
-		case "date": return rule.value === "" || rule.value == null;
-		case "date_range": return false;
-		case "boolean": return false;
-		default: return rule.value === "" || rule.value == null;
-	}
+function withId(ids, id) {
+	return ids.has(id) ? ids : new Set(ids).add(id);
 }
-function isRuleAllowed(rule, registry, options = { allowDraftValues: false }) {
-	const field = registry.get(rule.fieldId);
-	if (field == null) return false;
-	if (!registry.operatorsFor(rule.fieldId).includes(rule.operator)) return false;
-	if (field.condition != null) return hasCompleteConditionValue(rule, field) || options.allowDraftValues && isDraftRuleValue(rule, registry);
-	if (isValuelessOperator(rule.operator)) return rule.value == null;
-	if (options.allowDraftValues && isDraftRuleValue(rule, registry)) return true;
-	if (isRangeOperator(rule.operator)) return isCompleteDateRange(rule.value);
-	if (isNumericComparison(rule.operator, field.type)) return isCompleteNumericComparisonValue(rule.value, field.type);
-	if (registry.get(rule.fieldId)?.type === "boolean") return typeof rule.value === "boolean";
-	if (registry.get(rule.fieldId)?.type === "date") return typeof rule.value === "string" && rule.value.length > 0;
-	if (registry.get(rule.fieldId)?.type === "multi_choices") {
-		if (Array.isArray(rule.value)) return rule.value.length > 0;
-		return typeof rule.value === "string" && rule.value.length > 0;
-	}
-	if (registry.get(rule.fieldId)?.type === "date_range") return isCompleteDateRange(rule.value);
-	const conditionGroupType = registry.get(rule.fieldId)?.type;
-	if (conditionGroupType === "tags_conditions" || conditionGroupType === "signals") return Array.isArray(rule.value) && rule.value.length > 0;
-	return rule.value != null && typeof rule.value !== "boolean";
+function withoutId(ids, id) {
+	if (!ids.has(id)) return ids;
+	const next = new Set(ids);
+	next.delete(id);
+	return next;
+}
+function enforceAdvancedRulesEnabled(state, advancedRulesEnabled) {
+	if (advancedRulesEnabled) return state;
+	if (state.compound.groups.length === 0) return state;
+	return {
+		...state,
+		compound: { groups: [] }
+	};
 }
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/FilterBar/FilterBar.tsx
+const Bar = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${Spacing[2]};
+  flex-wrap: nowrap;
+  min-width: 0;
+  padding: ${Spacing[2]} 0;
+`;
+const SCROLL_FADE_WIDTH = 48;
+const SCROLL_SETTLE_FALLBACK_MS = 400;
+const POPOVER_CLOSE_BUFFER_PX = 8;
+const PILL_FOCUS_RING_SPACE = 3;
+/**
+* Builds the `mask-image` gradient that fades the scroll track's edges.
+*
+* A `mask-image` (rather than a same-colored overlay painted on top) fades
+* the track's *entire rendered output* — pill backgrounds, borders, and any
+* focus ring that bleeds into the padding above — because masking
+* composites against the real pixels the element paints, instead of
+* relying on an opaque sibling layer to visually cover them. An overlay
+* approach only hides whatever happens to sit below it in paint order;
+* a mask fades everything, including outlines.
+*/
+const buildEdgeMaskImage = (showLeftFade, showRightFade) => {
+	return `linear-gradient(to right, ${showLeftFade ? `transparent 0, black ${SCROLL_FADE_WIDTH}px` : "black 0"}, ${showRightFade ? `black calc(100% - ${SCROLL_FADE_WIDTH}px), transparent 100%` : "black 100%"})`;
+};
+const PillsScrollRegion = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${Spacing[1]};
+  flex: 0 1 auto;
+  min-width: 0;
+  width: max-content;
+  max-width: 100%;
+`;
+const PillsScrollTrack = styled.div`
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  flex-wrap: nowrap;
+  gap: ${Spacing[1]};
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  padding: ${PILL_FOCUS_RING_SPACE}px;
+  margin: -${PILL_FOCUS_RING_SPACE}px;
+  -webkit-mask-image: ${({ $showLeftFade, $showRightFade }) => buildEdgeMaskImage($showLeftFade, $showRightFade)};
+  mask-image: ${({ $showLeftFade, $showRightFade }) => buildEdgeMaskImage($showLeftFade, $showRightFade)};
+  transition:
+    -webkit-mask-image ${"200ms"} ease-out,
+    mask-image ${"200ms"} ease-out;
+
+  & > * {
+    flex: 0 0 auto;
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+const Divider = styled.div`
+  width: 1px;
+  height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].controlHeight};
+  background: ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
+  flex: 0 0 auto;
+  margin: 0 ${({ $flush }) => $flush ? 0 : Spacing[1]};
+`;
+const PickerSlot = styled.div`
+  flex: 0 0 auto;
+`;
+const EmptyTrailingGroup = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${Spacing[1]};
+  flex: 0 0 auto;
+`;
 /**
-* Whether `rule` carries a complete value for its field type — the
-* serialize-boundary predicate `pruneEmptyRulesForSerialize` uses to drop
-* half-edited rules from the request (a value-requiring operator like
-* `is_not` with no value yet makes the backend reject the whole request).
-*
-* Deliberately stricter than `isRuleAllowed`'s hydration policy, which keeps
-* an empty string so an in-progress pill survives the state round-trip and
-* stays visible for the user to finish. Checks value completeness only — it
-* does not gate operator vocabulary or registry membership.
+* Returns the previous array whenever its contents still match, so the field
+* ids can be derived on every render without giving the picker a new array to
+* rebuild its whole option tree from. Editing a pill's value rewrites the
+* rules while leaving the fields in use unchanged.
 */
-function hasCompleteValue(rule, registry) {
-	const field = registry.get(rule.fieldId);
-	if (field?.condition != null) return hasCompleteConditionValue(rule, field);
-	if (isValuelessOperator(rule.operator)) return rule.value == null;
-	const { value } = rule;
-	if (value == null) return false;
-	if (isRangeOperator(rule.operator)) return isCompleteDateRange(value);
-	if (field != null && isNumericComparison(rule.operator, field.type)) return isCompleteNumericComparisonValue(value, field.type);
-	switch (registry.get(rule.fieldId)?.type) {
-		case "boolean": return typeof value === "boolean";
-		case "date": return typeof value === "string" && value.length > 0;
-		case "multi_choices": return Array.isArray(value) ? value.length > 0 : typeof value === "string" && value.length > 0;
-		case "tags_conditions":
-		case "signals": return Array.isArray(value) && value.length > 0;
-		case "date_range": return isCompleteDateRange(value);
-		default:
-			if (typeof value === "string") return value.length > 0;
-			if (Array.isArray(value)) return value.length > 0;
-			return typeof value !== "boolean";
-	}
+function useStableFieldIds(fieldIds) {
+	const stable = useRef(fieldIds);
+	const previous = stable.current;
+	if (previous == null || fieldIds == null || previous.length !== fieldIds.length || fieldIds.some((id, index) => previous[index] !== id)) stable.current = fieldIds;
+	return stable.current;
+}
+function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = true, relativeDatesEnabled = false, dateTimesEnabled = false, singleUseFields = false, size = "md", valueControlResolver }) {
+	const strings = usePDSStrings();
+	const filterState = useFilterStateV2({
+		registry,
+		initialState,
+		advancedRulesEnabled
+	});
+	const [editingRuleId, setEditingRuleId] = useState(null);
+	const [rulesPopoverOpen, setRulesPopoverOpen] = useState(false);
+	const pillNodesRef = useRef(/* @__PURE__ */ new Map());
+	const onChangeRef = useRef(onChange);
+	useEffect(() => {
+		onChangeRef.current = onChange;
+	}, [onChange]);
+	const { committedState } = filterState;
+	const committedRuleIds = useMemo(() => new Set(committedState.topLevelRules.map((rule) => rule.id)), [committedState.topLevelRules]);
+	const lastReportedState = useRef(committedState);
+	useEffect(() => {
+		if (isEqual(lastReportedState.current, committedState)) return;
+		lastReportedState.current = committedState;
+		onChangeRef.current?.(committedState);
+	}, [committedState]);
+	const pendingEditRuleIdRef = useRef(null);
+	const openedViaScrollIntoViewRef = useRef(false);
+	const { addTopLevelRule } = filterState;
+	const handlePickField = useCallback((field) => {
+		const operator = registry.defaultOperatorFor(field.id);
+		pendingEditRuleIdRef.current = addTopLevelRule({
+			fieldId: field.id,
+			operator,
+			value: field.condition != null ? emptyValueForRule(field, operator) : null
+		});
+	}, [addTopLevelRule, registry]);
+	const hasPills = filterState.state.topLevelRules.length > 0;
+	const excludeFieldIds = useStableFieldIds(singleUseFields ? filterState.state.topLevelRules.map((rule) => rule.fieldId) : void 0);
+	const pillsScrollRef = useRef(null);
+	const { hasHorizontalOverflow, hasMoreScrollLeft, hasMoreScrollRight } = useScrollOverflow(pillsScrollRef, { enabled: hasPills });
+	const ruleCount = filterState.state.topLevelRules.length;
+	const previousRuleCountRef = useRef(ruleCount);
+	useEffect(() => {
+		const grew = ruleCount > previousRuleCountRef.current;
+		previousRuleCountRef.current = ruleCount;
+		if (!grew || pendingEditRuleIdRef.current == null) return;
+		const openPendingRule = () => {
+			openedViaScrollIntoViewRef.current = true;
+			setEditingRuleId(pendingEditRuleIdRef.current);
+			pendingEditRuleIdRef.current = null;
+		};
+		const track = pillsScrollRef.current;
+		if (!track || !track.scrollTo) {
+			openPendingRule();
+			return;
+		}
+		const maxScrollLeft = Math.max(track.scrollWidth - track.clientWidth, 0);
+		if (Math.abs(track.scrollLeft - maxScrollLeft) <= 1) {
+			openPendingRule();
+			return;
+		}
+		let settled = false;
+		const finish = () => {
+			if (settled) return;
+			settled = true;
+			track.removeEventListener("scrollend", finish);
+			window.clearTimeout(fallbackTimer);
+			openPendingRule();
+		};
+		track.addEventListener("scrollend", finish, { once: true });
+		const fallbackTimer = window.setTimeout(finish, SCROLL_SETTLE_FALLBACK_MS);
+		track.scrollTo({
+			left: track.scrollWidth,
+			behavior: "smooth"
+		});
+		return () => {
+			track.removeEventListener("scrollend", finish);
+			window.clearTimeout(fallbackTimer);
+		};
+	}, [ruleCount]);
+	useEffect(() => {
+		if (editingRuleId == null) return;
+		const root = pillsScrollRef.current;
+		const target = pillNodesRef.current.get(editingRuleId);
+		if (!root || !target || typeof IntersectionObserver === "undefined") return;
+		let skipInitialReport = openedViaScrollIntoViewRef.current;
+		openedViaScrollIntoViewRef.current = false;
+		const observer = new IntersectionObserver(([entry]) => {
+			if (skipInitialReport) {
+				skipInitialReport = false;
+				return;
+			}
+			if (entry && entry.intersectionRatio < 1) setEditingRuleId(null);
+		}, {
+			root,
+			threshold: 1,
+			rootMargin: `0px ${POPOVER_CLOSE_BUFFER_PX}px 0px ${POPOVER_CLOSE_BUFFER_PX}px`
+		});
+		observer.observe(target);
+		return () => observer.disconnect();
+	}, [editingRuleId]);
+	useLayoutEffect(() => {
+		if (editingRuleId == null) return;
+		pillNodesRef.current.get(editingRuleId)?.scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [editingRuleId, useMemo(() => editingRuleId == null ? null : filterState.state.topLevelRules.find((rule) => rule.id === editingRuleId)?.value ?? null, [editingRuleId, filterState.state.topLevelRules])]);
+	const visibleCustomFieldParents = useMemo(() => deriveVisibleCustomFieldParents(registry, filterState.state.topLevelRules), [registry, filterState.state.topLevelRules]);
+	return /* @__PURE__ */ jsx(FilterBarContext.Provider, {
+		value: { size },
+		children: /* @__PURE__ */ jsxs(Bar, {
+			role: "toolbar",
+			"aria-label": strings.filterBar,
+			children: [filterState.advancedRulesEnabled ? /* @__PURE__ */ jsx(AdvancedFilterRulesPopover, {
+				registry,
+				dateTimesEnabled,
+				compound: filterState.state.compound,
+				open: rulesPopoverOpen,
+				onOpenChange: setRulesPopoverOpen,
+				onChange: (compound) => {
+					filterState.setCompound(compound);
+				},
+				renderValueControl: (field, operator, value, onChange, relativeDate) => resolveValueControl({
+					field,
+					operator,
+					value,
+					relativeDate,
+					onChange,
+					layout: "inline",
+					relativeDatesEnabled,
+					dateTimesEnabled
+				}, valueControlResolver),
+				trigger: /* @__PURE__ */ jsx(RulesPill, {
+					compound: filterState.state.compound,
+					enabled: true,
+					isOpen: rulesPopoverOpen
+				})
+			}) : null, hasPills ? /* @__PURE__ */ jsxs(Fragment$1, { children: [filterState.advancedRulesEnabled ? /* @__PURE__ */ jsx(Divider, {
+				"aria-hidden": "true",
+				$size: size
+			}) : null, /* @__PURE__ */ jsxs(PillsScrollRegion, {
+				"data-test": "filter-bar-pills-scroll-region",
+				children: [/* @__PURE__ */ jsx(PillsScrollTrack, {
+					ref: pillsScrollRef,
+					"data-test": "filter-bar-pills-scroll-track",
+					$showLeftFade: hasMoreScrollLeft,
+					$showRightFade: hasHorizontalOverflow && hasMoreScrollRight,
+					children: filterState.state.topLevelRules.map((rule) => {
+						const field = registry.get(rule.fieldId);
+						if (!field) return null;
+						const optionLabels = registry.optionLabelsFor(field.id);
+						const isOpen = editingRuleId === rule.id;
+						return /* @__PURE__ */ jsx(FilterPopover, {
+							field,
+							operator: rule.operator,
+							wide: isMinutePrecisionDate(field, rule.operator, dateTimesEnabled) && carriesDateRange(rule.operator, field.type),
+							onChangeOperator: (op) => {
+								const { relativeDate: _staleRelativeDate, ...rest } = rule;
+								filterState.updateTopLevelRule(rule.id, {
+									...rest,
+									operator: op,
+									value: reconcileValueForOperator(field, op, rule.operator, rule.value)
+								});
+							},
+							valueControlSlot: resolveValueControl({
+								field,
+								operator: rule.operator,
+								value: rule.value,
+								relativeDate: rule.relativeDate,
+								onChange: (value, relativeDate) => {
+									const { relativeDate: _staleRelativeDate, ...rest } = rule;
+									filterState.updateTopLevelRule(rule.id, {
+										...rest,
+										value,
+										...relativeDate ? { relativeDate } : {}
+									});
+								},
+								onCommit: () => setEditingRuleId(null),
+								relativeDatesEnabled,
+								dateTimesEnabled
+							}, valueControlResolver),
+							onClose: () => setEditingRuleId(null),
+							onApply: field.condition != null && !committedRuleIds.has(rule.id) && hasCompleteValue(rule, registry) ? () => filterState.updateTopLevelRule(rule.id, (currentRule) => currentRule) : void 0,
+							open: isOpen,
+							onOpenChange: (open) => setEditingRuleId(open ? rule.id : null),
+							trigger: /* @__PURE__ */ jsx(FilterPill, {
+								ref: (node) => {
+									if (node) pillNodesRef.current.set(rule.id, node);
+									else pillNodesRef.current.delete(rule.id);
+								},
+								field,
+								rule: field.condition != null && !committedRuleIds.has(rule.id) ? null : rule,
+								variant: isOpen ? "active" : "default",
+								optionLabels,
+								onDismiss: () => filterState.removeTopLevelRule(rule.id)
+							})
+						}, rule.id);
+					})
+				}), /* @__PURE__ */ jsx(PickerSlot, { children: /* @__PURE__ */ jsx(FilterPickerMenu, {
+					registry,
+					onPickField: handlePickField,
+					compact: true,
+					visibleCustomFieldParents,
+					excludeFieldIds
+				}) })]
+			})] }) : filterState.advancedRulesEnabled ? /* @__PURE__ */ jsxs(EmptyTrailingGroup, { children: [/* @__PURE__ */ jsx(Divider, {
+				"aria-hidden": "true",
+				$size: size,
+				$flush: true
+			}), /* @__PURE__ */ jsx(PickerSlot, { children: /* @__PURE__ */ jsx(FilterPickerMenu, {
+				registry,
+				onPickField: handlePickField,
+				visibleCustomFieldParents,
+				excludeFieldIds
+			}) })] }) : /* @__PURE__ */ jsx(PickerSlot, { children: /* @__PURE__ */ jsx(FilterPickerMenu, {
+				registry,
+				onPickField: handlePickField,
+				visibleCustomFieldParents,
+				excludeFieldIds
+			}) })]
+		})
+	});
 }
-//#endregion
-//#region components/DataTable/TableControls/FiltersV2/useFilterStateV2.ts
-const nextRuleId = () => `top-rule-${v4()}`;
 /**
-* Owns `FilterStateV2` for a filter surface and exposes a small mutator API.
-*
-* When `advancedRulesEnabled` is false, `compound.groups` is forced to
-* `[]`.
-*
-* Putting that invariant here (rather than in the components) keeps
-* `TableControls/FiltersV2` callers from accidentally leaking compound state when
-* the owning view has opted out.
+* The parent labels the picker's Fields submenu should keep visible,
+* derived from active `is` pills on scoping selector fields
+* ({@link FieldRegistry.narrowingSelectorFields}). Each selected option
+* value is a backend record-type/template id, resolved to its parent
+* label via {@link FieldRegistry.parentRecordLabelForId}.
 *
-* The mutator surface is deliberately small: top-level rules get
-* upsert/remove, the compound expression gets whole-value writes. That
-* matches how the UI emits changes — simple pills mutate one rule at a
-* time; the rules popover always emits a full compound expression as
-* one `onChange`.
+* Returns `undefined` only when no `is` selector pill is active (show
+* everything). An active pill always returns an array, possibly empty:
+* selecting a scope with no custom fields narrows to *nothing*, not to
+* everything — conflating the two would leak other scopes' fields in.
 *
-* A pill the user has picked but not yet valued is held by the bar rather
-* than committed. Which pills those are is recorded when the picker mints
-* them rather than inferred: they are never reported, so incoming state never
-* describes one and hydration has nothing to reconcile against them. They
-* stay in the same row as the committed pills, so giving one a value doesn't
-* move it.
-*/
-function useFilterStateV2(options) {
-	const { initialState = EMPTY_FILTER_STATE, advancedRulesEnabled = true, registry } = options;
-	const [internal, setInternal] = useState(() => ({
-		all: pruneToRegistry(initialState, registry),
-		heldIds: /* @__PURE__ */ new Set()
-	}));
-	const { all, heldIds } = internal;
-	const lastHydratedState = useRef(all);
-	useEffect(() => {
-		const nextHydratedState = pruneToRegistry(initialState, registry);
-		const hydrate = !isEqual(nextHydratedState, lastHydratedState.current);
-		if (hydrate) lastHydratedState.current = nextHydratedState;
-		setInternal((prev) => {
-			const pruned = pruneHeldRules(prev, registry);
-			return hydrate ? withHeldRules(nextHydratedState, pruned) : pruned;
-		});
-	}, [initialState, registry]);
-	const state = useMemo(() => enforceAdvancedRulesEnabled(all, advancedRulesEnabled), [all, advancedRulesEnabled]);
-	return {
-		state,
-		committedState: useMemo(() => heldIds.size === 0 ? state : {
-			...state,
-			topLevelRules: state.topLevelRules.filter((rule) => !heldIds.has(rule.id))
-		}, [state, heldIds]),
-		advancedRulesEnabled,
-		setState: useCallback((next) => {
-			setInternal({
-				all: pruneToRegistry(next, registry),
-				heldIds: /* @__PURE__ */ new Set()
-			});
-		}, [registry]),
-		setCompound: useCallback((compound) => {
-			setInternal((prev) => ({
-				...prev,
-				all: {
-					...prev.all,
-					compound
-				}
-			}));
-		}, []),
-		reset: useCallback(() => {
-			setInternal({
-				all: {
-					topLevelRules: [],
-					compound: { groups: [] }
-				},
-				heldIds: /* @__PURE__ */ new Set()
-			});
-		}, []),
-		addTopLevelRule: useCallback((rule) => {
-			const id = nextRuleId();
-			const added = {
-				...rule,
-				id
-			};
-			setInternal((prev) => ({
-				all: {
-					...prev.all,
-					topLevelRules: [...prev.all.topLevelRules, added]
-				},
-				heldIds: registry.get(rule.fieldId)?.condition != null || isHeldRule(added, registry) ? withId(prev.heldIds, id) : prev.heldIds
-			}));
-			return id;
-		}, [registry]),
-		updateTopLevelRule: useCallback((id, update) => {
-			setInternal((prev) => {
-				const idx = prev.all.topLevelRules.findIndex((r) => r.id === id);
-				const currentRule = prev.all.topLevelRules[idx];
-				if (currentRule == null) return prev;
-				const rule = typeof update === "function" ? update(currentRule) : update;
-				const topLevelRules = [...prev.all.topLevelRules];
-				topLevelRules[idx] = {
-					...rule,
-					id
-				};
-				const heldIds = isHeldRule(rule, registry) ? withId(prev.heldIds, id) : withoutId(prev.heldIds, id);
-				return {
-					all: {
-						...prev.all,
-						topLevelRules
-					},
-					heldIds
-				};
-			});
-		}, [registry]),
-		removeTopLevelRule: useCallback((id) => {
-			setInternal((prev) => {
-				const topLevelRules = prev.all.topLevelRules.filter((r) => r.id !== id);
-				if (topLevelRules.length === prev.all.topLevelRules.length) return prev;
-				return {
-					all: {
-						...prev.all,
-						topLevelRules
-					},
-					heldIds: prev.heldIds.has(id) ? withoutId(prev.heldIds, id) : prev.heldIds
-				};
-			});
-		}, [])
-	};
-}
-/**
-* A pill the picker minted that has no value yet. `null` and not "empty":
-* `''` and `[]` are values a user can choose, and a filter cleared to one is
-* still a filter.
-*/
-function isHeldRule(rule, registry) {
-	if (registry.get(rule.fieldId)?.condition != null) return !hasCompleteValue(rule, registry);
-	return !isValuelessOperator(rule.operator) && rule.value == null;
-}
-function heldRulesOf(state) {
-	return state.heldIds.size === 0 ? [] : state.all.topLevelRules.filter((rule) => state.heldIds.has(rule.id));
-}
-/**
-* Lays incoming committed rules into the row, keeping the held pills where the
-* user left them: a held pill goes back after however many committed rules
-* preceded it before. An id the incoming state now uses is the parent's, so the
-* held pill of that id gives way rather than duplicating it.
+* Only `is` narrows; multiple pills union their parents.
 */
-function withHeldRules(committed, prev) {
-	if (prev.heldIds.size === 0) return {
-		all: committed,
-		heldIds: prev.heldIds
-	};
-	const incoming = committed.topLevelRules;
-	const incomingIds = new Set(incoming.map((rule) => rule.id));
-	const topLevelRules = [];
-	const heldIds = /* @__PURE__ */ new Set();
-	let taken = 0;
-	let committedBefore = 0;
-	prev.all.topLevelRules.forEach((rule) => {
-		if (!prev.heldIds.has(rule.id)) {
-			committedBefore += 1;
-			return;
-		}
-		if (incomingIds.has(rule.id)) return;
-		while (taken < committedBefore && taken < incoming.length) {
-			topLevelRules.push(incoming[taken]);
-			taken += 1;
+function deriveVisibleCustomFieldParents(registry, topLevelRules) {
+	const selectorFields = registry.narrowingSelectorFields();
+	if (selectorFields.length === 0 || topLevelRules.length === 0) return;
+	const selectorIds = new Set(selectorFields.map((f) => f.id));
+	const allowedParents = /* @__PURE__ */ new Set();
+	let hasActiveSelectorRule = false;
+	for (const rule of topLevelRules) {
+		if (!selectorIds.has(rule.fieldId)) continue;
+		if (rule.operator !== "is") continue;
+		hasActiveSelectorRule = true;
+		const values = Array.isArray(rule.value) ? rule.value : [rule.value];
+		for (const value of values) {
+			if (typeof value !== "string") continue;
+			const parentLabel = registry.parentRecordLabelForId(value);
+			if (parentLabel != null) allowedParents.add(parentLabel);
 		}
-		topLevelRules.push(rule);
-		heldIds.add(rule.id);
-	});
-	if (heldIds.size === 0) return {
-		all: committed,
-		heldIds
-	};
-	while (taken < incoming.length) {
-		topLevelRules.push(incoming[taken]);
-		taken += 1;
 	}
-	return {
-		all: {
-			...committed,
-			topLevelRules
-		},
-		heldIds
-	};
+	return hasActiveSelectorRule ? Array.from(allowedParents) : void 0;
 }
+//#endregion
+//#region components/DataTable/dnd/StyledIconDrag.tsx
+const StyledIconDrag = styled(DragIcon$1)`
+  display: ${({ $shouldHide = false }) => $shouldHide ? "none" : "inline"};
+
+  ${({ $horizontal = false }) => $horizontal ? css`
+          transform: rotate(90deg);
+        ` : ""}
+
+  ${({ $active = false, $hover = false }) => $active ? css`
+          cursor: grabbing;
+          opacity: 1;
+        ` : $hover ? css`
+            cursor: grab;
+            opacity: 1;
+          ` : css`
+            cursor: normal;
+            opacity: 0.4;
+          `}
+
+  transition: opacity 0.2s ease-in-out;
+
+  path {
+    stroke: ${({ theme }) => semanticColor(theme, "FgPrimary", Color.CoreSlate1000)};
+    stroke-width: 1px;
+  }
+`;
+//#endregion
+//#region components/DataTable/dnd/utils.ts
 /**
-* Drops held pills whose field or operator the registry no longer supports,
-* preserving the state's identity when there are none so an unchanged registry
-* can't loop the effect.
+* reorder returns a reordered version of the inputed list by swapping the element
+* at startIndex with the one at endIndex
 */
-function pruneHeldRules(state, registry) {
-	const droppedIds = new Set(heldRulesOf(state).filter((rule) => !registry.has(rule.fieldId) || !registry.operatorsFor(rule.fieldId).includes(rule.operator)).map((rule) => rule.id));
-	if (droppedIds.size === 0) return state;
-	const heldIds = new Set(state.heldIds);
-	droppedIds.forEach((id) => heldIds.delete(id));
-	return {
-		all: {
-			...state.all,
-			topLevelRules: state.all.topLevelRules.filter((rule) => !droppedIds.has(rule.id))
-		},
-		heldIds
-	};
-}
-function withId(ids, id) {
-	return ids.has(id) ? ids : new Set(ids).add(id);
-}
-function withoutId(ids, id) {
-	if (!ids.has(id)) return ids;
-	const next = new Set(ids);
-	next.delete(id);
-	return next;
+function reorder(list, startIndex, endIndex) {
+	const result = Array.from(list);
+	const [removed] = result.splice(startIndex, 1);
+	result.splice(endIndex, 0, removed);
+	return result;
 }
-function enforceAdvancedRulesEnabled(state, advancedRulesEnabled) {
-	if (advancedRulesEnabled) return state;
-	if (state.compound.groups.length === 0) return state;
-	return {
-		...state,
-		compound: { groups: [] }
+/**
+* Translates a drag result into indices into the full list. dnd reports positions among the
+* rendered rows, which diverge from the full list as soon as the view is filtered.
+*
+* Returns null when either end cannot be resolved, in which case the drag should be ignored
+* rather than applied at the wrong position.
+*/
+function resolveDragIndices(listKeys, renderedKeys, draggableId, destinationIndex) {
+	const destinationKey = renderedKeys[destinationIndex];
+	if (destinationKey == null) return null;
+	const from = listKeys.indexOf(draggableId);
+	const to = listKeys.indexOf(destinationKey);
+	return from === -1 || to === -1 ? null : {
+		from,
+		to
 	};
 }
 //#endregion
-//#region components/DataTable/TableControls/FiltersV2/FilterBar/FilterBar.tsx
-const Bar = styled.div`
+//#region components/DataTable/TableControls/TableViewConfigurationDropdown.tsx
+const SHOWN_DROPPABLE_ID = "cases-view__configure-shown-columns";
+const startsCapitalized = (label) => {
+	const first = label.charAt(0);
+	return first !== "" && first === first.toUpperCase() && first !== first.toLowerCase();
+};
+const byLabel = (a, b) => {
+	const aCapitalized = startsCapitalized(a.label);
+	if (aCapitalized !== startsCapitalized(b.label)) return aCapitalized ? -1 : 1;
+	return a.label.localeCompare(b.label, void 0, { numeric: true });
+};
+const DndSection = styled("div")`
+  max-height: 400px;
+
+  overflow: scroll;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`;
+const DndItemWrapper = styled("div")`
+  background: white;
+  ${semanticOnly((tokens) => `background: ${tokens.SurfacePrimary};`)}
+  width: 100%;
+  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", theme.color.border.secondary)};
+  padding: ${Spacing[2]} ${Spacing[2]};
+
   display: flex;
+  flex-direction: row;
   align-items: center;
-  gap: ${Spacing[2]};
-  flex-wrap: nowrap;
-  min-width: 0;
-  padding: ${Spacing[2]} 0;
+  justify-content: left;
 `;
-const SCROLL_FADE_WIDTH = 48;
-const SCROLL_SETTLE_FALLBACK_MS = 400;
-const POPOVER_CLOSE_BUFFER_PX = 8;
-const PILL_FOCUS_RING_SPACE = 3;
-/**
-* Builds the `mask-image` gradient that fades the scroll track's edges.
-*
-* A `mask-image` (rather than a same-colored overlay painted on top) fades
-* the track's *entire rendered output* — pill backgrounds, borders, and any
-* focus ring that bleeds into the padding above — because masking
-* composites against the real pixels the element paints, instead of
-* relying on an opaque sibling layer to visually cover them. An overlay
-* approach only hides whatever happens to sit below it in paint order;
-* a mask fades everything, including outlines.
-*/
-const buildEdgeMaskImage = (showLeftFade, showRightFade) => {
-	return `linear-gradient(to right, ${showLeftFade ? `transparent 0, black ${SCROLL_FADE_WIDTH}px` : "black 0"}, ${showRightFade ? `black calc(100% - ${SCROLL_FADE_WIDTH}px), transparent 100%` : "black 100%"})`;
+const SuffixContainer = styled("div")`
+  padding-left: ${Spacing[2]};
+  margin-left: auto;
+  align-self: center;
+`;
+const SearchContainer = styled.div`
+  display: flex;
+`;
+const StyledSearchInput = styled(SearchInput)`
+  width: 100%;
+`;
+const PopoverCard = styled(Card_default)`
+  width: 300px;
+  padding: ${Spacing[4]};
+`;
+const TriggerIconButton = forwardRef(function TriggerIconButton({ disabled, ...elemProps }, ref) {
+	const strings = usePDSStrings();
+	return /* @__PURE__ */ jsx(Button, {
+		disabled,
+		width: "icon",
+		variant: "basic",
+		size: "md",
+		...elemProps,
+		ref,
+		"data-tour-target": "table-properties-button",
+		"aria-label": strings.tableProperties,
+		children: /* @__PURE__ */ jsx(SettingsIcon, {})
+	});
+});
+const TooltipButtonWrapper = styled("div")`
+  display: inline-block;
+`;
+const TableViewConfigurationDropdown = ({ disabled = false, disabledTooltipMessage, size = "md", variant = "basic", ...props }) => {
+	const strings = usePDSStrings();
+	return disabled ? /* @__PURE__ */ jsx(Tooltip, {
+		trigger: /* @__PURE__ */ jsx(TooltipButtonWrapper, { children: /* @__PURE__ */ jsx(TriggerIconButton, {
+			disabled: true,
+			size,
+			variant
+		}) }),
+		children: disabledTooltipMessage ?? strings.configureViewPermissionDenied
+	}) : /* @__PURE__ */ jsxs(Popover_default, { children: [/* @__PURE__ */ jsx(Popover_default.Trigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(TriggerIconButton, {
+			disabled: false,
+			size,
+			variant
+		})
+	}), /* @__PURE__ */ jsx(Popover_default.Content, {
+		style: { zIndex: Z_INDICES.dropdown },
+		sideOffset: 8,
+		side: "bottom",
+		align: "end",
+		children: /* @__PURE__ */ jsx(PopoverCard, {
+			elevated: true,
+			children: /* @__PURE__ */ jsx(TableViewConfiguration, { ...props })
+		})
+	})] });
+};
+const TableViewConfiguration = ({ columnConfiguration, attributeOptions, updateColumnConfiguration, getColumnDisabled, sortByRelevance = false }) => {
+	const strings = usePDSStrings();
+	const [searchTerm, setSearchTerm] = useState("");
+	const fuse = useMemo(() => {
+		return new Fuse(attributeOptions, sortByRelevance ? {
+			shouldSort: true,
+			threshold: .3,
+			ignoreLocation: true,
+			includeScore: true,
+			minMatchCharLength: 1,
+			keys: [{
+				name: "label",
+				weight: 1
+			}]
+		} : {
+			shouldSort: false,
+			threshold: .4,
+			location: 0,
+			distance: 100,
+			minMatchCharLength: 1,
+			keys: [{
+				name: "label",
+				weight: 1
+			}]
+		});
+	}, [attributeOptions, sortByRelevance]);
+	const allOptions = useMemo(() => union(attributeOptions, columnConfiguration), [attributeOptions, columnConfiguration]);
+	const filteredSearchOptions = useMemo(() => {
+		if (searchTerm === "") return allOptions;
+		const results = fuse.search(searchTerm);
+		if (!sortByRelevance) return results.map(({ item }) => item);
+		return [...results].sort((a, b) => (a.score ?? 0) - (b.score ?? 0) || byLabel(a.item, b.item)).map(({ item }) => item);
+	}, [
+		allOptions,
+		fuse,
+		searchTerm,
+		sortByRelevance
+	]);
+	const hiddenAttributes = useMemo(() => {
+		const columnConfigurationKeys = new Set(columnConfiguration.map((c) => c.key));
+		const hidden = filteredSearchOptions.filter((attribute) => !columnConfigurationKeys.has(attribute.key));
+		if (!sortByRelevance || searchTerm !== "") return hidden;
+		const [systemColumns, customFields] = partition(hidden, (a) => !a.isCustomField);
+		return [...systemColumns, ...[...customFields].sort(byLabel)];
+	}, [
+		columnConfiguration,
+		filteredSearchOptions,
+		sortByRelevance,
+		searchTerm
+	]);
+	const filteredShownAttributes = useMemo(() => {
+		return columnConfiguration.filter((column) => filteredSearchOptions.map((o) => o.key).includes(column.key));
+	}, [columnConfiguration, filteredSearchOptions]);
+	const handleDragEnd = (result, _provided) => {
+		const { destination, source } = result;
+		if (!destination || destination.droppableId === source.droppableId && destination.index === source.index) return;
+		const indices = resolveDragIndices(columnConfiguration.map((c) => c.key), filteredShownAttributes.map((c) => c.key), result.draggableId, destination.index);
+		if (!indices) return;
+		updateColumnConfiguration(reorder(columnConfiguration, indices.from, indices.to));
+	};
+	const generateShownAttributesToggle = (column) => () => {
+		updateColumnConfiguration(columnConfiguration.filter((a) => a.key !== column.key));
+	};
+	const generateHiddenAttributesToggle = (column) => () => {
+		updateColumnConfiguration(columnConfiguration.concat({
+			key: column.key,
+			label: column.label
+		}));
+	};
+	const shownColumnIds = useMemo(() => {
+		return columnConfiguration.map((c) => c.key);
+	}, [columnConfiguration]);
+	const shownDndItemProps = filteredShownAttributes.map((column, index) => {
+		const isDisabledByDefault = columnConfiguration.length === 1;
+		const isDisabledByCustom = getColumnDisabled?.(column.key, shownColumnIds) ?? false;
+		const shouldDisableDragForColumn = isDisabledByCustom && index === filteredShownAttributes.length - 1;
+		return {
+			column,
+			index,
+			isDisabled: isDisabledByDefault || isDisabledByCustom,
+			isToggled: true,
+			shouldDisableDrag: shouldDisableDragForColumn,
+			handleToggle: generateShownAttributesToggle(column)
+		};
+	});
+	const hiddenDndItemProps = hiddenAttributes.map((column, index) => {
+		return {
+			column,
+			index,
+			isToggled: false,
+			shouldDisableDrag: true,
+			handleToggle: generateHiddenAttributesToggle(column)
+		};
+	});
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx(Label$1, {
+			size: "lg",
+			weight: "bold",
+			children: strings.configureColumns
+		}),
+		/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
+		/* @__PURE__ */ jsx(SearchContainer, { children: /* @__PURE__ */ jsx(StyledSearchInput, {
+			title: null,
+			value: searchTerm,
+			handleInput: setSearchTerm,
+			size: "md",
+			placeholder: strings.searchColumns,
+			dataTest: "checklist-item-panel-item-table__search"
+		}) }),
+		/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
+		shownDndItemProps.length > 0 || hiddenDndItemProps.length > 0 ? /* @__PURE__ */ jsxs(DndSection, { children: [
+			shownDndItemProps.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Paragraph, { children: strings.shownColumns }), /* @__PURE__ */ jsx(DragDropContext, {
+				onDragEnd: handleDragEnd,
+				children: /* @__PURE__ */ jsx(Droppable, {
+					droppableId: SHOWN_DROPPABLE_ID,
+					renderClone: (provided, _snapshot, rubric) => {
+						return /* @__PURE__ */ jsx("div", {
+							...provided.draggableProps,
+							...provided.dragHandleProps,
+							ref: provided.innerRef,
+							children: /* @__PURE__ */ jsx(AttributeDnd, { ...shownDndItemProps[rubric.source.index] })
+						});
+					},
+					children: (provided) => {
+						return /* @__PURE__ */ jsxs("div", {
+							ref: provided.innerRef,
+							...provided.droppableProps,
+							children: [shownDndItemProps.map((props, idx) => {
+								return /* @__PURE__ */ jsx(Draggable, {
+									draggableId: props.column.key,
+									index: idx,
+									isDragDisabled: props.shouldDisableDrag,
+									children: (provided) => {
+										return /* @__PURE__ */ jsx("div", {
+											ref: provided.innerRef,
+											...provided.draggableProps,
+											...provided.dragHandleProps,
+											children: /* @__PURE__ */ jsx(AttributeDnd, { ...props })
+										});
+									}
+								}, `${props.column.key}`);
+							}), provided.placeholder]
+						});
+					}
+				})
+			})] }),
+			/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
+			hiddenDndItemProps.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Paragraph, { children: strings.hiddenColumns }), hiddenDndItemProps.map((props) => /* @__PURE__ */ jsx(AttributeDnd, { ...props }, props.column.key))] })
+		] }) : /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Paragraph, { children: strings.noMatchingColumns }) })
+	] });
 };
-const PillsScrollRegion = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${Spacing[1]};
-  flex: 0 1 auto;
-  min-width: 0;
-  width: max-content;
-  max-width: 100%;
-`;
-const PillsScrollTrack = styled.div`
-  display: flex;
-  align-items: center;
-  flex: 1 1 auto;
-  min-width: 0;
-  flex-wrap: nowrap;
-  gap: ${Spacing[1]};
-  overflow-x: auto;
-  overflow-y: hidden;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-  padding: ${PILL_FOCUS_RING_SPACE}px;
-  margin: -${PILL_FOCUS_RING_SPACE}px;
-  -webkit-mask-image: ${({ $showLeftFade, $showRightFade }) => buildEdgeMaskImage($showLeftFade, $showRightFade)};
-  mask-image: ${({ $showLeftFade, $showRightFade }) => buildEdgeMaskImage($showLeftFade, $showRightFade)};
-  transition:
-    -webkit-mask-image ${"200ms"} ease-out,
-    mask-image ${"200ms"} ease-out;
-
-  & > * {
-    flex: 0 0 auto;
-  }
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`;
-const Divider = styled.div`
-  width: 1px;
-  height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].controlHeight};
-  background: ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
-  flex: 0 0 auto;
-  margin: 0 ${({ $flush }) => $flush ? 0 : Spacing[1]};
-`;
-const PickerSlot = styled.div`
-  flex: 0 0 auto;
-`;
-const EmptyTrailingGroup = styled.div`
+const OverflowText = styled("div")`
+  max-width: 160px;
+  flex-wrap: wrap;
   display: flex;
-  align-items: center;
-  gap: ${Spacing[1]};
-  flex: 0 0 auto;
 `;
-/**
-* Returns the previous array whenever its contents still match, so the field
-* ids can be derived on every render without giving the picker a new array to
-* rebuild its whole option tree from. Editing a pill's value rewrites the
-* rules while leaving the fields in use unchanged.
-*/
-function useStableFieldIds(fieldIds) {
-	const stable = useRef(fieldIds);
-	const previous = stable.current;
-	if (previous == null || fieldIds == null || previous.length !== fieldIds.length || fieldIds.some((id, index) => previous[index] !== id)) stable.current = fieldIds;
-	return stable.current;
-}
-function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = true, relativeDatesEnabled = false, dateTimesEnabled = false, singleUseFields = false, size = "md", valueControlResolver }) {
+const AttributeDnd = ({ column, index, isDisabled = false, isToggled, shouldDisableDrag, handleToggle }) => {
 	const strings = usePDSStrings();
-	const filterState = useFilterStateV2({
-		registry,
-		initialState,
-		advancedRulesEnabled
-	});
-	const [editingRuleId, setEditingRuleId] = useState(null);
-	const [rulesPopoverOpen, setRulesPopoverOpen] = useState(false);
-	const pillNodesRef = useRef(/* @__PURE__ */ new Map());
-	const onChangeRef = useRef(onChange);
-	useEffect(() => {
-		onChangeRef.current = onChange;
-	}, [onChange]);
-	const { committedState } = filterState;
-	const committedRuleIds = useMemo(() => new Set(committedState.topLevelRules.map((rule) => rule.id)), [committedState.topLevelRules]);
-	const lastReportedState = useRef(committedState);
-	useEffect(() => {
-		if (isEqual(lastReportedState.current, committedState)) return;
-		lastReportedState.current = committedState;
-		onChangeRef.current?.(committedState);
-	}, [committedState]);
-	const pendingEditRuleIdRef = useRef(null);
-	const openedViaScrollIntoViewRef = useRef(false);
-	const { addTopLevelRule } = filterState;
-	const handlePickField = useCallback((field) => {
-		const operator = registry.defaultOperatorFor(field.id);
-		pendingEditRuleIdRef.current = addTopLevelRule({
-			fieldId: field.id,
-			operator,
-			value: field.condition != null ? emptyValueForRule(field, operator) : null
-		});
-	}, [addTopLevelRule, registry]);
-	const hasPills = filterState.state.topLevelRules.length > 0;
-	const excludeFieldIds = useStableFieldIds(singleUseFields ? filterState.state.topLevelRules.map((rule) => rule.fieldId) : void 0);
-	const pillsScrollRef = useRef(null);
-	const { hasHorizontalOverflow, hasMoreScrollLeft, hasMoreScrollRight } = useScrollOverflow(pillsScrollRef, { enabled: hasPills });
-	const ruleCount = filterState.state.topLevelRules.length;
-	const previousRuleCountRef = useRef(ruleCount);
+	return /* @__PURE__ */ jsxs(DndItemWrapper, { children: [
+		/* @__PURE__ */ jsx(StyledIconDrag, {
+			$active: true,
+			$shouldHide: shouldDisableDrag
+		}),
+		/* @__PURE__ */ jsx(OverflowText, { children: /* @__PURE__ */ jsx(Paragraph, {
+			color: "primary",
+			size: "sm",
+			children: column.label
+		}) }),
+		/* @__PURE__ */ jsx(SuffixContainer, { children: /* @__PURE__ */ jsx(Toggle, {
+			value: isToggled,
+			disabled: isDisabled,
+			onChange: handleToggle,
+			"aria-label": isToggled ? strings.hideColumn(column.label) : strings.showColumn(column.label)
+		}) })
+	] }, `${column.key}-${index}`);
+};
+//#endregion
+//#region components/DataTable/TableControls/TableControls.tsx
+const EMPTY_FILTERS = [];
+const resolveFilterArea = (filterPanel, filtersV2Panel, configuredFilterPanel) => filterPanel ?? filtersV2Panel ?? configuredFilterPanel;
+const hasNewFilterId = (currentIds, previousIds) => {
+	const previous = new Set(previousIds.split("\0").filter(Boolean));
+	return currentIds.split("\0").some((id) => id !== "" && !previous.has(id));
+};
+const TableControls = ({ filters = EMPTY_FILTERS, filterResolver, filtersV2, filterPanel, searchProps, defaultShowFilters, showFilters: controlledShowFilters, setShowFilters: controlledSetShowFilters, className, tableActions, propertiesButton, isLoading, isFilterPanelLoading, showViews, canEditViews, onSelectView, views, hiddenViewIds, currentView, onAddView, onViewNameChange, onReorderViews, onViewHiddenChange, onDuplicateView, onDeleteView, onSaveView, onSetDefaultView, onUnsetDefaultView, isViewDirty, selectedRows, bulkActions, onClearSelection, title, presetViews, compact, columnConfigurationProps, showFiltersAlways = false, onError, "data-tour-target": dataTourTarget }) => {
+	const filtersId = useId();
+	const enabledFilters = useMemo(() => filtersV2 != null ? EMPTY_FILTERS : filters.filter((filter) => filter.enabled !== false), [filters, filtersV2]);
+	const [activeFilters, setActiveFilters] = useState(() => getActiveFilters(enabledFilters, [], true, filterResolver));
+	const generatedFilterPanel = enabledFilters.length > 0 ? /* @__PURE__ */ jsx(TableControlsProvider, {
+		filters: enabledFilters,
+		activeFilters,
+		setActiveFilters,
+		children: /* @__PURE__ */ jsx(Filters, {
+			id: filtersId,
+			compact,
+			filterResolver
+		})
+	}) : void 0;
+	const usesFiltersV2 = filterPanel == null && filtersV2 != null;
+	const resolvedFilterPanel = resolveFilterArea(filterPanel, filtersV2 != null ? /* @__PURE__ */ jsx("div", {
+		id: filtersId,
+		children: /* @__PURE__ */ jsx(FilterBar, {
+			...filtersV2,
+			size: filtersV2.size ?? (compact ? "sm" : "md")
+		})
+	}) : void 0, generatedFilterPanel);
+	const [internalShowFilters, internalSetShowFilters] = useState(defaultShowFilters ?? (filterPanel == null && (usesFiltersV2 || activeFilters.length > 0)));
 	useEffect(() => {
-		const grew = ruleCount > previousRuleCountRef.current;
-		previousRuleCountRef.current = ruleCount;
-		if (!grew || pendingEditRuleIdRef.current == null) return;
-		const openPendingRule = () => {
-			openedViaScrollIntoViewRef.current = true;
-			setEditingRuleId(pendingEditRuleIdRef.current);
-			pendingEditRuleIdRef.current = null;
-		};
-		const track = pillsScrollRef.current;
-		if (!track || !track.scrollTo) {
-			openPendingRule();
-			return;
-		}
-		const maxScrollLeft = Math.max(track.scrollWidth - track.clientWidth, 0);
-		if (Math.abs(track.scrollLeft - maxScrollLeft) <= 1) {
-			openPendingRule();
-			return;
-		}
-		let settled = false;
-		const finish = () => {
-			if (settled) return;
-			settled = true;
-			track.removeEventListener("scrollend", finish);
-			window.clearTimeout(fallbackTimer);
-			openPendingRule();
-		};
-		track.addEventListener("scrollend", finish, { once: true });
-		const fallbackTimer = window.setTimeout(finish, SCROLL_SETTLE_FALLBACK_MS);
-		track.scrollTo({
-			left: track.scrollWidth,
-			behavior: "smooth"
-		});
-		return () => {
-			track.removeEventListener("scrollend", finish);
-			window.clearTimeout(fallbackTimer);
-		};
-	}, [ruleCount]);
+		setActiveFilters((current) => synchronizeActiveFilters(enabledFilters, current, filterResolver));
+	}, [enabledFilters, filterResolver]);
+	const activeFilterIds = enabledFilters.filter((filter) => isFilterActive(filter, filterResolver)).map((filter) => filter.id).sort().join("\0");
+	const configuredFilterIds = activeFilters.flatMap((filter) => filter.config ? [filter.config.id] : []).sort().join("\0");
+	const previousActiveFilterIds = useRef(activeFilterIds);
+	const previousConfiguredFilterIds = useRef(configuredFilterIds);
+	const previouslyUsedFiltersV2 = useRef(usesFiltersV2);
 	useEffect(() => {
-		if (editingRuleId == null) return;
-		const root = pillsScrollRef.current;
-		const target = pillNodesRef.current.get(editingRuleId);
-		if (!root || !target || typeof IntersectionObserver === "undefined") return;
-		let skipInitialReport = openedViaScrollIntoViewRef.current;
-		openedViaScrollIntoViewRef.current = false;
-		const observer = new IntersectionObserver(([entry]) => {
-			if (skipInitialReport) {
-				skipInitialReport = false;
-				return;
-			}
-			if (entry && entry.intersectionRatio < 1) setEditingRuleId(null);
-		}, {
-			root,
-			threshold: 1,
-			rootMargin: `0px ${POPOVER_CLOSE_BUFFER_PX}px 0px ${POPOVER_CLOSE_BUFFER_PX}px`
-		});
-		observer.observe(target);
-		return () => observer.disconnect();
-	}, [editingRuleId]);
-	useLayoutEffect(() => {
-		if (editingRuleId == null) return;
-		pillNodesRef.current.get(editingRuleId)?.scrollIntoView?.({
-			block: "nearest",
-			inline: "nearest"
-		});
-	}, [editingRuleId, useMemo(() => editingRuleId == null ? null : filterState.state.topLevelRules.find((rule) => rule.id === editingRuleId)?.value ?? null, [editingRuleId, filterState.state.topLevelRules])]);
-	const visibleCustomFieldParents = useMemo(() => deriveVisibleCustomFieldParents(registry, filterState.state.topLevelRules), [registry, filterState.state.topLevelRules]);
-	return /* @__PURE__ */ jsx(FilterBarContext.Provider, {
-		value: { size },
-		children: /* @__PURE__ */ jsxs(Bar, {
-			role: "toolbar",
-			"aria-label": strings.filterBar,
-			children: [filterState.advancedRulesEnabled ? /* @__PURE__ */ jsx(AdvancedFilterRulesPopover, {
-				registry,
-				dateTimesEnabled,
-				compound: filterState.state.compound,
-				open: rulesPopoverOpen,
-				onOpenChange: setRulesPopoverOpen,
-				onChange: (compound) => {
-					filterState.setCompound(compound);
-				},
-				renderValueControl: (field, operator, value, onChange, relativeDate) => resolveValueControl({
-					field,
-					operator,
-					value,
-					relativeDate,
-					onChange,
-					layout: "inline",
-					relativeDatesEnabled,
-					dateTimesEnabled
-				}, valueControlResolver),
-				trigger: /* @__PURE__ */ jsx(RulesPill, {
-					compound: filterState.state.compound,
-					enabled: true,
-					isOpen: rulesPopoverOpen
-				})
-			}) : null, hasPills ? /* @__PURE__ */ jsxs(Fragment$1, { children: [filterState.advancedRulesEnabled ? /* @__PURE__ */ jsx(Divider, {
-				"aria-hidden": "true",
-				$size: size
-			}) : null, /* @__PURE__ */ jsxs(PillsScrollRegion, {
-				"data-test": "filter-bar-pills-scroll-region",
-				children: [/* @__PURE__ */ jsx(PillsScrollTrack, {
-					ref: pillsScrollRef,
-					"data-test": "filter-bar-pills-scroll-track",
-					$showLeftFade: hasMoreScrollLeft,
-					$showRightFade: hasHorizontalOverflow && hasMoreScrollRight,
-					children: filterState.state.topLevelRules.map((rule) => {
-						const field = registry.get(rule.fieldId);
-						if (!field) return null;
-						const optionLabels = registry.optionLabelsFor(field.id);
-						const isOpen = editingRuleId === rule.id;
-						return /* @__PURE__ */ jsx(FilterPopover, {
-							field,
-							operator: rule.operator,
-							wide: isMinutePrecisionDate(field, rule.operator, dateTimesEnabled) && carriesDateRange(rule.operator, field.type),
-							onChangeOperator: (op) => {
-								const { relativeDate: _staleRelativeDate, ...rest } = rule;
-								filterState.updateTopLevelRule(rule.id, {
-									...rest,
-									operator: op,
-									value: reconcileValueForOperator(field, op, rule.operator, rule.value)
-								});
-							},
-							valueControlSlot: resolveValueControl({
-								field,
-								operator: rule.operator,
-								value: rule.value,
-								relativeDate: rule.relativeDate,
-								onChange: (value, relativeDate) => {
-									const { relativeDate: _staleRelativeDate, ...rest } = rule;
-									filterState.updateTopLevelRule(rule.id, {
-										...rest,
-										value,
-										...relativeDate ? { relativeDate } : {}
-									});
-								},
-								onCommit: () => setEditingRuleId(null),
-								relativeDatesEnabled,
-								dateTimesEnabled
-							}, valueControlResolver),
-							onClose: () => setEditingRuleId(null),
-							onApply: field.condition != null && !committedRuleIds.has(rule.id) && hasCompleteValue(rule, registry) ? () => filterState.updateTopLevelRule(rule.id, (currentRule) => currentRule) : void 0,
-							open: isOpen,
-							onOpenChange: (open) => setEditingRuleId(open ? rule.id : null),
-							trigger: /* @__PURE__ */ jsx(FilterPill, {
-								ref: (node) => {
-									if (node) pillNodesRef.current.set(rule.id, node);
-									else pillNodesRef.current.delete(rule.id);
-								},
-								field,
-								rule: field.condition != null && !committedRuleIds.has(rule.id) ? null : rule,
-								variant: isOpen ? "active" : "default",
-								optionLabels,
-								onDismiss: () => filterState.removeTopLevelRule(rule.id)
-							})
-						}, rule.id);
-					})
-				}), /* @__PURE__ */ jsx(PickerSlot, { children: /* @__PURE__ */ jsx(FilterPickerMenu, {
-					registry,
-					onPickField: handlePickField,
-					compact: true,
-					visibleCustomFieldParents,
-					excludeFieldIds
-				}) })]
-			})] }) : filterState.advancedRulesEnabled ? /* @__PURE__ */ jsxs(EmptyTrailingGroup, { children: [/* @__PURE__ */ jsx(Divider, {
-				"aria-hidden": "true",
-				$size: size,
-				$flush: true
-			}), /* @__PURE__ */ jsx(PickerSlot, { children: /* @__PURE__ */ jsx(FilterPickerMenu, {
-				registry,
-				onPickField: handlePickField,
-				visibleCustomFieldParents,
-				excludeFieldIds
-			}) })] }) : /* @__PURE__ */ jsx(PickerSlot, { children: /* @__PURE__ */ jsx(FilterPickerMenu, {
-				registry,
-				onPickField: handlePickField,
-				visibleCustomFieldParents,
-				excludeFieldIds
-			}) })]
+		const becameActive = hasNewFilterId(activeFilterIds, previousActiveFilterIds.current);
+		const newlyConfigured = hasNewFilterId(configuredFilterIds, previousConfiguredFilterIds.current);
+		const enabledFiltersV2 = usesFiltersV2 && !previouslyUsedFiltersV2.current;
+		previousActiveFilterIds.current = activeFilterIds;
+		previousConfiguredFilterIds.current = configuredFilterIds;
+		previouslyUsedFiltersV2.current = usesFiltersV2;
+		if (defaultShowFilters == null && filterPanel == null && (enabledFiltersV2 || !usesFiltersV2 && (becameActive || newlyConfigured))) internalSetShowFilters(true);
+	}, [
+		activeFilterIds,
+		configuredFilterIds,
+		defaultShowFilters,
+		filterPanel,
+		usesFiltersV2
+	]);
+	const showFilters = controlledShowFilters != null ? controlledShowFilters : internalShowFilters;
+	const setShowFilters = controlledSetShowFilters != null ? controlledSetShowFilters : internalSetShowFilters;
+	const enhancedPropertiesButton = useMemo(() => {
+		if (!columnConfigurationProps && !propertiesButton) return;
+		const elements = [];
+		if (propertiesButton) elements.push(propertiesButton);
+		if (columnConfigurationProps) elements.push(/* @__PURE__ */ jsx(TableViewConfigurationDropdown, {
+			disabled: false,
+			...columnConfigurationProps
+		}, "column-config"));
+		if (elements.length === 1) return elements[0];
+		return /* @__PURE__ */ jsx(StyledEnhancedPropertiesButton, { children: elements });
+	}, [columnConfigurationProps, propertiesButton]);
+	return /* @__PURE__ */ jsx(Container, {
+		className,
+		children: /* @__PURE__ */ jsx(ControlBar, {
+			showViews: compact ? false : showViews,
+			views: compact ? void 0 : views,
+			hiddenViewIds: compact ? void 0 : hiddenViewIds,
+			onSelectView: compact ? void 0 : onSelectView,
+			currentView: compact ? void 0 : currentView,
+			onAddView: compact ? void 0 : onAddView,
+			onDeleteView: compact ? void 0 : onDeleteView,
+			onDuplicateView: compact ? void 0 : onDuplicateView,
+			onViewNameChange: compact ? void 0 : onViewNameChange,
+			onReorderViews: compact ? void 0 : onReorderViews,
+			onViewHiddenChange: compact ? void 0 : onViewHiddenChange,
+			onSaveView: compact ? void 0 : onSaveView,
+			...!compact && onSetDefaultView ? {
+				onSetDefaultView,
+				onUnsetDefaultView
+			} : {
+				onSetDefaultView: void 0,
+				onUnsetDefaultView: void 0
+			},
+			isViewDirty,
+			canEditViews: compact ? false : canEditViews,
+			showFilters: showFilters && (showFiltersAlways || !isFilterPanelLoading),
+			setShowFilters: (resolvedFilterPanel != null || isFilterPanelLoading) && !showFiltersAlways ? setShowFilters : void 0,
+			filtersId,
+			searchProps,
+			propertiesButton: enhancedPropertiesButton,
+			tableActions,
+			isLoading,
+			isFilterPanelLoading,
+			selectedRows,
+			bulkActions,
+			onClearSelection,
+			title,
+			"data-tour-target": dataTourTarget,
+			presetViews: compact ? void 0 : presetViews,
+			compact,
+			onError,
+			filterPanel: resolvedFilterPanel
 		})
 	});
-}
+};
+const Container = styled(Stack)`
+  margin-bottom: ${Spacing[2]};
+`;
+const StyledEnhancedPropertiesButton = styled.div`
+  display: flex;
+  gap: ${Spacing[1]};
+`;
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/date-range-rule-value.ts
 /**
-* The parent labels the picker's Fields submenu should keep visible,
-* derived from active `is` pills on scoping selector fields
-* ({@link FieldRegistry.narrowingSelectorFields}). Each selected option
-* value is a backend record-type/template id, resolved to its parent
-* label via {@link FieldRegistry.parentRecordLabelForId}.
-*
-* Returns `undefined` only when no `is` selector pill is active (show
-* everything). An active pill always returns an array, possibly empty:
-* selecting a scope with no custom fields narrows to *nothing*, not to
-* everything — conflating the two would leak other scopes' fields in.
+* The absolute bounds a rule should be queried with, or `null` when it does not
+* carry a date range.
 *
-* Only `is` narrows; multiple pills union their parents.
+* Relative metadata wins over the stored snapshot: the snapshot is a picture of
+* the window when it was saved, and the point of a relative rule is that the
+* window moves. The operator gate is part of this rather than the caller's job —
+* metadata only ever describes a range, so resolving it onto a scalar rule
+* would put a `{ startDate, endDate }` object where the wire expects a day.
 */
-function deriveVisibleCustomFieldParents(registry, topLevelRules) {
-	const selectorFields = registry.narrowingSelectorFields();
-	if (selectorFields.length === 0 || topLevelRules.length === 0) return;
-	const selectorIds = new Set(selectorFields.map((f) => f.id));
-	const allowedParents = /* @__PURE__ */ new Set();
-	let hasActiveSelectorRule = false;
-	for (const rule of topLevelRules) {
-		if (!selectorIds.has(rule.fieldId)) continue;
-		if (rule.operator !== "is") continue;
-		hasActiveSelectorRule = true;
-		const values = Array.isArray(rule.value) ? rule.value : [rule.value];
-		for (const value of values) {
-			if (typeof value !== "string") continue;
-			const parentLabel = registry.parentRecordLabelForId(value);
-			if (parentLabel != null) allowedParents.add(parentLabel);
-		}
-	}
-	return hasActiveSelectorRule ? Array.from(allowedParents) : void 0;
+function resolveDateRangeRuleValue(rule, fieldType) {
+	if (!carriesDateRange(rule.operator, fieldType)) return null;
+	const relative = parseDateFilterValue(rule.relativeDate);
+	if (relative?.kind === "relative") return resolveDateFilterValue(relative);
+	const parsed = parseDateFilterValue(rule.value);
+	return parsed ? resolveDateFilterValue(parsed) : null;
 }
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/FilterBar/index.ts
@@ -5490,6 +5541,6 @@ function decodeBase64(input) {
 	return decodeURIComponent(escape(atob(input)));
 }
 //#endregion
-export { dateRuleIntent as A, useTableControls as B, getOperatorsForField as C, isRangeOperator as D, isNumericComparisonOperator as E, getActiveFilters as F, DataTableCompactBar as H, isFilterActive as I, resolveFilterTypeDefinition as L, TableViewConfiguration as M, TableViewConfigurationDropdown as N, isValuelessOperator as O, FiltersContainer as P, TableControlsContext as R, getDefaultOperatorForType as S, isCompleteDateRange as T, ControlBar as V, FILTER_SIZE_TOKENS as _, encodeFilterStateToUrlParam as a, NUMERIC_COMPARISON_OPERATORS as b, FilterBar_default as c, isFilterStateV2 as d, pruneToRegistry as f, resolveValueControl as g, PillShell as h, decodeFilterStateFromUrl as i, TableControls as j, reconcileValueForOperator as k, useFilterStateV2 as l, isEmptyState as m, applyFilterStateToSearchParams as n, FieldRegistry as o, EMPTY_FILTER_STATE as p, decodeFilterStateFromString as r, buildFieldRegistry as s, FILTER_STATE_URL_PARAM as t, hasCompleteValue as u, useFilterBarSize as v, getOperatorsForType as w, emptyValueForRule as x, resolveDateRangeRuleValue as y, TableControlsProvider as z };
+export { isNumericComparisonOperator as A, useTableControls as B, useFilterBarSize as C, getOperatorsForField as D, getDefaultOperatorForType as E, getActiveFilters as F, DataTableCompactBar as H, isFilterActive as I, resolveFilterTypeDefinition as L, isValuelessOperator as M, reconcileValueForOperator as N, getOperatorsForType as O, FiltersContainer as P, TableControlsContext as R, FILTER_SIZE_TOKENS as S, emptyValueForRule as T, ControlBar as V, EMPTY_FILTER_STATE as _, encodeFilterStateToUrlParam as a, resolveValueControl as b, FilterBar_default as c, TableViewConfiguration as d, TableViewConfigurationDropdown as f, pruneToRegistry as g, isFilterStateV2 as h, decodeFilterStateFromUrl as i, isRangeOperator as j, isCompleteDateRange as k, resolveDateRangeRuleValue as l, hasCompleteValue as m, applyFilterStateToSearchParams as n, FieldRegistry as o, useFilterStateV2 as p, decodeFilterStateFromString as r, buildFieldRegistry as s, FILTER_STATE_URL_PARAM as t, TableControls as u, isEmptyState as v, NUMERIC_COMPARISON_OPERATORS as w, dateRuleIntent as x, PillShell as y, TableControlsProvider as z };
 
-//# sourceMappingURL=TableControls-DxSFqRwJ.mjs.map
+//# sourceMappingURL=TableControls-C5fNNdmT.mjs.map