@mastra/playground-ui 33.0.0-alpha.3 → 33.0.0

package/dist/property-filter-creator-Cl7xhaML.cjs

@@ -0,0 +1,673 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const Button = require('./Button-DpIX8JMz.cjs');
+const dropdownMenu = require('./dropdown-menu-Vl_C0N5e.cjs');
+const React = require('react');
+const buttonsGroup = require('./buttons-group-BvLg2kpv.cjs');
+const tooltip = require('./tooltip-j8gUR1Qk.cjs');
+const input = require('./input-DGvJg7no.cjs');
+const popover = require('./popover-ttQgAb0m.cjs');
+const checkbox = require('./checkbox-Bda6srNY.cjs');
+const radioGroup = require('./radio-group-CcZMn-TY.cjs');
+const spinner = require('./spinner-PSUHmhye.cjs');
+const multiCombobox = require('./multi-combobox-DkFLK64B.cjs');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+function PropertyFilterActions({
+  disabled,
+  onClear,
+  onRemoveAll,
+  onSave,
+  onRemoveSaved
+}) {
+  const hasMenuItems = !!(onRemoveAll || onSave || onRemoveSaved);
+  const showClear = !!onClear;
+  if (!showClear && !hasMenuItems) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    showClear && /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { disabled, size: "md", onClick: () => onClear(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+      "Clear"
+    ] }),
+    hasMenuItems && /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { disabled, size: "md", "aria-label": "More filter actions", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EllipsisVerticalIcon, {}) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu.Content, { align: "end", children: [
+        onRemoveAll && /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu.Item, { onSelect: () => onRemoveAll(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+          "Remove all filters"
+        ] }),
+        onRemoveAll && (onSave || onRemoveSaved) && /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Separator, {}),
+        onSave && /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu.Item, { onSelect: () => onSave(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SaveIcon, {}),
+          "Save filters for next time"
+        ] }),
+        onRemoveSaved && /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu.Item, { onSelect: () => onRemoveSaved(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2Icon, {}),
+          "Remove saved filters"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+function PickMultiPanel({ field, tokens, onChange }) {
+  const [query, setQuery] = React.useState("");
+  const filteredOptions = React.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return field.options;
+    return field.options.filter((o) => o.label.toLowerCase().includes(q));
+  }, [field.options, query]);
+  const token = React.useMemo(() => tokens.find((t) => t.fieldId === field.id), [tokens, field.id]);
+  const selectedValue = typeof token?.value === "string" ? token.value : !field.multi ? field.defaultValue : void 0;
+  const selectedValues = React.useMemo(() => {
+    if (Array.isArray(token?.value)) return token.value;
+    if (typeof token?.value === "string") return [token.value];
+    return [];
+  }, [token]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    field.searchable !== false && /* @__PURE__ */ jsxRuntime.jsx(
+      input.Input,
+      {
+        size: "sm",
+        value: query,
+        onChange: (e) => setQuery(e.target.value),
+        placeholder: `Search ${field.label.toLowerCase()}...`,
+        className: "mb-2",
+        onKeyDown: (e) => {
+          if (e.key !== "ArrowDown") return;
+          const panel = e.currentTarget.closest("[data-pick-multi-panel]");
+          const first = panel?.querySelector("[data-pick-multi-item]:not([disabled])");
+          if (!first) return;
+          e.preventDefault();
+          e.stopPropagation();
+          first.focus();
+        }
+      }
+    ),
+    field.isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-2 py-1.5 text-ui-sm text-neutral3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: "sm", className: "size-3 text-neutral3" }),
+      "Loading options…"
+    ] }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-ui-sm text-neutral3", children: field.emptyText ?? "No option found." }) : field.multi ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[80dvh] overflow-auto", children: filteredOptions.map((option) => {
+      const checked = selectedValues.includes(option.value);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          title: option.label,
+          className: "flex items-center gap-2 rounded-md px-2 py-1.5 text-ui-md text-neutral4 hover:bg-surface4 hover:text-neutral6 cursor-pointer focus-within:bg-surface4 focus-within:text-neutral6 min-w-0",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              checkbox.Checkbox,
+              {
+                "data-pick-multi-item": "",
+                checked,
+                onCheckedChange: (next) => {
+                  const isChecked = next === true;
+                  const nextValues = isChecked ? selectedValues.includes(option.value) ? selectedValues : [...selectedValues, option.value] : selectedValues.filter((v) => v !== option.value);
+                  onChange(field.id, nextValues);
+                },
+                className: "shrink-0"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate min-w-0 flex-1", children: option.label })
+          ]
+        },
+        option.value
+      );
+    }) }) : /* @__PURE__ */ jsxRuntime.jsxs(
+      radioGroup.RadioGroup,
+      {
+        value: selectedValue ?? "",
+        onValueChange: (value) => onChange(field.id, value),
+        className: "max-h-[80dvh] gap-0 overflow-auto",
+        children: [
+          filteredOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "label",
+            {
+              title: option.label,
+              className: "flex items-center gap-2 rounded-md px-2 py-1.5 text-ui-md text-neutral4 hover:bg-surface4 hover:text-neutral6 cursor-pointer focus-within:bg-surface4 focus-within:text-neutral6 min-w-0",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(radioGroup.RadioGroupItem, { "data-pick-multi-item": "", value: option.value, className: "shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate min-w-0 flex-1", children: option.label })
+              ]
+            },
+            option.value
+          )),
+          !field.omitAnyOption && /* @__PURE__ */ jsxRuntime.jsxs(
+            "label",
+            {
+              title: "Any",
+              className: "flex items-center gap-2 rounded-md px-2 py-1.5 text-ui-md text-neutral4 hover:bg-surface4 hover:text-neutral6 cursor-pointer focus-within:bg-surface4 focus-within:text-neutral6 min-w-0",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(radioGroup.RadioGroupItem, { "data-pick-multi-item": "", value: "Any", className: "shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate min-w-0 flex-1", children: "Any" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+function stringifyTokenValue(value) {
+  if (Array.isArray(value)) return value.length === 0 ? "Any" : value.join(", ");
+  return value;
+}
+const DEFAULT_LOCKED_TOOLTIP = "This filter is set by the current context and cannot be removed here.";
+function lookupOptionLabel(field, value) {
+  if (field.kind === "pick-multi" && field.options) {
+    if (Array.isArray(value)) {
+      if (value.length === 0) return "Any";
+      return value.map((v) => field.options.find((o) => o.value === v)?.label ?? v).join(", ");
+    }
+    return field.options.find((o) => o.value === value)?.label ?? value;
+  }
+  return stringifyTokenValue(value);
+}
+function LockedTokenPill({ field, value, tooltipContent }) {
+  const display = lookupOptionLabel(field, value);
+  const lockA11yLabel = `${field.label} filter is locked by context`;
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      buttonsGroup.ButtonsGroup,
+      {
+        spacing: "close",
+        "data-locked-field-id": field.id,
+        "data-property-filter-pill": "locked",
+        tabIndex: 0,
+        "aria-label": lockA11yLabel,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: field.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: "is" }),
+          /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: display }),
+          /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LockIcon, {}) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: tooltipContent })
+  ] }) });
+}
+function TextTokenPill({ field, value, onChange, onRemove, disabled, autoFocus }) {
+  const [draft, setDraft] = React.useState(value);
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (draft.trim() !== value) setDraft(value);
+  }, [value]);
+  React.useEffect(() => {
+    if (autoFocus) inputRef.current?.focus();
+  }, [autoFocus]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(buttonsGroup.ButtonsGroup, { spacing: "close", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: field.label }),
+    /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: "is" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      input.Input,
+      {
+        ref: inputRef,
+        size: "md",
+        disabled,
+        value: draft,
+        placeholder: field.placeholder ?? `Enter ${field.label}`,
+        onChange: (e) => {
+          const next = e.target.value;
+          setDraft(next);
+          if (next.trim() !== value) onChange(next);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            const trimmed = draft.trim();
+            if (trimmed !== value) onChange(trimmed);
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            setDraft(value);
+            e.target.blur();
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        type: "button",
+        disabled,
+        "aria-label": `Remove ${field.label} filter`,
+        size: "md",
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: onRemove,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
+      }
+    )
+  ] });
+}
+function PickMultiTokenPill({ field, token, tokens, onChange, onRemove, disabled }) {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(buttonsGroup.ButtonsGroup, { spacing: "close", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: field.label }),
+    /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: "is" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(popover.Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type: "button", disabled, size: "md", children: stringifyTokenValue(token.value) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(popover.PopoverContent, { align: "start", sideOffset: 8, className: "w-64 p-2", "data-pick-multi-panel": true, children: /* @__PURE__ */ jsxRuntime.jsx(PickMultiPanel, { field, tokens, onChange }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        type: "button",
+        disabled,
+        "aria-label": `Remove ${field.label} filter`,
+        size: "md",
+        onClick: onRemove,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
+      }
+    )
+  ] });
+}
+function PropertyFilterApplied({
+  fields,
+  tokens,
+  onTokensChange,
+  disabled,
+  autoFocusFieldId,
+  lockedFieldIds,
+  lockedTooltipContent = DEFAULT_LOCKED_TOOLTIP
+}) {
+  if (tokens.length === 0) return null;
+  const lockedSet = new Set(lockedFieldIds ?? []);
+  const replaceTokenAt = (index, next) => {
+    const copy = [...tokens];
+    copy[index] = next;
+    onTokensChange(copy);
+  };
+  const removeTokenAt = (index) => {
+    onTokensChange(tokens.filter((_, i) => i !== index));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 flex-wrap", children: tokens.map((token, index) => {
+    const field = fields.find((f) => f.id === token.fieldId);
+    if (!field) return null;
+    if (lockedSet.has(token.fieldId)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        LockedTokenPill,
+        {
+          field,
+          value: token.value,
+          tooltipContent: lockedTooltipContent
+        },
+        `${token.fieldId}-${index}`
+      );
+    }
+    if (field.kind === "text" && typeof token.value === "string") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        TextTokenPill,
+        {
+          field,
+          value: token.value,
+          disabled,
+          autoFocus: autoFocusFieldId === token.fieldId,
+          onChange: (nextValue) => replaceTokenAt(index, { fieldId: token.fieldId, value: nextValue }),
+          onRemove: () => removeTokenAt(index)
+        },
+        `${token.fieldId}-${index}`
+      );
+    }
+    if (field.kind === "pick-multi") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        PickMultiTokenPill,
+        {
+          field,
+          token,
+          tokens,
+          disabled,
+          onChange: (fieldId, value) => {
+            if (value === void 0) {
+              removeTokenAt(index);
+              return;
+            }
+            replaceTokenAt(index, { fieldId, value });
+          },
+          onRemove: () => removeTokenAt(index)
+        },
+        `${token.fieldId}-${index}`
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(buttonsGroup.ButtonsGroup, { spacing: "close", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: field.label }),
+      /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: "is" }),
+      /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroupText, { size: "md", children: stringifyTokenValue(token.value) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          type: "button",
+          disabled,
+          size: "md",
+          "aria-label": `Remove ${field.label} filter`,
+          onClick: () => removeTokenAt(index),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
+        }
+      )
+    ] }, `${token.fieldId}-${index}`);
+  }) });
+}
+
+function PropertyFilterCreator({
+  fields,
+  tokens,
+  onTokensChange,
+  label = "Add Filter",
+  disabled,
+  size,
+  onStartTextFilter,
+  hiddenFieldIds
+}) {
+  const visibleFields = React.useMemo(() => {
+    if (!hiddenFieldIds || hiddenFieldIds.length === 0) return fields;
+    const hidden = new Set(hiddenFieldIds);
+    return fields.filter((f) => !hidden.has(f.id));
+  }, [fields, hiddenFieldIds]);
+  const [open, setOpen] = React.useState(false);
+  const [fieldId, setFieldId] = React.useState();
+  const [textValue, setTextValue] = React.useState("");
+  const [multiValue, setMultiValue] = React.useState([]);
+  const [error, setError] = React.useState();
+  const [openPickMultiFieldId, setOpenPickMultiFieldId] = React.useState();
+  const textInputRef = React.useRef(null);
+  const skipCloseFocusRef = React.useRef(false);
+  const togglePickMulti = React.useCallback((id) => {
+    setOpenPickMultiFieldId((current) => current === id ? void 0 : id);
+  }, []);
+  const closePickMulti = React.useCallback(() => setOpenPickMultiFieldId(void 0), []);
+  React.useEffect(() => {
+    if (!open) setOpenPickMultiFieldId(void 0);
+  }, [open]);
+  const selectedField = React.useMemo(() => visibleFields.find((f) => f.id === fieldId), [visibleFields, fieldId]);
+  const singleUseFieldIds = React.useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const token of tokens) {
+      const field = fields.find((f) => f.id === token.fieldId);
+      if (field && field.kind !== "pick-multi") ids.add(token.fieldId);
+    }
+    return ids;
+  }, [tokens, fields]);
+  const reset = React.useCallback(() => {
+    setFieldId(void 0);
+    setTextValue("");
+    setMultiValue([]);
+    setError(void 0);
+  }, []);
+  React.useEffect(() => {
+    if (!open) reset();
+  }, [open, reset]);
+  React.useEffect(() => {
+    if (!open) return;
+    if (selectedField?.kind === "text") textInputRef.current?.focus();
+  }, [open, selectedField]);
+  const replacePickMultiToken = React.useCallback(
+    (fieldId2, value) => {
+      const existingIndex = tokens.findIndex((t) => t.fieldId === fieldId2);
+      const shouldRemove = value === void 0 || Array.isArray(value) && value.length === 0;
+      if (shouldRemove) {
+        if (existingIndex === -1) return;
+        onTokensChange(tokens.filter((_, i) => i !== existingIndex));
+        return;
+      }
+      if (existingIndex === -1) {
+        onTokensChange([...tokens, { fieldId: fieldId2, value }]);
+        return;
+      }
+      const nextTokens = [...tokens];
+      nextTokens[existingIndex] = { fieldId: fieldId2, value };
+      onTokensChange(nextTokens);
+    },
+    [onTokensChange, tokens]
+  );
+  const commit = React.useCallback(() => {
+    if (!selectedField) {
+      setError("Choose a property first.");
+      return;
+    }
+    if (singleUseFieldIds.has(selectedField.id)) {
+      setError(`Remove the existing ${selectedField.label} filter before adding another.`);
+      return;
+    }
+    if (selectedField.kind === "text" && !textValue.trim()) {
+      setError(`Enter a value for ${selectedField.label}.`);
+      return;
+    }
+    if (selectedField.kind === "multi-select" && multiValue.length === 0) {
+      setError(`Choose at least one ${selectedField.label.toLowerCase()} value.`);
+      return;
+    }
+    const token = selectedField.kind === "multi-select" ? { fieldId: selectedField.id, value: multiValue } : { fieldId: selectedField.id, value: textValue.trim() };
+    onTokensChange([...tokens, token]);
+    setOpen(false);
+  }, [multiValue, onTokensChange, selectedField, singleUseFieldIds, textValue, tokens]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(popover.Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { variant: "outline", size, disabled, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListFilterPlusIcon, {}),
+      label
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      popover.PopoverContent,
+      {
+        align: "end",
+        className: "p-3 w-64",
+        initialFocus: false,
+        finalFocus: () => {
+          if (skipCloseFocusRef.current) {
+            skipCloseFocusRef.current = false;
+            return false;
+          }
+          return true;
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3", children: [
+          selectedField && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Back to properties",
+                className: "text-neutral3 hover:text-neutral6 transition-colors",
+                onClick: () => {
+                  setFieldId(void 0);
+                  setTextValue("");
+                  setMultiValue([]);
+                  setError(void 0);
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FilterIcon, { className: "h-4 w-4 shrink-0 text-neutral3" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm text-neutral3", children: `${selectedField.label} · is` })
+          ] }),
+          !selectedField && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              role: "menu",
+              className: "max-h-[80dvh] overflow-auto",
+              onKeyDown: (e) => {
+                if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") return;
+                const buttons = Array.from(
+                  e.currentTarget.querySelectorAll("[data-filter-item]:not([disabled])")
+                );
+                if (buttons.length === 0) return;
+                e.preventDefault();
+                const active = document.activeElement;
+                const current = buttons.findIndex((b) => b === active);
+                let next;
+                if (e.key === "Home") next = 0;
+                else if (e.key === "End") next = buttons.length - 1;
+                else if (e.key === "ArrowDown") next = current < 0 ? 0 : (current + 1) % buttons.length;
+                else next = current <= 0 ? buttons.length - 1 : current - 1;
+                buttons[next]?.focus();
+              },
+              children: visibleFields.length > 0 ? visibleFields.map((f) => {
+                const used = singleUseFieldIds.has(f.id);
+                if (f.kind === "pick-multi") {
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    PickMultiMenuItem,
+                    {
+                      field: f,
+                      tokens,
+                      onChange: replacePickMultiToken,
+                      open: openPickMultiFieldId === f.id,
+                      onToggle: togglePickMulti,
+                      onClose: closePickMulti
+                    },
+                    f.id
+                  );
+                }
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    "data-filter-item": "",
+                    className: utils.cn(
+                      "group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-ui-md transition-colors",
+                      "focus:bg-surface4 focus:text-neutral6 focus:outline-none",
+                      used ? "cursor-not-allowed text-neutral2 opacity-70" : "text-neutral4 hover:bg-surface4 hover:text-neutral6"
+                    ),
+                    disabled: used,
+                    onClick: () => {
+                      setError(void 0);
+                      if (f.kind === "text") {
+                        onTokensChange([...tokens, { fieldId: f.id, value: "" }]);
+                        onStartTextFilter?.(f.id);
+                        skipCloseFocusRef.current = true;
+                        setOpen(false);
+                        return;
+                      }
+                      setFieldId(f.id);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: f.label }),
+                      used ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-neutral3", children: "In use" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { className: "ml-auto h-4 w-4 text-neutral3 opacity-0 transition-opacity group-hover:opacity-100 group-focus:opacity-100" })
+                    ]
+                  },
+                  f.id
+                );
+              }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-ui-sm text-neutral3", children: "No matching property." })
+            }
+          ),
+          selectedField && selectedField.kind === "text" && /* @__PURE__ */ jsxRuntime.jsx(
+            input.Input,
+            {
+              ref: textInputRef,
+              size: "md",
+              value: textValue,
+              onChange: (e) => {
+                setTextValue(e.target.value);
+                setError(void 0);
+              },
+              placeholder: selectedField.placeholder ?? `Enter ${selectedField.label}`,
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  commit();
+                }
+              }
+            }
+          ),
+          selectedField && selectedField.kind === "multi-select" && /* @__PURE__ */ jsxRuntime.jsx(
+            multiCombobox.MultiCombobox,
+            {
+              options: selectedField.options ?? [],
+              value: multiValue,
+              onValueChange: (v) => {
+                setMultiValue(v);
+                setError(void 0);
+              },
+              placeholder: selectedField.placeholder ?? `Choose ${selectedField.label}`,
+              searchPlaceholder: `Search ${selectedField.label.toLowerCase()}...`,
+              emptyText: selectedField.emptyText ?? "No option found.",
+              size: "md"
+            }
+          ),
+          error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-ui-sm text-red-500", children: error }),
+          selectedField && selectedField.kind !== "pick-multi" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "ghost", size: "md", onClick: () => setOpen(false), children: "Cancel" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "outline", size: "md", onClick: commit, children: "Add filter" })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+function PickMultiMenuItem({ field, tokens, onChange, open, onToggle, onClose }) {
+  const contentRef = React.useRef(null);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    popover.Popover,
+    {
+      open,
+      onOpenChange: (next) => {
+        if (next) onToggle(field.id);
+        else onClose();
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            "data-filter-item": "",
+            className: utils.cn(
+              "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-ui-md text-neutral4 hover:bg-surface4 hover:text-neutral6 transition-colors",
+              "focus:bg-surface4 focus:text-neutral6 focus:outline-none"
+            ),
+            onKeyDown: (e) => {
+              if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
+              if (!open) onToggle(field.id);
+              e.preventDefault();
+              requestAnimationFrame(() => {
+                const first = contentRef.current?.querySelector(
+                  'input, button, [tabindex]:not([tabindex="-1"])'
+                );
+                first?.focus();
+              });
+            },
+            children: [
+              open && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "h-4 w-4 text-neutral3 shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: field.label }),
+              !open && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "h-4 w-4 ml-auto text-neutral3 shrink-0" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          popover.PopoverContent,
+          {
+            ref: contentRef,
+            side: "right",
+            align: "start",
+            sideOffset: 8,
+            className: "w-64 p-2",
+            initialFocus: false,
+            onKeyDown: (e) => {
+              if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") return;
+              const items = Array.from(
+                e.currentTarget.querySelectorAll("[data-pick-multi-item]:not([disabled])")
+              );
+              if (items.length === 0) return;
+              e.preventDefault();
+              e.stopPropagation();
+              const active = document.activeElement;
+              const current = items.findIndex((el) => el === active);
+              let next;
+              if (e.key === "Home") next = 0;
+              else if (e.key === "End") next = items.length - 1;
+              else if (e.key === "ArrowDown") next = current < 0 ? 0 : (current + 1) % items.length;
+              else next = current <= 0 ? items.length - 1 : current - 1;
+              items[next]?.focus();
+            },
+            "data-pick-multi-panel": true,
+            children: /* @__PURE__ */ jsxRuntime.jsx(PickMultiPanel, { field, tokens, onChange })
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.PickMultiPanel = PickMultiPanel;
+exports.PropertyFilterActions = PropertyFilterActions;
+exports.PropertyFilterApplied = PropertyFilterApplied;
+exports.PropertyFilterCreator = PropertyFilterCreator;
+//# sourceMappingURL=property-filter-creator-Cl7xhaML.cjs.map