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/pageEditor/BulkSelectionPanel.tsx

@@ -1,12 +1,16 @@
-import React from 'react';
-import { Group, TextInput, Button, Text } from '@mantine/core';
+import { useState, useEffect } from 'react';
+import classes from './bulkSelectionPanel/BulkSelectionPanel.module.css';
+import { parseSelectionWithDiagnostics } from '../../utils/bulkselection/parseSelection';
+import PageSelectionInput from './bulkSelectionPanel/PageSelectionInput';
+import SelectedPagesDisplay from './bulkSelectionPanel/SelectedPagesDisplay';
+import AdvancedSelectionPanel from './bulkSelectionPanel/AdvancedSelectionPanel';
 
 interface BulkSelectionPanelProps {
   csvInput: string;
   setCsvInput: (value: string) => void;
   selectedPageIds: string[];
   displayDocument?: { pages: { id: string; pageNumber: number }[] };
-  onUpdatePagesFromCSV: () => void;
+  onUpdatePagesFromCSV: (override?: string) => void;
 }
 
 const BulkSelectionPanel = ({
@@ -16,31 +20,56 @@ const BulkSelectionPanel = ({
   displayDocument,
   onUpdatePagesFromCSV,
 }: BulkSelectionPanelProps) => {
+  const [syntaxError, setSyntaxError] = useState<string | null>(null);
+  const [advancedOpened, setAdvancedOpened] = useState<boolean>(false);
+  const maxPages = displayDocument?.pages?.length ?? 0;
+
+
+  // Validate input syntax and show lightweight feedback
+  useEffect(() => {
+    const text = (csvInput || '').trim();
+    if (!text) {
+      setSyntaxError(null);
+      return;
+    }
+    try {
+      const { warning } = parseSelectionWithDiagnostics(text, maxPages);
+      setSyntaxError(warning ? 'There is a syntax issue. See Page Selection tips for help.' : null);
+    } catch {
+      setSyntaxError('There is a syntax issue. See Page Selection tips for help.');
+    }
+  }, [csvInput, maxPages]);
+
+  const handleClear = () => {
+    setCsvInput('');
+    onUpdatePagesFromCSV('');
+  };
+
   return (
-    <>
-      <Group>
-        <TextInput
-          value={csvInput}
-          onChange={(e) => setCsvInput(e.target.value)}
-          placeholder="1,3,5-10"
-          label="Page Selection"
-          onBlur={onUpdatePagesFromCSV}
-          onKeyDown={(e) => e.key === 'Enter' && onUpdatePagesFromCSV()}
-          style={{ flex: 1 }}
-        />
-        <Button onClick={onUpdatePagesFromCSV} mt="xl">
-          Apply
-        </Button>
-      </Group>
-      {selectedPageIds.length > 0 && (
-        <Text size="sm" c="dimmed" mt="sm">
-          Selected: {selectedPageIds.length} pages ({displayDocument ? selectedPageIds.map(id => {
-            const page = displayDocument.pages.find(p => p.id === id);
-            return page?.pageNumber || 0;
-          }).filter(n => n > 0).join(', ') : ''})
-        </Text>
-      )}
-      </>
+    <div className={classes.panelContainer}>
+      <PageSelectionInput
+        csvInput={csvInput}
+        setCsvInput={setCsvInput}
+        onUpdatePagesFromCSV={onUpdatePagesFromCSV}
+        onClear={handleClear}
+        advancedOpened={advancedOpened}
+        onToggleAdvanced={setAdvancedOpened}
+      />
+
+      <SelectedPagesDisplay
+        selectedPageIds={selectedPageIds}
+        displayDocument={displayDocument}
+        syntaxError={syntaxError}
+      />
+
+      <AdvancedSelectionPanel
+        csvInput={csvInput}
+        setCsvInput={setCsvInput}
+        onUpdatePagesFromCSV={onUpdatePagesFromCSV}
+        maxPages={maxPages}
+        advancedOpened={advancedOpened}
+      />
+    </div>
   );
 };