@astryxdesign/core 0.7.7-canary.fc68123 → 0.7.7

package/dist/PowerSearch/PowerSearchBottomSheet.js

@@ -1,1913 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file PowerSearchBottomSheet.tsx
- * @input The field's InternalConfig, filters, onChange, the field typeahead
- *   source, and the sheet options PowerSearch forwards; BottomSheet,
- *   Button, EmptyState, Heading, Icon, IconButton, Indicator, List,
- *   RadioList, Text, TextInput, PowerSearchValueEditor, the internal sheet
- *   confirmation and search-drag owners, i18n
- * @output Exports PowerSearchBottomSheet — the touch surface of
- *   `PowerSearch experimental.presentation="bottom-sheet"`: a Filters sheet
- *   with editable rows and trailing remove actions, Add filter in its fixed
- *   header and Clear all / Done in its fixed footer, an Add filter sheet with
- *   grouped field rows or the content search with inline suggestions, and a
- *   value step that stages field → operator → value and confirms from its
- *   footer
- * @position Internal presentation surface of PowerSearch. Loaded on demand by
- *   PowerSearch.tsx so the popover presentation never carries it. The
- *   trigger lives in PowerSearch.tsx.
- *
- * The three steps are sibling standalone BottomSheets that stack: each step
- * opens above the sheet that led to it, which stays open beneath as a covered
- * sheet, so no sheet needs a Back action. A dismissal closes only the top
- * sheet and reveals the step beneath; dismissing the bottom sheet ends the
- * flow. A list value's Tokenizer opens its own sheet above the value step, as
- * the top sheet of the stack.
- *
- * The sheets pad their own content (`padding={0}` on BottomSheet). The
- * Filters and Add filter sheets keep their header and footer fixed around a
- * scroll viewport that reaches the sheet edge; its content publishes the
- * padding as container padding so `edge="bleed"` lists run edge to edge with
- * row text on the header's inset. The sheets are pinned tall: the field list
- * resizes as it is searched and the editor changes with the operator, and
- * only a fully expanded tall sheet gives mobile-keyboard accommodation.
- *
- * SYNC: When modified, update:
- * - /packages/core/src/PowerSearch/PowerSearch.tsx (the trigger and the lazy host)
- * - /docs/specs/components/PowerSearch/PowerSearch.spec.md (FR10–FR21, AR4–AR6, PR5)
- */
-import React, { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { flushSync } from 'react-dom';
-import * as stylex from '@stylexjs/stylex';
-import { BottomSheet } from "../BottomSheet/BottomSheet.js";
-import { Button } from "../Button/Button.js";
-import { EmptyState } from "../EmptyState/EmptyState.js";
-import { Heading } from "../Heading/Heading.js";
-import { Icon } from "../Icon/Icon.js";
-import { IconButton } from "../IconButton/IconButton.js";
-import { CheckboxIndicator } from "../Indicator/CheckboxIndicator.js";
-import { RadioIndicator } from "../Indicator/RadioIndicator.js";
-import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
-import { isRenderable } from "../utils/isRenderable.js";
-import { containerPaddingInlineVarStyles } from "../Layout/padding.stylex.js";
-import { List } from "../List/List.js";
-import { ListItem } from "../List/ListItem.js";
-import { RadioList } from "../RadioList/RadioList.js";
-import { RadioListItem } from "../RadioList/RadioListItem.js";
-import { Text } from "../Text/Text.js";
-import { TextInput } from "../TextInput/TextInput.js";
-import { useAnnounce } from "../hooks/useAnnounce.js";
-import { useListFormatter } from "../i18n/useListFormatter.js";
-import { useLocale } from "../i18n/useLocale.js";
-import { SheetConfirmation } from "../internal/SheetConfirmation.js";
-import { useDismissSearchOnTouchDrag } from "../internal/useDismissSearchOnTouchDrag.js";
-import "../theme/tokens.stylex.js";
-import { colorVars, fontWeightVars, radiusVars, spacingVars } from "../theme/tokens.stylex.js";
-import { isImeKeyEvent } from "../utils/ime.js";
-import { rtlStyles } from "../utils/rtlStyles.js";
-import { formatTokenValueText } from "./formatTokenValue.js";
-function resolveRelativeDateLabel(operatorValue, value, t, buildRelativeDateOptions) {
-  return buildRelativeDateOptions(operatorValue, t).find(option => option.value === value)?.label ?? value;
-}
-
-// A placeholder the Filters row formats `labelValue` with, then splits on, so
-// the value segment can render bold inside the catalog's ordering. A private
-// use code point: never part of a label or value.
-const ROW_VALUE_SLOT = '\uE000';
-import { useAnnounceRenderedText } from "../hooks/useAnnounceRenderedText.js";
-import { useInternalListFocus } from "../hooks/useListFocus.js";
-import { useMergedRefs } from "../hooks/useMergedRefs.js";
-import { groupItems } from "../utils/groupItems.js";
-import { createSheetSuggestionSource, fieldMatchesQuery, createFilterIdentities, filterSignature, isSupportedOperator, nearestEditableIndex, resolveFilterIdentityIndex } from "./powerSearchSheetUtils.js";
-import { resolveOperatorLabel } from "./resolveOperatorLabel.js";
-import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
-import english from "../i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-registerEnglishFallback(english);
-
-// =============================================================================
-// Props
-// =============================================================================
-
-/**
- * The popover presentation's editors, which the value step reuses. They come
- * from PowerSearch.tsx, whose module graph already loads them for the popover
- * presentation. Imported here, they and every component they reach would join
- * this lazily imported graph, whose modules must import Core directly and
- * never through a barrel.
- */
-
-// =============================================================================
-// Styles
-// =============================================================================
-
-// The trailing plus a field row shows when choosing it adds the filter at
-// once, and the Add filter actions' glyph. Core's default icon set has no plus.
-function PlusIcon(props) {
-  return /*#__PURE__*/_jsxs("svg", {
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 1.5,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    ...props,
-    children: [/*#__PURE__*/_jsx("path", {
-      d: "M5 12h14"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M12 5v14"
-    })]
-  });
-}
-const styles = {
-  touchAction: {
-    kAzted: "x1gg8mnh",
-    $$css: true
-  },
-  touchHitArea: {
-    "--_power-search-sheet-hit-inset": "x1o3f7l6 xhx5icg",
-    "--_power-search-sheet-hit-content": "x1bs45cr x73lxwv",
-    k5JduY: "x1oocgs0",
-    kwXMNM: "x1j6awrg",
-    kv0HGH: "xl7hj2y",
-    $$css: true
-  },
-  body: {
-    kzQI83: "x1iyjqo2",
-    k1xSpc: "x78zum5",
-    kXwgrk: "xdt5ytf",
-    kOIVth: "x18g69wz",
-    kg3NbH: "x1pzlopt",
-    kGO01o: "x1awphl8",
-    $$css: true
-  },
-  scrollContent: {
-    kAzted: "x1us19tq",
-    k1xSpc: "x78zum5",
-    kXwgrk: "xdt5ytf",
-    kOIVth: "x18g69wz",
-    kg3NbH: "x1pzlopt",
-    kGO01o: "x1awphl8",
-    $$css: true
-  },
-  footerEqualAction: {
-    kzQI83: "x1iyjqo2",
-    kCS8Yb: "x1r8uery",
-    k7Eaqz: "xeuugli",
-    kAzted: "x1gg8mnh",
-    $$css: true
-  },
-  footerSoleAction: {
-    kzQI83: "x1iyjqo2",
-    $$css: true
-  },
-  emptyState: {
-    kzQI83: "x1iyjqo2",
-    k1xSpc: "x78zum5",
-    kGNEyG: "x6s0dn4",
-    kjj79g: "xl56j7k",
-    $$css: true
-  },
-  controlSection: {
-    kmVPX3: "x1b2ylru",
-    kaIpWk: "x1hviunn",
-    kWkggS: "xwmxj5m",
-    $$css: true
-  },
-  trailingControlRow: {
-    kXwgrk: "x15zctf7",
-    $$css: true
-  },
-  nestedEditorContainer: {
-    k9g6sI: "x12h1iku",
-    kVQacm: "xb3r6kr",
-    $$css: true
-  },
-  choiceRow: {
-    k1xSpc: "x78zum5",
-    kGNEyG: "x6s0dn4",
-    kOIVth: "xjcht0a",
-    kzqmXN: "xh8yej3",
-    kAzted: "x1gg8mnh",
-    k8WAf4: "x8o8v82",
-    kZCmMZ: "x1ew2rer",
-    kwRFfy: "x19m2zy8",
-    kMzoRj: "xc342km",
-    kaIpWk: "x2u8bby",
-    kWkggS: "xjbqb8w",
-    kMwMTN: "x1tgivj0",
-    kMv6JI: "xjb2p0i",
-    k9WMMc: "x1yc453h",
-    kkrTdU: "x1ypdohk xvivl9a",
-    $$css: true
-  },
-  choiceRowDisabled: {
-    kMwMTN: "xv1l7n4 x1bhcspo",
-    $$css: true
-  },
-  choiceLabel: {
-    kzQI83: "x1iyjqo2",
-    k7Eaqz: "xeuugli",
-    $$css: true
-  }
-};
-
-// =============================================================================
-// Draft state
-// =============================================================================
-
-function resolveDraftFilterIndex(filters, draft) {
-  if (draft.mode !== 'edit' || draft.filterIndex == null || draft.sourceFilter == null || draft.sourceSignature == null) {
-    return null;
-  }
-  return resolveFilterIdentityIndex(filters, draft.sourceFilter, draft.sourceSignature, draft.filterIndex);
-}
-
-// Below this many fields a search box is noise: the whole list is on screen.
-const SEARCHABLE_FIELD_COUNT = 8;
-// Empty-query browsing keeps the popover presentation's safety ceiling.
-const MAX_BROWSE_MENU_ITEMS = 1000;
-
-// =============================================================================
-// Choice rows (enum, enum_list, date_relative)
-// =============================================================================
-
-/**
- * Rendered inside a step's BottomSheet so that `useAnnounce` resolves the
- * sheet's dialog as the enclosing modal; publishes that
- * dialog's `announce` to the flow above through `onAnnounceChange` while
- * mounted. Renders nothing.
- */
-function SheetAnnouncer({
-  onAnnounceChange
-}) {
-  const announce = useAnnounce();
-  // Hands this dialog's announce function up; the cleanup withdraws it when
-  // the step changes or the flow closes.
-  useEffect(() => {
-    onAnnounceChange(announce);
-    return () => {
-      onAnnounceChange(null);
-    };
-  }, [announce, onAnnounceChange]);
-  return null;
-}
-
-/**
- * The value step's "This filter is no longer available" message, rendered
- * inside the step's dialog. The shared own-content module reads the rendered
- * text and speaks it once per opened filter while the step is the open one.
- * Called from inside the sheet's dialog, `useAnnounce` routes it into the
- * dialog. The message is plain text, not an EmptyState, so nothing announces
- * it a second time.
- */
-function SheetEmptyMessage({
-  id,
-  message,
-  occasion,
-  isShown
-}) {
-  const ref = useRef(null);
-  useAnnounceRenderedText(ref, isShown, occasion);
-  return /*#__PURE__*/_jsx("div", {
-    ref: ref,
-    id: id,
-    ...{
-      className: "xq6koh6 x2b8uid"
-    },
-    children: /*#__PURE__*/_jsx(Text, {
-      type: "supporting",
-      color: "secondary",
-      children: message
-    })
-  });
-}
-// A radio group's one tab stop: the checked row, else the first.
-function radioTabStopOrder(list) {
-  const rows = Array.from(list.querySelectorAll('[role="radio"]'));
-  const checked = rows.find(row => row.getAttribute('aria-checked') === 'true');
-  return checked == null ? rows : [checked, ...rows.filter(row => row !== checked)];
-}
-
-/**
- * Closed vocabularies render as full-width rows with a trailing check instead
- * of the popover presentation's Selector or Tokenizer: a dropdown layer inside
- * a sheet stacks a second overlay on a surface the person is already inside.
- */
-function ChoiceRows({
-  items,
-  selected,
-  isDisabled,
-  isMultiple,
-  label,
-  onToggle
-}) {
-  // The rows carry their state as state, not as a name suffix: `radio` rows
-  // in a `radiogroup` for a single choice, `checkbox` rows in a `group` for
-  // `enum_list`, each with `aria-checked`, as the Tokenizer's sheet rows do.
-  // Disabled rows stay focusable with `aria-disabled`.
-  //
-  // Keyboard: a radio group is one tab stop — the checked row, else the
-  // first — and the arrow keys move focus and check the row they land on,
-  // wrapping; Home and End move to and check the first and last row. The
-  // shared list focus owns the tab stop and the moves; a row that takes focus
-  // from an arrow, Home or End is checked here. Space and Enter check the
-  // focused radio row and toggle a checkbox row: each row is a native
-  // `button`, whose activation fires `onClick` for both keys. A checkbox row
-  // is its own tab stop.
-  const isKeyMoveRef = useRef(false);
-  const {
-    listRef,
-    handleKeyDown,
-    handleFocus
-  } = useInternalListFocus({
-    itemSelector: '[role="radio"]',
-    orientation: 'both',
-    hasRovingTabIndex: !isMultiple,
-    tabStopOrder: radioTabStopOrder
-  });
-  const handleRadioKeyDown = event => {
-    isKeyMoveRef.current = true;
-    try {
-      handleKeyDown(event);
-    } finally {
-      isKeyMoveRef.current = false;
-    }
-  };
-  const handleRadioFocus = event => {
-    handleFocus(event);
-    if (!isKeyMoveRef.current || isDisabled) {
-      return;
-    }
-    const value = event.target.closest('[role="radio"]')?.dataset.value;
-    if (value != null && !selected.has(value)) {
-      onToggle(value, false);
-    }
-  };
-  return /*#__PURE__*/_jsx("div", {
-    ref: listRef,
-    role: isMultiple ? 'group' : 'radiogroup',
-    "aria-label": label,
-    onKeyDown: isMultiple ? undefined : handleRadioKeyDown,
-    onFocus: isMultiple ? undefined : handleRadioFocus,
-    ...{
-      className: "x78zum5 xdt5ytf xojxgvx x1fcf3bl xx6qvi6"
-    },
-    children: items.map(item => {
-      const isSelected = selected.has(item.value);
-      return /*#__PURE__*/_jsxs("button", {
-        type: "button",
-        role: isMultiple ? 'checkbox' : 'radio',
-        "aria-checked": isSelected,
-        "aria-disabled": isDisabled || undefined,
-        "data-value": item.value,
-        onClick: () => {
-          if (!isDisabled) {
-            onToggle(item.value, isSelected);
-          }
-        },
-        ...stylex.props(focusOutlineStyles.focusVisible, styles.choiceRow, isDisabled && styles.choiceRowDisabled),
-        children: [isRenderable(item.icon) && /*#__PURE__*/_jsx("span", {
-          "aria-hidden": "true",
-          ...{
-            className: "x3nfvp2 x2lah0s"
-          },
-          children: item.icon
-        }), /*#__PURE__*/_jsx(Text, {
-          type: "body",
-          color: isDisabled ? 'inherit' : undefined,
-          xstyle: styles.choiceLabel,
-          children: item.label
-        }), isMultiple ? /*#__PURE__*/_jsx(CheckboxIndicator, {
-          state: isSelected ? 'checked' : 'unchecked',
-          size: "md",
-          isDisabled: isDisabled
-        }) : /*#__PURE__*/_jsx(RadioIndicator, {
-          state: isSelected ? 'checked' : 'unchecked',
-          size: "md",
-          isDisabled: isDisabled
-        })]
-      }, item.value);
-    })
-  });
-}
-
-/**
- * The value control for one filter inside the value step. Closed vocabularies
- * are rows here; every other type is the popover presentation's own editor in
- * its sheet presentation.
- */
-function SheetValueEditor({
-  operatorValue,
-  filterValue,
-  onChange,
-  onUnstage,
-  config,
-  fieldLabel,
-  isDisabled,
-  maxMenuItems,
-  editors
-}) {
-  const {
-    buildRelativeDateOptions,
-    PowerSearchValueEditor
-  } = editors;
-  const t = useComponentTranslator();
-  const selectedValues = useMemo(() => {
-    if (filterValue?.type === 'enum' || filterValue?.type === 'date_relative') {
-      return new Set([filterValue.value]);
-    }
-    if (filterValue?.type === 'enum_list') {
-      return new Set(filterValue.value);
-    }
-    return new Set();
-  }, [filterValue]);
-  switch (operatorValue.type) {
-    case 'empty':
-    case 'nested':
-      return null;
-    case 'enum':
-      return /*#__PURE__*/_jsx(ChoiceRows, {
-        items: operatorValue.values,
-        selected: selectedValues,
-        isDisabled: isDisabled,
-        isMultiple: false,
-        label: fieldLabel,
-        onToggle: value => onChange({
-          type: 'enum',
-          value
-        })
-      });
-    case 'enum_list':
-      return /*#__PURE__*/_jsx(ChoiceRows, {
-        items: operatorValue.values,
-        selected: selectedValues,
-        isDisabled: isDisabled,
-        isMultiple: true,
-        label: fieldLabel,
-        onToggle: (value, isSelected) => {
-          const existing = filterValue?.type === 'enum_list' ? filterValue.value : [];
-          onChange({
-            type: 'enum_list',
-            value: isSelected ? existing.filter(v => v !== value) : [...existing, value]
-          });
-        }
-      });
-    case 'date_relative':
-      return /*#__PURE__*/_jsx(ChoiceRows, {
-        items: buildRelativeDateOptions(operatorValue, t),
-        selected: selectedValues,
-        isDisabled: isDisabled,
-        isMultiple: false,
-        label: fieldLabel,
-        onToggle: value => onChange({
-          type: 'date_relative',
-          value
-        })
-      });
-    case 'string':
-    case 'string_list':
-    case 'integer':
-    case 'float':
-    case 'time':
-    case 'date_absolute':
-    case 'date_range':
-    case 'entity_list':
-    case 'custom':
-      return /*#__PURE__*/_jsx("div", {
-        ...{
-          className: "xfsso4q"
-        },
-        children: /*#__PURE__*/_jsx(PowerSearchValueEditor, {
-          operatorValue: operatorValue,
-          filterValue: filterValue,
-          onChange: onChange,
-          onUnstage: onUnstage,
-          config: config,
-          maxMenuItems: maxMenuItems,
-          isDisabled: isDisabled,
-          presentation: "bottom-sheet",
-          fieldLabel: fieldLabel
-        })
-      });
-  }
-}
-
-// =============================================================================
-// Component
-// =============================================================================
-
-/**
- * The sheet flow of PowerSearch's touch presentation: Filters, Add filter,
- * and the value step, as standalone sheets that stack, each open beneath the
- * step it led to.
- */
-export function PowerSearchBottomSheet({
-  isOpen,
-  onOpenChange,
-  finalFocusRef,
-  resultCountText,
-  config,
-  configProp,
-  filters,
-  onChange,
-  searchSource,
-  placeholder,
-  isReadOnly,
-  isDisabled,
-  hasClear,
-  maxOperatorMenuItems,
-  maxSearchResults,
-  saveButtonLabel: saveButtonLabelFromProps,
-  components: componentOverrides,
-  editors
-}) {
-  const {
-    NestedEditor
-  } = editors;
-  const t = useComponentTranslator();
-  const locale = useLocale();
-  const formatList = useListFormatter();
-  const isInteractive = !isDisabled && !isReadOnly;
-  const contentSearchFieldKey = config.config.contentSearchFieldKey;
-  const contentSearchOperator = contentSearchFieldKey == null ? undefined : config.getDefaultOperator(contentSearchFieldKey);
-  const hasContentSearch = contentSearchOperator?.value.type === 'string';
-  const suggestionSource = useMemo(() => createSheetSuggestionSource(config, searchSource), [config, searchSource]);
-  const contentResultsId = useId();
-  const managerAddButtonRef = useRef(null);
-  const contentSearchRef = useRef(null);
-  const fieldSearchRef = useRef(null);
-  // The Add filter sheet's panel: the fallback focus target when the control
-  // a step came from is gone — its first focusable control, which is the
-  // search field when one shows, else the first field row.
-  const fieldsSheetRef = useRef(null);
-  // The content search and its suggestion rows are one vertical list for the
-  // arrow keys: ArrowDown from the searchbox reaches the first suggestion,
-  // ArrowUp from the first suggestion returns to the searchbox, and the ends
-  // do not wrap. Home and End stay with the searchbox's caret.
-  const contentListFocus = useInternalListFocus({
-    itemSelector: `[role="searchbox"], [id="${contentResultsId}"] button`,
-    wrap: false,
-    hasHomeEnd: false
-  });
-  const fieldsSheetCallbackRef = useMergedRefs(fieldsSheetRef, contentListFocus.listRef);
-  const handleContentListKeyDown = event => {
-    if (!isImeKeyEvent(event.nativeEvent)) {
-      contentListFocus.handleKeyDown(event);
-    }
-  };
-  const manageSheetRef = useRef(null);
-  // Where focus was inside the Filters or Add filter sheet, read on every
-  // focus change there, so a controlled update that unmounts the focused
-  // control (a filter's row, a dropped field's row, Clear all after the last
-  // filter) can put focus on the nearest remaining row by that index, else
-  // the sheet's first control, else the sheet panel. A removed element
-  // fires no blur, so the position is what the effect below reads.
-  const lastSheetFocusRef = useRef(null);
-  // One index space for the record and the recovery: rows that are buttons
-  // (a plain read-only row is passed over, as the removal and Apply/Cancel
-  // rules pass it over), in document order.
-  const buttonRowsOf = panel => Array.from(panel.querySelectorAll('li')).map(row => row.querySelector('button')).filter(button => button != null);
-  const noteSheetFocus = useCallback(sheet => event => {
-    const row = event.target.closest('li');
-    const button = row?.querySelector('button') ?? null;
-    const rowIndex = button == null ? -1 : buttonRowsOf(event.currentTarget).indexOf(button);
-    lastSheetFocusRef.current = {
-      sheet,
-      rowIndex: rowIndex === -1 ? null : rowIndex
-    };
-  }, []);
-  const managerRowsRef = useRef(new Map());
-  const fieldRowsRef = useRef(new Map());
-  const latestFiltersRef = useRef(filters);
-  const pendingSheetFocusRef = useRef(null);
-  const pendingMutationFocusRef = useRef(false);
-
-  // The step an open starts on: Add filter directly when an interactive field
-  // has nothing to manage yet, otherwise Filters. Neither search field takes
-  // focus on open, so the software keyboard stays down until the person taps
-  // the search. Add filter opened directly is the flow's entry point: no
-  // Filters sheet beneath it, and Done in its footer.
-  const isEntryAddFilter = filters.length === 0 && isInteractive;
-  const [step, setStep] = useState(() => isOpen ? isEntryAddFilter ? 'fields' : 'manage' : null);
-  const [fieldPickerOrigin, setFieldPickerOrigin] = useState(() => isOpen && isEntryAddFilter ? 'trigger' : 'manage');
-  // The current step, read by the sheets' close reports and by a removal that
-  // decides where to speak.
-  const stepRef = useRef(step);
-  useLayoutEffect(() => {
-    stepRef.current = step;
-  }, [step]);
-  // The draft outlives a step change on purpose: a closing value step stays
-  // presented through its exit, and clearing the draft with the step would
-  // blank that sheet mid-transition.
-  const [draft, setDraft] = useState(null);
-  const draftGenerationRef = useRef(0);
-  const nextDraftGeneration = useCallback(() => {
-    draftGenerationRef.current += 1;
-    return draftGenerationRef.current;
-  }, []);
-  const [fieldQuery, setFieldQuery] = useState('');
-  const [contentQuery, setContentQuery] = useState('');
-  const [isClearConfirmationOpen, setIsClearConfirmationOpen] = useState(false);
-  const clearAllButtonRef = useRef(null);
-  // Set while Clear all commits, so the result count that changes in that
-  // commit is spoken with Clear all's outcome, as one message.
-  const isClearingRef = useRef(false);
-
-  // `useAnnounce` delivers inside the open Astryx modal that encloses its
-  // caller, and this component renders above the
-  // sheets, so it cannot call the hook itself. Each step's body renders a
-  // `SheetAnnouncer` inside its BottomSheet, which publishes the dialog's own
-  // `announce` here while that step is the active one; the effects below
-  // speak through it, so every message about a sheet's content is delivered
-  // in that sheet's dialog.
-  const announceRef = useRef(null);
-  const handleAnnounceChange = useCallback(next => {
-    announceRef.current = next;
-  }, []);
-  const announce = useCallback(message => {
-    announceRef.current?.(message);
-  }, []);
-  const pendingAnnouncementRef = useRef(null);
-
-  // The controlled `isOpen` opens and closes the flow; the step follows it in
-  // the render that sees the change, not an effect, so the entry step's sheet
-  // opens in the same commit as the flow (React's adjust-state-on-
-  // prop-change pattern). Closing from outside — the field became disabled —
-  // ends the flow wherever it was, the Clear all confirmation included.
-  const [wasOpen, setWasOpen] = useState(isOpen);
-  if (isOpen !== wasOpen) {
-    setWasOpen(isOpen);
-    if (isOpen) {
-      setFieldQuery('');
-      setContentQuery('');
-      setStep(isEntryAddFilter ? 'fields' : 'manage');
-      setFieldPickerOrigin(isEntryAddFilter ? 'trigger' : 'manage');
-    } else {
-      setStep(null);
-      setIsClearConfirmationOpen(false);
-    }
-  }
-  const closeFlow = useCallback(() => {
-    pendingSheetFocusRef.current = null;
-    setStep(null);
-    onOpenChange(false);
-  }, [onOpenChange]);
-
-  // Whether a Filters row is a button: the field interactive and the
-  // filter not read-only. The row opens the value step — the editor for its
-  // operator's value type, the built-in nested editor for a `nested` one, or
-  // for a filter the config no longer knows the unavailable state — and its
-  // trailing remove action removes it, as the popover's token has its × for
-  // it.
-  const isRowButton = useCallback(filter => !filter.isReadOnly && isInteractive, [isInteractive]);
-
-  // ------------------------------------------------------------------ focus --
-
-  // The control a step change named also becomes where the closing step
-  // sheets return focus when their exit ends: a closing sheet that held focus
-  // keeps it until then, and BottomSheet then returns it, so the named control
-  // receives it even when the first move could not land. With no control
-  // named, the closing steps return focus as the flow does.
-  const stepReturnTargetRef = useRef(null);
-  const stepFinalFocusRef = useMemo(() => ({
-    get current() {
-      return stepReturnTargetRef.current ?? finalFocusRef.current;
-    }
-  }), [finalFocusRef]);
-  const placeFocus = element => {
-    if (element == null) {
-      return;
-    }
-    stepReturnTargetRef.current = element;
-    element.focus({
-      preventScroll: true
-    });
-  };
-  const focusPendingSheetTarget = useCallback(() => {
-    const target = pendingSheetFocusRef.current;
-    if (target == null) {
-      return;
-    }
-    pendingSheetFocusRef.current = null;
-    if (target.type === 'manager-add') {
-      placeFocus(managerAddButtonRef.current);
-      return;
-    }
-    // Add filter's fallback: a controlled update may have removed the field
-    // whose row opened the step, or the content-search field itself; the
-    // sheet's first focusable control then takes focus — the search field
-    // when one shows, else the first field row.
-    const firstFieldsControl = () => {
-      const panel = fieldsSheetRef.current;
-      return panel?.querySelector('input') ?? panel?.querySelector('li button') ?? panel?.querySelector('button') ?? null;
-    };
-    if (target.type === 'content-search') {
-      placeFocus(contentSearchRef.current?.querySelector('input') ?? firstFieldsControl());
-      return;
-    }
-    if (target.type === 'field') {
-      placeFocus(fieldRowsRef.current.get(target.fieldKey)?.querySelector('button') ?? firstFieldsControl());
-      return;
-    }
-    // The row the step came from, followed across a controlled reorder or
-    // clone; when a controlled update removed it, or left two filters it
-    // could be, the nearest remaining row that is a button, as after a
-    // removal; else Add filter.
-    const index = resolveFilterIdentityIndex(latestFiltersRef.current, target.sourceFilter, target.sourceSignature, target.preferredIndex) ?? nearestEditableIndex(latestFiltersRef.current, target.preferredIndex, isRowButton);
-    const row = index == null ? null : managerRowsRef.current.get(index);
-    const rowButton = target.part === 'remove' ? row?.querySelector('[data-sheet-remove]') ?? row?.querySelector('button') : row?.querySelector('button');
-    placeFocus(rowButton ?? managerAddButtonRef.current);
-  }, [isRowButton]);
-
-  // A controlled update that unmounts the focused control of the Filters or
-  // Add filter sheet leaves focus on the page body inside the open modal.
-  // Read before paint on every commit of an open step: when focus is no
-  // longer inside the sheet's dialog, the nearest remaining row by the last
-  // focused index takes it, else the sheet's first control, else its panel.
-  // The pending-target effects below run after and win when a step
-  // change named a control.
-  useLayoutEffect(() => {
-    const last = lastSheetFocusRef.current;
-    if (step !== 'manage' && step !== 'fields') {
-      return;
-    }
-    if (last == null || last.sheet !== step) {
-      return;
-    }
-    const panel = step === 'manage' ? manageSheetRef.current : fieldsSheetRef.current;
-    const dialog = panel?.closest('dialog');
-    const active = document.activeElement;
-    if (panel == null || dialog == null || active != null && active !== document.body && dialog.contains(active)) {
-      return;
-    }
-    const rowButtons = buttonRowsOf(panel);
-    let target = null;
-    if (last.rowIndex != null && rowButtons.length > 0) {
-      // The following button row, else the last.
-      target = rowButtons[Math.min(last.rowIndex, rowButtons.length - 1)];
-    }
-    target ??= panel.querySelector('input') ?? rowButtons[0] ?? panel.querySelector('button') ?? null;
-    if (target != null) {
-      target.focus({
-        preventScroll: true
-      });
-    } else {
-      const focusable = dialog.querySelector('[tabindex="-1"]');
-      (focusable ?? dialog).focus({
-        preventScroll: true
-      });
-    }
-  });
-
-  // Both Effects move focus inside the entering sheet — the external system
-  // is the document's focus — to the control the step named. They run after
-  // the entering sheet's own
-  // panel focus (child effects commit first), so the intended control wins,
-  // and they acquire nothing, so they need no cleanup. The filters effect is
-  // declared first so a mutation that lands in the same commit as the step
-  // change resolves its row against the new filters.
-  useEffect(() => {
-    latestFiltersRef.current = filters;
-    if (step === 'manage' && pendingMutationFocusRef.current) {
-      pendingMutationFocusRef.current = false;
-      focusPendingSheetTarget();
-    }
-  }, [filters, focusPendingSheetTarget, step]);
-
-  // A target still pending when the flow closes, such as a commit that
-  // disabled the field, never carries into the next open.
-  useEffect(() => {
-    if (step == null) {
-      stepReturnTargetRef.current = null;
-      pendingSheetFocusRef.current = null;
-      return;
-    }
-    // A step that opens starts with no named return target; a return to
-    // Filters keeps the one its commit, or its removal, has just named.
-    if (step !== 'manage') {
-      stepReturnTargetRef.current = null;
-    }
-    focusPendingSheetTarget();
-  }, [focusPendingSheetTarget, step]);
-
-  // An announcement queued by a step change — a suggestion or a removal that
-  // changed the filters — is spoken in the commit that shows the next step,
-  // so it lands in that step's dialog region rather than the one about to
-  // close. It synchronizes the live region named above and acquires nothing.
-  useEffect(() => {
-    const message = pendingAnnouncementRef.current;
-    if (step != null && message != null) {
-      pendingAnnouncementRef.current = null;
-      announce(message);
-    }
-  }, [announce, step]);
-
-  // ----------------------------------------------------------------- fields --
-
-  // Every visible field lists: the value step edits every operator's value,
-  // `nested` through the popover's built-in editor.
-  const fields = useMemo(() => config.getVisibleFields(), [config]);
-  const normalizedFieldQuery = fieldQuery.trim().toLowerCase();
-  const matchingFields = useMemo(() => {
-    const matches = fields.filter(field => fieldMatchesQuery(field, normalizedFieldQuery));
-    return normalizedFieldQuery === '' ? matches : matches.slice(0, maxSearchResults);
-  }, [fields, maxSearchResults, normalizedFieldQuery]);
-
-  // Ungrouped fields first, then each group in first-appearance order — the
-  // same grouping the popover presentation's field suggestions use
-  // (`groupItems` with `ungroupedFirst`), so the two presentations
-  // list a config's fields in one order.
-  const groupedFields = useMemo(() => matchingFields.length === 0 ? [] : groupItems(matchingFields.map(field => ({
-    id: field.key,
-    label: field.label,
-    auxiliaryData: {
-      group: field.group
-    },
-    field
-  })), {
-    ungroupedFirst: true
-  }).map(group => [group.heading ?? '', group.items.map(item => item.field)]), [matchingFields]);
-  const isFieldSearchShown = fields.length >= SEARCHABLE_FIELD_COUNT;
-
-  // A field whose only operator takes an `empty` value is a one-tap filter:
-  // its row adds it with no value step, and shows a plus, not a chevron.
-  const isImmediateAddField = useCallback(field => {
-    const operators = config.getVisibleOperators(field.key);
-    return operators.length === 1 && operators[0].value.type === 'empty';
-  }, [config]);
-
-  // The steps stack: each opens above the sheet that led to it, which stays
-  // open beneath. Add filter entered directly has no Filters sheet beneath.
-  const isFieldPickerDirectEntry = fieldPickerOrigin === 'trigger';
-  const isManageSheetOpen = step === 'manage' || step === 'fields' && !isFieldPickerDirectEntry || step === 'value' && (draft?.mode === 'edit' || !isFieldPickerDirectEntry);
-  const isFieldsSheetOpen = step === 'fields' || step === 'value' && draft?.mode === 'create';
-
-  // The suggestions derive synchronously from the config, so a list never
-  // waits on a request: an empty list means an empty result, not a pending
-  // one. They stay listed while the value step covers Add filter.
-  const contentResults = useMemo(() => {
-    if (!isFieldsSheetOpen || !hasContentSearch || !isInteractive) {
-      return [];
-    }
-    const results = contentQuery.trim() === '' ? suggestionSource.bootstrap() : suggestionSource.search(contentQuery);
-    return results.slice(0, MAX_BROWSE_MENU_ITEMS);
-  }, [contentQuery, hasContentSearch, isFieldsSheetOpen, isInteractive, suggestionSource]);
-
-  // The field's result count, while a sheet is open: the owner's own Effect
-  // is quiet then, so the change is spoken here, inside the dialog. Only a
-  // change after the flow opened is spoken.
-  const announcedResultCountRef = useRef(resultCountText);
-  // The latest result count, for Clear all's handler to read after its
-  // commit has flushed.
-  const latestResultCountRef = useRef(resultCountText);
-  useLayoutEffect(() => {
-    latestResultCountRef.current = resultCountText;
-  }, [resultCountText]);
-  useEffect(() => {
-    if (isClearingRef.current || resultCountText === announcedResultCountRef.current) {
-      return;
-    }
-    announcedResultCountRef.current = resultCountText;
-    if (step != null && resultCountText != null) {
-      announce(resultCountText);
-    }
-  }, [announce, resultCountText, step]);
-
-  // ------------------------------------------------------------------ draft --
-
-  const draftField = draft ? config.getField(draft.field) : undefined;
-  const draftOperator = draft?.operator != null ? config.getOperator(draft.field, draft.operator) : undefined;
-  const draftOperators = useMemo(() => draft ? config.getVisibleOperators(draft.field) : [], [config, draft]);
-
-  // The two parts of a Filters row's text for `filter`: "{field} {operator}"
-  // as one catalog message, and the value as the popover presentation's
-  // token shows it — the same function, so the same words and the same zone
-  // handling, before the token's width budget. The rows render these, and
-  // the removal announcement joins them, so the three can never
-  // disagree.
-  const describeFilterParts = useCallback(filter => {
-    const field = config.getField(filter.field);
-    const operator = config.getOperator(filter.field, filter.operator);
-    // A filter whose field or operator the config no longer has still
-    // lists, by its raw keys, as its token does on the trigger; its row
-    // opens the unavailable step, and its trailing remove action removes
-    // it.
-    const fieldLabel = field?.label ?? filter.field;
-    const operatorLabel = operator == null ? filter.operator : resolveOperatorLabel(operator, t);
-    const label = operatorLabel ? t('@astryx.powersearch.sheet.fieldOperator', {
-      field: fieldLabel,
-      operator: operatorLabel
-    }) : fieldLabel;
-    if (operator == null) {
-      return {
-        label,
-        value: null
-      };
-    }
-    // A relative-date value is stored as a key (`3d_ago`); the row reads it
-    // as the value step's choice row does ("3 days ago"), through the
-    // catalog's relative-date messages, so the sheet agrees with itself. The popover token
-    // shows the stored key (a known gap of the record).
-    const value = operator.value.type === 'date_relative' && filter.value.type === 'date_relative' ? resolveRelativeDateLabel(operator.value, filter.value.value, t, editors.buildRelativeDateOptions) : formatTokenValueText(operator.value, filter.value, Number.MAX_SAFE_INTEGER, locale, t, formatList);
-    return {
-      label,
-      value
-    };
-  }, [config, editors, formatList, locale, t]);
-  const describeFilter = useCallback(filter => {
-    const parts = describeFilterParts(filter);
-    return parts.value ? t('@astryx.powersearch.sheet.labelValue', {
-      label: parts.label,
-      value: parts.value
-    }) : parts.label;
-  }, [describeFilterParts, t]);
-  const openFieldList = useCallback(() => {
-    if (!isInteractive) {
-      return;
-    }
-    setFieldPickerOrigin('manage');
-    setFieldQuery('');
-    setContentQuery('');
-    pendingSheetFocusRef.current = null;
-    setStep('fields');
-  }, [isInteractive]);
-  const queueManagerAddFocus = useCallback(() => {
-    pendingSheetFocusRef.current = {
-      type: 'manager-add'
-    };
-  }, []);
-  const commitSavedFilter = useCallback((next, filter) => {
-    if (!isInteractive) {
-      queueManagerAddFocus();
-      setStep('manage');
-      return;
-    }
-    if (next.mode === 'edit') {
-      const filterIndex = resolveDraftFilterIndex(filters, next);
-      const currentFilter = filterIndex == null ? undefined : filters[filterIndex];
-      if (filterIndex == null || currentFilter == null || currentFilter.isReadOnly) {
-        // A controlled update removed the edited filter, or left two it
-        // could be, or made it read-only: nothing is written, and focus
-        // returns to the nearest row that is a button around where it was,
-        // else Add filter.
-        pendingSheetFocusRef.current = next.sourceFilter != null && next.sourceSignature != null && next.filterIndex != null ? {
-          type: 'manager-filter',
-          sourceFilter: next.sourceFilter,
-          sourceSignature: next.sourceSignature,
-          preferredIndex: next.filterIndex
-        } : {
-          type: 'manager-add'
-        };
-        setStep('manage');
-        return;
-      }
-      pendingSheetFocusRef.current = {
-        type: 'manager-filter',
-        sourceFilter: filter,
-        sourceSignature: filterSignature(filter),
-        preferredIndex: filterIndex
-      };
-      const updated = [...filters];
-      updated[filterIndex] = filter;
-      onChange(updated, 'edit', filterIndex);
-    } else {
-      queueManagerAddFocus();
-      onChange([...filters, filter], 'add', filters.length);
-    }
-    setStep('manage');
-  }, [filters, isInteractive, onChange, queueManagerAddFocus]);
-
-  // Opening a new filter can come from a field row or a content-search
-  // suggestion. The origin is kept so Cancel returns to the control the person
-  // came from.
-  const openCreateEditor = useCallback((field, operator, returnFocus = 'field') => {
-    setDraft({
-      mode: 'create',
-      generation: nextDraftGeneration(),
-      returnFocus,
-      field: field.key,
-      operator: operator.key,
-      value: operator.value.type === 'empty' ? {
-        type: 'empty'
-      } : undefined
-    });
-    pendingSheetFocusRef.current = null;
-    setStep('value');
-  }, [nextDraftGeneration]);
-  const handleFieldSelect = useCallback(field => {
-    if (!isInteractive) {
-      return;
-    }
-    // A one-tap filter has nothing to stage: choosing its field adds it
-    // and returns to Filters.
-    if (isImmediateAddField(field)) {
-      const [operator] = config.getVisibleOperators(field.key);
-      const nextFilter = {
-        field: field.key,
-        operator: operator.key,
-        value: {
-          type: 'empty'
-        }
-      };
-      pendingSheetFocusRef.current = {
-        type: 'manager-filter',
-        sourceFilter: nextFilter,
-        sourceSignature: filterSignature(nextFilter),
-        preferredIndex: filters.length
-      };
-      pendingMutationFocusRef.current = true;
-      onChange([...filters, nextFilter], 'add', filters.length);
-      pendingAnnouncementRef.current = t('@astryx.tokenizer.tokenAdded', {
-        label: describeFilter(nextFilter)
-      });
-      setStep('manage');
-      return;
-    }
-    const operator = config.getDefaultOperator(field.key) ?? field.operators[0];
-    if (operator == null) {
-      return;
-    }
-    openCreateEditor(field, operator);
-  }, [config, describeFilter, filters, isImmediateAddField, isInteractive, onChange, openCreateEditor, t]);
-  const handleContentSuggestionSelect = useCallback(item => {
-    if (!isInteractive || item?.auxiliaryData == null) {
-      return;
-    }
-    const {
-      fieldKey,
-      filterValue,
-      operatorKey
-    } = item.auxiliaryData;
-    const field = config.getField(fieldKey);
-    const operator = operatorKey == null ? config.getDefaultOperator(fieldKey) : config.getOperator(fieldKey, operatorKey);
-    if (field == null || operator == null) {
-      return;
-    }
-    setContentQuery('');
-    if (filterValue != null) {
-      const nextFilter = {
-        field: field.key,
-        operator: operator.key,
-        value: filterValue
-      };
-      pendingSheetFocusRef.current = {
-        type: 'manager-filter',
-        sourceFilter: nextFilter,
-        sourceSignature: filterSignature(nextFilter),
-        preferredIndex: filters.length
-      };
-      pendingMutationFocusRef.current = true;
-      onChange([...filters, nextFilter], 'add', filters.length);
-      // The same announcement the popover presentation's typeahead add
-      // makes, so assistive technology hears one phrase for one outcome;
-      // spoken once the Filters sheet is the open dialog.
-      pendingAnnouncementRef.current = t('@astryx.tokenizer.tokenAdded', {
-        label: item.label
-      });
-      setStep('manage');
-      return;
-    }
-    openCreateEditor(field, operator, 'content-search');
-  }, [config, filters, isInteractive, onChange, openCreateEditor, t]);
-  const handleFilterEdit = useCallback(index => {
-    const filter = filters[index];
-    if (!isInteractive || filter == null || filter.isReadOnly) {
-      return;
-    }
-    setDraft({
-      mode: 'edit',
-      generation: nextDraftGeneration(),
-      filterIndex: index,
-      sourceFilter: filter,
-      sourceSignature: filterSignature(filter),
-      field: filter.field,
-      operator: filter.operator,
-      value: filter.value
-    });
-    pendingSheetFocusRef.current = null;
-    setStep('value');
-  }, [filters, isInteractive, nextDraftGeneration]);
-  const handleRemoveFilter = useCallback(index => {
-    const filter = filters[index];
-    if (!isInteractive || filter == null || filter.isReadOnly) {
-      return;
-    }
-    const nextFilters = filters.filter((_, i) => i !== index);
-    const nextIndex = nearestEditableIndex(nextFilters, index, isRowButton);
-    if (nextIndex == null) {
-      pendingSheetFocusRef.current = {
-        type: 'manager-add'
-      };
-    } else {
-      const nextFilter = nextFilters[nextIndex];
-      pendingSheetFocusRef.current = {
-        type: 'manager-filter',
-        sourceFilter: nextFilter,
-        sourceSignature: filterSignature(nextFilter),
-        preferredIndex: nextIndex,
-        part: 'remove'
-      };
-    }
-    pendingMutationFocusRef.current = true;
-    onChange(nextFilters, 'remove', index);
-    // The popover presentation's token × announces the same phrase. A
-    // removal from a Filters row stays in that sheet and speaks at once; a
-    // caller's Editor that removes while returning to Filters speaks once
-    // the Filters sheet is the open dialog.
-    const message = t('@astryx.tokenizer.tokenRemoved', {
-      label: describeFilter(filter)
-    });
-    if (stepRef.current === 'manage') {
-      announce(message);
-    } else {
-      pendingAnnouncementRef.current = message;
-    }
-  }, [announce, describeFilter, filters, isInteractive, isRowButton, onChange, t]);
-
-  // Closing Clear all's confirmation. Kept, focus returns to Clear all.
-  // Confirmed, Clear all removes the filters the person can edit and keeps
-  // read-only ones, which are the consumer's: one `remove` at the first
-  // removed index. The Filters sheet stays open for further editing. The
-  // confirmation must be gone before focus moves into the sheet and the
-  // outcome is routed into the sheet's region, so its close is flushed
-  // first. The outcome is "Editable filters removed" while a read-only filter
-  // remains, otherwise "All filters removed", joined with a result count that
-  // changed in the same commit as one catalog message; focus moves to the
-  // sheet's first remaining control: a kept read-only row has none, so Add
-  // filter.
-  const closeClearConfirmation = confirmed => {
-    const kept = filters.filter(filter => filter.isReadOnly);
-    const firstRemovedIndex = filters.findIndex(filter => !filter.isReadOnly);
-    const isClearing = confirmed && isInteractive && firstRemovedIndex >= 0;
-    isClearingRef.current = isClearing;
-    try {
-      // eslint-disable-next-line @eslint-react/dom-no-flush-sync -- the confirmation must be gone before focus moves into the sheet and the words are routed into it
-      flushSync(() => {
-        setIsClearConfirmationOpen(false);
-        if (isClearing) {
-          onChange(kept, 'remove', firstRemovedIndex);
-        }
-      });
-    } finally {
-      isClearingRef.current = false;
-    }
-    if (!isClearing) {
-      clearAllButtonRef.current?.focus();
-      return;
-    }
-    managerAddButtonRef.current?.focus({
-      preventScroll: true
-    });
-    const resultCount = latestResultCountRef.current;
-    const changedCount = resultCount !== announcedResultCountRef.current ? resultCount : null;
-    announcedResultCountRef.current = resultCount;
-    if (kept.length > 0) {
-      announce(changedCount == null ? t('@astryx.powersearch.editableFiltersRemoved') : t('@astryx.powersearch.sheet.editableFiltersClearedWithCount', {
-        resultCount: changedCount
-      }));
-    } else {
-      announce(changedCount == null ? t('@astryx.powersearch.allFiltersRemoved') : t('@astryx.powersearch.sheet.filtersClearedWithCount', {
-        resultCount: changedCount
-      }));
-    }
-  };
-  const handleOperatorSelect = useCallback(operator => {
-    setDraft(current => {
-      if (current == null) {
-        return current;
-      }
-      // A value survives an operator change only when the new operator
-      // reads the same value type.
-      const keepsValue = current.value != null && current.value.type === operator.value.type;
-      return {
-        ...current,
-        operator: operator.key,
-        value: operator.value.type === 'empty' ? {
-          type: 'empty'
-        } : keepsValue ? current.value : undefined
-      };
-    });
-  }, []);
-  const handleDraftValueChange = useCallback(value => {
-    setDraft(current => current == null ? current : {
-      ...current,
-      value
-    });
-  }, []);
-  // The number input's draft was cleared or stopped parsing: nothing stands
-  // to confirm, so the confirm action disables again.
-  const handleDraftUnstage = useCallback(() => {
-    setDraft(current => current == null ? current : {
-      ...current,
-      value: undefined
-    });
-  }, []);
-  const handleSave = useCallback(() => {
-    if (draft?.value == null || draft.operator == null) {
-      return;
-    }
-    commitSavedFilter(draft, {
-      field: draft.field,
-      operator: draft.operator,
-      value: draft.value
-    });
-  }, [commitSavedFilter, draft]);
-  const returnFromValue = useCallback(() => {
-    if (draft == null) {
-      queueManagerAddFocus();
-      setStep('manage');
-      return;
-    }
-    if (draft.mode === 'edit' && draft.sourceFilter != null && draft.sourceSignature != null && draft.filterIndex != null) {
-      pendingSheetFocusRef.current = {
-        type: 'manager-filter',
-        sourceFilter: draft.sourceFilter,
-        sourceSignature: draft.sourceSignature,
-        preferredIndex: resolveDraftFilterIndex(filters, draft) ?? draft.filterIndex
-      };
-      setStep('manage');
-      return;
-    }
-    if (draft.returnFocus === 'content-search') {
-      pendingSheetFocusRef.current = {
-        type: 'content-search'
-      };
-      setStep('fields');
-      return;
-    }
-    pendingSheetFocusRef.current = {
-      type: 'field',
-      fieldKey: draft.field
-    };
-    setStep('fields');
-  }, [draft, filters, queueManagerAddFocus]);
-  const handleRemove = useCallback(() => {
-    if (draft?.mode !== 'edit') {
-      return;
-    }
-    const filterIndex = resolveDraftFilterIndex(filters, draft);
-    if (filterIndex == null || filters[filterIndex]?.isReadOnly) {
-      queueManagerAddFocus();
-      setStep('manage');
-      return;
-    }
-    handleRemoveFilter(filterIndex);
-    setStep('manage');
-  }, [draft, filters, handleRemoveFilter, queueManagerAddFocus]);
-
-  // Each step sheet is controlled by `step`; a sheet only ever asks to close
-  // (a dismissal its `purpose` allows: Escape, the scrim, a swipe, a platform
-  // close request), which only the top sheet of the stack receives. Closing
-  // the top step reveals the step beneath it; closing the bottom one ends the
-  // flow. A stale report from a step that is no longer current is ignored.
-  // Every step change goes through the handlers above.
-  const handleManageOpenChange = useCallback(isSheetOpen => {
-    if (!isSheetOpen && stepRef.current === 'manage') {
-      closeFlow();
-    }
-  }, [closeFlow]);
-  const handleFieldsOpenChange = useCallback(isSheetOpen => {
-    if (isSheetOpen || stepRef.current !== 'fields') {
-      return;
-    }
-    if (fieldPickerOrigin === 'trigger') {
-      closeFlow();
-      return;
-    }
-    queueManagerAddFocus();
-    setStep('manage');
-  }, [closeFlow, fieldPickerOrigin, queueManagerAddFocus]);
-  const handleValueOpenChange = useCallback(isSheetOpen => {
-    if (!isSheetOpen && stepRef.current === 'value') {
-      returnFromValue();
-    }
-  }, [returnFromValue]);
-
-  // ---------------------------------------------------------------- render --
-
-  // Rows are keyed by filter identity, not position: a parent's reorder or a
-  // removal above the focused row then moves elements instead of remounting
-  // them, and focus stays on the same filter. Only a filter that is
-  // itself removed loses its element, and the re-home effect above takes
-  // over.
-  const [filterIdentities] = useState(createFilterIdentities);
-  const filterIds = filterIdentities.next(filters);
-  const filterRows = filters.map((filter, index) => {
-    const {
-      label,
-      value
-    } = describeFilterParts(filter);
-    const isEditable = isRowButton(filter);
-    // The row reads from the same catalog message the removal announcement
-    // uses (`labelValue`), so a locale that reorders it reorders both: the
-    // message is formatted with a placeholder for the value, and the text
-    // either side of that placeholder wraps the bold value.
-    let displayLabel = label;
-    if (value) {
-      const [before, after] = t('@astryx.powersearch.sheet.labelValue', {
-        label,
-        value: ROW_VALUE_SLOT
-      }).split(ROW_VALUE_SLOT);
-      displayLabel = /*#__PURE__*/_jsxs(_Fragment, {
-        children: [before, /*#__PURE__*/_jsx("span", {
-          ...{
-            className: "x1lvx875"
-          },
-          children: value
-        }), after]
-      });
-    }
-    return {
-      displayLabel,
-      filter,
-      index,
-      isEditable,
-      key: `filter-${filterIds[index]}`
-    };
-  });
-  const hasRemovableFilter = filters.some(filter => !filter.isReadOnly);
-  const isClearAllShown = hasClear && isInteractive && hasRemovableFilter;
-  const EditorOverride = draftOperator != null ? componentOverrides?.[draftOperator.value.type]?.Editor : undefined;
-  const draftOperatorLabel = draftOperator == null ? '' : resolveOperatorLabel(draftOperator, t);
-  // The title names the filter's own operator when the step offers no
-  // Operator group: one visible operator, or an operator the config no longer
-  // lists as visible. The step then never shows another operator's name.
-  const showsOperatorGroup = draftOperators.length > 1 && draftOperator != null && draftOperators.includes(draftOperator);
-  // The title — the dialog's name — reads the field and operator as
-  // the Filters row does: by their labels, or, for a filter whose field or
-  // operator the config no longer has, by the raw keys the row shows.
-  const editorTitle = draft == null ? t('@astryx.powersearch.sheet.addFilter') : draftField == null || draftOperator == null && draft.operator != null ? t('@astryx.powersearch.sheet.fieldOperator', {
-    field: draftField?.label ?? draft.field,
-    operator: draftOperatorLabel !== '' ? draftOperatorLabel : draft.operator ?? ''
-  }).trim() : !showsOperatorGroup && draftOperatorLabel !== '' ? t('@astryx.powersearch.sheet.fieldOperator', {
-    field: draftField.label,
-    operator: draftOperatorLabel
-  }) : draftField.label;
-  const saveButtonLabel = saveButtonLabelFromProps ?? (draft?.mode === 'edit' ? t('@astryx.powersearch.editor.apply') : t('@astryx.powersearch.sheet.addFilter'));
-
-  // Every sheet body: padded, and publishing that padding to its lists.
-  const bodyProps = stylex.props(styles.body, containerPaddingInlineVarStyles[4]);
-  const scrollContentProps = stylex.props(styles.scrollContent, containerPaddingInlineVarStyles[4]);
-  const controlSectionProps = stylex.props(styles.controlSection, containerPaddingInlineVarStyles[3]);
-
-  // A vertical touch drag on the Add filter rows moves focus off a focused
-  // search to the sheet, so the software keyboard leaves and the rows can be
-  // read.
-  const fieldPickerDragProps = useDismissSearchOnTouchDrag(() => [contentSearchRef.current?.querySelector('input'), fieldSearchRef.current?.querySelector('input')], () => fieldsSheetRef.current?.closest('[tabindex="-1"]'));
-  const isEditorDisabled = isDisabled || isReadOnly;
-  const isSaveDisabled = isEditorDisabled || draft?.operator == null || draft.value == null;
-  // The step has something to edit when the field and operator still exist
-  // (a controlled config update can remove either). A caller's `Editor`
-  // override replaces the body for its value type with the props the popover
-  // hands it; otherwise a `nested` value takes the popover's built-in
-  // NestedEditor and every other type the sheet's own control.
-  const isDraftRenderable = draft != null && draftField != null && draftOperator != null;
-  const isDraftNested = isDraftRenderable && !isSupportedOperator(draftOperator);
-  // A controlled config update that removes the field or operator being
-  // edited replaces the step's body with the unavailable state while focus
-  // may be on one of the body's controls, which unmount without a blur. Focus
-  // then moves to Cancel, the way back to the Filters row whose remove action
-  // is the removal path, so it never falls to the page body inside the open
-  // sheet. The message itself is announced by its rendered element.
-  const cancelButtonRef = useRef(null);
-  const wasDraftRenderableRef = useRef(isDraftRenderable);
-  useLayoutEffect(() => {
-    const becameUnavailable = wasDraftRenderableRef.current && !isDraftRenderable && draft != null;
-    wasDraftRenderableRef.current = isDraftRenderable;
-    if (!becameUnavailable || step !== 'value') {
-      return;
-    }
-    const active = document.activeElement;
-    const dialog = cancelButtonRef.current?.closest('dialog');
-    if (dialog != null && active != null && dialog.contains(active)) {
-      return;
-    }
-    cancelButtonRef.current?.focus();
-  }, [draft, isDraftRenderable, step]);
-  // The operator group stays outside either editor, so switching operators
-  // swaps the body — a `nested` operator beside a plain one included.
-  const operatorGroup = isDraftRenderable && showsOperatorGroup && /*#__PURE__*/_jsx(RadioList, {
-    label: t('@astryx.powersearch.editor.operator'),
-    isLabelHidden: true,
-    value: draft.operator ?? '',
-    onChange: operatorKey => {
-      const operator = draftOperators.find(candidate => candidate.key === operatorKey);
-      if (operator != null) {
-        handleOperatorSelect(operator);
-      }
-    },
-    isDisabled: isEditorDisabled,
-    children: draftOperators.map(operator => /*#__PURE__*/_jsx(RadioListItem, {
-      label: t('@astryx.powersearch.sheet.fieldOperator', {
-        field: draftField.label,
-        operator: resolveOperatorLabel(operator, t)
-      }),
-      value: operator.key,
-      xstyle: styles.trailingControlRow
-    }, operator.key))
-  });
-  // The step's Operator group owns the operator choice, so the built-in
-  // nested editor's root operator picker is hidden and its root shows the
-  // checked operator's label.
-  const nestedOperatorOptions = useMemo(() => draftOperator == null ? [] : [{
-    value: draftOperator.key,
-    label: resolveOperatorLabel(draftOperator, t)
-  }], [draftOperator, t]);
-  const handleNestedDraftChange = useCallback(next => {
-    setDraft(current => current == null ? current : {
-      ...current,
-      value: next.value
-    });
-  }, []);
-  const valueEditor = isDraftRenderable && (isDraftNested ? /*#__PURE__*/_jsx(NestedEditor, {
-    config: config,
-    partialFilter: {
-      field: draft.field,
-      operator: draft.operator,
-      value: draft.value
-    },
-    operatorOptions: nestedOperatorOptions,
-    hasRootOperatorPicker: false,
-    onOperatorChange: () => {},
-    onPartialFilterChange: handleNestedDraftChange,
-    maxMenuItems: maxOperatorMenuItems,
-    isReadOnly: isEditorDisabled,
-    xstyle: styles.nestedEditorContainer
-  }, `${draft.generation}-${draft.field}-${draft.operator}`) : /*#__PURE__*/_jsx(SheetValueEditor, {
-    operatorValue: draftOperator.value,
-    filterValue: draft.value,
-    onChange: handleDraftValueChange,
-    onUnstage: handleDraftUnstage,
-    config: config,
-    fieldLabel: draftField.label,
-    isDisabled: isEditorDisabled,
-    maxMenuItems: maxOperatorMenuItems,
-    editors: editors
-  }, `${draft.generation}-${draft.field}-${draft.operator}`));
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(BottomSheet, {
-      isOpen: isManageSheetOpen,
-      onOpenChange: handleManageOpenChange,
-      finalFocusRef: finalFocusRef,
-      label: t('@astryx.powersearch.sheet.filtersTitle'),
-      height: "tall",
-      padding: 0,
-      children: /*#__PURE__*/_jsxs("div", {
-        ref: manageSheetRef,
-        onFocus: noteSheetFocus('manage'),
-        ...{
-          className: "x78zum5 xdt5ytf x1us19tq xc8icb0 x5yr21d xb3r6kr"
-        },
-        children: [step === 'manage' && /*#__PURE__*/_jsx(SheetAnnouncer, {
-          onAnnounceChange: handleAnnounceChange
-        }), /*#__PURE__*/_jsx("div", {
-          ...{
-            className: "x7wzq59 x13vifvy x1vjfegm x78zum5 xdt5ytf xjcht0a x1adxfkp xvmdzux x1pzlopt x10xzikg"
-          },
-          children: /*#__PURE__*/_jsxs("div", {
-            ...{
-              className: "x78zum5 x6s0dn4 x1txdalj"
-            },
-            children: [/*#__PURE__*/_jsx("div", {
-              ...{
-                className: "xeuugli x1iyjqo2 x78zum5 xdt5ytf"
-              },
-              children: /*#__PURE__*/_jsx(Heading, {
-                level: 3,
-                children: t('@astryx.powersearch.sheet.filtersTitle')
-              })
-            }), isInteractive && filterRows.length > 0 && /*#__PURE__*/_jsx(Button, {
-              ref: managerAddButtonRef,
-              label: t('@astryx.powersearch.sheet.addFilter'),
-              icon: /*#__PURE__*/_jsx(Icon, {
-                icon: PlusIcon,
-                size: "sm"
-              }),
-              isIconOnly: true,
-              variant: "secondary",
-              size: "md",
-              xstyle: styles.touchHitArea,
-              onClick: openFieldList
-            })]
-          })
-        }), /*#__PURE__*/_jsx("div", {
-          ...{
-            className: "x1iyjqo2 x2lwn1j x1odjw0f x1e4zzel"
-          },
-          children: /*#__PURE__*/_jsx("div", {
-            ...scrollContentProps,
-            children: filterRows.length === 0 ?
-            // With no filter the single thing to do is the only visible
-            // action. Mounted only while the sheet is open, so its text
-            // is spoken in this sheet when it appears.
-            isManageSheetOpen && /*#__PURE__*/_jsx(EmptyState, {
-              title: t('@astryx.powersearch.sheet.noFilters'),
-              description: t('@astryx.powersearch.sheet.noFiltersDescription'),
-              headingLevel: 4,
-              icon: /*#__PURE__*/_jsx(Icon, {
-                icon: "funnel",
-                size: "lg",
-                color: "secondary"
-              }),
-              xstyle: styles.emptyState,
-              actions: isInteractive ? /*#__PURE__*/_jsx(Button, {
-                ref: managerAddButtonRef,
-                label: t('@astryx.powersearch.sheet.addFilter'),
-                icon: /*#__PURE__*/_jsx(Icon, {
-                  icon: PlusIcon,
-                  size: "sm"
-                }),
-                variant: "primary",
-                size: "lg",
-                xstyle: styles.touchHitArea,
-                onClick: openFieldList
-              }) : undefined
-            }) : /*#__PURE__*/_jsx(List, {
-              hasDividers: true,
-              density: "spacious",
-              edge: "bleed",
-              children: filterRows.map(row => {
-                const operator = config.getOperator(row.filter.field, row.filter.operator);
-                const fieldLabel = config.getField(row.filter.field)?.label ?? row.filter.field;
-                // A one-tap filter has no value to edit: its row removes
-                // it.
-                const isOneTap = operator?.value.type === 'empty';
-                const removeLabel = t('@astryx.powersearch.sheet.removeFilter', {
-                  field: fieldLabel
-                });
-                return /*#__PURE__*/_jsx(ListItem, {
-                  ref: node => {
-                    if (node == null) {
-                      managerRowsRef.current.delete(row.index);
-                    } else {
-                      managerRowsRef.current.set(row.index, node);
-                    }
-                  },
-                  label: row.displayLabel,
-                  onClick: row.isEditable ? isOneTap ? () => handleRemoveFilter(row.index) : () => handleFilterEdit(row.index) : undefined,
-                  endContent: row.isEditable ? /*#__PURE__*/_jsx(IconButton, {
-                    "data-sheet-remove": "",
-                    label: removeLabel,
-                    tooltip: removeLabel,
-                    icon: /*#__PURE__*/_jsx(Icon, {
-                      icon: "close",
-                      size: "sm"
-                    }),
-                    variant: "ghost",
-                    size: "md",
-                    xstyle: styles.touchHitArea,
-                    onClick: event => {
-                      event.stopPropagation();
-                      handleRemoveFilter(row.index);
-                    }
-                  }) : undefined
-                }, row.key);
-              })
-            })
-          })
-        }), filterRows.length > 0 && /*#__PURE__*/_jsxs("div", {
-          ...{
-            className: "x1vjfegm x78zum5 x6s0dn4 x1qughib x1txdalj x8o8v82 x1pzlopt x10xzikg x1n2onr6 xdd4er5 x2lah0s"
-          },
-          children: [isClearAllShown && /*#__PURE__*/_jsx(Button, {
-            ref: clearAllButtonRef,
-            label: t('@astryx.powersearch.sheet.clearAll'),
-            variant: "secondary",
-            size: "lg",
-            xstyle: styles.footerEqualAction,
-            onClick: () => setIsClearConfirmationOpen(true)
-          }), /*#__PURE__*/_jsx(Button, {
-            label: t('@astryx.powersearch.sheet.done'),
-            variant: "primary",
-            size: "lg",
-            xstyle: isClearAllShown ? styles.footerEqualAction : [styles.footerSoleAction, styles.touchHitArea],
-            onClick: closeFlow,
-            width: isClearAllShown ? undefined : '100%'
-          })]
-        })]
-      })
-    }), /*#__PURE__*/_jsx(BottomSheet, {
-      isOpen: isFieldsSheetOpen,
-      onOpenChange: handleFieldsOpenChange,
-      finalFocusRef: stepFinalFocusRef,
-      label: t('@astryx.powersearch.sheet.addFilter'),
-      height: "tall",
-      padding: 0,
-      children: /*#__PURE__*/_jsxs("div", {
-        ref: fieldsSheetCallbackRef,
-        onFocus: noteSheetFocus('fields'),
-        onKeyDown: hasContentSearch ? handleContentListKeyDown : undefined,
-        ...{
-          className: "x78zum5 xdt5ytf x1us19tq xc8icb0 x5yr21d xb3r6kr"
-        },
-        children: [step === 'fields' && /*#__PURE__*/_jsx(SheetAnnouncer, {
-          onAnnounceChange: handleAnnounceChange
-        }), /*#__PURE__*/_jsxs("div", {
-          ...{
-            className: "x7wzq59 x13vifvy x1vjfegm x78zum5 xdt5ytf xjcht0a x1adxfkp xvmdzux x1pzlopt x10xzikg"
-          },
-          children: [/*#__PURE__*/_jsx("div", {
-            ...{
-              className: "x78zum5 x6s0dn4 x1txdalj"
-            },
-            children: /*#__PURE__*/_jsx("div", {
-              ...{
-                className: "xeuugli x1iyjqo2 x78zum5 xdt5ytf"
-              },
-              children: /*#__PURE__*/_jsx(Heading, {
-                level: 3,
-                children: t('@astryx.powersearch.sheet.addFilter')
-              })
-            })
-          }), hasContentSearch ? /*#__PURE__*/_jsx("div", {
-            ref: contentSearchRef,
-            children: /*#__PURE__*/_jsx(TextInput, {
-              label: t('@astryx.powersearch.sheet.search'),
-              isLabelHidden: true,
-              role: "searchbox",
-              "aria-controls": contentResultsId,
-              value: contentQuery,
-              onChange: setContentQuery,
-              onKeyDown: event => {
-                if (isImeKeyEvent(event.nativeEvent)) {
-                  return;
-                }
-                if (event.key === 'Enter' && contentResults[0] != null) {
-                  event.preventDefault();
-                  handleContentSuggestionSelect(contentResults[0]);
-                }
-              },
-              placeholder: placeholder,
-              hasClear: true,
-              startIcon: /*#__PURE__*/_jsx(Icon, {
-                icon: "search",
-                size: "sm",
-                color: "secondary"
-              }),
-              isDisabled: !isInteractive,
-              size: "lg",
-              width: "100%"
-            })
-          }) : isFieldSearchShown ? /*#__PURE__*/_jsx("div", {
-            ref: fieldSearchRef,
-            children: /*#__PURE__*/_jsx(TextInput, {
-              label: t('@astryx.powersearch.sheet.searchFields'),
-              isLabelHidden: true,
-              placeholder: t('@astryx.powersearch.sheet.searchFieldsPlaceholder'),
-              value: fieldQuery,
-              onChange: setFieldQuery,
-              startIcon: /*#__PURE__*/_jsx(Icon, {
-                icon: "search",
-                size: "sm",
-                color: "secondary"
-              }),
-              isDisabled: !isInteractive,
-              size: "lg",
-              width: "100%"
-            })
-          }) : null]
-        }), /*#__PURE__*/_jsx("div", {
-          ...{
-            className: "x1iyjqo2 x2lwn1j x1odjw0f x1e4zzel"
-          },
-          ...fieldPickerDragProps,
-          children: /*#__PURE__*/_jsx("div", {
-            ...scrollContentProps,
-            children: hasContentSearch ? contentResults.length > 0 ? /*#__PURE__*/_jsx(List, {
-              id: contentResultsId,
-              "aria-label": t('@astryx.powersearch.sheet.searchResults'),
-              hasDividers: true,
-              density: "spacious",
-              edge: "bleed",
-              children: contentResults.map(item => /*#__PURE__*/_jsx(ListItem, {
-                label: item.label,
-                isDisabled: !isInteractive,
-                onClick: () => handleContentSuggestionSelect(item)
-              }, item.id))
-            }) : contentQuery.trim() !== '' ?
-            /*#__PURE__*/
-            // The searchbox's `aria-controls` target while nothing
-            // lists. The empty state mounts only while this step is the
-            // open one and is spoken from its rendered text, once per
-            // query that matches nothing.
-            _jsx("div", {
-              id: contentResultsId,
-              children: step === 'fields' && /*#__PURE__*/_jsx(EmptyState, {
-                icon: /*#__PURE__*/_jsx(Icon, {
-                  icon: "search",
-                  size: "lg",
-                  color: "secondary"
-                }),
-                title: t('@astryx.powersearch.sheet.noResults'),
-                description: t('@astryx.powersearch.sheet.tryDifferentSearch'),
-                headingLevel: 4,
-                isCompact: true,
-                xstyle: styles.emptyState
-              }, contentQuery)
-            }) :
-            /*#__PURE__*/
-            // An empty query with no bootstrap suggestion: the results
-            // region exists, empty, so the searchbox's `aria-controls`
-            // always names an element in the document.
-            _jsx("div", {
-              id: contentResultsId
-            }) : groupedFields.length === 0 ?
-            // A search outcome: only a non-empty query that matches
-            // nothing shows it; a config with no field lists nothing.
-            normalizedFieldQuery !== '' && step === 'fields' && /*#__PURE__*/_jsx(EmptyState, {
-              icon: /*#__PURE__*/_jsx(Icon, {
-                icon: "search",
-                size: "lg",
-                color: "secondary"
-              }),
-              title: t('@astryx.powersearch.sheet.noMatchingFields'),
-              description: t('@astryx.powersearch.sheet.tryDifferentSearch'),
-              headingLevel: 4,
-              isCompact: true,
-              xstyle: styles.emptyState
-            }, normalizedFieldQuery) : groupedFields.map(([group, groupFields]) => /*#__PURE__*/_jsx(List, {
-              hasDividers: true,
-              density: "spacious",
-              header: /*#__PURE__*/_jsx(Heading, {
-                level: 4,
-                children: group === '' ? t('@astryx.powersearch.sheet.ungroupedFields') : group
-              }),
-              edge: "bleed",
-              children: groupFields.map(field => /*#__PURE__*/_jsx(ListItem, {
-                ref: node => {
-                  if (node == null) {
-                    fieldRowsRef.current.delete(field.key);
-                  } else {
-                    fieldRowsRef.current.set(field.key, node);
-                  }
-                },
-                label: field.label,
-                isDisabled: !isInteractive,
-                startContent: field.icon,
-                endContent: isImmediateAddField(field) ? /*#__PURE__*/_jsx(Icon, {
-                  icon: PlusIcon,
-                  size: "sm",
-                  color: "secondary"
-                }) : /*#__PURE__*/_jsx(Icon, {
-                  icon: "chevronRight",
-                  size: "sm",
-                  color: "secondary",
-                  xstyle: rtlStyles.mirror
-                }),
-                onClick: () => handleFieldSelect(field)
-              }, field.key))
-            }, group))
-          })
-        }), isFieldPickerDirectEntry && /*#__PURE__*/_jsx("div", {
-          ...{
-            className: "x1vjfegm x78zum5 x6s0dn4 x1qughib x1txdalj x8o8v82 x1pzlopt x10xzikg x1n2onr6 xdd4er5 x2lah0s"
-          },
-          children: /*#__PURE__*/_jsx(Button, {
-            label: t('@astryx.powersearch.sheet.done'),
-            variant: "primary",
-            width: "100%",
-            xstyle: styles.touchAction,
-            onClick: closeFlow
-          })
-        })]
-      })
-    }), /*#__PURE__*/_jsx(BottomSheet, {
-      isOpen: step === 'value',
-      onOpenChange: handleValueOpenChange,
-      finalFocusRef: stepFinalFocusRef,
-      label: editorTitle,
-      height: "tall",
-      padding: 0,
-      purpose: "info",
-      children: /*#__PURE__*/_jsxs("div", {
-        ...{
-          className: "x78zum5 xdt5ytf x1us19tq xc8icb0"
-        },
-        children: [/*#__PURE__*/_jsx("div", {
-          ...{
-            className: "x7wzq59 x13vifvy x1vjfegm x78zum5 xdt5ytf xjcht0a x1adxfkp xvmdzux x1pzlopt x10xzikg"
-          },
-          children: /*#__PURE__*/_jsx("div", {
-            ...{
-              className: "x78zum5 x6s0dn4 x1txdalj"
-            },
-            children: /*#__PURE__*/_jsx("div", {
-              ...{
-                className: "xeuugli x1iyjqo2 x78zum5 xdt5ytf"
-              },
-              children: /*#__PURE__*/_jsx(Heading, {
-                level: 3,
-                maxLines: 1,
-                children: editorTitle
-              })
-            })
-          })
-        }), isDraftRenderable && EditorOverride != null ? /*#__PURE__*/_jsxs("div", {
-          ...bodyProps,
-          children: [step === 'value' && /*#__PURE__*/_jsx(SheetAnnouncer, {
-            onAnnounceChange: handleAnnounceChange
-          }), operatorGroup && /*#__PURE__*/_jsx("div", {
-            ...controlSectionProps,
-            children: operatorGroup
-          }), /*#__PURE__*/_jsx(EditorOverride, {
-            config: configProp,
-            filter: {
-              field: draft.field,
-              operator: draft.operator,
-              value: draft.value
-            },
-            mode: draft.mode,
-            onSave: saved => {
-              if (saved == null) {
-                if (draft.mode === 'edit') {
-                  handleRemove();
-                } else {
-                  queueManagerAddFocus();
-                  setStep('manage');
-                }
-                return;
-              }
-              commitSavedFilter(draft, saved);
-            },
-            onCancel: returnFromValue,
-            saveButtonLabel: saveButtonLabel,
-            isReadOnly: isEditorDisabled
-          }, `${draft.generation}-${draft.field}-${draft.operator}`)]
-        }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsxs("div", {
-            ...bodyProps,
-            children: [step === 'value' && /*#__PURE__*/_jsx(SheetAnnouncer, {
-              onAnnounceChange: handleAnnounceChange
-            }), isDraftRenderable ?
-            // A lone editor sits on the sheet's surface; with the
-            // Operator group above it, each section is a muted
-            // container.
-            operatorGroup ? /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsx("div", {
-                ...controlSectionProps,
-                children: operatorGroup
-              }), /*#__PURE__*/_jsx("div", {
-                ...controlSectionProps,
-                children: valueEditor
-              })]
-            }) : valueEditor :
-            // A controlled config update removed the field or operator
-            // being edited: say so (the element's rendered text is
-            // announced, once per opened filter, while this step is the
-            // open one) and keep a way out.
-            draft != null && /*#__PURE__*/_jsx(SheetEmptyMessage, {
-              message: t('@astryx.powersearch.sheet.filterUnavailable'),
-              occasion: String(draft.generation),
-              isShown: step === 'value'
-            })]
-          }), /*#__PURE__*/_jsx("div", {
-            ...{
-              className: "x7wzq59 x1ey2m1c x1vjfegm x78zum5 x6s0dn4 x1qughib x1txdalj x8o8v82 x1pzlopt x10xzikg"
-            },
-            children: isReadOnly ? /*#__PURE__*/_jsx(Button, {
-              ref: cancelButtonRef,
-              label: t('@astryx.powersearch.editor.cancel'),
-              variant: "secondary",
-              width: "100%",
-              xstyle: [styles.footerSoleAction, styles.touchHitArea],
-              onClick: returnFromValue
-            }) : /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsx(Button, {
-                ref: cancelButtonRef,
-                label: t('@astryx.powersearch.editor.cancel'),
-                variant: "secondary",
-                size: "lg",
-                xstyle: styles.footerEqualAction,
-                onClick: returnFromValue
-              }), isDraftRenderable && /*#__PURE__*/_jsx(Button, {
-                label: saveButtonLabel,
-                variant: "primary",
-                size: "lg",
-                isDisabled: isSaveDisabled,
-                xstyle: styles.footerEqualAction,
-                onClick: handleSave
-              })]
-            })
-          })]
-        })]
-      })
-    }), isClearConfirmationOpen && /*#__PURE__*/_jsx(SheetConfirmation, {
-      isOpen: true,
-      onOpenChange: isConfirmationOpen => {
-        if (!isConfirmationOpen) {
-          closeClearConfirmation(false);
-        }
-      },
-      title: t('@astryx.powersearch.sheet.clearAllTitle'),
-      description: t('@astryx.powersearch.sheet.clearAllDescription'),
-      actionLabel: t('@astryx.powersearch.sheet.clearAllConfirm'),
-      cancelLabel: t('@astryx.powersearch.sheet.clearAllCancel'),
-      onAction: () => closeClearConfirmation(true)
-    })]
-  });
-}
-PowerSearchBottomSheet.displayName = 'PowerSearchBottomSheet';