@qalma/kit 0.1.0-beta.0

package/fesm2022/qalma-kit.mjs

@@ -0,0 +1,2467 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+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 { 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 }] }] } });
+
+/**
+ * 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.
+ * 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';
+/**
+ * Generic, declarative toolbar button for a single editor command.
+ *
+ * Renders a native `<button>` wired to the `QalmaCommand` directive (execute /
+ * active / disabled / aria) with an `<ng-icon>`, so a whole toolbar becomes a
+ * list of `<qalma-toolbar-button command icon label />` instead of the
+ * six-line `<button qalmaCommand><ng-icon></button>` block repeated per
+ * command. The host uses `display: contents` so the inner button participates
+ * directly in the surrounding toolbar's flex layout.
+ *
+ * Icons resolve from the `NgIcon` provider scope of the surrounding component
+ * (register them with `provideIcons({ … })` as usual).
+ */
+class QalmaToolbarButton {
+    /** Command name to execute, e.g. `toggleBold`. */
+    command = input.required(...(ngDevMode ? [{ debugName: "command" }] : /* istanbul ignore next */ []));
+    /** Optional command payload (forwarded to `qalmaCommandValue`). */
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Lucide (or any registered) icon name, e.g. `lucideBold`. */
+    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Accessible name — used for both `title` and `aria-label`. */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Optional icon-size class override (default: `text-[0.9rem]`). */
+    iconClass = input('text-[0.9rem]', ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+    buttonClass = TOOLBAR_BUTTON_CLASS;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaToolbarButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: QalmaToolbarButton, isStandalone: true, selector: "qalma-toolbar-button", inputs: { command: { classPropertyName: "command", publicName: "command", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    <button
+      type="button"
+      [qalmaCommand]="command()"
+      [qalmaCommandValue]="value()"
+      [class]="buttonClass"
+      [title]="label()"
+      [attr.aria-label]="label()"
+    >
+      <ng-icon [class]="iconClass()" [name]="icon()" aria-hidden="true" />
+    </button>
+  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: QalmaCommand, selector: "button[qalmaCommand]", inputs: ["qalmaCommand", "qalmaCommandValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaToolbarButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'qalma-toolbar-button',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgIcon, QalmaCommand],
+                    host: {
+                        class: 'contents',
+                    },
+                    template: `
+    <button
+      type="button"
+      [qalmaCommand]="command()"
+      [qalmaCommandValue]="value()"
+      [class]="buttonClass"
+      [title]="label()"
+      [attr.aria-label]="label()"
+    >
+      <ng-icon [class]="iconClass()" [name]="icon()" aria-hidden="true" />
+    </button>
+  `,
+                }]
+        }], propDecorators: { command: [{ type: i0.Input, args: [{ isSignal: true, alias: "command", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }] } });
+
+function isToolbarCommandItem(item) {
+    return 'command' in item;
+}
+// ---------------------------------------------------------------------------
+// Default command fragments — the declarative source of truth for the standard
+// editor toolbar, reusable across consumers (playground, sandbox, downstream
+// apps). Compose them into `ToolbarGroup[]` and hand them to
+// `<qalma-toolbar-registry>`; interleave custom controls with `ToolbarTemplateItem`.
+// ---------------------------------------------------------------------------
+const QALMA_TOOLBAR_HEADINGS = [
+    { command: 'setParagraph', icon: 'lucidePilcrow', label: 'Paragraph' },
+    { command: 'toggleHeading1', icon: 'lucideHeading1', label: 'Heading 1' },
+    { command: 'toggleHeading2', icon: 'lucideHeading2', label: 'Heading 2' },
+    { command: 'toggleHeading3', icon: 'lucideHeading3', label: 'Heading 3' },
+];
+const QALMA_TOOLBAR_INLINE_MARKS = [
+    { command: 'toggleBold', icon: 'lucideBold', label: 'Bold' },
+    { command: 'toggleItalic', icon: 'lucideItalic', label: 'Italic' },
+    { command: 'toggleUnderline', icon: 'lucideUnderline', label: 'Underline' },
+    {
+        command: 'toggleStrike',
+        icon: 'lucideStrikethrough',
+        label: 'Strikethrough',
+    },
+    { command: 'toggleInlineCode', icon: 'lucideCode', label: 'Inline code' },
+    { command: 'toggleMonospace', icon: 'lucideLetterText', label: 'Monospace' },
+    { command: 'toggleSubscript', icon: 'lucideSubscript', label: 'Subscript' },
+    {
+        command: 'toggleSuperscript',
+        icon: 'lucideSuperscript',
+        label: 'Superscript',
+    },
+];
+const QALMA_TOOLBAR_ALIGN = [
+    { command: 'setTextAlignLeft', icon: 'lucideAlignLeft', label: 'Align left' },
+    {
+        command: 'setTextAlignCenter',
+        icon: 'lucideAlignCenter',
+        label: 'Align center',
+    },
+    {
+        command: 'setTextAlignRight',
+        icon: 'lucideAlignRight',
+        label: 'Align right',
+    },
+    {
+        command: 'setTextAlignJustify',
+        icon: 'lucideAlignJustify',
+        label: 'Justify',
+    },
+];
+const QALMA_TOOLBAR_LISTS = [
+    { command: 'toggleBulletList', icon: 'lucideList', label: 'Bullet list' },
+    {
+        command: 'toggleOrderedList',
+        icon: 'lucideListOrdered',
+        label: 'Ordered list',
+    },
+    { command: 'toggleTaskList', icon: 'lucideListTodo', label: 'Task list' },
+    { command: 'liftListItem', icon: 'lucideOutdent', label: 'Outdent' },
+    { command: 'sinkListItem', icon: 'lucideIndent', label: 'Indent' },
+    { command: 'toggleBlockquote', icon: 'lucideTextQuote', label: 'Blockquote' },
+    { command: 'toggleCodeBlock', icon: 'lucideSquareCode', label: 'Code block' },
+];
+/** Always-available table entry point (inserting a new table). */
+const QALMA_TOOLBAR_TABLE_INSERT = {
+    command: 'insertTable',
+    icon: 'lucideTable',
+    label: 'Insert table',
+};
+/** Table editing commands — only meaningful while the selection is in a table. */
+const QALMA_TOOLBAR_TABLE_OPS = [
+    {
+        command: 'addRowAfter',
+        icon: 'lucideBetweenHorizontalEnd',
+        label: 'Add row',
+    },
+    {
+        command: 'addColumnAfter',
+        icon: 'lucideBetweenVerticalEnd',
+        label: 'Add column',
+    },
+    { command: 'deleteRow', icon: 'lucideRows3', label: 'Delete row' },
+    { command: 'deleteColumn', icon: 'lucideColumns3', label: 'Delete column' },
+    {
+        command: 'toggleHeaderRow',
+        icon: 'lucideHeading',
+        label: 'Toggle header row',
+    },
+    { command: 'deleteTable', icon: 'lucideTrash2', label: 'Delete table' },
+];
+const QALMA_TOOLBAR_HISTORY = [
+    { command: 'undo', icon: 'lucideUndo2', label: 'Undo' },
+    { command: 'redo', icon: 'lucideRedo2', label: 'Redo' },
+];
+/** Standalone command that usually sits alongside the color controls. */
+const QALMA_TOOLBAR_CLEAR_FORMATTING = {
+    command: 'clearFormatting',
+    icon: 'lucideEraser',
+    label: 'Clear formatting',
+};
+/** Standalone command that usually sits alongside the link/insert controls. */
+const QALMA_TOOLBAR_UNSET_LINK = {
+    command: 'unsetLink',
+    icon: 'lucideUnlink',
+    label: 'Unlink',
+};
+
+/** Vertical divider rendered between non-empty toolbar groups. */
+const TOOLBAR_SEPARATOR_CLASS = 'mx-0.5 h-5 w-px shrink-0 self-center bg-border';
+/**
+ * Renders a declarative toolbar registry: an ordered list of groups, each a
+ * list of command buttons and/or inline custom-control templates, with a
+ * separator drawn between non-empty groups.
+ *
+ * Meant to sit inside the editor's `<qalma-toolbar>` (which owns the
+ * `role="toolbar"` semantics); the host uses `display: contents` so the
+ * rendered buttons participate directly in that container's flex layout.
+ *
+ * ```html
+ * <qalma-toolbar class="flex …">
+ *   <ng-template #colors> … custom controls … </ng-template>
+ *   <qalma-toolbar-registry [groups]="[headings, marks, [{ template: colors }]]" />
+ * </qalma-toolbar>
+ * ```
+ */
+class QalmaToolbarRegistry {
+    groups = input.required(...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    separatorClass = input(TOOLBAR_SEPARATOR_CLASS, ...(ngDevMode ? [{ debugName: "separatorClass" }] : /* istanbul ignore next */ []));
+    /** Drop empty groups so they neither render content nor a dangling separator. */
+    visibleGroups = computed(() => this.groups().filter((group) => group.length > 0), ...(ngDevMode ? [{ debugName: "visibleGroups" }] : /* istanbul ignore next */ []));
+    asCommand(item) {
+        return isToolbarCommandItem(item) ? item : null;
+    }
+    asTemplate(item) {
+        return item.template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaToolbarRegistry, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: QalmaToolbarRegistry, isStandalone: true, selector: "qalma-toolbar-registry", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, separatorClass: { classPropertyName: "separatorClass", publicName: "separatorClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    @for (group of visibleGroups(); track $index; let first = $first) {
+      @if (!first) {
+        <span [class]="separatorClass()" aria-hidden="true"></span>
+      }
+      @for (item of group; track $index) {
+        @if (asCommand(item); as command) {
+          <qalma-toolbar-button
+            [command]="command.command"
+            [value]="command.value"
+            [icon]="command.icon"
+            [label]="command.label"
+          />
+        } @else {
+          <ng-container [ngTemplateOutlet]="asTemplate(item)" />
+        }
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QalmaToolbarButton, selector: "qalma-toolbar-button", inputs: ["command", "value", "icon", "label", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaToolbarRegistry, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'qalma-toolbar-registry',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet, QalmaToolbarButton],
+                    host: {
+                        class: 'contents',
+                    },
+                    template: `
+    @for (group of visibleGroups(); track $index; let first = $first) {
+      @if (!first) {
+        <span [class]="separatorClass()" aria-hidden="true"></span>
+      }
+      @for (item of group; track $index) {
+        @if (asCommand(item); as command) {
+          <qalma-toolbar-button
+            [command]="command.command"
+            [value]="command.value"
+            [icon]="command.icon"
+            [label]="command.label"
+          />
+        } @else {
+          <ng-container [ngTemplateOutlet]="asTemplate(item)" />
+        }
+      }
+    }
+  `,
+                }]
+        }], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }], separatorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorClass", required: false }] }] } });
+
+/**
+ * Registers the Lucide icons referenced by the default toolbar command
+ * fragments (`QALMA_TOOLBAR_*`), so consumers can wire the standard toolbar
+ * without re-declaring the icon set:
+ *
+ * ```ts
+ * providers: [provideQalmaToolbarIcons()]
+ * ```
+ *
+ * Add your own `provideIcons({ … })` alongside it for any custom controls
+ * (color pickers, upload buttons…) that live outside the command registry.
+ */
+function provideQalmaToolbarIcons() {
+    return provideIcons({
+        lucideAlignCenter,
+        lucideAlignJustify,
+        lucideAlignLeft,
+        lucideAlignRight,
+        lucideBetweenHorizontalEnd,
+        lucideBetweenVerticalEnd,
+        lucideBold,
+        lucideCode,
+        lucideColumns3,
+        lucideEraser,
+        lucideHeading,
+        lucideHeading1,
+        lucideHeading2,
+        lucideHeading3,
+        lucideIndent,
+        lucideItalic,
+        lucideLetterText,
+        lucideList,
+        lucideListOrdered,
+        lucideListTodo,
+        lucideOutdent,
+        lucidePilcrow,
+        lucideRedo2,
+        lucideRows3,
+        lucideSquareCode,
+        lucideStrikethrough,
+        lucideSubscript,
+        lucideSuperscript,
+        lucideTable,
+        lucideTextQuote,
+        lucideTrash2,
+        lucideUnderline,
+        lucideUndo2,
+        lucideUnlink,
+    });
+}
+
+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);
+        });
+    }
+}
+
+/**
+ * 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((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);
+    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 }] }] } });
+
+class QalmaDragHandle {
+    editor = input.required(...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
+    handle = input(null, ...(ngDevMode ? [{ debugName: "handle" }] : /* istanbul ignore next */ []));
+    dropIndicator = input(null, ...(ngDevMode ? [{ debugName: "dropIndicator" }] : /* istanbul ignore next */ []));
+    draggedBlockHighlight = input(null, ...(ngDevMode ? [{ debugName: "draggedBlockHighlight" }] : /* istanbul ignore next */ []));
+    dismiss = output();
+    dragStart = output();
+    menuOpen = signal(false, ...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Close the block-actions menu on an outside pointerdown or Escape. A click
+        // on the handle button or the menu itself (both under `[data-qalma-drag-handle]`)
+        // is treated as inside, so it doesn't self-dismiss. Connected for the
+        // component's lifetime; the callback is a no-op while the menu is closed.
+        new DismissibleOverlay({
+            isInside: (target) => target instanceof Element &&
+                !!target.closest('[data-qalma-drag-handle]'),
+            onDismiss: () => this.menuOpen.set(false),
+        }).connect(inject(DestroyRef));
+    }
+    toggleMenu() {
+        this.menuOpen.update((open) => !open);
+    }
+    startDrag(event, handle) {
+        this.menuOpen.set(false);
+        this.dragStart.emit({ event, handle });
+    }
+    canExecute(command, handle) {
+        return this.editor().canExecute(command, handle.target);
+    }
+    execute(command, handle) {
+        if (this.editor().execute(command, handle.target)) {
+            this.dismissHandle();
+        }
+    }
+    preserveSelection(event) {
+        event.preventDefault();
+    }
+    dismissFromKeyboard(event) {
+        event.preventDefault();
+        this.dismissHandle();
+    }
+    dismissHandle() {
+        this.menuOpen.set(false);
+        this.dismiss.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaDragHandle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: QalmaDragHandle, isStandalone: true, selector: "qalma-drag-handle", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null }, dropIndicator: { classPropertyName: "dropIndicator", publicName: "dropIndicator", isSignal: true, isRequired: false, transformFunction: null }, draggedBlockHighlight: { classPropertyName: "draggedBlockHighlight", publicName: "draggedBlockHighlight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss", dragStart: "dragStart" }, providers: [
+            provideIcons({
+                lucideArrowDown,
+                lucideArrowUp,
+                lucideCopy,
+                lucideGripVertical,
+                lucideMousePointer2,
+                lucideTrash2,
+            }),
+        ], ngImport: i0, template: `
+    @if (draggedBlockHighlight(); as highlight) {
+      <div
+        data-qalma-dragging-block-highlight
+        class="pointer-events-none fixed left-0 top-0 z-20 rounded-md border border-accent bg-accent-subtle/80 opacity-70 shadow-md will-change-transform"
+        [style.transform]="highlight.transform"
+        [style.width.px]="highlight.width"
+        [style.height.px]="highlight.height"
+      ></div>
+    }
+
+    @if (dropIndicator(); as indicator) {
+      <div
+        data-qalma-drag-drop-line
+        class="pointer-events-none fixed left-0 top-0 z-40 h-0.5 rounded-full bg-accent shadow-md will-change-transform"
+        [style.transform]="indicator.transform"
+        [style.width.px]="indicator.width"
+      ></div>
+    }
+
+    @if (handle(); as handle) {
+      <div
+        data-qalma-drag-handle
+        class="fixed left-0 top-0 z-30 flex items-start gap-1 will-change-transform"
+        tabindex="-1"
+        [style.transform]="handle.transform"
+        (mousedown)="preserveSelection($event)"
+        (keydown.escape)="dismissFromKeyboard($event)"
+      >
+        <button
+          qalmaBtn
+          variant="ghost"
+          size="icon"
+          type="button"
+          class="!h-[1.85rem] !w-[1.85rem] cursor-grab rounded-[0.4rem] border border-transparent bg-card/95 text-muted-foreground shadow-sm active:cursor-grabbing hover:border-border hover:bg-secondary hover:text-foreground"
+          [class.border-accent]="menuOpen()"
+          [class.text-accent]="menuOpen()"
+          (pointerdown)="startDrag($event, handle)"
+          (click)="toggleMenu()"
+          title="Block actions"
+          aria-label="Block actions"
+          [attr.aria-expanded]="menuOpen()"
+        >
+          <ng-icon
+            class="text-[0.9rem]"
+            name="lucideGripVertical"
+            aria-hidden="true"
+          />
+        </button>
+
+        @if (menuOpen()) {
+          <div
+            role="menu"
+            aria-label="Block actions"
+            class="w-44 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg"
+          >
+            <button
+              type="button"
+              class="flex h-8 w-full cursor-pointer items-center gap-2 rounded-sm px-2 text-left text-xs font-medium text-foreground transition hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-45"
+              [disabled]="!canExecute('selectBlock', handle)"
+              (mousedown)="preserveSelection($event)"
+              (click)="execute('selectBlock', handle)"
+              role="menuitem"
+            >
+              <ng-icon name="lucideMousePointer2" aria-hidden="true" />
+              Select block
+            </button>
+            <button
+              type="button"
+              class="flex h-8 w-full cursor-pointer items-center gap-2 rounded-sm px-2 text-left text-xs font-medium text-foreground transition hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-45"
+              [disabled]="!handle.canMoveUp"
+              (mousedown)="preserveSelection($event)"
+              (click)="execute('moveBlockUp', handle)"
+              role="menuitem"
+            >
+              <ng-icon name="lucideArrowUp" aria-hidden="true" />
+              Move up
+            </button>
+            <button
+              type="button"
+              class="flex h-8 w-full cursor-pointer items-center gap-2 rounded-sm px-2 text-left text-xs font-medium text-foreground transition hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-45"
+              [disabled]="!handle.canMoveDown"
+              (mousedown)="preserveSelection($event)"
+              (click)="execute('moveBlockDown', handle)"
+              role="menuitem"
+            >
+              <ng-icon name="lucideArrowDown" aria-hidden="true" />
+              Move down
+            </button>
+            <button
+              type="button"
+              class="flex h-8 w-full cursor-pointer items-center gap-2 rounded-sm px-2 text-left text-xs font-medium text-foreground transition hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-45"
+              [disabled]="!canExecute('duplicateBlock', handle)"
+              (mousedown)="preserveSelection($event)"
+              (click)="execute('duplicateBlock', handle)"
+              role="menuitem"
+            >
+              <ng-icon name="lucideCopy" aria-hidden="true" />
+              Duplicate
+            </button>
+            <button
+              type="button"
+              class="flex h-8 w-full cursor-pointer items-center gap-2 rounded-sm px-2 text-left text-xs font-medium text-destructive transition hover:bg-destructive/10 disabled:cursor-not-allowed disabled:opacity-45"
+              [disabled]="!canExecute('deleteBlock', handle)"
+              (mousedown)="preserveSelection($event)"
+              (click)="execute('deleteBlock', handle)"
+              role="menuitem"
+            >
+              <ng-icon name="lucideTrash2" aria-hidden="true" />
+              Delete
+            </button>
+          </div>
+        }
+      </div>
+    }
+  `, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaDragHandle, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgIcon, QalmaButton],
+                    providers: [
+                        provideIcons({
+                            lucideArrowDown,
+                            lucideArrowUp,
+                            lucideCopy,
+                            lucideGripVertical,
+                            lucideMousePointer2,
+                            lucideTrash2,
+                        }),
+                    ],
+                    selector: 'qalma-drag-handle',
+                    template: `
+    @if (draggedBlockHighlight(); as highlight) {
+      <div
+        data-qalma-dragging-block-highlight
+        class="pointer-events-none fixed left-0 top-0 z-20 rounded-md border border-accent bg-accent-subtle/80 opacity-70 shadow-md will-change-transform"
+        [style.transform]="highlight.transform"
+        [style.width.px]="highlight.width"
+        [style.height.px]="highlight.height"
+      ></div>
+    }
+
+    @if (dropIndicator(); as indicator) {
+      <div
+        data-qalma-drag-drop-line
+        class="pointer-events-none fixed left-0 top-0 z-40 h-0.5 rounded-full bg-accent shadow-md will-change-transform"
+        [style.transform]="indicator.transform"
+        [style.width.px]="indicator.width"
+      ></div>
+    }
+
+    @if (handle(); as handle) {
+      <div
+        data-qalma-drag-handle
+        class="fixed left-0 top-0 z-30 flex items-start gap-1 will-change-transform"
+        tabindex="-1"
+        [style.transform]="handle.transform"
+        (mousedown)="preserveSelection($event)"
+        (keydown.escape)="dismissFromKeyboard($event)"
+      >
+        <button
+          qalmaBtn
+          variant="ghost"
+          size="icon"
+          type="button"
+          class="!h-[1.85rem] !w-[1.85rem] cursor-grab rounded-[0.4rem] border border-transparent bg-card/95 text-muted-foreground shadow-sm active:cursor-grabbing hover:border-border hover:bg-secondary hover:text-foreground"
+          [class.border-accent]="menuOpen()"
+          [class.text-accent]="menuOpen()"
+          (pointerdown)="startDrag($event, handle)"
+          (click)="toggleMenu()"
+          title="Block actions"
+          aria-label="Block actions"
+          [attr.aria-expanded]="menuOpen()"
+        >
+          <ng-icon
+            class="text-[0.9rem]"
+            name="lucideGripVertical"
+            aria-hidden="true"
+          />
+        </button>
+
+        @if (menuOpen()) {
+          <div
+            role="menu"
+            aria-label="Block actions"
+            class="w-44 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg"
+          >
+            <button
+              type="button"
+              class="flex h-8 w-full cursor-pointer items-center gap-2 rounded-sm px-2 text-left text-xs font-medium text-foreground transition hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-45"
+              [disabled]="!canExecute('selectBlock', handle)"
+              (mousedown)="preserveSelection($event)"
+              (click)="execute('selectBlock', handle)"
+              role="menuitem"
+            >
+              <ng-icon name="lucideMousePointer2" aria-hidden="true" />
+              Select block
+            </button>
+            <button
+              type="button"
+              class="flex h-8 w-full cursor-pointer items-center gap-2 rounded-sm px-2 text-left text-xs font-medium text-foreground transition hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-45"
+              [disabled]="!handle.canMoveUp"
+              (mousedown)="preserveSelection($event)"
+              (click)="execute('moveBlockUp', handle)"
+              role="menuitem"
+            >
+              <ng-icon name="lucideArrowUp" aria-hidden="true" />
+              Move up
+            </button>
+            <button
+              type="button"
+              class="flex h-8 w-full cursor-pointer items-center gap-2 rounded-sm px-2 text-left text-xs font-medium text-foreground transition hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-45"
+              [disabled]="!handle.canMoveDown"
+              (mousedown)="preserveSelection($event)"
+              (click)="execute('moveBlockDown', handle)"
+              role="menuitem"
+            >
+              <ng-icon name="lucideArrowDown" aria-hidden="true" />
+              Move down
+            </button>
+            <button
+              type="button"
+              class="flex h-8 w-full cursor-pointer items-center gap-2 rounded-sm px-2 text-left text-xs font-medium text-foreground transition hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-45"
+              [disabled]="!canExecute('duplicateBlock', handle)"
+              (mousedown)="preserveSelection($event)"
+              (click)="execute('duplicateBlock', handle)"
+              role="menuitem"
+            >
+              <ng-icon name="lucideCopy" aria-hidden="true" />
+              Duplicate
+            </button>
+            <button
+              type="button"
+              class="flex h-8 w-full cursor-pointer items-center gap-2 rounded-sm px-2 text-left text-xs font-medium text-destructive transition hover:bg-destructive/10 disabled:cursor-not-allowed disabled:opacity-45"
+              [disabled]="!canExecute('deleteBlock', handle)"
+              (mousedown)="preserveSelection($event)"
+              (click)="execute('deleteBlock', handle)"
+              role="menuitem"
+            >
+              <ng-icon name="lucideTrash2" aria-hidden="true" />
+              Delete
+            </button>
+          </div>
+        }
+      </div>
+    }
+  `,
+                }]
+        }], 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
+ * {@link QalmaSuggestionMenu}; feed it a `placement` (see `flipAbovePlacement`)
+ * and the filtered `suggestions`.
+ */
+class QalmaMentionMenu extends QalmaSuggestionMenu {
+    suggestions = input([], ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    optionList = this.suggestions;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaMentionMenu, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: QalmaMentionMenu, isStandalone: true, selector: "qalma-mention-menu", inputs: { suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    @if (placement(); as placement) {
+      <div
+        role="listbox"
+        aria-label="Mention suggestions"
+        class="fixed z-20 w-[min(280px,calc(100vw-24px))] overflow-hidden rounded-md border border-border bg-popover p-1 text-sm text-popover-foreground shadow-lg outline-none"
+        [style.left.px]="placement.left"
+        [style.top.px]="placement.top"
+        [style.bottom.px]="placement.bottom"
+        [style.max-height.px]="placement.maxHeight"
+      >
+        @if (loading()) {
+          <div
+            class="flex items-center gap-2 px-2 py-2 text-sm text-muted-foreground"
+          >
+            <span
+              class="size-7 animate-pulse rounded-sm border border-border bg-secondary"
+              aria-hidden="true"
+            ></span>
+            <span>Loading…</span>
+          </div>
+        } @else {
+          <div class="max-h-full overflow-y-auto">
+            @for (
+              option of suggestions();
+              track option.id;
+              let index = $index
+            ) {
+              <button
+                type="button"
+                role="option"
+                [attr.data-suggestion-index]="index"
+                class="group grid h-12 w-full min-w-0 cursor-pointer grid-cols-[1.75rem_minmax(0,1fr)] items-center gap-2 rounded-sm px-2 text-left transition-colors hover:bg-accent-subtle hover:text-foreground focus:bg-accent-subtle focus:text-foreground focus:outline-none"
+                [class.bg-accent-subtle]="index === activeIndex()"
+                [class.text-foreground]="index === activeIndex()"
+                [attr.aria-selected]="index === activeIndex()"
+                [attr.tabindex]="index === activeIndex() ? 0 : -1"
+                (mouseenter)="activate.emit(index)"
+                (mousedown)="preserveSelection($event)"
+                (keydown)="handleOptionKeydown($event, option, index)"
+                (click)="pick.emit(option)"
+              >
+                <span
+                  class="flex size-7 items-center justify-center rounded-sm border border-border bg-card text-xs font-semibold text-foreground"
+                  [class.border-accent]="index === activeIndex()"
+                  [class.bg-background]="index === activeIndex()"
+                  [class.text-accent]="index === activeIndex()"
+                  aria-hidden="true"
+                >
+                  {{ option.label.slice(0, 1) }}
+                </span>
+                <span class="min-w-0">
+                  <span class="block truncate font-medium leading-5">{{
+                    option.label
+                  }}</span>
+                  @if (index === activeIndex()) {
+                    <span
+                      class="block truncate text-xs leading-4 text-foreground"
+                    >
+                      {{ option.description }}
+                    </span>
+                  } @else {
+                    <span
+                      class="block truncate text-xs leading-4 text-muted-foreground group-hover:text-foreground group-focus:text-foreground"
+                    >
+                      {{ option.description }}
+                    </span>
+                  }
+                </span>
+              </button>
+            }
+          </div>
+        }
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaMentionMenu, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'qalma-mention-menu',
+                    template: `
+    @if (placement(); as placement) {
+      <div
+        role="listbox"
+        aria-label="Mention suggestions"
+        class="fixed z-20 w-[min(280px,calc(100vw-24px))] overflow-hidden rounded-md border border-border bg-popover p-1 text-sm text-popover-foreground shadow-lg outline-none"
+        [style.left.px]="placement.left"
+        [style.top.px]="placement.top"
+        [style.bottom.px]="placement.bottom"
+        [style.max-height.px]="placement.maxHeight"
+      >
+        @if (loading()) {
+          <div
+            class="flex items-center gap-2 px-2 py-2 text-sm text-muted-foreground"
+          >
+            <span
+              class="size-7 animate-pulse rounded-sm border border-border bg-secondary"
+              aria-hidden="true"
+            ></span>
+            <span>Loading…</span>
+          </div>
+        } @else {
+          <div class="max-h-full overflow-y-auto">
+            @for (
+              option of suggestions();
+              track option.id;
+              let index = $index
+            ) {
+              <button
+                type="button"
+                role="option"
+                [attr.data-suggestion-index]="index"
+                class="group grid h-12 w-full min-w-0 cursor-pointer grid-cols-[1.75rem_minmax(0,1fr)] items-center gap-2 rounded-sm px-2 text-left transition-colors hover:bg-accent-subtle hover:text-foreground focus:bg-accent-subtle focus:text-foreground focus:outline-none"
+                [class.bg-accent-subtle]="index === activeIndex()"
+                [class.text-foreground]="index === activeIndex()"
+                [attr.aria-selected]="index === activeIndex()"
+                [attr.tabindex]="index === activeIndex() ? 0 : -1"
+                (mouseenter)="activate.emit(index)"
+                (mousedown)="preserveSelection($event)"
+                (keydown)="handleOptionKeydown($event, option, index)"
+                (click)="pick.emit(option)"
+              >
+                <span
+                  class="flex size-7 items-center justify-center rounded-sm border border-border bg-card text-xs font-semibold text-foreground"
+                  [class.border-accent]="index === activeIndex()"
+                  [class.bg-background]="index === activeIndex()"
+                  [class.text-accent]="index === activeIndex()"
+                  aria-hidden="true"
+                >
+                  {{ option.label.slice(0, 1) }}
+                </span>
+                <span class="min-w-0">
+                  <span class="block truncate font-medium leading-5">{{
+                    option.label
+                  }}</span>
+                  @if (index === activeIndex()) {
+                    <span
+                      class="block truncate text-xs leading-4 text-foreground"
+                    >
+                      {{ option.description }}
+                    </span>
+                  } @else {
+                    <span
+                      class="block truncate text-xs leading-4 text-muted-foreground group-hover:text-foreground group-focus:text-foreground"
+                    >
+                      {{ option.description }}
+                    </span>
+                  }
+                </span>
+              </button>
+            }
+          </div>
+        }
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
+
+/**
+ * Caret-anchored slash-command menu: an icon + shortcut list with a "Commands"
+ * header and an Escape hint footer, scrolling the active option into view.
+ * Positioning, keyboard handling and active highlighting come from
+ * {@link QalmaSuggestionMenu}; feed it a `placement` (see `flipAbovePlacement`)
+ * and the filtered `options`. Ships the default block-command icon set.
+ */
+class QalmaSlashCommandMenu extends QalmaSuggestionMenu {
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    optionList = this.options;
+    constructor() {
+        super();
+        effect(() => {
+            const activeIndex = this.activeIndex();
+            this.options();
+            queueMicrotask(() => this.scrollOptionIntoView(activeIndex));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaSlashCommandMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: QalmaSlashCommandMenu, isStandalone: true, selector: "qalma-slash-command-menu", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            provideIcons({
+                lucideCode,
+                lucideHeading1,
+                lucideHeading2,
+                lucideHeading3,
+                lucideList,
+                lucideListOrdered,
+                lucideListTodo,
+                lucideMinus,
+                lucidePilcrow,
+                lucideSquareCode,
+                lucideTable,
+                lucideTextQuote,
+            }),
+        ], usesInheritance: true, ngImport: i0, template: `
+    @if (placement(); as placement) {
+      <div
+        role="listbox"
+        aria-label="Slash command suggestions"
+        class="fixed z-20 flex w-[min(320px,calc(100vw-24px))] flex-col overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg outline-none"
+        [style.left.px]="placement.left"
+        [style.top.px]="placement.top"
+        [style.bottom.px]="placement.bottom"
+        [style.max-height.px]="placement.maxHeight"
+      >
+        <div
+          class="shrink-0 px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground"
+        >
+          Commands
+        </div>
+        <div data-suggestion-options class="min-h-0 flex-1 overflow-y-auto">
+          @for (option of options(); track option.id; let index = $index) {
+            <button
+              type="button"
+              role="option"
+              [attr.data-suggestion-index]="index"
+              class="group grid h-11 w-full min-w-0 cursor-pointer grid-cols-[1.75rem_minmax(0,1fr)_auto] items-center gap-2 rounded-sm px-2 text-left text-sm transition-colors hover:bg-accent-subtle hover:text-foreground focus:bg-accent-subtle focus:text-foreground focus:outline-none"
+              [class.bg-accent-subtle]="index === activeIndex()"
+              [class.text-foreground]="index === activeIndex()"
+              [attr.aria-selected]="index === activeIndex()"
+              [attr.tabindex]="index === activeIndex() ? 0 : -1"
+              (mouseenter)="activate.emit(index)"
+              (mousedown)="preserveSelection($event)"
+              (keydown)="handleOptionKeydown($event, option, index)"
+              (click)="pick.emit(option)"
+            >
+              <span
+                class="flex size-7 items-center justify-center rounded-sm border border-border bg-card text-[14px] text-foreground"
+                [class.border-accent]="index === activeIndex()"
+                [class.bg-background]="index === activeIndex()"
+                [class.text-accent]="index === activeIndex()"
+              >
+                <ng-icon [name]="option.icon" aria-hidden="true" />
+              </span>
+              <span class="min-w-0">
+                <span class="block truncate font-medium leading-5">{{
+                  option.label
+                }}</span>
+                @if (index === activeIndex()) {
+                  <span
+                    class="block truncate text-xs leading-4 text-foreground"
+                  >
+                    {{ option.description }}
+                  </span>
+                } @else {
+                  <span
+                    class="block truncate text-xs leading-4 text-muted-foreground group-hover:text-foreground group-focus:text-foreground"
+                  >
+                    {{ option.description }}
+                  </span>
+                }
+              </span>
+              <kbd
+                class="rounded-sm border border-border bg-card px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground"
+                [class.border-accent]="index === activeIndex()"
+                [class.bg-background]="index === activeIndex()"
+                [class.text-accent]="index === activeIndex()"
+              >
+                {{ option.shortcut }}
+              </kbd>
+            </button>
+          }
+        </div>
+        <div
+          class="mt-1 flex h-8 shrink-0 items-center justify-between border-t border-border px-2 text-[11px] text-muted-foreground"
+        >
+          <span>Close menu</span>
+          <kbd
+            class="rounded-sm border border-border bg-card px-1.5 py-0.5 font-mono"
+            >esc</kbd
+          >
+        </div>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaSlashCommandMenu, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgIcon],
+                    providers: [
+                        provideIcons({
+                            lucideCode,
+                            lucideHeading1,
+                            lucideHeading2,
+                            lucideHeading3,
+                            lucideList,
+                            lucideListOrdered,
+                            lucideListTodo,
+                            lucideMinus,
+                            lucidePilcrow,
+                            lucideSquareCode,
+                            lucideTable,
+                            lucideTextQuote,
+                        }),
+                    ],
+                    selector: 'qalma-slash-command-menu',
+                    template: `
+    @if (placement(); as placement) {
+      <div
+        role="listbox"
+        aria-label="Slash command suggestions"
+        class="fixed z-20 flex w-[min(320px,calc(100vw-24px))] flex-col overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg outline-none"
+        [style.left.px]="placement.left"
+        [style.top.px]="placement.top"
+        [style.bottom.px]="placement.bottom"
+        [style.max-height.px]="placement.maxHeight"
+      >
+        <div
+          class="shrink-0 px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground"
+        >
+          Commands
+        </div>
+        <div data-suggestion-options class="min-h-0 flex-1 overflow-y-auto">
+          @for (option of options(); track option.id; let index = $index) {
+            <button
+              type="button"
+              role="option"
+              [attr.data-suggestion-index]="index"
+              class="group grid h-11 w-full min-w-0 cursor-pointer grid-cols-[1.75rem_minmax(0,1fr)_auto] items-center gap-2 rounded-sm px-2 text-left text-sm transition-colors hover:bg-accent-subtle hover:text-foreground focus:bg-accent-subtle focus:text-foreground focus:outline-none"
+              [class.bg-accent-subtle]="index === activeIndex()"
+              [class.text-foreground]="index === activeIndex()"
+              [attr.aria-selected]="index === activeIndex()"
+              [attr.tabindex]="index === activeIndex() ? 0 : -1"
+              (mouseenter)="activate.emit(index)"
+              (mousedown)="preserveSelection($event)"
+              (keydown)="handleOptionKeydown($event, option, index)"
+              (click)="pick.emit(option)"
+            >
+              <span
+                class="flex size-7 items-center justify-center rounded-sm border border-border bg-card text-[14px] text-foreground"
+                [class.border-accent]="index === activeIndex()"
+                [class.bg-background]="index === activeIndex()"
+                [class.text-accent]="index === activeIndex()"
+              >
+                <ng-icon [name]="option.icon" aria-hidden="true" />
+              </span>
+              <span class="min-w-0">
+                <span class="block truncate font-medium leading-5">{{
+                  option.label
+                }}</span>
+                @if (index === activeIndex()) {
+                  <span
+                    class="block truncate text-xs leading-4 text-foreground"
+                  >
+                    {{ option.description }}
+                  </span>
+                } @else {
+                  <span
+                    class="block truncate text-xs leading-4 text-muted-foreground group-hover:text-foreground group-focus:text-foreground"
+                  >
+                    {{ option.description }}
+                  </span>
+                }
+              </span>
+              <kbd
+                class="rounded-sm border border-border bg-card px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground"
+                [class.border-accent]="index === activeIndex()"
+                [class.bg-background]="index === activeIndex()"
+                [class.text-accent]="index === activeIndex()"
+              >
+                {{ option.shortcut }}
+              </kbd>
+            </button>
+          }
+        </div>
+        <div
+          class="mt-1 flex h-8 shrink-0 items-center justify-between border-t border-border px-2 text-[11px] text-muted-foreground"
+        >
+          <span>Close menu</span>
+          <kbd
+            class="rounded-sm border border-border bg-card px-1.5 py-0.5 font-mono"
+            >esc</kbd
+          >
+        </div>
+      </div>
+    }
+  `,
+                }]
+        }], 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 */ []));
+    hrefChange = output();
+    edit = output();
+    save = output();
+    remove = output();
+    dismiss = output();
+    keepOpen = output();
+    scheduleHide = output();
+    updateHref(event) {
+        const target = event.target;
+        if (target instanceof HTMLInputElement) {
+            this.hrefChange.emit(target.value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaLinkPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: QalmaLinkPopover, isStandalone: true, selector: "qalma-link-popover", inputs: { popover: { classPropertyName: "popover", publicName: "popover", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { hrefChange: "hrefChange", edit: "edit", save: "save", remove: "remove", dismiss: "dismiss", keepOpen: "keepOpen", scheduleHide: "scheduleHide" }, providers: [
+            provideIcons({
+                lucideCheck,
+                lucideExternalLink,
+                lucideLink,
+                lucidePencil,
+                lucideUnlink,
+                lucideX,
+            }),
+        ], ngImport: i0, template: `
+    @if (popover(); as popover) {
+      <div
+        data-qalma-link-popover
+        role="dialog"
+        aria-label="Link preview"
+        class="fixed z-20 w-[min(360px,calc(100vw-32px))] rounded-md border border-border bg-popover p-1.5 text-sm text-popover-foreground shadow-lg outline-none"
+        [style.left.px]="popover.left"
+        [style.top.px]="popover.top"
+        (mouseenter)="keepOpen.emit()"
+        (mouseleave)="scheduleHide.emit()"
+        (focusin)="keepOpen.emit()"
+        (focusout)="scheduleHide.emit()"
+      >
+        @if (popover.editing) {
+          <div class="flex items-center gap-1.5">
+            <label
+              class="flex h-9 min-w-0 flex-1 items-center gap-2 rounded-md border border-input bg-background px-2 text-sm transition focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30"
+            >
+              <ng-icon
+                class="shrink-0 text-muted-foreground"
+                name="lucideLink"
+                aria-hidden="true"
+              />
+              <input
+                class="min-w-0 flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground"
+                type="url"
+                aria-label="Edit link URL"
+                [value]="href()"
+                (input)="updateHref($event)"
+              />
+            </label>
+            <button
+              qalmaBtn
+              size="icon"
+              type="button"
+              [disabled]="!href().trim()"
+              (click)="save.emit(popover)"
+              title="Save link"
+              aria-label="Save link"
+            >
+              <ng-icon name="lucideCheck" aria-hidden="true" />
+            </button>
+            <button
+              qalmaBtn
+              variant="outline"
+              size="icon"
+              type="button"
+              (click)="dismiss.emit()"
+              title="Cancel"
+              aria-label="Cancel"
+            >
+              <ng-icon name="lucideX" aria-hidden="true" />
+            </button>
+          </div>
+        } @else {
+          <div class="flex items-center gap-1.5">
+            <a
+              class="inline-flex h-9 min-w-0 flex-1 items-center gap-1.5 rounded-md border border-border bg-card px-2.5 text-accent transition-colors hover:bg-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              [href]="popover.href"
+              [target]="popover.target ?? '_blank'"
+              [rel]="popover.rel ?? 'noopener noreferrer'"
+              title="Open link"
+            >
+              <span class="min-w-0 truncate font-medium">{{
+                popover.href
+              }}</span>
+              <ng-icon
+                class="shrink-0 text-base"
+                name="lucideExternalLink"
+                aria-hidden="true"
+              />
+            </a>
+            <button
+              qalmaBtn
+              variant="outline"
+              size="icon"
+              type="button"
+              (click)="edit.emit(popover)"
+              title="Edit link"
+              aria-label="Edit link"
+            >
+              <ng-icon name="lucidePencil" aria-hidden="true" />
+            </button>
+            <button
+              qalmaBtn
+              variant="ghost"
+              size="icon"
+              type="button"
+              class="text-destructive hover:bg-destructive/10 hover:text-destructive"
+              (click)="remove.emit(popover)"
+              title="Unlink"
+              aria-label="Unlink"
+            >
+              <ng-icon name="lucideUnlink" aria-hidden="true" />
+            </button>
+          </div>
+        }
+      </div>
+    }
+  `, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: QalmaLinkPopover, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgIcon, QalmaButton],
+                    providers: [
+                        provideIcons({
+                            lucideCheck,
+                            lucideExternalLink,
+                            lucideLink,
+                            lucidePencil,
+                            lucideUnlink,
+                            lucideX,
+                        }),
+                    ],
+                    selector: 'qalma-link-popover',
+                    template: `
+    @if (popover(); as popover) {
+      <div
+        data-qalma-link-popover
+        role="dialog"
+        aria-label="Link preview"
+        class="fixed z-20 w-[min(360px,calc(100vw-32px))] rounded-md border border-border bg-popover p-1.5 text-sm text-popover-foreground shadow-lg outline-none"
+        [style.left.px]="popover.left"
+        [style.top.px]="popover.top"
+        (mouseenter)="keepOpen.emit()"
+        (mouseleave)="scheduleHide.emit()"
+        (focusin)="keepOpen.emit()"
+        (focusout)="scheduleHide.emit()"
+      >
+        @if (popover.editing) {
+          <div class="flex items-center gap-1.5">
+            <label
+              class="flex h-9 min-w-0 flex-1 items-center gap-2 rounded-md border border-input bg-background px-2 text-sm transition focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30"
+            >
+              <ng-icon
+                class="shrink-0 text-muted-foreground"
+                name="lucideLink"
+                aria-hidden="true"
+              />
+              <input
+                class="min-w-0 flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground"
+                type="url"
+                aria-label="Edit link URL"
+                [value]="href()"
+                (input)="updateHref($event)"
+              />
+            </label>
+            <button
+              qalmaBtn
+              size="icon"
+              type="button"
+              [disabled]="!href().trim()"
+              (click)="save.emit(popover)"
+              title="Save link"
+              aria-label="Save link"
+            >
+              <ng-icon name="lucideCheck" aria-hidden="true" />
+            </button>
+            <button
+              qalmaBtn
+              variant="outline"
+              size="icon"
+              type="button"
+              (click)="dismiss.emit()"
+              title="Cancel"
+              aria-label="Cancel"
+            >
+              <ng-icon name="lucideX" aria-hidden="true" />
+            </button>
+          </div>
+        } @else {
+          <div class="flex items-center gap-1.5">
+            <a
+              class="inline-flex h-9 min-w-0 flex-1 items-center gap-1.5 rounded-md border border-border bg-card px-2.5 text-accent transition-colors hover:bg-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              [href]="popover.href"
+              [target]="popover.target ?? '_blank'"
+              [rel]="popover.rel ?? 'noopener noreferrer'"
+              title="Open link"
+            >
+              <span class="min-w-0 truncate font-medium">{{
+                popover.href
+              }}</span>
+              <ng-icon
+                class="shrink-0 text-base"
+                name="lucideExternalLink"
+                aria-hidden="true"
+              />
+            </a>
+            <button
+              qalmaBtn
+              variant="outline"
+              size="icon"
+              type="button"
+              (click)="edit.emit(popover)"
+              title="Edit link"
+              aria-label="Edit link"
+            >
+              <ng-icon name="lucidePencil" aria-hidden="true" />
+            </button>
+            <button
+              qalmaBtn
+              variant="ghost"
+              size="icon"
+              type="button"
+              class="text-destructive hover:bg-destructive/10 hover:text-destructive"
+              (click)="remove.emit(popover)"
+              title="Unlink"
+              aria-label="Unlink"
+            >
+              <ng-icon name="lucideUnlink" aria-hidden="true" />
+            </button>
+          </div>
+        }
+      </div>
+    }
+  `,
+                }]
+        }], 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"] }] } });
+
+class QalmaContextualToolbar {
+    editor = input.required(...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
+    placement = input(null, ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    requestLink = output();
+    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();
+    }
+    dismissFromKeyboard(event) {
+        event.preventDefault();
+        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: `
+    @if (placement(); as placement) {
+      <qalma-toolbar
+        label="Selection formatting"
+        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>
+      </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 });
+}
+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,
+                        }),
+                    ],
+                    selector: 'qalma-contextual-toolbar',
+                    template: `
+    @if (placement(); as placement) {
+      <qalma-toolbar
+        label="Selection formatting"
+        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>
+      </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);
+}
+
+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 }] }] } });
+
+/**
+ * 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 };
+//# sourceMappingURL=qalma-kit.mjs.map