Feature/v2/extract pages (#4828)

# Description of Changes

- Add the extract pages tool
- Componentize our bulk selection logic and warning messaages

---

## 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)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### 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/core/components/shared/PageSelectionSyntaxHint.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Text } from '@mantine/core';
+import classes from '@app/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css';
+import { parseSelectionWithDiagnostics } from '@app/utils/bulkselection/parseSelection';
+
+interface PageSelectionSyntaxHintProps {
+  input: string;
+  /** Optional known page count; if not provided, a large max is used for syntax-only checks */
+  maxPages?: number;
+  /** panel = full bulk panel style, compact = inline tool style */
+  variant?: 'panel' | 'compact';
+}
+
+const FALLBACK_MAX_PAGES = 100000; // large upper bound for syntax validation without a document
+
+const PageSelectionSyntaxHint = ({ input, maxPages, variant = 'panel' }: PageSelectionSyntaxHintProps) => {
+  const [syntaxError, setSyntaxError] = useState<string | null>(null);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    const text = (input || '').trim();
+    if (!text) {
+      setSyntaxError(null);
+      return;
+    }
+
+    try {
+      const { warning } = parseSelectionWithDiagnostics(text, maxPages && maxPages > 0 ? maxPages : FALLBACK_MAX_PAGES);
+      setSyntaxError(warning ? t('bulkSelection.syntaxError', 'There is a syntax issue. See Page Selection tips for help.') : null);
+    } catch {
+      setSyntaxError(t('bulkSelection.syntaxError', 'There is a syntax issue. See Page Selection tips for help.'));
+    }
+  }, [input, maxPages]);
+
+  if (!syntaxError) return null;
+
+  return (
+    <div className={variant === 'panel' ? classes.selectedList : classes.errorCompact}>
+      <Text size="xs" className={variant === 'panel' ? classes.errorText : classes.errorTextClamp}>{syntaxError}</Text>
+    </div>
+  );
+};
+
+export default PageSelectionSyntaxHint;
+
+