@liminis/editor 0.1.0-rc.1

package/dist/app/editor/CodeBlockPlugin.js

@@ -0,0 +1,219 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState, useRef } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getRoot, $getNodeByKey, $isElementNode } from 'lexical';
+import { $isCodeNode } from '@lexical/code';
+import { $isFrontmatterNode } from './nodes/index.js';
+// Shared helper to recursively find all code nodes in a tree
+// Excludes FrontmatterNode since it shouldn't show the language selector
+function findCodeNodesInTree(node) {
+    const codeNodes = [];
+    if ($isCodeNode(node) && !$isFrontmatterNode(node)) {
+        codeNodes.push(node);
+    }
+    if ($isElementNode(node)) {
+        for (const child of node.getChildren()) {
+            codeNodes.push(...findCodeNodesInTree(child));
+        }
+    }
+    return codeNodes;
+}
+// Popular languages for the dropdown
+// Note: 'plain' is a valid Prism language that provides no syntax highlighting
+const LANGUAGES = [
+    { value: 'plain', label: 'Plain Text' },
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'typescript', label: 'TypeScript' },
+    { value: 'jsx', label: 'JSX' },
+    { value: 'tsx', label: 'TSX' },
+    { value: 'python', label: 'Python' },
+    { value: 'java', label: 'Java' },
+    { value: 'c', label: 'C' },
+    { value: 'cpp', label: 'C++' },
+    { value: 'csharp', label: 'C#' },
+    { value: 'go', label: 'Go' },
+    { value: 'rust', label: 'Rust' },
+    { value: 'ruby', label: 'Ruby' },
+    { value: 'php', label: 'PHP' },
+    { value: 'swift', label: 'Swift' },
+    { value: 'kotlin', label: 'Kotlin' },
+    { value: 'markup', label: 'HTML' },
+    { value: 'css', label: 'CSS' },
+    { value: 'scss', label: 'SCSS' },
+    { value: 'json', label: 'JSON' },
+    { value: 'yaml', label: 'YAML' },
+    { value: 'markdown', label: 'Markdown' },
+    { value: 'sql', label: 'SQL' },
+    { value: 'bash', label: 'Bash' },
+    { value: 'powershell', label: 'PowerShell' },
+    { value: 'docker', label: 'Dockerfile' },
+    { value: 'graphql', label: 'GraphQL' },
+];
+function LanguageSelector({ nodeKey, currentLanguage, position, onClose }) {
+    const [editor] = useLexicalComposerContext();
+    const [searchQuery, setSearchQuery] = useState('');
+    const menuRef = useRef(null);
+    const inputRef = useRef(null);
+    const filteredLanguages = LANGUAGES.filter((lang) => lang.label.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        lang.value.toLowerCase().includes(searchQuery.toLowerCase()));
+    // Focus input on mount
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+    // Close on click outside
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (menuRef.current && !menuRef.current.contains(e.target)) {
+                onClose();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [onClose]);
+    const selectLanguage = useCallback((language) => {
+        // Set the language and wait for the update to complete before closing
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if (node && $isCodeNode(node)) {
+                // Use 'plain' for Plain Text - it's a valid Prism language with no highlighting
+                // This avoids Lexical's transform that resets undefined/null languages to 'javascript'
+                node.setLanguage(language);
+            }
+        }, {
+            onUpdate: () => {
+                // Close the selector after the update is committed
+                onClose();
+            },
+        });
+    }, [editor, nodeKey, onClose]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            onClose();
+        }
+    }, [onClose]);
+    const handleItemClick = useCallback((e, language) => {
+        e.preventDefault();
+        e.stopPropagation();
+        selectLanguage(language);
+    }, [selectLanguage]);
+    // Normalize for comparison
+    const normalizedCurrent = currentLanguage || 'plain';
+    return (_jsxs("div", { ref: menuRef, className: "code-language-menu", style: {
+            position: 'fixed',
+            top: position.top,
+            right: position.right,
+        }, children: [_jsx("input", { ref: inputRef, type: "text", className: "code-language-search", placeholder: "Search languages...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onKeyDown: handleKeyDown }), _jsx("div", { className: "code-language-list", children: filteredLanguages.length === 0 ? (_jsx("div", { className: "code-language-empty", children: "No languages found" })) : (filteredLanguages.map((lang) => {
+                    const isCurrentLang = lang.value === normalizedCurrent;
+                    return (_jsxs("div", { className: `code-language-item ${isCurrentLang ? 'current' : ''}`, onMouseDown: (e) => handleItemClick(e, lang.value), children: [lang.label, isCurrentLang && (_jsx("span", { className: "code-language-check", children: "\u2713" }))] }, lang.value || 'plain-text'));
+                })) })] }));
+}
+export function CodeBlockPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [codeBlocks, setCodeBlocks] = useState([]);
+    const [selectorState, setSelectorState] = useState(null);
+    const updateScheduledRef = useRef(false);
+    // Track code blocks and their positions
+    useEffect(() => {
+        // Batched update function that reads all DOM positions in a single frame
+        const updateCodeBlocks = () => {
+            updateScheduledRef.current = false;
+            const editorElement = editor.getRootElement();
+            if (!editorElement)
+                return;
+            editor.getEditorState().read(() => {
+                const root = $getRoot();
+                const codeNodes = findCodeNodesInTree(root);
+                // Collect node keys, languages, and text content first (no DOM reads)
+                const nodeData = [];
+                for (const node of codeNodes) {
+                    nodeData.push({
+                        nodeKey: node.getKey(),
+                        language: node.getLanguage() || '',
+                        textContent: node.getTextContent(),
+                    });
+                }
+                // Batch DOM reads in a single pass after the read()
+                requestAnimationFrame(() => {
+                    const blocks = [];
+                    for (const { nodeKey, language, textContent } of nodeData) {
+                        const element = editor.getElementByKey(nodeKey);
+                        if (element) {
+                            blocks.push({
+                                nodeKey,
+                                language,
+                                textContent,
+                                rect: element.getBoundingClientRect(),
+                            });
+                        }
+                    }
+                    setCodeBlocks(blocks);
+                });
+            });
+        };
+        // Debounced update scheduler
+        const scheduleUpdate = () => {
+            if (!updateScheduledRef.current) {
+                updateScheduledRef.current = true;
+                requestAnimationFrame(updateCodeBlocks);
+            }
+        };
+        const timeoutId = setTimeout(updateCodeBlocks, 200);
+        const unsubscribe = editor.registerUpdateListener(() => {
+            scheduleUpdate();
+        });
+        // Also update on scroll/resize with debouncing
+        const handleScrollResize = () => {
+            scheduleUpdate();
+        };
+        window.addEventListener('scroll', handleScrollResize, true);
+        window.addEventListener('resize', handleScrollResize);
+        return () => {
+            clearTimeout(timeoutId);
+            unsubscribe();
+            window.removeEventListener('scroll', handleScrollResize, true);
+            window.removeEventListener('resize', handleScrollResize);
+        };
+    }, [editor]);
+    const handleOpenSelector = useCallback((nodeKey, language, buttonRect) => {
+        setSelectorState({
+            nodeKey,
+            language,
+            position: {
+                top: buttonRect.bottom + 4,
+                right: window.innerWidth - buttonRect.right,
+            },
+        });
+    }, []);
+    const handleCloseSelector = useCallback(() => {
+        setSelectorState(null);
+    }, []);
+    // Track which code blocks show "Copied" feedback
+    const [copiedNodeKey, setCopiedNodeKey] = useState(null);
+    const handleCopyCode = useCallback((nodeKey, textContent) => {
+        void navigator.clipboard.writeText(textContent).then(() => {
+            setCopiedNodeKey(nodeKey);
+            setTimeout(() => setCopiedNodeKey(null), 1500);
+        });
+    }, []);
+    return (_jsxs(_Fragment, { children: [codeBlocks.map((block) => {
+                // Normalize empty/null/undefined to 'plain' for comparison
+                const normalizedLang = block.language || 'plain';
+                const langLabel = LANGUAGES.find((l) => l.value === normalizedLang)?.label || normalizedLang;
+                const isCopied = copiedNodeKey === block.nodeKey;
+                return (_jsxs("div", { className: "code-block-toolbar", style: {
+                        position: 'fixed',
+                        top: block.rect.top + 6,
+                        right: window.innerWidth - block.rect.right + 8,
+                    }, children: [_jsx("button", { className: "code-language-button", onClick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                const rect = e.target.getBoundingClientRect();
+                                handleOpenSelector(block.nodeKey, block.language, rect);
+                            }, children: langLabel }), _jsx("button", { className: `code-copy-button ${isCopied ? 'copied' : ''}`, onClick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                handleCopyCode(block.nodeKey, block.textContent);
+                            }, title: "Copy code", children: isCopied ? (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })) : (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] })) })] }, block.nodeKey));
+            }), selectorState && (_jsx(LanguageSelector, { nodeKey: selectorState.nodeKey, currentLanguage: selectorState.language, position: selectorState.position, onClose: handleCloseSelector }))] }));
+}

