Merge branch 'V2' into feature/v2/filehistory

integrated auto split, with flattened split tool

---------

Co-authored-by: Connor Yoh <connor@stirlingpdf.com>

frontend/public/locales/en-GB/translation.json

@@ -683,7 +683,116 @@
       "8": "Document #6: Page 10"
     },
     "splitPages": "Enter pages to split on:",
-    "submit": "Split"
+    "submit": "Split",
+    "steps": {
+      "chooseMethod": "Choose Method",
+      "settings": "Settings"
+    },
+    "settings": {
+      "selectMethodFirst": "Please select a split method first"
+    },
+    "error": {
+      "failed": "An error occurred while splitting the PDF."
+    },
+    "method": {
+      "label": "Choose split method",
+      "placeholder": "Select how to split the PDF"
+    },
+    "methods": {
+      "prefix": {
+        "splitAt": "Split at",
+        "splitBy": "Split by"
+      },
+      "byPages": {
+        "name": "Page Numbers",
+        "desc": "Extract specific pages (1,3,5-10)",
+        "tooltip": "Enter page numbers separated by commas or ranges with hyphens"
+      },
+      "bySections": {
+        "name": "Sections",
+        "desc": "Divide pages into grid sections",
+        "tooltip": "Split each page into horizontal and vertical sections"
+      },
+      "bySize": {
+        "name": "File Size",
+        "desc": "Limit maximum file size",
+        "tooltip": "Specify maximum file size (e.g. 10MB, 500KB)"
+      },
+      "byPageCount": {
+        "name": "Page Count",
+        "desc": "Fixed pages per file",
+        "tooltip": "Enter the number of pages for each split file"
+      },
+      "byDocCount": {
+        "name": "Document Count",
+        "desc": "Create specific number of files",
+        "tooltip": "Enter how many files you want to create"
+      },
+      "byChapters": {
+        "name": "Chapters",
+        "desc": "Split at bookmark boundaries",
+        "tooltip": "Uses PDF bookmarks to determine split points"
+      },
+      "byPageDivider": {
+        "name": "Page Divider",
+        "desc": "Auto-split with divider sheets",
+        "tooltip": "Use QR code divider sheets between documents when scanning"
+      }
+    },
+    "value": {
+      "fileSize": {
+        "label": "File Size",
+        "placeholder": "e.g. 10MB, 500KB"
+      },
+      "pageCount": {
+        "label": "Pages per File",
+        "placeholder": "e.g. 5, 10"
+      },
+      "docCount": {
+        "label": "Number of Files",
+        "placeholder": "e.g. 3, 5"
+      }
+    },
+    "tooltip": {
+      "header": {
+        "title": "Split Methods Overview"
+      },
+      "byPages": {
+        "title": "Split at Page Numbers",
+        "text": "Split your PDF at specific page numbers. Using 'n' splits after page n. Using 'n-m' splits before page n and after page m.",
+        "bullet1": "Single split points: 3,7 (splits after pages 3 and 7)",
+        "bullet2": "Range split points: 3-8 (splits before page 3 and after page 8)",
+        "bullet3": "Mixed: 2,5-10,15 (splits after page 2, before page 5, after page 10, and after page 15)"
+      },
+      "bySections": {
+        "title": "Split by Grid Sections",
+        "text": "Divide each page into a grid of sections. Useful for splitting documents with multiple columns or extracting specific areas.",
+        "bullet1": "Horizontal: Number of rows to create",
+        "bullet2": "Vertical: Number of columns to create",
+        "bullet3": "Merge: Combine all sections into one PDF"
+      },
+      "bySize": {
+        "title": "Split by File Size",
+        "text": "Create multiple PDFs that don't exceed a specified file size. Ideal for file size limitations or email attachments.",
+        "bullet1": "Use MB for larger files (e.g., 10MB)",
+        "bullet2": "Use KB for smaller files (e.g., 500KB)",
+        "bullet3": "System will split at page boundaries"
+      },
+      "byCount": {
+        "title": "Split by Count",
+        "text": "Create multiple PDFs with a specific number of pages or documents each.",
+        "bullet1": "Page Count: Fixed number of pages per file",
+        "bullet2": "Document Count: Fixed number of output files",
+        "bullet3": "Useful for batch processing workflows"
+      },
+      "byChapters": {
+        "title": "Split by Chapters",
+        "text": "Use PDF bookmarks to automatically split at chapter boundaries. Requires PDFs with bookmark structure.",
+        "bullet1": "Bookmark Level: Which level to split on (1=top level)",
+        "bullet2": "Include Metadata: Preserve document properties",
+        "bullet3": "Allow Duplicates: Handle repeated bookmark names"
+      }
+    }
   },
   "rotate": {
     "tags": "server side",

frontend/src/components/shared/CardSelector.tsx

@@ -0,0 +1,99 @@
+import { Stack, Card, Text, Flex } from '@mantine/core';
+import { Tooltip } from './Tooltip';
+import { useTranslation } from 'react-i18next';
+
+export interface CardOption<T = string> {
+  value: T;
+  prefixKey: string;
+  nameKey: string;
+  tooltipKey?: string;
+  tooltipContent?: any[];
+}
+
+export interface CardSelectorProps<T, K extends CardOption<T>> {
+  options: K[];
+  onSelect: (value: T) => void;
+  disabled?: boolean;
+  getTooltipContent?: (option: K) => any[];
+}
+
+const CardSelector = <T, K extends CardOption<T>>({
+  options,
+  onSelect,
+  disabled = false,
+  getTooltipContent
+}: CardSelectorProps<T, K>) => {
+  const { t } = useTranslation();
+
+  const handleOptionClick = (value: T) => {
+    if (!disabled) {
+      onSelect(value);
+    }
+  };
+
+  const getTooltips = (option: K) => {
+    if (getTooltipContent) {
+      return getTooltipContent(option);
+    }
+    return [];
+  };
+
+  return (
+    <Stack gap="sm">
+      {options.map((option) => (
+        <Tooltip
+          key={option.value as string}
+          sidebarTooltip
+          tips={getTooltips(option)}
+        >
+          <Card
+            radius="md"
+            w="100%"
+            h={'2.8rem'}
+            style={{
+              cursor: disabled ? 'default' : 'pointer',
+              backgroundColor: 'var(--mantine-color-gray-2)',
+              borderColor: 'var(--mantine-color-gray-3)',
+              opacity: disabled ? 0.6 : 1,
+              display: 'flex',
+              flexDirection: 'row',
+              transition: 'all 0.2s ease',
+            }}
+            onMouseEnter={(e) => {
+              if (!disabled) {
+                e.currentTarget.style.backgroundColor = 'var(--mantine-color-gray-3)';
+                e.currentTarget.style.transform = 'translateY(-1px)';
+                e.currentTarget.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (!disabled) {
+                e.currentTarget.style.backgroundColor = 'var(--mantine-color-gray-2)';
+                e.currentTarget.style.transform = 'translateY(0px)';
+                e.currentTarget.style.boxShadow = 'none';
+              }
+            }}
+            onClick={() => handleOptionClick(option.value)}
+          >
+            <Flex align={'center'} pl="sm" w="100%">
+              <Text size="sm" c="dimmed" ta="center" fw={350}>
+                {t(option.prefixKey, "Prefix")}
+              </Text>
+              <Text
+                fw={600}
+                size="sm"
+                c={undefined}
+                ta="center"
+                style={{ marginLeft: '0.25rem' }}
+              >
+                {t(option.nameKey, "Option Name")}
+              </Text>
+            </Flex>
+          </Card>
+        </Tooltip>
+      ))}
+    </Stack>
+  );
+};
+
+export default CardSelector;

frontend/src/components/tools/split/SplitSettings.tsx

@@ -1,6 +1,7 @@
-import { Stack, TextInput, Select, Checkbox } from '@mantine/core';
+import { Stack, TextInput, Checkbox, Anchor, Text } from '@mantine/core';
+import LocalIcon from '../../shared/LocalIcon';
 import { useTranslation } from 'react-i18next';
-import { isSplitMode, isSplitType, SPLIT_MODES, SPLIT_TYPES } from '../../../constants/splitConstants';
+import { SPLIT_METHODS } from '../../../constants/splitConstants';
 import { SplitParameters } from '../../../hooks/tools/split/useSplitParameters';
 
 export interface SplitSettingsProps {
@@ -57,28 +58,37 @@ const SplitSettings = ({
     </Stack>
   );
 
-  const renderBySizeOrCountForm = () => (
-    <Stack gap="sm">
-      <Select
-        label={t("split-by-size-or-count.type.label", "Split Type")}
-        value={parameters.splitType}
-        onChange={(v) => isSplitType(v) && onParameterChange('splitType', v)}
-        disabled={disabled}
-        data={[
-          { value: SPLIT_TYPES.SIZE, label: t("split-by-size-or-count.type.size", "By Size") },
-          { value: SPLIT_TYPES.PAGES, label: t("split-by-size-or-count.type.pageCount", "By Page Count") },
-          { value: SPLIT_TYPES.DOCS, label: t("split-by-size-or-count.type.docCount", "By Document Count") },
-        ]}
-      />
+  const renderSplitValueForm = () => {
+    let label, placeholder;
+
+    switch (parameters.method) {
+      case SPLIT_METHODS.BY_SIZE:
+        label = t("split.value.fileSize.label", "File Size");
+        placeholder = t("split.value.fileSize.placeholder", "e.g. 10MB, 500KB");
+        break;
+      case SPLIT_METHODS.BY_PAGE_COUNT:
+        label = t("split.value.pageCount.label", "Pages per File");
+        placeholder = t("split.value.pageCount.placeholder", "e.g. 5, 10");
+        break;
+      case SPLIT_METHODS.BY_DOC_COUNT:
+        label = t("split.value.docCount.label", "Number of Files");
+        placeholder = t("split.value.docCount.placeholder", "e.g. 3, 5");
+        break;
+      default:
+        label = t("split-by-size-or-count.value.label", "Split Value");
+        placeholder = t("split-by-size-or-count.value.placeholder", "e.g. 10MB or 5 pages");
+    }
+
+    return (
       <TextInput
-        label={t("split-by-size-or-count.value.label", "Split Value")}
-        placeholder={t("split-by-size-or-count.value.placeholder", "e.g. 10MB or 5 pages")}
+        label={label}
+        placeholder={placeholder}
         value={parameters.splitValue}
         onChange={(e) => onParameterChange('splitValue', e.target.value)}
         disabled={disabled}
       />
-    </Stack>
-  );
+    );
+  };
 
   const renderByChaptersForm = () => (
     <Stack gap="sm">
@@ -104,28 +114,48 @@ const SplitSettings = ({
     </Stack>
   );
 
+  const renderByPageDividerForm = () => (
+    <Stack gap="sm">
+      <Anchor
+        href="https://stirlingpdf.io/files/Auto%20Splitter%20Divider%20(with%20instructions).pdf"
+        target="_blank"
+        size="sm"
+        style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}
+      >
+        <LocalIcon icon="download-rounded" width="2rem" height="2rem" />
+        {t("autoSplitPDF.dividerDownload2", "Download 'Auto Splitter Divider (with instructions).pdf'")}
+      </Anchor>
+
+      <Checkbox
+        label={t("autoSplitPDF.duplexMode", "Duplex Mode (Front and back scanning)")}
+        checked={parameters.duplexMode}
+        onChange={(e) => onParameterChange('duplexMode', e.currentTarget.checked)}
+        disabled={disabled}
+      />
+    </Stack>
+  );
+
+  // Don't render anything if no method is selected
+  if (!parameters.method) {
+    return (
+      <Stack gap="sm">
+        <Text c="dimmed" ta="center">
+          {t("split.settings.selectMethodFirst", "Please select a split method first")}
+        </Text>
+      </Stack>
+    );
+  }
+
   return (
     <Stack gap="md">
-      {/* Mode Selector */}
-      <Select
-        label="Choose split method"
-        placeholder="Select how to split the PDF"
-        value={parameters.mode}
-        onChange={(v) => isSplitMode(v) && onParameterChange('mode', v)}
-        disabled={disabled}
-        data={[
-          { value: SPLIT_MODES.BY_PAGES, label: t("split.header", "Split by Pages") + " (e.g. 1,3,5-10)" },
-          { value: SPLIT_MODES.BY_SECTIONS, label: t("split-by-sections.title", "Split by Grid Sections") },
-          { value: SPLIT_MODES.BY_SIZE_OR_COUNT, label: t("split-by-size-or-count.title", "Split by Size or Count") },
-          { value: SPLIT_MODES.BY_CHAPTERS, label: t("splitByChapters.title", "Split by Chapters") },
-        ]}
-      />
-
-      {/* Parameter Form */}
-      {parameters.mode === SPLIT_MODES.BY_PAGES && renderByPagesForm()}
-      {parameters.mode === SPLIT_MODES.BY_SECTIONS && renderBySectionsForm()}
-      {parameters.mode === SPLIT_MODES.BY_SIZE_OR_COUNT && renderBySizeOrCountForm()}
-      {parameters.mode === SPLIT_MODES.BY_CHAPTERS && renderByChaptersForm()}
+      {/* Method-Specific Form */}
+      {parameters.method === SPLIT_METHODS.BY_PAGES && renderByPagesForm()}
+      {parameters.method === SPLIT_METHODS.BY_SECTIONS && renderBySectionsForm()}
+      {(parameters.method === SPLIT_METHODS.BY_SIZE ||
+        parameters.method === SPLIT_METHODS.BY_PAGE_COUNT ||
+        parameters.method === SPLIT_METHODS.BY_DOC_COUNT) && renderSplitValueForm()}
+      {parameters.method === SPLIT_METHODS.BY_CHAPTERS && renderByChaptersForm()}
+      {parameters.method === SPLIT_METHODS.BY_PAGE_DIVIDER && renderByPageDividerForm()}
     </Stack>
   );
 }

frontend/src/components/tooltips/useSplitMethodTips.ts

@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next';
+import { TooltipContent } from '../../types/tips';
+
+export const useSplitMethodTips = (): TooltipContent => {
+  const { t } = useTranslation();
+
+  return {
+    header: {
+      title: t("split.methodSelection.tooltip.title", "Choose Your Split Method")
+    },
+    tips: [
+      {
+        title: t("split.methodSelection.tooltip.header.title", "Split Method Selection"),
+        description: t("split.methodSelection.tooltip.header.text", "Choose how you want to split your PDF document. Each method is optimized for different use cases and document types."),
+        bullets: [
+          t("split.methodSelection.tooltip.bullet1", "Click on a method card to select it"),
+          t("split.methodSelection.tooltip.bullet2", "Hover over each card to see a quick description"),
+          t("split.methodSelection.tooltip.bullet3", "The settings step will appear after you select a method"),
+          t("split.methodSelection.tooltip.bullet4", "You can change methods at any time before processing")
+        ]
+      }
+    ]
+  };
+};

frontend/src/components/tooltips/useSplitSettingsTips.ts

@@ -0,0 +1,134 @@
+import { useTranslation } from 'react-i18next';
+import { TooltipContent } from '../../types/tips';
+import { SPLIT_METHODS, type SplitMethod } from '../../constants/splitConstants';
+
+export const useSplitSettingsTips = (method: SplitMethod | ''): TooltipContent | null => {
+  const { t } = useTranslation();
+
+  if (!method) return null;
+
+  const tooltipMap: Record<SplitMethod, TooltipContent> = {
+    [SPLIT_METHODS.BY_PAGES]: {
+      header: {
+        title: t("split.tooltip.byPages.title", "Split at Page Numbers")
+      },
+      tips: [
+        {
+          title: t("split.tooltip.byPages.title", "Split at Page Numbers"),
+          description: t("split.tooltip.byPages.text", "Extract specific pages or ranges from your PDF. Use commas to separate individual pages and hyphens for ranges."),
+          bullets: [
+            t("split.tooltip.byPages.bullet1", "Single pages: 1,3,5"),
+            t("split.tooltip.byPages.bullet2", "Page ranges: 1-5,10-15"),
+            t("split.tooltip.byPages.bullet3", "Mixed: 1,3-7,12,15-20")
+          ]
+        }
+      ]
+    },
+
+    [SPLIT_METHODS.BY_SECTIONS]: {
+      header: {
+        title: t("split.tooltip.bySections.title", "Split by Grid Sections")
+      },
+      tips: [
+        {
+          title: t("split.tooltip.bySections.title", "Split by Grid Sections"),
+          description: t("split.tooltip.bySections.text", "Divide each page into a grid of sections. Useful for splitting documents with multiple columns or extracting specific areas."),
+          bullets: [
+            t("split.tooltip.bySections.bullet1", "Horizontal: Number of rows to create"),
+            t("split.tooltip.bySections.bullet2", "Vertical: Number of columns to create"),
+            t("split.tooltip.bySections.bullet3", "Merge: Combine all sections into one PDF")
+          ]
+        }
+      ]
+    },
+
+    [SPLIT_METHODS.BY_SIZE]: {
+      header: {
+        title: t("split.tooltip.bySize.title", "Split by File Size")
+      },
+      tips: [
+        {
+          title: t("split.tooltip.bySize.title", "Split by File Size"),
+          description: t("split.tooltip.bySize.text", "Create multiple PDFs that don't exceed a specified file size. Ideal for file size limitations or email attachments."),
+          bullets: [
+            t("split.tooltip.bySize.bullet1", "Use MB for larger files (e.g., 10MB)"),
+            t("split.tooltip.bySize.bullet2", "Use KB for smaller files (e.g., 500KB)"),
+            t("split.tooltip.bySize.bullet3", "System will split at page boundaries")
+          ]
+        }
+      ]
+    },
+
+    [SPLIT_METHODS.BY_PAGE_COUNT]: {
+      header: {
+        title: t("split.tooltip.byPageCount.title", "Split by Page Count")
+      },
+      tips: [
+        {
+          title: t("split.tooltip.byPageCount.title", "Split by Page Count"),
+          description: t("split.tooltip.byPageCount.text", "Create multiple PDFs with a specific number of pages each. Perfect for creating uniform document chunks."),
+          bullets: [
+            t("split.tooltip.byPageCount.bullet1", "Enter the number of pages per output file"),
+            t("split.tooltip.byPageCount.bullet2", "Last file may have fewer pages if not evenly divisible"),
+            t("split.tooltip.byPageCount.bullet3", "Useful for batch processing workflows")
+          ]
+        }
+      ]
+    },
+
+    [SPLIT_METHODS.BY_DOC_COUNT]: {
+      header: {
+        title: t("split.tooltip.byDocCount.title", "Split by Document Count")
+      },
+      tips: [
+        {
+          title: t("split.tooltip.byDocCount.title", "Split by Document Count"),
+          description: t("split.tooltip.byDocCount.text", "Create a specific number of output files by evenly distributing pages across them."),
+          bullets: [
+            t("split.tooltip.byDocCount.bullet1", "Enter the number of output files you want"),
+            t("split.tooltip.byDocCount.bullet2", "Pages are distributed as evenly as possible"),
+            t("split.tooltip.byDocCount.bullet3", "Useful when you need a specific number of files")
+          ]
+        }
+      ]
+    },
+
+    [SPLIT_METHODS.BY_CHAPTERS]: {
+      header: {
+        title: t("split.tooltip.byChapters.title", "Split by Chapters")
+      },
+      tips: [
+        {
+          title: t("split.tooltip.byChapters.title", "Split by Chapters"),
+          description: t("split.tooltip.byChapters.text", "Use PDF bookmarks to automatically split at chapter boundaries. Requires PDFs with bookmark structure."),
+          bullets: [
+            t("split.tooltip.byChapters.bullet1", "Bookmark Level: Which level to split on (1=top level)"),
+            t("split.tooltip.byChapters.bullet2", "Include Metadata: Preserve document properties"),
+            t("split.tooltip.byChapters.bullet3", "Allow Duplicates: Handle repeated bookmark names")
+          ]
+        }
+      ]
+    },
+
+    [SPLIT_METHODS.BY_PAGE_DIVIDER]: {
+      header: {
+        title: t("split.tooltip.byPageDivider.title", "Split by Page Divider")
+      },
+      tips: [
+        {
+          title: t("split.tooltip.byPageDivider.title", "Split by Page Divider"),
+          description: t("split.tooltip.byPageDivider.text", "Automatically split scanned documents using physical divider sheets with QR codes. Perfect for processing multiple documents scanned together."),
+          bullets: [
+            t("split.tooltip.byPageDivider.bullet1", "Print divider sheets from the download link"),
+            t("split.tooltip.byPageDivider.bullet2", "Insert divider sheets between your documents"),
+            t("split.tooltip.byPageDivider.bullet3", "Scan all documents together as one PDF"),
+            t("split.tooltip.byPageDivider.bullet4", "Upload - divider pages are automatically detected and removed"),
+            t("split.tooltip.byPageDivider.bullet5", "Enable Duplex Mode if scanning both sides of divider sheets")
+          ]
+        }
+      ]
+    }
+  };
+
+  return tooltipMap[method];
+};

frontend/src/constants/splitConstants.ts

@@ -1,30 +1,78 @@
-export const SPLIT_MODES = {
+export const SPLIT_METHODS = {
   BY_PAGES: 'byPages',
   BY_SECTIONS: 'bySections',
-  BY_SIZE_OR_COUNT: 'bySizeOrCount',
-  BY_CHAPTERS: 'byChapters'
+  BY_SIZE: 'bySize',
+  BY_PAGE_COUNT: 'byPageCount',
+  BY_DOC_COUNT: 'byDocCount',
+  BY_CHAPTERS: 'byChapters',
+  BY_PAGE_DIVIDER: 'byPageDivider'
 } as const;
 
-export const SPLIT_TYPES = {
-  SIZE: 'size',
-  PAGES: 'pages',
-  DOCS: 'docs'
-} as const;
 
 export const ENDPOINTS = {
-  [SPLIT_MODES.BY_PAGES]: 'split-pages',
-  [SPLIT_MODES.BY_SECTIONS]: 'split-pdf-by-sections',
-  [SPLIT_MODES.BY_SIZE_OR_COUNT]: 'split-by-size-or-count',
-  [SPLIT_MODES.BY_CHAPTERS]: 'split-pdf-by-chapters'
+  [SPLIT_METHODS.BY_PAGES]: 'split-pages',
+  [SPLIT_METHODS.BY_SECTIONS]: 'split-pdf-by-sections',
+  [SPLIT_METHODS.BY_SIZE]: 'split-by-size-or-count',
+  [SPLIT_METHODS.BY_PAGE_COUNT]: 'split-by-size-or-count',
+  [SPLIT_METHODS.BY_DOC_COUNT]: 'split-by-size-or-count',
+  [SPLIT_METHODS.BY_CHAPTERS]: 'split-pdf-by-chapters',
+  [SPLIT_METHODS.BY_PAGE_DIVIDER]: 'auto-split-pdf'
 } as const;
 
-export type SplitMode = typeof SPLIT_MODES[keyof typeof SPLIT_MODES];
-export type SplitType = typeof SPLIT_TYPES[keyof typeof SPLIT_TYPES];
-
-export const isSplitMode = (value: string | null): value is SplitMode => {
-  return Object.values(SPLIT_MODES).includes(value as SplitMode);
+export type SplitMethod = typeof SPLIT_METHODS[keyof typeof SPLIT_METHODS];
+export const isSplitMethod = (value: string | null): value is SplitMethod => {
+  return Object.values(SPLIT_METHODS).includes(value as SplitMethod);
 }
 
-export const isSplitType = (value: string | null): value is SplitType => {
-  return Object.values(SPLIT_TYPES).includes(value as SplitType);
+import { CardOption } from '../components/shared/CardSelector';
+
+export interface MethodOption extends CardOption<SplitMethod> {
+  tooltipKey: string;
 }
+
+export const METHOD_OPTIONS: MethodOption[] = [
+  {
+    value: SPLIT_METHODS.BY_PAGES,
+    prefixKey: "split.methods.prefix.splitAt",
+    nameKey: "split.methods.byPages.name",
+    tooltipKey: "split.methods.byPages.tooltip"
+  },
+  {
+    value: SPLIT_METHODS.BY_CHAPTERS,
+    prefixKey: "split.methods.prefix.splitBy",
+    nameKey: "split.methods.byChapters.name",
+    tooltipKey: "split.methods.byChapters.tooltip"
+  },
+  {
+    value: SPLIT_METHODS.BY_SECTIONS,
+    prefixKey: "split.methods.prefix.splitBy",
+    nameKey: "split.methods.bySections.name",
+    tooltipKey: "split.methods.bySections.tooltip"
+  },
+  {
+    value: SPLIT_METHODS.BY_SIZE,
+    prefixKey: "split.methods.prefix.splitBy",
+    nameKey: "split.methods.bySize.name",
+    tooltipKey: "split.methods.bySize.tooltip"
+  },
+  {
+    value: SPLIT_METHODS.BY_PAGE_COUNT,
+    prefixKey: "split.methods.prefix.splitBy",
+    nameKey: "split.methods.byPageCount.name",
+    tooltipKey: "split.methods.byPageCount.tooltip"
+  },
+  {
+    value: SPLIT_METHODS.BY_DOC_COUNT,
+    prefixKey: "split.methods.prefix.splitBy",
+    nameKey: "split.methods.byDocCount.name",
+    tooltipKey: "split.methods.byDocCount.tooltip"
+  },
+  {
+    value: SPLIT_METHODS.BY_PAGE_DIVIDER,
+    prefixKey: "split.methods.prefix.splitBy",
+    nameKey: "split.methods.byPageDivider.name",
+    tooltipKey: "split.methods.byPageDivider.tooltip"
+  }
+];
+
+

frontend/src/hooks/tools/split/useSplitOperation.ts

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { ToolType, useToolOperation, ToolOperationConfig } from '../shared/useToolOperation';
 import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
 import { SplitParameters, defaultParameters } from './useSplitParameters';
-import { SPLIT_MODES } from '../../../constants/splitConstants';
+import { SPLIT_METHODS } from '../../../constants/splitConstants';
 import { useToolResources } from '../shared/useToolResources';
 
 // Static functions that can be used by both the hook and automation executor
@@ -12,46 +12,58 @@ export const buildSplitFormData = (parameters: SplitParameters, file: File): For
 
   formData.append("fileInput", file);
 
-  switch (parameters.mode) {
-    case SPLIT_MODES.BY_PAGES:
+  switch (parameters.method) {
+    case SPLIT_METHODS.BY_PAGES:
       formData.append("pageNumbers", parameters.pages);
       break;
-    case SPLIT_MODES.BY_SECTIONS:
+    case SPLIT_METHODS.BY_SECTIONS:
       formData.append("horizontalDivisions", parameters.hDiv);
       formData.append("verticalDivisions", parameters.vDiv);
       formData.append("merge", parameters.merge.toString());
       break;
-    case SPLIT_MODES.BY_SIZE_OR_COUNT:
-      formData.append(
-        "splitType",
-        parameters.splitType === "size" ? "0" : parameters.splitType === "pages" ? "1" : "2"
-      );
+    case SPLIT_METHODS.BY_SIZE:
+      formData.append("splitType", "0");
       formData.append("splitValue", parameters.splitValue);
       break;
-    case SPLIT_MODES.BY_CHAPTERS:
+    case SPLIT_METHODS.BY_PAGE_COUNT:
+      formData.append("splitType", "1");
+      formData.append("splitValue", parameters.splitValue);
+      break;
+    case SPLIT_METHODS.BY_DOC_COUNT:
+      formData.append("splitType", "2");
+      formData.append("splitValue", parameters.splitValue);
+      break;
+    case SPLIT_METHODS.BY_CHAPTERS:
       formData.append("bookmarkLevel", parameters.bookmarkLevel);
       formData.append("includeMetadata", parameters.includeMetadata.toString());
       formData.append("allowDuplicates", parameters.allowDuplicates.toString());
       break;
+    case SPLIT_METHODS.BY_PAGE_DIVIDER:
+      formData.append("duplexMode", parameters.duplexMode.toString());
+      break;
     default:
-      throw new Error(`Unknown split mode: ${parameters.mode}`);
+      throw new Error(`Unknown split method: ${parameters.method}`);
   }
 
   return formData;
 };
 
 export const getSplitEndpoint = (parameters: SplitParameters): string => {
-  switch (parameters.mode) {
-    case SPLIT_MODES.BY_PAGES:
+  switch (parameters.method) {
+    case SPLIT_METHODS.BY_PAGES:
       return "/api/v1/general/split-pages";
-    case SPLIT_MODES.BY_SECTIONS:
+    case SPLIT_METHODS.BY_SECTIONS:
       return "/api/v1/general/split-pdf-by-sections";
-    case SPLIT_MODES.BY_SIZE_OR_COUNT:
+    case SPLIT_METHODS.BY_SIZE:
+    case SPLIT_METHODS.BY_PAGE_COUNT:
+    case SPLIT_METHODS.BY_DOC_COUNT:
       return "/api/v1/general/split-by-size-or-count";
-    case SPLIT_MODES.BY_CHAPTERS:
+    case SPLIT_METHODS.BY_CHAPTERS:
       return "/api/v1/general/split-pdf-by-chapters";
+    case SPLIT_METHODS.BY_PAGE_DIVIDER:
+      return "/api/v1/misc/auto-split-pdf";
     default:
-      throw new Error(`Unknown split mode: ${parameters.mode}`);
+      throw new Error(`Unknown split method: ${parameters.method}`);
   }
 };
 

frontend/src/hooks/tools/split/useSplitParameters.ts

@@ -1,54 +1,58 @@
-import { SPLIT_MODES, SPLIT_TYPES, ENDPOINTS, type SplitMode, SplitType } from '../../../constants/splitConstants';
+import { SPLIT_METHODS, ENDPOINTS, type SplitMethod } from '../../../constants/splitConstants';
 import { BaseParameters } from '../../../types/parameters';
 import { useBaseParameters, BaseParametersHook } from '../shared/useBaseParameters';
 
 export interface SplitParameters extends BaseParameters {
-  mode: SplitMode | '';
+  method: SplitMethod | '';
   pages: string;
   hDiv: string;
   vDiv: string;
   merge: boolean;
-  splitType: SplitType | '';
   splitValue: string;
   bookmarkLevel: string;
   includeMetadata: boolean;
   allowDuplicates: boolean;
+  duplexMode: boolean;
 }
 
 export type SplitParametersHook = BaseParametersHook<SplitParameters>;
 
 export const defaultParameters: SplitParameters = {
-  mode: '',
+  method: '',
   pages: '',
   hDiv: '2',
   vDiv: '2',
   merge: false,
-  splitType: SPLIT_TYPES.SIZE,
   splitValue: '',
   bookmarkLevel: '1',
   includeMetadata: false,
   allowDuplicates: false,
+  duplexMode: false,
 };
 
 export const useSplitParameters = (): SplitParametersHook => {
   return useBaseParameters({
     defaultParameters,
     endpointName: (params) => {
-      if (!params.mode) return ENDPOINTS[SPLIT_MODES.BY_PAGES];
-      return ENDPOINTS[params.mode as SplitMode];
+      if (!params.method) return ENDPOINTS[SPLIT_METHODS.BY_PAGES];
+      return ENDPOINTS[params.method as SplitMethod];
     },
     validateFn: (params) => {
-      if (!params.mode) return false;
+      if (!params.method) return false;
 
-      switch (params.mode) {
-        case SPLIT_MODES.BY_PAGES:
+      switch (params.method) {
+        case SPLIT_METHODS.BY_PAGES:
           return params.pages.trim() !== "";
-        case SPLIT_MODES.BY_SECTIONS:
+        case SPLIT_METHODS.BY_SECTIONS:
           return params.hDiv !== "" && params.vDiv !== "";
-        case SPLIT_MODES.BY_SIZE_OR_COUNT:
+        case SPLIT_METHODS.BY_SIZE:
+        case SPLIT_METHODS.BY_PAGE_COUNT:
+        case SPLIT_METHODS.BY_DOC_COUNT:
           return params.splitValue.trim() !== "";
-        case SPLIT_MODES.BY_CHAPTERS:
+        case SPLIT_METHODS.BY_CHAPTERS:
           return params.bookmarkLevel !== "";
+        case SPLIT_METHODS.BY_PAGE_DIVIDER:
+          return true; // No required parameters
         default:
           return false;
       }

frontend/src/theme/mantineTheme.ts

@@ -183,10 +183,10 @@ export const mantineTheme = createTheme({
         },
         option: {
           color: 'var(--text-primary)',
-          '&[data-hovered]': {
+          '&[dataHovered]': {
             backgroundColor: 'var(--hover-bg)',
           },
-          '&[data-selected]': {
+          '&[dataSelected]': {
             backgroundColor: 'var(--color-primary-100)',
             color: 'var(--color-primary-900)',
           },

frontend/src/tools/Split.tsx

@@ -1,10 +1,14 @@
 import { useTranslation } from "react-i18next";
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
+import CardSelector from "../components/shared/CardSelector";
 import SplitSettings from "../components/tools/split/SplitSettings";
 import { useSplitParameters } from "../hooks/tools/split/useSplitParameters";
 import { useSplitOperation } from "../hooks/tools/split/useSplitOperation";
 import { useBaseTool } from "../hooks/tools/shared/useBaseTool";
+import { useSplitMethodTips } from "../components/tooltips/useSplitMethodTips";
+import { useSplitSettingsTips } from "../components/tooltips/useSplitSettingsTips";
 import { BaseToolProps, ToolComponent } from "../types/tool";
+import { type SplitMethod, METHOD_OPTIONS, type MethodOption } from "../constants/splitConstants";
 
 const Split = (props: BaseToolProps) => {
   const { t } = useTranslation();
@@ -16,6 +20,27 @@ const Split = (props: BaseToolProps) => {
     props
   );
 
+  const methodTips = useSplitMethodTips();
+  const settingsTips = useSplitSettingsTips(base.params.parameters.method);
+
+  // Get tooltip content for a specific method
+  const getMethodTooltip = (option: MethodOption) => {
+    const tooltipContent = useSplitSettingsTips(option.value);
+    return tooltipContent?.tips || [];
+  };
+
+  // Get the method name for the settings step title
+  const getSettingsTitle = () => {
+    if (!base.params.parameters.method) return t("split.steps.settings", "Settings");
+
+    const methodOption = METHOD_OPTIONS.find(option => option.value === base.params.parameters.method);
+    if (!methodOption) return t("split.steps.settings", "Settings");
+
+    const prefix = t(methodOption.prefixKey, "Split by");
+    const name = t(methodOption.nameKey, "Method Name");
+    return `${prefix} ${name}`;
+  };
+
   return createToolFlow({
     files: {
       selectedFiles: base.selectedFiles,
@@ -23,9 +48,25 @@ const Split = (props: BaseToolProps) => {
     },
     steps: [
       {
-        title: "Settings",
-        isCollapsed: base.settingsCollapsed,
+        title: t("split.steps.chooseMethod", "Choose Method"),
+        isCollapsed: !!base.params.parameters.method, // Collapse when method is selected
+        onCollapsedClick: () => base.params.updateParameter('method', '')
+        ,
+        tooltip: methodTips,
+        content: (
+          <CardSelector<SplitMethod, MethodOption>
+            options={METHOD_OPTIONS}
+            onSelect={(method) => base.params.updateParameter('method', method)}
+            disabled={base.endpointLoading}
+            getTooltipContent={getMethodTooltip}
+          />
+        ),
+      },
+      {
+        title: getSettingsTitle(),
+        isCollapsed: !base.params.parameters.method, // Collapsed until method selected
         onCollapsedClick: base.hasResults ? base.handleSettingsReset : undefined,
+        tooltip: settingsTips || undefined,
         content: (
           <SplitSettings
             parameters={base.params.parameters}