@multicomma/arkcn 0.1.2 → 0.1.3

package/registry/items/query-builder.json

@@ -31,6 +31,1373 @@
     "describeQuery",
     "pruneQuery"
   ],
+  "parts": [
+    {
+      "name": "QueryBuilder",
+      "props": [
+        {
+          "name": "fields",
+          "type": "QueryField[]",
+          "required": true,
+          "description": "Fields the user can filter on: `{ name, label, type, options, operators, placeholder }`.",
+          "from": "arkcn"
+        },
+        {
+          "name": "defaultValue",
+          "type": "QueryGroup",
+          "required": false,
+          "description": "The initial value when uncontrolled.",
+          "from": "arkcn"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Disables the part and everything inside it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "maxDepth",
+          "type": "number",
+          "required": false,
+          "default": "3",
+          "description": "Nesting limit for \"Add group\"; the trigger hides past it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "onValueChange",
+          "type": "((value: QueryGroup) => void)",
+          "required": false,
+          "description": "Called with the new value whenever it changes.",
+          "from": "arkcn"
+        },
+        {
+          "name": "operators",
+          "type": "QueryOperator[]",
+          "required": false,
+          "default": "defaultOperators",
+          "description": "Operator definitions; defaults to `defaultOperators`.",
+          "from": "arkcn"
+        },
+        {
+          "name": "value",
+          "type": "QueryGroup",
+          "required": false,
+          "description": "The controlled value.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "QueryBuilderGroup",
+      "props": [
+        {
+          "name": "group",
+          "type": "QueryGroup",
+          "required": true,
+          "description": "The group node this part renders.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "QueryBuilderGroupHeader",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "QueryBuilderMatch",
+      "props": [
+        {
+          "name": "after",
+          "type": "ReactNode",
+          "required": false,
+          "default": "\"of the following\"",
+          "description": "Text rendered after the match select.",
+          "from": "arkcn"
+        },
+        {
+          "name": "before",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Text before the select. Defaults to \"Match\" at the top level and \"Where\" in nested groups.",
+          "from": "arkcn"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "autoComplete",
+          "type": "string",
+          "required": false,
+          "description": "The autocomplete attribute for the hidden select. Enables browser autofill (e.g. \"address-level1\" for state).",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether the select should close after an item is selected",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "composite",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether the select is a composed with other composite widgets like tabs or combobox",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "defaultHighlightedValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The initial value of the highlighted item when opened.\nUse when you don't need to control the highlighted value of the select.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select's open state is controlled by the user",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "defaultValue",
+          "type": "string[]",
+          "required": false,
+          "description": "The initial default value of the select when rendered.\nUse when you don't need to control the value of the select.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "deselectable",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the value can be cleared by clicking the selected item.\n\n**Note:** this is only applicable for single selection",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select is disabled",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "form",
+          "type": "string",
+          "required": false,
+          "description": "The associate form of the underlying select.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "hideMode",
+          "type": "HideMode",
+          "required": false,
+          "default": "'display-none'",
+          "description": "How to hide content when mounted but not present.\n- `'display-none'`: HTML `hidden` attribute. Effects stay alive.\n- `'activity'`: React 19 `<Activity mode=\"hidden\">`. Effects pause. Requires React 19+.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "highlightedValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The controlled key of the highlighted item",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "The unique identifier of the machine.",
+          "from": "@zag-js/types"
+        },
+        {
+          "name": "ids",
+          "type": "ElementIds",
+          "required": false,
+          "description": "The ids of the elements in the select. Useful for composition.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "immediate",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to synchronize the present change immediately or defer it to the next frame",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select is invalid",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "lazyMount",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to enable lazy mounting",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "loopFocus",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to loop the keyboard navigation through the options",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to allow multiple selection",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "required": false,
+          "description": "The `name` attribute of the underlying select.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "onEnterComplete",
+          "type": "VoidFunction",
+          "required": false,
+          "description": "Function called when the animation ends in the open state",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "onExitComplete",
+          "type": "VoidFunction",
+          "required": false,
+          "description": "Function called when the animation ends in the closed state",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "onFocusOutside",
+          "type": "((event: FocusOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when the focus is moved outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onHighlightChange",
+          "type": "((details: HighlightChangeDetails<unknown>) => void)",
+          "required": false,
+          "description": "The callback fired when the highlighted item changes.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "onInteractOutside",
+          "type": "((event: InteractOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when an interaction happens outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onOpenChange",
+          "type": "((details: OpenChangeDetails) => void)",
+          "required": false,
+          "description": "Function called when the popup is opened",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "onPointerDownOutside",
+          "type": "((event: PointerDownOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when the pointer is pressed down outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onSelect",
+          "type": "((details: SelectionDetails) => void)",
+          "required": false,
+          "description": "Function called when an item is selected",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select menu is open",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "positioning",
+          "type": "PositioningOptions",
+          "required": false,
+          "description": "The positioning options of the menu.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "present",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the node is present (controlled by the user)",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select is read-only",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select is required",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "scrollToIndexFn",
+          "type": "((details: ScrollToIndexDetails) => void)",
+          "required": false,
+          "description": "Function to scroll to a specific index",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "skipAnimationOnMount",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to allow the initial presence animation.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        },
+        {
+          "name": "translations",
+          "type": "IntlTranslations",
+          "required": false,
+          "description": "Specifies the localized strings that identifies the accessibility elements and their states",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "unmountOnExit",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to unmount on exit.",
+          "from": "@ark-ui/react"
+        }
+      ]
+    },
+    {
+      "name": "QueryBuilderGroupBody",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "QueryBuilderGroupFooter",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "QueryBuilderRule",
+      "props": [
+        {
+          "name": "rule",
+          "type": "QueryRule",
+          "required": true,
+          "description": "The rule node this part renders.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "QueryBuilderFieldSelect",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "autoComplete",
+          "type": "string",
+          "required": false,
+          "description": "The autocomplete attribute for the hidden select. Enables browser autofill (e.g. \"address-level1\" for state).",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether the select should close after an item is selected",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "composite",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether the select is a composed with other composite widgets like tabs or combobox",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "defaultHighlightedValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The initial value of the highlighted item when opened.\nUse when you don't need to control the highlighted value of the select.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select's open state is controlled by the user",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "defaultValue",
+          "type": "string[]",
+          "required": false,
+          "description": "The initial default value of the select when rendered.\nUse when you don't need to control the value of the select.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "deselectable",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the value can be cleared by clicking the selected item.\n\n**Note:** this is only applicable for single selection",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select is disabled",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "form",
+          "type": "string",
+          "required": false,
+          "description": "The associate form of the underlying select.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "hideMode",
+          "type": "HideMode",
+          "required": false,
+          "default": "'display-none'",
+          "description": "How to hide content when mounted but not present.\n- `'display-none'`: HTML `hidden` attribute. Effects stay alive.\n- `'activity'`: React 19 `<Activity mode=\"hidden\">`. Effects pause. Requires React 19+.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "highlightedValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The controlled key of the highlighted item",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "The unique identifier of the machine.",
+          "from": "@zag-js/types"
+        },
+        {
+          "name": "ids",
+          "type": "ElementIds",
+          "required": false,
+          "description": "The ids of the elements in the select. Useful for composition.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "immediate",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to synchronize the present change immediately or defer it to the next frame",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select is invalid",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "lazyMount",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to enable lazy mounting",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "loopFocus",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to loop the keyboard navigation through the options",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to allow multiple selection",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "required": false,
+          "description": "The `name` attribute of the underlying select.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "onEnterComplete",
+          "type": "VoidFunction",
+          "required": false,
+          "description": "Function called when the animation ends in the open state",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "onExitComplete",
+          "type": "VoidFunction",
+          "required": false,
+          "description": "Function called when the animation ends in the closed state",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "onFocusOutside",
+          "type": "((event: FocusOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when the focus is moved outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onHighlightChange",
+          "type": "((details: HighlightChangeDetails<unknown>) => void)",
+          "required": false,
+          "description": "The callback fired when the highlighted item changes.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "onInteractOutside",
+          "type": "((event: InteractOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when an interaction happens outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onOpenChange",
+          "type": "((details: OpenChangeDetails) => void)",
+          "required": false,
+          "description": "Function called when the popup is opened",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "onPointerDownOutside",
+          "type": "((event: PointerDownOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when the pointer is pressed down outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onSelect",
+          "type": "((details: SelectionDetails) => void)",
+          "required": false,
+          "description": "Function called when an item is selected",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select menu is open",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "positioning",
+          "type": "PositioningOptions",
+          "required": false,
+          "description": "The positioning options of the menu.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "present",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the node is present (controlled by the user)",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select is read-only",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select is required",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "scrollToIndexFn",
+          "type": "((details: ScrollToIndexDetails) => void)",
+          "required": false,
+          "description": "Function to scroll to a specific index",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "skipAnimationOnMount",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to allow the initial presence animation.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        },
+        {
+          "name": "translations",
+          "type": "IntlTranslations",
+          "required": false,
+          "description": "Specifies the localized strings that identifies the accessibility elements and their states",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "unmountOnExit",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to unmount on exit.",
+          "from": "@ark-ui/react"
+        }
+      ]
+    },
+    {
+      "name": "QueryBuilderOperatorSelect",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "autoComplete",
+          "type": "string",
+          "required": false,
+          "description": "The autocomplete attribute for the hidden select. Enables browser autofill (e.g. \"address-level1\" for state).",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether the select should close after an item is selected",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "composite",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether the select is a composed with other composite widgets like tabs or combobox",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "defaultHighlightedValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The initial value of the highlighted item when opened.\nUse when you don't need to control the highlighted value of the select.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select's open state is controlled by the user",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "defaultValue",
+          "type": "string[]",
+          "required": false,
+          "description": "The initial default value of the select when rendered.\nUse when you don't need to control the value of the select.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "deselectable",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the value can be cleared by clicking the selected item.\n\n**Note:** this is only applicable for single selection",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select is disabled",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "form",
+          "type": "string",
+          "required": false,
+          "description": "The associate form of the underlying select.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "hideMode",
+          "type": "HideMode",
+          "required": false,
+          "default": "'display-none'",
+          "description": "How to hide content when mounted but not present.\n- `'display-none'`: HTML `hidden` attribute. Effects stay alive.\n- `'activity'`: React 19 `<Activity mode=\"hidden\">`. Effects pause. Requires React 19+.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "highlightedValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The controlled key of the highlighted item",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "The unique identifier of the machine.",
+          "from": "@zag-js/types"
+        },
+        {
+          "name": "ids",
+          "type": "ElementIds",
+          "required": false,
+          "description": "The ids of the elements in the select. Useful for composition.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "immediate",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to synchronize the present change immediately or defer it to the next frame",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select is invalid",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "lazyMount",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to enable lazy mounting",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "loopFocus",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to loop the keyboard navigation through the options",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to allow multiple selection",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "required": false,
+          "description": "The `name` attribute of the underlying select.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "onEnterComplete",
+          "type": "VoidFunction",
+          "required": false,
+          "description": "Function called when the animation ends in the open state",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "onExitComplete",
+          "type": "VoidFunction",
+          "required": false,
+          "description": "Function called when the animation ends in the closed state",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "onFocusOutside",
+          "type": "((event: FocusOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when the focus is moved outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onHighlightChange",
+          "type": "((details: HighlightChangeDetails<unknown>) => void)",
+          "required": false,
+          "description": "The callback fired when the highlighted item changes.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "onInteractOutside",
+          "type": "((event: InteractOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when an interaction happens outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onOpenChange",
+          "type": "((details: OpenChangeDetails) => void)",
+          "required": false,
+          "description": "Function called when the popup is opened",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "onPointerDownOutside",
+          "type": "((event: PointerDownOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when the pointer is pressed down outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onSelect",
+          "type": "((details: SelectionDetails) => void)",
+          "required": false,
+          "description": "Function called when an item is selected",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select menu is open",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "positioning",
+          "type": "PositioningOptions",
+          "required": false,
+          "description": "The positioning options of the menu.",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "present",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the node is present (controlled by the user)",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select is read-only",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the select is required",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "scrollToIndexFn",
+          "type": "((details: ScrollToIndexDetails) => void)",
+          "required": false,
+          "description": "Function to scroll to a specific index",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "skipAnimationOnMount",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to allow the initial presence animation.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        },
+        {
+          "name": "translations",
+          "type": "IntlTranslations",
+          "required": false,
+          "description": "Specifies the localized strings that identifies the accessibility elements and their states",
+          "from": "@zag-js/select"
+        },
+        {
+          "name": "unmountOnExit",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to unmount on exit.",
+          "from": "@ark-ui/react"
+        }
+      ]
+    },
+    {
+      "name": "QueryBuilderValueEditor",
+      "props": [
+        {
+          "name": "children",
+          "type": "((props: ValueEditorRenderProps) => ReactNode)",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "arkcn"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "QueryBuilderRuleActions",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "QueryBuilderAddRuleTrigger",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"link\" | \"default\" | \"outline\" | \"secondary\" | \"ghost\" | \"destructive\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "QueryBuilderAddGroupTrigger",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"link\" | \"default\" | \"outline\" | \"secondary\" | \"ghost\" | \"destructive\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "QueryBuilderRemoveTrigger",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"link\" | \"default\" | \"outline\" | \"secondary\" | \"ghost\" | \"destructive\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "QueryBuilderSummary",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "QueryBuilderEmpty",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    }
+  ],
   "dependencies": {
     "@ark-ui/react": "^5.39.1",
     "lucide-react": "^1.41.0"
@@ -45,7 +1412,7 @@
   "files": [
     {
       "path": "components/ui/query-builder.tsx",
-      "content": "import * as React from \"react\"\nimport { ark } from \"@ark-ui/react\"\nimport { createListCollection } from \"@ark-ui/react/collection\"\nimport { PlusIcon, XIcon } from \"lucide-react\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectControl,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\nimport { useControllable } from \"@/lib/controllable\"\n\n/**\n * QueryBuilder — a compositional filter builder that reads like a sentence.\n *\n * Every group opens with \"Match all / any of the following\" and each condition\n * reads field → plain-language operator → value. Incomplete conditions (no\n * value yet) are flagged with `data-incomplete` and dropped by `pruneQuery`\n * instead of erroring, negation lives in the operator wording (\"is not\",\n * \"does not contain\") and order is irrelevant, so there is no NOT toggle and\n * no drag-reorder to learn.\n *\n * The consumer owns the query tree (`value`/`onValueChange`) and renders the\n * parts recursively; the root applies all edits (add, remove, update). The\n * primitive never interprets the tree: turning it into SQL, an API filter, or\n * an in-memory predicate is the consumer's job (see `src/demo/query-builder`).\n *\n * Anatomy:\n *   QueryBuilder\n *     QueryBuilderGroup          { group }\n *       QueryBuilderGroupHeader\n *         QueryBuilderMatch      \"all\" | \"any\" select\n *         QueryBuilderRemoveTrigger (nested groups)\n *       QueryBuilderGroupBody\n *         QueryBuilderRule       { rule } → FieldSelect + OperatorSelect + ValueEditor + RuleActions\n *         QueryBuilderGroup      (nested)\n *       QueryBuilderGroupFooter\n *         QueryBuilderAddRuleTrigger / QueryBuilderAddGroupTrigger\n *     QueryBuilderSummary        natural-language sentence\n */\n\n/* ---------------------------------------------------------------------------\n * Model\n * ------------------------------------------------------------------------- */\n\ntype QueryFieldType = \"text\" | \"number\" | \"date\" | \"boolean\" | \"select\"\ntype QueryOption = { value: string; label: string }\ntype QueryField = {\n  name: string\n  label: string\n  type?: QueryFieldType\n  /** For `select` fields. */\n  options?: QueryOption[]\n  /** Restrict the operators offered (names from `operators`). */\n  operators?: string[]\n  /** Placeholder for the value editor. */\n  placeholder?: string\n}\n/** How many values an operator takes. */\ntype QueryArity = \"none\" | \"one\" | \"two\" | \"many\"\ntype QueryOperator = { name: string; label: string; arity: QueryArity; types: QueryFieldType[] }\n\ntype QueryRule = { id: string; field: string; operator: string; value?: unknown }\ntype QueryGroup = { id: string; match: \"all\" | \"any\"; rules: QueryNode[] }\ntype QueryNode = QueryRule | QueryGroup\n\nconst isGroup = (node: QueryNode): node is QueryGroup => \"rules\" in node\n\nlet seq = 0\nconst uid = (prefix: string) => `${prefix}-${(seq++).toString(36)}${Date.now().toString(36).slice(-3)}`\n\nconst op = (name: string, label: string, arity: QueryArity, types: QueryFieldType[]): QueryOperator => ({\n  name,\n  label,\n  arity,\n  types,\n})\n\n/** Plain-language operators; negation is part of the wording. */\nconst defaultOperators: QueryOperator[] = [\n  op(\"is\", \"is\", \"one\", [\"text\", \"number\", \"date\", \"select\"]),\n  op(\"isNot\", \"is not\", \"one\", [\"text\", \"number\", \"date\", \"select\"]),\n  op(\"contains\", \"contains\", \"one\", [\"text\"]),\n  op(\"doesNotContain\", \"does not contain\", \"one\", [\"text\"]),\n  op(\"startsWith\", \"starts with\", \"one\", [\"text\"]),\n  op(\"endsWith\", \"ends with\", \"one\", [\"text\"]),\n  op(\"greaterThan\", \"is greater than\", \"one\", [\"number\"]),\n  op(\"lessThan\", \"is less than\", \"one\", [\"number\"]),\n  op(\"atLeast\", \"is at least\", \"one\", [\"number\"]),\n  op(\"atMost\", \"is at most\", \"one\", [\"number\"]),\n  op(\"before\", \"is before\", \"one\", [\"date\"]),\n  op(\"after\", \"is after\", \"one\", [\"date\"]),\n  op(\"between\", \"is between\", \"two\", [\"number\", \"date\"]),\n  op(\"anyOf\", \"is any of\", \"many\", [\"select\", \"text\"]),\n  op(\"noneOf\", \"is none of\", \"many\", [\"select\", \"text\"]),\n  op(\"isTrue\", \"is true\", \"none\", [\"boolean\"]),\n  op(\"isFalse\", \"is false\", \"none\", [\"boolean\"]),\n  op(\"isEmpty\", \"is empty\", \"none\", [\"text\", \"number\", \"date\", \"select\"]),\n  op(\"isNotEmpty\", \"is not empty\", \"none\", [\"text\", \"number\", \"date\", \"select\"]),\n]\n\nfunction operatorsFor(field: QueryField | undefined, operators: QueryOperator[]) {\n  if (!field) return []\n  const type = field.type ?? \"text\"\n  const allowed = operators.filter((o) => o.types.includes(type))\n  return field.operators\n    ? (field.operators.map((n) => allowed.find((o) => o.name === n)).filter(Boolean) as QueryOperator[])\n    : allowed\n}\n\nfunction createRule(fields: QueryField[], operators = defaultOperators, patch?: Partial<QueryRule>): QueryRule {\n  const field = fields.find((f) => f.name === patch?.field) ?? fields[0]\n  const operator = patch?.operator ?? operatorsFor(field, operators)[0]?.name ?? \"\"\n  return { id: uid(\"rule\"), field: field?.name ?? \"\", operator, value: undefined, ...patch }\n}\n\nfunction createGroup(match: QueryGroup[\"match\"] = \"all\", rules: QueryNode[] = []): QueryGroup {\n  return { id: uid(\"group\"), match, rules }\n}\n\nconst hasValue = (value: unknown) =>\n  value !== undefined && value !== null && value !== \"\" && !(Array.isArray(value) && value.length === 0)\n\n/** A rule counts once it has everything its operator needs. */\nfunction isComplete(rule: QueryRule, operators = defaultOperators) {\n  const operator = operators.find((o) => o.name === rule.operator)\n  if (!operator || !rule.field) return false\n  if (operator.arity === \"none\") return true\n  if (operator.arity === \"two\") return Array.isArray(rule.value) && hasValue(rule.value[0]) && hasValue(rule.value[1])\n  return hasValue(rule.value)\n}\n\n/* Tree edits (pure) */\n\nfunction mapTree(node: QueryGroup, fn: (node: QueryNode) => QueryNode | null): QueryGroup {\n  const rules = node.rules\n    .map((child) => {\n      const next = fn(child)\n      if (next === null) return null\n      return isGroup(next) ? mapTree(next, fn) : next\n    })\n    .filter((n): n is QueryNode => n !== null)\n  return { ...node, rules }\n}\n\nfunction updateNode(root: QueryGroup, id: string, patch: Partial<QueryRule> | Partial<QueryGroup>): QueryGroup {\n  if (root.id === id) return { ...root, ...(patch as Partial<QueryGroup>) }\n  return mapTree(root, (n) => (n.id === id ? ({ ...n, ...patch } as QueryNode) : n))\n}\n\nfunction removeNode(root: QueryGroup, id: string): QueryGroup {\n  return mapTree(root, (n) => (n.id === id ? null : n))\n}\n\nfunction insertNode(root: QueryGroup, groupId: string, node: QueryNode): QueryGroup {\n  if (root.id === groupId) return { ...root, rules: [...root.rules, node] }\n  return mapTree(root, (n) => (isGroup(n) && n.id === groupId ? { ...n, rules: [...n.rules, node] } : n))\n}\n\n/* ---------------------------------------------------------------------------\n * Describing the tree (presentation only; interpreting it is the consumer's job)\n * ------------------------------------------------------------------------- */\n\ntype DescribeOptions = { fields: QueryField[]; operators?: QueryOperator[] }\n\nfunction valueLabel(rule: QueryRule, field: QueryField | undefined): string {\n  const label = (v: unknown) => field?.options?.find((o) => o.value === String(v))?.label ?? String(v)\n  if (Array.isArray(rule.value)) {\n    const values = rule.value.map(label)\n    if (rule.operator === \"between\") return `${values[0]} and ${values[1]}`\n    if (values.length <= 3) return values.join(\", \")\n    return `${values.slice(0, 2).join(\", \")} and ${values.length - 2} more`\n  }\n  return label(rule.value)\n}\n\n/** Natural-language sentence, e.g. \"Status is Active and Created is after 2026-01-01\". */\nfunction describeQuery(\n  group: QueryGroup,\n  { fields, operators = defaultOperators }: DescribeOptions,\n  depth = 0\n): string {\n  const parts = group.rules\n    .map((n) => {\n      if (isGroup(n)) return describeQuery(n, { fields, operators }, depth + 1)\n      if (!isComplete(n, operators)) return \"\"\n      const field = fields.find((f) => f.name === n.field)\n      const operator = operators.find((o) => o.name === n.operator)\n      const value = operator?.arity === \"none\" ? \"\" : ` ${valueLabel(n, field)}`\n      return `${field?.label ?? n.field} ${operator?.label ?? n.operator}${value}`\n    })\n    .filter(Boolean)\n  if (!parts.length) return \"\"\n  const joined = parts.join(group.match === \"all\" ? \" and \" : \" or \")\n  return depth > 0 && parts.length > 1 ? `(${joined})` : joined\n}\n\n/** The tree without incomplete rules and empty groups: what an interpreter should consume. */\nfunction pruneQuery(group: QueryGroup, operators = defaultOperators): QueryGroup {\n  const rules = group.rules\n    .map((n) => (isGroup(n) ? pruneQuery(n, operators) : isComplete(n, operators) ? n : null))\n    .filter((n): n is QueryNode => n !== null && (!isGroup(n) || n.rules.length > 0))\n  return { ...group, rules }\n}\n\n/* ---------------------------------------------------------------------------\n * Context\n * ------------------------------------------------------------------------- */\n\ntype QueryBuilderContextValue = {\n  fields: QueryField[]\n  operators: QueryOperator[]\n  value: QueryGroup\n  disabled: boolean\n  maxDepth: number\n  addRule: (groupId: string, patch?: Partial<QueryRule>) => void\n  addGroup: (groupId: string) => void\n  remove: (id: string) => void\n  updateRule: (id: string, patch: Partial<QueryRule>) => void\n  setMatch: (groupId: string, match: QueryGroup[\"match\"]) => void\n}\n\nconst QueryBuilderContext = React.createContext<QueryBuilderContextValue | null>(null)\nconst GroupContext = React.createContext<{ group: QueryGroup; depth: number } | null>(null)\nconst RuleContext = React.createContext<{ rule: QueryRule } | null>(null)\n\nfunction useQueryBuilder() {\n  const ctx = React.useContext(QueryBuilderContext)\n  if (!ctx) throw new Error(\"QueryBuilder parts must be used within <QueryBuilder>\")\n  return ctx\n}\nfunction useQueryBuilderGroup() {\n  const ctx = React.useContext(GroupContext)\n  if (!ctx) throw new Error(\"Group parts must be used within <QueryBuilderGroup>\")\n  return ctx\n}\nfunction useQueryBuilderRule() {\n  const ctx = React.useContext(RuleContext)\n  if (!ctx) throw new Error(\"Rule parts must be used within <QueryBuilderRule>\")\n  return ctx\n}\n\n/* ---------------------------------------------------------------------------\n * Root\n * ------------------------------------------------------------------------- */\n\nfunction QueryBuilder({\n  fields,\n  operators = defaultOperators,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  disabled = false,\n  maxDepth = 3,\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"defaultValue\" | \"onChange\"> & {\n  fields: QueryField[]\n  operators?: QueryOperator[]\n  value?: QueryGroup\n  defaultValue?: QueryGroup\n  onValueChange?: (value: QueryGroup) => void\n  disabled?: boolean\n  /** Nesting limit for \"Add group\"; the trigger hides past it. */\n  maxDepth?: number\n}) {\n  const [initial] = React.useState<QueryGroup>(\n    () => defaultValue ?? createGroup(\"all\", [createRule(fields, operators)])\n  )\n  const [value, setValue] = useControllable<QueryGroup>(valueProp, initial, onValueChange)\n  const update = React.useCallback((fn: (prev: QueryGroup) => QueryGroup) => setValue(fn), [setValue])\n\n  const ctx = React.useMemo<QueryBuilderContextValue>(\n    () => ({\n      fields,\n      operators,\n      value,\n      disabled,\n      maxDepth,\n      addRule: (groupId, patch) => update((prev) => insertNode(prev, groupId, createRule(fields, operators, patch))),\n      addGroup: (groupId) =>\n        update((prev) => {\n          // A nested group starts with the opposite match so it adds meaning (\"…and any of these\").\n          const match = groupIn(prev, groupId)?.match === \"any\" ? \"all\" : \"any\"\n          return insertNode(prev, groupId, createGroup(match, [createRule(fields, operators)]))\n        }),\n      remove: (id) => update((prev) => removeNode(prev, id)),\n      updateRule: (id, patch) =>\n        update((prev) => {\n          if (patch.field !== undefined) {\n            // Changing the field resets the operator to the first valid one and clears the value.\n            const field = fields.find((f) => f.name === patch.field)\n            const current = operators.find((o) => o.name === patch.operator)\n            const options = operatorsFor(field, operators)\n            const operator = current && options.includes(current) ? current.name : (options[0]?.name ?? \"\")\n            return updateNode(prev, id, { field: patch.field, operator, value: undefined })\n          }\n          if (patch.operator !== undefined && patch.value === undefined) {\n            const prevRule = findRule(prev, id)\n            const before = operators.find((o) => o.name === prevRule?.operator)?.arity\n            const after = operators.find((o) => o.name === patch.operator)?.arity\n            return updateNode(prev, id, {\n              operator: patch.operator,\n              value: before === after ? prevRule?.value : undefined,\n            })\n          }\n          return updateNode(prev, id, patch)\n        }),\n      setMatch: (groupId, match) => update((prev) => updateNode(prev, groupId, { match })),\n    }),\n    [fields, operators, value, disabled, maxDepth, update]\n  )\n\n  return (\n    <QueryBuilderContext.Provider value={ctx}>\n      <div\n        data-slot=\"query-builder\"\n        data-disabled={disabled ? \"\" : undefined}\n        className={cn(\"flex flex-col gap-3 text-sm\", className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </QueryBuilderContext.Provider>\n  )\n}\n\nfunction groupIn(root: QueryGroup, id: string): QueryGroup | null {\n  if (root.id === id) return root\n  for (const child of root.rules) {\n    if (isGroup(child)) {\n      const found = groupIn(child, id)\n      if (found) return found\n    }\n  }\n  return null\n}\n\nfunction findRule(root: QueryGroup, id: string): QueryRule | null {\n  for (const child of root.rules) {\n    if (isGroup(child)) {\n      const found = findRule(child, id)\n      if (found) return found\n    } else if (child.id === id) return child\n  }\n  return null\n}\n\n/* ---------------------------------------------------------------------------\n * Group parts\n * ------------------------------------------------------------------------- */\n\nfunction QueryBuilderGroup({\n  group,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & { group: QueryGroup }) {\n  const parent = React.useContext(GroupContext)\n  const depth = parent ? parent.depth + 1 : 0\n  const ctx = React.useMemo(() => ({ group, depth }), [group, depth])\n  return (\n    <GroupContext.Provider value={ctx}>\n      <div\n        data-slot=\"query-builder-group\"\n        data-match={group.match}\n        data-depth={depth}\n        data-empty={group.rules.length === 0 ? \"\" : undefined}\n        className={cn(\n          \"group/query-group flex flex-col gap-2\",\n          depth > 0 && \"rounded-lg border border-dashed bg-muted/30 p-3\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </GroupContext.Provider>\n  )\n}\n\nfunction QueryBuilderGroupHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"query-builder-group-header\"\n      className={cn(\"flex flex-wrap items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst matchOptions: QueryOption[] = [\n  { value: \"all\", label: \"all\" },\n  { value: \"any\", label: \"any\" },\n]\nconst matchCollection = createListCollection({ items: matchOptions, itemToValue: (o) => o.value })\n\n/** \"Match [all ▾] of the following\" — the only combinator control, once per group. */\nfunction QueryBuilderMatch({\n  className,\n  before,\n  after = \"of the following\",\n  ...props\n}: Omit<React.ComponentProps<typeof Select>, \"collection\" | \"value\" | \"onValueChange\"> & {\n  /** Text before the select. Defaults to \"Match\" at the top level and \"Where\" in nested groups. */\n  before?: React.ReactNode\n  after?: React.ReactNode\n}) {\n  const { setMatch, disabled } = useQueryBuilder()\n  const { group, depth } = useQueryBuilderGroup()\n  return (\n    <span data-slot=\"query-builder-match\" className=\"inline-flex flex-wrap items-center gap-1.5\">\n      <span className=\"text-muted-foreground\">{before ?? (depth === 0 ? \"Match\" : \"Where\")}</span>\n      <Select\n        collection={matchCollection}\n        value={[group.match]}\n        onValueChange={({ value }) => value[0] && setMatch(group.id, value[0] as QueryGroup[\"match\"])}\n        disabled={disabled}\n        positioning={{ sameWidth: false }}\n        {...props}\n      >\n        <SelectControl>\n          <SelectTrigger size=\"sm\" className={cn(\"font-medium\", className)} aria-label=\"Match all or any\">\n            <SelectValue>{group.match}</SelectValue>\n          </SelectTrigger>\n        </SelectControl>\n        <SelectContent className=\"min-w-24\">\n          {matchOptions.map((o) => (\n            <SelectItem key={o.value} item={o}>\n              <SelectItemText>{o.label}</SelectItemText>\n              <SelectItemIndicator />\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n      <span className=\"text-muted-foreground\">{after}</span>\n    </span>\n  )\n}\n\n/** Indented list of conditions with a guide line. */\nfunction QueryBuilderGroupBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { group } = useQueryBuilderGroup()\n  return (\n    <div\n      data-slot=\"query-builder-group-body\"\n      data-empty={group.rules.length === 0 ? \"\" : undefined}\n      className={cn(\n        \"relative flex flex-col gap-2 ps-4 before:absolute before:inset-y-1 before:inset-s-1 before:w-px before:bg-border\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction QueryBuilderGroupFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"query-builder-group-footer\"\n      className={cn(\"flex flex-wrap items-center gap-1 ps-4\", className)}\n      {...props}\n    />\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Rule parts\n * ------------------------------------------------------------------------- */\n\nfunction QueryBuilderRule({ rule, className, children, ...props }: React.ComponentProps<\"div\"> & { rule: QueryRule }) {\n  const { operators } = useQueryBuilder()\n  const complete = isComplete(rule, operators)\n  const ctx = React.useMemo(() => ({ rule }), [rule])\n  return (\n    <RuleContext.Provider value={ctx}>\n      <div\n        data-slot=\"query-builder-rule\"\n        data-incomplete={complete ? undefined : \"\"}\n        className={cn(\n          \"group/query-rule -ms-1 flex flex-wrap items-center gap-1.5 rounded-lg py-0.5 ps-1 pe-1 hover:bg-muted/40 has-focus-visible:bg-muted/40\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </RuleContext.Provider>\n  )\n}\n\ntype PickerProps = Omit<React.ComponentProps<typeof Select>, \"collection\" | \"value\" | \"onValueChange\">\n\nfunction QueryBuilderFieldSelect({ className, ...props }: PickerProps & { className?: string }) {\n  const { fields, updateRule, disabled } = useQueryBuilder()\n  const { rule } = useQueryBuilderRule()\n  const collection = React.useMemo(\n    () => createListCollection({ items: fields, itemToValue: (f) => f.name, itemToString: (f) => f.label }),\n    [fields]\n  )\n  const field = fields.find((f) => f.name === rule.field)\n  return (\n    <Select\n      collection={collection}\n      value={[rule.field]}\n      onValueChange={({ value }) => value[0] && updateRule(rule.id, { field: value[0] })}\n      disabled={disabled}\n      positioning={{ sameWidth: false }}\n      {...props}\n    >\n      <SelectControl>\n        <SelectTrigger\n          size=\"sm\"\n          className={cn(\"font-medium\", className)}\n          data-slot=\"query-builder-field-select\"\n          aria-label=\"Field\"\n        >\n          <SelectValue placeholder=\"Field\">{field?.label}</SelectValue>\n        </SelectTrigger>\n      </SelectControl>\n      <SelectContent>\n        {fields.map((f) => (\n          <SelectItem key={f.name} item={f}>\n            <SelectItemText>{f.label}</SelectItemText>\n            <SelectItemIndicator />\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  )\n}\n\nfunction QueryBuilderOperatorSelect({ className, ...props }: PickerProps & { className?: string }) {\n  const { fields, operators, updateRule, disabled } = useQueryBuilder()\n  const { rule } = useQueryBuilderRule()\n  const field = fields.find((f) => f.name === rule.field)\n  const options = React.useMemo(() => operatorsFor(field, operators), [field, operators])\n  const collection = React.useMemo(\n    () => createListCollection({ items: options, itemToValue: (o) => o.name, itemToString: (o) => o.label }),\n    [options]\n  )\n  const current = options.find((o) => o.name === rule.operator)\n  return (\n    <Select\n      collection={collection}\n      value={[rule.operator]}\n      onValueChange={({ value }) => value[0] && updateRule(rule.id, { operator: value[0] })}\n      disabled={disabled}\n      positioning={{ sameWidth: false }}\n      {...props}\n    >\n      <SelectControl>\n        <SelectTrigger\n          size=\"sm\"\n          className={cn(\"text-muted-foreground\", className)}\n          data-slot=\"query-builder-operator-select\"\n          aria-label=\"Operator\"\n        >\n          <SelectValue placeholder=\"Operator\">{current?.label}</SelectValue>\n        </SelectTrigger>\n      </SelectControl>\n      <SelectContent>\n        {options.map((o) => (\n          <SelectItem key={o.name} item={o}>\n            <SelectItemText>{o.label}</SelectItemText>\n            <SelectItemIndicator />\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  )\n}\n\ntype ValueEditorRenderProps = {\n  rule: QueryRule\n  field: QueryField | undefined\n  operator: QueryOperator | undefined\n  value: unknown\n  setValue: (value: unknown) => void\n  disabled: boolean\n}\n\n/**\n * Renders an editor for the rule's value based on the field type and operator\n * arity. Pass a render-prop child to take over for specific cases and fall back\n * to the default by returning `undefined`.\n */\nfunction QueryBuilderValueEditor({\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  children?: (props: ValueEditorRenderProps) => React.ReactNode | undefined\n}) {\n  const { fields, operators, updateRule, disabled } = useQueryBuilder()\n  const { rule } = useQueryBuilderRule()\n  const field = fields.find((f) => f.name === rule.field)\n  const operator = operators.find((o) => o.name === rule.operator)\n  const setValue = React.useCallback((value: unknown) => updateRule(rule.id, { value }), [updateRule, rule.id])\n  const custom = children?.({ rule, field, operator, value: rule.value, setValue, disabled })\n  if (custom !== undefined) return <>{custom}</>\n  if (!operator || operator.arity === \"none\") return null\n  const type = field?.type ?? \"text\"\n  const inputType = type === \"number\" ? \"number\" : type === \"date\" ? \"date\" : \"text\"\n  const inputClass = cn(\"h-7 w-40 text-sm md:text-sm\", type === \"number\" && \"w-24\", type === \"date\" && \"w-36\")\n\n  if (operator.arity === \"two\") {\n    const pair = Array.isArray(rule.value) ? (rule.value as unknown[]) : [undefined, undefined]\n    const set = (index: 0 | 1, v: string) => {\n      const next = [...pair]\n      next[index] = v\n      setValue(next)\n    }\n    return (\n      <div\n        data-slot=\"query-builder-value-editor\"\n        className={cn(\"inline-flex items-center gap-1.5\", className)}\n        {...props}\n      >\n        <Input\n          type={inputType}\n          value={String(pair[0] ?? \"\")}\n          onChange={(e) => set(0, e.target.value)}\n          disabled={disabled}\n          aria-label=\"From\"\n          className={inputClass}\n        />\n        <span className=\"text-muted-foreground\">and</span>\n        <Input\n          type={inputType}\n          value={String(pair[1] ?? \"\")}\n          onChange={(e) => set(1, e.target.value)}\n          disabled={disabled}\n          aria-label=\"To\"\n          className={inputClass}\n        />\n      </div>\n    )\n  }\n\n  if (type === \"select\" && field?.options) {\n    const many = operator.arity === \"many\"\n    const selected = many ? ((rule.value as string[] | undefined) ?? []) : rule.value ? [String(rule.value)] : []\n    return (\n      <div data-slot=\"query-builder-value-editor\" className={cn(\"inline-flex\", className)} {...props}>\n        <OptionPicker\n          options={field.options}\n          value={selected}\n          multiple={many}\n          disabled={disabled}\n          placeholder=\"Choose…\"\n          onChange={(values) => setValue(many ? values : values[0])}\n        />\n      </div>\n    )\n  }\n\n  if (operator.arity === \"many\") {\n    // Free-text lists: comma separated, shown as-is.\n    const list = Array.isArray(rule.value) ? (rule.value as string[]) : []\n    return (\n      <div data-slot=\"query-builder-value-editor\" className={cn(\"inline-flex\", className)} {...props}>\n        <Input\n          value={list.join(\", \")}\n          onChange={(e) =>\n            setValue(\n              e.target.value\n                .split(\",\")\n                .map((s) => s.trim())\n                .filter(Boolean)\n            )\n          }\n          placeholder={field?.placeholder ?? \"Comma separated\"}\n          disabled={disabled}\n          aria-label=\"Values\"\n          className={cn(inputClass, \"w-56\")}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div data-slot=\"query-builder-value-editor\" className={cn(\"inline-flex\", className)} {...props}>\n      <Input\n        type={inputType}\n        value={String(rule.value ?? \"\")}\n        onChange={(e) => setValue(e.target.value)}\n        placeholder={field?.placeholder ?? (type === \"text\" ? \"Value\" : undefined)}\n        disabled={disabled}\n        aria-label=\"Value\"\n        className={inputClass}\n      />\n    </div>\n  )\n}\n\nfunction OptionPicker({\n  options,\n  value,\n  multiple,\n  disabled,\n  placeholder,\n  onChange,\n}: {\n  options: QueryOption[]\n  value: string[]\n  multiple: boolean\n  disabled: boolean\n  placeholder: string\n  onChange: (values: string[]) => void\n}) {\n  const collection = React.useMemo(\n    () => createListCollection({ items: options, itemToValue: (o) => o.value, itemToString: (o) => o.label }),\n    [options]\n  )\n  const labels = value.map((v) => options.find((o) => o.value === v)?.label ?? v)\n  return (\n    <Select\n      collection={collection}\n      value={value}\n      multiple={multiple}\n      closeOnSelect={!multiple}\n      onValueChange={({ value }) => onChange(value)}\n      disabled={disabled}\n      positioning={{ sameWidth: false }}\n    >\n      <SelectControl>\n        <SelectTrigger size=\"sm\" className=\"max-w-64\" aria-label=\"Value\">\n          <SelectValue placeholder={placeholder}>\n            {labels.length\n              ? labels.length > 3\n                ? `${labels.slice(0, 3).join(\", \")} +${labels.length - 3}`\n                : labels.join(\", \")\n              : undefined}\n          </SelectValue>\n        </SelectTrigger>\n      </SelectControl>\n      <SelectContent>\n        {options.map((o) => (\n          <SelectItem key={o.value} item={o}>\n            <SelectItemText>{o.label}</SelectItemText>\n            <SelectItemIndicator />\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  )\n}\n\n/** Hover-revealed slot at the end of a rule row (remove trigger, extras). */\nfunction QueryBuilderRuleActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"query-builder-rule-actions\"\n      className={cn(\n        \"ms-auto inline-flex items-center gap-0.5 opacity-0 transition-opacity group-focus-within/query-rule:opacity-100 group-hover/query-rule:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Triggers (polymorphic via asChild)\n * ------------------------------------------------------------------------- */\n\nfunction QueryBuilderAddRuleTrigger({ asChild, children, onClick, ...props }: React.ComponentProps<typeof Button>) {\n  const { addRule, disabled } = useQueryBuilder()\n  const { group } = useQueryBuilderGroup()\n  return (\n    <Button\n      data-slot=\"query-builder-add-rule-trigger\"\n      variant=\"ghost\"\n      size=\"sm\"\n      asChild={asChild}\n      disabled={disabled}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) addRule(group.id)\n      }}\n      {...props}\n    >\n      {asChild\n        ? children\n        : (children ?? (\n            <>\n              <PlusIcon /> Add condition\n            </>\n          ))}\n    </Button>\n  )\n}\n\nfunction QueryBuilderAddGroupTrigger({ asChild, children, onClick, ...props }: React.ComponentProps<typeof Button>) {\n  const { addGroup, disabled, maxDepth } = useQueryBuilder()\n  const { group, depth } = useQueryBuilderGroup()\n  if (depth >= maxDepth) return null\n  return (\n    <Button\n      data-slot=\"query-builder-add-group-trigger\"\n      variant=\"ghost\"\n      size=\"sm\"\n      asChild={asChild}\n      disabled={disabled}\n      className=\"text-muted-foreground\"\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) addGroup(group.id)\n      }}\n      {...props}\n    >\n      {asChild ? children : (children ?? <>Add a nested group</>)}\n    </Button>\n  )\n}\n\n/** Removes the enclosing rule, or the enclosing group when used in a group header. */\nfunction QueryBuilderRemoveTrigger({\n  asChild,\n  children,\n  onClick,\n  className,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { remove, disabled } = useQueryBuilder()\n  const rule = React.useContext(RuleContext)\n  const group = React.useContext(GroupContext)\n  const target = rule?.rule.id ?? group?.group.id\n  const label = rule ? \"Remove condition\" : \"Remove group\"\n  return (\n    <Button\n      data-slot=\"query-builder-remove-trigger\"\n      variant=\"ghost\"\n      size=\"icon-xs\"\n      asChild={asChild}\n      disabled={disabled}\n      aria-label={label}\n      className={cn(\"text-muted-foreground hover:text-destructive\", className)}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented && target) remove(target)\n      }}\n      {...props}\n    >\n      {asChild ? children : (children ?? <XIcon />)}\n    </Button>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Summary and empty state\n * ------------------------------------------------------------------------- */\n\n/** The query as a sentence; `children` overrides the fallback when nothing is set. */\nfunction QueryBuilderSummary({\n  className,\n  children,\n  prefix = \"Showing results where \",\n  ...props\n}: React.ComponentProps<\"p\"> & { prefix?: React.ReactNode }) {\n  const { value, fields, operators } = useQueryBuilder()\n  const text = describeQuery(value, { fields, operators })\n  return (\n    <p\n      data-slot=\"query-builder-summary\"\n      data-empty={text ? undefined : \"\"}\n      className={cn(\"text-sm\", className)}\n      {...props}\n    >\n      {text ? (\n        <>\n          <span className=\"text-muted-foreground\">{prefix}</span>\n          <span className=\"font-medium\">{text}</span>\n        </>\n      ) : (\n        (children ?? (\n          <span className=\"text-muted-foreground\">Showing everything. Add a condition to narrow it down.</span>\n        ))\n      )}\n    </p>\n  )\n}\n\nfunction QueryBuilderEmpty({ className, ...props }: React.ComponentProps<typeof ark.div>) {\n  return (\n    <ark.div\n      data-slot=\"query-builder-empty\"\n      className={cn(\"rounded-lg border border-dashed px-3 py-2 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  QueryBuilder,\n  QueryBuilderGroup,\n  QueryBuilderGroupHeader,\n  QueryBuilderMatch,\n  QueryBuilderGroupBody,\n  QueryBuilderGroupFooter,\n  QueryBuilderRule,\n  QueryBuilderFieldSelect,\n  QueryBuilderOperatorSelect,\n  QueryBuilderValueEditor,\n  QueryBuilderRuleActions,\n  QueryBuilderAddRuleTrigger,\n  QueryBuilderAddGroupTrigger,\n  QueryBuilderRemoveTrigger,\n  QueryBuilderSummary,\n  QueryBuilderEmpty,\n  useQueryBuilder,\n  useQueryBuilderGroup,\n  useQueryBuilderRule,\n  createRule,\n  createGroup,\n  isGroup,\n  isComplete,\n  operatorsFor,\n  defaultOperators,\n  describeQuery,\n  pruneQuery,\n  type QueryField,\n  type QueryFieldType,\n  type QueryOption,\n  type QueryOperator,\n  type QueryRule,\n  type QueryGroup,\n  type QueryNode,\n}\n"
+      "content": "import * as React from \"react\"\nimport { ark } from \"@ark-ui/react\"\nimport { createListCollection } from \"@ark-ui/react/collection\"\nimport { PlusIcon, XIcon } from \"lucide-react\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectControl,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\nimport { useControllable } from \"@/lib/controllable\"\n\n/**\n * QueryBuilder — a compositional filter builder that reads like a sentence.\n *\n * Every group opens with \"Match all / any of the following\" and each condition\n * reads field → plain-language operator → value. Incomplete conditions (no\n * value yet) are flagged with `data-incomplete` and dropped by `pruneQuery`\n * instead of erroring, negation lives in the operator wording (\"is not\",\n * \"does not contain\") and order is irrelevant, so there is no NOT toggle and\n * no drag-reorder to learn.\n *\n * The consumer owns the query tree (`value`/`onValueChange`) and renders the\n * parts recursively; the root applies all edits (add, remove, update). The\n * primitive never interprets the tree: turning it into SQL, an API filter, or\n * an in-memory predicate is the consumer's job (see `src/demo/query-builder`).\n *\n * Anatomy:\n *   QueryBuilder\n *     QueryBuilderGroup          { group }\n *       QueryBuilderGroupHeader\n *         QueryBuilderMatch      \"all\" | \"any\" select\n *         QueryBuilderRemoveTrigger (nested groups)\n *       QueryBuilderGroupBody\n *         QueryBuilderRule       { rule } → FieldSelect + OperatorSelect + ValueEditor + RuleActions\n *         QueryBuilderGroup      (nested)\n *       QueryBuilderGroupFooter\n *         QueryBuilderAddRuleTrigger / QueryBuilderAddGroupTrigger\n *     QueryBuilderSummary        natural-language sentence\n */\n\n/* ---------------------------------------------------------------------------\n * Model\n * ------------------------------------------------------------------------- */\n\ntype QueryFieldType = \"text\" | \"number\" | \"date\" | \"boolean\" | \"select\"\ntype QueryOption = { value: string; label: string }\ntype QueryField = {\n  name: string\n  label: string\n  type?: QueryFieldType\n  /** For `select` fields. */\n  options?: QueryOption[]\n  /** Restrict the operators offered (names from `operators`). */\n  operators?: string[]\n  /** Placeholder for the value editor. */\n  placeholder?: string\n}\n/** How many values an operator takes. */\ntype QueryArity = \"none\" | \"one\" | \"two\" | \"many\"\ntype QueryOperator = { name: string; label: string; arity: QueryArity; types: QueryFieldType[] }\n\ntype QueryRule = { id: string; field: string; operator: string; value?: unknown }\ntype QueryGroup = { id: string; match: \"all\" | \"any\"; rules: QueryNode[] }\ntype QueryNode = QueryRule | QueryGroup\n\nconst isGroup = (node: QueryNode): node is QueryGroup => \"rules\" in node\n\nlet seq = 0\nconst uid = (prefix: string) => `${prefix}-${(seq++).toString(36)}${Date.now().toString(36).slice(-3)}`\n\nconst op = (name: string, label: string, arity: QueryArity, types: QueryFieldType[]): QueryOperator => ({\n  name,\n  label,\n  arity,\n  types,\n})\n\n/** Plain-language operators; negation is part of the wording. */\nconst defaultOperators: QueryOperator[] = [\n  op(\"is\", \"is\", \"one\", [\"text\", \"number\", \"date\", \"select\"]),\n  op(\"isNot\", \"is not\", \"one\", [\"text\", \"number\", \"date\", \"select\"]),\n  op(\"contains\", \"contains\", \"one\", [\"text\"]),\n  op(\"doesNotContain\", \"does not contain\", \"one\", [\"text\"]),\n  op(\"startsWith\", \"starts with\", \"one\", [\"text\"]),\n  op(\"endsWith\", \"ends with\", \"one\", [\"text\"]),\n  op(\"greaterThan\", \"is greater than\", \"one\", [\"number\"]),\n  op(\"lessThan\", \"is less than\", \"one\", [\"number\"]),\n  op(\"atLeast\", \"is at least\", \"one\", [\"number\"]),\n  op(\"atMost\", \"is at most\", \"one\", [\"number\"]),\n  op(\"before\", \"is before\", \"one\", [\"date\"]),\n  op(\"after\", \"is after\", \"one\", [\"date\"]),\n  op(\"between\", \"is between\", \"two\", [\"number\", \"date\"]),\n  op(\"anyOf\", \"is any of\", \"many\", [\"select\", \"text\"]),\n  op(\"noneOf\", \"is none of\", \"many\", [\"select\", \"text\"]),\n  op(\"isTrue\", \"is true\", \"none\", [\"boolean\"]),\n  op(\"isFalse\", \"is false\", \"none\", [\"boolean\"]),\n  op(\"isEmpty\", \"is empty\", \"none\", [\"text\", \"number\", \"date\", \"select\"]),\n  op(\"isNotEmpty\", \"is not empty\", \"none\", [\"text\", \"number\", \"date\", \"select\"]),\n]\n\nfunction operatorsFor(field: QueryField | undefined, operators: QueryOperator[]) {\n  if (!field) return []\n  const type = field.type ?? \"text\"\n  const allowed = operators.filter((o) => o.types.includes(type))\n  return field.operators\n    ? (field.operators.map((n) => allowed.find((o) => o.name === n)).filter(Boolean) as QueryOperator[])\n    : allowed\n}\n\nfunction createRule(fields: QueryField[], operators = defaultOperators, patch?: Partial<QueryRule>): QueryRule {\n  const field = fields.find((f) => f.name === patch?.field) ?? fields[0]\n  const operator = patch?.operator ?? operatorsFor(field, operators)[0]?.name ?? \"\"\n  return { id: uid(\"rule\"), field: field?.name ?? \"\", operator, value: undefined, ...patch }\n}\n\nfunction createGroup(match: QueryGroup[\"match\"] = \"all\", rules: QueryNode[] = []): QueryGroup {\n  return { id: uid(\"group\"), match, rules }\n}\n\nconst hasValue = (value: unknown) =>\n  value !== undefined && value !== null && value !== \"\" && !(Array.isArray(value) && value.length === 0)\n\n/** A rule counts once it has everything its operator needs. */\nfunction isComplete(rule: QueryRule, operators = defaultOperators) {\n  const operator = operators.find((o) => o.name === rule.operator)\n  if (!operator || !rule.field) return false\n  if (operator.arity === \"none\") return true\n  if (operator.arity === \"two\") return Array.isArray(rule.value) && hasValue(rule.value[0]) && hasValue(rule.value[1])\n  return hasValue(rule.value)\n}\n\n/* Tree edits (pure) */\n\nfunction mapTree(node: QueryGroup, fn: (node: QueryNode) => QueryNode | null): QueryGroup {\n  const rules = node.rules\n    .map((child) => {\n      const next = fn(child)\n      if (next === null) return null\n      return isGroup(next) ? mapTree(next, fn) : next\n    })\n    .filter((n): n is QueryNode => n !== null)\n  return { ...node, rules }\n}\n\nfunction updateNode(root: QueryGroup, id: string, patch: Partial<QueryRule> | Partial<QueryGroup>): QueryGroup {\n  if (root.id === id) return { ...root, ...(patch as Partial<QueryGroup>) }\n  return mapTree(root, (n) => (n.id === id ? ({ ...n, ...patch } as QueryNode) : n))\n}\n\nfunction removeNode(root: QueryGroup, id: string): QueryGroup {\n  return mapTree(root, (n) => (n.id === id ? null : n))\n}\n\nfunction insertNode(root: QueryGroup, groupId: string, node: QueryNode): QueryGroup {\n  if (root.id === groupId) return { ...root, rules: [...root.rules, node] }\n  return mapTree(root, (n) => (isGroup(n) && n.id === groupId ? { ...n, rules: [...n.rules, node] } : n))\n}\n\n/* ---------------------------------------------------------------------------\n * Describing the tree (presentation only; interpreting it is the consumer's job)\n * ------------------------------------------------------------------------- */\n\ntype DescribeOptions = { fields: QueryField[]; operators?: QueryOperator[] }\n\nfunction valueLabel(rule: QueryRule, field: QueryField | undefined): string {\n  const label = (v: unknown) => field?.options?.find((o) => o.value === String(v))?.label ?? String(v)\n  if (Array.isArray(rule.value)) {\n    const values = rule.value.map(label)\n    if (rule.operator === \"between\") return `${values[0]} and ${values[1]}`\n    if (values.length <= 3) return values.join(\", \")\n    return `${values.slice(0, 2).join(\", \")} and ${values.length - 2} more`\n  }\n  return label(rule.value)\n}\n\n/** Natural-language sentence, e.g. \"Status is Active and Created is after 2026-01-01\". */\nfunction describeQuery(\n  /** The group node this part renders. */\n  group: QueryGroup,\n  { fields, operators = defaultOperators }: DescribeOptions,\n  depth = 0\n): string {\n  const parts = group.rules\n    .map((n) => {\n      if (isGroup(n)) return describeQuery(n, { fields, operators }, depth + 1)\n      if (!isComplete(n, operators)) return \"\"\n      const field = fields.find((f) => f.name === n.field)\n      const operator = operators.find((o) => o.name === n.operator)\n      const value = operator?.arity === \"none\" ? \"\" : ` ${valueLabel(n, field)}`\n      return `${field?.label ?? n.field} ${operator?.label ?? n.operator}${value}`\n    })\n    .filter(Boolean)\n  if (!parts.length) return \"\"\n  const joined = parts.join(group.match === \"all\" ? \" and \" : \" or \")\n  return depth > 0 && parts.length > 1 ? `(${joined})` : joined\n}\n\n/** The tree without incomplete rules and empty groups: what an interpreter should consume. */\nfunction pruneQuery(group: QueryGroup, operators = defaultOperators): QueryGroup {\n  const rules = group.rules\n    .map((n) => (isGroup(n) ? pruneQuery(n, operators) : isComplete(n, operators) ? n : null))\n    .filter((n): n is QueryNode => n !== null && (!isGroup(n) || n.rules.length > 0))\n  return { ...group, rules }\n}\n\n/* ---------------------------------------------------------------------------\n * Context\n * ------------------------------------------------------------------------- */\n\ntype QueryBuilderContextValue = {\n  /** Fields the user can filter on: `{ name, label, type, options, operators, placeholder }`. */\n  fields: QueryField[]\n  /** Operator definitions; defaults to `defaultOperators`. */\n  operators: QueryOperator[]\n  value: QueryGroup\n  disabled: boolean\n  maxDepth: number\n  addRule: (groupId: string, patch?: Partial<QueryRule>) => void\n  addGroup: (groupId: string) => void\n  remove: (id: string) => void\n  updateRule: (id: string, patch: Partial<QueryRule>) => void\n  setMatch: (groupId: string, match: QueryGroup[\"match\"]) => void\n}\n\nconst QueryBuilderContext = React.createContext<QueryBuilderContextValue | null>(null)\nconst GroupContext = React.createContext<{ group: QueryGroup; depth: number } | null>(null)\nconst RuleContext = React.createContext<{ rule: QueryRule } | null>(null)\n\nfunction useQueryBuilder() {\n  const ctx = React.useContext(QueryBuilderContext)\n  if (!ctx) throw new Error(\"QueryBuilder parts must be used within <QueryBuilder>\")\n  return ctx\n}\nfunction useQueryBuilderGroup() {\n  const ctx = React.useContext(GroupContext)\n  if (!ctx) throw new Error(\"Group parts must be used within <QueryBuilderGroup>\")\n  return ctx\n}\nfunction useQueryBuilderRule() {\n  const ctx = React.useContext(RuleContext)\n  if (!ctx) throw new Error(\"Rule parts must be used within <QueryBuilderRule>\")\n  return ctx\n}\n\n/* ---------------------------------------------------------------------------\n * Root\n * ------------------------------------------------------------------------- */\n\nfunction QueryBuilder({\n  fields,\n  operators = defaultOperators,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  disabled = false,\n  maxDepth = 3,\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"defaultValue\" | \"onChange\"> & {\n  /** Fields the user can filter on: `{ name, label, type, options, operators, placeholder }`. */\n  fields: QueryField[]\n  /** Operator definitions; defaults to `defaultOperators`. */\n  operators?: QueryOperator[]\n  value?: QueryGroup\n  defaultValue?: QueryGroup\n  onValueChange?: (value: QueryGroup) => void\n  disabled?: boolean\n  /** Nesting limit for \"Add group\"; the trigger hides past it. */\n  maxDepth?: number\n}) {\n  const [initial] = React.useState<QueryGroup>(\n    () => defaultValue ?? createGroup(\"all\", [createRule(fields, operators)])\n  )\n  const [value, setValue] = useControllable<QueryGroup>(valueProp, initial, onValueChange)\n  const update = React.useCallback((fn: (prev: QueryGroup) => QueryGroup) => setValue(fn), [setValue])\n\n  const ctx = React.useMemo<QueryBuilderContextValue>(\n    () => ({\n      fields,\n      operators,\n      value,\n      disabled,\n      maxDepth,\n      addRule: (groupId, patch) => update((prev) => insertNode(prev, groupId, createRule(fields, operators, patch))),\n      addGroup: (groupId) =>\n        update((prev) => {\n          // A nested group starts with the opposite match so it adds meaning (\"…and any of these\").\n          const match = groupIn(prev, groupId)?.match === \"any\" ? \"all\" : \"any\"\n          return insertNode(prev, groupId, createGroup(match, [createRule(fields, operators)]))\n        }),\n      remove: (id) => update((prev) => removeNode(prev, id)),\n      updateRule: (id, patch) =>\n        update((prev) => {\n          if (patch.field !== undefined) {\n            // Changing the field resets the operator to the first valid one and clears the value.\n            const field = fields.find((f) => f.name === patch.field)\n            const current = operators.find((o) => o.name === patch.operator)\n            const options = operatorsFor(field, operators)\n            const operator = current && options.includes(current) ? current.name : (options[0]?.name ?? \"\")\n            return updateNode(prev, id, { field: patch.field, operator, value: undefined })\n          }\n          if (patch.operator !== undefined && patch.value === undefined) {\n            const prevRule = findRule(prev, id)\n            const before = operators.find((o) => o.name === prevRule?.operator)?.arity\n            const after = operators.find((o) => o.name === patch.operator)?.arity\n            return updateNode(prev, id, {\n              operator: patch.operator,\n              value: before === after ? prevRule?.value : undefined,\n            })\n          }\n          return updateNode(prev, id, patch)\n        }),\n      setMatch: (groupId, match) => update((prev) => updateNode(prev, groupId, { match })),\n    }),\n    [fields, operators, value, disabled, maxDepth, update]\n  )\n\n  return (\n    <QueryBuilderContext.Provider value={ctx}>\n      <div\n        data-slot=\"query-builder\"\n        data-disabled={disabled ? \"\" : undefined}\n        className={cn(\"flex flex-col gap-3 text-sm\", className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </QueryBuilderContext.Provider>\n  )\n}\n\nfunction groupIn(root: QueryGroup, id: string): QueryGroup | null {\n  if (root.id === id) return root\n  for (const child of root.rules) {\n    if (isGroup(child)) {\n      const found = groupIn(child, id)\n      if (found) return found\n    }\n  }\n  return null\n}\n\nfunction findRule(root: QueryGroup, id: string): QueryRule | null {\n  for (const child of root.rules) {\n    if (isGroup(child)) {\n      const found = findRule(child, id)\n      if (found) return found\n    } else if (child.id === id) return child\n  }\n  return null\n}\n\n/* ---------------------------------------------------------------------------\n * Group parts\n * ------------------------------------------------------------------------- */\n\nfunction QueryBuilderGroup({\n  group,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & { group: QueryGroup }) {\n  const parent = React.useContext(GroupContext)\n  const depth = parent ? parent.depth + 1 : 0\n  const ctx = React.useMemo(() => ({ group, depth }), [group, depth])\n  return (\n    <GroupContext.Provider value={ctx}>\n      <div\n        data-slot=\"query-builder-group\"\n        data-match={group.match}\n        data-depth={depth}\n        data-empty={group.rules.length === 0 ? \"\" : undefined}\n        className={cn(\n          \"group/query-group flex flex-col gap-2\",\n          depth > 0 && \"rounded-lg border border-dashed bg-muted/30 p-3\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </GroupContext.Provider>\n  )\n}\n\nfunction QueryBuilderGroupHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"query-builder-group-header\"\n      className={cn(\"flex flex-wrap items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst matchOptions: QueryOption[] = [\n  { value: \"all\", label: \"all\" },\n  { value: \"any\", label: \"any\" },\n]\nconst matchCollection = createListCollection({ items: matchOptions, itemToValue: (o) => o.value })\n\n/** \"Match [all ▾] of the following\" — the only combinator control, once per group. */\nfunction QueryBuilderMatch({\n  className,\n  before,\n  after = \"of the following\",\n  ...props\n}: Omit<React.ComponentProps<typeof Select>, \"collection\" | \"value\" | \"onValueChange\"> & {\n  /** Text before the select. Defaults to \"Match\" at the top level and \"Where\" in nested groups. */\n  before?: React.ReactNode\n  /** Text rendered after the match select. */\n  after?: React.ReactNode\n}) {\n  const { setMatch, disabled } = useQueryBuilder()\n  const { group, depth } = useQueryBuilderGroup()\n  return (\n    <span data-slot=\"query-builder-match\" className=\"inline-flex flex-wrap items-center gap-1.5\">\n      <span className=\"text-muted-foreground\">{before ?? (depth === 0 ? \"Match\" : \"Where\")}</span>\n      <Select\n        collection={matchCollection}\n        value={[group.match]}\n        onValueChange={({ value }) => value[0] && setMatch(group.id, value[0] as QueryGroup[\"match\"])}\n        disabled={disabled}\n        positioning={{ sameWidth: false }}\n        {...props}\n      >\n        <SelectControl>\n          <SelectTrigger size=\"sm\" className={cn(\"font-medium\", className)} aria-label=\"Match all or any\">\n            <SelectValue>{group.match}</SelectValue>\n          </SelectTrigger>\n        </SelectControl>\n        <SelectContent className=\"min-w-24\">\n          {matchOptions.map((o) => (\n            <SelectItem key={o.value} item={o}>\n              <SelectItemText>{o.label}</SelectItemText>\n              <SelectItemIndicator />\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n      <span className=\"text-muted-foreground\">{after}</span>\n    </span>\n  )\n}\n\n/** Indented list of conditions with a guide line. */\nfunction QueryBuilderGroupBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { group } = useQueryBuilderGroup()\n  return (\n    <div\n      data-slot=\"query-builder-group-body\"\n      data-empty={group.rules.length === 0 ? \"\" : undefined}\n      className={cn(\n        \"relative flex flex-col gap-2 ps-4 before:absolute before:inset-y-1 before:inset-s-1 before:w-px before:bg-border\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction QueryBuilderGroupFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"query-builder-group-footer\"\n      className={cn(\"flex flex-wrap items-center gap-1 ps-4\", className)}\n      {...props}\n    />\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Rule parts\n * ------------------------------------------------------------------------- */\n\nfunction QueryBuilderRule({ rule, className, children, ...props }: React.ComponentProps<\"div\"> & { rule: QueryRule }) {\n  const { operators } = useQueryBuilder()\n  const complete = isComplete(rule, operators)\n  const ctx = React.useMemo(() => ({ rule }), [rule])\n  return (\n    <RuleContext.Provider value={ctx}>\n      <div\n        data-slot=\"query-builder-rule\"\n        data-incomplete={complete ? undefined : \"\"}\n        className={cn(\n          \"group/query-rule -ms-1 flex flex-wrap items-center gap-1.5 rounded-lg py-0.5 ps-1 pe-1 hover:bg-muted/40 has-focus-visible:bg-muted/40\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </RuleContext.Provider>\n  )\n}\n\ntype PickerProps = Omit<React.ComponentProps<typeof Select>, \"collection\" | \"value\" | \"onValueChange\">\n\nfunction QueryBuilderFieldSelect({ className, ...props }: PickerProps & { className?: string }) {\n  const { fields, updateRule, disabled } = useQueryBuilder()\n  const { rule } = useQueryBuilderRule()\n  const collection = React.useMemo(\n    () => createListCollection({ items: fields, itemToValue: (f) => f.name, itemToString: (f) => f.label }),\n    [fields]\n  )\n  const field = fields.find((f) => f.name === rule.field)\n  return (\n    <Select\n      collection={collection}\n      value={[rule.field]}\n      onValueChange={({ value }) => value[0] && updateRule(rule.id, { field: value[0] })}\n      disabled={disabled}\n      positioning={{ sameWidth: false }}\n      {...props}\n    >\n      <SelectControl>\n        <SelectTrigger\n          size=\"sm\"\n          className={cn(\"font-medium\", className)}\n          data-slot=\"query-builder-field-select\"\n          aria-label=\"Field\"\n        >\n          <SelectValue placeholder=\"Field\">{field?.label}</SelectValue>\n        </SelectTrigger>\n      </SelectControl>\n      <SelectContent>\n        {fields.map((f) => (\n          <SelectItem key={f.name} item={f}>\n            <SelectItemText>{f.label}</SelectItemText>\n            <SelectItemIndicator />\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  )\n}\n\nfunction QueryBuilderOperatorSelect({ className, ...props }: PickerProps & { className?: string }) {\n  const { fields, operators, updateRule, disabled } = useQueryBuilder()\n  const { rule } = useQueryBuilderRule()\n  const field = fields.find((f) => f.name === rule.field)\n  const options = React.useMemo(() => operatorsFor(field, operators), [field, operators])\n  const collection = React.useMemo(\n    () => createListCollection({ items: options, itemToValue: (o) => o.name, itemToString: (o) => o.label }),\n    [options]\n  )\n  const current = options.find((o) => o.name === rule.operator)\n  return (\n    <Select\n      collection={collection}\n      value={[rule.operator]}\n      onValueChange={({ value }) => value[0] && updateRule(rule.id, { operator: value[0] })}\n      disabled={disabled}\n      positioning={{ sameWidth: false }}\n      {...props}\n    >\n      <SelectControl>\n        <SelectTrigger\n          size=\"sm\"\n          className={cn(\"text-muted-foreground\", className)}\n          data-slot=\"query-builder-operator-select\"\n          aria-label=\"Operator\"\n        >\n          <SelectValue placeholder=\"Operator\">{current?.label}</SelectValue>\n        </SelectTrigger>\n      </SelectControl>\n      <SelectContent>\n        {options.map((o) => (\n          <SelectItem key={o.name} item={o}>\n            <SelectItemText>{o.label}</SelectItemText>\n            <SelectItemIndicator />\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  )\n}\n\ntype ValueEditorRenderProps = {\n  /** The rule node this part renders. */\n  rule: QueryRule\n  field: QueryField | undefined\n  operator: QueryOperator | undefined\n  value: unknown\n  setValue: (value: unknown) => void\n  disabled: boolean\n}\n\n/**\n * Renders an editor for the rule's value based on the field type and operator\n * arity. Pass a render-prop child to take over for specific cases and fall back\n * to the default by returning `undefined`.\n */\nfunction QueryBuilderValueEditor({\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  children?: (props: ValueEditorRenderProps) => React.ReactNode | undefined\n}) {\n  const { fields, operators, updateRule, disabled } = useQueryBuilder()\n  const { rule } = useQueryBuilderRule()\n  const field = fields.find((f) => f.name === rule.field)\n  const operator = operators.find((o) => o.name === rule.operator)\n  const setValue = React.useCallback((value: unknown) => updateRule(rule.id, { value }), [updateRule, rule.id])\n  const custom = children?.({ rule, field, operator, value: rule.value, setValue, disabled })\n  if (custom !== undefined) return <>{custom}</>\n  if (!operator || operator.arity === \"none\") return null\n  const type = field?.type ?? \"text\"\n  const inputType = type === \"number\" ? \"number\" : type === \"date\" ? \"date\" : \"text\"\n  const inputClass = cn(\"h-7 w-40 text-sm md:text-sm\", type === \"number\" && \"w-24\", type === \"date\" && \"w-36\")\n\n  if (operator.arity === \"two\") {\n    const pair = Array.isArray(rule.value) ? (rule.value as unknown[]) : [undefined, undefined]\n    const set = (index: 0 | 1, v: string) => {\n      const next = [...pair]\n      next[index] = v\n      setValue(next)\n    }\n    return (\n      <div\n        data-slot=\"query-builder-value-editor\"\n        className={cn(\"inline-flex items-center gap-1.5\", className)}\n        {...props}\n      >\n        <Input\n          type={inputType}\n          value={String(pair[0] ?? \"\")}\n          onChange={(e) => set(0, e.target.value)}\n          disabled={disabled}\n          aria-label=\"From\"\n          className={inputClass}\n        />\n        <span className=\"text-muted-foreground\">and</span>\n        <Input\n          type={inputType}\n          value={String(pair[1] ?? \"\")}\n          onChange={(e) => set(1, e.target.value)}\n          disabled={disabled}\n          aria-label=\"To\"\n          className={inputClass}\n        />\n      </div>\n    )\n  }\n\n  if (type === \"select\" && field?.options) {\n    const many = operator.arity === \"many\"\n    const selected = many ? ((rule.value as string[] | undefined) ?? []) : rule.value ? [String(rule.value)] : []\n    return (\n      <div data-slot=\"query-builder-value-editor\" className={cn(\"inline-flex\", className)} {...props}>\n        <OptionPicker\n          options={field.options}\n          value={selected}\n          multiple={many}\n          disabled={disabled}\n          placeholder=\"Choose…\"\n          onChange={(values) => setValue(many ? values : values[0])}\n        />\n      </div>\n    )\n  }\n\n  if (operator.arity === \"many\") {\n    // Free-text lists: comma separated, shown as-is.\n    const list = Array.isArray(rule.value) ? (rule.value as string[]) : []\n    return (\n      <div data-slot=\"query-builder-value-editor\" className={cn(\"inline-flex\", className)} {...props}>\n        <Input\n          value={list.join(\", \")}\n          onChange={(e) =>\n            setValue(\n              e.target.value\n                .split(\",\")\n                .map((s) => s.trim())\n                .filter(Boolean)\n            )\n          }\n          placeholder={field?.placeholder ?? \"Comma separated\"}\n          disabled={disabled}\n          aria-label=\"Values\"\n          className={cn(inputClass, \"w-56\")}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div data-slot=\"query-builder-value-editor\" className={cn(\"inline-flex\", className)} {...props}>\n      <Input\n        type={inputType}\n        value={String(rule.value ?? \"\")}\n        onChange={(e) => setValue(e.target.value)}\n        placeholder={field?.placeholder ?? (type === \"text\" ? \"Value\" : undefined)}\n        disabled={disabled}\n        aria-label=\"Value\"\n        className={inputClass}\n      />\n    </div>\n  )\n}\n\nfunction OptionPicker({\n  options,\n  value,\n  multiple,\n  disabled,\n  placeholder,\n  onChange,\n}: {\n  options: QueryOption[]\n  value: string[]\n  multiple: boolean\n  disabled: boolean\n  placeholder: string\n  onChange: (values: string[]) => void\n}) {\n  const collection = React.useMemo(\n    () => createListCollection({ items: options, itemToValue: (o) => o.value, itemToString: (o) => o.label }),\n    [options]\n  )\n  const labels = value.map((v) => options.find((o) => o.value === v)?.label ?? v)\n  return (\n    <Select\n      collection={collection}\n      value={value}\n      multiple={multiple}\n      closeOnSelect={!multiple}\n      onValueChange={({ value }) => onChange(value)}\n      disabled={disabled}\n      positioning={{ sameWidth: false }}\n    >\n      <SelectControl>\n        <SelectTrigger size=\"sm\" className=\"max-w-64\" aria-label=\"Value\">\n          <SelectValue placeholder={placeholder}>\n            {labels.length\n              ? labels.length > 3\n                ? `${labels.slice(0, 3).join(\", \")} +${labels.length - 3}`\n                : labels.join(\", \")\n              : undefined}\n          </SelectValue>\n        </SelectTrigger>\n      </SelectControl>\n      <SelectContent>\n        {options.map((o) => (\n          <SelectItem key={o.value} item={o}>\n            <SelectItemText>{o.label}</SelectItemText>\n            <SelectItemIndicator />\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  )\n}\n\n/** Hover-revealed slot at the end of a rule row (remove trigger, extras). */\nfunction QueryBuilderRuleActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"query-builder-rule-actions\"\n      className={cn(\n        \"ms-auto inline-flex items-center gap-0.5 opacity-0 transition-opacity group-focus-within/query-rule:opacity-100 group-hover/query-rule:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Triggers (polymorphic via asChild)\n * ------------------------------------------------------------------------- */\n\nfunction QueryBuilderAddRuleTrigger({ asChild, children, onClick, ...props }: React.ComponentProps<typeof Button>) {\n  const { addRule, disabled } = useQueryBuilder()\n  const { group } = useQueryBuilderGroup()\n  return (\n    <Button\n      data-slot=\"query-builder-add-rule-trigger\"\n      variant=\"ghost\"\n      size=\"sm\"\n      asChild={asChild}\n      disabled={disabled}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) addRule(group.id)\n      }}\n      {...props}\n    >\n      {asChild\n        ? children\n        : (children ?? (\n            <>\n              <PlusIcon /> Add condition\n            </>\n          ))}\n    </Button>\n  )\n}\n\nfunction QueryBuilderAddGroupTrigger({ asChild, children, onClick, ...props }: React.ComponentProps<typeof Button>) {\n  const { addGroup, disabled, maxDepth } = useQueryBuilder()\n  const { group, depth } = useQueryBuilderGroup()\n  if (depth >= maxDepth) return null\n  return (\n    <Button\n      data-slot=\"query-builder-add-group-trigger\"\n      variant=\"ghost\"\n      size=\"sm\"\n      asChild={asChild}\n      disabled={disabled}\n      className=\"text-muted-foreground\"\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) addGroup(group.id)\n      }}\n      {...props}\n    >\n      {asChild ? children : (children ?? <>Add a nested group</>)}\n    </Button>\n  )\n}\n\n/** Removes the enclosing rule, or the enclosing group when used in a group header. */\nfunction QueryBuilderRemoveTrigger({\n  asChild,\n  children,\n  onClick,\n  className,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { remove, disabled } = useQueryBuilder()\n  const rule = React.useContext(RuleContext)\n  const group = React.useContext(GroupContext)\n  const target = rule?.rule.id ?? group?.group.id\n  const label = rule ? \"Remove condition\" : \"Remove group\"\n  return (\n    <Button\n      data-slot=\"query-builder-remove-trigger\"\n      variant=\"ghost\"\n      size=\"icon-xs\"\n      asChild={asChild}\n      disabled={disabled}\n      aria-label={label}\n      className={cn(\"text-muted-foreground hover:text-destructive\", className)}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented && target) remove(target)\n      }}\n      {...props}\n    >\n      {asChild ? children : (children ?? <XIcon />)}\n    </Button>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Summary and empty state\n * ------------------------------------------------------------------------- */\n\n/** The query as a sentence; `children` overrides the fallback when nothing is set. */\nfunction QueryBuilderSummary({\n  className,\n  children,\n  prefix = \"Showing results where \",\n  ...props\n}: React.ComponentProps<\"p\"> & { prefix?: React.ReactNode }) {\n  const { value, fields, operators } = useQueryBuilder()\n  const text = describeQuery(value, { fields, operators })\n  return (\n    <p\n      data-slot=\"query-builder-summary\"\n      data-empty={text ? undefined : \"\"}\n      className={cn(\"text-sm\", className)}\n      {...props}\n    >\n      {text ? (\n        <>\n          <span className=\"text-muted-foreground\">{prefix}</span>\n          <span className=\"font-medium\">{text}</span>\n        </>\n      ) : (\n        (children ?? (\n          <span className=\"text-muted-foreground\">Showing everything. Add a condition to narrow it down.</span>\n        ))\n      )}\n    </p>\n  )\n}\n\nfunction QueryBuilderEmpty({ className, ...props }: React.ComponentProps<typeof ark.div>) {\n  return (\n    <ark.div\n      data-slot=\"query-builder-empty\"\n      className={cn(\"rounded-lg border border-dashed px-3 py-2 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  QueryBuilder,\n  QueryBuilderGroup,\n  QueryBuilderGroupHeader,\n  QueryBuilderMatch,\n  QueryBuilderGroupBody,\n  QueryBuilderGroupFooter,\n  QueryBuilderRule,\n  QueryBuilderFieldSelect,\n  QueryBuilderOperatorSelect,\n  QueryBuilderValueEditor,\n  QueryBuilderRuleActions,\n  QueryBuilderAddRuleTrigger,\n  QueryBuilderAddGroupTrigger,\n  QueryBuilderRemoveTrigger,\n  QueryBuilderSummary,\n  QueryBuilderEmpty,\n  useQueryBuilder,\n  useQueryBuilderGroup,\n  useQueryBuilderRule,\n  createRule,\n  createGroup,\n  isGroup,\n  isComplete,\n  operatorsFor,\n  defaultOperators,\n  describeQuery,\n  pruneQuery,\n  type QueryField,\n  type QueryFieldType,\n  type QueryOption,\n  type QueryOperator,\n  type QueryRule,\n  type QueryGroup,\n  type QueryNode,\n}\n"
     }
   ],
   "docs": "## Query builder\n`src/components/ui/query-builder.tsx` is a compositional filter builder designed for low cognitive\nload: it reads like a sentence instead of the usual AND/OR toggles per row. One `QueryBuilderMatch`\n(\"Match all/any of the following\") per group is the only combinator control, each condition reads\nfield → plain-language operator → value (`is`, `is not`, `contains`, `is after`, `is any of`,\n`is empty`, ...), negation lives in the operator wording (no NOT toggle), order never matters (no\ndrag-reorder), and incomplete conditions are flagged with `data-incomplete` and dropped by\n`pruneQuery` instead of erroring. **The primitive never interprets the tree**: SQL, API payloads,\nand in-memory evaluation are the consumer's job (the demo's `interpret.ts` has `toSql`, `toJson`,\n`matches`). The consumer owns the tree (`value`/`onValueChange`,\n`QueryGroup = { id, match: \"all\"|\"any\", rules: (QueryRule|QueryGroup)[] }`) and renders parts\nrecursively; the root applies edits. Fields are data (`{ name, label, type: text|number|date|\nboolean|select, options, operators, placeholder }`); operators are `{ name, label, arity:\nnone|one|two|many, types }` with `defaultOperators` exported. Parts: `QueryBuilderGroup` (`group`,\n`data-match`/`data-depth`, nested groups get a dashed panel), `GroupHeader` > `QueryBuilderMatch`\n(`before`/`after` text) + `QueryBuilderRemoveTrigger` (removes the enclosing rule, or group when\nused in a header), `GroupBody` (guide line), `QueryBuilderRule` (`rule`) > `FieldSelect`\n(changing the field resets operator/value) + `OperatorSelect` (keeps the value when the arity\nmatches) + `ValueEditor` (by type/arity: text/number/date inputs, two inputs for \"between\",\nsingle/multiple Select for select fields, comma list for free-text lists; render-prop child\noverrides, return `undefined` to fall back) + `RuleActions` (hover-revealed), `GroupFooter` >\n`AddRuleTrigger` / `AddGroupTrigger` (hidden past `maxDepth`; a new nested group starts with the\nopposite match), `QueryBuilderSummary` (natural-language sentence; `prefix` prop, default\n\"Showing results where \"), `QueryBuilderEmpty`. Helpers: `createRule`, `createGroup`, `isGroup`,\n`isComplete`, `operatorsFor`, `describeQuery(tree, { fields })`, `pruneQuery`. The form builder\nreuses these parts for per-field visibility conditions. `src/demo/query-builder/` is the reference\n(`/segments`): filters the users dataset with quick-start presets, the sentence summary, a\nlive matching-rows table, and SQL/JSON output."