@stll/folio-vue 0.2.0

package/dist/components/Toolbar/presets.d.ts

@@ -0,0 +1,25 @@
+import { FontOption } from '../../utils/fontOptions';
+/**
+ * Minimal translation-key type for the Vue adapter. folio's `useTranslation().t`
+ * accepts a namespaced key path as a string; a stricter union can replace this
+ * once the toolbar catalog keys are generated.
+ */
+export type TranslationKey = string;
+export declare const defaultFonts: FontOption[];
+export declare const fontSizePresets: number[];
+export type ParagraphStylePreset = {
+    id: string;
+    /** Fallback label used if the i18n key resolves to nothing. */
+    label: string;
+    nameKey: TranslationKey;
+};
+export declare const paragraphStyles: ParagraphStylePreset[];
+export type LineSpacingPreset = {
+    /** Fallback label; localized presets carry a `labelKey` instead. */
+    label: string;
+    labelKey?: TranslationKey;
+    value: number;
+};
+export declare const lineSpacingOptions: LineSpacingPreset[];
+export declare const ZOOM_PRESETS: number[];
+export declare const DEFAULT_ZOOM_PERCENT = 100;

package/dist/components/dialogs/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @stll/folio-vue dialogs
+ *
+ * Modal dialog components — find/replace, page setup, table/image properties,
+ * image position, footnote/endnote properties, insert table, insert symbol, and
+ * hyperlinks. Mirrors the React dialogs subpath.
+ *
+ * @example
+ * ```ts
+ * import { HyperlinkDialog, FindReplaceDialog } from '@stll/folio-vue/dialogs';
+ * ```
+ *
+ * @packageDocumentation
+ * @public
+ */
+export { default as FindReplaceDialog } from './FindReplaceDialog.vue';
+export { default as FootnotePropertiesDialog } from './FootnotePropertiesDialog.vue';
+export { default as HyperlinkDialog } from './HyperlinkDialog.vue';
+export { default as ImagePositionDialog } from './ImagePositionDialog.vue';
+export { default as ImagePropertiesDialog } from './ImagePropertiesDialog.vue';
+export { default as InsertSymbolDialog } from './InsertSymbolDialog.vue';
+export { default as InsertTableDialog } from './InsertTableDialog.vue';
+export { default as PageSetupDialog } from './PageSetupDialog.vue';
+export { default as TablePropertiesDialog } from './TablePropertiesDialog.vue';

package/dist/components/imageContextMenuTypes.d.ts

@@ -0,0 +1,30 @@
+import { WrapType } from '@stll/folio-core/docx/wrapTypes';
+type ImageAttrsCssFloat = "left" | "right" | "none" | null;
+export type ImageContextMenuState = {
+    open: boolean;
+    position: {
+        x: number;
+        y: number;
+    };
+    pmPos: number;
+    currentWrapType: WrapType;
+    currentCssFloat?: ImageAttrsCssFloat;
+    inlinePositionEmu?: {
+        horizontalEmu: number;
+        verticalEmu: number;
+    };
+};
+/**
+ * Item appended below a divider — mirrors the React side
+ * (`ImageContextMenuTextAction`). `dividerAfter` lets the host group
+ * the items the same way Word does (Cut/Copy/Paste then divider then
+ * Delete).
+ */
+export type ImageContextMenuTextAction = {
+    action: string;
+    label: string;
+    shortcut?: string;
+    disabled?: boolean;
+    dividerAfter?: boolean;
+};
+export {};

package/dist/components/imageSelectionTypes.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Shared `ImageSelectionInfo` type — imported by `ImageSelectionOverlay.vue`
+ * (for `defineProps`) and `useImageActions.ts` (for the composable's
+ * `selectedImage` ref). Pulled out of the `.vue` SFC so a plain `.ts` module can
+ * reference it without going through the `*.vue` wildcard shim, which does not
+ * carry named type exports.
+ */
+export type ImageSelectionInfo = {
+    element: HTMLElement;
+    pmPos: number;
+    width: number;
+    height: number;
+};

package/dist/components/insertTableState.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Last-used Insert-Table dimensions. Module-level so the dialog reopens with
+ * whatever the user picked last time (mirrors React lifting this to component
+ * state that survives reopen).
+ */
+export declare const rememberedTableSize: {
+    rows: number;
+    cols: number;
+};

