@tensor_1/react 2.30.0 → 2.32.0

package/dist/components/Menu.d.ts

@@ -3,13 +3,18 @@ import { ReactElement, ReactNode } from 'react';
 import { UixRenderLink } from '../link.js';
 import { Placement } from '../overlay-position.js';
 
+/** `id` and `data-*` for the item's own element (HAR-1629): a stable hook for tests, journeys and analytics. */
+interface MenuItemAttributes {
+    id?: string;
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+}
 interface MenuProps {
     /**
      * The menu button, usually a `Button`. It receives `aria-haspopup="menu"`,
      * `aria-expanded`, `aria-controls` and the open/keyboard handlers.
      */
     trigger: ReactElement;
-    /** `MenuItem`, `MenuGroup` and `MenuSeparator`. */
+    /** `MenuItem`, `MenuItemRadio`, `MenuItemCheckbox`, `MenuRadioGroup`, `MenuGroup` and `MenuSeparator`. */
     children?: ReactNode;
     /** Controlled open state; pair with `onOpenChange`. */
     open?: boolean;
@@ -23,10 +28,11 @@ interface MenuProps {
 /**
  * A menu button with an APG menu (HAR-1359; TENSOR C1, MOTUS B-A14): ↓/↑ move, Home/End,
  * type-to-find, Enter/Space activate, Esc and Tab close, focus returns to the trigger.
- * The surface is the kit `Popover`, so it escapes clipping containers.
+ * The surface is the kit `Popover`, so it escapes clipping containers; a menu taller than
+ * the viewport is capped to it and scrolls (HAR-1613).
  */
 declare function Menu({ trigger, children, open: controlledOpen, defaultOpen, onOpenChange, label, placement, className }: MenuProps): react.JSX.Element;
-interface MenuItemProps {
+interface MenuItemProps extends MenuItemAttributes {
     children?: ReactNode;
     /** Runs on click, Enter or Space; the menu then closes and focus returns to the trigger. */
     onSelect?: () => void;
@@ -40,7 +46,49 @@ interface MenuItemProps {
     disabled?: boolean;
     className?: string;
 }
-declare function MenuItem({ children, onSelect, href, renderLink, icon, shortcut, tone, disabled, className }: MenuItemProps): react.JSX.Element;
+declare function MenuItem({ children, onSelect, href, renderLink, icon, shortcut, tone, disabled, className, ...rest }: MenuItemProps): react.JSX.Element;
+interface MenuRadioGroupProps {
+    /** The `value` of the checked `MenuItemRadio`. */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** Visible group heading; it also names the group. */
+    label?: ReactNode;
+    /** Names the group when there is no visible `label`. */
+    'aria-label'?: string;
+    children?: ReactNode;
+}
+/** One choice out of several inside a `Menu`: wraps `MenuItemRadio` rows and holds their value (HAR-1629). */
+declare function MenuRadioGroup({ value, onValueChange, label, 'aria-label': ariaLabel, children }: MenuRadioGroupProps): react.JSX.Element;
+interface MenuItemRadioProps extends MenuItemAttributes {
+    /** Checked when it equals the surrounding `MenuRadioGroup`'s `value`. */
+    value: string;
+    /** For a radio item used without a `MenuRadioGroup`. */
+    checked?: boolean;
+    /** Runs when the item is chosen, after the group's `onValueChange`. */
+    onSelect?: () => void;
+    /** Close the menu after a click or Enter. Default `true`. Space never closes it. */
+    closeOnSelect?: boolean;
+    children?: ReactNode;
+    icon?: ReactNode;
+    shortcut?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+/** A `role="menuitemradio"` row with `aria-checked` and a check mark for the current choice. */
+declare function MenuItemRadio({ value, checked, onSelect, closeOnSelect, ...rest }: MenuItemRadioProps): react.JSX.Element;
+interface MenuItemCheckboxProps extends MenuItemAttributes {
+    checked: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /** Close the menu after a click or Enter. Default `false`: several boxes are usually ticked in a row. */
+    closeOnSelect?: boolean;
+    children?: ReactNode;
+    icon?: ReactNode;
+    shortcut?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+/** A `role="menuitemcheckbox"` row with `aria-checked`; the menu stays open while boxes are ticked. */
+declare function MenuItemCheckbox({ checked, onCheckedChange, closeOnSelect, ...rest }: MenuItemCheckboxProps): react.JSX.Element;
 interface MenuGroupProps {
     label: ReactNode;
     children?: ReactNode;
@@ -48,4 +96,4 @@ interface MenuGroupProps {
 declare function MenuGroup({ label, children }: MenuGroupProps): react.JSX.Element;
 declare function MenuSeparator(): react.JSX.Element;
 
-export { Menu, MenuGroup, type MenuGroupProps, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator };
+export { Menu, MenuGroup, type MenuGroupProps, MenuItem, type MenuItemAttributes, MenuItemCheckbox, type MenuItemCheckboxProps, type MenuItemProps, MenuItemRadio, type MenuItemRadioProps, type MenuProps, MenuRadioGroup, type MenuRadioGroupProps, MenuSeparator };

package/dist/components/Menu.js

@@ -3,9 +3,16 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cloneElement, createContext, isValidElement, useContext, useEffect, useId, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { Popover } from "./Popover.js";
+import { CheckIcon } from "../icons/components.js";
 import { renderUixLink } from "../link.js";
 const MenuContext = createContext(null);
-const ITEM = '[role="menuitem"]:not([aria-disabled="true"])';
+const MenuRadioContext = createContext(null);
+const ITEM = '[role^="menuitem"]:not([aria-disabled="true"])';
+const itemAttributes = (rest) => {
+  const out = {};
+  for (const key of Object.keys(rest)) if (key === "id" || key.startsWith("data-")) out[key] = rest[key];
+  return out;
+};
 function Menu({ trigger, children, open: controlledOpen, defaultOpen = false, onOpenChange, label, placement = "bottom-start", className }) {
   const id = useId();
   const menuId = `${id}-menu`;
@@ -51,7 +58,8 @@ function Menu({ trigger, children, open: controlledOpen, defaultOpen = false, on
       }
     }
     const list = items();
-    (focusOnOpen.current === "last" ? list[list.length - 1] : list[0])?.focus();
+    const start = focusOnOpen.current === "last" ? list[list.length - 1] : list.find((item) => item.getAttribute("role") === "menuitemradio" && item.getAttribute("aria-checked") === "true") ?? list[0];
+    start?.focus();
     const onPointer = (event) => {
       const target = event.target;
       if (el.contains(target) || triggerRef.current?.contains(target)) return;
@@ -109,6 +117,12 @@ function Menu({ trigger, children, open: controlledOpen, defaultOpen = false, on
           const list = items();
           (focusOnOpen.current === "last" ? list[list.length - 1] : list[0])?.focus();
         } else setOpen(true);
+      } else if (open && event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        close(true);
+      } else if (open && event.key === "Tab") {
+        close(false);
       }
     }
   }) : trigger;
@@ -121,6 +135,7 @@ function Menu({ trigger, children, open: controlledOpen, defaultOpen = false, on
         popover: "manual",
         anchor: triggerRef,
         placement,
+        capHeight: true,
         role: "menu",
         "aria-label": label,
         "aria-labelledby": label ? void 0 : triggerProps.id ?? triggerId,
@@ -131,20 +146,22 @@ function Menu({ trigger, children, open: controlledOpen, defaultOpen = false, on
     )
   ] });
 }
-function MenuItem({ children, onSelect, href, renderLink, icon, shortcut, tone = "default", disabled, className }) {
+function MenuItem({ children, onSelect, href, renderLink, icon, shortcut, tone = "default", disabled, className, ...rest }) {
   const menu = useContext(MenuContext);
   const classes = cx("uix-menu__item", tone === "danger" && "uix-menu__item--danger", className);
+  const attributes = itemAttributes(rest);
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon != null && /* @__PURE__ */ jsx("span", { className: "uix-menu__icon", "aria-hidden": "true", children: icon }),
     /* @__PURE__ */ jsx("span", { className: "uix-menu__text", children }),
     shortcut != null && /* @__PURE__ */ jsx("span", { className: "uix-menu__shortcut", children: shortcut })
   ] });
   if (href != null && !disabled) {
-    return /* @__PURE__ */ jsx(Fragment, { children: renderUixLink(renderLink, { href, role: "menuitem", tabIndex: -1, className: classes, onClick: () => menu?.close(false), children: body }) });
+    return /* @__PURE__ */ jsx(Fragment, { children: renderUixLink(renderLink, { ...attributes, href, role: "menuitem", tabIndex: -1, className: classes, onClick: () => menu?.close(false), children: body }) });
   }
   return /* @__PURE__ */ jsx(
     "button",
     {
+      ...attributes,
       type: "button",
       role: "menuitem",
       tabIndex: -1,
@@ -159,6 +176,86 @@ function MenuItem({ children, onSelect, href, renderLink, icon, shortcut, tone =
     }
   );
 }
+function CheckableItem({
+  role,
+  checked,
+  onToggle,
+  closeOnSelect,
+  children,
+  icon,
+  shortcut,
+  disabled,
+  className,
+  ...rest
+}) {
+  const menu = useContext(MenuContext);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...itemAttributes(rest),
+      type: "button",
+      role,
+      "aria-checked": checked,
+      tabIndex: -1,
+      className: cx("uix-menu__item", className),
+      "aria-disabled": disabled || void 0,
+      onKeyDown: (event) => {
+        if (event.key !== " " || disabled) return;
+        event.preventDefault();
+        onToggle();
+      },
+      onKeyUp: (event) => {
+        if (event.key === " ") event.preventDefault();
+      },
+      onClick: () => {
+        if (disabled) return;
+        onToggle();
+        if (closeOnSelect) menu?.close(true);
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "uix-menu__check", "aria-hidden": "true", children: checked && /* @__PURE__ */ jsx(CheckIcon, {}) }),
+        icon != null && /* @__PURE__ */ jsx("span", { className: "uix-menu__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "uix-menu__text", children }),
+        shortcut != null && /* @__PURE__ */ jsx("span", { className: "uix-menu__shortcut", children: shortcut })
+      ]
+    }
+  );
+}
+function MenuRadioGroup({ value, onValueChange, label, "aria-label": ariaLabel, children }) {
+  const id = useId();
+  return /* @__PURE__ */ jsx(MenuRadioContext.Provider, { value: { value, onValueChange }, children: /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": label != null ? id : void 0, "aria-label": label != null ? void 0 : ariaLabel, children: [
+    label != null && /* @__PURE__ */ jsx("div", { id, className: "uix-menu__label", children: label }),
+    children
+  ] }) });
+}
+function MenuItemRadio({ value, checked, onSelect, closeOnSelect = true, ...rest }) {
+  const group = useContext(MenuRadioContext);
+  return /* @__PURE__ */ jsx(
+    CheckableItem,
+    {
+      ...rest,
+      role: "menuitemradio",
+      checked: checked ?? (group != null && group.value === value),
+      closeOnSelect,
+      onToggle: () => {
+        group?.onValueChange?.(value);
+        onSelect?.();
+      }
+    }
+  );
+}
+function MenuItemCheckbox({ checked, onCheckedChange, closeOnSelect = false, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    CheckableItem,
+    {
+      ...rest,
+      role: "menuitemcheckbox",
+      checked,
+      closeOnSelect,
+      onToggle: () => onCheckedChange?.(!checked)
+    }
+  );
+}
 function MenuGroup({ label, children }) {
   const id = useId();
   return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": id, children: [
@@ -173,5 +270,8 @@ export {
   Menu,
   MenuGroup,
   MenuItem,
+  MenuItemCheckbox,
+  MenuItemRadio,
+  MenuRadioGroup,
   MenuSeparator
 };

package/dist/components/Meter.d.ts

@@ -1,8 +1,12 @@
 import * as react from 'react';
 import { HTMLAttributes } from 'react';
 
-/** Fill color tone for the meter bar. Defaults to `success` (green). */
-type MeterTone = 'success' | 'warning' | 'danger' | 'attention' | 'overdue';
+/**
+ * Fill color tone for the meter bar. Defaults to `success` (green).
+ * `neutral` and `accent` are for a plain proportion that is neither good nor bad (a poll
+ * option's share of the votes): a grey or brand fill, and no tone word is spoken (HAR-1606).
+ */
+type MeterTone = 'success' | 'warning' | 'danger' | 'attention' | 'overdue' | 'neutral' | 'accent';
 interface MeterProps extends HTMLAttributes<HTMLDivElement> {
     /** Fill level 0–100. Clamped to this range. */
     value?: number;
@@ -11,7 +15,7 @@ interface MeterProps extends HTMLAttributes<HTMLDivElement> {
     /** Accessible name — rendered as `aria-label` (an explicit `aria-label` prop wins). */
     label?: string;
     /** TENSOR RX-125 (UIX-04): the spoken tone words; English defaults. */
-    toneLabels?: Partial<Record<Exclude<MeterTone, 'success'>, string>>;
+    toneLabels?: Partial<Record<Exclude<MeterTone, 'success' | 'neutral' | 'accent'>, string>>;
 }
 /** Horizontal utilization / threshold bar backed by `.uix-meter`. */
 declare function Meter({ value, tone, label, toneLabels, className, ...props }: MeterProps): react.JSX.Element;

package/dist/components/Meter.js

@@ -9,6 +9,7 @@ const toneText = {
 function Meter({ value = 0, tone, label, toneLabels, className, ...props }) {
   const spoken = { ...toneText, ...toneLabels };
   const pct = Math.max(0, Math.min(100, value));
+  const toneWord = tone ? spoken[tone] : void 0;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -16,7 +17,7 @@ function Meter({ value = 0, tone, label, toneLabels, className, ...props }) {
       "aria-valuenow": pct,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      "aria-valuetext": tone && tone !== "success" ? `${pct}%, ${spoken[tone]}` : void 0,
+      "aria-valuetext": toneWord ? `${pct}%, ${toneWord}` : void 0,
       "aria-label": label,
       className: cx("uix-meter", className),
       ...props,

package/dist/components/Popover.d.ts

@@ -10,7 +10,8 @@ interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
     popover?: 'auto' | 'manual';
     /**
      * Element (or ref) to anchor against. When set, the popover is placed with
-     * cross-browser JS positioning — flip when it won't fit, shift to stay on-screen.
+     * cross-browser JS positioning — flip when it won't fit, shift to stay on-screen. A popover
+     * that fits neither above nor below slides over its anchor rather than leave the viewport.
      * Where the browser supports CSS anchor positioning, the placement is written as an
      * offset from the anchor, so it stays attached while the page scrolls; elsewhere it
      * follows scroll from JS. The native Popover API still provides the top layer (so it
@@ -30,6 +31,24 @@ interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
     closeWhenAnchorHidden?: boolean;
     /** Called when `closeWhenAnchorHidden` is about to close the popover. */
     onAnchorHidden?: () => void;
+    /**
+     * Cap the popover's height to the viewport (minus 8 px at each edge) and scroll inside it,
+     * for content that can be taller than a phone screen. Needs `anchor`. Default `false`.
+     */
+    capHeight?: boolean;
+    /**
+     * Open while the pointer is over the `anchor` or the anchor has keyboard focus, and close
+     * when both have left the anchor and the popover — a hover card (HAR-1614). The pointer can
+     * travel from the anchor into the popover, and focus can move into it, without closing it;
+     * Escape closes it. Touch does not hover: open it from the anchor's own click there.
+     * `true` waits 300 ms before opening and 150 ms before closing; pass the delays to change
+     * them. Needs `anchor`; `popover` then defaults to `"manual"`, so a hover card does not
+     * dismiss a menu or dialog that is open.
+     */
+    openOnHover?: boolean | {
+        openDelay?: number;
+        closeDelay?: number;
+    };
     children?: ReactNode;
 }
 /**
@@ -37,6 +56,6 @@ interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
  * things like a filter popover, menu, or rich select by putting controls inside.
  * Pass `anchor` to get collision-aware, cross-browser placement (UIX-FIX-02).
  */
-declare function Popover({ popover, anchor, placement, offset, closeWhenAnchorHidden, onAnchorHidden, className, children, ...props }: PopoverProps): react.JSX.Element;
+declare function Popover({ popover: popoverProp, anchor, placement, offset, closeWhenAnchorHidden, onAnchorHidden, capHeight, openOnHover, className, children, ...props }: PopoverProps): react.JSX.Element;
 
 export { Popover, type PopoverProps };

package/dist/components/Popover.js

@@ -18,16 +18,22 @@ const settle = (el) => {
   el.removeAttribute(PLACING);
 };
 function Popover({
-  popover = "auto",
+  popover: popoverProp,
   anchor,
   placement = "bottom-start",
   offset = 6,
   closeWhenAnchorHidden = false,
   onAnchorHidden,
+  capHeight = false,
+  openOnHover = false,
   className,
   children,
   ...props
 }) {
+  const hover = !!openOnHover && !!anchor;
+  const popover = popoverProp ?? (hover ? "manual" : "auto");
+  const openDelay = typeof openOnHover === "object" ? openOnHover.openDelay ?? 300 : 300;
+  const closeDelay = typeof openOnHover === "object" ? openOnHover.closeDelay ?? 150 : 150;
   const ref = useRef(null);
   const [open, setOpen] = useState(false);
   const openRef = useRef(false);
@@ -37,7 +43,16 @@ function Popover({
   const reposition = useAnchoredPosition(anchor ?? null, ref, {
     open: open && !!anchor,
     placement,
-    offset
+    offset,
+    capHeight,
+    onAnchorHidden: closeWhenAnchorHidden ? () => {
+      const el = ref.current;
+      if (!el || !isPopoverOpen(el)) return;
+      onAnchorHiddenRef.current?.();
+      const active = el.ownerDocument.activeElement;
+      if (active && el.contains(active)) active.blur();
+      el.hidePopover();
+    } : void 0
   });
   useEffect(() => {
     const el = ref.current;
@@ -72,25 +87,87 @@ function Popover({
       el.removeAttribute(PLACING);
     };
   }, [anchor, reposition]);
+  useEffect(() => {
+    const el = ref.current;
+    const anchorEl = resolveAnchor(anchor);
+    if (!hover || !el || !anchorEl) return;
+    let timer;
+    const inside = (node) => !!node && (anchorEl.contains(node) || el.contains(node));
+    const stillWanted = () => {
+      try {
+        return anchorEl.matches(":hover") || el.matches(":hover") || inside(el.ownerDocument.activeElement);
+      } catch {
+        return false;
+      }
+    };
+    const show = (delay) => {
+      window.clearTimeout(timer);
+      timer = window.setTimeout(() => {
+        if (!isPopoverOpen(el)) {
+          try {
+            el.showPopover?.();
+          } catch {
+          }
+        }
+      }, delay);
+    };
+    const hide = (delay) => {
+      window.clearTimeout(timer);
+      timer = window.setTimeout(() => {
+        if (isPopoverOpen(el) && !stillWanted()) {
+          try {
+            el.hidePopover?.();
+          } catch {
+          }
+        }
+      }, delay);
+    };
+    const onEnter = (event) => {
+      if (event.pointerType !== "touch") show(openDelay);
+    };
+    const onLeave = (event) => {
+      if (event.pointerType !== "touch") hide(closeDelay);
+    };
+    const onFocusIn = () => show(0);
+    const onFocusOut = (event) => {
+      if (!inside(event.relatedTarget)) hide(closeDelay);
+    };
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape" || !isPopoverOpen(el)) return;
+      window.clearTimeout(timer);
+      const hadFocus = el.contains(el.ownerDocument.activeElement);
+      try {
+        el.hidePopover?.();
+      } catch {
+      }
+      if (hadFocus) {
+        anchorEl.removeEventListener("focusin", onFocusIn);
+        anchorEl.focus();
+        anchorEl.addEventListener("focusin", onFocusIn);
+      }
+    };
+    for (const node of [anchorEl, el]) {
+      node.addEventListener("pointerenter", onEnter);
+      node.addEventListener("pointerleave", onLeave);
+      node.addEventListener("focusout", onFocusOut);
+      node.addEventListener("keydown", onKeyDown);
+    }
+    anchorEl.addEventListener("focusin", onFocusIn);
+    return () => {
+      window.clearTimeout(timer);
+      for (const node of [anchorEl, el]) {
+        node.removeEventListener("pointerenter", onEnter);
+        node.removeEventListener("pointerleave", onLeave);
+        node.removeEventListener("focusout", onFocusOut);
+        node.removeEventListener("keydown", onKeyDown);
+      }
+      anchorEl.removeEventListener("focusin", onFocusIn);
+    };
+  }, [hover, anchor, openDelay, closeDelay]);
   useIsomorphicLayoutEffect(() => {
     openRef.current = open;
     if (open && ref.current) settle(ref.current);
   }, [open]);
-  useEffect(() => {
-    const el = ref.current;
-    const anchorEl = resolveAnchor(anchor);
-    if (!closeWhenAnchorHidden || !open || !el || !anchorEl || typeof IntersectionObserver !== "function") return;
-    const observer = new IntersectionObserver((entries) => {
-      const latest = entries[entries.length - 1];
-      if (!latest || latest.isIntersecting || !isPopoverOpen(el)) return;
-      onAnchorHiddenRef.current?.();
-      const active = el.ownerDocument.activeElement;
-      if (active && el.contains(active)) active.blur();
-      el.hidePopover();
-    });
-    observer.observe(anchorEl);
-    return () => observer.disconnect();
-  }, [closeWhenAnchorHidden, open, anchor]);
   return /* @__PURE__ */ jsx("div", { ref, className: cx("uix-popover", className), ...popoverAttr, ...props, children });
 }
 export {

package/dist/components/Prose.d.ts

@@ -9,9 +9,13 @@ interface ProseProps extends HTMLAttributes<HTMLDivElement> {
  * release notes). Apply to a block of rendered HTML/markdown.
  */
 declare function Prose({ children, className, ...props }: ProseProps): react.JSX.Element;
-type NoteTone = 'info' | 'success' | 'warning' | 'danger';
+type NoteTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
 interface NoteProps extends HTMLAttributes<HTMLDivElement> {
-    tone?: NoteTone;
+    /**
+     * `'neutral'` and `undefined` are both the default look. `undefined` is spelled out in the type
+     * so `tone={maybeTone}` also compiles under `exactOptionalPropertyTypes` (HAR-1614).
+     */
+    tone?: NoteTone | undefined;
     icon?: ReactNode;
     children?: ReactNode;
 }

package/dist/components/Prose.js

@@ -4,7 +4,7 @@ function Prose({ children, className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cx("uix-prose", className), ...props, children });
 }
 function Note({ tone, icon, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-note", tone && `uix-note--${tone}`, className), ...props, children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-note", tone && tone !== "neutral" && `uix-note--${tone}`, className), ...props, children: [
     icon != null && /* @__PURE__ */ jsx("div", { className: "uix-note__icon", children: icon }),
     /* @__PURE__ */ jsx("div", { className: "uix-note__body", children })
   ] });

package/dist/components/RuleBuilder.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { JsonValue } from '../json-value.js';
-import { RuleAction, RuleDefinition, RuleCondition, RuleValidationIssue } from '../rule-builder-model.js';
+import { RuleAction, RuleDefinition, RuleCondition, RuleCheck, RuleValidationIssue } from '../rule-builder-model.js';
 
 interface RuleValueEditorProps {
     condition: RuleCondition;
@@ -28,6 +28,10 @@ interface RuleActionDefinition {
 /**
  * Every word the rule builder renders (TENSOR RX-125, UIX-12). `{item}` is one of
  * `itemGroup` / `itemCondition` / `itemAction`; `{field}` a field label; `{count}` a number.
+ * The `issue…` keys are the built-in validation messages (`{id}` the duplicated id, `{max}`
+ * the depth limit) and the `summary…` / `and` / `or` keys the words of the
+ * `readOnly="summary"` sentence (HAR-1618). Translate once for a subtree with
+ * `UixLabelsProvider labels={{ ruleBuilder: … }}`.
  */
 interface RuleBuilderLabels {
     region: string;
@@ -59,6 +63,19 @@ interface RuleBuilderLabels {
     addCondition: string;
     addGroup: string;
     addAction: string;
+    issueDuplicateId: string;
+    issueMaxDepth: string;
+    issueEmptyGroup: string;
+    issueMissingField: string;
+    issueMissingOperator: string;
+    issueNoActions: string;
+    issueMissingActionType: string;
+    summarySentence: string;
+    summarySentenceConditionsOnly: string;
+    summaryNoConditions: string;
+    summaryNoActions: string;
+    and: string;
+    or: string;
 }
 declare const DEFAULT_RULE_BUILDER_LABELS: RuleBuilderLabels;
 interface RuleBuilderProps {
@@ -66,9 +83,40 @@ interface RuleBuilderProps {
     onChange: (value: RuleDefinition) => void;
     fields: RuleFieldDefinition[];
     operators: RuleOperatorDefinition[];
-    actions: RuleActionDefinition[];
+    /** The action types of the "Then" block. Not needed with `conditionsOnly`. */
+    actions?: RuleActionDefinition[];
     maxDepth?: number;
-    readOnly?: boolean;
+    /**
+     * `true`: the same builder with every control disabled and no add, move or remove buttons.
+     * `'summary'`: one sentence instead of the controls (what `readOnly` rendered up to 2.31.0;
+     * its words are the `summary…`, `and` and `or` labels).
+     */
+    readOnly?: boolean | 'summary';
+    /**
+     * Edit conditions only (HAR-1618): no "Then" block and no "Add action", and the two action
+     * checks (`noActions`, `missingActionType`) are off. `value.then` is passed through untouched.
+     */
+    conditionsOnly?: boolean;
+    /**
+     * Fix every group to this combinator, for a stored shape that is a flat AND-list. The Match
+     * choice becomes plain text ("Match all (AND)"), new groups get this combinator, and every
+     * `onChange` carries it on all groups, so the other value is never emitted.
+     */
+    combinator?: 'and' | 'or';
+    /** Hide the Match control (and its text when `combinator` fixes it). */
+    hideCombinator?: boolean;
+    /**
+     * `false` hides "Add group". It is hidden as well when `maxDepth` is 1, where it could never
+     * be used. Default `true`.
+     */
+    allowGroups?: boolean;
+    /**
+     * Turn built-in checks off: `{ emptyGroup: false }` for a rule that may have no condition
+     * (a catch-all), `{ noActions: false }` for a rule that may do nothing. Their messages are
+     * the `issue…` labels.
+     */
+    checks?: Partial<Record<RuleCheck, boolean>>;
+    /** Extra issues; they are appended to the built-in ones. */
     validate?: (value: RuleDefinition) => RuleValidationIssue[];
     className?: string;
     /** @deprecated use `labels.addCondition` */
@@ -80,6 +128,6 @@ interface RuleBuilderProps {
     labels?: Partial<RuleBuilderLabels>;
 }
 /** Declarative controlled when-conditions-to-actions editor with bounded nesting. */
-declare function RuleBuilder({ value, onChange, fields, operators, actions, maxDepth, readOnly, validate, className, addConditionLabel, addGroupLabel, addActionLabel, labels: labelOverrides, }: RuleBuilderProps): react.JSX.Element;
+declare function RuleBuilder({ value, onChange, fields, operators, actions, maxDepth, readOnly, conditionsOnly, combinator, hideCombinator, allowGroups, checks, validate, className, addConditionLabel, addGroupLabel, addActionLabel, labels: labelOverrides, }: RuleBuilderProps): react.JSX.Element;
 
 export { DEFAULT_RULE_BUILDER_LABELS, type RuleActionDefinition, RuleBuilder, type RuleBuilderLabels, type RuleBuilderProps, type RuleFieldDefinition, type RuleOperatorDefinition, type RuleValueEditorProps };