change bulk selection panel to allow more versatile input (#4394)

# Description of Changes

- Add features to BulkSelectionPanel to allow more versatility when
selecting pages
- Make changes to Tooltip to: Remove non-existent props delayAppearance,
fixed defaults no hardcoded maxWidth, and documented new props
(closeOnOutside, containerStyle, minWidth). Clarify pinned vs. unpinned
outside-click logic, hover/focus interactions, and event/ref
preservation.
- Made top controls show full text always rather than dynamically
display the text only for the selected items
---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

frontend/src/components/tooltips/usePageSelectionTips.ts

@@ -0,0 +1,44 @@
+import { useTranslation } from 'react-i18next';
+import { TooltipContent } from '../../types/tips';
+
+export const usePageSelectionTips = (): TooltipContent => {
+  const { t } = useTranslation();
+
+  return {
+    header: {
+      title: t('bulkSelection.header.title', 'Page Selection Guide'),
+    },
+    tips: [
+      {
+        title: t('bulkSelection.syntax.title', 'Syntax Basics'),
+        description: t('bulkSelection.syntax.text', 'Use numbers, ranges, keywords, and progressions (n starts at 0). Parentheses are supported.'),
+        bullets: [
+          t('bulkSelection.syntax.bullets.numbers', 'Numbers/ranges: 5, 10-20'),
+          t('bulkSelection.syntax.bullets.keywords', 'Keywords: odd, even'),
+          t('bulkSelection.syntax.bullets.progressions', 'Progressions: 3n, 4n+1'),
+        ]
+      },
+      {
+        title: t('bulkSelection.operators.title', 'Operators'),
+        description: t('bulkSelection.operators.text', 'AND has higher precedence than comma. NOT applies within the document range.'),
+        bullets: [
+          t('bulkSelection.operators.and', 'AND: & or "and" — require both conditions (e.g., 1-50 & even)'),
+          t('bulkSelection.operators.comma', 'Comma: , or | — combine selections (e.g., 1-10, 20)'),
+          t('bulkSelection.operators.not', 'NOT: ! or "not" — exclude pages (e.g., 3n & not 30)'),
+        ]
+      },
+      {
+        title: t('bulkSelection.examples.title', 'Examples'),
+        bullets: [
+          `${t('bulkSelection.examples.first50', 'First 50')}: 1-50`,
+          `${t('bulkSelection.examples.last50', 'Last 50')}: 451-500`,
+          `${t('bulkSelection.examples.every3rd', 'Every 3rd')}: 3n`,
+          `${t('bulkSelection.examples.oddWithinExcluding', 'Odd within 1-20 excluding 5-7')}: 1-20 & odd & !5-7`,
+          `${t('bulkSelection.examples.combineSets', 'Combine sets')}: 1-50, 451-500`,
+        ]
+      }
+    ]
+  };
+};
+
+