@promptbook/components 0.112.0-59 → 0.112.0-60

package/umd/index.umd.js

@@ -30,7 +30,7 @@
      * @generated
      * @see https://github.com/webgptorg/promptbook
      */
-    const PROMPTBOOK_ENGINE_VERSION = '0.112.0-59';
+    const PROMPTBOOK_ENGINE_VERSION = '0.112.0-60';
     /**
      * TODO: string_promptbook_version should be constrained to the all versions of Promptbook engine
      * Note: [💞] Ignore a discrepancy between file name and entity name
@@ -23551,6 +23551,241 @@
         }, [diagnostics, editor, monaco]);
     }
 
+    /**
+     * Clipboard MIME types treated as rich text documents for upload.
+     *
+     * @private function of BookEditorMonaco
+     */
+    const RICH_CLIPBOARD_TEXT_MIME_TYPES = new Set(['text/html', 'text/rtf']);
+    /**
+     * Uploaded filename mapping for known rich clipboard MIME types.
+     *
+     * @private function of BookEditorMonaco
+     */
+    const CLIPBOARD_RICH_CONTENT_FILENAMES = {
+        'text/html': 'clipboard-content.html',
+        'text/rtf': 'clipboard-content.rtf',
+        'application/rtf': 'clipboard-content.rtf',
+    };
+    /**
+     * Fallback filename used when clipboard MIME type is unknown.
+     *
+     * @private function of BookEditorMonaco
+     */
+    const DEFAULT_CLIPBOARD_RICH_CONTENT_FILENAME = 'clipboard-content.txt';
+    /**
+     * Maximum pointer travel still treated as a tap on the touch focus overlay.
+     *
+     * @private function of BookEditorMonaco
+     */
+    const TOUCH_TAP_THRESHOLD = 10;
+    /**
+     * Lists transferable items from a browser `DataTransfer` object.
+     *
+     * @private function of BookEditorMonaco
+     */
+    function listDataTransferItems(dataTransfer) {
+        const items = [];
+        for (let index = 0; index < dataTransfer.items.length; index++) {
+            const item = dataTransfer.items[index];
+            if (item) {
+                items.push(item);
+            }
+        }
+        return items;
+    }
+    /**
+     * Removes duplicate files by using stable file metadata signature.
+     *
+     * @private function of BookEditorMonaco
+     */
+    function deduplicateFiles(files) {
+        const uniqueFiles = new Map();
+        for (const file of files) {
+            uniqueFiles.set(`${file.name}:${file.type}:${file.size}`, file);
+        }
+        return Array.from(uniqueFiles.values());
+    }
+    /**
+     * Extracts all file-like clipboard/drop payloads from a `DataTransfer`.
+     *
+     * @private function of BookEditorMonaco
+     */
+    function getDataTransferFiles(dataTransfer) {
+        const directFiles = Array.from(dataTransfer.files || []);
+        const itemFiles = listDataTransferItems(dataTransfer)
+            .filter((item) => item.kind === 'file')
+            .map((item) => item.getAsFile())
+            .filter((file) => file !== null);
+        return deduplicateFiles([...directFiles, ...itemFiles]);
+    }
+    /**
+     * Picks the richest textual clipboard item that should be uploaded as a document.
+     *
+     * @private function of BookEditorMonaco
+     */
+    function getRichClipboardTextItem(dataTransfer) {
+        const items = listDataTransferItems(dataTransfer);
+        const hasPlainTextItem = items.some((item) => item.kind === 'string' && item.type.toLowerCase() === 'text/plain');
+        const applicationItem = items.find((item) => item.kind === 'string' && item.type.toLowerCase().startsWith('application/'));
+        if (applicationItem) {
+            return applicationItem;
+        }
+        if (hasPlainTextItem) {
+            return null;
+        }
+        const richTextItem = items.find((item) => {
+            if (item.kind !== 'string') {
+                return false;
+            }
+            return RICH_CLIPBOARD_TEXT_MIME_TYPES.has(item.type.toLowerCase());
+        });
+        return richTextItem || null;
+    }
+    /**
+     * Resolves whether paste should route into upload workflow instead of text insert.
+     *
+     * @private function of BookEditorMonaco
+     */
+    function hasUploadableClipboardContent(dataTransfer) {
+        if (getDataTransferFiles(dataTransfer).length > 0) {
+            return true;
+        }
+        return getRichClipboardTextItem(dataTransfer) !== null;
+    }
+    /**
+     * Reads string payload from clipboard item.
+     *
+     * @private function of BookEditorMonaco
+     */
+    function getClipboardItemString(item) {
+        return new Promise((resolve) => {
+            try {
+                item.getAsString((value) => resolve(value || ''));
+            }
+            catch (_a) {
+                resolve('');
+            }
+        });
+    }
+    /**
+     * Determines filename for generated clipboard rich-content uploads.
+     *
+     * @private function of BookEditorMonaco
+     */
+    function getClipboardRichContentFilename(mimeType) {
+        return CLIPBOARD_RICH_CONTENT_FILENAMES[mimeType.toLowerCase()] || DEFAULT_CLIPBOARD_RICH_CONTENT_FILENAME;
+    }
+    /**
+     * Converts clipboard payload into upload-ready files.
+     *
+     * @private function of BookEditorMonaco
+     */
+    async function resolveClipboardUploadFiles(dataTransfer) {
+        const files = getDataTransferFiles(dataTransfer);
+        if (files.length > 0) {
+            return files;
+        }
+        const richTextItem = getRichClipboardTextItem(dataTransfer);
+        if (!richTextItem) {
+            return [];
+        }
+        const content = await getClipboardItemString(richTextItem);
+        const mimeType = richTextItem.type || 'text/plain';
+        if (!content.trim()) {
+            return [];
+        }
+        return [new File([content], getClipboardRichContentFilename(mimeType), { type: mimeType })];
+    }
+    /**
+     * Manages drag, paste and file input interactions for `BookEditorMonaco`.
+     *
+     * @private function of BookEditorMonaco
+     */
+    function useBookEditorMonacoInteractions({ editor, handleFiles, }) {
+        const [isDragOver, setIsDragOver] = react.useState(false);
+        const touchStartRef = react.useRef(null);
+        const fileUploadInputRef = react.useRef(null);
+        const cameraInputRef = react.useRef(null);
+        const handleDrop = react.useCallback(async (event) => {
+            event.preventDefault();
+            setIsDragOver(false);
+            const files = getDataTransferFiles(event.dataTransfer);
+            await handleFiles(files);
+        }, [handleFiles]);
+        const handlePaste = react.useCallback(async (event) => {
+            const clipboardData = event.clipboardData;
+            if (!hasUploadableClipboardContent(clipboardData)) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            const files = await resolveClipboardUploadFiles(clipboardData);
+            await handleFiles(files);
+        }, [handleFiles]);
+        const handleUploadDocument = react.useCallback(() => {
+            var _a;
+            (_a = fileUploadInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }, []);
+        const handleTakePhoto = react.useCallback(() => {
+            var _a;
+            (_a = cameraInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }, []);
+        const handleFileInputChange = react.useCallback((event) => {
+            const files = Array.from(event.target.files || []);
+            void handleFiles(files);
+            event.target.value = '';
+        }, [handleFiles]);
+        const handleDragOver = react.useCallback((event) => {
+            event.preventDefault();
+            setIsDragOver(true);
+        }, []);
+        const handleDragEnter = react.useCallback((event) => {
+            event.preventDefault();
+            setIsDragOver(true);
+        }, []);
+        const handleDragLeave = react.useCallback((event) => {
+            event.preventDefault();
+            setIsDragOver(false);
+        }, []);
+        const handleFocusOverlayTouchStart = react.useCallback((event) => {
+            const touch = event.touches[0];
+            if (touch) {
+                touchStartRef.current = { x: touch.clientX, y: touch.clientY };
+            }
+        }, []);
+        const handleFocusOverlayTouchEnd = react.useCallback((event) => {
+            event.preventDefault();
+            const touch = event.changedTouches[0];
+            if (touch && touchStartRef.current) {
+                const deltaX = Math.abs(touch.clientX - touchStartRef.current.x);
+                const deltaY = Math.abs(touch.clientY - touchStartRef.current.y);
+                if (deltaX < TOUCH_TAP_THRESHOLD && deltaY < TOUCH_TAP_THRESHOLD) {
+                    editor === null || editor === void 0 ? void 0 : editor.focus();
+                }
+            }
+            touchStartRef.current = null;
+        }, [editor]);
+        const focusOverlayTouchHandlers = react.useMemo(() => ({
+            onTouchStart: handleFocusOverlayTouchStart,
+            onTouchEnd: handleFocusOverlayTouchEnd,
+        }), [handleFocusOverlayTouchEnd, handleFocusOverlayTouchStart]);
+        return {
+            isDragOver,
+            fileUploadInputRef,
+            cameraInputRef,
+            handleDrop,
+            handlePaste,
+            handleUploadDocument,
+            handleTakePhoto,
+            handleFileInputChange,
+            handleDragOver,
+            handleDragEnter,
+            handleDragLeave,
+            focusOverlayTouchHandlers,
+        };
+    }
+
     /**
      * Priority order for the important commitments shown first in catalogues and intellisense.
      *
@@ -24213,6 +24448,181 @@
         }, [monaco, theme]);
     }
 
+    /**
+     * Local storage key that enables BookEditor Monaco lifecycle debug logs in development.
+     *
+     * @private function of BookEditorMonaco
+     */
+    const BOOK_EDITOR_MONACO_DEBUG_STORAGE_KEY = 'promptbook-debug-book-editor-monaco';
+    /**
+     * Duration of the save notification.
+     *
+     * @private function of BookEditorMonaco
+     */
+    const SAVE_NOTIFICATION_HIDE_DELAY_MS = 2000;
+    /**
+     * Resolves whether verbose BookEditor Monaco lifecycle logs are enabled.
+     *
+     * @private function of BookEditorMonaco
+     */
+    function isBookEditorMonacoDebugEnabled() {
+        if (process.env.NODE_ENV === 'production' || typeof window === 'undefined') {
+            return false;
+        }
+        try {
+            return window.localStorage.getItem(BOOK_EDITOR_MONACO_DEBUG_STORAGE_KEY) === '1';
+        }
+        catch (_a) {
+            return false;
+        }
+    }
+    /**
+     * Prints one BookEditor Monaco debug line when the dev debug flag is enabled.
+     *
+     * @param message - Human-readable lifecycle message.
+     *
+     * @private function of BookEditorMonaco
+     */
+    function logBookEditorMonacoDebug(message) {
+        if (!isBookEditorMonacoDebugEnabled()) {
+            return;
+        }
+        console.info(`[BookEditorMonaco] ${message}`);
+    }
+    /**
+     * Detects whether the current device primarily uses a coarse pointer.
+     *
+     * @private function of BookEditorMonaco
+     */
+    function detectIsTouchDevice() {
+        if (typeof window === 'undefined') {
+            return false;
+        }
+        return window.matchMedia('(pointer: coarse)').matches;
+    }
+    /**
+     * Manages Monaco lifecycle wiring for `BookEditorMonaco`.
+     *
+     * @private function of BookEditorMonaco
+     */
+    function useBookEditorMonacoLifecycle({ monaco, theme, }) {
+        const [editor, setEditor] = react.useState(null);
+        const [isFocused, setIsFocused] = react.useState(false);
+        const [isTouchDevice, setIsTouchDevice] = react.useState(false);
+        const [isSavedShown, setIsSavedShown] = react.useState(false);
+        /**
+         * Re-applies Book language + theme to the currently mounted Monaco model.
+         */
+        const reapplyBookLanguageAndTheme = react.useCallback((reason) => {
+            if (!editor || !monaco) {
+                return;
+            }
+            ensureBookEditorMonacoLanguageForEditor({ monaco, monacoEditor: editor, theme });
+            logBookEditorMonacoDebug(`Re-applied Book Monaco language/theme (${reason}).`);
+        }, [editor, monaco, theme]);
+        /**
+         * Re-triggers the transient save toast without preventing the browser save dialog.
+         */
+        const showSavedNotification = react.useCallback(() => {
+            setIsSavedShown(false);
+            setTimeout(() => setIsSavedShown(true), 0);
+        }, []);
+        react.useEffect(() => {
+            setIsTouchDevice(detectIsTouchDevice());
+        }, []);
+        react.useEffect(() => {
+            if (!editor || !monaco) {
+                return;
+            }
+            const focusListener = editor.onDidFocusEditorWidget(() => {
+                setIsFocused(true);
+                reapplyBookLanguageAndTheme('focus');
+            });
+            const blurListener = editor.onDidBlurEditorWidget(() => {
+                setIsFocused(false);
+            });
+            const saveAction = editor.addAction({
+                id: 'save-book',
+                label: 'Save',
+                keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS],
+                run: () => {
+                    showSavedNotification();
+                    // Note: We don't prevent default, so browser's save dialog still opens
+                },
+            });
+            return () => {
+                focusListener.dispose();
+                blurListener.dispose();
+                saveAction.dispose();
+            };
+        }, [editor, monaco, reapplyBookLanguageAndTheme, showSavedNotification]);
+        react.useEffect(() => {
+            reapplyBookLanguageAndTheme('editor-ready');
+        }, [reapplyBookLanguageAndTheme]);
+        react.useEffect(() => {
+            if (!editor || !monaco) {
+                return;
+            }
+            const handlePopState = () => {
+                reapplyBookLanguageAndTheme('history-popstate');
+            };
+            const handlePageShow = () => {
+                reapplyBookLanguageAndTheme('pageshow');
+            };
+            const handleWindowFocus = () => {
+                reapplyBookLanguageAndTheme('window-focus');
+            };
+            const handleVisibilityChange = () => {
+                if (document.visibilityState === 'visible') {
+                    reapplyBookLanguageAndTheme('visibility-visible');
+                }
+            };
+            window.addEventListener('popstate', handlePopState);
+            window.addEventListener('pageshow', handlePageShow);
+            window.addEventListener('focus', handleWindowFocus);
+            document.addEventListener('visibilitychange', handleVisibilityChange);
+            return () => {
+                window.removeEventListener('popstate', handlePopState);
+                window.removeEventListener('pageshow', handlePageShow);
+                window.removeEventListener('focus', handleWindowFocus);
+                document.removeEventListener('visibilitychange', handleVisibilityChange);
+            };
+        }, [editor, monaco, reapplyBookLanguageAndTheme]);
+        react.useEffect(() => {
+            if (!isSavedShown) {
+                return;
+            }
+            const timer = setTimeout(() => {
+                setIsSavedShown(false);
+            }, SAVE_NOTIFICATION_HIDE_DELAY_MS);
+            return () => {
+                clearTimeout(timer);
+            };
+        }, [isSavedShown]);
+        /**
+         * Ensures Book language/tokenizer is ready before Monaco creates the editor model.
+         */
+        const handleBeforeMonacoMount = react.useCallback((beforeMountMonaco) => {
+            ensureBookEditorMonacoLanguage(beforeMountMonaco, theme);
+        }, [theme]);
+        /**
+         * Re-applies Book language/theme once Monaco editor is mounted.
+         */
+        const handleMonacoMount = react.useCallback((mountedEditor, mountedMonaco) => {
+            setEditor(mountedEditor);
+            ensureBookEditorMonacoLanguageForEditor({ monaco: mountedMonaco, monacoEditor: mountedEditor, theme });
+            logBookEditorMonacoDebug('Mounted Monaco editor and re-applied Book language/theme.');
+        }, [theme]);
+        return {
+            editor,
+            isFocused,
+            isTouchDevice,
+            isSavedShown,
+            handleBeforeMonacoMount,
+            handleMonacoMount,
+        };
+    }
+
     /**
      * Relative Y offset multiplier for aligning line background with Monaco rendering.
      *
@@ -25022,190 +25432,101 @@
      */
     const INVALID_CSS_IDENTIFIER_CHARACTER_PATTERN = /[^a-zA-Z0-9_-]/g;
     /**
-     * Clipboard MIME types treated as rich text documents for upload.
+     * Base Book editor font size before zoom scaling.
      *
      * @private Internal utility of `BookEditorMonaco`.
      */
-    const RICH_CLIPBOARD_TEXT_MIME_TYPES = new Set(['text/html', 'text/rtf']);
+    const BASE_FONT_SIZE = 20;
     /**
-     * Uploaded filename mapping for known rich clipboard MIME types.
+     * Minimum supported Book editor font size after zoom scaling.
      *
      * @private Internal utility of `BookEditorMonaco`.
      */
-    const CLIPBOARD_RICH_CONTENT_FILENAMES = {
-        'text/html': 'clipboard-content.html',
-        'text/rtf': 'clipboard-content.rtf',
-        'application/rtf': 'clipboard-content.rtf',
-    };
+    const MIN_FONT_SIZE = 8;
     /**
-     * Fallback filename used when clipboard MIME type is unknown.
-     *
-     * @private Internal utility of `BookEditorMonaco`.
-     */
-    const DEFAULT_CLIPBOARD_RICH_CONTENT_FILENAME = 'clipboard-content.txt';
-    /**
-     * Local storage key that enables BookEditor Monaco lifecycle debug logs in development.
-     *
-     * @private Internal utility of `BookEditorMonaco`.
-     */
-    const BOOK_EDITOR_MONACO_DEBUG_STORAGE_KEY = 'promptbook-debug-book-editor-monaco';
-    /**
-     * Resolves whether verbose BookEditor Monaco lifecycle logs are enabled.
+     * Default Monaco scrollbar size before zoom scaling.
      *
      * @private Internal utility of `BookEditorMonaco`.
      */
-    function isBookEditorMonacoDebugEnabled() {
-        if (process.env.NODE_ENV === 'production' || typeof window === 'undefined') {
-            return false;
-        }
-        try {
-            return window.localStorage.getItem(BOOK_EDITOR_MONACO_DEBUG_STORAGE_KEY) === '1';
-        }
-        catch (_a) {
-            return false;
-        }
-    }
-    /**
-     * Prints one BookEditor Monaco debug line when the dev debug flag is enabled.
-     *
-     * @param message - Human-readable lifecycle message.
-     *
-     * @private Internal utility of `BookEditorMonaco`.
-     */
-    function logBookEditorMonacoDebug(message) {
-        if (!isBookEditorMonacoDebugEnabled()) {
-            return;
-        }
-        console.info(`[BookEditorMonaco] ${message}`);
-    }
-    /**
-     * Lists transferable items from a browser `DataTransfer` object.
-     *
-     * @private Internal utility of `BookEditorMonaco`.
-     */
-    function listDataTransferItems(dataTransfer) {
-        const items = [];
-        for (let index = 0; index < dataTransfer.items.length; index++) {
-            const item = dataTransfer.items[index];
-            if (item) {
-                items.push(item);
-            }
-        }
-        return items;
-    }
-    /**
-     * Removes duplicate files by using stable file metadata signature.
-     *
-     * @private Internal utility of `BookEditorMonaco`.
-     */
-    function deduplicateFiles(files) {
-        const uniqueFiles = new Map();
-        for (const file of files) {
-            uniqueFiles.set(`${file.name}:${file.type}:${file.size}`, file);
-        }
-        return Array.from(uniqueFiles.values());
-    }
-    /**
-     * Extracts all file-like clipboard/drop payloads from a `DataTransfer`.
-     *
-     * @private Internal utility of `BookEditorMonaco`.
-     */
-    function getDataTransferFiles(dataTransfer) {
-        const directFiles = Array.from(dataTransfer.files || []);
-        const itemFiles = listDataTransferItems(dataTransfer)
-            .filter((item) => item.kind === 'file')
-            .map((item) => item.getAsFile())
-            .filter((file) => file !== null);
-        return deduplicateFiles([...directFiles, ...itemFiles]);
-    }
+    const BASE_SCROLLBAR_SIZE = 5;
     /**
-     * Picks the richest textual clipboard item that should be uploaded as a document.
+     * Minimum Monaco scrollbar size after zoom scaling.
      *
      * @private Internal utility of `BookEditorMonaco`.
      */
-    function getRichClipboardTextItem(dataTransfer) {
-        const items = listDataTransferItems(dataTransfer);
-        const hasPlainTextItem = items.some((item) => item.kind === 'string' && item.type.toLowerCase() === 'text/plain');
-        const applicationItem = items.find((item) => item.kind === 'string' && item.type.toLowerCase().startsWith('application/'));
-        if (applicationItem) {
-            return applicationItem;
-        }
-        if (hasPlainTextItem) {
-            return null;
-        }
-        const richTextItem = items.find((item) => {
-            if (item.kind !== 'string') {
-                return false;
-            }
-            return RICH_CLIPBOARD_TEXT_MIME_TYPES.has(item.type.toLowerCase());
-        });
-        if (richTextItem) {
-            return richTextItem;
-        }
-        return null;
-    }
+    const MIN_SCROLLBAR_SIZE = 2;
     /**
-     * Resolves whether paste should route into upload workflow instead of text insert.
+     * Minimum left padding Monaco reserves for custom line decorations.
      *
      * @private Internal utility of `BookEditorMonaco`.
      */
-    function hasUploadableClipboardContent(dataTransfer) {
-        if (getDataTransferFiles(dataTransfer).length > 0) {
-            return true;
-        }
-        return getRichClipboardTextItem(dataTransfer) !== null;
-    }
+    const MIN_CONTENT_PADDING_LEFT = 8;
     /**
-     * Reads string payload from clipboard item.
+     * Creates a hydration-stable CSS class name from React's `useId()` value.
      *
      * @private Internal utility of `BookEditorMonaco`.
      */
-    function getClipboardItemString(item) {
-        return new Promise((resolve) => {
-            try {
-                item.getAsString((value) => resolve(value || ''));
-            }
-            catch (_a) {
-                resolve('');
-            }
-        });
+    function createStableBookEditorInstanceClassName(reactId) {
+        return `book-editor-instance-${reactId.replace(INVALID_CSS_IDENTIFIER_CHARACTER_PATTERN, '-')}`;
     }
     /**
-     * Determines filename for generated clipboard rich-content uploads.
+     * Resolves Monaco layout values from the active Book editor zoom level.
      *
      * @private Internal utility of `BookEditorMonaco`.
      */
-    function getClipboardRichContentFilename(mimeType) {
-        return CLIPBOARD_RICH_CONTENT_FILENAMES[mimeType.toLowerCase()] || DEFAULT_CLIPBOARD_RICH_CONTENT_FILENAME;
+    function createBookEditorMonacoScale(zoomLevel) {
+        return {
+            scaledLineHeight: Math.round(BookEditorMonacoConstants.LINE_HEIGHT * zoomLevel),
+            scaledContentPaddingLeft: Math.max(MIN_CONTENT_PADDING_LEFT, Math.round(BookEditorMonacoConstants.CONTENT_PADDING_LEFT * zoomLevel)),
+            scaledVerticalLineLeft: Math.max(0, Math.round(BookEditorMonacoConstants.VERTICAL_LINE_LEFT * zoomLevel)),
+            scaledFontSize: Math.max(MIN_FONT_SIZE, Math.round(BASE_FONT_SIZE * zoomLevel)),
+            scaledScrollbarSize: Math.max(MIN_SCROLLBAR_SIZE, Math.round(BASE_SCROLLBAR_SIZE * zoomLevel)),
+        };
     }
     /**
-     * Creates a hydration-stable CSS class name from React's `useId()` value.
+     * Determines whether the Book editor action bar should be shown.
      *
      * @private Internal utility of `BookEditorMonaco`.
      */
-    function createStableBookEditorInstanceClassName(reactId) {
-        return `book-editor-instance-${reactId.replace(INVALID_CSS_IDENTIFIER_CHARACTER_PATTERN, '-')}`;
+    function isBookEditorMonacoActionbarVisible({ hoistedMenuItems, isUploadButtonShown, isCameraButtonShown, isDownloadButtonShown, isAboutButtonShown, isFullscreenButtonShown, }) {
+        return (Boolean(hoistedMenuItems && hoistedMenuItems.length > 0) ||
+            Boolean(isUploadButtonShown) ||
+            Boolean(isCameraButtonShown) ||
+            Boolean(isDownloadButtonShown) ||
+            Boolean(isAboutButtonShown) ||
+            Boolean(isFullscreenButtonShown));
     }
     /**
-     * Converts clipboard payload into upload-ready files.
+     * Builds the Monaco editor options consumed by `MonacoEditorWithShadowDom`.
      *
      * @private Internal utility of `BookEditorMonaco`.
      */
-    async function resolveClipboardUploadFiles(dataTransfer) {
-        const files = getDataTransferFiles(dataTransfer);
-        if (files.length > 0) {
-            return files;
-        }
-        const richTextItem = getRichClipboardTextItem(dataTransfer);
-        if (!richTextItem) {
-            return [];
-        }
-        const content = await getClipboardItemString(richTextItem);
-        const mimeType = richTextItem.type || 'text/plain';
-        if (!content.trim()) {
-            return [];
-        }
-        return [new File([content], getClipboardRichContentFilename(mimeType), { type: mimeType })];
+    function createBookEditorMonacoOptions({ isReadonly, translations, scaledFontSize, scaledLineHeight, scaledContentPaddingLeft, scaledScrollbarSize, }) {
+        return {
+            readOnly: isReadonly,
+            readOnlyMessage: {
+                value: (translations === null || translations === void 0 ? void 0 : translations.readonlyMessage) || 'You cannot edit this book',
+            },
+            wordWrap: 'on',
+            minimap: { enabled: false },
+            lineNumbers: 'off',
+            fontSize: scaledFontSize,
+            fontFamily: `"Playfair Display", serif`,
+            lineHeight: scaledLineHeight,
+            renderLineHighlight: 'none',
+            lineDecorationsWidth: scaledContentPaddingLeft,
+            glyphMargin: false,
+            folding: false,
+            lineNumbersMinChars: 0,
+            links: true,
+            scrollbar: {
+                vertical: 'auto',
+                horizontal: 'hidden',
+                verticalScrollbarSize: scaledScrollbarSize,
+                arrowSize: 0,
+                useShadows: false,
+            },
+        };
     }
     /**
      * Handles book editor monaco.
@@ -25215,29 +25536,40 @@
     function BookEditorMonaco(props) {
         const { value, onChange, diagnostics, isReadonly, theme = 'LIGHT', translations, onFileUpload, isUploadButtonShown, isCameraButtonShown, isDownloadButtonShown, isAboutButtonShown = true, isFullscreenButtonShown = true, onFullscreenClick, isFullscreen, zoom = 1, monacoModelPath, hoistedMenuItems, } = props;
         const zoomLevel = zoom;
-        const scaledLineHeight = Math.round(BookEditorMonacoConstants.LINE_HEIGHT * zoomLevel);
-        const scaledContentPaddingLeft = Math.max(8, Math.round(BookEditorMonacoConstants.CONTENT_PADDING_LEFT * zoomLevel));
-        const scaledVerticalLineLeft = Math.max(0, Math.round(BookEditorMonacoConstants.VERTICAL_LINE_LEFT * zoomLevel));
-        const baseFontSize = 20;
-        const scaledFontSize = Math.max(8, Math.round(baseFontSize * zoomLevel));
-        const scaledScrollbarSize = Math.max(2, Math.round(5 * zoomLevel));
-        const [isDragOver, setIsDragOver] = react.useState(false);
-        const [editor, setEditor] = react.useState(null);
-        const [isFocused, setIsFocused] = react.useState(false);
-        const [isTouchDevice, setIsTouchDevice] = react.useState(false);
-        const [isSavedShown, setIsSavedShown] = react.useState(false);
+        const { scaledLineHeight, scaledContentPaddingLeft, scaledVerticalLineLeft, scaledFontSize, scaledScrollbarSize } = createBookEditorMonacoScale(zoomLevel);
         const monaco = MonacoEditor.useMonaco();
         const reactId = react.useId();
         const instanceClass = createStableBookEditorInstanceClassName(reactId);
-        const touchStartRef = react.useRef(null);
-        const fileUploadInputRef = react.useRef(null);
-        const cameraInputRef = react.useRef(null);
+        const { editor, isFocused, isTouchDevice, isSavedShown, handleBeforeMonacoMount, handleMonacoMount } = useBookEditorMonacoLifecycle({
+            monaco,
+            theme,
+        });
         const { activeUploadItems, uploadStats, pauseUpload, resumeUpload, handleFiles } = useBookEditorMonacoUploads({
             editor,
             monaco,
             onFileUpload,
         });
+        const { isDragOver, fileUploadInputRef, cameraInputRef, handleDrop, handlePaste, handleUploadDocument, handleTakePhoto, handleFileInputChange, handleDragOver, handleDragEnter, handleDragLeave, focusOverlayTouchHandlers, } = useBookEditorMonacoInteractions({
+            editor,
+            handleFiles,
+        });
         const combinedDiagnostics = [...(diagnostics || []), ...createDeprecatedCommitmentDiagnostics(value)];
+        const isActionBarVisible = isBookEditorMonacoActionbarVisible({
+            hoistedMenuItems,
+            isUploadButtonShown,
+            isCameraButtonShown,
+            isDownloadButtonShown,
+            isAboutButtonShown,
+            isFullscreenButtonShown,
+        });
+        const monacoOptions = createBookEditorMonacoOptions({
+            isReadonly,
+            translations,
+            scaledFontSize,
+            scaledLineHeight,
+            scaledContentPaddingLeft,
+            scaledScrollbarSize,
+        });
         useBookEditorMonacoLanguage({ monaco, theme });
         useBookEditorMonacoDiagnostics({ monaco, editor, diagnostics: combinedDiagnostics });
         useBookEditorMonacoDecorations({ editor, monaco });
@@ -25249,171 +25581,6 @@
             zoomLevel,
             theme,
         });
-        /**
-         * Re-applies Book language + theme to the currently mounted Monaco model.
-         */
-        const reapplyBookLanguageAndTheme = react.useCallback((reason) => {
-            if (!editor || !monaco) {
-                return;
-            }
-            ensureBookEditorMonacoLanguageForEditor({ monaco, monacoEditor: editor, theme });
-            logBookEditorMonacoDebug(`Re-applied Book Monaco language/theme (${reason}).`);
-        }, [editor, monaco, theme]);
-        react.useEffect(() => {
-            setIsTouchDevice(typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches);
-        }, []);
-        react.useEffect(() => {
-            if (!editor || !monaco) {
-                return;
-            }
-            const focusListener = editor.onDidFocusEditorWidget(() => {
-                setIsFocused(true);
-                reapplyBookLanguageAndTheme('focus');
-            });
-            const blurListener = editor.onDidBlurEditorWidget(() => {
-                setIsFocused(false);
-            });
-            const saveAction = editor.addAction({
-                id: 'save-book',
-                label: 'Save',
-                keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS],
-                run: () => {
-                    setIsSavedShown(false);
-                    setTimeout(() => setIsSavedShown(true), 0);
-                    // Note: We don't prevent default, so browser's save dialog still opens
-                },
-            });
-            return () => {
-                focusListener.dispose();
-                blurListener.dispose();
-                saveAction.dispose();
-            };
-        }, [editor, monaco, reapplyBookLanguageAndTheme]);
-        react.useEffect(() => {
-            reapplyBookLanguageAndTheme('editor-ready');
-        }, [reapplyBookLanguageAndTheme]);
-        react.useEffect(() => {
-            if (!editor || !monaco) {
-                return;
-            }
-            const handlePopState = () => {
-                reapplyBookLanguageAndTheme('history-popstate');
-            };
-            const handlePageShow = () => {
-                reapplyBookLanguageAndTheme('pageshow');
-            };
-            const handleWindowFocus = () => {
-                reapplyBookLanguageAndTheme('window-focus');
-            };
-            const handleVisibilityChange = () => {
-                if (document.visibilityState === 'visible') {
-                    reapplyBookLanguageAndTheme('visibility-visible');
-                }
-            };
-            window.addEventListener('popstate', handlePopState);
-            window.addEventListener('pageshow', handlePageShow);
-            window.addEventListener('focus', handleWindowFocus);
-            document.addEventListener('visibilitychange', handleVisibilityChange);
-            return () => {
-                window.removeEventListener('popstate', handlePopState);
-                window.removeEventListener('pageshow', handlePageShow);
-                window.removeEventListener('focus', handleWindowFocus);
-                document.removeEventListener('visibilitychange', handleVisibilityChange);
-            };
-        }, [editor, monaco, reapplyBookLanguageAndTheme]);
-        react.useEffect(() => {
-            if (!isSavedShown) {
-                return;
-            }
-            const timer = setTimeout(() => {
-                setIsSavedShown(false);
-            }, 2000);
-            return () => {
-                clearTimeout(timer);
-            };
-        }, [isSavedShown]);
-        const handleDrop = react.useCallback(async (event) => {
-            event.preventDefault();
-            setIsDragOver(false);
-            const files = getDataTransferFiles(event.dataTransfer);
-            await handleFiles(files);
-        }, [handleFiles]);
-        const handlePaste = react.useCallback(async (event) => {
-            const clipboardData = event.clipboardData;
-            if (!hasUploadableClipboardContent(clipboardData)) {
-                return;
-            }
-            event.preventDefault();
-            event.stopPropagation();
-            const files = await resolveClipboardUploadFiles(clipboardData);
-            await handleFiles(files);
-        }, [handleFiles]);
-        const handleUploadDocument = react.useCallback(() => {
-            var _a;
-            (_a = fileUploadInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-        }, []);
-        const handleTakePhoto = react.useCallback(() => {
-            var _a;
-            (_a = cameraInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-        }, []);
-        const handleFileInputChange = react.useCallback((event) => {
-            const files = Array.from(event.target.files || []);
-            void handleFiles(files);
-            event.target.value = '';
-        }, [handleFiles]);
-        /**
-         * Ensures Book language/tokenizer is ready before Monaco creates the editor model.
-         */
-        const handleBeforeMonacoMount = react.useCallback((beforeMountMonaco) => {
-            ensureBookEditorMonacoLanguage(beforeMountMonaco, theme);
-        }, [theme]);
-        /**
-         * Re-applies Book language/theme once Monaco editor is mounted.
-         */
-        const handleMonacoMount = react.useCallback((mountedEditor, mountedMonaco) => {
-            setEditor(mountedEditor);
-            ensureBookEditorMonacoLanguageForEditor({ monaco: mountedMonaco, monacoEditor: mountedEditor, theme });
-            logBookEditorMonacoDebug('Mounted Monaco editor and re-applied Book language/theme.');
-        }, [theme]);
-        const handleDragOver = react.useCallback((event) => {
-            event.preventDefault();
-            setIsDragOver(true);
-        }, []);
-        const handleDragEnter = react.useCallback((event) => {
-            event.preventDefault();
-            setIsDragOver(true);
-        }, []);
-        const handleDragLeave = react.useCallback((event) => {
-            event.preventDefault();
-            setIsDragOver(false);
-        }, []);
-        const focusOverlayTouchHandlers = {
-            onTouchStart: (event) => {
-                const touch = event.touches[0];
-                if (touch) {
-                    touchStartRef.current = { x: touch.clientX, y: touch.clientY };
-                }
-            },
-            onTouchEnd: (event) => {
-                event.preventDefault();
-                const touch = event.changedTouches[0];
-                if (touch && touchStartRef.current) {
-                    const deltaX = Math.abs(touch.clientX - touchStartRef.current.x);
-                    const deltaY = Math.abs(touch.clientY - touchStartRef.current.y);
-                    const threshold = 10;
-                    if (deltaX < threshold && deltaY < threshold) {
-                        editor === null || editor === void 0 ? void 0 : editor.focus();
-                    }
-                }
-                touchStartRef.current = null;
-            },
-        };
-        const isActionBarVisible = Boolean(hoistedMenuItems && hoistedMenuItems.length > 0) ||
-            isUploadButtonShown ||
-            isCameraButtonShown ||
-            isDownloadButtonShown ||
-            isAboutButtonShown ||
-            isFullscreenButtonShown;
         return (jsxRuntime.jsxs("div", { className: classNames(styles$d.bookEditorContainer, instanceClass), onDrop: handleDrop, onPaste: handlePaste, onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, children: [isActionBarVisible && (jsxRuntime.jsx(BookEditorActionbar, { value,
                     isUploadButtonShown,
                     isCameraButtonShown: isCameraButtonShown !== null && isCameraButtonShown !== void 0 ? isCameraButtonShown : isTouchDevice,
@@ -25439,31 +25606,7 @@
                                 height: '100%',
                                 width: '100%',
                                 backgroundColor: 'transparent',
-                            }, ...focusOverlayTouchHandlers })), jsxRuntime.jsx(MonacoEditorWithShadowDom, { language: BookEditorMonacoConstants.BOOK_LANGUAGE_ID, theme: BookEditorMonacoConstants.BOOK_THEME_ID, path: monacoModelPath, saveViewState: Boolean(monacoModelPath), value: value, beforeMount: handleBeforeMonacoMount, onMount: handleMonacoMount, onChange: (newValue) => onChange === null || onChange === void 0 ? void 0 : onChange(newValue), options: {
-                                readOnly: isReadonly,
-                                readOnlyMessage: {
-                                    value: (translations === null || translations === void 0 ? void 0 : translations.readonlyMessage) || 'You cannot edit this book',
-                                },
-                                wordWrap: 'on',
-                                minimap: { enabled: false },
-                                lineNumbers: 'off',
-                                fontSize: scaledFontSize,
-                                fontFamily: `"Playfair Display", serif`,
-                                lineHeight: scaledLineHeight,
-                                renderLineHighlight: 'none',
-                                lineDecorationsWidth: scaledContentPaddingLeft,
-                                glyphMargin: false,
-                                folding: false,
-                                lineNumbersMinChars: 0,
-                                links: true,
-                                scrollbar: {
-                                    vertical: 'auto',
-                                    horizontal: 'hidden',
-                                    verticalScrollbarSize: scaledScrollbarSize,
-                                    arrowSize: 0,
-                                    useShadows: false,
-                                },
-                            }, loading: jsxRuntime.jsx("div", { className: styles$d.loading, children: "\uD83D\uDCD6" }) })] })] }));
+                            }, ...focusOverlayTouchHandlers })), jsxRuntime.jsx(MonacoEditorWithShadowDom, { language: BookEditorMonacoConstants.BOOK_LANGUAGE_ID, theme: BookEditorMonacoConstants.BOOK_THEME_ID, path: monacoModelPath, saveViewState: Boolean(monacoModelPath), value: value, beforeMount: handleBeforeMonacoMount, onMount: handleMonacoMount, onChange: (newValue) => onChange === null || onChange === void 0 ? void 0 : onChange(newValue), options: monacoOptions, loading: jsxRuntime.jsx("div", { className: styles$d.loading, children: "\uD83D\uDCD6" }) })] })] }));
     }
 
     /**
@@ -41080,8 +41223,8 @@
          * Prepares an AgentKit agent with optional knowledge sources and tool definitions.
          */
         async prepareAgentKitAgent(options) {
-            var _a, _b;
-            const { name, instructions, knowledgeSources, tools, vectorStoreId: cachedVectorStoreId, storeAsPrepared, } = options;
+            var _a, _b, _c;
+            const { name, instructions, knowledgeSources, tools, nativeAgentKitTools, vectorStoreId: cachedVectorStoreId, storeAsPrepared, } = options;
             await this.ensureAgentKitDefaults();
             if (this.options.isVerbose) {
                 console.info('[🤰]', 'Preparing OpenAI AgentKit agent', {
@@ -41089,6 +41232,7 @@
                     instructionsLength: instructions.length,
                     knowledgeSourcesCount: (_a = knowledgeSources === null || knowledgeSources === void 0 ? void 0 : knowledgeSources.length) !== null && _a !== void 0 ? _a : 0,
                     toolsCount: (_b = tools === null || tools === void 0 ? void 0 : tools.length) !== null && _b !== void 0 ? _b : 0,
+                    nativeAgentKitToolsCount: (_c = nativeAgentKitTools === null || nativeAgentKitTools === void 0 ? void 0 : nativeAgentKitTools.length) !== null && _c !== void 0 ? _c : 0,
                 });
             }
             let vectorStoreId = cachedVectorStoreId;
@@ -41107,7 +41251,7 @@
                     vectorStoreId,
                 });
             }
-            const agentKitTools = this.buildAgentKitTools({ tools, vectorStoreId });
+            const agentKitTools = this.buildAgentKitTools({ tools, nativeAgentKitTools, vectorStoreId });
             const openAiAgentKitAgent = new agents.Agent({
                 name,
                 model: this.agentKitModelName,
@@ -41146,11 +41290,14 @@
          * Builds the tool list for AgentKit, including hosted file search when applicable.
          */
         buildAgentKitTools(options) {
-            const { tools, vectorStoreId } = options;
+            const { tools, nativeAgentKitTools, vectorStoreId } = options;
             const agentKitTools = [];
             if (vectorStoreId) {
                 agentKitTools.push(agents.fileSearchTool(vectorStoreId));
             }
+            if (nativeAgentKitTools && nativeAgentKitTools.length > 0) {
+                agentKitTools.push(...nativeAgentKitTools);
+            }
             if (tools && tools.length > 0) {
                 let scriptTools = null;
                 for (const toolDefinition of tools) {