@sciflow/editor-start 0.0.1-beta → 0.0.2

package/dist/lib/selection-editor.js

@@ -16,8 +16,18 @@ import { __decorate } from "tslib";
 import { css, html, LitElement, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
-import { SourceField } from '@sciflow/editor-core';
+import { SourceField, t, LOCALE_CHANGE_EVENT } from '@sciflow/editor-core';
+import { getMarkRange } from '@sciflow/editor-core/commands';
+import { renderTexToSvg } from '@sciflow/editor-core/features/math';
+import { Fragment as PMFragment } from 'prosemirror-model';
+import { EditorState, NodeSelection } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { baseKeymap, toggleMark } from 'prosemirror-commands';
+import { keymap } from 'prosemirror-keymap';
 import { getCitationSourceAdapter, } from './citation-source-adapter.js';
+import { collectDocumentOutline } from './outline.js';
+import { renderNodeFromUiSchema } from './selection-ui-renderer.js';
+import './selection-widget-host.js';
 import selectionEditorCss from './selection-editor.css?inline';
 import { applyThemeStylesToRoot, subscribeToSciFlowTheme } from './theme.js';
 /**
@@ -37,13 +47,37 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
         /** Custom adapter for editing citation source. When unset, uses the global adapter. */
         this.citationSourceAdapter = null;
         this.elementInfo = null;
+        /** Draft values for math sidebar (tex, style, label). Synced from node attrs when math is selected. */
+        this.mathDraft = null;
+        /** Last preview result for math (error/warnings). SVG is rendered into mathPreviewContainer. */
+        this.mathPreviewResult = null;
+        /** Draft values for citation sidebar (content + source). Applied only on Update. */
+        this.citationDraft = null;
+        /** Draft values for cross-reference sidebar (display text + target href). */
+        this.crossReferenceDraft = null;
+        /** Draft values for hyperlink (anchor mark) sidebar. */
+        this.hyperlinkDraft = null;
+        this.draftAttrs = null;
+        this.draftDirty = false;
+        this.pinSelection = false;
+        this.showAllAttrs = false;
         this.resolvedEditor = null;
         this.themeStyleElements = [];
         this.citationSourceContainer = null;
+        this.mathPreviewContainer = null;
+        this.mathPreviewDebounce = null;
+        this.citationContentEditorContainer = null;
+        this.citationContentView = null;
+        this.citationContentEditorPosition = null;
+        this.selectionDebounce = null;
+        this.outlineTargetOptionsCacheDoc = null;
+        this.outlineTargetOptionsCache = [];
     }
     static { this.styles = css `${unsafeCSS(selectionEditorCss)}`; }
     connectedCallback() {
         super.connectedCallback();
+        this.localeListener = () => this.requestUpdate();
+        document.addEventListener(LOCALE_CHANGE_EVENT, this.localeListener);
         this.themeUnsub = subscribeToSciFlowTheme((cssTexts) => {
             this.themeStyleElements = applyThemeStylesToRoot(this.renderRoot, this.themeStyleElements, cssTexts);
         });
@@ -51,7 +85,16 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.destroyCitationContentView();
         this.detachEditorListeners();
+        if (this.selectionDebounce) {
+            clearTimeout(this.selectionDebounce);
+            this.selectionDebounce = null;
+        }
+        if (this.localeListener) {
+            document.removeEventListener(LOCALE_CHANGE_EVENT, this.localeListener);
+            this.localeListener = undefined;
+        }
         this.themeUnsub?.();
         this.themeUnsub = undefined;
     }
@@ -60,92 +103,216 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
         if (changedProperties.has('editor') || changedProperties.has('for')) {
             this.resolveEditorReference();
         }
