@domternal/angular 0.6.2 → 0.7.0

package/dist/fesm2022/domternal-angular.mjs

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
 import { viewChild, input, output, signal, inject, NgZone, afterNextRender, effect, untracked, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, computed } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Document, Paragraph, Text, BaseKeymap, History, Editor, positionFloatingOnce, defaultIcons, ToolbarController, PluginKey, createBubbleMenuPlugin, createFloatingMenuPlugin } from '@domternal/core';
+import { Document, Paragraph, Text, BaseKeymap, History, Editor, positionFloatingOnce, defaultIcons, ToolbarController, defaultBubbleContexts, PluginKey, createBubbleMenuPlugin, FloatingMenuController, positionFloating } from '@domternal/core';
 export { Editor } from '@domternal/core';
 import { DomSanitizer } from '@angular/platform-browser';
+import { createFloatingMenuPlugin } from '@domternal/extension-block-menu';
 
 const DEFAULT_EXTENSIONS = [Document, Paragraph, Text, BaseKeymap, History];
 class DomternalEditorComponent {
@@ -53,8 +54,9 @@ class DomternalEditorComponent {
             const editable = this.editable();
             if (!this._editor || this._editor.isDestroyed)
                 return;
+            const ed = this._editor;
             untracked(() => {
-                this._editor.setEditable(editable);
+                ed.setEditable(editable);
                 this._isEditable.set(editable);
             });
         });
@@ -64,15 +66,16 @@ class DomternalEditorComponent {
             const format = this.outputFormat();
             if (!this._editor || this._editor.isDestroyed)
                 return;
+            const ed = this._editor;
             untracked(() => {
                 const current = format === 'html'
-                    ? this._editor.getHTML()
-                    : JSON.stringify(this._editor.getJSON());
+                    ? ed.getHTML()
+                    : JSON.stringify(ed.getJSON());
                 const incoming = format === 'html'
                     ? content
                     : JSON.stringify(content);
                 if (incoming !== current) {
-                    this._editor.setContent(content, false);
+                    ed.setContent(content, false);
                 }
             });
         });
