@proteos/ui 0.55.0 → 0.57.0

package/src/components/currency-input/currency-input.tsx

@@ -157,8 +157,8 @@ export function CurrencyInput({
             className={cn(
               'min-w-[9rem] rounded-md border border-rule bg-surface p-1',
               'shadow-[var(--shadow-raised)]',
-              'entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1',
-              'exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1',
+              'entering:animate-enter-slide-down',
+              'exiting:animate-exit-slide-up',
             )}
           >
             <ListBox className="max-h-72 overflow-auto outline-none">

package/src/components/date-picker/calendar-internals.tsx

@@ -124,7 +124,7 @@ export function CalendarSurface() {
                 'data-[outside-month]:text-ink-4',
                 'data-[hovered]:bg-surface-2 data-[hovered]:text-ink',
                 'data-[focus-visible]:shadow-[var(--shadow-focus)]',
-                'data-[selected]:bg-accent data-[selected]:text-[#f0efe8]',
+                'data-[selected]:bg-accent data-[selected]:text-tile-fg',
                 'data-[selected]:data-[hovered]:bg-accent-2',
                 'data-[disabled]:opacity-30 data-[disabled]:cursor-not-allowed',
                 'data-[unavailable]:line-through data-[unavailable]:text-ink-4',

package/src/components/date-picker/date-picker.tsx

@@ -86,7 +86,7 @@ export function DatePicker<T extends DateValue>({
                 'data-[placeholder]:text-ink-4',
                 'data-[type=literal]:text-ink-4',
                 // segment focus treatment: indigo fill, paper text
-                'data-[focused]:bg-accent data-[focused]:text-[#f0efe8] data-[focused]:rounded-[3px]',
+                'data-[focused]:bg-accent data-[focused]:text-tile-fg data-[focused]:rounded-[3px]',
                 'data-[disabled]:cursor-not-allowed',
               )}
             />
@@ -127,8 +127,8 @@ export function DatePicker<T extends DateValue>({
           'w-[var(--trigger-width)] min-w-[18rem] max-w-[500px]',
           'rounded-md border border-rule bg-surface p-4',
           'shadow-[var(--shadow-raised)]',
-          'entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1',
-          'exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1',
+          'entering:animate-enter-slide-down',
+          'exiting:animate-exit-slide-up',
         )}
       >
         <Dialog className="outline-none">

package/src/components/date-time-picker/date-time-picker.tsx

@@ -43,7 +43,7 @@ const segmentStyles = cn(
   'data-[placeholder]:text-ink-4',
   'data-[type=literal]:text-ink-4',
   // segment focus treatment: indigo fill, paper text
-  'data-[focused]:bg-accent data-[focused]:text-[#f0efe8] data-[focused]:rounded-[3px]',
+  'data-[focused]:bg-accent data-[focused]:text-tile-fg data-[focused]:rounded-[3px]',
   'data-[disabled]:cursor-not-allowed',
 )
 
@@ -185,8 +185,8 @@ export function DateTimePicker<T extends DateValue>({
           'w-[var(--trigger-width)] min-w-[18rem] max-w-[500px]',
           'rounded-md border border-rule bg-surface p-4',
           'shadow-[var(--shadow-raised)]',
-          'entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1',
-          'exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1',
+          'entering:animate-enter-slide-down',
+          'exiting:animate-exit-slide-up',
         )}
       >
         <Dialog className="outline-none">

package/src/components/icon-picker/icon-picker.tsx

@@ -227,8 +227,8 @@ export function IconPicker({
         className={cn(
           'w-[316px] rounded-md border border-rule bg-surface p-2',
           'shadow-[var(--shadow-raised)]',
-          'entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1',
-          'exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1',
+          'entering:animate-enter-slide-down',
+          'exiting:animate-exit-slide-up',
         )}
       >
         <div className="flex items-center gap-1.5 pb-2">

package/src/components/image-lightbox/image-lightbox.tsx

@@ -23,8 +23,8 @@ export const imageLightboxStyles = tv({
     'fixed inset-0 z-50 flex items-center justify-center p-4',
     // Deeper scrim than Modal's 40% — the image needs the page fully dimmed.
     'bg-[color-mix(in_oklab,var(--color-ink)_72%,transparent)]',
-    'entering:animate-in entering:fade-in-0 entering:duration-150',
-    'exiting:animate-out exiting:fade-out-0 exiting:duration-100',
+    'entering:animate-enter-fade',
+    'exiting:animate-exit-fade',
   ],
 })
 

package/src/components/menu/menu.tsx

@@ -61,8 +61,8 @@ export function MenuPopover({ className, offset = 4, placement = 'bottom start',
         cn(
           'min-w-[200px] p-1 bg-surface border border-rule rounded-md',
           'shadow-[var(--shadow-float)] outline-none z-[1200]',
-          'entering:animate-in entering:fade-in-0 entering:zoom-in-95',
-          'exiting:animate-out exiting:fade-out-0 exiting:zoom-out-95',
+          'entering:animate-enter-zoom',
+          'exiting:animate-exit-zoom',
           typeof className === 'function' ? className(renderProps) : className,
         )
       }

package/src/components/modal/modal.tsx

@@ -67,8 +67,8 @@ export function ModalContent({
           'fixed inset-0 z-50 flex items-center justify-center p-4',
           // Warm ink scrim — stays in the Proteos palette (no pure black).
           'bg-[color-mix(in_oklab,var(--color-ink)_40%,transparent)]',
-          'entering:animate-in entering:fade-in-0 entering:duration-150',
-          'exiting:animate-out exiting:fade-out-0 exiting:duration-100',
+          'entering:animate-enter-fade',
+          'exiting:animate-exit-fade',
           typeof className === 'function' ? className(renderProps) : className,
         )
       }
@@ -82,8 +82,8 @@ export function ModalContent({
           'flex flex-col max-h-[calc(100dvh-2rem)]',
           'bg-surface border border-rule rounded-lg',
           'shadow-[var(--shadow-float)]',
-          'entering:animate-in entering:zoom-in-95 entering:slide-in-from-top-2 entering:duration-150',
-          'exiting:animate-out exiting:zoom-out-95 exiting:duration-100',
+          'entering:animate-enter-zoom',
+          'exiting:animate-exit-zoom',
           modalClassName,
         )}
       >

package/src/components/multi-select/multi-select.tsx

@@ -185,8 +185,8 @@ export function MultiSelect<T extends Key>({
           // (defaultOpen) — no browser outline around the whole panel.
           'outline-none rounded-md border border-rule bg-surface p-1',
           'shadow-[var(--shadow-raised)]',
-          'entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1',
-          'exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1',
+          'entering:animate-enter-slide-down',
+          'exiting:animate-exit-slide-up',
         )}
       >
         {isSearchable ? (

package/src/components/popover/popover.tsx

@@ -64,8 +64,8 @@ export function PopoverContent({
         cn(
           'rounded-md border border-rule bg-surface',
           'shadow-[var(--shadow-float)]',
-          'entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1',
-          'exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1',
+          'entering:animate-enter-slide-down',
+          'exiting:animate-exit-slide-up',
           panelClassName,
           typeof className === 'function' ? className(renderProps) : className,
         )

package/src/components/record-filter/chip-value.tsx

@@ -1,7 +1,7 @@
 import { createContext, type ReactNode, useContext } from 'react'
 import { cn } from '../../lib/cn'
 import { Badge } from '../badge/badge'
-import { arityOf } from './operators'
+import { arityOf, isEnumLike } from './operators'
 import type { ComparisonOperator, FilterField, FilterValue } from './types'
 
 /* =========================================================================
@@ -122,8 +122,9 @@ function ChipItem({
     const custom = effectiveRenderer({ field, operator, value })
     if (custom !== undefined) return <>{custom}</>
   }
-  // Lib default: enum → Badge with variant lookup; other → truncated mono text.
-  if (field.type === 'enum') {
+  // Lib default: enum-like → Badge with variant lookup; other → truncated
+  // mono text.
+  if (isEnumLike(field)) {
     const option = findEnumOption(field, value)
     return (
       <Badge
@@ -169,7 +170,7 @@ export function formatValue(
         ? value.split(',')
         : []
     if (arr.length === 0) return '—'
-    if (field.type === 'enum') {
+    if (isEnumLike(field)) {
       const labels = arr.map((v) => findEnumOption(field, v)?.label ?? v)
       return labels.length <= 2
         ? labels.join(', ')
@@ -184,7 +185,7 @@ export function formatValue(
   // badge below already do this; a single value read as the raw slug, so the
   // same filter said "is technical_decider" or "is any of Technical Decider"
   // depending only on the operator.
-  if (field.type === 'enum') {
+  if (isEnumLike(field)) {
     return findEnumOption(field, String(value))?.label ?? String(value)
   }
   if (field.type === 'number' || field.type === 'integer') {

package/src/components/record-filter/filter-value-input.tsx

@@ -11,7 +11,7 @@ import { Input } from '../input/input'
 import { SegmentedControl } from '../segmented-control/segmented-control'
 import { Select, type SelectOption } from '../select/select'
 import { TagInput } from '../tag-input/tag-input'
-import { arityOf } from './operators'
+import { arityOf, isEnumLike } from './operators'
 import type { ComparisonOperator, FilterField, FilterValue } from './types'
 
 /* =========================================================================
@@ -19,11 +19,11 @@ import type { ComparisonOperator, FilterField, FilterValue } from './types'
    Routes to the right primitive based on `(field.type, operator.arity)`:
 
      arity 0  →  null (no input — for empty / not_empty)
-     arity 'n' (in / not_in)
-       enum   →  BadgeMultiSelect
-       other  →  TagInput (free-form list)
+     arity 'n' (in / not_in / contains_all)
+       enum-like →  BadgeMultiSelect (an enum, or an array of enum items)
+       other     →  TagInput (free-form list)
      arity 1
-       enum     →  Select with Badge in renderItem
+       enum-like →  Select with Badge in renderItem
        boolean  →  SegmentedControl (true / false)
        datetime →  DatePicker
        other    →  Input (text or number)
@@ -130,9 +130,9 @@ export function FilterValueInput({
   }
 
   const leaf = (() => {
-    /* ---------- multi-value (in / not_in) ---------- */
+    /* ---------- multi-value (in / not_in / contains_all) ---------- */
     if (arity === 'n') {
-      if (field.type === 'enum') {
+      if (isEnumLike(field)) {
         return (
           <EnumMultiValue
             field={field}
@@ -163,7 +163,7 @@ export function FilterValueInput({
     }
 
     /* ---------- single value ---------- */
-    if (field.type === 'enum') {
+    if (isEnumLike(field)) {
       return (
         <EnumSingleValue
           field={field}
@@ -356,6 +356,8 @@ function placeholderFor(field: FilterField, operator: ComparisonOperator): strin
   if (field.type === 'number' || field.type === 'integer' || field.type === 'currency') return '0'
   if (operator === 'starts_with') return 'starts with…'
   if (operator === 'ends_with') return 'ends with…'
-  if (operator === 'contains') return 'contains…'
+  if (operator === 'contains') return field.type === 'array' ? 'has…' : 'contains…'
+  if (operator === 'not_contains')
+    return field.type === 'array' ? 'does not have…' : 'does not contain…'
   return 'value'
 }

package/src/components/record-filter/nested-group.tsx

@@ -84,8 +84,8 @@ export function NestedGroup({
               <SegmentedControl<LogicalOperator>
                 aria-label="Group joiner"
                 options={[
-                  { id: 'and', label: 'AND' },
-                  { id: 'or', label: 'OR' },
+                  { id: 'and', label: 'and' },
+                  { id: 'or', label: 'or' },
                 ]}
                 value={group.logicalOperator}
                 onChange={(next) => onChange({ ...group, logicalOperator: next })}

package/src/components/record-filter/operators.test.ts

@@ -1,6 +1,13 @@
 import { describe, expect, it } from 'vitest'
 
-import { arityOf, defaultValueFor, OPERATORS, operatorById, operatorsForType } from './operators'
+import {
+  arityOf,
+  defaultValueFor,
+  isEnumLike,
+  OPERATORS,
+  operatorById,
+  operatorsForType,
+} from './operators'
 
 describe('operatorsForType', () => {
   it('includes eq/ne for every primitive type', () => {
@@ -36,16 +43,32 @@ describe('operatorsForType', () => {
     expect(ops).not.toContain('gt')
   })
 
-  it('allows in / not_in on strings, numbers, and enums (not datetime/boolean/array)', () => {
+  it('allows in / not_in on strings, numbers, enums and arrays (not datetime/boolean)', () => {
     for (const op of ['in', 'not_in'] as const) {
       const types = new Set(OPERATORS.find((o) => o.id === op)?.types ?? [])
       expect(types.has('string')).toBe(true)
       expect(types.has('number')).toBe(true)
       expect(types.has('integer')).toBe(true)
       expect(types.has('enum')).toBe(true)
+      expect(types.has('array')).toBe(true)
       expect(types.has('datetime')).toBe(false)
       expect(types.has('boolean')).toBe(false)
-      expect(types.has('array')).toBe(false)
+    }
+  })
+
+  it('allows not_contains wherever contains is allowed', () => {
+    expect(OPERATORS.find((o) => o.id === 'not_contains')?.types).toEqual(
+      OPERATORS.find((o) => o.id === 'contains')?.types,
+    )
+    expect(operatorsForType('string').find((o) => o.id === 'not_contains')?.label).toBe(
+      'does not contain',
+    )
+  })
+
+  it('allows contains_all on arrays only', () => {
+    expect(OPERATORS.find((o) => o.id === 'contains_all')?.types).toEqual(['array'])
+    for (const t of ['string', 'number', 'enum', 'contact-address'] as const) {
+      expect(operatorsForType(t).map((o) => o.id)).not.toContain('contains_all')
     }
   })
 
@@ -56,14 +79,32 @@ describe('operatorsForType', () => {
     }
   })
 
-  it('allows contains/empty/not_empty on arrays', () => {
-    const arrayOps = operatorsForType('array').map((o) => o.id)
-    expect(arrayOps).toContain('contains')
-    expect(arrayOps).toContain('empty')
-    expect(arrayOps).toContain('not_empty')
-    // No magnitude/text-shape operators on arrays.
-    expect(arrayOps).not.toContain('gt')
-    expect(arrayOps).not.toContain('starts_with')
+  it('offers exactly the set-membership operators on arrays, positive-first', () => {
+    const arrayOps = operatorsForType('array')
+    expect(arrayOps.map((o) => o.id)).toEqual([
+      'contains',
+      'not_contains',
+      'in',
+      'contains_all',
+      'not_in',
+      'empty',
+      'not_empty',
+    ])
+    // Labelled in the words every CRM uses for membership.
+    expect(arrayOps.map((o) => o.label)).toEqual([
+      'has',
+      'does not have',
+      'has any of',
+      'has all of',
+      'has none of',
+      'is empty',
+      'is not empty',
+    ])
+    // No magnitude / equality / text-shape operators on arrays.
+    const ids = arrayOps.map((o) => o.id)
+    expect(ids).not.toContain('eq')
+    expect(ids).not.toContain('gt')
+    expect(ids).not.toContain('starts_with')
   })
 
   it('allows identity operators on user, not text/numeric shapes', () => {
@@ -90,17 +131,31 @@ describe('arityOf', () => {
     expect(arityOf('empty')).toBe(0)
     expect(arityOf('not_empty')).toBe(0)
   })
-  it("returns 'n' for in/not_in", () => {
+  it("returns 'n' for in/not_in/contains_all", () => {
     expect(arityOf('in')).toBe('n')
     expect(arityOf('not_in')).toBe('n')
+    expect(arityOf('contains_all')).toBe('n')
   })
   it('returns 1 for the rest', () => {
     expect(arityOf('eq')).toBe(1)
     expect(arityOf('contains')).toBe(1)
+    expect(arityOf('not_contains')).toBe(1)
     expect(arityOf('gt')).toBe(1)
   })
 })
 
+describe('isEnumLike', () => {
+  it('is true for an enum and for an array carrying item options', () => {
+    expect(isEnumLike({ type: 'enum', options: [] })).toBe(true)
+    expect(isEnumLike({ type: 'array', options: [{ value: 'a', label: 'A' }] })).toBe(true)
+  })
+  it('is false for a free-text array and for scalars', () => {
+    expect(isEnumLike({ type: 'array' })).toBe(false)
+    expect(isEnumLike({ type: 'array', options: [] })).toBe(false)
+    expect(isEnumLike({ type: 'string' })).toBe(false)
+  })
+})
+
 describe('defaultValueFor', () => {
   it('returns null for arity 0', () => {
     expect(defaultValueFor('string', 0)).toBeNull()

package/src/components/record-filter/operators.ts

@@ -1,5 +1,6 @@
 import type {
   ComparisonOperator,
+  FilterField,
   FilterFieldType,
   FilterValue,
   OperatorArity,
@@ -64,6 +65,7 @@ export const OPERATORS: ReadonlyArray<OperatorDescriptor> = [
       'user',
       'principal',
       'contact-address',
+      'array',
     ],
   },
   {
@@ -80,9 +82,18 @@ export const OPERATORS: ReadonlyArray<OperatorDescriptor> = [
       'user',
       'principal',
       'contact-address',
+      'array',
     ],
   },
   { id: 'contains', label: 'contains', arity: 1, types: ['string', 'array', 'contact-address'] },
+  {
+    id: 'not_contains',
+    label: 'does not contain',
+    arity: 1,
+    types: ['string', 'array', 'contact-address'],
+  },
+  // Array-only: "has every one of these". On a scalar the backend rejects it.
+  { id: 'contains_all', label: 'has all of', arity: 'n', types: ['array'] },
   { id: 'starts_with', label: 'starts with', arity: 1, types: ['string', 'contact-address'] },
   { id: 'ends_with', label: 'ends with', arity: 1, types: ['string', 'contact-address'] },
   {
@@ -148,15 +159,45 @@ const OP_LABEL_OVERRIDES: Partial<
   integer: { gt: 'is greater than', lt: 'is less than', eq: 'equals', ne: 'does not equal' },
   currency: { gt: 'is greater than', lt: 'is less than', eq: 'equals', ne: 'does not equal' },
   datetime: { eq: 'is on', ne: 'is not on', gt: 'is after', lt: 'is before' },
-  array: { contains: 'contains', empty: 'is empty', not_empty: 'is not empty' },
+  // Arrays filter by set membership, in the words every CRM uses for it.
+  array: {
+    contains: 'has',
+    not_contains: 'does not have',
+    in: 'has any of',
+    not_in: 'has none of',
+    contains_all: 'has all of',
+    empty: 'is empty',
+    not_empty: 'is not empty',
+  },
   boolean: { eq: 'is', ne: 'is not' },
 }
 
+/* Per-type picker order where the catalogue's global order reads wrong.
+   Arrays go positive-first, single value before list, so the dropdown reads
+   has / does not have / has any of / has all of / has none of. */
+const OP_ORDER_OVERRIDES: Partial<Record<FilterFieldType, ReadonlyArray<ComparisonOperator>>> = {
+  array: ['contains', 'not_contains', 'in', 'contains_all', 'not_in', 'empty', 'not_empty'],
+}
+
 export function operatorsForType(type: FilterFieldType): ReadonlyArray<OperatorDescriptor> {
-  return OPERATORS.filter((op) => op.types.includes(type)).map((op) => {
+  const ops = OPERATORS.filter((op) => op.types.includes(type)).map((op) => {
     const override = OP_LABEL_OVERRIDES[type]?.[op.id]
     return override ? { ...op, label: override } : op
   })
+  const order = OP_ORDER_OVERRIDES[type]
+  if (!order) return ops
+  return [...ops].sort((a, b) => order.indexOf(a.id) - order.indexOf(b.id))
+}
+
+/**
+ * True when the field's values come from a declared option list — an enum,
+ * or an array whose ITEMS are an enum. The value editor and the chip render
+ * these from `field.options` (Select / BadgeMultiSelect / Badge) rather than
+ * as free text.
+ */
+export function isEnumLike(field: Pick<FilterField, 'type' | 'options'>): boolean {
+  if (field.type === 'enum') return true
+  return field.type === 'array' && (field.options?.length ?? 0) > 0
 }
 
 export function operatorById(id: ComparisonOperator): OperatorDescriptor | undefined {

package/src/components/record-filter/record-filter-builder-panel.tsx

@@ -1,4 +1,5 @@
 import { cn } from '../../lib/cn'
+import { Button } from '../button/button'
 import { SegmentedControl } from '../segmented-control/segmented-control'
 import { type FilterValueInputRenderer, RenderValueInputProvider } from './filter-value-input'
 import { RecordFilterEditor } from './record-filter-editor'
@@ -86,8 +87,8 @@ export function RecordFilterBuilderPanel({
             <SegmentedControl<LogicalOperator>
               aria-label="Joiner"
               options={[
-                { id: 'and', label: 'AND' },
-                { id: 'or', label: 'OR' },
+                { id: 'and', label: 'and' },
+                { id: 'or', label: 'or' },
               ]}
               value={filter.logicalOperator}
               onChange={setJoiner}
@@ -190,16 +191,11 @@ export function RecordFilterBuilderPanel({
         </button>
         <div className="flex items-center gap-1.5">
           {onSaveView ? (
-            <button
-              type="button"
-              onClick={onSaveView}
-              disabled={totalChildren === 0}
-              className={cn(
-                'inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-sm',
-                'font-sans text-[13px] text-ink-2 hover:bg-surface-2 hover:text-ink',
-                'disabled:opacity-40 disabled:pointer-events-none',
-                'outline-none cursor-pointer',
-              )}
+            <Button
+              variant="ghost"
+              size="sm"
+              onPress={onSaveView}
+              isDisabled={totalChildren === 0}
             >
               <svg
                 aria-hidden
@@ -215,19 +211,11 @@ export function RecordFilterBuilderPanel({
                 <path d="M5 2v3h4V2" />
               </svg>
               Save as view
-            </button>
+            </Button>
           ) : null}
-          <button
-            type="button"
-            onClick={onClose}
-            className={cn(
-              'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-sm',
-              'bg-ink text-surface font-mono text-[12px]',
-              'hover:bg-accent-ink outline-none cursor-pointer',
-            )}
-          >
+          <Button variant="cta" size="sm" onPress={onClose}>
             Done
-          </button>
+          </Button>
         </div>
       </div>
     </div>

package/src/components/record-filter/record-filter-chips.tsx

@@ -1,5 +1,6 @@
 import { Fragment, type RefObject, useEffect, useMemo, useRef, useState } from 'react'
 import { cn } from '../../lib/cn'
+import { Button } from '../button/button'
 import { PopoverContent } from '../popover/popover'
 import { AttributePicker } from './attribute-picker'
 import { ChipValue, type ChipValueItemRenderer } from './chip-value'
@@ -489,17 +490,9 @@ function ChipMiniEditor({
           onChange={onChangeValue}
         />
       </div>
-      <button
-        type="submit"
-        className={cn(
-          'shrink-0 inline-flex items-center px-2.5 py-1.5 rounded-md',
-          'bg-ink text-surface font-mono text-[12px]',
-          'hover:bg-accent-ink cursor-pointer outline-none',
-          'focus-visible:shadow-[var(--shadow-focus)]',
-        )}
-      >
+      <Button type="submit" variant="cta" size="sm" className="shrink-0">
         Save
-      </button>
+      </Button>
     </form>
   )
 }

package/src/components/record-filter/types.ts

@@ -42,7 +42,10 @@ export type FilterField = {
   /** Parent label for breadcrumb in chips, e.g. `'Owner'`. Omitted for top-level. */
   parentLabel?: string
   type: FilterFieldType
-  /** Required when `type === 'enum'`; ignored otherwise. */
+  /** Required when `type === 'enum'`. For `type === 'array'` these are the
+   *  ITEM enum's values (an array of enum items), so the membership editors
+   *  and chips pick from the same list the record editor does. Ignored
+   *  otherwise. */
   options?: ReadonlyArray<FilterFieldOption>
   /** Hint for `<Input type=…>`. Defaults derived from `type`. */
   inputType?: 'text' | 'number' | 'date' | 'datetime' | 'email'
@@ -111,6 +114,8 @@ export type ComparisonOperator =
   | 'in'
   | 'not_in'
   | 'contains'
+  | 'not_contains'
+  | 'contains_all'
   | 'starts_with'
   | 'ends_with'
   | 'empty'