-        if (changedProperties.has('elementInfo') &&
-            this.citationSourceContainer &&
-            this.elementInfo?.type === 'citation' &&
-            this.elementInfo.attrs?.source !== undefined) {
-            const rawSource = this.elementInfo.attrs.source;
-            const items = typeof rawSource === 'string'
-                ? SourceField.fromString(rawSource)
-                : Array.isArray(rawSource)
-                    ? rawSource
-                    : [];
-            const adapter = this.citationSourceAdapter ?? getCitationSourceAdapter();
-            const context = {
-                applySource: (encoded) => {
-                    this.updateNodeAttribute('source', encoded);
-                    return true;
-                },
-            };
-            if (adapter.update) {
-                adapter.update(this.citationSourceContainer, items, context);
+        if (changedProperties.has('elementInfo')) {
+            this.showAllAttrs = false;
+            if (this.elementInfo?.type === 'math') {
+                const attrs = this.elementInfo.attrs;
+                this.mathDraft = {
+                    tex: attrs?.tex ?? '',
+                    style: attrs?.style === 'display' ? 'display' : 'inline',
+                    label: attrs?.label ?? '',
+                };
+                this.scheduleMathPreview();
+                this.citationDraft = null;
+                this.crossReferenceDraft = null;
+                this.resetDraftAttrs();
+            }
+            else if (this.elementInfo?.type === 'citation') {
+                const attrs = this.elementInfo.attrs;
+                const rawSource = attrs?.source;
+                const sourceEncoded = typeof rawSource === 'string' ? rawSource : SourceField.toString(rawSource ?? []) ?? null;
+                const content = this.getCitationNodeTextContent();
+                this.citationDraft = {
+                    content: content ?? '',
+                    sourceEncoded,
+                };
+                this.crossReferenceDraft = null;
+                this.mathDraft = null;
+                this.mathPreviewResult = null;
+                this.resetDraftAttrs();
+                if (this.mathPreviewDebounce) {
+                    clearTimeout(this.mathPreviewDebounce);
+                    this.mathPreviewDebounce = null;
+                }
+            }
+            else if (this.elementInfo?.type === 'link') {
+                const attrs = this.elementInfo.attrs;
+                const href = typeof attrs?.href === 'string' ? attrs.href : '';
+                this.crossReferenceDraft = {
+                    content: this.getLinkNodeTextContent() ?? '',
+                    href,
+                };
+                this.mathDraft = null;
+                this.mathPreviewResult = null;
+                this.citationDraft = null;
+                this.hyperlinkDraft = null;
+                this.resetDraftAttrs();
+                this.destroyCitationContentView();
+                if (this.mathPreviewDebounce) {
+                    clearTimeout(this.mathPreviewDebounce);
+                    this.mathPreviewDebounce = null;
+                }
+            }
+            else if (this.elementInfo?.type === 'anchor') {
+                const attrs = this.elementInfo.attrs;
+                this.hyperlinkDraft = {
+                    href: typeof attrs?.href === 'string' ? attrs.href : '',
+                };
+                this.mathDraft = null;
+                this.mathPreviewResult = null;
+                this.citationDraft = null;
+                this.crossReferenceDraft = null;
+                this.resetDraftAttrs();
+                this.destroyCitationContentView();
+                if (this.mathPreviewDebounce) {
+                    clearTimeout(this.mathPreviewDebounce);
+                    this.mathPreviewDebounce = null;
+                }
+            }
+            else {
+                this.mathDraft = null;
+                this.mathPreviewResult = null;
+                this.citationDraft = null;
+                this.crossReferenceDraft = null;
+                this.hyperlinkDraft = null;
+                this.resetDraftAttrs();
+                this.destroyCitationContentView();
+                if (this.mathPreviewDebounce) {
+                    clearTimeout(this.mathPreviewDebounce);
+                    this.mathPreviewDebounce = null;
+                }
+            }
+        }
+        if (changedProperties.has('elementInfo') ||
+            changedProperties.has('citationDraft')) {
+            if (this.citationSourceContainer &&
+                this.elementInfo?.type === 'citation' &&
+                this.citationDraft) {
+                const items = SourceField.fromString(this.citationDraft.sourceEncoded ?? '') ?? [];
+                const adapter = this.citationSourceAdapter ?? getCitationSourceAdapter();
+                const refs = this.resolvedEditor?.references ?? [];
+                const context = {
+                    onSourceChange: (encoded) => {
+                        if (this.citationDraft) {
+                            this.citationDraft = { ...this.citationDraft, sourceEncoded: encoded };
+                        }
+                    },
+                    getReferences: () => refs.map((r) => ({ id: r.id, rawReference: r.rawReference })),
+                };
+                if (adapter.update) {
+                    adapter.update(this.citationSourceContainer, items, context);
+                }
             }
         }
     }
     render() {
         if (!this.elementInfo || !this.elementInfo.type) {
             return html `
-        <div class="selection-editor-container">
+        <div class="selection-editor-container" @keydown=${this.handleGenericKeydown}>
           <p class="selection-editor-placeholder">
-            No element selected. Click or select an element in the editor.
+            ${t('selectionEditor.noElement')}
           </p>
         </div>
       `;
         }
-        return html `
-      <div class="selection-editor-container">
-        <!-- Type display -->
-        <div class="selection-editor-field">
-          <span class="selection-editor-label">Type:</span>
-          <code class="selection-editor-value">${this.elementInfo.type}</code>
+        if (this.elementInfo.type === 'math' && this.mathDraft) {
+            return this.renderMathSidebar();
+        }
+        if (this.elementInfo.type === 'citation' && this.citationDraft) {
+            return this.renderCitationSidebar();
+        }
+        if (this.elementInfo.type === 'link' && this.crossReferenceDraft) {
+            return this.renderCrossReferenceSidebar();
+        }
+        if (this.elementInfo.type === 'anchor' && this.hyperlinkDraft) {
+            return this.renderHyperlinkSidebar();
+        }
+        if (this.elementInfo.type === 'figure') {
+            return this.renderFigureSidebar();
+        }
+        const uiSchema = this.resolvedEditor?.getSelectionUiSchema?.();
+        const nodeFragment = uiSchema?.properties?.nodes?.[this.elementInfo.type];
+        const useSchemaDriven = !!nodeFragment;
+        if (useSchemaDriven && nodeFragment) {
+            const attrs = this.getEffectiveAttrs();
+            return html `
+        <div class="selection-editor-container">
+          ${this.renderSelectionControls()}
+          <p class="selection-editor-type-header">${this.getNodeTypeLabel(this.elementInfo.type)}</p>
+          ${renderNodeFromUiSchema(nodeFragment, {
+                attrs,
+                onAttrChange: (attr, value) => this.setDraftAttr(attr, value),
+                showHidden: this.showAllAttrs,
+                getOptionsSource: (id) => {
+                    if (id === 'references') {
+                        const refs = this.resolvedEditor?.references ?? [];
+                        return refs.map((r) => ({ id: r.id, label: r.rawReference ?? r.id }));
+                    }
+                    if (id === 'outlineTargets') {
+                        return this.getOutlineTargetOptions();
+                    }
+                    return [];
+                },
+            })}
+          ${this.renderDraftActions()}
+          <button
+            class="selection-editor-expand-btn"
+            @click=${() => { this.showAllAttrs = !this.showAllAttrs; }}
+          >${this.showAllAttrs ? t('selectionEditor.collapseAttributes') : t('selectionEditor.expandAttributes')}</button>
         </div>
+      `;
+        }
+        return html `
+      <div class="selection-editor-container" @keydown=${this.handleGenericKeydown}>
+        ${this.renderSelectionControls()}
 
-        <!-- ID display (read-only) -->
-        ${this.elementInfo.id
-            ? html `
-              <div class="selection-editor-field">
-                <span class="selection-editor-label">ID:</span>
-                <code class="selection-editor-value">${this.elementInfo.id}</code>
-              </div>
-            `
-            : ''}
+        <!-- ELEMENT section -->
+        <div class="selection-editor-section">
+          <span class="selection-editor-section-label">${t('selectionEditor.sectionElement')}</span>
+          <p class="selection-editor-type-header">${this.getNodeTypeLabel(this.elementInfo.type)}</p>
+        </div>
 
-        <!-- Attributes (always expanded) -->
+        <!-- FORMATTING / Attributes -->
         ${this.elementInfo.attrs && Object.keys(this.elementInfo.attrs).length > 0
-            ? html `
-              <div class="selection-editor-field">
-                <span class="selection-editor-label">Attributes:</span>
-                <div class="selection-editor-attrs">
-                  ${this.elementInfo.type === 'citation' &&
-                this.elementInfo.attrs?.source !== undefined
-                ? html `
-                        <div class="selection-editor-attr-field">
-                          <span class="selection-editor-label">source:</span>
-                          <div
-                            class="citation-source-adapter-root"
-                            ${ref((el) => {
-                    if (el) {
-                        this.citationSourceContainer = el;
-                        this.mountCitationSourceAdapter(el);
-                    }
-                    else if (this.citationSourceContainer) {
-                        this.unmountCitationSourceAdapter(this.citationSourceContainer);
-                        this.citationSourceContainer = null;
-                    }
-                })}
-                          ></div>
-                        </div>
-                      `
-                : ''}
-                  ${Object.entries(this.elementInfo.attrs)
-                .filter(([key]) => key !== 'id' &&
-                key !== 'data' &&
-                !(this.elementInfo.type === 'citation' && key === 'source'))
-                .map(([attrName, attrValue]) => this.renderAttributeField(attrName, attrValue))}
-                </div>
-              </div>
-            `
+            ? (() => {
+                const attrs = this.getEffectiveAttrs();
+                const filtered = Object.entries(attrs).filter(([key]) => key !== 'id' &&
+                    key !== 'data' &&
+                    !(this.elementInfo.type === 'citation' && key === 'source'));
+                // Split into primary (formatting) attributes and the rest
+                const primaryKeys = ['text-align', 'level', 'type'];
+                const primary = filtered.filter(([k]) => primaryKeys.includes(k));
+                const rest = filtered.filter(([k]) => !primaryKeys.includes(k));
+                return html `
+                ${primary.length > 0
+                    ? html `
+                    <div class="selection-editor-section">
+                      <span class="selection-editor-section-label">${t('selectionEditor.sectionFormatting')}</span>
+                      <div class="selection-editor-attrs">
+                        ${primary.map(([attrName, attrValue]) => this.renderAttributeField(attrName, attrValue))}
+                      </div>
+                    </div>
+                  `
+                    : ''}
+                ${rest.length > 0 || primary.length === 0
+                    ? html `
+                    <details class="selection-editor-details">
+                      <summary class="selection-editor-details-summary">
+                        <span class="selection-editor-section-label">${t('selectionEditor.sectionAttributes')}</span>
+                        <svg class="selection-editor-details-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                      </summary>
+                      <div class="selection-editor-details-body">
+                        ${rest.length > 0
+                        ? rest.map(([attrName, attrValue]) => this.renderAttributeField(attrName, attrValue))
+                        : html `<span class="selection-editor-placeholder">${t('selectionEditor.noElement')}</span>`}
+                      </div>
+                    </details>
+                  `
+                    : ''}
+              `;
+            })()
             : ''}
+        ${this.renderDraftActions()}
       </div>
     `;
     }
@@ -165,13 +332,13 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
         }
         this.selectionListener = (event) => {
             const selection = event.detail;
-            this.updateElementInfo(selection);
+            this.scheduleSelectionUpdate(selection);
         };
         this.readyListener = () => {
             // Re-evaluate selection when editor becomes ready
             if (this.resolvedEditor?.editorView) {
                 const selection = this.resolvedEditor.editorView.state.selection;
-                this.updateElementInfo({
+                this.scheduleSelectionUpdate({
                     anchor: selection.anchor,
                     head: selection.head,
                 });
@@ -182,7 +349,7 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
         // Initial evaluation
         if (next.editorView) {
             const selection = next.editorView.state.selection;
-            this.updateElementInfo({
+            this.scheduleSelectionUpdate({
                 anchor: selection.anchor,
                 head: selection.head,
             });
@@ -220,6 +387,18 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
         this.readyListener = undefined;
         this.resolvedEditor = null;
     }
+    scheduleSelectionUpdate(selection) {
+        if (this.pinSelection) {
+            return;
+        }
+        if (this.selectionDebounce) {
+            clearTimeout(this.selectionDebounce);
+        }
+        this.selectionDebounce = setTimeout(() => {
+            this.selectionDebounce = null;
+            this.updateElementInfo(selection);
+        }, 100);
+    }
     /**
      * Extract element information from the current selection.
      */
@@ -229,32 +408,92 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
             this.elementInfo = null;
             return;
         }
-        let elementInfo = null;
-        let nodePosition = null;
-        const anchor = selection?.anchor ?? 0;
-        // Try to get the node at the anchor position
-        const nodeAtPos = view.state.doc.nodeAt(anchor);
-        if (nodeAtPos && !nodeAtPos.isText) {
-            // Node directly at position (e.g., block nodes like heading, paragraph)
-            nodePosition = anchor;
-            elementInfo = {
-                type: nodeAtPos.type.name,
-                id: nodeAtPos.attrs?.id ?? null,
-                attrs: nodeAtPos.attrs ?? null,
-                position: nodePosition,
+        const sel = view.state.selection;
+        if (sel instanceof NodeSelection && sel.node.type.name === 'math') {
+            const attrs = sel.node.attrs;
+            this.elementInfo = {
+                type: 'math',
+                id: attrs?.id ?? null,
+                attrs: { ...attrs },
+                position: sel.from,
             };
+            return;
         }
-        else {
-            // If no block node at position, resolve the position and find the parent block node
-            const $pos = view.state.doc.resolve(anchor);
-            // Walk up the node tree to find the nearest block-level node
+        if (sel instanceof NodeSelection && sel.node.type.name === 'citation') {
+            const attrs = sel.node.attrs;
+            this.elementInfo = {
+                type: 'citation',
+                id: attrs?.id ?? null,
+                attrs: { ...attrs },
+                position: sel.from,
+            };
+            return;
+        }
+        if (sel instanceof NodeSelection && sel.node.type.name === 'figure') {
+            const attrs = sel.node.attrs;
+            this.elementInfo = {
+                type: 'figure',
+                id: attrs?.id ?? null,
+                attrs: { ...attrs },
+                position: sel.from,
+            };
+            return;
+        }
+        if (sel instanceof NodeSelection && sel.node.type.name === 'link') {
+            const attrs = sel.node.attrs;
+            this.elementInfo = {
+                type: 'link',
+                id: attrs?.id ?? null,
+                attrs: { ...attrs },
+                position: sel.from,
+            };
+            return;
+        }
+        // Check for anchor mark (hyperlink) at cursor or in selection
+        const anchorMarkType = view.state.schema.marks['anchor'];
+        if (anchorMarkType) {
+            const { from, to, empty } = sel;
+            let anchorMark = null;
+            if (empty) {
+                const marks = view.state.storedMarks ?? sel.$from.marks();
+                anchorMark = marks.find((m) => m.type === anchorMarkType) ?? null;
+                if (!anchorMark) {
+                    // Also check the character before the cursor
+                    const marksBefore = sel.$from.marks();
+                    anchorMark = marksBefore.find((m) => m.type === anchorMarkType) ?? null;
+                }
+            }
+            else {
+                view.state.doc.nodesBetween(from, to, (node) => {
+                    if (!anchorMark && node.isText) {
+                        anchorMark = node.marks.find((m) => m.type === anchorMarkType) ?? null;
+                    }
+                    return !anchorMark;
+                });
+            }
+            if (anchorMark) {
+                this.elementInfo = {
+                    type: 'anchor',
+                    id: null,
+                    attrs: { ...anchorMark.attrs },
+                    position: null,
+                };
+                return;
+            }
+        }
+        let elementInfo = null;
+        let nodePosition;
+        const anchor = selection?.anchor ?? 0;
+        const $pos = view.state.doc.resolve(anchor);
+        const citationType = view.state.schema.nodes.citation;
+        // Prefer citation (inline) when cursor is inside one
+        if (citationType) {
             for (let depth = $pos.depth; depth > 0; depth--) {
                 const node = $pos.node(depth);
-                // Check if this is a block-level node (not doc, not inline)
-                if (node.type !== view.state.schema.topNodeType && node.type.spec.group === 'block') {
+                if (node.type === citationType) {
                     nodePosition = $pos.before(depth);
                     elementInfo = {
-                        type: node.type.name,
+                        type: 'citation',
                         id: node.attrs?.id ?? null,
                         attrs: node.attrs ?? null,
                         position: nodePosition,
@@ -262,19 +501,217 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
                     break;
                 }
             }
-            // Fallback: if we didn't find a block node, use the immediate parent (excluding doc)
-            if (!elementInfo && $pos.parent && $pos.parent.type !== view.state.schema.topNodeType) {
-                nodePosition = $pos.before($pos.depth);
+        }
+        // Prefer figure when cursor is inside one (e.g. in caption)
+        if (!elementInfo) {
+            const figureType = view.state.schema.nodes.figure;
+            if (figureType) {
+                for (let depth = $pos.depth; depth > 0; depth--) {
+                    const node = $pos.node(depth);
+                    if (node.type === figureType) {
+                        nodePosition = $pos.before(depth);
+                        elementInfo = {
+                            type: 'figure',
+                            id: node.attrs?.id ?? null,
+                            attrs: node.attrs ?? null,
+                            position: nodePosition,
+                        };
+                        break;
+                    }
+                }
+            }
+        }
+        // Prefer link (cross-reference) when cursor is inside one
+        if (!elementInfo) {
+            const linkType = view.state.schema.nodes.link;
+            if (linkType) {
+                for (let depth = $pos.depth; depth > 0; depth--) {
+                    const node = $pos.node(depth);
+                    if (node.type === linkType) {
+                        nodePosition = $pos.before(depth);
+                        elementInfo = {
+                            type: 'link',
+                            id: node.attrs?.id ?? null,
+                            attrs: node.attrs ?? null,
+                            position: nodePosition,
+                        };
+                        break;
+                    }
+                }
+            }
+        }
+        if (!elementInfo) {
+            const nodeAtPos = view.state.doc.nodeAt(anchor);
+            if (nodeAtPos && !nodeAtPos.isText) {
+                nodePosition = anchor;
                 elementInfo = {
-                    type: $pos.parent.type.name,
-                    id: $pos.parent.attrs?.id ?? null,
-                    attrs: $pos.parent.attrs ?? null,
+                    type: nodeAtPos.type.name,
+                    id: nodeAtPos.attrs?.id ?? null,
+                    attrs: nodeAtPos.attrs ?? null,
                     position: nodePosition,
                 };
             }
+            else {
+                for (let depth = $pos.depth; depth > 0; depth--) {
+                    const node = $pos.node(depth);
+                    if (node.type !== view.state.schema.topNodeType && node.type.spec.group === 'block') {
+                        nodePosition = $pos.before(depth);
+                        elementInfo = {
+                            type: node.type.name,
+                            id: node.attrs?.id ?? null,
+                            attrs: node.attrs ?? null,
+                            position: nodePosition,
+                        };
+                        break;
+                    }
+                }
+                if (!elementInfo && $pos.parent && $pos.parent.type !== view.state.schema.topNodeType) {
+                    nodePosition = $pos.before($pos.depth);
+                    elementInfo = {
+                        type: $pos.parent.type.name,
+                        id: $pos.parent.attrs?.id ?? null,
+                        attrs: $pos.parent.attrs ?? null,
+                        position: nodePosition,
+                    };
+                }
+            }
         }
         this.elementInfo = elementInfo;
     }
+    /** Get the selected citation node's text content from the main document (for draft init). */
+    getCitationNodeTextContent() {
+        const node = this.getCitationNode();
+        return node?.textContent ?? '';
+    }
+    /** Get the selected citation node's content as a Fragment (same schema as citation allows). */
+    getCitationNodeContentFragment() {
+        const node = this.getCitationNode();
+        return node?.content ?? PMFragment.empty;
+    }
+    /** Get the citation node at the current selection, or null. */
+    getCitationNode() {
+        const view = this.resolvedEditor?.editorView;
+        if (!view || !this.elementInfo || this.elementInfo.type !== 'citation' || this.elementInfo.position == null) {
+            return null;
+        }
+        const doc = view.state.doc;
+        const pos = this.elementInfo.position;
+        const nodeAt = doc.nodeAt(pos);
+        const citationType = view.state.schema.nodes.citation;
+        if (nodeAt?.type === citationType) {
+            return nodeAt;
+        }
+        const $pos = doc.resolve(pos);
+        for (let d = $pos.depth; d > 0; d--) {
+            const node = $pos.node(d);
+            if (node.type === citationType) {
+                return node;
+            }
+        }
+        return null;
+    }
+    /** Get the selected cross-reference link node's text content from the main document. */
+    getLinkNodeTextContent() {
+        const node = this.getLinkNode();
+        return node?.textContent ?? '';
+    }
+    /** Get the selected cross-reference link node at current selection, or null. */
+    getLinkNode() {
+        const view = this.resolvedEditor?.editorView;
+        if (!view || !this.elementInfo || this.elementInfo.type !== 'link' || this.elementInfo.position == null) {
+            return null;
+        }
+        const doc = view.state.doc;
+        const pos = this.elementInfo.position;
+        const nodeAt = doc.nodeAt(pos);
+        const linkType = view.state.schema.nodes.link;
+        if (nodeAt?.type === linkType) {
+            return nodeAt;
+        }
+        const $pos = doc.resolve(pos);
+        for (let d = $pos.depth; d > 0; d--) {
+            const node = $pos.node(d);
+            if (node.type === linkType) {
+                return node;
+            }
+        }
+        return null;
+    }
+    /** Build outline target options for link href dropdown (headings and figures with id). */
+    getOutlineTargetOptions() {
+        const view = this.resolvedEditor?.editorView;
+        const pmDoc = view?.state?.doc ?? null;
+        if (!pmDoc) {
+            this.outlineTargetOptionsCacheDoc = null;
+            this.outlineTargetOptionsCache = [];
+            return [];
+        }
+        if (this.outlineTargetOptionsCacheDoc === pmDoc) {
+            return this.outlineTargetOptionsCache;
+        }
+        const outline = collectDocumentOutline(null, pmDoc);
+        const options = [];
+        for (const h of outline.headings) {
+            const id = h.id?.trim();
+            if (!id)
+                continue;
+            const level = h.level != null ? `H${h.level}` : 'Heading';
+            const text = h.text?.trim() || id;
+            options.push({ id: `#${id}`, label: `${level}: ${text}` });
+        }
+        for (const f of outline.figures) {
+            const id = f.id?.trim();
+            if (!id)
+                continue;
+            const text = f.text?.trim() || id;
+            options.push({ id: `#${id}`, label: `${t('outline.figure')}: ${text}` });
+        }
+        this.outlineTargetOptionsCacheDoc = pmDoc;
+        this.outlineTargetOptionsCache = options;
+        return options;
+    }
+    destroyCitationContentView() {
+        if (this.citationContentView) {
+            this.citationContentView.destroy();
+            this.citationContentView = null;
+        }
+        this.citationContentEditorContainer = null;
+        this.citationContentEditorPosition = null;
+    }
+    mountCitationContentEditor(container) {
+        const view = this.resolvedEditor?.editorView;
+        if (!view || !this.elementInfo || this.elementInfo.type !== 'citation' || this.elementInfo.position == null) {
+            return;
+        }
+        const schema = view.state.schema;
+        const paragraph = schema.nodes.paragraph;
+        const docNode = schema.nodes.doc;
+        if (!paragraph || !docNode) {
+            return;
+        }
+        const pos = this.elementInfo.position;
+        if (this.citationContentView && this.citationContentEditorPosition === pos && this.citationContentEditorContainer === container) {
+            return;
+        }
+        this.destroyCitationContentView();
+        this.citationContentEditorContainer = container;
+        this.citationContentEditorPosition = pos;
+        const initialContent = this.getCitationNodeContentFragment();
+        const paragraphNode = paragraph.create(null, initialContent);
+        const stateDoc = docNode.create(null, [paragraphNode]);
+        const strong = schema.marks.strong;
+        const em = schema.marks.em;
+        const plugins = [
+            keymap(baseKeymap),
+            ...(strong ? [keymap({ 'Mod-b': toggleMark(strong) })] : []),
+            ...(em ? [keymap({ 'Mod-i': toggleMark(em) })] : []),
+        ];
+        const state = EditorState.create({ doc: stateDoc, schema, plugins });
+        this.citationContentView = new EditorView(container, {
+            state,
+            editable: () => true,
+        });
+    }
     /** Convenience getter mirroring `editor.getCommands()`. */
     getCommandRunner() {
         return this.resolvedEditor?.commands ?? null;
@@ -282,28 +719,71 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
     /**
      * Render a single attribute field, decoding known encoded values for readability.
      */
+    getNodeTypeLabel(type) {
+        const known = {
+            figure: () => t('selectionEditor.figure'),
+            math: () => t('selectionEditor.math'),
+            citation: () => t('selectionEditor.citation'),
+            anchor: () => t('selectionEditor.hyperlink'),
+            link: () => t('selectionEditor.crossReference'),
+            heading: () => t('selectionEditor.heading'),
+            paragraph: () => t('selectionEditor.paragraph'),
+        };
+        const label = known[type]?.() ?? type.replace(/_/g, ' ');
+        return label.replace(/^\w/, (m) => m.toUpperCase());
+    }
     renderAttributeField(attrName, attrValue) {
         const decodedValue = this.decodeSpecialAttribute(attrName, attrValue);
         const renderedValue = decodedValue === null || decodedValue === undefined ? '' : String(decodedValue);
+        const friendlyLabel = this.getAttributeLabel(attrName);
+        if (attrName === 'level' && this.elementInfo?.type === 'heading') {
+            const level = Math.min(6, Math.max(1, parseInt(renderedValue, 10) || 1));
+            return html `
+        <div class="selection-editor-attr-field">
+          <label
+            class="selection-editor-attr-label"
+            for="selection-editor-attr-${attrName}"
+          >
+            ${friendlyLabel}
+          </label>
+          <select
+            id="selection-editor-attr-${attrName}"
+            class="selection-editor-input selection-editor-select"
+            .value=${String(level)}
+            @change=${(e) => this.handleDraftAttrChange(e, attrName)}
+          >
+            ${[1, 2, 3, 4, 5, 6].map((n) => html `<option value="${n}">${n}</option>`)}
+          </select>
+        </div>
+      `;
+        }
         return html `
       <div class="selection-editor-attr-field">
         <label
           class="selection-editor-attr-label"
           for="selection-editor-attr-${attrName}"
         >
-          ${attrName}:
+          ${friendlyLabel}
         </label>
         <input
           type="text"
           id="selection-editor-attr-${attrName}"
           class="selection-editor-input"
           .value=${renderedValue}
-          placeholder="No value"
-          @change=${(e) => this.handleAttrChange(e, attrName)}
+          placeholder=${t('selectionEditor.defaultValue')}
+          @change=${(e) => this.handleDraftAttrChange(e, attrName)}
         />
       </div>
     `;
     }
+    /**
+     * Convert a raw attribute name like 'text-align' to a human-readable label.
+     */
+    getAttributeLabel(attrName) {
+        return attrName
+            .replace(/[-_]/g, ' ')
+            .replace(/^\w/, (m) => m.toUpperCase());
+    }
     /**
      * Decode known encoded attributes for more readable display/editing.
      */
@@ -325,25 +805,33 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
     }
     /**
      * Mount the citation source adapter UI when a citation node is selected.
+     * Uses draft context (onSourceChange) so changes apply only on Update.
      */
     mountCitationSourceAdapter(container) {
         if (!this.elementInfo || this.elementInfo.type !== 'citation') {
             return;
         }
-        const rawSource = this.elementInfo.attrs?.source;
-        const items = typeof rawSource === 'string'
-            ? SourceField.fromString(rawSource)
-            : Array.isArray(rawSource)
-                ? rawSource
-                : [];
+        const items = this.citationDraft != null
+            ? (SourceField.fromString(this.citationDraft.sourceEncoded ?? '') ?? [])
+            : (() => {
+                const rawSource = this.elementInfo.attrs?.source;
+                return typeof rawSource === 'string'
+                    ? SourceField.fromString(rawSource)
+                    : Array.isArray(rawSource)
+                        ? rawSource
+                        : [];
+            })();
         const adapter = this.citationSourceAdapter ?? getCitationSourceAdapter();
+        const refs = this.resolvedEditor?.references ?? [];
         const context = {
-            applySource: (encoded) => {
-                this.updateNodeAttribute('source', encoded);
-                return true;
+            onSourceChange: (encoded) => {
+                if (this.citationDraft) {
+                    this.citationDraft = { ...this.citationDraft, sourceEncoded: encoded };
+                }
             },
+            getReferences: () => refs.map((r) => ({ id: r.id, rawReference: r.rawReference })),
         };
-        adapter.render(container, items, context);
+        adapter.render(container, items.length > 0 ? items : [{ id: '' }], context);
     }
     /**
      * Unmount the citation source adapter and clean up.
@@ -357,16 +845,16 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
             container.innerHTML = '';
         }
     }
-    /**
-     * Handle attribute field changes.
-     */
-    handleAttrChange(event, attrName) {
+    handleDraftAttrChange(event, attrName) {
         const input = event.target;
         const value = input.value.trim();
         let parsedValue = value;
         if (attrName === 'source') {
             parsedValue = this.encodeSourceField(value);
         }
+        else if (attrName === 'alt') {
+            parsedValue = value;
+        }
         else if (value !== '') {
             const numValue = parseFloat(value);
             if (!isNaN(numValue) && isFinite(numValue)) {
@@ -379,49 +867,612 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
         else {
             parsedValue = null;
         }
-        this.updateNodeAttribute(attrName, parsedValue);
+        this.setDraftAttr(attrName, parsedValue);
+    }
+    /**
+     * Render the figure sidebar: type, id, alt text.
+     */
+    renderFigureSidebar() {
+        const attrs = this.getEffectiveAttrs();
+        const alt = typeof attrs.alt === 'string' ? attrs.alt : '';
+        return html `
+      <div class="selection-editor-container selection-editor-figure" role="form" aria-label=${t('selectionEditor.editFigure')} @keydown=${this.handleGenericKeydown}>
+        ${this.renderSelectionControls()}
+        <p class="selection-editor-type-header">${this.getNodeTypeLabel(this.elementInfo.type)}</p>
+        <div class="selection-editor-field">
+          <label class="selection-editor-label" for="figure-alt">${t('selectionEditor.altText')}</label>
+          <input
+            type="text"
+            id="figure-alt"
+            class="selection-editor-input"
+            .value=${alt}
+            placeholder=${t('selectionEditor.altTextPlaceholder')}
+            @change=${(e) => this.handleDraftAttrChange(e, 'alt')}
+          />
+        </div>
+        ${this.renderDraftActions()}
+      </div>
+    `;
     }
     /**
-     * Update node attributes using the command API.
-     * Preserves the 'data' attribute if it exists, even though it's not displayed.
+     * Render the math equation sidebar: TeX source, style, label, preview, status, Apply/Cancel.
      */
-    updateNodeAttribute(attrName, attrValue) {
-        if (!this.elementInfo || this.elementInfo.position === null) {
-            console.warn('[sciflow-selection-editor] Cannot update: no element info or position');
+    renderMathSidebar() {
+        const d = this.mathDraft;
+        const previewErr = this.mathPreviewResult?.error;
+        const previewWarnings = this.mathPreviewResult?.warnings ?? [];
+        return html `
+      <div
+        class="selection-editor-container selection-editor-math"
+        role="form"
+        aria-label=${t('selectionEditor.editEquation')}
+        @keydown=${this.handleMathKeydown}
+      >
+        ${this.renderSelectionControls()}
+        <p class="selection-editor-type-header">${this.getNodeTypeLabel(this.elementInfo.type)}</p>
+        <div class="selection-editor-field">
+          <label class="selection-editor-label" for="math-tex">${t('selectionEditor.tex')}</label>
+          <textarea
+            id="math-tex"
+            class="selection-editor-textarea"
+            .value=${d.tex}
+            placeholder=${t('selectionEditor.texPlaceholder')}
+            rows="4"
+            aria-describedby=${previewErr ? 'math-preview-error' : previewWarnings.length ? 'math-preview-warnings' : undefined}
+            @input=${(e) => {
+            const t = e.target.value;
+            this.mathDraft = { ...this.mathDraft, tex: t };
+            this.scheduleMathPreview();
+        }}
+          ></textarea>
+        </div>
+        <div class="selection-editor-field">
+          <label class="selection-editor-label" for="math-style">${t('selectionEditor.style')}</label>
+          <select
+            id="math-style"
+            class="selection-editor-input"
+            .value=${d.style}
+            @change=${(e) => {
+            this.mathDraft = { ...this.mathDraft, style: e.target.value };
+            this.scheduleMathPreview();
+        }}
+          >
+            <option value="inline">${t('selectionEditor.inline')}</option>
+            <option value="display">${t('selectionEditor.display')}</option>
+          </select>
+        </div>
+        <div class="selection-editor-field">
+          <label class="selection-editor-label" for="math-label">${t('selectionEditor.labelOptional')}</label>
+          <input
+            id="math-label"
+            type="text"
+            class="selection-editor-input"
+            .value=${d.label}
+            placeholder=${t('selectionEditor.labelPlaceholder')}
+            @input=${(e) => {
+            this.mathDraft = { ...this.mathDraft, label: e.target.value };
+        }}
+          />
+        </div>
+        <div class="selection-editor-field">
+          <span class="selection-editor-label">${t('selectionEditor.preview')}</span>
+          <div
+            class="selection-editor-math-preview"
+            ${ref((el) => {
+            this.mathPreviewContainer = el ?? null;
+            if (el) {
+                this.runMathPreview();
+            }
+        })}
+            role="img"
+            aria-label=${t('selectionEditor.equationPreview')}
+          ></div>
+          ${previewErr
+            ? html `<p id="math-preview-error" class="selection-editor-math-error" role="alert">${previewErr}</p>`
+            : ''}
+          ${previewWarnings.length
+            ? html `
+                <p id="math-preview-warnings" class="selection-editor-math-warnings" role="status">
+                  ${previewWarnings.join(' ')}
+                </p>
+              `
+            : ''}
+        </div>
+        <div class="selection-editor-math-actions">
+          <button
+            type="button"
+            class="selection-editor-button selection-editor-button--primary"
+            @click=${this.applyMathDraft}
+          >
+            ${t('selectionEditor.apply')}
+          </button>
+          <span class="selection-editor-math-hint">${t('selectionEditor.mathHint')}</span>
+        </div>
+        <p class="selection-editor-math-docs">
+          <a
+            href="https://docs.mathjax.org/en/v4.0"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="selection-editor-math-docs-link"
+          >${t('selectionEditor.mathDocsLink')}</a>
+        </p>
+      </div>
+    `;
+    }
+    scheduleMathPreview() {
+        if (this.mathPreviewDebounce) {
+            clearTimeout(this.mathPreviewDebounce);
+        }
+        this.mathPreviewDebounce = setTimeout(() => {
+            this.mathPreviewDebounce = null;
+            this.runMathPreview();
+        }, 300);
+    }
+    runMathPreview() {
+        if (!this.mathDraft || !this.mathPreviewContainer) {
+            return;
+        }
+        const tex = this.mathDraft.tex.trim() || '\\phantom{x}';
+        const display = this.mathDraft.style === 'display';
+        renderTexToSvg(tex, { display, metricsNode: this.mathPreviewContainer }).then((result) => {
+            if (!this.mathPreviewContainer) {
+                return;
+            }
+            this.mathPreviewContainer.innerHTML = '';
+            if (result.svg) {
+                this.mathPreviewContainer.appendChild(result.svg);
+                this.mathPreviewResult = result.warnings?.length ? { warnings: result.warnings } : null;
+            }
+            else {
+                this.mathPreviewResult = {
+                    ...(result.error ? { error: result.error } : {}),
+                    ...(result.warnings?.length ? { warnings: result.warnings } : {}),
+                };
+                if (result.unavailable && result.error) {
+                    const p = document.createElement('p');
+                    p.className = 'selection-editor-math-error';
+                    p.setAttribute('role', 'alert');
+                    p.textContent = result.error;
+                    this.mathPreviewContainer.appendChild(p);
+                }
+            }
+            this.requestUpdate();
+        });
+    }
+    applyMathDraft() {
+        if (!this.elementInfo || this.elementInfo.type !== 'math' || this.elementInfo.position === null || !this.mathDraft) {
             return;
         }
         const runner = this.getCommandRunner();
-        if (!runner) {
-            console.warn('[sciflow-selection-editor] Cannot update: no command runner');
+        const setNodeAttrs = runner?.commands?.setNodeAttrs;
+        if (!setNodeAttrs) {
             return;
         }
-        try {
-            // Prepare the updated attributes object
-            // The setNodeAttrs command merges with existing attributes, so 'data' will be preserved
-            const updatedAttrs = {
-                [attrName]: attrValue,
+        const ok = setNodeAttrs(this.elementInfo.position, {
+            tex: this.mathDraft.tex,
+            style: this.mathDraft.style,
+            label: this.mathDraft.label || undefined,
+        });
+        if (ok && this.resolvedEditor?.editorView) {
+            const sel = this.resolvedEditor.editorView.state.selection;
+            this.updateElementInfo({ anchor: sel.anchor, head: sel.head });
+        }
+    }
+    cancelMathDraft() {
+        if (this.elementInfo?.type === 'math' && this.elementInfo.attrs) {
+            const attrs = this.elementInfo.attrs;
+            this.mathDraft = {
+                tex: attrs.tex ?? '',
+                style: attrs.style === 'display' ? 'display' : 'inline',
+                label: attrs.label ?? '',
             };
-            // Use the editor command API to update node attributes
-            // The command implementation merges with existing attrs, preserving 'data' and other attributes
-            const setNodeAttrsCommand = runner.commands.setNodeAttrs;
-            if (!setNodeAttrsCommand) {
-                console.warn('[sciflow-selection-editor] setNodeAttrs command not available');
-                return;
+            this.scheduleMathPreview();
+            this.mathPreviewResult = null;
+        }
+    }
+    handleMathKeydown(e) {
+        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+            e.preventDefault();
+            this.applyMathDraft();
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            this.cancelMathDraft();
+        }
+    }
+    /**
+     * Render the citation sidebar: content editor, source fields, Update button.
+     */
+    renderCitationSidebar() {
+        return html `
+      <div
+        class="selection-editor-container selection-editor-citation"
+        role="form"
+        aria-label=${t('selectionEditor.editCitation')}
+        @keydown=${this.handleCitationKeydown}
+      >
+        ${this.renderSelectionControls()}
+        <p class="selection-editor-type-header">${this.getNodeTypeLabel(this.elementInfo.type)}</p>
+        <div class="selection-editor-field">
+          <label class="selection-editor-label" for="citation-content">${t('selectionEditor.inTextCitation')}</label>
+          <div
+            id="citation-content"
+            class="selection-editor-input selection-editor-citation-content selection-editor-citation-pm"
+            role="textbox"
+            aria-label=${t('selectionEditor.inTextCitationAriaLabel')}
+            ${ref((el) => {
+            if (el) {
+                this.mountCitationContentEditor(el);
             }
-            const success = setNodeAttrsCommand(this.elementInfo.position, updatedAttrs);
-            if (success && this.resolvedEditor?.editorView) {
-                const selection = this.resolvedEditor.editorView.state.selection;
-                this.updateElementInfo({
-                    anchor: selection.anchor,
-                    head: selection.head,
-                });
+            else {
+                this.destroyCitationContentView();
+            }
+        })}
+          ></div>
+        </div>
+        <div class="selection-editor-attr-field">
+          <span class="selection-editor-label">${t('selectionEditor.semanticReference')}</span>
+          <div
+            class="citation-source-adapter-root"
+            ${ref((el) => {
+            if (el) {
+                this.citationSourceContainer = el;
+                this.mountCitationSourceAdapter(el);
             }
-            else if (!success) {
-                console.warn('[sciflow-selection-editor] Failed to update node attribute');
+            else if (this.citationSourceContainer) {
+                this.unmountCitationSourceAdapter(this.citationSourceContainer);
+                this.citationSourceContainer = null;
             }
+        })}
+          ></div>
+        </div>
+        <div class="selection-editor-citation-actions">
+          <button
+            type="button"
+            class="selection-editor-button selection-editor-button--primary"
+            @click=${this.applyCitationDraft}
+          >
+            ${t('selectionEditor.update')}
+          </button>
+          <span class="selection-editor-citation-hint">${t('selectionEditor.updateHint')}</span>
+        </div>
+      </div>
+    `;
+    }
+    applyCitationDraft() {
+        if (!this.elementInfo ||
+            this.elementInfo.type !== 'citation' ||
+            this.elementInfo.position === null ||
+            !this.citationDraft) {
+            return;
+        }
+        const runner = this.getCommandRunner();
+        const updateCitationNode = runner?.commands?.updateCitationNode;
+        if (!updateCitationNode) {
+            console.warn('[sciflow-selection-editor] updateCitationNode command not available');
+            return;
+        }
+        const content = this.citationContentView?.state?.doc?.firstChild?.content ?? this.citationDraft.content;
+        const ok = updateCitationNode(this.elementInfo.position, {
+            attrs: { source: this.citationDraft.sourceEncoded },
+            content,
+        });
+        if (ok && this.resolvedEditor?.editorView) {
+            const sel = this.resolvedEditor.editorView.state.selection;
+            this.updateElementInfo({ anchor: sel.anchor, head: sel.head });
+        }
+    }
+    handleCitationKeydown(e) {
+        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+            e.preventDefault();
+            this.applyCitationDraft();
+        }
+    }
+    /**
+     * Render the cross-reference sidebar: display text + target, Update button.
+     */
+    renderCrossReferenceSidebar() {
+        const d = this.crossReferenceDraft;
+        const options = this.getOutlineTargetOptions();
+        const hasCurrentTarget = options.some((o) => o.id === d.href);
+        return html `
+      <div
+        class="selection-editor-container selection-editor-citation"
+        role="form"
+        aria-label=${t('selectionEditor.editCrossReference')}
+        @keydown=${this.handleCrossReferenceKeydown}
+      >
+        ${this.renderSelectionControls()}
+        <p class="selection-editor-type-header">${this.getNodeTypeLabel(this.elementInfo.type)}</p>
+        <div class="selection-editor-field">
+          <label class="selection-editor-label" for="crossref-content">${t('selectionEditor.displayText')}</label>
+          <input
+            id="crossref-content"
+            type="text"
+            class="selection-editor-input"
+            .value=${d.content}
+            placeholder=${t('selectionEditor.displayTextPlaceholder')}
+            @input=${(e) => {
+            this.crossReferenceDraft = {
+                ...this.crossReferenceDraft,
+                content: e.target.value,
+            };
+        }}
+          />
+        </div>
+        <div class="selection-editor-field">
+          <label class="selection-editor-label" for="crossref-target">${t('selectionEditor.target')}</label>
+          <select
+            id="crossref-target"
+            class="selection-editor-input selection-editor-select"
+            .value=${d.href}
+            @change=${(e) => {
+            this.crossReferenceDraft = {
+                ...this.crossReferenceDraft,
+                href: e.target.value,
+            };
+        }}
+          >
+            ${!hasCurrentTarget && d.href
+            ? html `<option value="${d.href}">${d.href}</option>`
+            : ''}
+            ${options.map((option) => html `<option value="${option.id}">${option.label ?? option.id}</option>`)}
+          </select>
+        </div>
+        <div class="selection-editor-citation-actions">
+          <button
+            type="button"
+            class="selection-editor-button selection-editor-button--primary"
+            @click=${this.applyCrossReferenceDraft}
+          >
+            ${t('selectionEditor.update')}
+          </button>
+          <span class="selection-editor-citation-hint">${t('selectionEditor.updateHint')}</span>
+        </div>
+      </div>
+    `;
+    }
+    applyCrossReferenceDraft() {
+        if (!this.elementInfo ||
+            this.elementInfo.type !== 'link' ||
+            this.elementInfo.position === null ||
+            !this.crossReferenceDraft) {
+            return;
+        }
+        const runner = this.getCommandRunner();
+        const updateCrossReferenceNode = runner?.commands?.updateCrossReferenceNode;
+        if (!updateCrossReferenceNode) {
+            console.warn('[sciflow-selection-editor] updateCrossReferenceNode command not available');
+            return;
+        }
+        const ok = updateCrossReferenceNode(this.elementInfo.position, {
+            attrs: { href: this.crossReferenceDraft.href },
+            content: this.crossReferenceDraft.content,
+        });
+        if (ok && this.resolvedEditor?.editorView) {
+            const sel = this.resolvedEditor.editorView.state.selection;
+            this.updateElementInfo({ anchor: sel.anchor, head: sel.head });
         }
-        catch (error) {
-            console.error('[sciflow-selection-editor] Failed to update node attribute:', error);
+    }
+    handleCrossReferenceKeydown(e) {
+        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+            e.preventDefault();
+            this.applyCrossReferenceDraft();
+        }
+    }
+    /**
+     * Render the hyperlink (anchor mark) sidebar: URL input, Apply and Remove buttons.
+     */
+    renderHyperlinkSidebar() {
+        const d = this.hyperlinkDraft;
+        return html `
+      <div
+        class="selection-editor-container selection-editor-citation"
+        role="form"
+        aria-label=${t('selectionEditor.editHyperlink')}
+        @keydown=${this.handleHyperlinkKeydown}
+      >
+        ${this.renderSelectionControls()}
+        <p class="selection-editor-type-header">${this.getNodeTypeLabel('anchor')}</p>
+        <div class="selection-editor-field">
+          <label class="selection-editor-label" for="hyperlink-href">${t('selectionEditor.url')}</label>
+          <input
+            id="hyperlink-href"
+            type="url"
+            class="selection-editor-input"
+            .value=${d.href}
+            placeholder=${t('selectionEditor.urlPlaceholder')}
+            @input=${(e) => {
+            this.hyperlinkDraft = { href: e.target.value };
+        }}
+          />
+        </div>
+        <div class="selection-editor-citation-actions">
+          <button
+            type="button"
+            class="selection-editor-button selection-editor-button--primary"
+            @click=${this.applyHyperlinkDraft}
+          >
+            ${t('selectionEditor.update')}
+          </button>
+          <button
+            type="button"
+            class="selection-editor-button"
+            @click=${this.removeHyperlink}
+          >
+            ${t('selectionEditor.removeLink')}
+          </button>
+          <span class="selection-editor-citation-hint">${t('selectionEditor.updateHint')}</span>
+        </div>
+      </div>
+    `;
+    }
+    applyHyperlinkDraft() {
+        const view = this.resolvedEditor?.editorView;
+        if (!view || !this.hyperlinkDraft)
+            return;
+        const { state } = view;
+        const anchorMarkType = state.schema.marks['anchor'];
+        if (!anchorMarkType)
+            return;
+        const newMark = anchorMarkType.create({ href: this.hyperlinkDraft.href, title: null, id: null });
+        // Find a document position known to be inside the anchor mark so that
+        // getMarkRange can resolve the full extent, regardless of where the
+        // selection boundaries fall relative to the marked text.
+        const { from, to, empty } = state.selection;
+        let posInsideMark = null;
+        if (!empty) {
+            state.doc.nodesBetween(from, to, (node, pos) => {
+                if (posInsideMark === null && node.isText && node.marks.some((m) => m.type === anchorMarkType)) {
+                    posInsideMark = pos + 1; // step into the text node
+                }
+                return posInsideMark === null;
+            });
+        }
+        const resolvedPos = posInsideMark !== null
+            ? state.doc.resolve(posInsideMark)
+            : state.selection.$from;
+        const range = getMarkRange(resolvedPos, anchorMarkType, null);
+        if (!range) {
+            // Mark exists only in storedMarks; update it in place.
+            view.dispatch(state.tr.addStoredMark(newMark));
+            return;
+        }
+        const tr = state.tr
+            .removeMark(range.from, range.to, anchorMarkType)
+            .addMark(range.from, range.to, newMark);
+        view.dispatch(tr);
+    }
+    removeHyperlink() {
+        const view = this.resolvedEditor?.editorView;
+        if (!view)
+            return;
+        const { state } = view;
+        const anchorMarkType = state.schema.marks['anchor'];
+        if (!anchorMarkType)
+            return;
+        const { from, to, empty } = state.selection;
+        if (empty) {
+            const range = getMarkRange(state.selection.$from, anchorMarkType, null);
+            if (!range) {
+                // Mark exists only in storedMarks; clear it.
+                view.dispatch(state.tr.removeStoredMark(anchorMarkType));
+                return;
+            }
+            view.dispatch(state.tr.removeMark(range.from, range.to, anchorMarkType));
+        }
+        else {
+            view.dispatch(state.tr.removeMark(from, to, anchorMarkType));
+        }
+    }
+    handleHyperlinkKeydown(e) {
+        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+            e.preventDefault();
+            this.applyHyperlinkDraft();
+        }
+    }
+    resetDraftAttrs() {
+        this.draftAttrs = null;
+        this.draftDirty = false;
+    }
+    getEffectiveAttrs() {
+        const base = (this.elementInfo?.attrs ?? {});
+        if (!this.draftAttrs || Object.keys(this.draftAttrs).length === 0) {
+            return base;
+        }
+        return { ...base, ...this.draftAttrs };
+    }
+    setDraftAttr(attrName, value) {
+        const currentAttrs = (this.elementInfo?.attrs ?? {});
+        const previous = currentAttrs[attrName] ?? null;
+        const nextDraft = { ...(this.draftAttrs ?? {}) };
+        if (previous === value) {
+            delete nextDraft[attrName];
+        }
+        else {
+            nextDraft[attrName] = value;
+        }
+        this.draftAttrs = Object.keys(nextDraft).length > 0 ? nextDraft : null;
+        this.draftDirty = Boolean(this.draftAttrs && Object.keys(this.draftAttrs).length > 0);
+    }
+    applyDraftAttrs() {
+        if (!this.draftAttrs || !this.draftDirty || !this.elementInfo || this.elementInfo.position === null) {
+            return;
+        }
+        const runner = this.getCommandRunner();
+        const setNodeAttrsCommand = runner?.commands?.setNodeAttrs;
+        if (!setNodeAttrsCommand) {
+            return;
+        }
+        const success = setNodeAttrsCommand(this.elementInfo.position, this.draftAttrs);
+        if (success && this.resolvedEditor?.editorView) {
+            const selection = this.resolvedEditor.editorView.state.selection;
+            this.resetDraftAttrs();
+            this.updateElementInfo({
+                anchor: selection.anchor,
+                head: selection.head,
+            });
+        }
+    }
+    revertDraftAttrs() {
+        this.resetDraftAttrs();
+    }
+    renderDraftActions() {
+        if (!this.draftDirty) {
+            return null;
+        }
+        return html `
+      <div class="selection-editor-actions">
+        <button
+          type="button"
+          class="selection-editor-button selection-editor-button--primary"
+          @click=${this.applyDraftAttrs}
+        >
+          ${t('selectionEditor.apply')}
+        </button>
+        <button
+          type="button"
+          class="selection-editor-button"
+          @click=${this.revertDraftAttrs}
+        >
+          ${t('selectionEditor.revert')}
+        </button>
+        <span class="selection-editor-hint">${t('selectionEditor.draftHint')}</span>
+      </div>
+    `;
+    }
+    renderSelectionControls() {
+        return html `
+      <div class="selection-editor-controls">
+        <button
+          type="button"
+          class="selection-editor-button selection-editor-button--secondary"
+          @click=${this.togglePinSelection}
+          aria-pressed=${this.pinSelection ? 'true' : 'false'}
+        >
+          ${this.pinSelection ? t('selectionEditor.unpinSelection') : t('selectionEditor.pinSelection')}
+        </button>
+      </div>
+    `;
+    }
+    togglePinSelection() {
+        this.pinSelection = !this.pinSelection;
+        if (!this.pinSelection && this.resolvedEditor?.editorView) {
+            const selection = this.resolvedEditor.editorView.state.selection;
+            this.scheduleSelectionUpdate({
+                anchor: selection.anchor,
+                head: selection.head,
+            });
+        }
+    }
+    handleGenericKeydown(e) {
+        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+            e.preventDefault();
+            this.applyDraftAttrs();
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            this.revertDraftAttrs();
         }
     }
     /**
@@ -461,6 +1512,33 @@ __decorate([
 __decorate([
     state()
 ], SciFlowSelectionEditorElement.prototype, "elementInfo", void 0);
+__decorate([
+    state()
+], SciFlowSelectionEditorElement.prototype, "mathDraft", void 0);
+__decorate([
+    state()
+], SciFlowSelectionEditorElement.prototype, "mathPreviewResult", void 0);
+__decorate([
+    state()
+], SciFlowSelectionEditorElement.prototype, "citationDraft", void 0);
+__decorate([
+    state()
+], SciFlowSelectionEditorElement.prototype, "crossReferenceDraft", void 0);
+__decorate([
+    state()
+], SciFlowSelectionEditorElement.prototype, "hyperlinkDraft", void 0);
+__decorate([
+    state()
+], SciFlowSelectionEditorElement.prototype, "draftAttrs", void 0);
+__decorate([
+    state()
+], SciFlowSelectionEditorElement.prototype, "draftDirty", void 0);
+__decorate([
+    state()
+], SciFlowSelectionEditorElement.prototype, "pinSelection", void 0);
+__decorate([
+    state()
+], SciFlowSelectionEditorElement.prototype, "showAllAttrs", void 0);
 SciFlowSelectionEditorElement = __decorate([
     customElement('sciflow-selection-editor')
 ], SciFlowSelectionEditorElement);