@@ -148,9 +151,10 @@ class DomternalEditorComponent {
         this._htmlContent.set(this._editor.getHTML());
         this._jsonContent.set(this._editor.getJSON());
         this._isEmpty.set(this._editor.isEmpty);
-        this._editor.on('transaction', ({ transaction }) => {
+        const editor = this._editor;
+        editor.on('transaction', ({ transaction }) => {
             this.ngZone.run(() => {
-                const ed = this._editor;
+                const ed = editor;
                 if (transaction.docChanged) {
                     const html = ed.getHTML();
                     this._htmlContent.set(html);
@@ -165,22 +169,22 @@ class DomternalEditorComponent {
                 }
             });
         });
-        this._editor.on('focus', ({ event }) => {
+        editor.on('focus', ({ event }) => {
             this.ngZone.run(() => {
                 this._isFocused.set(true);
-                this.focusChanged.emit({ editor: this._editor, event });
+                this.focusChanged.emit({ editor, event });
             });
         });
-        this._editor.on('blur', ({ event }) => {
+        editor.on('blur', ({ event }) => {
             this.ngZone.run(() => {
                 this._isFocused.set(false);
-                this.blurChanged.emit({ editor: this._editor, event });
+                this.blurChanged.emit({ editor, event });
                 this.onTouched();
             });
         });
         // Emit editor created
         this.ngZone.run(() => {
-            this.editorCreated.emit(this._editor);
+            this.editorCreated.emit(editor);
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -222,13 +226,13 @@ class DomternalToolbarComponent {
     ngZone = inject(NgZone);
     elRef = inject(ElementRef);
     sanitizer = inject(DomSanitizer);
-    /** SafeHtml cache — same reference returned for same key, prevents DOM churn */
+    /** SafeHtml cache - same reference returned for same key, prevents DOM churn */
     htmlCache = new Map();
     dropdownCaret = '<svg class="dm-dropdown-caret" width="10" height="10" viewBox="0 0 10 10"><path d="M2 4l3 3 3-3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
     constructor() {
         effect(() => {
             const editor = this.editor();
-            untracked(() => this.setupController(editor));
+            untracked(() => { this.setupController(editor); });
         });
     }
     ngOnDestroy() {
@@ -269,7 +273,7 @@ class DomternalToolbarComponent {
             }
             return cached;
         }
-        // Non-grid dropdown — show active sub-item's label as text
+        // Non-grid dropdown - show active sub-item's label as text
         if (dropdown.dynamicLabel) {
             if (activeItem)
                 return this.getCachedTriggerLabel(activeItem.label);
@@ -281,7 +285,7 @@ class DomternalToolbarComponent {
                     computed = this.getInlineStyleAtCursor(dropdown.computedStyleProperty);
                     if (computed) {
                         const first = computed.split(',')[0]?.replace(/['"]+/g, '').trim();
-                        computed = first || null;
+                        computed = first ?? null;
                     }
                 }
                 else {
@@ -300,7 +304,7 @@ class DomternalToolbarComponent {
     }
     /**
      * Returns 'true' when an emitEvent button's panel is open, null otherwise.
-     * Maps to [attr.aria-expanded] — null removes the attribute entirely.
+     * Maps to [attr.aria-expanded] - null removes the attribute entirely.
      */
     getAriaExpanded(item) {
         if (!item.emitEvent)
@@ -408,7 +412,7 @@ class DomternalToolbarComponent {
         // Always refocus editor after executing a command via toolbar button.
         // Mouse clicks already keep focus via mousedown.preventDefault();
         // keyboard activations (Enter/Space) need explicit refocus.
-        requestAnimationFrame(() => this.editor().view.focus());
+        requestAnimationFrame(() => { this.editor().view.focus(); });
     }
     onDropdownToggle(dropdown) {
         this.cleanupFloating?.();
@@ -448,7 +452,7 @@ class DomternalToolbarComponent {
             this.controller?.executeCommand(item);
         }
         // Refocus editor so ::selection highlight stays visible
-        requestAnimationFrame(() => this.editor().view.focus());
+        requestAnimationFrame(() => { this.editor().view.focus(); });
     }
     onButtonFocus(name) {
         const index = this.controller?.getFlatIndex(name) ?? -1;
@@ -489,7 +493,7 @@ class DomternalToolbarComponent {
                     const btn = document.activeElement;
                     if (btn?.getAttribute('aria-haspopup') && btn.closest('.dm-toolbar')) {
                         btn.click();
-                        requestAnimationFrame(() => this.focusDropdownItem(0, true));
+                        requestAnimationFrame(() => { this.focusDropdownItem(0, true); });
                     }
                 }
                 break;
@@ -541,7 +545,7 @@ class DomternalToolbarComponent {
     }
     setupController(editor) {
         this.destroyController();
-        this.controller = new ToolbarController(editor, () => this.ngZone.run(() => this.syncState()), this.layout());
+        this.controller = new ToolbarController(editor, () => { this.ngZone.run(() => { this.syncState(); }); }, this.layout());
         this.controller.subscribe();
         this.syncState();
         // Click outside to close dropdown
@@ -550,7 +554,7 @@ class DomternalToolbarComponent {
                 this.cleanupFloating?.();
                 this.cleanupFloating = null;
                 this.controller?.closeDropdown();
-                this.ngZone.run(() => this.syncState());
+                this.ngZone.run(() => { this.syncState(); });
             }
         };
         document.addEventListener('mousedown', this.clickOutsideHandler);
@@ -562,7 +566,7 @@ class DomternalToolbarComponent {
                     this.cleanupFloating?.();
                     this.cleanupFloating = null;
                     this.controller?.closeDropdown();
-                    this.ngZone.run(() => this.syncState());
+                    this.ngZone.run(() => { this.syncState(); });
                 }
             };
             this.editorEl.addEventListener('dm:dismiss-overlays', this.dismissOverlayHandler);
@@ -616,7 +620,7 @@ class DomternalToolbarComponent {
             return null;
         }
     }
-    /** Read only inline style — no computed fallback (used for font-family). */
+    /** Read only inline style - no computed fallback (used for font-family). */
     getInlineStyleAtCursor(prop) {
         try {
             const { from } = this.editor().state.selection;
@@ -873,27 +877,82 @@ class DomternalBubbleMenuComponent {
     offset = input(8, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
     updateDelay = input(0, ...(ngDevMode ? [{ debugName: "updateDelay" }] : /* istanbul ignore next */ []));
     /** Fixed item names (e.g. ['bold', 'italic', 'code']). Omit for auto mode (all format items). */
-    items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : /* istanbul ignore next */ []));
+    items = input(undefined, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     /** Context-aware: map context names to item arrays, `true` for all valid items, or `null` to disable */
-    contexts = input(...(ngDevMode ? [undefined, { debugName: "contexts" }] : /* istanbul ignore next */ []));
-    /** Internal — updated on transactions. Not meant to be set from outside. */
+    contexts = input(undefined, ...(ngDevMode ? [{ debugName: "contexts" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom icon overrides. Falls back to default Phosphor icons for unmapped keys.
+     * For nullable bindings, use `iconsSignal() ?? {}` to satisfy strict template checks.
+     */
+    icons = input(undefined, ...(ngDevMode ? [{ debugName: "icons" }] : /* istanbul ignore next */ []));
+    /**
+     * Returns the effective contexts map: the explicit `contexts` input
+     * when provided, the standard default when neither `contexts` nor
+     * `items` is set, or `undefined` (items-mode) when only `items` is set.
+     * The standard default is richer when the editor sits inside
+     * `.dm-notion-mode`.
+     */
+    resolveContexts(editor) {
+        const explicit = this.contexts();
+        if (explicit !== undefined)
+            return explicit;
+        if (this.items() !== undefined)
+            return undefined;
+        return defaultBubbleContexts(editor);
+    }
+    /** Internal - updated on transactions. Not meant to be set from outside. */
     resolvedItems = signal([], ...(ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []));
+    /** Internal - true when the BlockContextMenu extension is loaded; toggles the "..." trailing button. */
+    showBlockMenuButton = signal(false, ...(ngDevMode ? [{ debugName: "showBlockMenuButton" }] : /* istanbul ignore next */ []));
+    /** Internal - true when the selection spans more than one top-level block; the "..." trigger is disabled in that case because block-level commands have no unambiguous target. */
+    blockMenuButtonDisabled = signal(false, ...(ngDevMode ? [{ debugName: "blockMenuButtonDisabled" }] : /* istanbul ignore next */ []));
+    /** Internal - true when the current selection is a NodeSelection (image, HR). The text-color and block-context triggers are hidden in that case: a node has no inline text to color and its bubble menu already exposes node-specific actions. */
+    isNodeSelection = signal(false, ...(ngDevMode ? [{ debugName: "isNodeSelection" }] : /* istanbul ignore next */ []));
+    /** Internal - true when the NotionColorPicker extension is loaded; toggles the "A" color trigger. */
+    showColorPickerButton = signal(false, ...(ngDevMode ? [{ debugName: "showColorPickerButton" }] : /* istanbul ignore next */ []));
+    /** Current text color CSS variable expression for the trigger glyph (null = default). */
+    currentTextColorVar = signal(null, ...(ngDevMode ? [{ debugName: "currentTextColorVar" }] : /* istanbul ignore next */ []));
+    /** Current background color CSS variable expression for the trigger underline (null = transparent). */
+    currentBgColorVar = signal(null, ...(ngDevMode ? [{ debugName: "currentBgColorVar" }] : /* istanbul ignore next */ []));
+    /** Internal - true when the selection has any token-based text or background color applied. */
+    hasAnyColor = signal(false, ...(ngDevMode ? [{ debugName: "hasAnyColor" }] : /* istanbul ignore next */ []));
     menuEl = viewChild.required('menuEl');
     pluginKey;
     sanitizer = inject(DomSanitizer);
     ngZone = inject(NgZone);
     activeVersion = signal(0, ...(ngDevMode ? [{ debugName: "activeVersion" }] : /* istanbul ignore next */ []));
     itemMap = new Map();
+    dropdownMap = new Map();
     activeMap = new Map();
     disabledMap = new Map();
     htmlCache = new Map();
     bubbleDefaults = new Map();
     transactionHandler = null;
+    // Dropdown state for bubble-menu-embedded dropdowns (e.g. text-align).
+    openDropdown = signal(null, ...(ngDevMode ? [{ debugName: "openDropdown" }] : /* istanbul ignore next */ []));
+    dropdownCleanupFloating = null;
+    dropdownOutsideHandler = null;
+    dropdownKeydownHandler = null;
+    dropdownDismissHandler = null;
+    dropdownCaret = '<svg class="dm-dropdown-caret" width="10" height="10" viewBox="0 0 10 10">' +
+        '<path d="M2 4l3 3 3-3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
     constructor() {
-        this.pluginKey = new PluginKey('angularBubbleMenu-' + Math.random().toString(36).slice(2, 8));
+        // Each component instance needs a unique plugin key so that multiple
+        // bubble-menus mounted in the same editor do not collide. Prefer
+        // crypto.randomUUID over Math.random() for collision-free uniqueness
+        // (Math.random across two simultaneous mounts has a small but real
+        // collision probability, and SSR may share the random seed).
+        const crypto = globalThis.crypto;
+        const suffix = crypto?.randomUUID?.().slice(0, 8) ?? Math.random().toString(36).slice(2, 8);
+        this.pluginKey = new PluginKey('angularBubbleMenu-' + suffix);
+        // Cache keys do not include icon-set identity, so flush on swap.
+        effect(() => {
+            this.icons();
+            this.htmlCache.clear();
+        });
         afterNextRender(() => {
             const editor = this.editor();
-            const ctxs = this.contexts();
+            const ctxs = this.resolveContexts(editor);
             let shouldShowFn = this.shouldShow();
             if (!shouldShowFn) {
                 if (ctxs) {
@@ -913,8 +972,10 @@ class DomternalBubbleMenuComponent {
                 else {
                     // Auto/items mode: show when any endpoint's parent allows marks
                     shouldShowFn = ({ state }) => {
-                        if (state.selection.empty || state.selection.node)
+                        if (state.selection.empty)
                             return false;
+                        if (state.selection.node)
+                            return this.bubbleDefaults.has(state.selection.node.type.name);
                         if (isInsideTableCell(state.selection.$from))
                             return false;
                         return state.selection.$from.parent.type.spec.marks !== ''
@@ -956,27 +1017,66 @@ class DomternalBubbleMenuComponent {
     getCachedIcon(name) {
         let cached = this.htmlCache.get(name);
         if (!cached) {
-            cached = this.sanitizer.bypassSecurityTrustHtml(defaultIcons[name] ?? '');
+            const custom = this.icons();
+            cached = this.sanitizer.bypassSecurityTrustHtml(custom?.[name] ?? defaultIcons[name] ?? '');
             this.htmlCache.set(name, cached);
         }
         return cached;
     }
-    executeCommand(item) {
+    executeCommand(item, event) {
         if (item.emitEvent) {
+            // Forward the clicked button as the anchor so listeners (LinkPopover,
+            // image popover, emoji picker) can position their panels against it
+            // - matches `openColorPicker(anchor)` and the toolbar's executeItem.
+            const anchor = event?.currentTarget ??
+                event?.target ?? null;
             // emitEvent is a dynamic string; cast needed to bypass strict EventEmitter<EditorEvents> typing
-            this.editor().emit(item.emitEvent, {});
+            this.editor().emit(item.emitEvent, { anchorElement: anchor });
             return;
         }
         ToolbarController.executeItem(this.editor(), item);
     }
+    /**
+     * Emit the `notionColorOpen` event with the trigger button as the anchor.
+     * The framework popover component (DomternalNotionColorPickerComponent)
+     * listens for this event and positions itself against the anchor.
+     */
+    openColorPicker(anchor) {
+        this.editor().emit('notionColorOpen', { anchorElement: anchor });
+    }
+    /**
+     * Open the BlockContextMenu against the cursor's containing block. Skips
+     * the textblock for nested cases (cursor in `listItem > paragraph` targets
+     * the listItem, not the paragraph) so Delete / Turn into operate on the
+     * "visual block" the user is editing.
+     */
+    openBlockContextMenu(anchor) {
+        const editor = this.editor();
+        const $from = editor.state.selection.$from;
+        if ($from.depth < 1)
+            return;
+        // Walk one level up to use the container when the cursor's textblock
+        // isn't a direct doc child; otherwise use the textblock itself.
+        const depth = $from.depth > 1 && $from.node($from.depth - 1).type.name !== 'doc'
+            ? $from.depth - 1
+            : $from.depth;
+        const blockPos = $from.before(depth);
+        const editorEl = editor.view.dom.closest('.dm-editor');
+        editorEl?.dispatchEvent(new CustomEvent('dm:block-context-menu-open', {
+            bubbles: false,
+            detail: { blockPos, anchorElement: anchor },
+        }));
+    }
     // === Internal ===
     buildItemMap(editor) {
         this.itemMap.clear();
+        this.dropdownMap.clear();
         for (const item of editor.toolbarItems) {
             if (item.type === 'button') {
                 this.itemMap.set(item.name, item);
             }
             else if (item.type === 'dropdown') {
+                this.dropdownMap.set(item.name, item);
                 for (const sub of item.items) {
                     this.itemMap.set(sub.name, sub);
                 }
@@ -988,9 +1088,14 @@ class DomternalBubbleMenuComponent {
         let sepIdx = 0;
         for (const name of names) {
             if (name === '|') {
-                result.push({ type: 'separator', name: `sep-${sepIdx++}` });
+                result.push({ type: 'separator', name: `sep-${String(sepIdx++)}` });
             }
             else {
+                const dropdown = this.dropdownMap.get(name);
+                if (dropdown) {
+                    result.push(dropdown);
+                    continue;
+                }
                 const item = this.itemMap.get(name);
                 if (item)
                     result.push(item);
@@ -1004,7 +1109,7 @@ class DomternalBubbleMenuComponent {
             .sort((a, b) => (b.priority ?? 100) - (a.priority ?? 100));
     }
     detectContext(selection, ctxs) {
-        // CellSelection (duck-type: has $anchorCell) — never show bubble menu
+        // CellSelection (duck-type: has $anchorCell) - never show bubble menu
         if ('$anchorCell' in selection)
             return null;
         if (selection.node)
@@ -1056,7 +1161,7 @@ class DomternalBubbleMenuComponent {
             const markName = typeof item.isActive === 'string' ? item.isActive : null;
             if (!markName)
                 return true;
-            const markType = schema.marks?.[markName];
+            const markType = schema.marks[markName];
             if (!markType)
                 return true;
             return nodeType.allowsMarkType(markType);
@@ -1091,7 +1196,7 @@ class DomternalBubbleMenuComponent {
             let sepIdx = 0;
             for (const item of items) {
                 if (lastGroup !== undefined && item.group !== lastGroup) {
-                    result.push({ type: 'separator', name: `bsep-${sepIdx++}` });
+                    result.push({ type: 'separator', name: `bsep-${String(sepIdx++)}` });
                 }
                 result.push(item);
                 lastGroup = item.group;
@@ -1102,29 +1207,85 @@ class DomternalBubbleMenuComponent {
     setupItemTracking(editor) {
         this.buildItemMap(editor);
         this.buildBubbleDefaults(editor);
-        if (this.contexts()) {
+        this.showBlockMenuButton.set(editor.extensionManager.extensions.some((e) => e.name === 'blockContextMenu'));
+        this.showColorPickerButton.set(editor.extensionManager.extensions.some((e) => e.name === 'notionColorPicker'));
+        const items = this.items();
+        const defaultItems = this.resolveNames(items ?? ['bold', 'italic', 'underline']);
+        if (this.resolveContexts(editor)) {
             this.updateContextItems(editor);
         }
-        else if (this.items()) {
-            this.resolvedItems.set(this.resolveNames(this.items()));
-        }
         else {
-            this.resolvedItems.set(this.resolveNames(['bold', 'italic', 'underline']));
+            this.resolvedItems.set(defaultItems);
         }
         this.transactionHandler = () => {
             this.ngZone.run(() => {
-                if (this.contexts()) {
+                const sel = editor.state.selection;
+                this.isNodeSelection.set(!!sel.node);
+                if (this.resolveContexts(editor)) {
                     this.updateContextItems(editor);
                 }
+                else if (sel.node && this.bubbleDefaults.has(sel.node.type.name)) {
+                    this.resolvedItems.set(this.bubbleDefaults.get(sel.node.type.name) ?? []);
+                }
+                else {
+                    this.resolvedItems.set(defaultItems);
+                }
                 this.updateStates(editor);
-                this.activeVersion.update(v => v + 1);
+                this.syncTrailingButtonsState(editor);
+                this.activeVersion.update((v) => v + 1);
             });
         };
         editor.on('transaction', this.transactionHandler);
         this.updateStates(editor);
+        this.syncTrailingButtonsState(editor);
+    }
+    /**
+     * Refresh state for the optional trailing buttons (A color trigger,
+     * "..." block menu) and the isNodeSelection flag. Called from both
+     * setupItemTracking init and the per-transaction handler so the two
+     * paths stay in sync.
+     */
+    syncTrailingButtonsState(editor) {
+        this.isNodeSelection.set(!!editor.state.selection.node);
+        if (this.showColorPickerButton())
+            this.syncColorTriggerState(editor);
+        if (this.showBlockMenuButton())
+            this.syncBlockMenuButtonState(editor);
+    }
+    /**
+     * Disable the "..." trigger when the selection spans more than one
+     * top-level block. The block context menu targets the block at $from, so
+     * a multi-block selection has no unambiguous target.
+     */
+    syncBlockMenuButtonState(editor) {
+        const { $from, $to } = editor.state.selection;
+        // depth(1) addresses the top-level child of doc; if either end is
+        // shallower we can't compare blocks meaningfully.
+        if ($from.depth < 1 || $to.depth < 1) {
+            this.blockMenuButtonDisabled.set(true);
+            return;
+        }
+        this.blockMenuButtonDisabled.set($from.before(1) !== $to.before(1));
+    }
+    /**
+     * Update the trigger's indicator colors to mirror the current selection.
+     * Used by the "A" button so the underline matches whatever the user has
+     * applied at the cursor (Notion-style live preview).
+     */
+    syncColorTriggerState(editor) {
+        const $from = editor.state.selection.$from;
+        const mark = $from.marks().find((m) => m.type.name === 'textStyle');
+        const attrs = (mark?.attrs ?? {});
+        const textToken = attrs.colorToken ?? null;
+        const bgToken = attrs.backgroundColorToken ?? null;
+        this.currentTextColorVar.set(textToken ? `var(--dm-block-text-${textToken})` : null);
+        this.currentBgColorVar.set(bgToken ? `var(--dm-block-bg-${bgToken})` : null);
+        this.hasAnyColor.set(textToken !== null || bgToken !== null);
     }
     updateContextItems(editor) {
-        const ctxs = this.contexts();
+        const ctxs = this.resolveContexts(editor);
+        if (!ctxs)
+            return;
         const ctx = this.detectContext(editor.state.selection, ctxs);
         if (!ctx) {
             this.resolvedItems.set([]);
@@ -1155,40 +1316,237 @@ class DomternalBubbleMenuComponent {
         try {
             canProxy = editor.can();
         }
-        catch { }
-        for (const item of this.resolvedItems()) {
-            if (item.type === 'separator')
-                continue;
-            this.activeMap.set(item.name, ToolbarController.resolveActive(editor, item));
+        catch { /* ignore */ }
+        const trackButton = (btn) => {
+            this.activeMap.set(btn.name, ToolbarController.resolveActive(editor, btn));
             try {
-                const canCmd = canProxy?.[item.command];
-                this.disabledMap.set(item.name, canCmd
-                    ? !(item.commandArgs?.length ? canCmd(...item.commandArgs) : canCmd())
+                const canCmd = typeof btn.command === 'string' ? canProxy?.[btn.command] : undefined;
+                this.disabledMap.set(btn.name, canCmd
+                    ? !(btn.commandArgs?.length ? canCmd(...btn.commandArgs) : canCmd())
                     : false);
             }
             catch {
-                this.disabledMap.set(item.name, false);
+                this.disabledMap.set(btn.name, false);
             }
+        };
+        for (const item of this.resolvedItems()) {
+            if (item.type === 'separator')
+                continue;
+            if (item.type === 'dropdown') {
+                // Track each child so dynamicIcon + isActive lookups work.
+                for (const sub of item.items)
+                    trackButton(sub);
+                continue;
+            }
+            trackButton(item);
         }
     }
+    // === Dropdown helpers (shared shape with toolbar.component.ts) ===
+    asButton(item) {
+        return item;
+    }
+    asDropdown(item) {
+        return item;
+    }
+    isDropdownActive(dropdown) {
+        this.activeVersion();
+        return dropdown.items.some((sub) => this.activeMap.get(sub.name) ?? false);
+    }
+    /** Trigger HTML: swap icon to the active child when `dynamicIcon` is set. */
+    getDropdownTriggerHtml(dropdown) {
+        this.activeVersion();
+        const activeItem = dropdown.dynamicIcon
+            ? dropdown.items.find((sub) => this.activeMap.get(sub.name))
+            : undefined;
+        const iconName = activeItem?.icon ?? dropdown.icon;
+        const key = `t:${iconName}`;
+        let cached = this.htmlCache.get(key);
+        if (!cached) {
+            const custom = this.icons();
+            const svg = custom?.[iconName] ?? defaultIcons[iconName] ?? '';
+            cached = this.sanitizer.bypassSecurityTrustHtml(svg + this.dropdownCaret);
+            this.htmlCache.set(key, cached);
+        }
+        return cached;
+    }
+    getCachedItemContent(iconName, label) {
+        const key = `dc:${iconName}:${label}`;
+        let cached = this.htmlCache.get(key);
+        if (!cached) {
+            const custom = this.icons();
+            const svg = custom?.[iconName] ?? defaultIcons[iconName] ?? '';
+            cached = this.sanitizer.bypassSecurityTrustHtml(`${svg} ${label}`);
+            this.htmlCache.set(key, cached);
+        }
+        return cached;
+    }
+    isSubItemActive(name) {
+        this.activeVersion();
+        return this.activeMap.get(name) ?? false;
+    }
+    onDropdownToggle(dropdown, event) {
+        const isOpening = this.openDropdown() !== dropdown.name;
+        this.cleanupDropdown();
+        if (!isOpening)
+            return;
+        this.openDropdown.set(dropdown.name);
+        // NOTE: we deliberately do NOT broadcast `dm:dismiss-overlays` here.
+        // The bubble menu plugin in core listens for that event and would
+        // hide itself - taking our just-opened dropdown's trigger with it.
+        // Other overlays (color picker, link popover) close themselves via
+        // their own click-outside handlers when the user clicks our trigger,
+        // so cooperative dismissal still works.
+        const editorElBroadcast = this.menuEl().nativeElement.closest('.dm-editor');
+        // Position the panel against the trigger after Angular renders it.
+        // We deliberately keep the panel INSIDE `.dm-bubble-menu` so it
+        // inherits the bubble-menu-scoped button tokens (--dm-button-active-bg
+        // / --dm-button-active-color). Reparenting into `.dm-editor` was
+        // tempting for consistency with the color picker, but that dropped
+        // the active-state colors because those tokens aren't defined at
+        // editor scope. floating-ui handles cross-element positioning fine
+        // without reparenting.
+        requestAnimationFrame(() => {
+            const trigger = event?.currentTarget
+                ?? this.menuEl().nativeElement.querySelector(`[data-dropdown="${dropdown.name}"]`);
+            const panel = this.menuEl().nativeElement.querySelector(`[data-dropdown-panel="${dropdown.name}"]`);
+            if (!trigger || !panel)
+                return;
+            this.dropdownCleanupFloating?.();
+            this.dropdownCleanupFloating = positionFloatingOnce(trigger, panel, {
+                placement: 'bottom-start',
+                offsetValue: 4,
+            });
+        });
+        // Click-outside dismissal. mousedown is used so the dropdown closes
+        // BEFORE the bubble menu's blur handler runs.
+        const onOutside = (e) => {
+            const target = e.target;
+            if (!target)
+                return;
+            const panel = document.querySelector(`[data-dropdown-panel="${dropdown.name}"]`);
+            const trigger = this.menuEl().nativeElement.querySelector(`[data-dropdown="${dropdown.name}"]`);
+            if (panel?.contains(target))
+                return;
+            if (trigger?.contains(target))
+                return;
+            this.cleanupDropdown();
+        };
+        document.addEventListener('mousedown', onOutside);
+        this.dropdownOutsideHandler = onOutside;
+        // Escape closes the dropdown.
+        const onKeydown = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                this.cleanupDropdown();
+            }
+        };
+        document.addEventListener('keydown', onKeydown);
+        this.dropdownKeydownHandler = onKeydown;
+        // Listen for cooperative dismissals from other overlays opening.
+        const onDismiss = () => { this.cleanupDropdown(); };
+        if (editorElBroadcast) {
+            editorElBroadcast.addEventListener('dm:dismiss-overlays', onDismiss);
+            this.dropdownDismissHandler = () => {
+                editorElBroadcast.removeEventListener('dm:dismiss-overlays', onDismiss);
+            };
+        }
+    }
+    onDropdownItemClick(item) {
+        this.cleanupDropdown();
+        ToolbarController.executeItem(this.editor(), item);
+        requestAnimationFrame(() => { this.editor().view.focus(); });
+    }
+    cleanupDropdown() {
+        if (this.dropdownOutsideHandler) {
+            document.removeEventListener('mousedown', this.dropdownOutsideHandler);
+            this.dropdownOutsideHandler = null;
+        }
+        if (this.dropdownKeydownHandler) {
+            document.removeEventListener('keydown', this.dropdownKeydownHandler);
+            this.dropdownKeydownHandler = null;
+        }
+        if (this.dropdownDismissHandler) {
+            this.dropdownDismissHandler();
+            this.dropdownDismissHandler = null;
+        }
+        this.dropdownCleanupFloating?.();
+        this.dropdownCleanupFloating = null;
+        this.openDropdown.set(null);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DomternalBubbleMenuComponent, isStandalone: true, selector: "domternal-bubble-menu", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, shouldShow: { classPropertyName: "shouldShow", publicName: "shouldShow", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, updateDelay: { classPropertyName: "updateDelay", publicName: "updateDelay", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, contexts: { classPropertyName: "contexts", publicName: "contexts", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: ["menuEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DomternalBubbleMenuComponent, isStandalone: true, selector: "domternal-bubble-menu", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, shouldShow: { classPropertyName: "shouldShow", publicName: "shouldShow", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, updateDelay: { classPropertyName: "updateDelay", publicName: "updateDelay", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, contexts: { classPropertyName: "contexts", publicName: "contexts", isSignal: true, isRequired: false, transformFunction: null }, icons: { classPropertyName: "icons", publicName: "icons", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: ["menuEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div #menuEl class="dm-bubble-menu" role="toolbar" aria-label="Text formatting">
       @for (item of resolvedItems(); track item.name) {
         @if (item.type === 'separator') {
           <span class="dm-toolbar-separator" role="separator"></span>
+        } @else if (item.type === 'dropdown') {
+          <div class="dm-toolbar-dropdown-wrapper" [attr.data-dropdown-wrapper]="asDropdown(item).name">
+            <button type="button"
+              class="dm-toolbar-button dm-toolbar-dropdown-trigger"
+              [class.dm-toolbar-button--active]="isDropdownActive(asDropdown(item))"
+              [attr.aria-expanded]="openDropdown() === asDropdown(item).name"
+              [attr.aria-haspopup]="'true'"
+              [attr.aria-label]="asDropdown(item).label"
+              [title]="asDropdown(item).label"
+              [attr.data-dropdown]="asDropdown(item).name"
+              [innerHTML]="getDropdownTriggerHtml(asDropdown(item))"
+              (mousedown)="$event.preventDefault()"
+              (click)="onDropdownToggle(asDropdown(item), $event)"></button>
+            @if (openDropdown() === asDropdown(item).name) {
+              <div class="dm-toolbar-dropdown-panel" role="menu"
+                   data-dm-editor-ui
+                   [attr.data-dropdown-panel]="asDropdown(item).name">
+                @for (sub of asDropdown(item).items; track sub.name) {
+                  <button type="button"
+                    class="dm-toolbar-dropdown-item"
+                    [class.dm-toolbar-dropdown-item--active]="isSubItemActive(sub.name)"
+                    role="menuitem"
+                    [attr.aria-label]="sub.label"
+                    [innerHTML]="getCachedItemContent(sub.icon, sub.label)"
+                    (mousedown)="$event.preventDefault()"
+                    (click)="onDropdownItemClick(sub)"></button>
+                }
+              </div>
+            }
+          </div>
         } @else {
           <button type="button" class="dm-toolbar-button"
-            [class.dm-toolbar-button--active]="isItemActive(item)"
-            [attr.aria-pressed]="isItemActive(item)"
-            [disabled]="isItemDisabled(item)"
-            [title]="item.label"
-            [attr.aria-label]="item.label"
-            [innerHTML]="getCachedIcon(item.icon)"
+            [class.dm-toolbar-button--active]="isItemActive(asButton(item))"
+            [attr.aria-pressed]="isItemActive(asButton(item))"
+            [disabled]="isItemDisabled(asButton(item))"
+            [title]="asButton(item).label"
+            [attr.aria-label]="asButton(item).label"
+            [innerHTML]="getCachedIcon(asButton(item).icon)"
             (mousedown)="$event.preventDefault()"
-            (click)="executeCommand(item)"></button>
+            (click)="executeCommand(asButton(item), $event)"></button>
         }
       }
+      @if (showColorPickerButton() && !isNodeSelection()) {
+        <span class="dm-toolbar-separator" role="separator"></span>
+        <button #colorBtn type="button" class="dm-toolbar-button dm-ncp-trigger"
+          [class.dm-toolbar-button--active]="hasAnyColor()"
+          title="Text and background color"
+          aria-label="Text and background color"
+          aria-haspopup="dialog"
+          (mousedown)="$event.preventDefault()"
+          (click)="openColorPicker(colorBtn)">
+          <span class="dm-ncp-trigger-glyph"
+            [style.color]="currentTextColorVar()">A</span>
+          <span class="dm-ncp-trigger-underline"
+            [style.background-color]="currentBgColorVar()"></span>
+        </button>
+      }
+      @if (showBlockMenuButton() && !isNodeSelection()) {
+        <span class="dm-toolbar-separator" role="separator"></span>
+        <button #blockMenuBtn type="button" class="dm-toolbar-button"
+          [disabled]="blockMenuButtonDisabled()"
+          [title]="blockMenuButtonDisabled() ? 'Block actions (select within a single block)' : 'More options'"
+          aria-label="More options"
+          aria-haspopup="menu"
+          [innerHTML]="getCachedIcon('dotsThree')"
+          (mousedown)="$event.preventDefault()"
+          (click)="openBlockContextMenu(blockMenuBtn)"></button>
+      }
       <ng-content />
     </div>
   `, isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -1200,57 +1558,350 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       @for (item of resolvedItems(); track item.name) {
         @if (item.type === 'separator') {
           <span class="dm-toolbar-separator" role="separator"></span>
+        } @else if (item.type === 'dropdown') {
+          <div class="dm-toolbar-dropdown-wrapper" [attr.data-dropdown-wrapper]="asDropdown(item).name">
+            <button type="button"
+              class="dm-toolbar-button dm-toolbar-dropdown-trigger"
+              [class.dm-toolbar-button--active]="isDropdownActive(asDropdown(item))"
+              [attr.aria-expanded]="openDropdown() === asDropdown(item).name"
+              [attr.aria-haspopup]="'true'"
+              [attr.aria-label]="asDropdown(item).label"
+              [title]="asDropdown(item).label"
+              [attr.data-dropdown]="asDropdown(item).name"
+              [innerHTML]="getDropdownTriggerHtml(asDropdown(item))"
+              (mousedown)="$event.preventDefault()"
+              (click)="onDropdownToggle(asDropdown(item), $event)"></button>
+            @if (openDropdown() === asDropdown(item).name) {
+              <div class="dm-toolbar-dropdown-panel" role="menu"
+                   data-dm-editor-ui
+                   [attr.data-dropdown-panel]="asDropdown(item).name">
+                @for (sub of asDropdown(item).items; track sub.name) {
+                  <button type="button"
+                    class="dm-toolbar-dropdown-item"
+                    [class.dm-toolbar-dropdown-item--active]="isSubItemActive(sub.name)"
+                    role="menuitem"
+                    [attr.aria-label]="sub.label"
+                    [innerHTML]="getCachedItemContent(sub.icon, sub.label)"
+                    (mousedown)="$event.preventDefault()"
+                    (click)="onDropdownItemClick(sub)"></button>
+                }
+              </div>
+            }
+          </div>
         } @else {
           <button type="button" class="dm-toolbar-button"
-            [class.dm-toolbar-button--active]="isItemActive(item)"
-            [attr.aria-pressed]="isItemActive(item)"
-            [disabled]="isItemDisabled(item)"
-            [title]="item.label"
-            [attr.aria-label]="item.label"
-            [innerHTML]="getCachedIcon(item.icon)"
+            [class.dm-toolbar-button--active]="isItemActive(asButton(item))"
+            [attr.aria-pressed]="isItemActive(asButton(item))"
+            [disabled]="isItemDisabled(asButton(item))"
+            [title]="asButton(item).label"
+            [attr.aria-label]="asButton(item).label"
+            [innerHTML]="getCachedIcon(asButton(item).icon)"
             (mousedown)="$event.preventDefault()"
-            (click)="executeCommand(item)"></button>
+            (click)="executeCommand(asButton(item), $event)"></button>
         }
       }
+      @if (showColorPickerButton() && !isNodeSelection()) {
+        <span class="dm-toolbar-separator" role="separator"></span>
+        <button #colorBtn type="button" class="dm-toolbar-button dm-ncp-trigger"
+          [class.dm-toolbar-button--active]="hasAnyColor()"
+          title="Text and background color"
+          aria-label="Text and background color"
+          aria-haspopup="dialog"
+          (mousedown)="$event.preventDefault()"
+          (click)="openColorPicker(colorBtn)">
+          <span class="dm-ncp-trigger-glyph"
+            [style.color]="currentTextColorVar()">A</span>
+          <span class="dm-ncp-trigger-underline"
+            [style.background-color]="currentBgColorVar()"></span>
+        </button>
+      }
+      @if (showBlockMenuButton() && !isNodeSelection()) {
+        <span class="dm-toolbar-separator" role="separator"></span>
+        <button #blockMenuBtn type="button" class="dm-toolbar-button"
+          [disabled]="blockMenuButtonDisabled()"
+          [title]="blockMenuButtonDisabled() ? 'Block actions (select within a single block)' : 'More options'"
+          aria-label="More options"
+          aria-haspopup="menu"
+          [innerHTML]="getCachedIcon('dotsThree')"
+          (mousedown)="$event.preventDefault()"
+          (click)="openBlockContextMenu(blockMenuBtn)"></button>
+      }
       <ng-content />
     </div>
   `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], shouldShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldShow", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], updateDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateDelay", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], contexts: [{ type: i0.Input, args: [{ isSignal: true, alias: "contexts", required: false }] }], menuEl: [{ type: i0.ViewChild, args: ['menuEl', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], shouldShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldShow", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], updateDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateDelay", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], contexts: [{ type: i0.Input, args: [{ isSignal: true, alias: "contexts", required: false }] }], icons: [{ type: i0.Input, args: [{ isSignal: true, alias: "icons", required: false }] }], menuEl: [{ type: i0.ViewChild, args: ['menuEl', { isSignal: true }] }] } });
 
+/**
+ * Block-insert floating menu for Angular.
+ *
+ * Renders defaults collected from the editor's extensions via
+ * `addFloatingMenuItems()`; use `items` to override the list and `icons`
+ * to swap the icon set.
+ */
 class DomternalFloatingMenuComponent {
     editor = input.required(...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
     shouldShow = input(...(ngDevMode ? [undefined, { debugName: "shouldShow" }] : /* istanbul ignore next */ []));
     offset = input(0, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    items = input(undefined, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    keymap = input(undefined, ...(ngDevMode ? [{ debugName: "keymap" }] : /* istanbul ignore next */ []));
+    icons = input(undefined, ...(ngDevMode ? [{ debugName: "icons" }] : /* istanbul ignore next */ []));
+    /**
+     * When true, the menu does NOT auto-show on every empty paragraph;
+     * it only opens when the BlockHandle `+` button (or any caller of
+     * `showFloatingMenu`) explicitly triggers it. Notion-style behaviour
+     * - empty rows show a placeholder, the slash menu is the keyboard
+     * trigger, the `+` button is the gutter trigger.
+     * @default false
+     */
+    requireExplicitTrigger = input(false, ...(ngDevMode ? [{ debugName: "requireExplicitTrigger" }] : /* istanbul ignore next */ []));
     menuEl = viewChild.required('menuEl');
+    ngZone = inject(NgZone);
+    sanitizer = inject(DomSanitizer);
     pluginKey;
+    controller = null;
+    // Signal that bumps on every controller change - templates read it to
+    // re-run @for tracking. OnPush components need explicit change triggers.
+    version = signal(0, ...(ngDevMode ? [{ debugName: "version" }] : /* istanbul ignore next */ []));
+    iconCache = new Map();
+    groups = computed(() => {
+        // Read version to subscribe to controller updates.
+        void this.version();
+        return this.controller?.groups ?? [];
+    }, ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    flatNames = computed(() => {
+        void this.version();
+        return this.groups().flatMap((g) => g.items.map((i) => i.name));
+    }, ...(ngDevMode ? [{ debugName: "flatNames" }] : /* istanbul ignore next */ []));
+    focusedIndex = computed(() => {
+        void this.version();
+        return this.controller?.focusedIndex ?? -1;
+    }, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
     constructor() {
-        // Unique key per instance — multiple floating menus on same page
-        this.pluginKey = new PluginKey('angularFloatingMenu-' + Math.random().toString(36).slice(2, 8));
+        // Prefer crypto.randomUUID for collision-free uniqueness (Math.random
+        // across simultaneous mounts may collide; SSR can share the seed).
+        // Matches the bubble-menu component's pattern.
+        const cryptoRef = globalThis.crypto;
+        const suffix = cryptoRef?.randomUUID?.().slice(0, 8) ?? Math.random().toString(36).slice(2, 8);
+        this.pluginKey = new PluginKey('angularFloatingMenu-' + suffix);
         afterNextRender(() => {
+            const editor = this.editor();
             const shouldShow = this.shouldShow();
+            const keymap = this.keymap();
             const plugin = createFloatingMenuPlugin({
                 pluginKey: this.pluginKey,
-                editor: this.editor(),
+                editor,
                 element: this.menuEl().nativeElement,
                 ...(shouldShow && { shouldShow }),
                 offset: this.offset(),
+                ...(keymap && { keymap }),
+                requireExplicitTrigger: this.requireExplicitTrigger(),
+            });
+            editor.registerPlugin(plugin);
+            // Create controller for default rendering. ProseMirror transactions
+            // fire outside Angular zone, so signal updates inside the onChange
+            // callback must be wrapped to trigger OnPush change detection.
+            const controller = new FloatingMenuController(editor, () => {
+                this.ngZone.run(() => { this.version.update((v) => v + 1); });
+            }, this.items());
+            controller.subscribe();
+            this.controller = controller;
+            // Controller is a plain field, not a signal - bumping `version` is
+            // what tells the `groups`/`focusedIndex` computeds to re-evaluate
+            // and pick up the freshly assigned controller instance.
+            this.version.update((v) => v + 1);
+        });
+        // Imperatively focus the active menuitem on focusedIndex change.
+        effect(() => {
+            const idx = this.focusedIndex();
+            if (idx < 0)
+                return;
+            queueMicrotask(() => {
+                const target = this.menuEl().nativeElement.querySelector(`[data-floating-menu-index="${String(idx)}"]`);
+                target?.focus();
             });
-            this.editor().registerPlugin(plugin);
         });
     }
     ngOnDestroy() {
+        this.controller?.destroy();
+        this.controller = null;
         const editor = this.editor();
         if (!editor.isDestroyed) {
             editor.unregisterPlugin(this.pluginKey);
         }
     }
+    // === Template helpers ===
+    flatIndexOf(name) {
+        return this.flatNames().indexOf(name);
+    }
+    tabIndexFor(name) {
+        const flat = this.flatIndexOf(name);
+        const focused = this.focusedIndex();
+        if (flat === focused)
+            return 0;
+        // When menu not yet entered, first item is tabbable so external focus
+        // (e.g. Tab traversal) lands naturally.
+        if (focused < 0 && flat === 0)
+            return 0;
+        return -1;
+    }
+    isItemDisabled(item) {
+        return this.controller?.isDisabled(item) ?? false;
+    }
+    iconHtml(name) {
+        if (!name)
+            return null;
+        const existing = this.iconCache.get(name);
+        if (existing)
+            return existing;
+        const raw = this.icons()?.[name] ?? defaultIcons[name] ?? '';
+        if (!raw)
+            return null;
+        const sanitized = this.sanitizer.bypassSecurityTrustHtml(raw);
+        this.iconCache.set(name, sanitized);
+        return sanitized;
+    }
+    onItemClick(item) {
+        const editor = this.editor();
+        const ctl = this.controller;
+        if (!ctl)
+            return;
+        ctl.execute(item);
+        requestAnimationFrame(() => { editor.view.focus(); });
+    }
+    onKeyDown(e) {
+        const ctl = this.controller;
+        if (!ctl)
+            return;
+        const focused = ctl.focusedItem();
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                ctl.next();
+                return;
+            case 'ArrowUp':
+                e.preventDefault();
+                ctl.prev();
+                return;
+            case 'Home':
+                e.preventDefault();
+                ctl.first();
+                return;
+            case 'End':
+                e.preventDefault();
+                ctl.last();
+                return;
+            case 'Escape':
+                e.preventDefault();
+                e.stopPropagation();
+                ctl.leaveMenu();
+                this.editor().view.focus();
+                return;
+            case 'Enter':
+            case ' ':
+                if (focused) {
+                    e.preventDefault();
+                    this.onItemClick(focused);
+                }
+                return;
+            default:
+                return;
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalFloatingMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.5", type: DomternalFloatingMenuComponent, isStandalone: true, selector: "domternal-floating-menu", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, shouldShow: { classPropertyName: "shouldShow", publicName: "shouldShow", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: ["menuEl"], descendants: true, isSignal: true }], ngImport: i0, template: '<div #menuEl class="dm-floating-menu"><ng-content /></div>', isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DomternalFloatingMenuComponent, isStandalone: true, selector: "domternal-floating-menu", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, shouldShow: { classPropertyName: "shouldShow", publicName: "shouldShow", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, keymap: { classPropertyName: "keymap", publicName: "keymap", isSignal: true, isRequired: false, transformFunction: null }, icons: { classPropertyName: "icons", publicName: "icons", isSignal: true, isRequired: false, transformFunction: null }, requireExplicitTrigger: { classPropertyName: "requireExplicitTrigger", publicName: "requireExplicitTrigger", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: ["menuEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      #menuEl
+      class="dm-floating-menu"
+      role="menu"
+      aria-label="Insert block"
+      data-dm-editor-ui=""
+      (keydown)="onKeyDown($event)"
+    >
+      @for (group of groups(); track group.name || $index; let gi = $index) {
+        @if (group.name) {
+          <div class="dm-floating-menu-group-label" [id]="'dm-fm-g' + gi">{{ group.name }}</div>
+        }
+        <div
+          class="dm-floating-menu-group"
+          role="group"
+          [attr.aria-labelledby]="group.name ? 'dm-fm-g' + gi : null"
+        >
+          @for (item of group.items; track item.name) {
+            <button
+              type="button"
+              role="menuitem"
+              class="dm-floating-menu-item"
+              [attr.data-floating-menu-item]="item.name"
+              [attr.data-floating-menu-index]="flatIndexOf(item.name)"
+              [attr.tabindex]="tabIndexFor(item.name)"
+              [attr.aria-disabled]="isItemDisabled(item) ? 'true' : null"
+              [attr.aria-keyshortcuts]="item.shortcut"
+              [disabled]="isItemDisabled(item)"
+              (mousedown)="$event.preventDefault()"
+              (click)="onItemClick(item)"
+            >
+              @if (iconHtml(item.icon); as html) {
+                <span class="dm-floating-menu-item-icon" aria-hidden="true" [innerHTML]="html"></span>
+              }
+              <span class="dm-floating-menu-item-label">{{ item.label }}</span>
+              @if (item.shortcut) {
+                <span class="dm-floating-menu-item-shortcut" aria-hidden="true">{{ item.shortcut }}</span>
+              }
+            </button>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalFloatingMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'domternal-floating-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<div #menuEl class="dm-floating-menu"><ng-content /></div>', styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], shouldShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldShow", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], menuEl: [{ type: i0.ViewChild, args: ['menuEl', { isSignal: true }] }] } });
+            args: [{ selector: 'domternal-floating-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    <div
+      #menuEl
+      class="dm-floating-menu"
+      role="menu"
+      aria-label="Insert block"
+      data-dm-editor-ui=""
+      (keydown)="onKeyDown($event)"
+    >
+      @for (group of groups(); track group.name || $index; let gi = $index) {
+        @if (group.name) {
+          <div class="dm-floating-menu-group-label" [id]="'dm-fm-g' + gi">{{ group.name }}</div>
+        }
+        <div
+          class="dm-floating-menu-group"
+          role="group"
+          [attr.aria-labelledby]="group.name ? 'dm-fm-g' + gi : null"
+        >
+          @for (item of group.items; track item.name) {
+            <button
+              type="button"
+              role="menuitem"
+              class="dm-floating-menu-item"
+              [attr.data-floating-menu-item]="item.name"
+              [attr.data-floating-menu-index]="flatIndexOf(item.name)"
+              [attr.tabindex]="tabIndexFor(item.name)"
+              [attr.aria-disabled]="isItemDisabled(item) ? 'true' : null"
+              [attr.aria-keyshortcuts]="item.shortcut"
+              [disabled]="isItemDisabled(item)"
+              (mousedown)="$event.preventDefault()"
+              (click)="onItemClick(item)"
+            >
+              @if (iconHtml(item.icon); as html) {
+                <span class="dm-floating-menu-item-icon" aria-hidden="true" [innerHTML]="html"></span>
+              }
+              <span class="dm-floating-menu-item-label">{{ item.label }}</span>
+              @if (item.shortcut) {
+                <span class="dm-floating-menu-item-shortcut" aria-hidden="true">{{ item.shortcut }}</span>
+              }
+            </button>
+          }
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], shouldShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldShow", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], keymap: [{ type: i0.Input, args: [{ isSignal: true, alias: "keymap", required: false }] }], icons: [{ type: i0.Input, args: [{ isSignal: true, alias: "icons", required: false }] }], requireExplicitTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireExplicitTrigger", required: false }] }], menuEl: [{ type: i0.ViewChild, args: ['menuEl', { isSignal: true }] }] } });
 
 const CATEGORY_ICONS = {
     'Smileys & Emotion': '\u{1F600}',
@@ -1305,7 +1956,9 @@ class DomternalEmojiPickerComponent {
         // Re-evaluate when panel opens (isOpen changes)
         this.isOpen();
         const storage = this.getEmojiStorage();
-        const getFreq = storage?.['getFrequentlyUsed'];
+        if (!storage)
+            return [];
+        const getFreq = storage['getFrequentlyUsed'];
         if (!getFreq)
             return [];
         const names = getFreq();
@@ -1319,7 +1972,7 @@ class DomternalEmojiPickerComponent {
     constructor() {
         effect(() => {
             const editor = this.editor();
-            untracked(() => this.setupEventListener(editor));
+            untracked(() => { this.setupEventListener(editor); });
         });
     }
     ngOnDestroy() {
@@ -1376,9 +2029,9 @@ class DomternalEmojiPickerComponent {
         if (!swatches.length)
             return;
         const current = document.activeElement;
-        let idx = swatches.indexOf(current);
+        const idx = swatches.indexOf(current);
         if (idx === -1) {
-            // Focus is on grid container, not a swatch — enter the grid
+            // Focus is on grid container, not a swatch - enter the grid
             if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(event.key)) {
                 event.preventDefault();
                 swatches[0]?.focus();
@@ -1481,14 +2134,14 @@ class DomternalEmojiPickerComponent {
                 !this.elRef.nativeElement.contains(target) &&
                 target !== this.anchorEl &&
                 !this.anchorEl?.contains(target)) {
-                this.ngZone.run(() => this.close());
+                this.ngZone.run(() => { this.close(); });
             }
         };
         document.addEventListener('mousedown', this.clickOutsideHandler);
         this.keydownHandler = (e) => {
             if (e.key === 'Escape' && this.isOpen()) {
                 e.preventDefault();
-                this.ngZone.run(() => this.close());
+                this.ngZone.run(() => { this.close(); });
             }
         };
         document.addEventListener('keydown', this.keydownHandler);
@@ -1698,9 +2351,462 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], emojis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emojis", required: true }] }] } });
 
+/**
+ * Display labels for the named-token palette. Used in tooltips / aria labels;
+ * unknown tokens fall back to a title-cased version of the raw key.
+ */
+const TOKEN_LABELS = {
+    gray: 'Gray',
+    brown: 'Brown',
+    orange: 'Orange',
+    yellow: 'Yellow',
+    green: 'Green',
+    blue: 'Blue',
+    purple: 'Purple',
+    pink: 'Pink',
+    red: 'Red',
+};
+class DomternalNotionColorPickerComponent {
+    editor = input.required(...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    currentTextToken = signal(null, ...(ngDevMode ? [{ debugName: "currentTextToken" }] : /* istanbul ignore next */ []));
+    currentBgToken = signal(null, ...(ngDevMode ? [{ debugName: "currentBgToken" }] : /* istanbul ignore next */ []));
+    palette = signal([], ...(ngDevMode ? [{ debugName: "palette" }] : /* istanbul ignore next */ []));
+    anchorEl = null;
+    // Reference to the picker panel after it has been reparented into
+    // `.dm-editor`. After reparenting `elRef.nativeElement.contains(panel)`
+    // returns false, so any inside-click detection must consult `panelEl`
+    // directly rather than walking up from the component host.
+    panelEl = null;
+    ngZone = inject(NgZone);
+    elRef = inject(ElementRef);
+    eventHandler = null;
+    clickOutsideHandler = null;
+    keydownHandler = null;
+    selectionHandler = null;
+    cleanupFloating = null;
+    constructor() {
+        effect(() => {
+            const editor = this.editor();
+            untracked(() => { this.setupEventListener(editor); });
+        });
+    }
+    ngOnDestroy() {
+        this.cleanup();
+    }
+    tokenLabel(token) {
+        return TOKEN_LABELS[token] ?? token.charAt(0).toUpperCase() + token.slice(1);
+    }
+    applyText(token) {
+        const editor = this.editor();
+        editor.commands.setTextColorToken(token);
+        // Picker stays open so the user can chain picks; close mirrors the bubble
+        // menu (outside-click / Escape / empty selection).
+        this.syncFromSelection();
+    }
+    applyBg(token) {
+        const editor = this.editor();
+        editor.commands.setBackgroundColorToken(token);
+        this.syncFromSelection();
+    }
+    /**
+     * Arrow-key navigation across the 5-column swatch grids. Arrows move
+     * within and across rows, Home/End jump to grid boundaries, Tab leaves
+     * the picker (browser default), Enter/Space activates the focused swatch.
+     * Focus moves sequentially through Text color → Background color so
+     * keyboard users can reach any swatch without re-grabbing Tab.
+     */
+    onPanelKeydown(event) {
+        const cols = 5;
+        // Query off the tracked panel; after reparenting into `.dm-editor` the
+        // swatches are no longer descendants of the component host element.
+        const root = this.panelEl ?? this.elRef.nativeElement;
+        const swatches = Array.from(root.querySelectorAll('.dm-ncp-swatch'));
+        if (!swatches.length)
+            return;
+        const active = document.activeElement;
+        const idx = active ? swatches.indexOf(active) : -1;
+        if (idx === -1)
+            return;
+        let next = idx;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                next = Math.min(idx + 1, swatches.length - 1);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                next = Math.max(idx - 1, 0);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                next = Math.min(idx + cols, swatches.length - 1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                next = Math.max(idx - cols, 0);
+                break;
+            case 'Home':
+                event.preventDefault();
+                next = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                next = swatches.length - 1;
+                break;
+            default:
+                return;
+        }
+        swatches[next]?.focus();
+    }
+    close(opts = {}) {
+        if (!this.isOpen())
+            return;
+        this.cleanupFloating?.();
+        this.cleanupFloating = null;
+        this.isOpen.set(false);
+        this.setStorageOpen(false);
+        this.anchorEl = null;
+        this.panelEl = null;
+        this.removeGlobalListeners();
+        if (opts.refocus) {
+            this.editor().view.focus();
+        }
+    }
+    setupEventListener(editor) {
+        this.cleanup();
+        this.eventHandler = (...args) => {
+            const data = args[0];
+            this.ngZone.run(() => {
+                const anchor = data?.anchorElement;
+                if (!anchor)
+                    return;
+                // Toggle: clicking the same anchor while open closes the picker.
+                if (this.isOpen() && this.anchorEl === anchor) {
+                    this.close({ refocus: true });
+                    return;
+                }
+                this.anchorEl = anchor;
+                this.palette.set(this.readPalette());
+                this.syncFromSelection();
+                this.isOpen.set(true);
+                this.setStorageOpen(true);
+                this.addGlobalListeners();
+                // Position panel against the trigger after Angular renders the DOM.
+                // Focus management (move into the first/active swatch) runs on a
+                // second rAF so positioning + paint has flushed; focusing during the
+                // same frame as mount can race with the bubble-menu's blur handler
+                // and momentarily hide the floating layer Playwright observes.
+                requestAnimationFrame(() => {
+                    const panel = this.elRef.nativeElement.querySelector('.dm-notion-color-picker');
+                    if (panel && this.anchorEl) {
+                        // Reparent into `.dm-editor` so the panel inherits the editor's
+                        // CSS custom properties (`--dm-block-bg-*`, `--dm-block-text-*`,
+                        // surface/border tokens). All variables in @domternal/theme are
+                        // scoped to `.dm-editor`; without reparenting the picker would
+                        // sit as a sibling and render with bare fallbacks.
+                        const editorEl = this.anchorEl.closest('.dm-editor');
+                        if (editorEl && panel.parentElement !== editorEl) {
+                            editorEl.appendChild(panel);
+                        }
+                        this.panelEl = panel;
+                        this.cleanupFloating?.();
+                        this.cleanupFloating = positionFloating(this.anchorEl, panel, {
+                            placement: 'bottom-start',
+                            offsetValue: 4,
+                        });
+                    }
+                    requestAnimationFrame(() => {
+                        if (!this.isOpen())
+                            return; // bailed out between frames
+                        // Use the tracked panel reference: after reparenting into
+                        // `.dm-editor` the panel is no longer a descendant of the
+                        // component host, so `elRef.nativeElement.querySelector` returns
+                        // null and focus never lands.
+                        const p = this.panelEl;
+                        if (!p)
+                            return;
+                        const active = p.querySelector('.dm-ncp-swatch.dm-ncp-active');
+                        const fallback = p.querySelector('.dm-ncp-swatch--text[data-color="null"]');
+                        (active ?? fallback)?.focus({ preventScroll: true });
+                    });
+                });
+            });
+        };
+        editor.on('notionColorOpen', this.eventHandler);
+    }
+    addGlobalListeners() {
+        this.clickOutsideHandler = (e) => {
+            if (!this.isOpen())
+                return;
+            const target = e.target;
+            // Clicks inside the reparented panel or on the anchor (which toggles
+            // via the event handler) must not trigger outside-close. The panel
+            // has been moved out of `elRef.nativeElement` to inherit editor CSS
+            // vars, so we cannot rely on the host element for containment.
+            if (this.panelEl?.contains(target))
+                return;
+            if (this.elRef.nativeElement.contains(target))
+                return;
+            if (this.anchorEl?.contains(target))
+                return;
+            this.ngZone.run(() => { this.close({ refocus: false }); });
+        };
+        document.addEventListener('mousedown', this.clickOutsideHandler);
+        this.keydownHandler = (e) => {
+            if (e.key === 'Escape' && this.isOpen()) {
+                e.preventDefault();
+                this.ngZone.run(() => { this.close({ refocus: true }); });
+            }
+        };
+        document.addEventListener('keydown', this.keydownHandler);
+        // Empty selection (user clicked elsewhere) closes the picker since the
+        // bubble-menu anchor it sits on is about to vanish anyway.
+        this.selectionHandler = () => {
+            if (!this.isOpen())
+                return;
+            // Defensive: bubble menu may have vanished between transactions
+            // (hideout, route change). Positioning against a detached anchor is
+            // a no-op; close instead. Matches React/Vue behaviour.
+            if (this.anchorEl && !this.anchorEl.isConnected) {
+                this.ngZone.run(() => { this.close({ refocus: false }); });
+                return;
+            }
+            if (this.editor().state.selection.empty) {
+                this.ngZone.run(() => { this.close({ refocus: false }); });
+            }
+            else {
+                // Selection changed but stays non-empty (e.g. shift+arrow): refresh
+                // the active-state indicators against the new mark set.
+                this.syncFromSelection();
+            }
+        };
+        this.editor().on('selectionUpdate', this.selectionHandler);
+    }
+    removeGlobalListeners() {
+        if (this.clickOutsideHandler) {
+            document.removeEventListener('mousedown', this.clickOutsideHandler);
+            this.clickOutsideHandler = null;
+        }
+        if (this.keydownHandler) {
+            document.removeEventListener('keydown', this.keydownHandler);
+            this.keydownHandler = null;
+        }
+        if (this.selectionHandler) {
+            this.editor().off('selectionUpdate', this.selectionHandler);
+            this.selectionHandler = null;
+        }
+    }
+    syncFromSelection() {
+        const editor = this.editor();
+        const { selection } = editor.state;
+        // Empty cursor: stored-marks semantics (what newly-typed text inherits).
+        // Non-empty: scan the range for the first text node carrying a textStyle
+        // mark. `$from.nodeAfter` can land on a block (paragraph) when the
+        // selection starts at a block boundary (e.g. AllSelection / selectAll),
+        // so walking text nodes is necessary for correct active-state detection.
+        let mark = null;
+        if (selection.empty) {
+            mark = selection.$from.marks().find((m) => m.type.name === 'textStyle') ?? null;
+        }
+        else {
+            editor.state.doc.nodesBetween(selection.from, selection.to, (node) => {
+                if (mark)
+                    return false;
+                if (node.isText) {
+                    const found = node.marks.find((m) => m.type.name === 'textStyle');
+                    if (found)
+                        mark = found;
+                }
+                return true;
+            });
+        }
+        const attrs = (mark?.attrs ?? {});
+        this.currentTextToken.set(attrs.colorToken ?? null);
+        this.currentBgToken.set(attrs.backgroundColorToken ?? null);
+    }
+    readPalette() {
+        const ext = this.editor().extensionManager.extensions.find((e) => e.name === 'notionColorPicker');
+        const options = (ext?.options ?? null);
+        return options?.palette ? [...options.palette] : [];
+    }
+    getStorage() {
+        const storage = this.editor().storage;
+        const slot = storage['notionColorPicker'];
+        if (!slot || typeof slot !== 'object')
+            return null;
+        return slot;
+    }
+    setStorageOpen(open) {
+        const storage = this.getStorage();
+        if (storage)
+            storage.isOpen = open;
+    }
+    cleanup() {
+        this.removeGlobalListeners();
+        this.cleanupFloating?.();
+        this.cleanupFloating = null;
+        if (this.eventHandler) {
+            const editor = this.editor();
+            editor.off('notionColorOpen', this.eventHandler);
+            this.eventHandler = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalNotionColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DomternalNotionColorPickerComponent, isStandalone: true, selector: "domternal-notion-color-picker", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (isOpen()) {
+      <div
+        class="dm-notion-color-picker"
+        data-show
+        data-dm-editor-ui
+        role="dialog"
+        aria-label="Text and background color"
+        aria-modal="false"
+        (keydown)="onPanelKeydown($event)"
+      >
+        <div class="dm-ncp-section">
+          <div class="dm-ncp-label">Text color</div>
+          <div class="dm-ncp-grid">
+            <button
+              type="button"
+              class="dm-ncp-swatch dm-ncp-swatch--text"
+              [class.dm-ncp-active]="currentTextToken() === null"
+              [attr.aria-pressed]="currentTextToken() === null"
+              data-color="null"
+              title="Default text color"
+              aria-label="Default text color"
+              (mousedown)="$event.preventDefault()"
+              (click)="applyText(null)"
+            ></button>
+            @for (t of palette(); track t) {
+              <button
+                type="button"
+                class="dm-ncp-swatch dm-ncp-swatch--text"
+                [class.dm-ncp-active]="currentTextToken() === t"
+                [attr.aria-pressed]="currentTextToken() === t"
+                [attr.data-color]="t"
+                [title]="tokenLabel(t)"
+                [attr.aria-label]="tokenLabel(t) + ' text'"
+                (mousedown)="$event.preventDefault()"
+                (click)="applyText(t)"
+              ></button>
+            }
+          </div>
+        </div>
+
+        <div class="dm-ncp-section">
+          <div class="dm-ncp-label">Background color</div>
+          <div class="dm-ncp-grid">
+            <button
+              type="button"
+              class="dm-ncp-swatch dm-ncp-swatch--bg"
+              [class.dm-ncp-active]="currentBgToken() === null"
+              [attr.aria-pressed]="currentBgToken() === null"
+              data-color="null"
+              title="Default background"
+              aria-label="Default background"
+              (mousedown)="$event.preventDefault()"
+              (click)="applyBg(null)"
+            ></button>
+            @for (t of palette(); track t) {
+              <button
+                type="button"
+                class="dm-ncp-swatch dm-ncp-swatch--bg"
+                [class.dm-ncp-active]="currentBgToken() === t"
+                [attr.aria-pressed]="currentBgToken() === t"
+                [attr.data-color]="t"
+                [title]="tokenLabel(t) + ' background'"
+                [attr.aria-label]="tokenLabel(t) + ' background'"
+                (mousedown)="$event.preventDefault()"
+                (click)="applyBg(t)"
+              ></button>
+            }
+          </div>
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalNotionColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'domternal-notion-color-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    @if (isOpen()) {
+      <div
+        class="dm-notion-color-picker"
+        data-show
+        data-dm-editor-ui
+        role="dialog"
+        aria-label="Text and background color"
+        aria-modal="false"
+        (keydown)="onPanelKeydown($event)"
+      >
+        <div class="dm-ncp-section">
+          <div class="dm-ncp-label">Text color</div>
+          <div class="dm-ncp-grid">
+            <button
+              type="button"
+              class="dm-ncp-swatch dm-ncp-swatch--text"
+              [class.dm-ncp-active]="currentTextToken() === null"
+              [attr.aria-pressed]="currentTextToken() === null"
+              data-color="null"
+              title="Default text color"
+              aria-label="Default text color"
+              (mousedown)="$event.preventDefault()"
+              (click)="applyText(null)"
+            ></button>
+            @for (t of palette(); track t) {
+              <button
+                type="button"
+                class="dm-ncp-swatch dm-ncp-swatch--text"
+                [class.dm-ncp-active]="currentTextToken() === t"
+                [attr.aria-pressed]="currentTextToken() === t"
+                [attr.data-color]="t"
+                [title]="tokenLabel(t)"
+                [attr.aria-label]="tokenLabel(t) + ' text'"
+                (mousedown)="$event.preventDefault()"
+                (click)="applyText(t)"
+              ></button>
+            }
+          </div>
+        </div>
+
+        <div class="dm-ncp-section">
+          <div class="dm-ncp-label">Background color</div>
+          <div class="dm-ncp-grid">
+            <button
+              type="button"
+              class="dm-ncp-swatch dm-ncp-swatch--bg"
+              [class.dm-ncp-active]="currentBgToken() === null"
+              [attr.aria-pressed]="currentBgToken() === null"
+              data-color="null"
+              title="Default background"
+              aria-label="Default background"
+              (mousedown)="$event.preventDefault()"
+              (click)="applyBg(null)"
+            ></button>
+            @for (t of palette(); track t) {
+              <button
+                type="button"
+                class="dm-ncp-swatch dm-ncp-swatch--bg"
+                [class.dm-ncp-active]="currentBgToken() === t"
+                [attr.aria-pressed]="currentBgToken() === t"
+                [attr.data-color]="t"
+                [title]="tokenLabel(t) + ' background'"
+                [attr.aria-label]="tokenLabel(t) + ' background'"
+                (mousedown)="$event.preventDefault()"
+                (click)="applyBg(t)"
+              ></button>
+            }
+          </div>
+        </div>
+      </div>
+    }
+  `, styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_EXTENSIONS, DomternalBubbleMenuComponent, DomternalEditorComponent, DomternalEmojiPickerComponent, DomternalFloatingMenuComponent, DomternalToolbarComponent };
+export { DEFAULT_EXTENSIONS, DomternalBubbleMenuComponent, DomternalEditorComponent, DomternalEmojiPickerComponent, DomternalFloatingMenuComponent, DomternalNotionColorPickerComponent, DomternalToolbarComponent };
 //# sourceMappingURL=domternal-angular.mjs.map