@promptbook/components 0.102.0-4 → 0.102.0-5

package/esm/index.es.js

@@ -21,7 +21,7 @@ const BOOK_LANGUAGE_VERSION = '1.0.0';
  * @generated
  * @see https://github.com/webgptorg/promptbook
  */
-const PROMPTBOOK_ENGINE_VERSION = '0.102.0-4';
+const PROMPTBOOK_ENGINE_VERSION = '0.102.0-5';
 /**
  * TODO: string_promptbook_version should be constrained to the all versions of Promptbook engine
  * Note: [💞] Ignore a discrepancy between file name and entity name
@@ -3161,6 +3161,23 @@ const DEFAULT_BOOK_FONT_CLASS = styles.bookEditorSerif;
  * Note: [💞] Ignore a discrepancy between file name and entity name
  */
 
+// Debounce utility for BookEditor and related components
+// [🧠] Use this for debouncing highlight and other expensive operations
+/**
+ * @private
+ */
+function debounce(fn, delay) {
+    let timeout = null;
+    return (...args) => {
+        if (timeout)
+            clearTimeout(timeout);
+        timeout = setTimeout(() => fn(...args), delay);
+    };
+}
+/**
+ * Note: [💞] Ignore a discrepancy between file name and entity name
+ * TODO: !!! remove this file */
+
 /**
  * @private util of `<BookEditor />`
  */