package/dist/app/editor/CorrectionPanelPlugin.d.ts

@@ -0,0 +1,14 @@
+/**
+ * CorrectionPanelPlugin — floating correction panel inside the Lexical editor.
+ *
+ * Opens when useCorrectionStore.isOpen is true. Loads suggestions from three
+ * sources progressively: the host's corrections store (immediate), then entity
+ * and passage suggestions from the host's knowledge services (async).
+ *
+ * On confirm, merges a same_as entry into the corrections document and asks the
+ * host to apply it. All persistence and knowledge-graph access crosses the
+ * package seam through `CorrectionHostServices` (see ADR-075); when the host
+ * supplies no correction services the panel still opens, shows no suggestions,
+ * and confirming performs only the in-document replacement.
+ */
+export declare function CorrectionPanelPlugin(): JSX.Element | null;

package/dist/app/editor/CorrectionPanelPlugin.js

@@ -0,0 +1,333 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CorrectionPanelPlugin — floating correction panel inside the Lexical editor.
+ *
+ * Opens when useCorrectionStore.isOpen is true. Loads suggestions from three
+ * sources progressively: the host's corrections store (immediate), then entity
+ * and passage suggestions from the host's knowledge services (async).
+ *
+ * On confirm, merges a same_as entry into the corrections document and asks the
+ * host to apply it. All persistence and knowledge-graph access crosses the
+ * package seam through `CorrectionHostServices` (see ADR-075); when the host
+ * supplies no correction services the panel still opens, shows no suggestions,
+ * and confirming performs only the in-document replacement.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getRoot, $isTextNode } from 'lexical';
+import { useCorrectionStore } from '../../stores/correctionStore.js';
+import { useEditorHost } from '../../host/context.js';
+import { parseCorrectionsYaml, serializeCorrectionsYaml, mergeCorrection, isExistingCanonical, } from './correction-yaml.js';
+// --- Style helpers ---
+const isDark = () => typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
+const panelStyle = () => {
+    const dark = isDark();
+    return {
+        position: 'fixed',
+        zIndex: 10001,
+        borderRadius: '8px',
+        padding: '12px',
+        minWidth: '280px',
+        maxWidth: '360px',
+        background: `var(--vscode-menu-background, ${dark ? '#252526' : '#ffffff'})`,
+        border: `1px solid var(--vscode-menu-border, ${dark ? '#454545' : '#d4d4d4'})`,
+        boxShadow: dark ? '0 4px 16px rgba(0,0,0,0.4)' : '0 4px 16px rgba(0,0,0,0.15)',
+        color: `var(--vscode-menu-foreground, ${dark ? '#cccccc' : '#333333'})`,
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        fontSize: '13px',
+    };
+};
+// --- Main component ---
+export function CorrectionPanelPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const { corrections, notifyError } = useEditorHost();
+    const { isOpen, position, selectedText } = useCorrectionStore();
+    const panelRef = useRef(null);
+    const yamlEntriesRef = useRef([]);
+    const [yamlSuggestions, setYamlSuggestions] = useState([]);
+    const [entitySuggestions, setEntitySuggestions] = useState([]);
+    const [passageSuggestions, setPassageSuggestions] = useState([]);
+    const [loadingEntities, setLoadingEntities] = useState(false);
+    const [loadingPassages, setLoadingPassages] = useState(false);
+    const [canonicalInput, setCanonicalInput] = useState('');
+    const [replaceAll, setReplaceAll] = useState(false);
+    const [confirmPhase, setConfirmPhase] = useState('idle');
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const close = useCallback(() => {
+        useCorrectionStore.getState().close();
+    }, []);
+    // Reset state when panel opens
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        setYamlSuggestions([]);
+        setEntitySuggestions([]);
+        setPassageSuggestions([]);
+        setCanonicalInput('');
+        setReplaceAll(false);
+        setConfirmPhase('idle');
+        setIsSubmitting(false);
+        yamlEntriesRef.current = [];
+    }, [isOpen]);
+    // Outside-click and Escape dismissal
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleMousedown = (e) => {
+            if (panelRef.current && !panelRef.current.contains(e.target)) {
+                close();
+            }
+        };
+        const handleKey = (e) => {
+            if (e.key === 'Escape')
+                close();
+        };
+        document.addEventListener('mousedown', handleMousedown);
+        document.addEventListener('keydown', handleKey);
+        return () => {
+            document.removeEventListener('mousedown', handleMousedown);
+            document.removeEventListener('keydown', handleKey);
+        };
+    }, [isOpen, close]);
+    // Load suggestions when panel opens
+    useEffect(() => {
+        if (!isOpen || !selectedText || !corrections)
+            return;
+        let cancelled = false;
+        // Load YAML suggestions synchronously after file read
+        const loadYaml = async () => {
+            try {
+                const raw = await corrections.readCorrections();
+                if (cancelled)
+                    return;
+                const entries = parseCorrectionsYaml(raw);
+                yamlEntriesRef.current = entries;
+                const matches = entries
+                    .filter((e) => e.type === 'same_as' && e.aliases.includes(selectedText))
+                    .map((e) => e.canonical);
+                setYamlSuggestions(matches);
+            }
+            catch {
+                // File may not exist yet — that's fine
+                yamlEntriesRef.current = [];
+            }
+        };
+        // Load entity suggestions via MCP
+        const loadEntities = async () => {
+            setLoadingEntities(true);
+            try {
+                const names = await corrections.suggestEntities(selectedText, 5);
+                if (cancelled)
+                    return;
+                setEntitySuggestions(names);
+            }
+            catch {
+                // Knowledge graph unavailable — silent, not required for panel function
+            }
+            finally {
+                if (!cancelled)
+                    setLoadingEntities(false);
+            }
+        };
+        // Load passage suggestions via MCP
+        const loadPassages = async () => {
+            setLoadingPassages(true);
+            try {
+                const names = await corrections.suggestPassages(selectedText, 5, 0.3);
+                if (cancelled)
+                    return;
+                setPassageSuggestions(names);
+            }
+            catch {
+                // Knowledge graph unavailable — silent
+            }
+            finally {
+                if (!cancelled)
+                    setLoadingPassages(false);
+            }
+        };
+        // Hosts back these services with an MCP stdio transport, which multiplexes
+        // nothing: a second concurrent call to the same server is rejected rather
+        // than queued. So serialize the two knowledge suggestion calls, while
+        // keeping the corrections read concurrent (it is a different service).
+        // The host relies on this ordering — do not parallelise.
+        const loadKnowledgeSuggestions = async () => {
+            await loadEntities();
+            if (cancelled)
+                return;
+            await loadPassages();
+        };
+        void loadYaml();
+        void loadKnowledgeSuggestions();
+        return () => {
+            cancelled = true;
+        };
+    }, [isOpen, selectedText, corrections]);
+    // Deduplicate suggestions across sources (case-insensitive), preserving order
+    const allSuggestions = useMemo(() => {
+        const seen = new Set();
+        const out = [];
+        for (const name of [...yamlSuggestions, ...entitySuggestions, ...passageSuggestions]) {
+            const key = name.toLowerCase();
+            if (!seen.has(key)) {
+                seen.add(key);
+                out.push(name);
+            }
+        }
+        return out;
+    }, [yamlSuggestions, entitySuggestions, passageSuggestions]);
+    const handleConfirm = useCallback(async () => {
+        const canonical = canonicalInput.trim();
+        if (!canonical)
+            return;
+        // R13: warn if selectedText is an existing canonical name
+        if (confirmPhase === 'idle' && isExistingCanonical(yamlEntriesRef.current, selectedText)) {
+            setConfirmPhase('needs-canonical-warning');
+            return;
+        }
+        setIsSubmitting(true);
+        try {
+            // (a) Replace all occurrences in the document if requested
+            if (replaceAll) {
+                editor.update(() => {
+                    // Escape selectedText for use in a regex, then add word boundaries so
+                    // "Tito" matches "Tito" and "Tito's" but not "Otito" or "titanium".
+                    const escaped = selectedText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                    const regex = new RegExp('\\b' + escaped + '\\b', 'g');
+                    const walk = (node) => {
+                        if ($isTextNode(node)) {
+                            // Skip text inside code blocks — don't replace identifiers
+                            const parentType = node.getParent()?.getType() ?? '';
+                            if (parentType === 'code' || parentType === 'code-highlight')
+                                return;
+                            const content = node.getTextContent();
+                            const replaced = content.replace(regex, canonical);
+                            if (replaced !== content)
+                                node.setTextContent(replaced);
+                            return;
+                        }
+                        if ('getChildren' in node && typeof node.getChildren === 'function') {
+                            for (const child of node.getChildren()) {
+                                walk(child);
+                            }
+                        }
+                    };
+                    walk($getRoot());
+                });
+            }
+            // (b) No host persistence available — the in-document replacement above is
+            // all this package can do on its own.
+            if (!corrections) {
+                setIsSubmitting(false);
+                close();
+                return;
+            }
+            // (c) Re-read, merge, and write atomically — avoids overwriting corrections
+            // added by other sources while the panel was open. The host owns mkdir and
+            // atomic-write semantics.
+            let latestEntries = yamlEntriesRef.current;
+            try {
+                const fresh = await corrections.readCorrections();
+                latestEntries = parseCorrectionsYaml(fresh);
+            }
+            catch {
+                // File missing or unreadable — start from empty (yamlEntriesRef is still the best fallback)
+            }
+            const updated = mergeCorrection(latestEntries, selectedText, canonical);
+            const yaml = serializeCorrectionsYaml(updated);
+            await corrections.writeCorrections(yaml);
+            yamlEntriesRef.current = updated;
+        }
+        catch (err) {
+            notifyError('Failed to save correction', err instanceof Error ? err.message : String(err));
+            setIsSubmitting(false);
+            return;
+        }
+        // (d) Apply corrections — isolated so a KG failure never blocks panel close
+        try {
+            const applied = await corrections.applyCorrections();
+            if (!applied) {
+                notifyError('Knowledge graph sync failed', 'The correction was saved. It will be applied on the next ingestion pass.');
+            }
+        }
+        catch {
+            notifyError('Knowledge graph sync failed', 'The correction was saved. It will be applied on the next ingestion pass.');
+        }
+        // (f) Close panel — reached only after successful YAML write
+        setIsSubmitting(false);
+        close();
+    }, [canonicalInput, confirmPhase, replaceAll, selectedText, editor, close, corrections, notifyError]);
+    if (!isOpen)
+        return null;
+    const dark = isDark();
+    const borderColor = `var(--vscode-menu-border, ${dark ? '#454545' : '#d4d4d4'})`;
+    const hoverBg = `var(--vscode-menu-selectionBackground, ${dark ? '#094771' : '#e8e8e8'})`;
+    const mutedColor = dark ? '#888888' : '#999999';
+    const inputBg = dark ? '#1e1e1e' : '#f5f5f5';
+    const warningBg = dark ? '#4a3500' : '#fff8e1';
+    const warningBorder = dark ? '#8a6800' : '#f0c000';
+    const btnBase = {
+        padding: '4px 12px',
+        borderRadius: '4px',
+        fontSize: '12px',
+        cursor: 'pointer',
+        border: `1px solid ${borderColor}`,
+        background: 'transparent',
+        color: `var(--vscode-menu-foreground, ${dark ? '#cccccc' : '#333333'})`,
+    };
+    const btnPrimary = {
+        ...btnBase,
+        background: `var(--vscode-button-background, ${dark ? '#0e639c' : '#007acc'})`,
+        color: `var(--vscode-button-foreground, #ffffff)`,
+        border: 'none',
+        opacity: isSubmitting ? 0.6 : 1,
+    };
+    return (_jsxs("div", { ref: panelRef, style: {
+            ...panelStyle(),
+            left: Math.min(position.x, window.innerWidth - 380),
+            top: Math.min(position.y, window.innerHeight - 450),
+        }, children: [_jsxs("div", { style: { marginBottom: '8px' }, children: [_jsx("span", { style: { color: mutedColor, fontSize: '11px', textTransform: 'uppercase', letterSpacing: '0.05em' }, children: "Correcting" }), _jsx("div", { style: { fontWeight: 600, marginTop: '2px', wordBreak: 'break-word' }, children: selectedText })] }), _jsx("hr", { style: { margin: '8px 0', border: 'none', borderTop: `1px solid ${borderColor}` } }), (allSuggestions.length > 0 || loadingEntities || loadingPassages) && (_jsxs("div", { style: { marginBottom: '8px' }, children: [_jsx("div", { style: { color: mutedColor, fontSize: '11px', marginBottom: '4px' }, children: "Suggestions" }), yamlSuggestions.length > 0 && (_jsx("div", { children: yamlSuggestions.map((name) => (_jsx(SuggestionItem, { name: name, hoverBg: hoverBg, onClick: () => setCanonicalInput(name) }, `yaml-${name}`))) })), loadingEntities ? (_jsx("div", { style: { color: mutedColor, fontSize: '12px', padding: '4px 0' }, children: "Loading entity matches\u2026" })) : entitySuggestions.length > 0 ? (_jsx("div", { children: entitySuggestions
+                            .filter((n) => !yamlSuggestions.some((y) => y.toLowerCase() === n.toLowerCase()))
+                            .map((name) => (_jsx(SuggestionItem, { name: name, hoverBg: hoverBg, onClick: () => setCanonicalInput(name) }, `entity-${name}`))) })) : null, loadingPassages ? (_jsx("div", { style: { color: mutedColor, fontSize: '12px', padding: '4px 0' }, children: "Loading passage matches\u2026" })) : passageSuggestions.length > 0 ? (_jsx("div", { children: passageSuggestions
+                            .filter((n) => !yamlSuggestions.some((y) => y.toLowerCase() === n.toLowerCase()) &&
+                            !entitySuggestions.some((e) => e.toLowerCase() === n.toLowerCase()))
+                            .map((name) => (_jsx(SuggestionItem, { name: name, hoverBg: hoverBg, onClick: () => setCanonicalInput(name) }, `passage-${name}`))) })) : null] })), _jsxs("div", { style: { marginBottom: '10px' }, children: [_jsx("label", { style: { display: 'block', color: mutedColor, fontSize: '11px', marginBottom: '4px' }, children: "Canonical name" }), _jsx("input", { type: "text", value: canonicalInput, onChange: (e) => setCanonicalInput(e.target.value), placeholder: "Enter correct name\u2026", style: {
+                            width: '100%',
+                            padding: '5px 8px',
+                            borderRadius: '4px',
+                            border: `1px solid ${borderColor}`,
+                            background: inputBg,
+                            color: `var(--vscode-menu-foreground, ${dark ? '#cccccc' : '#333333'})`,
+                            fontSize: '13px',
+                            boxSizing: 'border-box',
+                        }, onKeyDown: (e) => {
+                            if (e.key === 'Enter')
+                                void handleConfirm();
+                        } })] }), _jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '10px', cursor: 'pointer' }, children: [_jsx("input", { type: "checkbox", checked: replaceAll, onChange: (e) => setReplaceAll(e.target.checked) }), _jsx("span", { style: { fontSize: '12px' }, children: "Replace all occurrences in this document" })] }), confirmPhase === 'needs-canonical-warning' && (_jsx("div", { style: {
+                    marginBottom: '10px',
+                    padding: '8px',
+                    borderRadius: '4px',
+                    background: warningBg,
+                    border: `1px solid ${warningBorder}`,
+                    fontSize: '12px',
+                }, children: "This term is already a canonical name for other aliases. Proceeding will re-canonicalize it." })), _jsxs("div", { style: { display: 'flex', gap: '8px', justifyContent: 'flex-end' }, children: [_jsx("button", { style: btnBase, onClick: close, children: "Cancel" }), confirmPhase === 'needs-canonical-warning' ? (_jsx("button", { style: btnPrimary, onClick: handleConfirm, disabled: isSubmitting || !canonicalInput.trim(), children: "Proceed anyway" })) : (_jsx("button", { style: btnPrimary, onClick: handleConfirm, disabled: isSubmitting || !canonicalInput.trim(), children: isSubmitting ? 'Saving…' : 'Confirm' }))] })] }));
+}
+function SuggestionItem({ name, hoverBg, onClick, }) {
+    const dark = isDark();
+    return (_jsx("button", { onClick: onClick, style: {
+            display: 'block',
+            width: '100%',
+            padding: '4px 8px',
+            background: 'transparent',
+            border: 'none',
+            textAlign: 'left',
+            cursor: 'pointer',
+            fontSize: '13px',
+            borderRadius: '3px',
+            color: `var(--vscode-menu-foreground, ${dark ? '#cccccc' : '#333333'})`,
+        }, onMouseEnter: (e) => {
+            e.currentTarget.style.background = hoverBg;
+        }, onMouseLeave: (e) => {
+            e.currentTarget.style.background = 'transparent';
+        }, children: name }));
+}

package/dist/app/editor/DragHandlePlugin.d.ts

@@ -0,0 +1 @@
+export declare function DragHandlePlugin(): import("react").JSX.Element | null;