@qalma/kit 0.3.0 → 0.5.0

package/fesm2022/qalma-kit.mjs

@@ -1,70 +1,24 @@
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { DismissibleOverlay, QalmaSuggestionMenu } from '@qalma/kit/headless';
+export * from '@qalma/kit/headless';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, computed, Directive, ChangeDetectionStrategy, Component, signal, DestroyRef, afterNextRender, output, effect } from '@angular/core';
-import { cva } from 'class-variance-authority';
+import { input, ChangeDetectionStrategy, Component, computed, inject, ElementRef, Directive, output, signal, DestroyRef, effect } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { QalmaCommand, QalmaToolbar } from '@qalma/editor';
 import { NgTemplateOutlet } from '@angular/common';
 import { lucideUnlink, lucideUndo2, lucideUnderline, lucideTrash2, lucideTextQuote, lucideTable, lucideSuperscript, lucideSubscript, lucideStrikethrough, lucideSquareCode, lucideRows3, lucideRedo2, lucidePilcrow, lucideOutdent, lucideListTodo, lucideListOrdered, lucideList, lucideLetterText, lucideItalic, lucideIndent, lucideHeading3, lucideHeading2, lucideHeading1, lucideHeading, lucideEraser, lucideColumns3, lucideCode, lucideBold, lucideBetweenVerticalEnd, lucideBetweenHorizontalEnd, lucideAlignRight, lucideAlignLeft, lucideAlignJustify, lucideAlignCenter, lucideMousePointer2, lucideGripVertical, lucideCopy, lucideArrowUp, lucideArrowDown, lucideMinus, lucideX, lucidePencil, lucideLink, lucideExternalLink, lucideCheck } from '@ng-icons/lucide';
-
-function cn(...inputs) {
-    return twMerge(clsx(inputs));
-}
-
-const buttonVariants = cva('inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_ng-icon]:shrink-0', {
-    variants: {
-        variant: {
-            default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-            outline: 'border border-border bg-card text-foreground hover:bg-secondary hover:text-secondary-foreground',
-            ghost: 'text-foreground hover:bg-secondary hover:text-secondary-foreground',
-            accent: 'bg-accent text-accent-foreground hover:bg-accent/90',
-            link: 'text-accent underline-offset-4 hover:underline',
-        },
-        size: {
-            default: 'h-9 px-4 py-2',
-            sm: 'h-8 rounded-md px-3 text-xs',
-            lg: 'h-11 rounded-md px-6 text-base',
-            icon: 'h-9 w-9',
-        },
-    },
-    defaultVariants: {
-        variant: 'default',
-        size: 'default',
-    },
-});
-/**
- * Headless-styled button directive so it composes onto native `<button>` and
- * `<a>` elements while reading from the host's Tailwind design tokens.
- */
-class QalmaButton {
-    host = inject(ElementRef);
-    initialClass = this.host.nativeElement.getAttribute('class') ?? '';
-    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    computedClass = computed(() => cn(buttonVariants({ variant: this.variant(), size: this.size() }), this.initialClass), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: QalmaButton, isStandalone: true, selector: "button[qalmaBtn], a[qalmaBtn]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaButton, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'button[qalmaBtn], a[qalmaBtn]',
-                    host: {
-                        '[class]': 'computedClass()',
-                    },
-                }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 /**
  * Default styling for a toolbar command button. Icon-only, square, and driven
  * entirely by the host's shadcn-style design tokens (`text-muted-foreground`,
- * `bg-secondary`, `bg-accent-subtle`…) so it themes with the surrounding app.
+ * `bg-card`, `bg-secondary`, `bg-accent-subtle`…) so it themes with the
+ * surrounding app.
  * The `qalma-command-active` class is toggled by the `QalmaCommand` directive
  * when the underlying command is active.
  */
-const TOOLBAR_BUTTON_CLASS = 'inline-flex h-[1.85rem] w-[1.85rem] cursor-pointer items-center justify-center rounded-[0.4rem] border border-transparent text-muted-foreground transition hover:bg-secondary hover:text-foreground disabled:cursor-not-allowed disabled:opacity-45 [&.qalma-command-active]:border-accent/40 [&.qalma-command-active]:bg-accent-subtle [&.qalma-command-active]:text-accent';
+const TOOLBAR_BUTTON_CLASS = 'inline-flex h-[1.85rem] w-[1.85rem] cursor-pointer items-center justify-center rounded-[0.4rem] border border-border bg-card text-muted-foreground transition hover:border-accent/50 hover:bg-secondary hover:text-foreground disabled:cursor-not-allowed disabled:opacity-45 [&.qalma-command-active]:border-accent/40 [&.qalma-command-active]:bg-accent-subtle [&.qalma-command-active]:text-accent';
 /**
  * Generic, declarative toolbar button for a single editor command.
  *
@@ -368,500 +322,54 @@ function provideQalmaToolbarIcons() {
     });
 }
 
-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);
-}
-
-/**
- * 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);
-        });
-    }
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
 }
 
+const buttonVariants = cva('inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_ng-icon]:shrink-0', {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+            outline: 'border border-border bg-card text-foreground hover:bg-secondary hover:text-secondary-foreground',
+            ghost: 'text-foreground hover:bg-secondary hover:text-secondary-foreground',
+            accent: 'bg-accent text-accent-foreground hover:bg-accent/90',
+            link: 'text-accent underline-offset-4 hover:underline',
+        },
+        size: {
+            default: 'h-9 px-4 py-2',
+            sm: 'h-8 rounded-md px-3 text-xs',
+            lg: 'h-11 rounded-md px-6 text-base',
+            icon: 'h-9 w-9',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
 /**
- * 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.
+ * Headless-styled button directive so it composes onto native `<button>` and
+ * `<a>` elements while reading from the host's Tailwind design tokens.
  */
-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((this.options.activeIndex() + 1) % items.length);
-                return true;
-            case 'ArrowUp':
-                this.options.setActiveIndex((this.options.activeIndex() - 1 + items.length) % 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;
-        }
-    }
-}
-
-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);
+class QalmaButton {
     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 });
