@eigenpal/docx-editor-react 1.5.0 → 1.6.0

package/dist/ui.d.ts

@@ -11,8 +11,8 @@
  * @packageDocumentation
  * @public
  */
+import * as React$1 from 'react';
 import React__default, { CSSProperties, ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Table, TableCell, ParagraphAlignment, ColorValue, Style, Theme, StyleType, SectionProperties, TabStop, Document } from '@eigenpal/docx-editor-core/types/document';
 import { FontOption } from '@eigenpal/docx-editor-core/utils/fontOptions';
 export { FontOption } from '@eigenpal/docx-editor-core/utils/fontOptions';
@@ -27,6 +27,12 @@ export { K as DialogKeyboardShortcut, F as FindReplaceDialog, a as FindReplaceDi
 export { FindMatch, FindOptions, FindResult, HighlightOptions, createDefaultFindOptions, createSearchPattern, escapeRegexString, findAllMatches, findInDocument, findInParagraph, getDefaultHighlightOptions, getMatchCountText, isEmptySearch, replaceAllInContent, replaceFirstInContent, scrollToMatch } from '@eigenpal/docx-editor-core/utils/findReplace';
 import '@eigenpal/docx-editor-core/utils';
 
+/**
+ * Font Picker Component (Radix UI)
+ *
+ * A dropdown selector for choosing font families using Radix Select.
+ */
+
 interface FontPickerProps {
     value?: string;
     onChange?: (fontFamily: string) => void;
@@ -37,7 +43,17 @@ interface FontPickerProps {
     width?: number | string;
     showPreview?: boolean;
 }
-declare function FontPicker({ value, onChange, fonts, disabled, className, placeholder, width, showPreview, }: FontPickerProps): react_jsx_runtime.JSX.Element;
+declare function FontPicker({ value, onChange, fonts, disabled, className, placeholder, width, showPreview, }: FontPickerProps): React$1.JSX.Element;
+
+/**
+ * List Buttons Component
+ *
+ * A component for list formatting controls in the DOCX editor:
+ * - Bullet list button
+ * - Numbered list button
+ * - Toggles list on/off for selection
+ * - Indent/outdent for list levels
+ */
 
 /**
  * Props for the ListButtons component
@@ -69,7 +85,7 @@ interface ListButtonsProps {
 /**
  * List buttons component for bullet/numbered list controls
  */
-declare function ListButtons({ listState, onBulletList, onNumberedList, onIndent, onOutdent, disabled, className, style, showIndentButtons, compact, hasIndent, }: ListButtonsProps): react_jsx_runtime.JSX.Element;
+declare function ListButtons({ listState, onBulletList, onNumberedList, onIndent, onOutdent, disabled, className, style, showIndentButtons, compact, hasIndent, }: ListButtonsProps): React__default.JSX.Element;
 
 /**
  * Document-model table operations — pure functions over the Table type:
@@ -122,6 +138,18 @@ declare function mergeCells(table: Table, selection: TableSelection): Table;
  */
 declare function splitCell(table: Table, rowIndex: number, columnIndex: number): Table;
 
+/**
+ * Toolbar Component
+ *
+ * The customizable formatting rail — undo/redo, zoom, styles, fonts,
+ * bold/italic/underline, colors, alignment, lists, table/image context,
+ * clear formatting. Used standalone (`<Toolbar ...props>`), inside
+ * `<EditorToolbar>` (reads from context via `EditorToolbar.Toolbar`), or
+ * embedded inline. Also the home of the `ToolbarButton` / `ToolbarGroup` /
+ * `ToolbarSeparator` primitives and the shared `FormattingAction` /
+ * `SelectionFormatting` / `ToolbarProps` types.
+ */
+
 /**
  * Current formatting state of the selection
  */
@@ -263,6 +291,10 @@ interface ToolbarProps {
     onInsertImage?: () => void;
     /** Callback when user wants to insert a page break */
     onInsertPageBreak?: () => void;
+    /** Callback when user wants to insert a "next page" section break */
+    onInsertSectionBreakNextPage?: () => void;
+    /** Callback when user wants to insert a "continuous" section break */
+    onInsertSectionBreakContinuous?: () => void;
     /** Callback when user wants to insert a table of contents */
     onInsertTOC?: () => void;
     /** Callback when user wants to insert a shape */
@@ -337,20 +369,20 @@ interface ToolbarGroupProps$1 {
 /**
  * Individual toolbar button with shadcn styling
  */
-declare function ToolbarButton({ active, disabled, title, onClick, children, className, ariaLabel, }: ToolbarButtonProps): react_jsx_runtime.JSX.Element;
+declare function ToolbarButton({ active, disabled, title, onClick, children, className, ariaLabel, }: ToolbarButtonProps): React__default.JSX.Element;
 /**
  * Toolbar button group with modern styling
  */
-declare function ToolbarGroup$1({ label, children, className }: ToolbarGroupProps$1): react_jsx_runtime.JSX.Element;
+declare function ToolbarGroup$1({ label, children, className }: ToolbarGroupProps$1): React__default.JSX.Element;
 /**
  * Toolbar separator
  */
-declare function ToolbarSeparator(): react_jsx_runtime.JSX.Element;
+declare function ToolbarSeparator(): React__default.JSX.Element;
 /**
  * Icon-based formatting toolbar — undo/redo, zoom, styles, fonts,
  * bold/italic/underline, colors, alignment, lists, table/image context, clear formatting.
  */
-declare function Toolbar(explicitProps: ToolbarProps): react_jsx_runtime.JSX.Element;
+declare function Toolbar(explicitProps: ToolbarProps): React__default.JSX.Element;
 
 /**
  * Props for the EditorToolbar compound component.
@@ -359,22 +391,32 @@ declare function Toolbar(explicitProps: ToolbarProps): react_jsx_runtime.JSX.Ele
 interface EditorToolbarProps extends ToolbarProps {
 }
 
+/**
+ * TitleBar and sub-components for the Google Docs-style 2-level toolbar.
+ *
+ * - TitleBar: two-row layout (row 1: logo + doc name + right actions, row 2: menu bar)
+ * - Logo: renders custom logo content left-aligned
+ * - DocumentName: editable document name input
+ * - MenuBar: File/Format/Insert menus (auto-wired from EditorToolbarContext)
+ * - TitleBarRight: right-aligned actions slot
+ */
+
 interface LogoProps {
     children: ReactNode;
 }
-declare function Logo({ children }: LogoProps): react_jsx_runtime.JSX.Element;
+declare function Logo({ children }: LogoProps): React__default.JSX.Element;
 interface DocumentNameProps {
     value: string;
     onChange?: (value: string) => void;
     placeholder?: string;
     editable?: boolean;
 }
-declare function DocumentName({ value, onChange, placeholder, editable }: DocumentNameProps): react_jsx_runtime.JSX.Element;
+declare function DocumentName({ value, onChange, placeholder, editable }: DocumentNameProps): React__default.JSX.Element;
 interface TitleBarRightProps {
     children: ReactNode;
 }
-declare function TitleBarRight({ children }: TitleBarRightProps): react_jsx_runtime.JSX.Element;
-declare function MenuBar(): react_jsx_runtime.JSX.Element;
+declare function TitleBarRight({ children }: TitleBarRightProps): React__default.JSX.Element;
+declare function MenuBar(): React__default.JSX.Element;
 interface TitleBarProps {
     children: ReactNode;
 }
@@ -390,7 +432,7 @@ interface TitleBarProps {
  * Logo and TitleBarRight span full height. DocumentName + MenuBar
  * stack vertically in the center column.
  */
-declare function TitleBar({ children }: TitleBarProps): react_jsx_runtime.JSX.Element;
+declare function TitleBar({ children }: TitleBarProps): React__default.JSX.Element;
 
 /**
  * EditorToolbar — Google Docs-style 2-level compound component.
@@ -674,10 +716,13 @@ declare function getDefaultTextContextMenuItems(): TextContextMenuItem[];
 declare function isTextActionAvailable(action: TextContextAction, hasSelection: boolean, isEditable: boolean): boolean;
 
 /**
- * Zoom Control Component (Radix UI)
+ * Zoom Control Component
  *
- * A dropdown for controlling document zoom level using Radix Select.
+ * A − / + stepper around a Radix Select: the buttons step through the zoom
+ * levels and the middle % opens a dropdown for a direct pick. Matches the Vue
+ * toolbar's zoom stepper and the font-size stepper.
  */
+
 interface ZoomLevel {
     value: number;
     label: string;
@@ -688,14 +733,9 @@ interface ZoomControlProps {
     levels?: ZoomLevel[];
     disabled?: boolean;
     className?: string;
-    minZoom?: number;
-    maxZoom?: number;
-    showButtons?: boolean;
-    persistZoom?: boolean;
-    storageKey?: string;
     compact?: boolean;
 }
-declare function ZoomControl({ value, onChange, levels, disabled, className, compact, }: ZoomControlProps): react_jsx_runtime.JSX.Element;
+declare function ZoomControl({ value, onChange, levels, disabled, className, compact, }: ZoomControlProps): React$1.JSX.Element;
 
 /**
  * Font Size Picker Component (Google Docs Style)
@@ -707,6 +747,7 @@ declare function ZoomControl({ value, onChange, levels, disabled, className, com
  * - Editable input for custom sizes
  * - Click input to show dropdown with preset sizes
  */
+
 interface FontSizePickerProps {
     value?: number;
     onChange?: (size: number) => void;
@@ -719,7 +760,14 @@ interface FontSizePickerProps {
     maxSize?: number;
 }
 
-declare function FontSizePicker({ value, onChange, sizes, disabled, className, placeholder, minSize, maxSize, }: FontSizePickerProps): react_jsx_runtime.JSX.Element;
+declare function FontSizePicker({ value, onChange, sizes, disabled, className, placeholder, minSize, maxSize, }: FontSizePickerProps): React$1.JSX.Element;
+
+/**
+ * Line Spacing Picker Component (Radix UI)
+ *
+ * A dropdown selector for choosing line spacing values using Radix Select.
+ * Styled like Google Docs with options: Single, 1.15, 1.5, Double
+ */
 
 interface LineSpacingOption {
     label: string;
@@ -735,7 +783,7 @@ interface LineSpacingPickerProps {
     className?: string;
     width?: number | string;
 }
-declare function LineSpacingPicker({ value, onChange, options, disabled, className, }: LineSpacingPickerProps): react_jsx_runtime.JSX.Element;
+declare function LineSpacingPicker({ value, onChange, options, disabled, className, }: LineSpacingPickerProps): React$1.JSX.Element;
 
 type ColorPickerMode = 'text' | 'highlight' | 'border';
 interface ColorPickerProps {
@@ -764,7 +812,14 @@ interface ColorPickerProps {
      */
     defaultColor?: ColorValue | string;
 }
-declare function ColorPicker({ mode, value, onChange, theme, disabled, className, style, title, icon: iconOverride, autoLabel, splitButton, defaultColor, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
+declare function ColorPicker({ mode, value, onChange, theme, disabled, className, style, title, icon: iconOverride, autoLabel, splitButton, defaultColor, }: ColorPickerProps): React$1.JSX.Element;
+
+/**
+ * Style Picker Component (Radix UI)
+ *
+ * A dropdown selector for applying named paragraph styles using Radix Select.
+ * Shows each style with its visual appearance (font size, bold, color).
+ */
 
 interface StyleOption {
     styleId: string;
@@ -792,7 +847,16 @@ interface StylePickerProps {
     className?: string;
     width?: number | string;
 }
-declare function StylePicker({ value, onChange, styles, disabled, className, width, }: StylePickerProps): react_jsx_runtime.JSX.Element;
+declare function StylePicker({ value, onChange, styles, disabled, className, width, }: StylePickerProps): React$1.JSX.Element;
+
+/**
+ * Alignment Dropdown Component (Google Docs style)
+ *
+ * A single dropdown button for paragraph alignment controls:
+ * - Shows current alignment icon + chevron
+ * - Opens a floating panel with Left, Center, Right, Justify options
+ * - Active option is highlighted
+ */
 
 /**
  * Props for the AlignmentButtons component
@@ -816,7 +880,7 @@ interface AlignmentButtonsProps {
 /**
  * Alignment dropdown component — single button with popover panel
  */
-declare function AlignmentButtons({ value, onChange, disabled, }: AlignmentButtonsProps): react_jsx_runtime.JSX.Element;
+declare function AlignmentButtons({ value, onChange, disabled, }: AlignmentButtonsProps): React__default.JSX.Element;
 
 /**
  * HorizontalRuler Component — Google Docs style
@@ -865,7 +929,7 @@ interface TableBorderPickerProps {
     onAction: (action: TableAction) => void;
     disabled?: boolean;
 }
-declare function TableBorderPicker({ onAction, disabled }: TableBorderPickerProps): react_jsx_runtime.JSX.Element;
+declare function TableBorderPicker({ onAction, disabled }: TableBorderPickerProps): React$1.JSX.Element;
 
 interface TableBorderColorPickerProps {
     onAction: (action: TableAction) => void;
@@ -874,13 +938,13 @@ interface TableBorderColorPickerProps {
     /** Current border color (RGB hex without #) */
     value?: string;
 }
-declare function TableBorderColorPicker({ onAction, disabled, theme, value, }: TableBorderColorPickerProps): react_jsx_runtime.JSX.Element;
+declare function TableBorderColorPicker({ onAction, disabled, theme, value, }: TableBorderColorPickerProps): React$1.JSX.Element;
 
 interface TableBorderWidthPickerProps {
     onAction: (action: TableAction) => void;
     disabled?: boolean;
 }
-declare function TableBorderWidthPicker({ onAction, disabled, }: TableBorderWidthPickerProps): react_jsx_runtime.JSX.Element;
+declare function TableBorderWidthPicker({ onAction, disabled, }: TableBorderWidthPickerProps): React$1.JSX.Element;
 
 interface TableCellFillPickerProps {
     onAction: (action: TableAction) => void;
@@ -889,7 +953,11 @@ interface TableCellFillPickerProps {
     /** Current fill color (RGB hex without #) */
     value?: string;
 }
-declare function TableCellFillPicker({ onAction, disabled, theme, value, }: TableCellFillPickerProps): react_jsx_runtime.JSX.Element;
+declare function TableCellFillPicker({ onAction, disabled, theme, value, }: TableCellFillPickerProps): React$1.JSX.Element;
+
+/**
+ * TableMergeButton - Toggle button for merge/split cells
+ */
 
 interface TableMergeButtonProps {
     onAction: (action: TableAction) => void;
@@ -897,13 +965,19 @@ interface TableMergeButtonProps {
     canMerge?: boolean;
     canSplit?: boolean;
 }
-declare function TableMergeButton({ onAction, disabled, canMerge, canSplit, }: TableMergeButtonProps): react_jsx_runtime.JSX.Element;
+declare function TableMergeButton({ onAction, disabled, canMerge, canSplit, }: TableMergeButtonProps): React__default.JSX.Element;
+
+/**
+ * TableInsertButtons - 4 icon buttons for row/column insertion
+ *
+ * Insert row above, insert row below, insert column left, insert column right.
+ */
 
 interface TableInsertButtonsProps {
     onAction: (action: TableAction) => void;
     disabled?: boolean;
 }
-declare function TableInsertButtons({ onAction, disabled }: TableInsertButtonsProps): react_jsx_runtime.JSX.Element;
+declare function TableInsertButtons({ onAction, disabled }: TableInsertButtonsProps): React__default.JSX.Element;
 
 interface TableMoreDropdownProps {
     onAction: (action: TableAction) => void;
@@ -921,7 +995,7 @@ interface TableMoreDropdownProps {
         };
     } | null;
 }
-declare function TableMoreDropdown({ onAction, disabled, tableContext, }: TableMoreDropdownProps): react_jsx_runtime.JSX.Element;
+declare function TableMoreDropdown({ onAction, disabled, tableContext, }: TableMoreDropdownProps): React$1.JSX.Element;
 
 /**
  * Unsaved Changes Indicator Component