@qalma/kit 0.3.0 → 0.4.0

package/fesm2022/qalma-kit-headless.mjs

@@ -0,0 +1,932 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, output, Directive, signal, DestroyRef, afterNextRender } from '@angular/core';
+
+const DEFAULT_GAP$1 = 8;
+const DEFAULT_EDGE_MARGIN = 8;
+function anchorToRect(anchor, options) {
+    const gap = options.gap ?? DEFAULT_GAP$1;
+    const edgeMargin = options.edgeMargin ?? DEFAULT_EDGE_MARGIN;
+    const { boundary, size } = options;
+    if (options.placement === 'left' || options.placement === 'right') {
+        const mainAxis = options.placement === 'left'
+            ? anchor.left - gap - size.width
+            : anchor.right + gap;
+        const crossAxis = resolveCrossAxis(options.align, anchor.top, anchor.bottom, size.height);
+        return {
+            left: clamp$1(mainAxis, boundary.left + edgeMargin, boundary.right - edgeMargin - size.width),
+            top: clamp$1(crossAxis, boundary.top + edgeMargin, boundary.bottom - edgeMargin - size.height),
+        };
+    }
+    const mainAxis = options.placement === 'bottom'
+        ? anchor.bottom + gap
+        : anchor.top - gap - size.height;
+    const crossAxis = resolveCrossAxis(options.align, anchor.left, anchor.right, size.width);
+    return {
+        top: clamp$1(mainAxis, boundary.top + edgeMargin, boundary.bottom - edgeMargin - size.height),
+        left: clamp$1(crossAxis, boundary.left + edgeMargin, boundary.right - edgeMargin - size.width),
+    };
+}
+function resolveCrossAxis(align, start, end, size) {
+    const span = end - start;
+    if (size >= span) {
+        // The floating element doesn't fit within the anchor (e.g. a
+        // single-line block shorter than the button anchored to it). Center it
+        // instead of clamping to an arbitrary edge.
+        return start + span / 2 - size / 2;
+    }
+    if (typeof align === 'number') {
+        return clamp$1(align - size / 2, start, end - size);
+    }
+    switch (align) {
+        case 'end':
+            return end - size;
+        case 'center':
+            return start + (end - start) / 2 - size / 2;
+        case 'start':
+        default:
+            return start;
+    }
+}
+function clamp$1(value, min, max) {
+    const lo = Math.min(min, max);
+    const hi = Math.max(min, max);
+    return Math.min(Math.max(value, lo), hi);
+}
+
+const DEFAULT_MARGIN = 12;
+const DEFAULT_GAP = 8;
+/**
+ * Positions a floating list under an anchor rect, flipping it above when there
+ * is not enough room below, and clamping its height and horizontal position to
+ * the viewport. Shared by the mention and slash-command menus, whose flip
+ * behavior `anchorToRect` does not cover (it has no flip / dynamic max-height).
+ */
+function flipAbovePlacement(rect, options) {
+    const { width, desiredHeight, minHeight, margin = DEFAULT_MARGIN, gap = DEFAULT_GAP, } = options;
+    const availableBelow = window.innerHeight - rect.bottom - margin - gap;
+    const availableAbove = rect.top - margin - gap;
+    const openAbove = availableBelow < desiredHeight && availableAbove > availableBelow;
+    const availableHeight = Math.max(minHeight, openAbove ? availableAbove : availableBelow);
+    const maxHeight = Math.min(desiredHeight, availableHeight);
+    const leftBoundary = Math.max(margin, window.innerWidth - width - margin);
+    return {
+        left: Math.min(Math.max(rect.left, margin), leftBoundary),
+        top: openAbove ? null : rect.bottom + gap,
+        bottom: openAbove ? window.innerHeight - rect.top + gap : null,
+        maxHeight,
+    };
+}
+
+/**
+ * Shared outside-click / Escape dismiss behavior for floating overlays
+ * (popovers, contextual menus, autocomplete lists). Generalizes the
+ * ad-hoc click-outside/Escape handling that used to be reimplemented
+ * separately per feature.
+ */
+class DismissibleOverlay {
+    options;
+    pointerDown = (event) => {
+        if (!this.options.isInside(event.target)) {
+            this.options.onDismiss();
+        }
+    };
+    keydown = (event) => {
+        if (event.key === 'Escape') {
+            this.options.onDismiss();
+        }
+    };
+    constructor(options) {
+        this.options = options;
+    }
+    connect(destroyRef) {
+        document.addEventListener('pointerdown', this.pointerDown, true);
+        document.addEventListener('keydown', this.keydown);
+        destroyRef.onDestroy(() => {
+            document.removeEventListener('pointerdown', this.pointerDown, true);
+            document.removeEventListener('keydown', this.keydown);
+        });
+    }
+}
+
+/**
+ * Circular index step: move `index` by `delta` within `[0, length)`, wrapping
+ * around both ends; returns `index` unchanged for an empty list. This is the
+ * single source of truth for wrap-around list navigation — both
+ * `KeyboardNavigableList` (BYO-markup lists) and `QalmaSuggestionMenu` (the
+ * shipped mention/slash menus) delegate their arrow-key math to it.
+ */
+function wrapIndex(index, delta, length) {
+    return length > 0 ? (index + delta + length) % length : index;
+}
+/**
+ * Arrow-key navigation + Enter-to-select for autocomplete-style popovers
+ * (mention menu, slash command menu). Shared so both features stop
+ * reimplementing the same wrap-around index math.
+ *
+ * Takes a plain key string rather than a `KeyboardEvent` — some callers
+ * relay keys through a `CustomEvent` (no real `KeyboardEvent` to read),
+ * so preventing the default action is left to the caller.
+ */
+class KeyboardNavigableList {
+    options;
+    constructor(options) {
+        this.options = options;
+    }
+    /** Returns true when the key was handled (caller should stop further propagation / preventDefault). */
+    handleKey(key) {
+        const items = this.options.items();
+        if (items.length === 0) {
+            return false;
+        }
+        switch (key) {
+            case 'ArrowDown':
+                this.options.setActiveIndex(wrapIndex(this.options.activeIndex(), 1, items.length));
+                return true;
+            case 'ArrowUp':
+                this.options.setActiveIndex(wrapIndex(this.options.activeIndex(), -1, items.length));
+                return true;
+            case 'Enter': {
+                const index = this.options.activeIndex();
+                const item = items[index];
+                if (item === undefined) {
+                    return false;
+                }
+                this.options.onSelect(item, index);
+                return true;
+            }
+            default:
+                return false;
+        }
+    }
+}
+
+/** Option buttons carry this attribute so the base can focus/scroll to one by index. */
+const SUGGESTION_OPTION_INDEX_ATTR = 'data-suggestion-index';
+/** The scrollable options container carries this attribute (optional). */
+const SUGGESTION_OPTIONS_SCROLLER_ATTR = 'data-suggestion-options';
+/**
+ * Shared behavior for caret-anchored suggestion menus (mention, slash command):
+ * flip-above placement input, active-option highlighting, and in-menu keyboard
+ * handling (Escape dismisses, Arrow moves + focuses, Enter/Space picks) with
+ * wrap-around and optional scroll-into-view. Concrete menus only supply their
+ * own item markup and expose their option list via `optionList`.
+ */
+class QalmaSuggestionMenu {
+    elementRef = inject(ElementRef);
+    placement = input(null, ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    activeIndex = input(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    activate = output();
+    pick = output();
+    dismiss = output();
+    preserveSelection(event) {
+        event.preventDefault();
+    }
+    handleOptionKeydown(event, option, index) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.dismiss.emit();
+            return;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            const nextIndex = this.getNextIndex(index, event.key === 'ArrowDown' ? 1 : -1);
+            this.activate.emit(nextIndex);
+            queueMicrotask(() => this.focusOption(nextIndex));
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+            event.preventDefault();
+            this.pick.emit(option);
+        }
+    }
+    focusOption(index) {
+        this.optionElement(index)?.focus();
+        // No-op for menus without a marked scroller (native focus handles scroll).
+        this.scrollOptionIntoView(index);
+    }
+    scrollOptionIntoView(index) {
+        const scroller = this.optionsScroller();
+        const option = this.optionElement(index);
+        if (!scroller || !option) {
+            return;
+        }
+        const optionTop = option.offsetTop - scroller.offsetTop;
+        const optionBottom = optionTop + option.offsetHeight;
+        const visibleTop = scroller.scrollTop;
+        const visibleBottom = visibleTop + scroller.clientHeight;
+        if (optionTop < visibleTop) {
+            scroller.scrollTop = optionTop;
+        }
+        else if (optionBottom > visibleBottom) {
+            scroller.scrollTop = optionBottom - scroller.clientHeight;
+        }
+    }
+    getNextIndex(index, delta) {
+        return wrapIndex(index, delta, this.optionList().length);
+    }
+    optionElement(index) {
+        return this.elementRef.nativeElement.querySelector(`[${SUGGESTION_OPTION_INDEX_ATTR}="${index}"]`);
+    }
+    optionsScroller() {
+        return this.elementRef.nativeElement.querySelector(`[${SUGGESTION_OPTIONS_SCROLLER_ATTR}]`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaSuggestionMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: QalmaSuggestionMenu, isStandalone: true, inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activate: "activate", pick: "pick", dismiss: "dismiss" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaSuggestionMenu, decorators: [{
+            type: Directive
+        }], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], activate: [{ type: i0.Output, args: ["activate"] }], pick: [{ type: i0.Output, args: ["pick"] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
+
+const DRAG_START_DISTANCE = 8;
+const HANDLE_EDGE_MARGIN = 8;
+const HANDLE_GAP = 8;
+const HANDLE_BUTTON_SIZE = 30;
+const DROP_LINE_EDGE_MARGIN = 8;
+class QalmaDragHandleController {
+    editor;
+    handleState = signal(null, ...(ngDevMode ? [{ debugName: "handleState" }] : /* istanbul ignore next */ []));
+    dropIndicatorState = signal(null, ...(ngDevMode ? [{ debugName: "dropIndicatorState" }] : /* istanbul ignore next */ []));
+    draggedBlockHighlightState = signal(null, ...(ngDevMode ? [{ debugName: "draggedBlockHighlightState" }] : /* istanbul ignore next */ []));
+    handle = this.handleState.asReadonly();
+    dropIndicator = this.dropIndicatorState.asReadonly();
+    draggedBlockHighlight = this.draggedBlockHighlightState.asReadonly();
+    surface = null;
+    currentBlock = null;
+    pendingBlock = null;
+    lastPointerClientY = null;
+    refreshFrame = null;
+    handleKey = null;
+    dragSession = null;
+    constructor(editor) {
+        this.editor = editor;
+    }
+    connect(surface, destroyRef) {
+        this.surface = surface;
+        const pointerMove = (event) => this.handlePointerMove(event);
+        const pointerLeave = (event) => this.handlePointerLeave(event);
+        const scheduleRefresh = () => this.scheduleRefresh();
+        surface.addEventListener('pointermove', pointerMove, {
+            passive: true,
+        });
+        surface.addEventListener('mouseleave', pointerLeave);
+        surface.addEventListener('scroll', scheduleRefresh, {
+            passive: true,
+        });
+        window.addEventListener('scroll', scheduleRefresh, {
+            passive: true,
+        });
+        window.addEventListener('resize', scheduleRefresh, {
+            passive: true,
+        });
+        destroyRef.onDestroy(() => {
+            this.finishDrag(false);
+            this.cancelScheduledRefresh();
+            this.surface = null;
+            this.currentBlock = null;
+            this.pendingBlock = null;
+            surface.removeEventListener('pointermove', pointerMove);
+            surface.removeEventListener('mouseleave', pointerLeave);
+            surface.removeEventListener('scroll', scheduleRefresh);
+            window.removeEventListener('scroll', scheduleRefresh);
+            window.removeEventListener('resize', scheduleRefresh);
+        });
+    }
+    hide() {
+        this.currentBlock = null;
+        this.pendingBlock = null;
+        this.lastPointerClientY = null;
+        this.cancelScheduledRefresh();
+        this.setHandle(null);
+    }
+    startDrag(event, handle) {
+        if (event.button !== 0 || this.dragSession) {
+            return;
+        }
+        const surface = this.surface;
+        const sourceBlock = surface && findDragHandleBlockByPos(surface, handle.target.pos);
+        if (!surface || !sourceBlock) {
+            return;
+        }
+        event.preventDefault();
+        const session = {
+            handle,
+            sourceBlock,
+            originX: event.clientX,
+            originY: event.clientY,
+            dragging: false,
+            previousBodyCursor: document.body.style.cursor,
+            previousBodyUserSelect: document.body.style.userSelect,
+            pointerMove: (moveEvent) => this.handleDragPointerMove(moveEvent),
+            pointerUp: (upEvent) => this.handleDragPointerUp(upEvent),
+            pointerCancel: () => this.finishDrag(false),
+        };
+        this.dragSession = session;
+        window.addEventListener('pointermove', session.pointerMove, {
+            passive: false,
+        });
+        window.addEventListener('pointerup', session.pointerUp, {
+            passive: false,
+        });
+        window.addEventListener('pointercancel', session.pointerCancel);
+    }
+    handlePointerMove(event) {
+        if (this.dragSession?.dragging) {
+            return;
+        }
+        const surface = this.surface;
+        const target = event.target;
+        if (!surface || !(target instanceof Element)) {
+            return;
+        }
+        const block = findDragHandleBlock(target, surface);
+        if (!block) {
+            return;
+        }
+        if (event instanceof MouseEvent) {
+            this.lastPointerClientY = event.clientY;
+        }
+        this.pendingBlock = block;
+        this.scheduleRefresh();
+    }
+    handlePointerLeave(event) {
+        if (this.dragSession?.dragging) {
+            return;
+        }
+        const relatedTarget = event instanceof MouseEvent ? event.relatedTarget : null;
+        if (relatedTarget instanceof Element &&
+            relatedTarget.closest('[data-qalma-drag-handle]')) {
+            return;
+        }
+        this.hide();
+    }
+    handleDragPointerMove(event) {
+        const session = this.dragSession;
+        if (!session || !(event instanceof MouseEvent)) {
+            return;
+        }
+        const distance = Math.hypot(event.clientX - session.originX, event.clientY - session.originY);
+        if (!session.dragging && distance < DRAG_START_DISTANCE) {
+            return;
+        }
+        event.preventDefault();
+        if (!session.dragging) {
+            this.activateDragSession(session);
+        }
+        this.updateDropIndicator(event.clientY);
+    }
+    handleDragPointerUp(event) {
+        if (this.dragSession?.dragging && event instanceof MouseEvent) {
+            event.preventDefault();
+        }
+        this.finishDrag(true);
+    }
+    activateDragSession(session) {
+        session.dragging = true;
+        this.surface?.setAttribute('data-qalma-drag-active', 'true');
+        document.body.style.cursor = 'grabbing';
+        document.body.style.userSelect = 'none';
+        this.updateDraggedBlockHighlight(session.sourceBlock);
+    }
+    updateDropIndicator(clientY) {
+        const surface = this.surface;
+        const session = this.dragSession;
+        const candidate = surface && session
+            ? findDragDropCandidate(surface, session.handle.target.pos, clientY)
+            : null;
+        if (!candidate ||
+            !this.editor().canExecute('moveBlockTo', candidate.target)) {
+            this.setDropIndicator(null);
+            return;
+        }
+        this.setDropIndicator({
+            target: candidate.target,
+            transform: `translate3d(${Math.round(candidate.lineX)}px, ${Math.round(candidate.lineY)}px, 0)`,
+            width: Math.round(candidate.lineWidth),
+        });
+    }
+    updateDraggedBlockHighlight(block) {
+        const rect = block.getBoundingClientRect();
+        this.draggedBlockHighlightState.set({
+            transform: `translate3d(${Math.round(rect.left)}px, ${Math.round(rect.top)}px, 0)`,
+            width: Math.round(rect.width),
+            height: Math.round(rect.height),
+        });
+    }
+    finishDrag(shouldDrop) {
+        const session = this.dragSession;
+        if (!session) {
+            return;
+        }
+        const dropTarget = this.dropIndicatorState()?.target ?? null;
+        window.removeEventListener('pointermove', session.pointerMove);
+        window.removeEventListener('pointerup', session.pointerUp);
+        window.removeEventListener('pointercancel', session.pointerCancel);
+        this.surface?.removeAttribute('data-qalma-drag-active');
+        document.body.style.cursor = session.previousBodyCursor;
+        document.body.style.userSelect = session.previousBodyUserSelect;
+        this.dragSession = null;
+        this.setDropIndicator(null);
+        this.draggedBlockHighlightState.set(null);
+        if (shouldDrop && session.dragging && dropTarget) {
+            this.editor().execute('moveBlockTo', dropTarget);
+            this.hide();
+        }
+    }
+    scheduleRefresh() {
+        if (this.refreshFrame !== null) {
+            return;
+        }
+        this.refreshFrame = requestAnimationFrame(() => {
+            this.refreshFrame = null;
+            this.refresh();
+        });
+    }
+    refresh() {
+        const block = this.pendingBlock ?? this.currentBlock;
+        this.pendingBlock = null;
+        if (!block) {
+            this.hide();
+            return;
+        }
+        this.updateFromBlock(block);
+    }
+    updateFromBlock(block) {
+        const surface = this.surface;
+        const target = parseDragHandleTarget(block);
+        if (!surface || !target) {
+            this.hide();
+            return;
+        }
+        const rect = block.getBoundingClientRect();
+        if (!isRectVisibleInsideSurface$1(rect, surface)) {
+            this.hide();
+            return;
+        }
+        const surfaceRect = surface.getBoundingClientRect();
+        const position = anchorToRect(rect, {
+            placement: 'left',
+            boundary: surfaceRect,
+            size: { width: HANDLE_BUTTON_SIZE, height: HANDLE_BUTTON_SIZE },
+            gap: HANDLE_GAP,
+            edgeMargin: HANDLE_EDGE_MARGIN,
+            align: this.lastPointerClientY ?? rect.top + rect.height / 2,
+        });
+        const canMoveUp = this.editor().canExecute('moveBlockUp', target);
+        const canMoveDown = this.editor().canExecute('moveBlockDown', target);
+        this.currentBlock = block;
+        this.setHandle({
+            target,
+            transform: `translate3d(${Math.round(position.left)}px, ${Math.round(position.top)}px, 0)`,
+            blockType: block.dataset['qalmaDragHandleType'] ?? 'block',
+            canMoveUp,
+            canMoveDown,
+        });
+    }
+    cancelScheduledRefresh() {
+        if (this.refreshFrame === null) {
+            return;
+        }
+        cancelAnimationFrame(this.refreshFrame);
+        this.refreshFrame = null;
+    }
+    setHandle(handle) {
+        const nextKey = handle
+            ? [
+                handle.target.pos,
+                handle.transform,
+                handle.blockType,
+                handle.canMoveUp,
+                handle.canMoveDown,
+            ].join(':')
+            : null;
+        if (nextKey === this.handleKey) {
+            return;
+        }
+        this.handleKey = nextKey;
+        this.handleState.set(handle);
+    }
+    setDropIndicator(indicator) {
+        this.dropIndicatorState.set(indicator);
+    }
+}
+function findDragDropCandidate(surface, sourcePos, clientY) {
+    const blocks = Array.from(surface.querySelectorAll('[data-qalma-drag-handle-block]'));
+    const lineRect = getDropLineRect(surface);
+    let lastCandidate = null;
+    for (const block of blocks) {
+        const range = parseDragHandleBlockRange(block);
+        if (!range) {
+            continue;
+        }
+        const rect = block.getBoundingClientRect();
+        const midpoint = rect.top + rect.height / 2;
+        if (clientY < midpoint) {
+            return {
+                target: {
+                    pos: sourcePos,
+                    targetPos: range.pos,
+                },
+                lineX: lineRect.left,
+                lineY: rect.top,
+                lineWidth: lineRect.width,
+            };
+        }
+        lastCandidate = {
+            target: {
+                pos: sourcePos,
+                targetPos: range.to,
+            },
+            lineX: lineRect.left,
+            lineY: rect.bottom,
+            lineWidth: lineRect.width,
+        };
+    }
+    return lastCandidate;
+}
+function getDropLineRect(surface) {
+    const content = surface.querySelector('.ProseMirror') ?? surface;
+    const rect = content.getBoundingClientRect();
+    const width = Math.max(0, rect.width - DROP_LINE_EDGE_MARGIN * 2);
+    return {
+        left: rect.left + DROP_LINE_EDGE_MARGIN,
+        width,
+    };
+}
+function findDragHandleBlock(target, surface) {
+    const block = target.closest('[data-qalma-drag-handle-block]');
+    return block && surface.contains(block) ? block : null;
+}
+function findDragHandleBlockByPos(surface, pos) {
+    const blocks = Array.from(surface.querySelectorAll('[data-qalma-drag-handle-block]'));
+    return (blocks.find((block) => parseDragHandleTarget(block)?.pos === pos) ?? null);
+}
+function parseDragHandleTarget(block) {
+    const pos = Number(block.dataset['qalmaDragHandlePos']);
+    return Number.isInteger(pos) ? { pos } : null;
+}
+function parseDragHandleBlockRange(block) {
+    const target = parseDragHandleTarget(block);
+    const to = Number(block.dataset['qalmaDragHandleTo']);
+    return target && Number.isInteger(to) ? { ...target, to } : null;
+}
+function isRectVisibleInsideSurface$1(rect, surface) {
+    const surfaceRect = surface.getBoundingClientRect();
+    return (rect.bottom > surfaceRect.top &&
+        rect.top < surfaceRect.bottom &&
+        rect.right > surfaceRect.left &&
+        rect.left < surfaceRect.right);
+}
+
+class QalmaDragHandleDirective {
+    editor = input.required({ ...(ngDevMode ? { debugName: "editor" } : /* istanbul ignore next */ {}), alias: 'qalmaDragHandle' });
+    destroyRef = inject(DestroyRef);
+    host = inject(ElementRef);
+    controller = new QalmaDragHandleController(() => this.editor());
+    handle = this.controller.handle;
+    dropIndicator = this.controller.dropIndicator;
+    draggedBlockHighlight = this.controller.draggedBlockHighlight;
+    constructor() {
+        afterNextRender(() => {
+            this.controller.connect(this.host.nativeElement, this.destroyRef);
+        });
+    }
+    hide() {
+        this.controller.hide();
+    }
+    startDrag(event, handle) {
+        this.controller.startDrag(event, handle);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaDragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: QalmaDragHandleDirective, isStandalone: true, selector: "[qalmaDragHandle]", inputs: { editor: { classPropertyName: "editor", publicName: "qalmaDragHandle", isSignal: true, isRequired: true, transformFunction: null } }, exportAs: ["qalmaDragHandle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaDragHandleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'qalmaDragHandle',
+                    selector: '[qalmaDragHandle]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "qalmaDragHandle", required: true }] }] } });
+
+const TOOLBAR_EDGE_MARGIN = 16;
+const TOOLBAR_GAP = 8;
+class QalmaSelectionToolbarController {
+    editor;
+    placementState = signal(null, ...(ngDevMode ? [{ debugName: "placementState" }] : /* istanbul ignore next */ []));
+    placement = this.placementState.asReadonly();
+    surface = null;
+    refreshFrame = null;
+    placementKey = null;
+    constructor(editor) {
+        this.editor = editor;
+    }
+    connect(surface, destroyRef) {
+        this.surface = surface;
+        const refresh = () => this.refresh();
+        const scheduleRefresh = () => this.scheduleRefresh();
+        const handleKeydown = (event) => this.handleKeydown(event);
+        surface.addEventListener('qalma-selection-update', refresh);
+        surface.addEventListener('keydown', handleKeydown);
+        surface.addEventListener('keyup', refresh);
+        surface.addEventListener('mouseup', refresh);
+        surface.addEventListener('scroll', scheduleRefresh, {
+            passive: true,
+        });
+        window.addEventListener('scroll', scheduleRefresh, {
+            passive: true,
+        });
+        window.addEventListener('resize', scheduleRefresh, {
+            passive: true,
+        });
+        destroyRef.onDestroy(() => {
+            this.cancelScheduledRefresh();
+            this.surface = null;
+            surface.removeEventListener('qalma-selection-update', refresh);
+            surface.removeEventListener('keydown', handleKeydown);
+            surface.removeEventListener('keyup', refresh);
+            surface.removeEventListener('mouseup', refresh);
+            surface.removeEventListener('scroll', scheduleRefresh);
+            window.removeEventListener('scroll', scheduleRefresh);
+            window.removeEventListener('resize', scheduleRefresh);
+        });
+    }
+    refresh() {
+        const surface = this.surface;
+        const selection = this.editor().query('selection');
+        if (!surface ||
+            !selection ||
+            selection.empty ||
+            selection.text.trim().length === 0) {
+            this.hide();
+            return;
+        }
+        const domSelection = window.getSelection();
+        if (!domSelection ||
+            domSelection.rangeCount === 0 ||
+            !isSelectionInsideSurface(domSelection, surface)) {
+            this.hide();
+            return;
+        }
+        const rect = getVisibleSelectionRect(domSelection.getRangeAt(0));
+        if (!rect || !isRectVisibleInsideSurface(rect, surface)) {
+            this.hide();
+            return;
+        }
+        const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+        const x = Math.round(clamp(rect.left + rect.width / 2, TOOLBAR_EDGE_MARGIN, viewportWidth - TOOLBAR_EDGE_MARGIN));
+        const y = Math.round(Math.max(TOOLBAR_EDGE_MARGIN, rect.top - TOOLBAR_GAP));
+        this.setPlacement({
+            transform: `translate3d(${x}px, ${y}px, 0) translate(-50%, -100%)`,
+        });
+    }
+    hide() {
+        this.setPlacement(null);
+    }
+    handleKeydown(event) {
+        if (!(event instanceof KeyboardEvent) ||
+            event.key !== 'Escape' ||
+            !this.placement()) {
+            return;
+        }
+        event.preventDefault();
+        this.hide();
+    }
+    scheduleRefresh() {
+        if (!this.placement() || this.refreshFrame !== null) {
+            return;
+        }
+        this.refreshFrame = requestAnimationFrame(() => {
+            this.refreshFrame = null;
+            this.refresh();
+        });
+    }
+    cancelScheduledRefresh() {
+        if (this.refreshFrame === null) {
+            return;
+        }
+        cancelAnimationFrame(this.refreshFrame);
+        this.refreshFrame = null;
+    }
+    setPlacement(placement) {
+        const nextKey = placement?.transform ?? null;
+        if (nextKey === this.placementKey) {
+            return;
+        }
+        this.placementKey = nextKey;
+        this.placementState.set(placement);
+    }
+}
+function getVisibleSelectionRect(range) {
+    const rect = range.getBoundingClientRect();
+    if (rect.width > 0 || rect.height > 0) {
+        return rect;
+    }
+    for (const clientRect of Array.from(range.getClientRects())) {
+        if (clientRect.width > 0 || clientRect.height > 0) {
+            return clientRect;
+        }
+    }
+    return null;
+}
+function isSelectionInsideSurface(selection, surface) {
+    return (isNodeInsideSurface(selection.anchorNode, surface) &&
+        isNodeInsideSurface(selection.focusNode, surface));
+}
+function isNodeInsideSurface(node, surface) {
+    const element = node instanceof Element ? node : node?.parentElement;
+    return Boolean(element && surface.contains(element));
+}
+function isRectVisibleInsideSurface(rect, surface) {
+    const surfaceRect = surface.getBoundingClientRect();
+    return (rect.bottom > surfaceRect.top &&
+        rect.top < surfaceRect.bottom &&
+        rect.right > surfaceRect.left &&
+        rect.left < surfaceRect.right);
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+
+class QalmaSelectionToolbarDirective {
+    editor = input.required({ ...(ngDevMode ? { debugName: "editor" } : /* istanbul ignore next */ {}), alias: 'qalmaSelectionToolbar' });
+    destroyRef = inject(DestroyRef);
+    host = inject(ElementRef);
+    controller = new QalmaSelectionToolbarController(() => this.editor());
+    placement = this.controller.placement;
+    constructor() {
+        afterNextRender(() => {
+            this.controller.connect(this.host.nativeElement, this.destroyRef);
+        });
+    }
+    refresh() {
+        this.controller.refresh();
+    }
+    hide() {
+        this.controller.hide();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaSelectionToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: QalmaSelectionToolbarDirective, isStandalone: true, selector: "[qalmaSelectionToolbar]", inputs: { editor: { classPropertyName: "editor", publicName: "qalmaSelectionToolbar", isSignal: true, isRequired: true, transformFunction: null } }, exportAs: ["qalmaSelectionToolbar"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaSelectionToolbarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'qalmaSelectionToolbar',
+                    selector: '[qalmaSelectionToolbar]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "qalmaSelectionToolbar", required: true }] }] } });
+
+const LINK_POPOVER_WIDTH = 360;
+// Both the editing and preview rows are a single h-9 (36px) control plus
+// padding/border; this is an estimate since the actual element isn't
+// rendered yet when the placement is computed.
+const LINK_POPOVER_HEIGHT_ESTIMATE = 56;
+function createLinkPopoverPlacement(element) {
+    const rect = element.getBoundingClientRect();
+    return anchorToRect(rect, {
+        placement: 'bottom',
+        boundary: {
+            top: 0,
+            bottom: window.innerHeight,
+            left: 0,
+            right: window.innerWidth,
+        },
+        size: { width: LINK_POPOVER_WIDTH, height: LINK_POPOVER_HEIGHT_ESTIMATE },
+        gap: 8,
+        edgeMargin: 16,
+        align: 'start',
+    });
+}
+function findEditorLinkElement(target) {
+    if (!(target instanceof Element)) {
+        return null;
+    }
+    const element = target.closest('.ProseMirror a[href]');
+    return element instanceof HTMLAnchorElement ? element : null;
+}
+
+class LinkPopoverController {
+    editor;
+    popover = signal(null, ...(ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []));
+    href = signal('', ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+    hideTimeout;
+    constructor(editor) {
+        this.editor = editor;
+    }
+    showToolbarEditor(event) {
+        const linkState = this.editor.query('link');
+        const target = event.currentTarget;
+        if (!(target instanceof HTMLElement)) {
+            return;
+        }
+        this.keepOpen();
+        this.href.set(linkState?.href ?? 'https://');
+        this.popover.set({
+            ...createLinkPopoverPlacement(target),
+            editing: true,
+            element: null,
+            href: linkState?.href ?? '',
+            rel: linkState?.rel ?? null,
+            target: linkState?.target ?? null,
+            text: linkState?.text ?? '',
+        });
+    }
+    showPreview(event) {
+        const element = findEditorLinkElement(event.target);
+        if (!element) {
+            return;
+        }
+        this.keepOpen();
+        this.popover.set({
+            ...createLinkPopoverPlacement(element),
+            editing: false,
+            element,
+            href: element.href,
+            rel: element.rel || null,
+            target: element.target === '_blank' ? '_blank' : null,
+            text: element.textContent?.trim() ?? '',
+        });
+    }
+    scheduleHideFromEvent(event) {
+        const nextTarget = event.relatedTarget;
+        if (nextTarget instanceof Element &&
+            (findEditorLinkElement(nextTarget) ||
+                nextTarget.closest('[data-qalma-link-popover]'))) {
+            return;
+        }
+        if (!this.popover()?.editing) {
+            this.scheduleHide();
+        }
+    }
+    edit(popover) {
+        this.keepOpen();
+        this.selectLink(popover);
+        this.href.set(popover.href);
+        this.popover.set({
+            ...popover,
+            editing: true,
+        });
+    }
+    save(popover) {
+        const href = this.href().trim();
+        if (!href) {
+            return;
+        }
+        this.selectLink(popover);
+        this.editor.execute('setLink', href);
+        this.hide();
+    }
+    remove(popover) {
+        this.selectLink(popover);
+        this.editor.execute('unsetLink');
+        this.hide();
+    }
+    hide() {
+        this.clearHideTimeout();
+        this.popover.set(null);
+    }
+    keepOpen() {
+        this.clearHideTimeout();
+    }
+    scheduleHide() {
+        this.clearHideTimeout();
+        if (this.popover()?.editing) {
+            return;
+        }
+        this.hideTimeout = setTimeout(() => {
+            if (this.popover()?.editing) {
+                this.hideTimeout = undefined;
+                return;
+            }
+            this.popover.set(null);
+            this.hideTimeout = undefined;
+        }, 160);
+    }
+    selectLink(popover) {
+        if (popover.element) {
+            this.editor.execute('selectLink', {
+                element: popover.element,
+            });
+        }
+    }
+    clearHideTimeout() {
+        if (!this.hideTimeout) {
+            return;
+        }
+        clearTimeout(this.hideTimeout);
+        this.hideTimeout = undefined;
+    }
+}
+
+// @qalma/kit/headless — dependency-free behavior for the Qalma editor.
+//
+// Controllers, geometry helpers, dismiss/keyboard primitives and unstyled
+// directives, with zero styling dependencies — no CSS-class or icon libraries.
+// Import from here when you bring your own design system and only want the
+// editor behavior wired up; import from `@qalma/kit` for the styled components.
+// Positioning geometry
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DismissibleOverlay, KeyboardNavigableList, LinkPopoverController, QalmaDragHandleController, QalmaDragHandleDirective, QalmaSelectionToolbarController, QalmaSelectionToolbarDirective, QalmaSuggestionMenu, SUGGESTION_OPTIONS_SCROLLER_ATTR, SUGGESTION_OPTION_INDEX_ATTR, anchorToRect, createLinkPopoverPlacement, findEditorLinkElement, flipAbovePlacement, wrapIndex };
+//# sourceMappingURL=qalma-kit-headless.mjs.map