@@ -3173,6 +3190,33 @@ function BookEditorInner(props) {
     const highlightRef = useRef(null);
     const [lineHeight, setLineHeight] = useState(32);
     const [isDragOver, setIsDragOver] = useState(false);
+    // Virtualization state: visible line range
+    const [visibleRange, setVisibleRange] = useState([0, 30]);
+    // Debounced update for visible range
+    const updateVisibleRange = useCallback(debounce(() => {
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        const scrollTop = textarea.scrollTop;
+        const clientHeight = textarea.clientHeight;
+        const totalLines = (value !== null && value !== void 0 ? value : '').split('\n').length;
+        const firstLine = Math.max(0, Math.floor(scrollTop / lineHeight) - 10); // buffer
+        const lastLine = Math.min(totalLines, Math.ceil((scrollTop + clientHeight) / lineHeight) + 10);
+        setVisibleRange([firstLine, lastLine]);
+    }, 30), [value, lineHeight]);
+    // Update visible range on scroll/resize/value change
+    useEffect(() => {
+        updateVisibleRange();
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        textarea.addEventListener('scroll', updateVisibleRange);
+        window.addEventListener('resize', updateVisibleRange);
+        return () => {
+            textarea.removeEventListener('scroll', updateVisibleRange);
+            window.removeEventListener('resize', updateVisibleRange);
+        };
+    }, [updateVisibleRange]);
     const handleChange = useCallback((event) => {
         const newValue = event.target.value;
         if (controlledValue !== undefined) {
@@ -3485,29 +3529,32 @@ function BookEditorInner(props) {
         });
         return parameters.sort((a, b) => a.start - b.start);
     }, [atParameterRegex, braceParameterRegex]);
+    // Virtualized, debounced highlight rendering for large books
     const highlightedHtml = useMemo(() => {
         const text = value !== null && value !== void 0 ? value : '';
-        let lastIndex = 0;
+        const lines = text.split('\n');
+        const [firstLine, lastLine] = visibleRange;
+        const visibleLines = lines.slice(firstLine, lastLine);
+        // Compute offset for correct line numbers
+        const offset = lines.slice(0, firstLine).join('\n').length + (firstLine > 0 ? 1 : 0);
         let out = '';
         const processedRanges = [];
-        // First, handle comment-like commitments (NOTE, COMMENT, NONCE) - they take highest priority
-        // and should be highlighted as gray comments, including their content
-        text.replace(commentRegex, (match, ...args) => {
-            const index = args[args.length - 2];
-            // Adjust index to skip the newline character if present at the beginning of match
+        // Highlighting logic for visible lines only
+        const visibleText = visibleLines.join('\n');
+        // First, handle comment-like commitments (NOTE, COMMENT, NONCE)
+        visibleText.replace(commentRegex, (match, ...args) => {
+            const index = args[args.length - 2] + offset;
             const adjustedStart = match.startsWith('\n') ? index + 1 : index;
             const adjustedMatch = match.startsWith('\n') ? match.slice(1) : match;
             processedRanges.push({ start: adjustedStart, end: adjustedStart + adjustedMatch.length, type: 'comment' });
             return match;
         });
-        // Then, handle META commitments (they take priority over regular commitments)
-        text.replace(metaRegex, (match, ...args) => {
-            const index = args[args.length - 2];
-            // Adjust index to skip the newline character if present at the beginning of match
+        // META commitments
+        visibleText.replace(metaRegex, (match, ...args) => {
+            const index = args[args.length - 2] + offset;
             const adjustedStart = match.startsWith('\n') ? index + 1 : index;
             const adjustedMatch = match.startsWith('\n') ? match.slice(1) : match;
             const matchEnd = adjustedStart + adjustedMatch.length;
-            // Check if this match overlaps with any existing range (especially comments)
             const overlaps = processedRanges.some((range) => (adjustedStart >= range.start && adjustedStart < range.end) ||
                 (matchEnd > range.start && matchEnd <= range.end) ||
                 (adjustedStart < range.start && matchEnd > range.end));
@@ -3516,14 +3563,12 @@ function BookEditorInner(props) {
             }
             return match;
         });
-        // Then handle regular commitment types, avoiding overlaps with META and comment ranges
-        text.replace(typeRegex, (match, ...args) => {
-            const index = args[args.length - 2];
-            // Adjust index to skip the newline character if present at the beginning of match
+        // Regular commitment types
+        visibleText.replace(typeRegex, (match, ...args) => {
+            const index = args[args.length - 2] + offset;
             const adjustedStart = match.startsWith('\n') ? index + 1 : index;
             const adjustedMatch = match.startsWith('\n') ? match.slice(1) : match;
             const matchEnd = adjustedStart + adjustedMatch.length;
-            // Check if this match overlaps with any existing range
             const overlaps = processedRanges.some((range) => (adjustedStart >= range.start && adjustedStart < range.end) ||
                 (matchEnd > range.start && matchEnd <= range.end) ||
                 (adjustedStart < range.start && matchEnd > range.end));
@@ -3532,29 +3577,28 @@ function BookEditorInner(props) {
             }
             return match;
         });
-        // Handle parameters using the unified extraction function - both @Parameter and {parameter} notations
-        // are treated as the same syntax feature with unified highlighting
-        const unifiedParameters = extractUnifiedParameters(text);
+        // Parameters
+        const unifiedParameters = extractUnifiedParameters(visibleText);
         unifiedParameters.forEach((param) => {
-            // Check if this parameter overlaps with any existing range
-            const overlaps = processedRanges.some((range) => (param.start >= range.start && param.start < range.end) ||
-                (param.end > range.start && param.end <= range.end) ||
-                (param.start < range.start && param.end > range.end));
+            const paramStart = param.start + offset;
+            const paramEnd = param.end + offset;
+            const overlaps = processedRanges.some((range) => (paramStart >= range.start && paramStart < range.end) ||
+                (paramEnd > range.start && paramEnd <= range.end) ||
+                (paramStart < range.start && paramEnd > range.end));
             if (!overlaps) {
                 processedRanges.push({
-                    start: param.start,
-                    end: param.end,
+                    start: paramStart,
+                    end: paramEnd,
                     type: 'parameter',
                 });
             }
         });
         // Sort ranges by start position
         processedRanges.sort((a, b) => a.start - b.start);
-        // Build the highlighted HTML
+        // Build the highlighted HTML for the visible lines only
+        let visibleLastIndex = offset;
         processedRanges.forEach((range) => {
-            // Add text before this range
-            out += escapeHtml(text.slice(lastIndex, range.start));
-            // Add highlighted text with appropriate class
+            out += escapeHtml(text.slice(visibleLastIndex, range.start));
             const matchText = text.slice(range.start, range.end);
             let cssClass;
             switch (range.type) {
@@ -3562,11 +3606,9 @@ function BookEditorInner(props) {
                     cssClass = 'book-highlight-keyword';
                     break;
                 case 'parameter':
-                    // Use the unified parameter class, but maintain backward compatibility
                     cssClass = 'book-highlight-parameter';
                     break;
                 case 'comment':
-                    // NOTE, COMMENT, NONCE commitments should be highlighted as gray comments
                     cssClass = 'book-highlight-comment';
                     break;
                 default:
@@ -3574,16 +3616,15 @@ function BookEditorInner(props) {
                     break;
             }
             out += `<span class="${cssClass}">${escapeHtml(matchText)}</span>`;
-            lastIndex = range.end;
+            visibleLastIndex = range.end;
         });
-        // Add remaining text
-        out += escapeHtml(text.slice(lastIndex));
-        const lines = out.split('\n');
-        if (lines.length > 0) {
-            lines[0] = `<span class="book-highlight-title">${lines[0]}</span>`;
-        }
-        return lines.join('\n');
-    }, [value, typeRegex, metaRegex, extractUnifiedParameters]);
+        out += escapeHtml(text.slice(visibleLastIndex, offset + visibleText.length));
+        const resultLines = out.split('\n').slice(firstLine, lastLine);
+        if (resultLines.length > 0 && firstLine === 0) {
+            resultLines[0] = `<span class="book-highlight-title">${resultLines[0]}</span>`;
+        }
+        return resultLines.join('\n');
+    }, [value, typeRegex, metaRegex, extractUnifiedParameters, visibleRange]);
     return (jsx("div", { className: classNames(styles.bookEditorContainer, isVerbose && styles.isVerbose, className), children: jsxs("div", { className: classNames(styles.bookEditorWrapper, effectiveFontClassName, isBorderRadiusDisabled && styles.isBorderRadiusDisabled), children: [jsx("div", { "aria-hidden": true, className: styles.bookEditorBackground, style: { backgroundImage: 'none' } }), jsx("pre", { ref: highlightRef, "aria-hidden": true, className: `${styles.bookEditorHighlight} ${effectiveFontClassName}`, style: {
                         lineHeight: `${lineHeight}px`,
                         backgroundImage: `linear-gradient(90deg, transparent 30px, rgba(59,130,246,0.3) 30px, rgba(59,130,246,0.3) 31px, transparent 31px), repeating-linear-gradient(0deg, transparent, transparent calc(${lineHeight}px - 1px), rgba(0,0,0,0.06) ${lineHeight}px)`,