package/dist/components/sidebar/cardStyles.d.ts

@@ -0,0 +1 @@
+export { CARD_STYLE_COLLAPSED, CARD_STYLE_EXPANDED, } from '../../utils/cardStyles';

package/dist/components/sidebar/cardUtils.d.ts

@@ -0,0 +1 @@
+export * from './sidebarUtils';

package/dist/components/sidebar/resolveItemPositions.d.ts

@@ -0,0 +1,22 @@
+/** Minimal shape the layout pass needs from a sidebar item. */
+export type ResolvableSidebarItem = {
+    id: string;
+    anchorPos: number;
+    anchorKey?: string;
+    priority?: number;
+    fixedY?: number;
+    estimatedHeight?: number;
+};
+export type ResolvedPosition<T extends ResolvableSidebarItem = ResolvableSidebarItem> = {
+    item: T;
+    y: number;
+};
+/**
+ * Given a list of sidebar items plus their anchor sources, return resolved Y
+ * positions with collision avoidance applied. Items resolve their target Y from
+ * (1) an explicit `fixedY`, (2) an `anchorKey` lookup in `anchorPositions`
+ * (layout-engine coords scaled by `zoom`), or (3) the last-known cache so cards
+ * don't pop out during transient layout. Overlapping cards are then pushed down
+ * by their measured height + `MIN_CARD_GAP`.
+ */
+export declare function resolveItemPositions<T extends ResolvableSidebarItem>(items: T[], anchorPositions: Map<string, number>, zoom: number, cardHeights: Map<string, number>, lastKnown: Map<string, number>): ResolvedPosition<T>[];

package/dist/components/sidebar/sidebarUtils.d.ts

@@ -0,0 +1,4 @@
+import { CSSProperties } from 'vue';
+export { getCommentText, formatDate, getInitials, getAvatarColor, truncateText, type TrackedChangeEntry, } from '../../utils/comments';
+/** Inline style for an avatar bubble — mirrors React's avatarStyle(). */
+export declare function avatarStyle(name: string, size?: 32 | 28): CSSProperties;

package/dist/components/tableStylePresets.d.ts

@@ -0,0 +1,60 @@
+import { CSSProperties } from 'vue';
+export type TableStyleBorder = {
+    style: string;
+    size?: number;
+    color?: {
+        rgb: string;
+    };
+};
+export type TableStylePreset = {
+    id: string;
+    name: string;
+    /** Table-level borders */
+    tableBorders?: {
+        top?: TableStyleBorder;
+        bottom?: TableStyleBorder;
+        left?: TableStyleBorder;
+        right?: TableStyleBorder;
+        insideH?: TableStyleBorder;
+        insideV?: TableStyleBorder;
+    };
+    /** Conditional formatting per cell position */
+    conditionals?: Record<string, {
+        backgroundColor?: string;
+        borders?: {
+            top?: TableStyleBorder | null;
+            bottom?: TableStyleBorder | null;
+            left?: TableStyleBorder | null;
+            right?: TableStyleBorder | null;
+        };
+        bold?: boolean;
+        color?: string;
+    }>;
+    /** Which conditional formatting is active by default */
+    look?: {
+        firstRow?: boolean;
+        lastRow?: boolean;
+        firstCol?: boolean;
+        lastCol?: boolean;
+        noHBand?: boolean;
+        noVBand?: boolean;
+    };
+};
+export declare const BUILTIN_TABLE_STYLES: TableStylePreset[];
+/** Get a built-in table style preset by ID. */
+export declare function getBuiltinTableStyle(styleId: string): TableStylePreset | undefined;
+/**
+ * Map from built-in style ID to folio-catalog translation key.
+ *
+ * TODO(i18n): none of these `table.styles.*` keys exist in folio's flat `folio`
+ * catalog (`packages/core/src/i18n/messages/en.json`) yet, so `presetName`
+ * currently renders the raw key path rather than a localized name. Kept verbatim
+ * (not invented) so the wiring is ready once the catalog gains the entries.
+ */
+export declare const TABLE_STYLE_NAME_KEYS: Record<string, string>;
+/**
+ * Build the per-cell inline styles for a small preview grid of the given
+ * preset. Shared by TableStyleGallery and InsertTableDialog so the preview
+ * rendering stays in one place.
+ */
+export declare function getPreviewCells(preset: TableStylePreset, rows?: number, cols?: number): CSSProperties[];

