strapi-plugin-magic-mark 3.3.2 → 3.4.0

package/dist/_chunks/{index-DNoxLWi0.mjs → index-QkINaIgJ.mjs}

@@ -6,7 +6,7 @@ import { BookmarkIcon, SwatchIcon, ChevronDownIcon, BookOpenIcon, StarIcon, Hear
 import { useIntl } from "react-intl";
 import { useNavigate, useLocation } from "react-router-dom";
 import styled, { keyframes } from "styled-components";
-import { Box, Typography, Flex, TextInput, Textarea, Button, Loader } from "@strapi/design-system";
+import { Box, Typography, Flex, TextInput, Textarea, Button, Loader, Tag, DatePicker, NumberInput, DateTimePicker, TimePicker, SingleSelect, SingleSelectOption } from "@strapi/design-system";
 import ReactDOM from "react-dom";
 import qs from "qs";
 const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
@@ -154,7 +154,7 @@ const FilterChip = styled.div`
   gap: 4px;
   color: ${(props) => props.theme.colors.neutral800};
 `;
-const LogicBadge = styled.span`
+const LogicBadge$1 = styled.span`
   font-weight: bold;
   color: ${(props) => props.logic === "OR" ? props.theme.colors.warning700 : props.theme.colors.primary700};
   font-size: 10px;
@@ -191,7 +191,7 @@ const FilterPreview = ({ query }) => {
     parsed.filters.length > 0 && /* @__PURE__ */ jsxs(Box, { marginBottom: 2, children: [
       /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "Filters:" }),
       /* @__PURE__ */ jsx(Flex, { wrap: "wrap", gap: 1, children: parsed.filters.map((filter, idx) => /* @__PURE__ */ jsxs(FilterChip, { logic: filter.logic, children: [
-        filter.logic && /* @__PURE__ */ jsx(LogicBadge, { logic: filter.logic, children: filter.logic }),
+        filter.logic && /* @__PURE__ */ jsx(LogicBadge$1, { logic: filter.logic, children: filter.logic }),
         /* @__PURE__ */ jsxs("span", { children: [
           filter.field,
           " ",
@@ -354,7 +354,7 @@ const ModalBody = styled.div`
   overflow-y: auto;
   flex: 1;
 `;
-const ModalFooter = styled.div`
+const ModalFooter$1 = styled.div`
   padding: 16px 28px;
   background: ${(p) => p.theme.colors.neutral100};
   border-top: 1px solid rgba(128, 128, 128, 0.25);
@@ -1006,7 +1006,7 @@ const CreateEditModal = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs(ModalFooter, { children: [
+    /* @__PURE__ */ jsxs(ModalFooter$1, { children: [
       /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "tertiary", children: formatMessage({ id: `${pluginId2}.button.cancel`, defaultMessage: "Cancel" }) }),
       /* @__PURE__ */ jsx(Button, { onClick: handleSubmit, loading: isSubmitting, children: isEditing ? formatMessage({ id: `${pluginId2}.button.update`, defaultMessage: "Update" }) : formatMessage({ id: `${pluginId2}.button.save`, defaultMessage: "Save Bookmark" }) })
     ] })
@@ -1453,7 +1453,8 @@ const SelectContainer = styled.div`
 `;
 const SelectButton = styled.button`
   width: 100%;
-  padding: 10px 36px 10px 12px;
+  height: 32px;
+  padding: 0 36px 0 12px;
   border: 1px solid ${(props) => props.$isOpen ? "#4945ff" : "rgba(128, 128, 128, 0.25)"};
   border-radius: 4px;
   background: ${(p) => p.theme.colors.neutral0};
@@ -1476,12 +1477,13 @@ const SelectButton = styled.button`
   }
   
   @media (max-width: 768px) {
-    padding: 8px 32px 8px 10px;
+    height: 32px;
+    padding: 0 32px 0 10px;
     font-size: 13px;
   }
 `;
 const SelectText = styled.span`
-  color: ${(props) => props.$isPlaceholder ? "#8e8ea9" : "#212134"};
+  color: ${(props) => props.$isPlaceholder ? props.theme.colors.neutral500 : props.theme.colors.neutral800};
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1502,7 +1504,7 @@ const DropdownList = styled.div`
   top: ${(props) => props.top}px;
   left: ${(props) => props.left}px;
   width: ${(props) => props.width}px;
-  max-height: 300px;
+  max-height: 400px;
   overflow-y: auto;
   background: ${(p) => p.theme.colors.neutral0};
   border: 1px solid rgba(128, 128, 128, 0.25);
@@ -1512,14 +1514,14 @@ const DropdownList = styled.div`
   display: ${(props) => props.$isOpen ? "block" : "none"};
   
   @media (max-width: 768px) {
-    max-height: 250px;
+    max-height: 320px;
   }
 `;
 const DropdownItem = styled.button`
   width: 100%;
   padding: 10px 12px;
   border: none;
-  background: ${(props) => props.$isSelected ? "#f0f0ff" : props.theme.colors.neutral0};
+  background: ${(props) => props.$isSelected ? "rgba(73, 69, 255, 0.06)" : props.theme.colors.neutral0};
   text-align: left;
   cursor: pointer;
   font-size: 14px;
@@ -1546,6 +1548,8 @@ const SearchInput = styled.input`
   border: none;
   border-bottom: 1px solid rgba(128, 128, 128, 0.25);
   font-size: 14px;
+  background: ${(p) => p.theme.colors.neutral0};
+  color: ${(p) => p.theme.colors.neutral800};
   
   &:focus {
     outline: none;
@@ -1757,18 +1761,110 @@ const useRelationSchema = () => {
     errors
   };
 };
-const buildFilterFromPath = (fieldPath, operator, value) => {
+const BASE_FILTERS = [
+  { value: "eq", label: "is" },
+  { value: "ne", label: "is not" },
+  { value: "null", label: "is null" },
+  { value: "notNull", label: "is not null" }
+];
+const NUMERIC_FILTERS = [
+  { value: "gt", label: "is greater than" },
+  { value: "gte", label: "is greater than or equal to" },
+  { value: "lt", label: "is less than" },
+  { value: "lte", label: "is less than or equal to" }
+];
+const CONTAINS_FILTERS = [
+  { value: "contains", label: "contains" },
+  { value: "containsi", label: "contains (case insensitive)" },
+  { value: "notContains", label: "not contains" },
+  { value: "notContainsi", label: "not contains (case insensitive)" }
+];
+const STRING_PARSE_FILTERS = [
+  { value: "startsWith", label: "starts with" },
+  { value: "startsWithi", label: "starts with (case insensitive)" },
+  { value: "endsWith", label: "ends with" },
+  { value: "endsWithi", label: "ends with (case insensitive)" }
+];
+const IS_SENSITIVE_FILTERS = [
+  { value: "eqi", label: "is (case insensitive)" },
+  { value: "nei", label: "is not (case insensitive)" }
+];
+const ARRAY_FILTERS = [
+  { value: "in", label: "is in" },
+  { value: "notIn", label: "is not in" }
+];
+const RANGE_FILTERS = [
+  { value: "between", label: "is between" }
+];
+function getOperatorsForType(fieldType) {
+  const t = (fieldType || "string").toLowerCase();
+  if (["string", "text", "email", "uid", "richtext"].includes(t)) {
+    return [
+      ...BASE_FILTERS,
+      ...IS_SENSITIVE_FILTERS,
+      ...CONTAINS_FILTERS,
+      ...STRING_PARSE_FILTERS,
+      ...ARRAY_FILTERS
+    ];
+  }
+  if (["integer", "float", "decimal", "biginteger"].includes(t)) {
+    return [
+      ...BASE_FILTERS,
+      ...NUMERIC_FILTERS,
+      ...ARRAY_FILTERS,
+      ...RANGE_FILTERS
+    ];
+  }
+  if (["datetime"].includes(t)) {
+    return [
+      ...BASE_FILTERS,
+      ...NUMERIC_FILTERS,
+      ...RANGE_FILTERS
+    ];
+  }
+  if (["date", "time"].includes(t)) {
+    return [
+      ...BASE_FILTERS,
+      ...NUMERIC_FILTERS,
+      ...CONTAINS_FILTERS,
+      ...RANGE_FILTERS
+    ];
+  }
+  if (["boolean"].includes(t)) {
+    return BASE_FILTERS;
+  }
+  if (["enumeration"].includes(t)) {
+    return [...BASE_FILTERS, ...ARRAY_FILTERS];
+  }
+  return [...BASE_FILTERS, ...IS_SENSITIVE_FILTERS];
+}
+const buildFilterFromPath = (fieldPath, operator, value, valueTo, negate) => {
   const parts = fieldPath.split(".").filter(Boolean);
   if (parts.length === 0) return {};
   const opKey = operator.startsWith("$") ? operator : `$${operator}`;
-  const filterValue = ["null", "notNull"].includes(operator) ? true : value;
+  let filterValue;
+  if (["null", "notNull"].includes(operator)) {
+    filterValue = true;
+  } else if (["in", "notIn"].includes(operator)) {
+    filterValue = value.split(",").map((v) => v.trim()).filter(Boolean);
+  } else if (operator === "between" && valueTo) {
+    filterValue = [value, valueTo];
+  } else {
+    filterValue = value;
+  }
+  let result;
   if (parts.length === 1) {
-    return { [parts[0]]: { [opKey]: filterValue } };
+    result = { [parts[0]]: { [opKey]: filterValue } };
+  } else {
+    const [first, ...rest] = parts;
+    result = {
+      [first]: buildFilterFromPath(rest.join("."), operator, value, valueTo, false)
+    };
   }
-  const [first, ...rest] = parts;
-  return {
-    [first]: buildFilterFromPath(rest.join("."), operator, value)
-  };
+  if (negate) {
+    return { $not: result };
+  }
+  return result;
 };
 const extractRelationFromField = (field) => {
   if (!field || !field.includes(".")) return null;
@@ -1782,12 +1878,12 @@ const rowsToFilterStructure = (rows, connectors) => {
   });
   if (validRows.length === 0) return void 0;
   if (validRows.length === 1) {
-    return buildFilterFromPath(validRows[0].field, validRows[0].operator, validRows[0].value);
+    return buildFilterFromPath(validRows[0].field, validRows[0].operator, validRows[0].value, validRows[0].valueTo, validRows[0].negate);
   }
   const groups = [];
   let currentAndGroup = [];
   validRows.forEach((row, i) => {
-    const filter = buildFilterFromPath(row.field, row.operator, row.value);
+    const filter = buildFilterFromPath(row.field, row.operator, row.value, row.valueTo, row.negate);
     currentAndGroup.push(filter);
     const nextConnector = connectors[i];
     if (nextConnector?.logic === "OR" || !nextConnector) {
@@ -1829,6 +1925,58 @@ const generateFromRows = (rows, connectors) => {
   }
   return qs.stringify(queryObject, { encodeValuesOnly: true });
 };
+const buildFilterFromGroup = (group) => {
+  const validItems = group.items.filter((item) => {
+    if ("isGroup" in item && item.isGroup) return true;
+    const row = item;
+    if (!row.field) return false;
+    if (["null", "notNull"].includes(row.operator)) return true;
+    if (row.operator === "between") return row.value?.trim() && row.valueTo?.trim();
+    return row.value?.trim();
+  });
+  if (validItems.length === 0) return void 0;
+  const conditions = validItems.map((item) => {
+    if ("isGroup" in item && item.isGroup) {
+      return buildFilterFromGroup(item);
+    }
+    const row = item;
+    return buildFilterFromPath(row.field, row.operator, row.value, row.valueTo, row.negate);
+  }).filter(Boolean);
+  if (conditions.length === 0) return void 0;
+  if (conditions.length === 1) return conditions[0];
+  const logicKey = group.logic === "AND" ? "$and" : "$or";
+  return { [logicKey]: conditions };
+};
+const extractRelationsFromGroup = (group) => {
+  const relations = /* @__PURE__ */ new Set();
+  group.items.forEach((item) => {
+    if ("isGroup" in item && item.isGroup) {
+      const nested = extractRelationsFromGroup(item);
+      nested.forEach((r) => relations.add(r));
+    } else {
+      const row = item;
+      const rel = extractRelationFromField(row.field);
+      if (rel) relations.add(rel);
+    }
+  });
+  return relations;
+};
+const generateFromGroup = (group) => {
+  const queryObject = {};
+  const filterStructure = buildFilterFromGroup(group);
+  if (filterStructure) {
+    queryObject.filters = filterStructure;
+  }
+  const relations = extractRelationsFromGroup(group);
+  if (relations.size > 0) {
+    const populate = {};
+    relations.forEach((rel) => {
+      populate[rel] = true;
+    });
+    queryObject.populate = populate;
+  }
+  return qs.stringify(queryObject, { encodeValuesOnly: true });
+};
 const extractFieldPathAndOperator = (parts) => {
   let operatorIndex = -1;
   for (let i = parts.length - 1; i >= 0; i--) {
@@ -2003,7 +2151,7 @@ const ModalOverlay = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 999;
+  z-index: 400;
   padding: 20px;
   @media (max-width: 768px) {
     padding: 10px;
@@ -2013,61 +2161,328 @@ const ModalContent = styled(Box)`
   background: ${(p) => p.theme.colors.neutral0};
   border-radius: 8px;
   max-height: 90vh;
-  overflow-y: auto;
-  max-width: 560px;
+  max-width: 720px;
   width: 100%;
+  min-height: 400px;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   @media (max-width: 768px) {
     max-width: 100%;
-    max-height: 95vh;
+    max-height: 92vh;
   }
 `;
+const ModalScrollArea = styled.div`
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+`;
 const RowWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 8px;
 `;
-const FilterRowContainer = styled.div`
+const FilterRowCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+  background: ${(p) => p.theme.colors.neutral100};
+  border-radius: 6px;
+  border: 1px solid ${(p) => p.theme.colors.neutral200};
+`;
+const FilterRowTop = styled.div`
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
 `;
-const ValueInput = styled.input`
-  flex: 1;
-  min-width: 120px;
-  padding: 8px 12px;
-  border: 1px solid rgba(128, 128, 128, 0.25);
+const NegateCheckbox = styled.label`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: ${(p) => p.theme.colors.neutral700};
+  cursor: pointer;
+  user-select: none;
+  input {
+    cursor: pointer;
+  }
+`;
+const FilterRowValue = styled.div`
+  width: 100%;
+  padding-top: 14px;
+  padding-bottom: 4px;
+  border-top: 1px solid ${(p) => p.theme.colors.neutral200};
+`;
+const ValueLabel = styled.span`
+  display: block;
+  font-size: 12px;
+  font-weight: 500;
+  color: ${(p) => p.theme.colors.neutral600};
+  margin-bottom: 8px;
+`;
+styled.span`
+  font-size: 10px;
+  font-weight: 500;
+  padding: 2px 6px;
   border-radius: 4px;
+  background: ${(p) => p.theme.colors.neutral200};
+  color: ${(p) => p.theme.colors.neutral700};
+  text-transform: uppercase;
+`;
+const MultiValueWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-height: 32px;
+  padding: 6px 8px;
+  border: 1px solid ${(p) => p.theme.colors.neutral200};
+  border-radius: 4px;
+  background: ${(p) => p.theme.colors.neutral0};
+  &:focus-within {
+    border-color: #4945ff;
+    box-shadow: 0 0 0 2px rgba(73, 69, 255, 0.1);
+  }
+`;
+const MultiValueInput = styled.input`
+  flex: 1;
+  min-width: 80px;
+  border: none;
+  background: transparent;
   font-size: 14px;
+  color: ${(p) => p.theme.colors.neutral800};
   &:focus {
     outline: none;
-    border-color: #4945ff;
-    box-shadow: 0 0 0 2px rgba(73, 69, 255, 0.1);
   }
+  &::placeholder {
+    color: ${(p) => p.theme.colors.neutral500};
+  }
+`;
+const BetweenWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
 `;
-const ConnectorRow = styled.div`
+const BetweenSeparator = styled.span`
+  font-size: 13px;
+  font-weight: 500;
+  color: ${(p) => p.theme.colors.neutral600};
+`;
+function SmartValueInput({
+  fieldType,
+  operator,
+  value,
+  valueTo,
+  onChange,
+  onValueToChange,
+  placeholder = "Value"
+}) {
+  const t = (fieldType || "string").toLowerCase();
+  const [inputValue, setInputValue] = React.useState("");
+  if (["in", "notIn"].includes(operator)) {
+    const values = value ? value.split(",").map((v) => v.trim()).filter(Boolean) : [];
+    const handleAddValue = (e) => {
+      if (e.key === "Enter" || e.key === ",") {
+        e.preventDefault();
+        const newVal = inputValue.trim();
+        if (newVal && !values.includes(newVal)) {
+          const updated = [...values, newVal].join(",");
+          onChange(updated);
+          setInputValue("");
+        }
+      }
+    };
+    const handleRemoveValue = (val) => {
+      const updated = values.filter((v) => v !== val).join(",");
+      onChange(updated);
+    };
+    return /* @__PURE__ */ jsx(Box, { style: { width: "100%" }, children: /* @__PURE__ */ jsxs(MultiValueWrapper, { children: [
+      values.map((val) => /* @__PURE__ */ jsx(
+        Tag,
+        {
+          icon: /* @__PURE__ */ jsx(Cross, {}),
+          onClick: () => handleRemoveValue(val),
+          children: val
+        },
+        val
+      )),
+      /* @__PURE__ */ jsx(
+        MultiValueInput,
+        {
+          value: inputValue,
+          onChange: (e) => setInputValue(e.target.value),
+          onKeyDown: handleAddValue,
+          placeholder: values.length === 0 ? "Type and press Enter" : ""
+        }
+      )
+    ] }) });
+  }
+  if (operator === "between") {
+    if (["date"].includes(t)) {
+      const dateVal1 = value ? (() => {
+        try {
+          const d = new Date(value);
+          return isNaN(d.getTime()) ? void 0 : d;
+        } catch {
+          return void 0;
+        }
+      })() : void 0;
+      const dateVal2 = valueTo ? (() => {
+        try {
+          const d = new Date(valueTo);
+          return isNaN(d.getTime()) ? void 0 : d;
+        } catch {
+          return void 0;
+        }
+      })() : void 0;
+      return /* @__PURE__ */ jsxs(BetweenWrapper, { children: [
+        /* @__PURE__ */ jsx(Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(DatePicker, { value: dateVal1, onChange: (d) => onChange(d ? d.toISOString().slice(0, 10) : ""), clearLabel: "Clear", size: "S" }) }),
+        /* @__PURE__ */ jsx(BetweenSeparator, { children: "and" }),
+        /* @__PURE__ */ jsx(Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(DatePicker, { value: dateVal2, onChange: (d) => onValueToChange?.(d ? d.toISOString().slice(0, 10) : ""), clearLabel: "Clear", size: "S" }) })
+      ] });
+    }
+    if (["integer", "float", "decimal", "biginteger"].includes(t)) {
+      const num1 = value === "" ? void 0 : (() => {
+        const n = parseFloat(value);
+        return isNaN(n) ? void 0 : n;
+      })();
+      const num2 = valueTo === "" || !valueTo ? void 0 : (() => {
+        const n = parseFloat(valueTo);
+        return isNaN(n) ? void 0 : n;
+      })();
+      return /* @__PURE__ */ jsxs(BetweenWrapper, { children: [
+        /* @__PURE__ */ jsx(Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(NumberInput, { value: num1, onValueChange: (v) => onChange(v !== void 0 ? String(v) : ""), size: "S" }) }),
+        /* @__PURE__ */ jsx(BetweenSeparator, { children: "and" }),
+        /* @__PURE__ */ jsx(Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(NumberInput, { value: num2, onValueChange: (v) => onValueToChange?.(v !== void 0 ? String(v) : ""), size: "S" }) })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(BetweenWrapper, { children: [
+      /* @__PURE__ */ jsx(Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(TextInput, { value, onChange: (e) => onChange(e.target.value), placeholder: "From", size: "S" }) }),
+      /* @__PURE__ */ jsx(BetweenSeparator, { children: "and" }),
+      /* @__PURE__ */ jsx(Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(TextInput, { value: valueTo || "", onChange: (e) => onValueToChange?.(e.target.value), placeholder: "To", size: "S" }) })
+    ] });
+  }
+  if (["date"].includes(t)) {
+    const dateVal = value ? (() => {
+      try {
+        const d = new Date(value);
+        return isNaN(d.getTime()) ? void 0 : d;
+      } catch {
+        return void 0;
+      }
+    })() : void 0;
+    return /* @__PURE__ */ jsx(Box, { style: { width: "100%", minWidth: 140 }, children: /* @__PURE__ */ jsx(
+      DatePicker,
+      {
+        value: dateVal,
+        onChange: (d) => onChange(d ? d.toISOString().slice(0, 10) : ""),
+        clearLabel: "Clear",
+        size: "S"
+      }
+    ) });
+  }
+  if (["datetime"].includes(t)) {
+    const dateVal = value ? (() => {
+      try {
+        const d = new Date(value);
+        return isNaN(d.getTime()) ? void 0 : d;
+      } catch {
+        return void 0;
+      }
+    })() : void 0;
+    return /* @__PURE__ */ jsx(Box, { style: { width: "100%", minWidth: 200 }, children: /* @__PURE__ */ jsx(
+      DateTimePicker,
+      {
+        value: dateVal ?? void 0,
+        onChange: (d) => onChange(d ? d.toISOString() : ""),
+        clearLabel: "Clear",
+        size: "S"
+      }
+    ) });
+  }
+  if (["time"].includes(t)) {
+    return /* @__PURE__ */ jsx(Box, { style: { width: "100%", minWidth: 120 }, children: /* @__PURE__ */ jsx(
+      TimePicker,
+      {
+        value: value || void 0,
+        onChange: (v) => onChange(v ?? ""),
+        size: "S"
+      }
+    ) });
+  }
+  if (["integer", "float", "decimal", "biginteger"].includes(t)) {
+    const numVal = value === "" ? void 0 : (() => {
+      const n = parseFloat(value);
+      return isNaN(n) ? void 0 : n;
+    })();
+    return /* @__PURE__ */ jsx(Box, { style: { width: "100%", minWidth: 120 }, children: /* @__PURE__ */ jsx(
+      NumberInput,
+      {
+        value: numVal,
+        onValueChange: (v) => onChange(v !== void 0 ? String(v) : ""),
+        size: "S"
+      }
+    ) });
+  }
+  if (["boolean"].includes(t)) {
+    const selVal = value === "true" ? "true" : value === "false" ? "false" : "";
+    return /* @__PURE__ */ jsx(Box, { style: { width: "100%", minWidth: 120 }, children: /* @__PURE__ */ jsxs(
+      SingleSelect,
+      {
+        value: selVal || void 0,
+        onChange: (v) => onChange(v != null ? String(v) : ""),
+        placeholder,
+        size: "S",
+        children: [
+          /* @__PURE__ */ jsx(SingleSelectOption, { value: "true", children: "true" }),
+          /* @__PURE__ */ jsx(SingleSelectOption, { value: "false", children: "false" })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(Box, { style: { width: "100%", minWidth: 120 }, children: /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      value,
+      onChange: (e) => onChange(e.target.value),
+      placeholder,
+      size: "S"
+    }
+  ) });
+}
+const ConnectorPill = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 4px 0;
+  padding: 6px 0;
 `;
 const ConnectorButton = styled.button`
-  padding: 4px 12px;
+  padding: 6px 14px;
   font-size: 12px;
   font-weight: 500;
-  border: 1px solid ${(props) => props.$active ? "#4945ff" : "rgba(128, 128, 128, 0.25)"};
-  border-radius: 4px;
-  background: ${(props) => props.$active ? "#EEF0FF" : "transparent"};
-  color: ${(props) => props.$active ? "#4945ff" : "#32324d"};
+  border: 1px solid ${(p) => p.$active ? "#4945ff" : p.theme.colors.neutral300};
+  border-radius: 999px;
+  background: ${(p) => p.$active ? "#EEF0FF" : "transparent"};
+  color: ${(p) => p.$active ? "#4945ff" : p.theme.colors.neutral700};
   cursor: pointer;
   transition: all 0.15s ease;
   &:hover {
     border-color: #4945ff;
-    background: ${(p) => p.theme.colors.neutral100};
   }
 `;
+const ActiveBadge = styled.span`
+  font-size: 12px;
+  font-weight: 500;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgba(73, 69, 255, 0.12);
+  color: #4945ff;
+  margin-left: 8px;
+`;
 const DeleteButton = styled.button`
   display: flex;
   align-items: center;
@@ -2112,34 +2527,101 @@ const InfoText = styled.div`
   margin-top: 8px;
   font-style: italic;
 `;
-const OPERATORS = [
-  { value: "eq", label: "is" },
-  { value: "ne", label: "is not" },
-  { value: "contains", label: "contains" },
-  { value: "notContains", label: "not contains" },
-  { value: "startsWith", label: "starts with" },
-  { value: "endsWith", label: "ends with" },
-  { value: "gt", label: "is greater than" },
-  { value: "lt", label: "is less than" },
-  { value: "null", label: "is null" },
-  { value: "notNull", label: "is not null" }
-];
+const ModalFooter = styled.div`
+  flex-shrink: 0;
+  padding-top: 16px;
+  border-top: 1px solid ${(p) => p.theme.colors.neutral200};
+  margin-top: 8px;
+`;
+const GroupContainer = styled.div`
+  border: 2px solid ${(p) => p.$logic === "AND" ? "#0EA5E9" : "#F97316"};
+  border-radius: 8px;
+  padding: 16px;
+  margin: ${(p) => p.$level > 0 ? "12px 0 12px 20px" : "0"};
+  background: ${(p) => p.$logic === "AND" ? "rgba(14, 165, 233, 0.03)" : "rgba(249, 115, 22, 0.03)"};
+  position: relative;
+  ${(p) => p.$level > 0 && `border-style: dashed;`}
+`;
+const GroupHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid ${(p) => p.theme.colors.neutral200};
+`;
+const LogicBadge = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: ${(p) => p.$logic === "AND" ? "#0284C7" : "#EA580C"};
+`;
+const LogicToggleButton = styled.button`
+  padding: 4px 12px;
+  border-radius: 999px;
+  border: 1px solid ${(p) => p.$logic === "AND" ? "#0EA5E9" : "#F97316"};
+  background: ${(p) => p.$active ? p.$logic === "AND" ? "#0EA5E9" : "#F97316" : "transparent"};
+  color: ${(p) => p.$active ? "white" : p.$logic === "AND" ? "#0284C7" : "#EA580C"};
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  &:hover {
+    transform: scale(1.05);
+  }
+`;
+const GroupActions = styled.div`
+  display: flex;
+  gap: 6px;
+  align-items: center;
+`;
+const SmallButton = styled.button`
+  padding: 4px 10px;
+  font-size: 11px;
+  font-weight: 500;
+  border: 1px solid ${(p) => p.theme.colors.neutral300};
+  border-radius: 4px;
+  background: ${(p) => p.theme.colors.neutral0};
+  color: ${(p) => p.theme.colors.neutral700};
+  cursor: pointer;
+  &:hover {
+    border-color: #4945ff;
+    background: rgba(73, 69, 255, 0.06);
+  }
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+const RemoveGroupButton = styled(SmallButton)`
+  color: #dc2626;
+  border-color: rgba(239, 68, 68, 0.3);
+  &:hover {
+    border-color: #dc2626;
+    background: rgba(239, 68, 68, 0.06);
+  }
+`;
 const StrapiStyleFilterModal = ({
   onClose,
   onApply,
   availableFields,
   availableRelations = [],
-  currentQuery = ""
+  currentQuery = "",
+  enableNestedGroups = false
 }) => {
   const { getRelationFields } = useRelationSchema();
   const [fieldOptions, setFieldOptions] = useState([]);
   const [rows, setRows] = useState([]);
   const [connectors, setConnectors] = useState([]);
+  const [rootGroup, setRootGroup] = useState(null);
   const buildFieldOptions = useCallback(async () => {
     const direct = availableFields.map((f) => ({
       value: f.name,
       label: f.name,
-      group: "Fields"
+      group: "Fields",
+      type: f.type
     }));
     const relationOptions = [];
     for (const rel of availableRelations) {
@@ -2151,7 +2633,8 @@ const StrapiStyleFilterModal = ({
             relationOptions.push({
               value: `${rel.name}.${f.name}`,
               label: `${rel.name} > ${f.name}`,
-              group: "Relations"
+              group: "Relations",
+              type: f.type
             });
           });
         }
@@ -2165,27 +2648,94 @@ const StrapiStyleFilterModal = ({
     buildFieldOptions();
   }, [buildFieldOptions]);
   useEffect(() => {
-    if (currentQuery) {
-      const { rows: parsedRows, connectors: parsedConnectors } = parseQueryToRows(currentQuery);
-      if (parsedRows.length > 0) {
-        setRows(parsedRows);
-        setConnectors(parsedConnectors);
-        return;
+    if (enableNestedGroups) {
+      setRootGroup({
+        id: "root",
+        logic: "AND",
+        items: [{
+          id: `row_${Date.now()}`,
+          field: "",
+          operator: "eq",
+          value: ""
+        }],
+        isGroup: true
+      });
+    } else {
+      if (currentQuery) {
+        const { rows: parsedRows, connectors: parsedConnectors } = parseQueryToRows(currentQuery);
+        if (parsedRows.length > 0) {
+          setRows(parsedRows);
+          setConnectors(parsedConnectors);
+          return;
+        }
       }
+      setRows([{
+        id: `row_${Date.now()}`,
+        field: "",
+        operator: "eq",
+        value: ""
+      }]);
+      setConnectors([]);
     }
-    setRows([{
-      id: `row_${Date.now()}`,
-      field: "",
-      operator: "eq",
-      value: ""
-    }]);
-    setConnectors([]);
-  }, [currentQuery]);
-  const relationsInUse = new Set(
+  }, [currentQuery, enableNestedGroups]);
+  useEffect(() => {
+    if (fieldOptions.length === 0) return;
+    if (!enableNestedGroups) {
+      setRows((prev) => prev.map((r) => {
+        if (!r.field || r.fieldType) return r;
+        const opt = fieldOptions.find((f) => f.value === r.field);
+        return opt?.type ? { ...r, fieldType: opt.type } : r;
+      }));
+    } else if (rootGroup) {
+      const enrichGroup = (group) => ({
+        ...group,
+        items: group.items.map((item) => {
+          if ("isGroup" in item && item.isGroup) {
+            return enrichGroup(item);
+          }
+          const row = item;
+          if (!row.field || row.fieldType) return row;
+          const opt = fieldOptions.find((f) => f.value === row.field);
+          return opt?.type ? { ...row, fieldType: opt.type } : row;
+        })
+      });
+      setRootGroup((prev) => prev ? enrichGroup(prev) : prev);
+    }
+  }, [fieldOptions, enableNestedGroups]);
+  const relationsInUse = enableNestedGroups && rootGroup ? (() => {
+    const relations = /* @__PURE__ */ new Set();
+    const extract = (group) => {
+      group.items.forEach((item) => {
+        if ("isGroup" in item && item.isGroup) {
+          extract(item);
+        } else {
+          const row = item;
+          if (row.field?.includes(".")) {
+            relations.add(row.field.split(".")[0]);
+          }
+        }
+      });
+    };
+    extract(rootGroup);
+    return relations;
+  })() : new Set(
     rows.map((r) => r.field.includes(".") ? r.field.split(".")[0] : null).filter(Boolean)
   );
   const updateRow = (index2, updates) => {
-    setRows((prev) => prev.map((r, i) => i === index2 ? { ...r, ...updates } : r));
+    setRows((prev) => prev.map((r, i) => {
+      if (i !== index2) return r;
+      const merged = { ...r, ...updates };
+      if ("field" in updates && updates.field !== void 0) {
+        const opt = fieldOptions.find((f) => f.value === updates.field);
+        merged.fieldType = opt?.type;
+        const ops = getOperatorsForType(opt?.type || "string");
+        const firstOp = ops[0]?.value ?? "eq";
+        if (!ops.some((o) => o.value === merged.operator)) {
+          merged.operator = firstOp;
+        }
+      }
+      return merged;
+    }));
   };
   const updateConnector = (index2, logic) => {
     setConnectors((prev) => {
@@ -2211,8 +2761,153 @@ const StrapiStyleFilterModal = ({
       return prev.filter((_, i) => i !== connectorIndex);
     });
   };
+  const updateGroupLogic = (groupId, logic) => {
+    if (!rootGroup) return;
+    const update = (group) => {
+      if (group.id === groupId) {
+        return { ...group, logic };
+      }
+      return {
+        ...group,
+        items: group.items.map(
+          (item) => "isGroup" in item && item.isGroup ? update(item) : item
+        )
+      };
+    };
+    setRootGroup(update(rootGroup));
+  };
+  const updateRowInGroup = (groupId, rowId, updates) => {
+    if (!rootGroup) return;
+    const update = (group) => {
+      if (group.id === groupId) {
+        return {
+          ...group,
+          items: group.items.map((item) => {
+            if (!("isGroup" in item) || !item.isGroup) {
+              const row = item;
+              if (row.id === rowId) {
+                const merged = { ...row, ...updates };
+                if ("field" in updates && updates.field !== void 0) {
+                  const opt = fieldOptions.find((f) => f.value === updates.field);
+                  merged.fieldType = opt?.type;
+                  const ops = getOperatorsForType(opt?.type || "string");
+                  const firstOp = ops[0]?.value ?? "eq";
+                  if (!ops.some((o) => o.value === merged.operator)) {
+                    merged.operator = firstOp;
+                  }
+                }
+                return merged;
+              }
+            }
+            return item;
+          })
+        };
+      }
+      return {
+        ...group,
+        items: group.items.map(
+          (item) => "isGroup" in item && item.isGroup ? update(item) : item
+        )
+      };
+    };
+    setRootGroup(update(rootGroup));
+  };
+  const addRowToGroup = (groupId) => {
+    if (!rootGroup) return;
+    const newRow = {
+      id: `row_${Date.now()}`,
+      field: "",
+      operator: "eq",
+      value: ""
+    };
+    const update = (group) => {
+      if (group.id === groupId) {
+        return { ...group, items: [...group.items, newRow] };
+      }
+      return {
+        ...group,
+        items: group.items.map(
+          (item) => "isGroup" in item && item.isGroup ? update(item) : item
+        )
+      };
+    };
+    setRootGroup(update(rootGroup));
+  };
+  const removeRowFromGroup = (groupId, rowId) => {
+    if (!rootGroup) return;
+    const update = (group) => {
+      if (group.id === groupId) {
+        return {
+          ...group,
+          items: group.items.filter((item) => {
+            if ("isGroup" in item && item.isGroup) return true;
+            return item.id !== rowId;
+          })
+        };
+      }
+      return {
+        ...group,
+        items: group.items.map(
+          (item) => "isGroup" in item && item.isGroup ? update(item) : item
+        )
+      };
+    };
+    setRootGroup(update(rootGroup));
+  };
+  const addNestedGroup = (parentGroupId) => {
+    if (!rootGroup) return;
+    const newGroup = {
+      id: `group_${Date.now()}`,
+      logic: "AND",
+      items: [{
+        id: `row_${Date.now()}`,
+        field: "",
+        operator: "eq",
+        value: ""
+      }],
+      isGroup: true
+    };
+    const update = (group) => {
+      if (group.id === parentGroupId) {
+        return { ...group, items: [...group.items, newGroup] };
+      }
+      return {
+        ...group,
+        items: group.items.map(
+          (item) => "isGroup" in item && item.isGroup ? update(item) : item
+        )
+      };
+    };
+    setRootGroup(update(rootGroup));
+  };
+  const removeGroup = (groupId) => {
+    if (!rootGroup || groupId === "root") return;
+    const update = (group) => ({
+      ...group,
+      items: group.items.filter((item) => {
+        if ("isGroup" in item && item.isGroup) {
+          return item.id !== groupId;
+        }
+        return true;
+      }).map(
+        (item) => "isGroup" in item && item.isGroup ? update(item) : item
+      )
+    });
+    setRootGroup(update(rootGroup));
+  };
   const handleApply = () => {
-    const validRows = rows.filter((r) => r.field && (["null", "notNull"].includes(r.operator) || r.value.trim()));
+    if (enableNestedGroups && rootGroup) {
+      const queryString2 = generateFromGroup(rootGroup);
+      onApply(queryString2);
+      onClose();
+      return;
+    }
+    const validRows = rows.filter((r) => {
+      if (!r.field) return false;
+      if (["null", "notNull"].includes(r.operator)) return true;
+      if (r.operator === "between") return r.value.trim() && r.valueTo?.trim();
+      return r.value.trim();
+    });
     if (validRows.length === 0) {
       onApply("");
       onClose();
@@ -2223,100 +2918,322 @@ const StrapiStyleFilterModal = ({
     onClose();
   };
   const handleClearAll = () => {
-    setRows([{
-      id: `row_${Date.now()}`,
-      field: "",
-      operator: "eq",
-      value: ""
-    }]);
-    setConnectors([]);
+    if (enableNestedGroups) {
+      setRootGroup({
+        id: "root",
+        logic: "AND",
+        items: [{
+          id: `row_${Date.now()}`,
+          field: "",
+          operator: "eq",
+          value: ""
+        }],
+        isGroup: true
+      });
+    } else {
+      setRows([{
+        id: `row_${Date.now()}`,
+        field: "",
+        operator: "eq",
+        value: ""
+      }]);
+      setConnectors([]);
+    }
+  };
+  const countActiveFilters = (group) => {
+    let count = 0;
+    group.items.forEach((item) => {
+      if ("isGroup" in item && item.isGroup) {
+        count += countActiveFilters(item);
+      } else {
+        const row = item;
+        if (row.field && (["null", "notNull"].includes(row.operator) || row.value && row.value.trim())) {
+          count++;
+        }
+      }
+    });
+    return count;
+  };
+  const activeCount = enableNestedGroups && rootGroup ? countActiveFilters(rootGroup) : rows.filter((r) => r.field && (["null", "notNull"].includes(r.operator) || r.value && r.value.trim())).length;
+  const renderGroup = (group, level = 0) => {
+    return /* @__PURE__ */ jsxs(GroupContainer, { $logic: group.logic, $level: level, children: [
+      /* @__PURE__ */ jsxs(GroupHeader, { children: [
+        /* @__PURE__ */ jsxs(LogicBadge, { $logic: group.logic, children: [
+          /* @__PURE__ */ jsx(
+            LogicToggleButton,
+            {
+              $active: group.logic === "AND",
+              $logic: "AND",
+              onClick: () => updateGroupLogic(group.id, "AND"),
+              type: "button",
+              children: "AND"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            LogicToggleButton,
+            {
+              $active: group.logic === "OR",
+              $logic: "OR",
+              onClick: () => updateGroupLogic(group.id, "OR"),
+              type: "button",
+              children: "OR"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(GroupActions, { children: [
+          /* @__PURE__ */ jsx(SmallButton, { onClick: () => addRowToGroup(group.id), type: "button", children: "+ Row" }),
+          /* @__PURE__ */ jsx(SmallButton, { onClick: () => addNestedGroup(group.id), type: "button", children: "+ Group" }),
+          group.id !== "root" && /* @__PURE__ */ jsx(RemoveGroupButton, { onClick: () => removeGroup(group.id), type: "button", children: "Remove" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: group.items.map((item) => {
+        if ("isGroup" in item && item.isGroup) {
+          return renderGroup(item, level + 1);
+        }
+        const row = item;
+        return /* @__PURE__ */ jsxs(FilterRowCard, { children: [
+          /* @__PURE__ */ jsxs(FilterRowTop, { children: [
+            /* @__PURE__ */ jsx(Box, { style: { flex: "1 1 200px", minWidth: "140px" }, children: /* @__PURE__ */ jsx(
+              CustomSelect,
+              {
+                value: row.field,
+                onChange: (v) => updateRowInGroup(group.id, row.id, { field: v }),
+                options: [
+                  { value: "", label: "Select field..." },
+                  ...fieldOptions
+                ],
+                placeholder: "Select field",
+                searchable: true
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Box, { style: { flex: "1 1 140px", minWidth: "120px" }, children: /* @__PURE__ */ jsx(
+              CustomSelect,
+              {
+                value: row.operator,
+                onChange: (v) => updateRowInGroup(group.id, row.id, { operator: v }),
+                options: getOperatorsForType(row.fieldType).map((o) => ({ value: o.value, label: o.label })),
+                placeholder: "Operator",
+                searchable: false
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(NegateCheckbox, { title: "Negate this condition (NOT)", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: row.negate || false,
+                  onChange: (e) => updateRowInGroup(group.id, row.id, { negate: e.target.checked })
+                }
+              ),
+              "NOT"
+            ] }),
+            /* @__PURE__ */ jsx(
+              DeleteButton,
+              {
+                type: "button",
+                onClick: () => removeRowFromGroup(group.id, row.id),
+                title: "Remove filter",
+                children: /* @__PURE__ */ jsx(Cross, {})
+              }
+            )
+          ] }),
+          !["null", "notNull"].includes(row.operator) && /* @__PURE__ */ jsxs(FilterRowValue, { children: [
+            /* @__PURE__ */ jsx(ValueLabel, { children: ["in", "notIn"].includes(row.operator) ? "Enter values (press Enter after each)" : ["between"].includes(row.operator) ? "Enter range" : "Enter value" }),
+            /* @__PURE__ */ jsx(
+              SmartValueInput,
+              {
+                fieldType: row.fieldType,
+                operator: row.operator,
+                value: row.value,
+                valueTo: row.valueTo,
+                onChange: (v) => updateRowInGroup(group.id, row.id, { value: v }),
+                onValueToChange: (v) => updateRowInGroup(group.id, row.id, { valueTo: v }),
+                placeholder: "Value"
+              }
+            )
+          ] })
+        ] }, row.id);
+      }) })
+    ] }, group.id);
   };
-  const operatorOptions = OPERATORS.map((o) => ({ value: o.value, label: o.label }));
   return /* @__PURE__ */ jsx(ModalOverlay, { onClick: onClose, children: /* @__PURE__ */ jsxs(ModalContent, { padding: 6, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 4, children: [
-      /* @__PURE__ */ jsx(Typography, { as: "h2", variant: "beta", children: "Filters" }),
+    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 4, style: { flexShrink: 0 }, children: [
+      /* @__PURE__ */ jsxs(Flex, { alignItems: "center", children: [
+        /* @__PURE__ */ jsx(Typography, { as: "h2", variant: "beta", children: "Advanced Filter" }),
+        activeCount > 0 && /* @__PURE__ */ jsx(ActiveBadge, { children: activeCount })
+      ] }),
       /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "ghost", type: "button", children: /* @__PURE__ */ jsx(Cross, {}) })
     ] }),
-    /* @__PURE__ */ jsx(RowWrapper, { children: rows.map((row, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-      i > 0 && /* @__PURE__ */ jsxs(ConnectorRow, { children: [
-        /* @__PURE__ */ jsx(
-          ConnectorButton,
-          {
-            type: "button",
-            $active: connectors[i - 1]?.logic === "AND",
-            onClick: () => updateConnector(i - 1, "AND"),
-            children: "and"
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { style: { margin: "0 8px", color: "var(--colors-neutral500, #8e8ea9)" }, children: "|" }),
-        /* @__PURE__ */ jsx(
-          ConnectorButton,
-          {
-            type: "button",
-            $active: connectors[i - 1]?.logic === "OR",
-            onClick: () => updateConnector(i - 1, "OR"),
-            children: "or"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs(FilterRowContainer, { children: [
-        /* @__PURE__ */ jsx(Box, { style: { flex: "1 1 140px", minWidth: "120px" }, children: /* @__PURE__ */ jsx(
-          CustomSelect,
-          {
-            value: row.field,
-            onChange: (v) => updateRow(i, { field: v }),
-            options: [
-              { value: "", label: "Select field..." },
-              ...fieldOptions
-            ],
-            placeholder: "Select field",
-            searchable: true
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Box, { style: { flex: "1 1 130px", minWidth: "100px" }, children: /* @__PURE__ */ jsx(
-          CustomSelect,
-          {
-            value: row.operator,
-            onChange: (v) => updateRow(i, { operator: v }),
-            options: [
-              { value: "eq", label: "is" },
-              ...operatorOptions.filter((o) => o.value !== "eq")
-            ],
-            placeholder: "Operator",
-            searchable: false
-          }
-        ) }),
-        !["null", "notNull"].includes(row.operator) && /* @__PURE__ */ jsx(
-          ValueInput,
-          {
-            type: "text",
-            value: row.value,
-            onChange: (e) => updateRow(i, { value: e.target.value }),
-            placeholder: "Value"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          DeleteButton,
-          {
-            type: "button",
-            onClick: () => removeRow(i),
-            title: "Remove filter",
-            children: /* @__PURE__ */ jsx(Cross, {})
-          }
-        )
+    /* @__PURE__ */ jsx(ModalScrollArea, { children: enableNestedGroups && rootGroup ? (
+      // Nested Groups Mode
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderGroup(rootGroup, 0),
+        relationsInUse.size > 0 && /* @__PURE__ */ jsxs(InfoText, { children: [
+          Array.from(relationsInUse).join(", "),
+          " will be loaded automatically"
+        ] })
       ] })
-    ] }, row.id)) }),
-    /* @__PURE__ */ jsx(AddButton, { type: "button", onClick: addRow, children: "+ Add filter" }),
-    relationsInUse.size > 0 && /* @__PURE__ */ jsxs(InfoText, { children: [
-      Array.from(relationsInUse).join(", "),
-      " will be loaded automatically"
-    ] }),
-    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", marginTop: 5, gap: 2, children: [
+    ) : (
+      // Flat Mode
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(RowWrapper, { children: rows.map((row, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          i > 0 && /* @__PURE__ */ jsxs(ConnectorPill, { children: [
+            /* @__PURE__ */ jsx(
+              ConnectorButton,
+              {
+                type: "button",
+                $active: connectors[i - 1]?.logic === "AND",
+                onClick: () => updateConnector(i - 1, "AND"),
+                children: "and"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { style: { margin: "0 8px", color: "var(--colors-neutral500, #8e8ea9)" }, children: "|" }),
+            /* @__PURE__ */ jsx(
+              ConnectorButton,
+              {
+                type: "button",
+                $active: connectors[i - 1]?.logic === "OR",
+                onClick: () => updateConnector(i - 1, "OR"),
+                children: "or"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(FilterRowCard, { children: [
+            /* @__PURE__ */ jsxs(FilterRowTop, { children: [
+              /* @__PURE__ */ jsx(Box, { style: { flex: "1 1 200px", minWidth: "140px" }, children: /* @__PURE__ */ jsx(
+                CustomSelect,
+                {
+                  value: row.field,
+                  onChange: (v) => updateRow(i, { field: v }),
+                  options: [
+                    { value: "", label: "Select field..." },
+                    ...fieldOptions
+                  ],
+                  placeholder: "Select field",
+                  searchable: true
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Box, { style: { flex: "1 1 140px", minWidth: "120px" }, children: /* @__PURE__ */ jsx(
+                CustomSelect,
+                {
+                  value: row.operator,
+                  onChange: (v) => updateRow(i, { operator: v }),
+                  options: getOperatorsForType(row.fieldType).map((o) => ({ value: o.value, label: o.label })),
+                  placeholder: "Operator",
+                  searchable: false
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(NegateCheckbox, { title: "Negate this condition (NOT)", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: row.negate || false,
+                    onChange: (e) => updateRow(i, { negate: e.target.checked })
+                  }
+                ),
+                "NOT"
+              ] }),
+              /* @__PURE__ */ jsx(
+                DeleteButton,
+                {
+                  type: "button",
+                  onClick: () => removeRow(i),
+                  title: "Remove filter",
+                  children: /* @__PURE__ */ jsx(Cross, {})
+                }
+              )
+            ] }),
+            !["null", "notNull"].includes(row.operator) && /* @__PURE__ */ jsxs(FilterRowValue, { children: [
+              /* @__PURE__ */ jsx(ValueLabel, { children: ["in", "notIn"].includes(row.operator) ? "Enter values (press Enter after each)" : ["between"].includes(row.operator) ? "Enter range" : "Enter value" }),
+              /* @__PURE__ */ jsx(
+                SmartValueInput,
+                {
+                  fieldType: row.fieldType,
+                  operator: row.operator,
+                  value: row.value,
+                  valueTo: row.valueTo,
+                  onChange: (v) => updateRow(i, { value: v }),
+                  onValueToChange: (v) => updateRow(i, { valueTo: v }),
+                  placeholder: "Value"
+                }
+              )
+            ] })
+          ] })
+        ] }, row.id)) }),
+        relationsInUse.size > 0 && /* @__PURE__ */ jsxs(InfoText, { children: [
+          Array.from(relationsInUse).join(", "),
+          " will be loaded automatically"
+        ] })
+      ] })
+    ) }),
+    /* @__PURE__ */ jsx(ModalFooter, { children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", gap: 2, children: [
       /* @__PURE__ */ jsx(Button, { onClick: handleClearAll, variant: "tertiary", children: "Clear All" }),
-      /* @__PURE__ */ jsx(Button, { onClick: handleApply, variant: "default", children: "Apply Filters" })
-    ] })
+      !enableNestedGroups && /* @__PURE__ */ jsx(AddButton, { type: "button", onClick: addRow, children: "+ Add Filter" }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleApply, variant: "default", children: "Apply" })
+    ] }) })
   ] }) });
 };
+const FEATURES = {
+  // Free tier features
+  basicBookmarks: { tier: "free", limit: 10 },
+  basicFilters: { tier: "free" },
+  // Premium tier features
+  extendedBookmarks: { tier: "premium", limit: 50 },
+  queryHistory: { tier: "premium" },
+  exportBookmarks: { tier: "premium" },
+  sharedBookmarks: { tier: "premium" },
+  // Advanced tier features
+  unlimitedBookmarks: { tier: "advanced", limit: -1 },
+  advancedFilters: { tier: "advanced" },
+  subGroups: { tier: "advanced" },
+  bulkOperations: { tier: "advanced" },
+  analytics: { tier: "advanced" },
+  customIntegrations: { tier: "advanced" }
+};
+const useLicenseInfo = () => {
+  const { get } = useFetchClient();
+  const [limits, setLimits] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    const fetchLimits = async () => {
+      try {
+        console.log("[useLicenseInfo] Fetching license limits...");
+        const response = await get("/magic-mark/license/limits");
+        console.log("[useLicenseInfo] Raw API response:", response);
+        console.log("[useLicenseInfo] Response data:", response.data);
+        if (response.data?.success) {
+          console.log("[useLicenseInfo] Setting limits:", response.data.data);
+          setLimits(response.data.data);
+        } else {
+          console.warn("[useLicenseInfo] API returned success=false or missing data");
+        }
+      } catch (error) {
+        console.error("[useLicenseInfo] Error fetching license limits:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchLimits();
+  }, []);
+  const tier = limits?.tier || "free";
+  const isPremium = tier === "premium" || tier === "advanced";
+  const isAdvanced = tier === "advanced";
+  console.log("[useLicenseInfo] Computed values:", { tier, isPremium, isAdvanced, limits });
+  return {
+    isLoading,
+    limits,
+    tier,
+    isFree: tier === "free",
+    isPremium,
+    isAdvanced,
+    canUseFeature: (feature) => {
+      const featureConfig = FEATURES[feature];
+      const tierOrder = { free: 0, premium: 1, advanced: 2 };
+      return tierOrder[tier] >= tierOrder[featureConfig.tier];
+    }
+  };
+};
 const FilterButtonGroup = styled.div`
   display: flex;
   align-items: center;
@@ -2394,6 +3311,7 @@ const AdvancedFilterButton = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const { get } = useFetchClient();
+  const { isPremium, isAdvanced } = useLicenseInfo();
   const [availableFields, setAvailableFields] = useState([]);
   const [availableRelations, setAvailableRelations] = useState([]);
   const [hasActiveFilters, setHasActiveFilters] = useState(false);
@@ -2538,7 +3456,7 @@ const AdvancedFilterButton = () => {
         title: "Open advanced filter builder",
         children: [
           /* @__PURE__ */ jsx(Filter, {}),
-          "Filters",
+          "Advanced Filter",
           hasActiveFilters && /* @__PURE__ */ jsx(ActiveDot, {})
         ]
       }
@@ -2558,7 +3476,8 @@ const AdvancedFilterButton = () => {
         onApply: handleApplyFilters,
         availableFields,
         availableRelations,
-        currentQuery: getCurrentFilters()
+        currentQuery: getCurrentFilters(),
+        enableNestedGroups: isPremium || isAdvanced
       }
     )
   ] });
@@ -2581,7 +3500,7 @@ const index = {
         id: `${pluginId}.Admin.MainMenu.PluginName`,
         defaultMessage: name
       },
-      Component: () => import("./App-CozIqdTt.mjs"),
+      Component: () => import("./App-D_Vllkur.mjs"),
       permissions: []
     });
     app.createSettingSection(
@@ -2602,7 +3521,7 @@ const index = {
           to: `${pluginId}/upgrade`,
           Component: () => import(
             /* webpackChunkName: "magic-mark-upgrade" */
-            "./UpgradePage-9godO_5E.mjs"
+            "./UpgradePage-DuyIskve.mjs"
           ),
           permissions: []
         },
@@ -2690,5 +3609,6 @@ export {
   CreateEditModal as C,
   getIconById as g,
   index as i,
-  pluginId as p
+  pluginId as p,
+  useLicenseInfo as u
 };