+    initialClass = this.host.nativeElement.getAttribute('class') ?? '';
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(buttonVariants({ variant: this.variant(), size: this.size() }), this.initialClass), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: QalmaButton, isStandalone: true, selector: "button[qalmaBtn], a[qalmaBtn]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaDragHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaButton, decorators: [{
             type: Directive,
             args: [{
-                    exportAs: 'qalmaDragHandle',
-                    selector: '[qalmaDragHandle]',
+                    selector: 'button[qalmaBtn], a[qalmaBtn]',
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "qalmaDragHandle", required: true }] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 class QalmaDragHandle {
     editor = input.required(...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
@@ -1170,108 +678,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], handle: [{ type: i0.Input, args: [{ isSignal: true, alias: "handle", required: false }] }], dropIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropIndicator", required: false }] }], draggedBlockHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggedBlockHighlight", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }] } });
 
-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,
-    };
-}
-
-/** 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) {
-        const length = this.optionList().length;
-        return length > 0 ? (index + delta + length) % length : index;
-    }
-    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"] }] } });
-
 /**
  * Caret-anchored mention suggestion menu: an avatar-initial list with a loading
  * state. Positioning, keyboard handling and active highlighting come from
@@ -1666,148 +1072,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
-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;
-    }
-}
-
 class QalmaLinkPopover {
     popover = input(null, ...(ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []));
     href = input.required(...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
@@ -2056,13 +1320,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }], propDecorators: { popover: [{ type: i0.Input, args: [{ isSignal: true, alias: "popover", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: true }] }], hrefChange: [{ type: i0.Output, args: ["hrefChange"] }], edit: [{ type: i0.Output, args: ["edit"] }], save: [{ type: i0.Output, args: ["save"] }], remove: [{ type: i0.Output, args: ["remove"] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], keepOpen: [{ type: i0.Output, args: ["keepOpen"] }], scheduleHide: [{ type: i0.Output, args: ["scheduleHide"] }] } });
 
+/**
+ * Floating, selection-anchored toolbar container. It owns the hard parts — the
+ * fixed-position `transform` from a {@link QalmaContextualToolbarPlacement}
+ * (see `QalmaSelectionToolbarDirective`), preserving the editor selection on
+ * pointer-down, and Escape-to-dismiss — and projects whatever controls you put
+ * inside it. Nothing about the button set is baked in: compose
+ * `<qalma-toolbar-button>` for commands and your own buttons for app actions
+ * (opening a link editor, a color picker, an AI action…).
+ *
+ * The container's `mousedown` handler preserves the selection for every
+ * projected control via event bubbling, so inner buttons don't each need to.
+ *
+ * ```html
+ * <qalma-contextual-toolbar
+ *   [placement]="selection.placement()"
+ *   (dismiss)="selection.hide()"
+ * >
+ *   <qalma-toolbar-button command="toggleBold" icon="lucideBold" label="Bold" />
+ *   <qalma-toolbar-button command="toggleItalic" icon="lucideItalic" label="Italic" />
+ *   <button type="button" [class]="TOOLBAR_BUTTON_CLASS" (click)="openLinkEditor()">…</button>
+ * </qalma-contextual-toolbar>
+ * ```
+ */
 class QalmaContextualToolbar {
-    editor = input.required(...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
     placement = input(null, ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
-    requestLink = output();
+    /** Accessible name for the toolbar region. */
+    label = input('Selection formatting', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     dismiss = output();
-    canSetLink = computed(() => this.editor().canExecute('setLink', 'https://angular.dev'), ...(ngDevMode ? [{ debugName: "canSetLink" }] : /* istanbul ignore next */ []));
-    linkActive = computed(() => this.editor().isCommandActive('setLink'), ...(ngDevMode ? [{ debugName: "linkActive" }] : /* istanbul ignore next */ []));
     preserveSelection(event) {
         event.preventDefault();
     }
@@ -2071,397 +1356,57 @@ class QalmaContextualToolbar {
         this.dismiss.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaContextualToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: QalmaContextualToolbar, isStandalone: true, selector: "qalma-contextual-toolbar", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { requestLink: "requestLink", dismiss: "dismiss" }, providers: [
-            provideIcons({
-                lucideBold,
-                lucideCode,
-                lucideItalic,
-                lucideLetterText,
-                lucideLink,
-            }),
-        ], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: QalmaContextualToolbar, isStandalone: true, selector: "qalma-contextual-toolbar", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: `
     @if (placement(); as placement) {
       <qalma-toolbar
-        label="Selection formatting"
+        [label]="label()"
         class="fixed left-0 top-0 z-30 flex items-center gap-0.5 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg will-change-transform"
         [style.transform]="placement.transform"
         (mousedown)="preserveSelection($event)"
         (keydown.escape)="dismissFromKeyboard($event)"
       >
-        <button
-          qalmaBtn
-          variant="ghost"
-          size="icon"
-          type="button"
-          class="!h-[1.85rem] !w-[1.85rem] cursor-pointer rounded-[0.4rem] disabled:cursor-not-allowed [&.qalma-command-active]:bg-accent-subtle [&.qalma-command-active]:text-accent"
-          qalmaCommand="toggleBold"
-          title="Bold"
-          aria-label="Bold"
-        >
-          <ng-icon
-            class="text-[0.9rem]"
-            name="lucideBold"
-            aria-hidden="true"
-          />
-        </button>
-        <button
-          qalmaBtn
-          variant="ghost"
-          size="icon"
-          type="button"
-          class="!h-[1.85rem] !w-[1.85rem] cursor-pointer rounded-[0.4rem] disabled:cursor-not-allowed [&.qalma-command-active]:bg-accent-subtle [&.qalma-command-active]:text-accent"
-          qalmaCommand="toggleItalic"
-          title="Italic"
-          aria-label="Italic"
-        >
-          <ng-icon
-            class="text-[0.9rem]"
-            name="lucideItalic"
-            aria-hidden="true"
-          />
-        </button>
-        <button
-          qalmaBtn
-          variant="ghost"
-          size="icon"
-          type="button"
-          class="!h-[1.85rem] !w-[1.85rem] cursor-pointer rounded-[0.4rem] disabled:cursor-not-allowed [&.qalma-command-active]:bg-accent-subtle [&.qalma-command-active]:text-accent"
-          qalmaCommand="toggleInlineCode"
-          title="Inline code"
-          aria-label="Inline code"
-        >
-          <ng-icon
-            class="text-[0.9rem]"
-            name="lucideCode"
-            aria-hidden="true"
-          />
-        </button>
-        <button
-          qalmaBtn
-          variant="ghost"
-          size="icon"
-          type="button"
-          class="!h-[1.85rem] !w-[1.85rem] cursor-pointer rounded-[0.4rem] disabled:cursor-not-allowed [&.qalma-command-active]:bg-accent-subtle [&.qalma-command-active]:text-accent"
-          qalmaCommand="toggleMonospace"
-          title="Monospace"
-          aria-label="Monospace"
-        >
-          <ng-icon
-            class="text-[0.9rem]"
-            name="lucideLetterText"
-            aria-hidden="true"
-          />
-        </button>
-        <span class="mx-0.5 h-5 w-px bg-border" aria-hidden="true"></span>
-        <button
-          qalmaBtn
-          variant="ghost"
-          size="icon"
-          type="button"
-          class="!h-[1.85rem] !w-[1.85rem] cursor-pointer rounded-[0.4rem] disabled:cursor-not-allowed [&.qalma-command-active]:bg-accent-subtle [&.qalma-command-active]:text-accent"
-          [class.qalma-command-active]="linkActive()"
-          [attr.aria-pressed]="linkActive()"
-          [disabled]="!canSetLink()"
-          (mousedown)="preserveSelection($event)"
-          (click)="requestLink.emit($event)"
-          title="Link"
-          aria-label="Link"
-        >
-          <ng-icon
-            class="text-[0.9rem]"
-            name="lucideLink"
-            aria-hidden="true"
-          />
-        </button>
+        <ng-content />
       </qalma-toolbar>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: QalmaButton, selector: "button[qalmaBtn], a[qalmaBtn]", inputs: ["variant", "size"] }, { kind: "directive", type: QalmaCommand, selector: "button[qalmaCommand]", inputs: ["qalmaCommand", "qalmaCommandValue"] }, { kind: "component", type: QalmaToolbar, selector: "qalma-toolbar", inputs: ["label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: QalmaToolbar, selector: "qalma-toolbar", inputs: ["label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaContextualToolbar, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgIcon, QalmaButton, QalmaCommand, QalmaToolbar],
-                    providers: [
-                        provideIcons({
-                            lucideBold,
-                            lucideCode,
-                            lucideItalic,
-                            lucideLetterText,
-                            lucideLink,
-                        }),
-                    ],
+                    imports: [QalmaToolbar],
                     selector: 'qalma-contextual-toolbar',
                     template: `
     @if (placement(); as placement) {
       <qalma-toolbar
-        label="Selection formatting"
+        [label]="label()"
         class="fixed left-0 top-0 z-30 flex items-center gap-0.5 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg will-change-transform"
         [style.transform]="placement.transform"
         (mousedown)="preserveSelection($event)"
         (keydown.escape)="dismissFromKeyboard($event)"
       >
-        <button
-          qalmaBtn
-          variant="ghost"
-          size="icon"
-          type="button"
-          class="!h-[1.85rem] !w-[1.85rem] cursor-pointer rounded-[0.4rem] disabled:cursor-not-allowed [&.qalma-command-active]:bg-accent-subtle [&.qalma-command-active]:text-accent"
-          qalmaCommand="toggleBold"
-          title="Bold"
-          aria-label="Bold"
-        >
-          <ng-icon
-            class="text-[0.9rem]"
-            name="lucideBold"
-            aria-hidden="true"
-          />
-        </button>
-        <button
-          qalmaBtn
-          variant="ghost"
-          size="icon"
-          type="button"
-          class="!h-[1.85rem] !w-[1.85rem] cursor-pointer rounded-[0.4rem] disabled:cursor-not-allowed [&.qalma-command-active]:bg-accent-subtle [&.qalma-command-active]:text-accent"
-          qalmaCommand="toggleItalic"
-          title="Italic"
-          aria-label="Italic"
-        >
-          <ng-icon
-            class="text-[0.9rem]"
-            name="lucideItalic"
-            aria-hidden="true"
-          />
-        </button>
-        <button
-          qalmaBtn
-          variant="ghost"
-          size="icon"
-          type="button"
-          class="!h-[1.85rem] !w-[1.85rem] cursor-pointer rounded-[0.4rem] disabled:cursor-not-allowed [&.qalma-command-active]:bg-accent-subtle [&.qalma-command-active]:text-accent"
-          qalmaCommand="toggleInlineCode"
-          title="Inline code"
-          aria-label="Inline code"
-        >
-          <ng-icon
-            class="text-[0.9rem]"
-            name="lucideCode"
-            aria-hidden="true"
-          />
-        </button>
-        <button
-          qalmaBtn
-          variant="ghost"
-          size="icon"
-          type="button"
-          class="!h-[1.85rem] !w-[1.85rem] cursor-pointer rounded-[0.4rem] disabled:cursor-not-allowed [&.qalma-command-active]:bg-accent-subtle [&.qalma-command-active]:text-accent"
-          qalmaCommand="toggleMonospace"
-          title="Monospace"
-          aria-label="Monospace"
-        >
-          <ng-icon
-            class="text-[0.9rem]"
-            name="lucideLetterText"
-            aria-hidden="true"
-          />
-        </button>
-        <span class="mx-0.5 h-5 w-px bg-border" aria-hidden="true"></span>
-        <button
-          qalmaBtn
-          variant="ghost"
-          size="icon"
-          type="button"
-          class="!h-[1.85rem] !w-[1.85rem] cursor-pointer rounded-[0.4rem] disabled:cursor-not-allowed [&.qalma-command-active]:bg-accent-subtle [&.qalma-command-active]:text-accent"
-          [class.qalma-command-active]="linkActive()"
-          [attr.aria-pressed]="linkActive()"
-          [disabled]="!canSetLink()"
-          (mousedown)="preserveSelection($event)"
-          (click)="requestLink.emit($event)"
-          title="Link"
-          aria-label="Link"
-        >
-          <ng-icon
-            class="text-[0.9rem]"
-            name="lucideLink"
-            aria-hidden="true"
-          />
-        </button>
+        <ng-content />
       </qalma-toolbar>
     }
   `,
                 }]
-        }], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], requestLink: [{ type: i0.Output, args: ["requestLink"] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
-
-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);
-}
+        }], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
 
-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 }] }] } });
+// @qalma/kit — Tailwind/shadcn-flavored UI for the Qalma editor.
+//
+// This entry point is the styled tier: components that pull `cva` + `@ng-icons`
+// and read the host's design tokens. It re-exports the entire dependency-free
+// `@qalma/kit/headless` surface (controllers, geometry, keyboard nav) so it
+// stays a superset — bring-your-own-design-system consumers can import the
+// leaner `@qalma/kit/headless` directly instead.
+//
+// The internal `QalmaButton` directive and `cn()` helper are intentionally NOT
+// exported: a host already has a button and a class-merge utility in its design
+// system. They remain private implementation details of the styled components.
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DismissibleOverlay, KeyboardNavigableList, LinkPopoverController, QALMA_TOOLBAR_ALIGN, QALMA_TOOLBAR_CLEAR_FORMATTING, QALMA_TOOLBAR_HEADINGS, QALMA_TOOLBAR_HISTORY, QALMA_TOOLBAR_INLINE_MARKS, QALMA_TOOLBAR_LISTS, QALMA_TOOLBAR_TABLE_INSERT, QALMA_TOOLBAR_TABLE_OPS, QALMA_TOOLBAR_UNSET_LINK, QalmaButton, QalmaContextualToolbar, QalmaDragHandle, QalmaDragHandleController, QalmaDragHandleDirective, QalmaLinkPopover, QalmaMentionMenu, QalmaSelectionToolbarController, QalmaSelectionToolbarDirective, QalmaSlashCommandMenu, QalmaSuggestionMenu, QalmaToolbarButton, QalmaToolbarRegistry, SUGGESTION_OPTIONS_SCROLLER_ATTR, SUGGESTION_OPTION_INDEX_ATTR, TOOLBAR_BUTTON_CLASS, TOOLBAR_SEPARATOR_CLASS, anchorToRect, buttonVariants, cn, createLinkPopoverPlacement, findEditorLinkElement, flipAbovePlacement, isToolbarCommandItem, provideQalmaToolbarIcons };
+export { QALMA_TOOLBAR_ALIGN, QALMA_TOOLBAR_CLEAR_FORMATTING, QALMA_TOOLBAR_HEADINGS, QALMA_TOOLBAR_HISTORY, QALMA_TOOLBAR_INLINE_MARKS, QALMA_TOOLBAR_LISTS, QALMA_TOOLBAR_TABLE_INSERT, QALMA_TOOLBAR_TABLE_OPS, QALMA_TOOLBAR_UNSET_LINK, QalmaContextualToolbar, QalmaDragHandle, QalmaLinkPopover, QalmaMentionMenu, QalmaSlashCommandMenu, QalmaToolbarButton, QalmaToolbarRegistry, TOOLBAR_BUTTON_CLASS, TOOLBAR_SEPARATOR_CLASS, isToolbarCommandItem, provideQalmaToolbarIcons };
 //# sourceMappingURL=qalma-kit.mjs.map