package/dist/components/toolbarUtils.d.ts

@@ -0,0 +1,3 @@
+/** OOXML highlight color name <-> hex mapping (hex keys, no `#`, uppercase). */
+export declare const HIGHLIGHT_HEX_TO_NAME: Record<string, string>;
+export declare function mapHexToHighlightName(hex: string): string | null;

package/dist/components/ui/AlignmentButtons.types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Types for `AlignmentButtons.vue`, kept in a plain `.ts` module so downstream
+ * `.ts` consumers (and the standalone `FormattingBar`) can import the type
+ * without resolving a `.vue` SFC. A plain `tsc` (e.g. the Nuxt adapter's
+ * typecheck) sees `.vue` imports only through an ambient default-export shim, so
+ * named type exports must live in `.ts` files.
+ */
+/**
+ * Paragraph alignment the picker offers. Intentionally the narrow subset the
+ * minimal toolbar exposes; core's `ParagraphAlignment` is a wider superset
+ * (distribute + Kashida variants) that this control does not surface.
+ */
+export type ParagraphAlignment = "left" | "center" | "right" | "both";

package/dist/components/ui/StylePicker.types.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Types for `StylePicker.vue`, kept in a plain `.ts` module so downstream `.ts`
+ * consumers (and the standalone `FormattingBar`) can import the type without
+ * resolving a `.vue` SFC. A plain `tsc` (e.g. the Nuxt adapter's typecheck) sees
+ * `.vue` imports only through an ambient default-export shim, so named type
+ * exports must live in `.ts` files.
+ */
+/** A single paragraph-style option the picker can offer. */
+export type StyleOption = {
+    styleId: string;
+    name: string;
+    fontSize?: number;
+    bold?: boolean;
+    italic?: boolean;
+    color?: string;
+};

package/dist/components/ui/ZoomControl.types.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Types for `ZoomControl.vue`, kept in a plain `.ts` module so the package's
+ * public `index.ts` can re-export them without resolving a `.vue` SFC. A plain
+ * `tsc` (e.g. the Nuxt adapter's typecheck) sees `.vue` imports only through an
+ * ambient default-export shim, so named type exports must live in `.ts` files.
+ */
+/** A single zoom preset: `value` is a scale factor (1 = 100%). */
+export type ZoomLevel = {
+    value: number;
+    label: string;
+};
+export type ZoomControlProps = {
+    /** Current zoom (1 = 100%). */
+    value?: number;
+    /** Override the preset levels offered in the dropdown. */
+    levels?: ZoomLevel[];
+    disabled?: boolean;
+    className?: string;
+    /** Render the trigger at the smaller toolbar-chrome size. */
+    compact?: boolean;
+};

package/dist/components/ui/fontPickerValue.d.ts

@@ -0,0 +1 @@
+export declare function getPrimaryFontFamily(fontFamily: string): string;

package/dist/components/ui/hyperlinkPopupTypes.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Shared `HyperlinkPopupData` type — imported by `HyperlinkPopup.vue`
+ * (for `defineProps`) and `useHyperlinkManagement.ts` (for the
+ * composable's `hyperlinkPopupData` ref). Pulled out of the .vue SFC so
+ * a plain .ts module can reference it without going through the `*.vue`
+ * wildcard shim, which doesn't carry named type exports.
+ */
+export type HyperlinkPopupData = {
+    href: string;
+    displayText: string;
+    tooltip?: string;
+    /** Popup position in the editor's pages-viewport coordinate space (CSS
+     *  pixels from its top-left). Computed once at click time. The popup
+     *  renders inside that viewport with `position: absolute`, so the
+     *  browser handles repositioning during scroll for free. */
+    position: {
+        top: number;
+        left: number;
+    };
+};

package/dist/composables/commentMarks.d.ts

@@ -0,0 +1,32 @@
+import { EditorView } from 'prosemirror-view';
+export type CommentMarkRange = {
+    from: number;
+    to: number;
+};
+/** Clamp a range into the document and reject an empty (collapsed) span. */
+export declare function clampCommentMarkRange(docSize: number, range: CommentMarkRange): CommentMarkRange | null;
+/**
+ * Pick the range to comment on, preferring the range captured when the FAB was
+ * shown, then the live selection, then the last non-empty selection. Mirrors
+ * React's `resolveCommentCreationRange`.
+ */
+export type ResolveCommentCreationRangeOptions = {
+    docSize: number;
+    capturedRange: CommentMarkRange;
+    currentRange: CommentMarkRange;
+    savedRange: CommentMarkRange | null;
+};
+export declare function resolveCommentCreationRange({ docSize, capturedRange, currentRange, savedRange, }: ResolveCommentCreationRangeOptions): CommentMarkRange | null;
+export type ApplyCommentMarkOptions = {
+    replacePending?: boolean;
+    selectEnd?: boolean;
+};
+/**
+ * Add a `comment` mark for `commentId` over `range`. With `replacePending` the
+ * placeholder mark (PENDING_COMMENT_ID) is removed from the range first so a
+ * pre-existing real comment the selection overlaps is left intact. Returns
+ * false when the schema lacks the mark or the range is empty.
+ */
+export declare function applyCommentMarkRange(view: EditorView, range: CommentMarkRange, commentId: number, options?: ApplyCommentMarkOptions): boolean;
+/** Strip the pending placeholder comment mark from `range` (cancel add-comment). */
+export declare function removePendingCommentMarkRange(view: EditorView, range: CommentMarkRange): void;

package/dist/composables/imageOverlayRect.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Pure geometry for the Vue image-selection overlay. Kept separate from the
+ * component so the scrollbar-gutter handling can be unit-tested without a DOM.
+ */
+export type OverlayRectInputs = {
+    /** `image.getBoundingClientRect()` (viewport coords). */
+    imageRect: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    /** `offsetParent.getBoundingClientRect()` (the scroll container, viewport coords). */
+    parentRect: {
+        left: number;
+        top: number;
+    };
+    scrollLeft: number;
+    scrollTop: number;
+    /** `offsetParent.offsetWidth` / `.clientWidth` — used to derive the gutter. */
+    parentOffsetWidth: number;
+    parentClientWidth: number;
+    zoom: number;
+};
+export type OverlayRect = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+/**
+ * Position the overlay (absolute, inside the scroll container) over the image.
+ *
+ * The scroll container uses `scrollbar-gutter: stable both-edges`, which
+ * reserves an inline-start gutter that sits OUTSIDE the absolute-positioning
+ * origin. `getBoundingClientRect().left` is the border-box left (before the
+ * gutter), so `imageRect.left - parentRect.left` over-counts the left gutter
+ * and the frame lands shifted right by that width (issue #764). With
+ * `both-edges` the two gutters are equal, so the left gutter is half of the
+ * total reserved inline space (`offsetWidth - clientWidth`, no borders here).
+ * On overlay-scrollbar platforms (e.g. macOS) the reserved space is 0, so the
+ * correction is a no-op and behavior is unchanged.
+ */
+export declare function computeImageOverlayRect(i: OverlayRectInputs): OverlayRect;

package/dist/composables/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * `@stll/folio-vue/composables`
+ *
+ * Vue composables mirroring the React `hooks` subpath — history, table
+ * selection, find/replace, clipboard, zoom, tracked-changes, visual-line
+ * navigation, and the high-level `useDocxEditor` host composable. Only the
+ * composables the fork has ported are re-exported (React's `useAutoSave` and
+ * `useCommentSidebarItems` have no Vue equivalent yet).
+ *
+ * @example
+ * ```ts
+ * import { useHistory, useFindReplace } from "@stll/folio-vue/composables";
+ * ```
+ *
+ * @packageDocumentation
+ * @public
+ */
+export * from './useClipboard';
+export * from './useDocxEditor';
+export * from './useDragAutoScroll';
+export * from './useFindReplace';
+export * from './useFixedDropdown';
+export * from './useHistory';
+export * from './useSelectionHighlight';
+export * from './useTableResize';
+export * from './useTableSelection';
+export * from './useTrackedChanges';
+export * from './useVisualLineNavigation';
+export * from './useWheelZoom';
+export * from './useZoom';

package/dist/composables/useAutoSave.d.ts

@@ -0,0 +1,39 @@
+import { MaybeRef, Ref } from 'vue';
+import { formatLastSaveTime, getAutoSaveStatusLabel, getAutoSaveStorageSize, formatStorageSize, isAutoSaveSupported, AutoSaveStatus, SavedDocumentData } from '@stll/folio-core/managers/AutoSaveManager';
+import { Document } from '@stll/folio-core/types/document';
+export type { AutoSaveStatus, SavedDocumentData };
+export { formatLastSaveTime, getAutoSaveStatusLabel, getAutoSaveStorageSize, formatStorageSize, isAutoSaveSupported, };
+export type UseAutoSaveOptions = {
+    /** localStorage key (default: 'docx-editor-autosave') */
+    storageKey?: string;
+    /** Auto-save interval in ms (default: 30000) */
+    interval?: number;
+    /** Whether auto-save starts enabled (default: true). */
+    enabled?: boolean;
+    /** Maximum age of auto-save before it is considered stale. */
+    maxAge?: number;
+    /** Callback when save succeeds. */
+    onSave?: (timestamp: Date) => void;
+    /** Callback when save fails. */
+    onError?: (error: Error) => void;
+    /** Callback when recovery data is found. */
+    onRecoveryAvailable?: (savedDocument: SavedDocumentData) => void;
+    /** Whether document changes trigger a debounced save. */
+    saveOnChange?: boolean;
+    /** Debounce delay for saveOnChange in milliseconds. */
+    debounceDelay?: number;
+};
+export type UseAutoSaveReturn = {
+    status: Ref<AutoSaveStatus>;
+    lastSaveTime: Ref<Date | null>;
+    save: () => boolean;
+    clearAutoSave: () => void;
+    hasRecoveryData: Ref<boolean>;
+    getRecoveryData: () => SavedDocumentData | null;
+    acceptRecovery: () => Document | null;
+    dismissRecovery: () => void;
+    isEnabled: Ref<boolean>;
+    enable: () => void;
+    disable: () => void;
+};
+export declare function useAutoSave(document: MaybeRef<Document | null | undefined>, options?: UseAutoSaveOptions): UseAutoSaveReturn;

package/dist/composables/useClipboard.d.ts

@@ -0,0 +1,21 @@
+import { Ref } from 'vue';
+import { runsToClipboardContent, ParsedClipboardContent } from '@stll/folio-core/utils/clipboard';
+import { getSelectionRuns, createSelectionFromDOM, ClipboardSelection } from '@stll/folio-core/managers/ClipboardManager';
+export { getSelectionRuns, createSelectionFromDOM, runsToClipboardContent };
+export type { ClipboardSelection };
+export type UseClipboardOptions = {
+    onCopy?: (selection: ClipboardSelection) => void;
+    onCut?: (selection: ClipboardSelection) => void;
+    onPaste?: (content: ParsedClipboardContent, asPlainText: boolean) => void;
+    cleanWordFormatting?: boolean;
+    editable?: boolean;
+    onError?: (error: Error) => void;
+};
+export type UseClipboardReturn = {
+    copy: (selection: ClipboardSelection) => Promise<boolean>;
+    cut: (selection: ClipboardSelection) => Promise<boolean>;
+    paste: (asPlainText?: boolean) => Promise<ParsedClipboardContent | null>;
+    isProcessing: Ref<boolean>;
+    lastPastedContent: Ref<ParsedClipboardContent | null>;
+};
+export declare function useClipboard(options?: UseClipboardOptions): UseClipboardReturn;

package/dist/composables/useColorMode.d.ts

@@ -0,0 +1,8 @@
+import { ComputedRef } from 'vue';
+import { ColorMode } from '../utils/colorMode';
+/**
+ * Resolve the effective dark flag from a reactive `colorMode`. `'system'`
+ * follows the OS via `subscribeSystemDark` (SSR-safe; re-syncs on entry).
+ * Mirrors the React adapter's inline colorMode logic via the shared core helpers.
+ */
+export declare function useColorMode(colorMode: () => ColorMode): ComputedRef<boolean>;

package/dist/composables/useCommentLifecycle.d.ts

@@ -0,0 +1,39 @@
+import { Ref } from 'vue';
+import { EditorView } from 'prosemirror-view';
+import { Comment } from '@stll/folio-core/types/content';
+export type FloatingCommentButton = {
+    top: number;
+    left: number;
+    from: number;
+    to: number;
+};
+export type UseCommentLifecycleOptions = {
+    editorView: Ref<EditorView | null>;
+    /** The absolute-positioned viewport the FAB is rendered into. */
+    pagesViewport: Ref<HTMLElement | null>;
+    /** The painted `.paged-editor__pages` container (anchor coordinate space). */
+    pagesContainer: Ref<HTMLElement | null>;
+    readOnly: Ref<boolean>;
+    /** Build a comment with a freshly-allocated id (from useCommentManagement). */
+    createComment: (text: string, parentId?: number) => Comment;
+    /** Append a comment + emit the change (from useCommentManagement). */
+    pushComment: (comment: Comment) => void;
+    reLayout: () => void;
+    showSidebar: Ref<boolean>;
+    /** Highlight the freshly-added comment card in the sidebar. */
+    setActiveSidebarItem: (id: string | null) => void;
+};
+export type UseCommentLifecycleReturn = {
+    isAddingComment: Ref<boolean>;
+    addCommentYPosition: Ref<number | null>;
+    floatingCommentButton: Ref<FloatingCommentButton | null>;
+    /** Recompute the floating button from the current selection (call on select). */
+    updateFloatingButton: () => void;
+    /** Enter the add-comment flow for the captured / current selection. */
+    startAddComment: () => void;
+    /** Submit the typed comment text; returns false when it could not be applied. */
+    handleAddComment: (text: string) => boolean;
+    /** Abandon the in-progress comment and clear the pending highlight. */
+    handleCancelAddComment: () => void;
+};
+export declare function useCommentLifecycle(options: UseCommentLifecycleOptions): UseCommentLifecycleReturn;

package/dist/composables/useCommentManagement.d.ts

@@ -0,0 +1,47 @@
+import { ComputedRef, Ref } from 'vue';
+import { EditorView } from 'prosemirror-view';
+import { Comment } from '@stll/folio-core/types/content';
+import { Document } from '@stll/folio-core/types/document';
+export type UseCommentManagementOptions = {
+    editorView: Ref<EditorView | null>;
+    getDocument: () => Document | null;
+    author: () => string;
+    /** Reader for the controlled `comments` prop (undefined => uncontrolled). */
+    commentsProp: () => Comment[] | undefined;
+    /** Fires on every comment-list mutation (controlled and uncontrolled). */
+    onCommentsChange: (comments: Comment[]) => void;
+    /** Re-run layout after a mutation that changed marks in the document. */
+    reLayout: () => void;
+};
+export type UseCommentManagementReturn = {
+    comments: ComputedRef<Comment[]>;
+    /**
+     * True when the comment thread list has user mutations not yet serialized by
+     * `save()`. Mirrors React's `commentsDirtyRef`: comment edits (add / reply /
+     * resolve / unresolve / delete) do not touch the PM document, so they are
+     * invisible to the doc-dirty flag; this surfaces them. Set on every user
+     * comment mutation, cleared on document load (`seedFromDocument`) and on a
+     * successful save (`clearCommentsDirty`).
+     */
+    commentsDirty: ComputedRef<boolean>;
+    /** Clear {@link commentsDirty} after a successful save. */
+    clearCommentsDirty: () => void;
+    /** Build a comment with a freshly-allocated, collision-seeded id. */
+    createComment: (text: string, parentId?: number) => Comment;
+    /** Append a comment and emit the change. */
+    pushComment: (comment: Comment) => void;
+    /** Replace the whole list and emit the change (uncontrolled also stores it). */
+    setComments: (next: Comment[]) => void;
+    /** Seed internal comments + the id allocator from the loaded document. */
+    seedFromDocument: () => void;
+    handleReply: (parentId: number, text: string) => void;
+    handleResolve: (commentId: number) => void;
+    handleUnresolve: (commentId: number) => void;
+    handleDelete: (commentId: number) => void;
+    handleTrackedChangeReply: (revisionId: number, text: string) => void;
+    handleAcceptChangeById: (revisionId: number) => void;
+    handleRejectChangeById: (revisionId: number) => void;
+    handleAcceptChange: (from: number, to: number) => void;
+    handleRejectChange: (from: number, to: number) => void;
+};
+export declare function useCommentManagement(options: UseCommentManagementOptions): UseCommentManagementReturn;

package/dist/composables/useCommentSidebarItems.d.ts

@@ -0,0 +1,24 @@
+import { ComputedRef, Ref } from 'vue';
+import { Comment } from '@stll/folio-core/types/content';
+import { TrackedChangeEntry } from './useTrackedChanges';
+export type CommentSidebarItem = {
+    id: string;
+    anchorPos: number;
+    anchorKey?: string;
+    priority?: number;
+    isTemporary?: boolean;
+    fixedY?: number;
+    estimatedHeight?: number;
+    kind: "add-comment" | "comment" | "tracked-change";
+    comment?: Comment;
+    replies?: Comment[];
+    change?: TrackedChangeEntry;
+};
+export type UseCommentSidebarItemsOptions = {
+    comments: Ref<Comment[]>;
+    trackedChanges: Ref<TrackedChangeEntry[]>;
+    showResolved?: Ref<boolean>;
+    isAddingComment?: Ref<boolean>;
+    addCommentYPosition?: Ref<number | null>;
+};
+export declare function useCommentSidebarItems({ comments, trackedChanges, showResolved, isAddingComment, addCommentYPosition, }: UseCommentSidebarItemsOptions): ComputedRef<CommentSidebarItem[]>;

package/dist/composables/useContextMenus.d.ts

@@ -0,0 +1,64 @@
+import { ComputedRef, Ref, ShallowRef, VNodeChild } from 'vue';
+import { Command } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { ImageLayoutTarget } from '@stll/folio-core/layout-painter/imageLayout';
+import { ImageSelectionInfo } from '../components/imageSelectionTypes';
+import { ImageContextMenuState, ImageContextMenuTextAction } from '../components/imageContextMenuTypes';
+type CommandFactory = (...args: readonly unknown[]) => Command;
+export type TextContextMenuState = {
+    isOpen: boolean;
+    position: {
+        x: number;
+        y: number;
+    };
+    hasSelection: boolean;
+    inTable: boolean;
+    onImage: boolean;
+    canMergeCells: boolean;
+    canSplitCell: boolean;
+};
+/**
+ * One host-provided context-menu entry (the `customContextMenuItems` prop).
+ * Structural mirror of React's `DocxEditorProps.customContextMenuItems` items;
+ * `icon` is a Vue `VNodeChild` rather than a React node.
+ */
+export type CustomContextMenuItem = {
+    id: string;
+    label: string;
+    requiresSelection?: boolean;
+    icon?: VNodeChild;
+};
+export type UseContextMenusOptions = {
+    editorView: Ref<EditorView | null>;
+    selectedImage: ShallowRef<ImageSelectionInfo | null>;
+    zoom: Ref<number>;
+    showImageProperties: Ref<boolean>;
+    getCommands: () => Record<string, CommandFactory>;
+    clearOverlay: () => void;
+    setPmSelection: (anchor: number, head?: number) => void;
+    resolvePos: (clientX: number, clientY: number) => number | null;
+    /** Host-injected menu entries, appended after the built-ins (lead the menu). */
+    customContextMenuItems?: () => readonly CustomContextMenuItem[] | undefined;
+    /**
+     * Fires with the item id (menu-namespace stripped) and the selection range
+     * captured when the menu opened. Right-click can collapse the live PM
+     * selection, so the captured range is preferred when non-empty.
+     */
+    onCustomContextAction?: (id: string, selectionRange: {
+        from: number;
+        to: number;
+    }) => void;
+};
+export type UseContextMenusReturn = {
+    contextMenu: Ref<TextContextMenuState>;
+    imageContextMenu: Ref<ImageContextMenuState | null>;
+    imageContextMenuTextActions: ComputedRef<ImageContextMenuTextAction[]>;
+    /** Host items to lead the text menu, already filtered by `requiresSelection`. */
+    customTextMenuItems: ComputedRef<CustomContextMenuItem[]>;
+    handleContextMenu: (event: MouseEvent) => void;
+    handleSelectedImageContextMenu: (event: MouseEvent) => void;
+    handleImageWrapSelect: (target: ImageLayoutTarget) => void;
+    handleContextMenuAction: (action: string) => void;
+};
+export declare function useContextMenus(opts: UseContextMenusOptions): UseContextMenusReturn;
+export {};