@astryxdesign/core 0.7.7 → 0.7.8-canary.0d54fd3

package/dist/PowerSearch/PowerSearchBottomSheet.js

@@ -0,0 +1,1919 @@
+// 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 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,
+  timezoneID,
+  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,
+          timezoneID: timezoneID
+        })
+      });
+  }
+}
+
+// =============================================================================
+// 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,
+  timezoneID,
+  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, timezoneID);
+    return {
+      label,
+      value
+    };
+  }, [config, editors, formatList, locale, t, timezoneID]);
+  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,
+    timezoneID: timezoneID,
+    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,
+    timezoneID: timezoneID,
+    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,
+            timezoneID: timezoneID
+          }, `${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';