@ecsplico/editor 2.1.1 → 3.0.0

package/dist/features/ai/use-document-chat.js

@@ -1,6 +1,6 @@
 import { useEditorContext } from "../../vue/context.js";
-import { createDocumentChat } from "./document-chat-model.js";
 import { modelProfiles } from "./model-profiles.js";
+import { createDocumentChat } from "./document-chat-model.js";
 import { useNotifier } from "../../vue/use-notifier.js";
 import { useStoreRef } from "../../vue/store-ref.js";
 import { computed, getCurrentScope, onScopeDispose } from "vue";
@@ -13,7 +13,7 @@ import { computed, getCurrentScope, onScopeDispose } from "vue";
 function useDocumentChat(editor) {
 	const context = useEditorContext();
 	const chat = createDocumentChat({
-		fetch: context.fetch,
+		ai: context.backend.ai,
 		modelRef: modelProfiles(context).modelRef,
 		notify: useNotifier(editor),
 		t: context.t

package/dist/features/ai/use-document-chat.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-document-chat.js","names":[],"sources":["../../../src/features/ai/use-document-chat.ts"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { computed, getCurrentScope, type MaybeRefOrGetter, onScopeDispose } from 'vue'\nimport { useEditorContext } from '../../vue/context'\nimport { useStoreRef } from '../../vue/store-ref'\nimport { useNotifier } from '../../vue/use-notifier'\nimport { createDocumentChat } from './document-chat-model'\nimport { modelProfiles } from './model-profiles'\n\nexport type { AgentOpState } from './agent-op-review'\nexport type { DocumentChatGeneration, DocumentChatTurn } from './document-chat-model'\n\n/**\n * The document chat (see `createDocumentChat`) as Vue refs: a thin hook. Call it during component setup (it injects\n * the editor context); the request stops with the component's scope. The 429 notice goes to `editor`'s surface (else\n * the app's notifier).\n */\nexport function useDocumentChat(editor?: MaybeRefOrGetter<Editor | undefined>) {\n  const context = useEditorContext()\n  const chat = createDocumentChat({ fetch: context.fetch, modelRef: modelProfiles(context).modelRef, notify: useNotifier(editor), t: context.t })\n  const snapshot = useStoreRef(chat.state)\n  if (getCurrentScope()) onScopeDispose(chat.abort)\n  const { ask, abort, reset, decide, reveal, addGeneration, updateGeneration, removeGeneration, clearError } = chat\n  return {\n    /** The underlying model, for flows that act on it (`createAiSidebarFlow`). */\n    model: chat,\n    messages: computed(() => snapshot.value.messages),\n    ops: computed(() => snapshot.value.ops),\n    streaming: computed(() => snapshot.value.streaming),\n    error: computed(() => snapshot.value.error),\n    ask,\n    abort,\n    reset,\n    decide,\n    reveal,\n    addGeneration,\n    updateGeneration,\n    removeGeneration,\n    clearError,\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAgBA,SAAgB,gBAAgB,QAA+C;CAC7E,MAAM,UAAU,iBAAiB;CACjC,MAAM,OAAO,mBAAmB;EAAE,OAAO,QAAQ;EAAO,UAAU,cAAc,OAAO,CAAC,CAAC;EAAU,QAAQ,YAAY,MAAM;EAAG,GAAG,QAAQ;CAAE,CAAC;CAC9I,MAAM,WAAW,YAAY,KAAK,KAAK;CACvC,IAAI,gBAAgB,GAAG,eAAe,KAAK,KAAK;CAChD,MAAM,EAAE,KAAK,OAAO,OAAO,QAAQ,QAAQ,eAAe,kBAAkB,kBAAkB,eAAe;CAC7G,OAAO;;EAEL,OAAO;EACP,UAAU,eAAe,SAAS,MAAM,QAAQ;EAChD,KAAK,eAAe,SAAS,MAAM,GAAG;EACtC,WAAW,eAAe,SAAS,MAAM,SAAS;EAClD,OAAO,eAAe,SAAS,MAAM,KAAK;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"use-document-chat.js","names":[],"sources":["../../../src/features/ai/use-document-chat.ts"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { computed, getCurrentScope, type MaybeRefOrGetter, onScopeDispose } from 'vue'\nimport { useEditorContext } from '../../vue/context'\nimport { useStoreRef } from '../../vue/store-ref'\nimport { useNotifier } from '../../vue/use-notifier'\nimport { createDocumentChat } from './document-chat-model'\nimport { modelProfiles } from './model-profiles'\n\nexport type { AgentOpState } from './agent-op-review'\nexport type { DocumentChatGeneration, DocumentChatTurn } from './document-chat-model'\n\n/**\n * The document chat (see `createDocumentChat`) as Vue refs: a thin hook. Call it during component setup (it injects\n * the editor context); the request stops with the component's scope. The 429 notice goes to `editor`'s surface (else\n * the app's notifier).\n */\nexport function useDocumentChat(editor?: MaybeRefOrGetter<Editor | undefined>) {\n  const context = useEditorContext()\n  const chat = createDocumentChat({ ai: context.backend.ai, modelRef: modelProfiles(context).modelRef, notify: useNotifier(editor), t: context.t })\n  const snapshot = useStoreRef(chat.state)\n  if (getCurrentScope()) onScopeDispose(chat.abort)\n  const { ask, abort, reset, decide, reveal, addGeneration, updateGeneration, removeGeneration, clearError } = chat\n  return {\n    /** The underlying model, for flows that act on it (`createAiSidebarFlow`). */\n    model: chat,\n    messages: computed(() => snapshot.value.messages),\n    ops: computed(() => snapshot.value.ops),\n    streaming: computed(() => snapshot.value.streaming),\n    error: computed(() => snapshot.value.error),\n    ask,\n    abort,\n    reset,\n    decide,\n    reveal,\n    addGeneration,\n    updateGeneration,\n    removeGeneration,\n    clearError,\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAgBA,SAAgB,gBAAgB,QAA+C;CAC7E,MAAM,UAAU,iBAAiB;CACjC,MAAM,OAAO,mBAAmB;EAAE,IAAI,QAAQ,QAAQ;EAAI,UAAU,cAAc,OAAO,CAAC,CAAC;EAAU,QAAQ,YAAY,MAAM;EAAG,GAAG,QAAQ;CAAE,CAAC;CAChJ,MAAM,WAAW,YAAY,KAAK,KAAK;CACvC,IAAI,gBAAgB,GAAG,eAAe,KAAK,KAAK;CAChD,MAAM,EAAE,KAAK,OAAO,OAAO,QAAQ,QAAQ,eAAe,kBAAkB,kBAAkB,eAAe;CAC7G,OAAO;;EAEL,OAAO;EACP,UAAU,eAAe,SAAS,MAAM,QAAQ;EAChD,KAAK,eAAe,SAAS,MAAM,GAAG;EACtC,WAAW,eAAe,SAAS,MAAM,SAAS;EAClD,OAAO,eAAe,SAAS,MAAM,KAAK;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/features/ai/use-model-profiles.d.ts

@@ -1,6 +1,7 @@
 import { ModelSlot } from "../../settings/values.js";
 import "../../settings/index.js";
-import { ModelProfile, ModelRef, UserModelProfile } from "./protocol/models.js";
+import { ModelProfile, ModelRef } from "../../core/backend-types.js";
+import { UserModelProfile } from "./protocol/models.js";
 import "./protocol/index.js";
 import { ComputedRef, Ref } from "vue";
 //#region src/features/ai/use-model-profiles.d.ts

package/dist/features/authors/attribution.d.ts

@@ -1,6 +1,6 @@
+import { ReadonlyStore } from "../../core/store.js";
 import { AuthorColorStyle } from "../../settings/values.js";
 import "../../settings/index.js";
-import { ReadonlyStore } from "../../core/store.js";
 import { AuthorIdentity } from "../../core/feature.js";
 import "../../core/index.js";
 import { Editor, Extension } from "@tiptap/core";

package/dist/features/authors/feature.js

@@ -1,5 +1,5 @@
 import { derived } from "../../core/store.js";
-import { AuthorMark } from "./schema.js";
+import { AuthorMark, authorsSchemaExtensions } from "./schema.js";
 import { AuthorAttribution } from "./attribution.js";
 //#region src/features/authors/feature.ts
 /**
@@ -14,6 +14,8 @@ import { AuthorAttribution } from "./attribution.js";
 function authorsFeatureCore(ui) {
 	return {
 		id: "authors",
+		dimension: "content",
+		schemaExtensions: authorsSchemaExtensions,
 		extensions: (ctx) => [AuthorMark, AuthorAttribution.configure({
 			user: () => ctx.collaboration?.user ?? null,
 			isYSync: (tr) => ctx.anchorResolver?.isYSync(tr) ?? false,
@@ -22,16 +24,15 @@ function authorsFeatureCore(ui) {
 				style: editing.authorColorStyle
 			}), (a, b) => a.enabled === b.enabled && a.style === b.style)
 		})],
-		toolbar: (ctx) => [{
-			id: "collaboration",
-			order: 1010,
-			items: [{
-				id: "authorColors",
-				order: 20,
-				icon: "i-lucide-palette",
-				label: ctx.t("authors.title"),
-				component: ui.toolbarButton
-			}]
+		commands: (ctx) => [{
+			id: "authorColors",
+			toolbar: {
+				group: "collaboration",
+				order: 20
+			},
+			icon: "i-lucide-palette",
+			label: ctx.t("authors.title"),
+			component: ui.toolbarButton
 		}],
 		settingsTabs: (ctx) => [{
 			id: "authors",

package/dist/features/authors/feature.js.map

@@ -1 +1 @@
-{"version":3,"file":"feature.js","names":[],"sources":["../../../src/features/authors/feature.ts"],"sourcesContent":["import type { EditorFeature } from '../../core'\nimport { derived } from '../../core/store'\nimport { AuthorAttribution } from './attribution'\nimport { AuthorMark } from './schema'\n\n/** What a framework binding supplies to the authors feature. */\nexport interface AuthorsUi<C> {\n  /** The „Autorenfarben“ toolbar button (its popover is the `AuthorColorsPanel`). */\n  toolbarButton: C\n  /** The „Autorenfarben“ settings tab component of the framework. */\n  settingsTab: C\n}\n\n/**\n * Who wrote what: every text run the session's user inserts carries an `author` mark (id, name, colour; one author per\n * run, remote changes and Yjs undo/redo keep the original author's mark), the colouring mode (settings\n * `editing.authorColors` and `editing.authorColorStyle`) tints or colours the runs by author, the „Autorenfarben“\n * toolbar button shows the switch, the style and a legend of the document's authors, and the `authors` settings tab\n * holds the same switches. Attribution is inert without a user (`collaboration.user` of the surface), so standalone\n * editors write unmarked text. Remote changes are told apart through the preset's anchor resolver (collab feature),\n * which this feature does not import. The mark has no Markdown form (Markdown export and AI context stay clean).\n */\nexport function authorsFeatureCore<C>(ui: AuthorsUi<C>): EditorFeature<C> {\n  return {\n    id: 'authors',\n    extensions: ctx => [\n      AuthorMark,\n      AuthorAttribution.configure({\n        user: () => ctx.collaboration?.user ?? null,\n        isYSync: tr => ctx.anchorResolver?.isYSync(tr) ?? false,\n        coloring: derived(\n          ctx.settings,\n          ({ editing }) => ({ enabled: editing.authorColors, style: editing.authorColorStyle }),\n          (a, b) => a.enabled === b.enabled && a.style === b.style,\n        ),\n      }),\n    ],\n    toolbar: ctx => [{\n      id: 'collaboration',\n      order: 1010,\n      items: [{ id: 'authorColors', order: 20, icon: 'i-lucide-palette', label: ctx.t('authors.title'), component: ui.toolbarButton }],\n    }],\n    settingsTabs: ctx => [{ id: 'authors', label: ctx.t('authors.tab'), icon: 'i-lucide-palette', component: ui.settingsTab }],\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAsBA,SAAgB,mBAAsB,IAAoC;CACxE,OAAO;EACL,IAAI;EACJ,aAAY,QAAO,CACjB,YACA,kBAAkB,UAAU;GAC1B,YAAY,IAAI,eAAe,QAAQ;GACvC,UAAS,OAAM,IAAI,gBAAgB,QAAQ,EAAE,KAAK;GAClD,UAAU,QACR,IAAI,WACH,EAAE,eAAe;IAAE,SAAS,QAAQ;IAAc,OAAO,QAAQ;GAAiB,KAClF,GAAG,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,KACrD;EACF,CAAC,CACH;EACA,UAAS,QAAO,CAAC;GACf,IAAI;GACJ,OAAO;GACP,OAAO,CAAC;IAAE,IAAI;IAAgB,OAAO;IAAI,MAAM;IAAoB,OAAO,IAAI,EAAE,eAAe;IAAG,WAAW,GAAG;GAAc,CAAC;EACjI,CAAC;EACD,eAAc,QAAO,CAAC;GAAE,IAAI;GAAW,OAAO,IAAI,EAAE,aAAa;GAAG,MAAM;GAAoB,WAAW,GAAG;EAAY,CAAC;CAC3H;AACF"}
+{"version":3,"file":"feature.js","names":[],"sources":["../../../src/features/authors/feature.ts"],"sourcesContent":["import type { EditorFeature } from '../../core'\nimport { derived } from '../../core/store'\nimport { AuthorAttribution } from './attribution'\nimport { AuthorMark, authorsSchemaExtensions } from './schema'\n\n/** What a framework binding supplies to the authors feature. */\nexport interface AuthorsUi<C> {\n  /** The „Autorenfarben“ toolbar button (its popover is the `AuthorColorsPanel`). */\n  toolbarButton: C\n  /** The „Autorenfarben“ settings tab component of the framework. */\n  settingsTab: C\n}\n\n/**\n * Who wrote what: every text run the session's user inserts carries an `author` mark (id, name, colour; one author per\n * run, remote changes and Yjs undo/redo keep the original author's mark), the colouring mode (settings\n * `editing.authorColors` and `editing.authorColorStyle`) tints or colours the runs by author, the „Autorenfarben“\n * toolbar button shows the switch, the style and a legend of the document's authors, and the `authors` settings tab\n * holds the same switches. Attribution is inert without a user (`collaboration.user` of the surface), so standalone\n * editors write unmarked text. Remote changes are told apart through the preset's anchor resolver (collab feature),\n * which this feature does not import. The mark has no Markdown form (Markdown export and AI context stay clean).\n */\nexport function authorsFeatureCore<C>(ui: AuthorsUi<C>): EditorFeature<C> {\n  return {\n    id: 'authors',\n    dimension: 'content',\n    schemaExtensions: authorsSchemaExtensions,\n    extensions: ctx => [\n      AuthorMark,\n      AuthorAttribution.configure({\n        user: () => ctx.collaboration?.user ?? null,\n        isYSync: tr => ctx.anchorResolver?.isYSync(tr) ?? false,\n        coloring: derived(\n          ctx.settings,\n          ({ editing }) => ({ enabled: editing.authorColors, style: editing.authorColorStyle }),\n          (a, b) => a.enabled === b.enabled && a.style === b.style,\n        ),\n      }),\n    ],\n    commands: ctx => [\n      { id: 'authorColors', toolbar: { group: 'collaboration', order: 20 }, icon: 'i-lucide-palette', label: ctx.t('authors.title'), component: ui.toolbarButton },\n    ],\n    settingsTabs: ctx => [{ id: 'authors', label: ctx.t('authors.tab'), icon: 'i-lucide-palette', component: ui.settingsTab }],\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAsBA,SAAgB,mBAAsB,IAAoC;CACxE,OAAO;EACL,IAAI;EACJ,WAAW;EACX,kBAAkB;EAClB,aAAY,QAAO,CACjB,YACA,kBAAkB,UAAU;GAC1B,YAAY,IAAI,eAAe,QAAQ;GACvC,UAAS,OAAM,IAAI,gBAAgB,QAAQ,EAAE,KAAK;GAClD,UAAU,QACR,IAAI,WACH,EAAE,eAAe;IAAE,SAAS,QAAQ;IAAc,OAAO,QAAQ;GAAiB,KAClF,GAAG,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,KACrD;EACF,CAAC,CACH;EACA,WAAU,QAAO,CACf;GAAE,IAAI;GAAgB,SAAS;IAAE,OAAO;IAAiB,OAAO;GAAG;GAAG,MAAM;GAAoB,OAAO,IAAI,EAAE,eAAe;GAAG,WAAW,GAAG;EAAc,CAC7J;EACA,eAAc,QAAO,CAAC;GAAE,IAAI;GAAW,OAAO,IAAI,EAAE,aAAa;GAAG,MAAM;GAAoB,WAAW,GAAG;EAAY,CAAC;CAC3H;AACF"}

package/dist/features/block-ui/block-actions.d.ts

@@ -1,4 +1,4 @@
-import { MenuItem } from "../../core/toolbar.js";
+import { MenuItem } from "../../core/command-types.js";
 import { BlockAction, BlockActionContext, BlockTarget } from "../../core/extension-points.js";
 import "../../core/index.js";
 import { Editor } from "@tiptap/core";
@@ -13,5 +13,26 @@ export interface BlockActionEntry {
 export declare function effectiveTarget(editor: Editor, target: BlockTarget): BlockTarget;
 /** The actions `target` offers; a `menu` action only when its menu has items. */
 export declare function blockActionsFor(editor: Editor, target: BlockTarget, actions: readonly BlockAction[]): BlockActionEntry[];
+/**
+ * Attribute a block's own chrome sets on the elements it shows in its top-right corner (status badges, kind or menu
+ * buttons, ...). The hover bar docks immediately left of them, vertically centred on them, so both read as one row
+ * instead of the bar covering the block's icons. A block without such elements gets the bar at the editor's right edge.
+ */
+export declare const BLOCK_CORNER_ATTR = "data-block-corner";
+/** Where a block's corner elements sit, in viewport coordinates. */
+export interface BlockCorner {
+  /** Left edge of the leftmost corner element. */
+  left: number;
+  /** Vertical centre of the first corner element. */
+  centerY: number;
+  /** The marked elements, for a host that wants to watch them for size changes. */
+  elements: HTMLElement[];
+}
+/**
+ * The corner elements `dom` (a block's node view root) marks with `BLOCK_CORNER_ATTR`, or null when none is shown.
+ * Elements inside a nested block's own node view belong to that block and do not count; neither do hidden ones (no
+ * layout box).
+ */
+export declare function blockCornerOf(dom: HTMLElement): BlockCorner | null;
 //#endregion
 //# sourceMappingURL=block-actions.d.ts.map

package/dist/features/block-ui/block-actions.js

@@ -18,7 +18,7 @@ function blockActionsFor(editor, target, actions) {
 		abilities: abilitiesAt(editor, target.pos, target.node)
 	};
 	return actions.flatMap((action) => {
-		if (!ctx.abilities.has(action.ability) || action.isVisible?.(ctx) === false) return [];
+		if (action.ability && !ctx.abilities.has(action.ability) || action.isVisible?.(ctx) === false) return [];
 		if (!action.menu) return [{
 			action,
 			ctx
@@ -31,7 +31,31 @@ function blockActionsFor(editor, target, actions) {
 		}] : [];
 	});
 }
+/**
+* Attribute a block's own chrome sets on the elements it shows in its top-right corner (status badges, kind or menu
+* buttons, ...). The hover bar docks immediately left of them, vertically centred on them, so both read as one row
+* instead of the bar covering the block's icons. A block without such elements gets the bar at the editor's right edge.
+*/
+const BLOCK_CORNER_ATTR = "data-block-corner";
+/**
+* The corner elements `dom` (a block's node view root) marks with `BLOCK_CORNER_ATTR`, or null when none is shown.
+* Elements inside a nested block's own node view belong to that block and do not count; neither do hidden ones (no
+* layout box).
+*/
+function blockCornerOf(dom) {
+	const elements = [...dom.querySelectorAll(`[${BLOCK_CORNER_ATTR}]`)].filter((element) => {
+		const owner = element.closest("[data-node-view-wrapper]");
+		return !(owner && owner !== dom && dom.contains(owner));
+	});
+	const rects = elements.map((element) => element.getBoundingClientRect()).filter((rect) => rect.width > 0 && rect.height > 0);
+	if (!rects.length) return null;
+	return {
+		left: Math.min(...rects.map((rect) => rect.left)),
+		centerY: rects[0].top + rects[0].height / 2,
+		elements
+	};
+}
 //#endregion
-export { blockActionsFor, effectiveTarget };
+export { BLOCK_CORNER_ATTR, blockActionsFor, blockCornerOf, effectiveTarget };
 
 //# sourceMappingURL=block-actions.js.map

package/dist/features/block-ui/block-actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"block-actions.js","names":[],"sources":["../../../src/features/block-ui/block-actions.ts"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { abilitiesAt, type BlockAction, type BlockActionContext, type BlockTarget, type MenuItem } from '../../core'\nimport { isChromeNode } from '../../core/schema'\n\n/** An action `target` offers, with the context it runs with and, for a `menu` action, its items. */\nexport interface BlockActionEntry {\n  action: BlockAction\n  ctx: BlockActionContext\n  menu?: MenuItem[]\n}\n\n/** Hovering a composite's title/description/tags row addresses the composite itself. */\nexport function effectiveTarget(editor: Editor, target: BlockTarget): BlockTarget {\n  if (!isChromeNode(target.node)) return target\n  const $pos = editor.state.doc.resolve(target.pos)\n  return { node: $pos.parent, pos: $pos.before() }\n}\n\n/** The actions `target` offers; a `menu` action only when its menu has items. */\nexport function blockActionsFor(editor: Editor, target: BlockTarget, actions: readonly BlockAction[]): BlockActionEntry[] {\n  const ctx: BlockActionContext = { ...target, editor, abilities: abilitiesAt(editor, target.pos, target.node) }\n  return actions.flatMap((action): BlockActionEntry[] => {\n    if (!ctx.abilities.has(action.ability) || action.isVisible?.(ctx) === false) return []\n    if (!action.menu) return [{ action, ctx }]\n    const menu = action.menu(ctx)\n    return menu.length ? [{ action, ctx, menu }] : []\n  })\n}\n"],"mappings":";;;;AAYA,SAAgB,gBAAgB,QAAgB,QAAkC;CAChF,IAAI,CAAC,aAAa,OAAO,IAAI,GAAG,OAAO;CACvC,MAAM,OAAO,OAAO,MAAM,IAAI,QAAQ,OAAO,GAAG;CAChD,OAAO;EAAE,MAAM,KAAK;EAAQ,KAAK,KAAK,OAAO;CAAE;AACjD;;AAGA,SAAgB,gBAAgB,QAAgB,QAAqB,SAAqD;CACxH,MAAM,MAA0B;EAAE,GAAG;EAAQ;EAAQ,WAAW,YAAY,QAAQ,OAAO,KAAK,OAAO,IAAI;CAAE;CAC7G,OAAO,QAAQ,SAAS,WAA+B;EACrD,IAAI,CAAC,IAAI,UAAU,IAAI,OAAO,OAAO,KAAK,OAAO,YAAY,GAAG,MAAM,OAAO,OAAO,CAAC;EACrF,IAAI,CAAC,OAAO,MAAM,OAAO,CAAC;GAAE;GAAQ;EAAI,CAAC;EACzC,MAAM,OAAO,OAAO,KAAK,GAAG;EAC5B,OAAO,KAAK,SAAS,CAAC;GAAE;GAAQ;GAAK;EAAK,CAAC,IAAI,CAAC;CAClD,CAAC;AACH"}
+{"version":3,"file":"block-actions.js","names":[],"sources":["../../../src/features/block-ui/block-actions.ts"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { abilitiesAt, type BlockAction, type BlockActionContext, type BlockTarget, type MenuItem } from '../../core'\nimport { isChromeNode } from '../../core/schema'\n\n/** An action `target` offers, with the context it runs with and, for a `menu` action, its items. */\nexport interface BlockActionEntry {\n  action: BlockAction\n  ctx: BlockActionContext\n  menu?: MenuItem[]\n}\n\n/** Hovering a composite's title/description/tags row addresses the composite itself. */\nexport function effectiveTarget(editor: Editor, target: BlockTarget): BlockTarget {\n  if (!isChromeNode(target.node)) return target\n  const $pos = editor.state.doc.resolve(target.pos)\n  return { node: $pos.parent, pos: $pos.before() }\n}\n\n/** The actions `target` offers; a `menu` action only when its menu has items. */\nexport function blockActionsFor(editor: Editor, target: BlockTarget, actions: readonly BlockAction[]): BlockActionEntry[] {\n  const ctx: BlockActionContext = { ...target, editor, abilities: abilitiesAt(editor, target.pos, target.node) }\n  return actions.flatMap((action): BlockActionEntry[] => {\n    if ((action.ability && !ctx.abilities.has(action.ability)) || action.isVisible?.(ctx) === false) return []\n    if (!action.menu) return [{ action, ctx }]\n    const menu = action.menu(ctx)\n    return menu.length ? [{ action, ctx, menu }] : []\n  })\n}\n\n/**\n * Attribute a block's own chrome sets on the elements it shows in its top-right corner (status badges, kind or menu\n * buttons, ...). The hover bar docks immediately left of them, vertically centred on them, so both read as one row\n * instead of the bar covering the block's icons. A block without such elements gets the bar at the editor's right edge.\n */\nexport const BLOCK_CORNER_ATTR = 'data-block-corner'\n\n/** Where a block's corner elements sit, in viewport coordinates. */\nexport interface BlockCorner {\n  /** Left edge of the leftmost corner element. */\n  left: number\n  /** Vertical centre of the first corner element. */\n  centerY: number\n  /** The marked elements, for a host that wants to watch them for size changes. */\n  elements: HTMLElement[]\n}\n\n/**\n * The corner elements `dom` (a block's node view root) marks with `BLOCK_CORNER_ATTR`, or null when none is shown.\n * Elements inside a nested block's own node view belong to that block and do not count; neither do hidden ones (no\n * layout box).\n */\nexport function blockCornerOf(dom: HTMLElement): BlockCorner | null {\n  const elements = [...dom.querySelectorAll<HTMLElement>(`[${BLOCK_CORNER_ATTR}]`)].filter((element) => {\n    const owner = element.closest('[data-node-view-wrapper]')\n    return !(owner && owner !== dom && dom.contains(owner))\n  })\n  const rects = elements.map(element => element.getBoundingClientRect()).filter(rect => rect.width > 0 && rect.height > 0)\n  if (!rects.length) return null\n  return {\n    left: Math.min(...rects.map(rect => rect.left)),\n    centerY: rects[0]!.top + rects[0]!.height / 2,\n    elements,\n  }\n}\n"],"mappings":";;;;AAYA,SAAgB,gBAAgB,QAAgB,QAAkC;CAChF,IAAI,CAAC,aAAa,OAAO,IAAI,GAAG,OAAO;CACvC,MAAM,OAAO,OAAO,MAAM,IAAI,QAAQ,OAAO,GAAG;CAChD,OAAO;EAAE,MAAM,KAAK;EAAQ,KAAK,KAAK,OAAO;CAAE;AACjD;;AAGA,SAAgB,gBAAgB,QAAgB,QAAqB,SAAqD;CACxH,MAAM,MAA0B;EAAE,GAAG;EAAQ;EAAQ,WAAW,YAAY,QAAQ,OAAO,KAAK,OAAO,IAAI;CAAE;CAC7G,OAAO,QAAQ,SAAS,WAA+B;EACrD,IAAK,OAAO,WAAW,CAAC,IAAI,UAAU,IAAI,OAAO,OAAO,KAAM,OAAO,YAAY,GAAG,MAAM,OAAO,OAAO,CAAC;EACzG,IAAI,CAAC,OAAO,MAAM,OAAO,CAAC;GAAE;GAAQ;EAAI,CAAC;EACzC,MAAM,OAAO,OAAO,KAAK,GAAG;EAC5B,OAAO,KAAK,SAAS,CAAC;GAAE;GAAQ;GAAK;EAAK,CAAC,IAAI,CAAC;CAClD,CAAC;AACH;;;;;;AAOA,MAAa,oBAAoB;;;;;;AAiBjC,SAAgB,cAAc,KAAsC;CAClE,MAAM,WAAW,CAAC,GAAG,IAAI,iBAA8B,IAAI,kBAAkB,EAAE,CAAC,CAAC,CAAC,QAAQ,YAAY;EACpG,MAAM,QAAQ,QAAQ,QAAQ,0BAA0B;EACxD,OAAO,EAAE,SAAS,UAAU,OAAO,IAAI,SAAS,KAAK;CACvD,CAAC;CACD,MAAM,QAAQ,SAAS,KAAI,YAAW,QAAQ,sBAAsB,CAAC,CAAC,CAAC,QAAO,SAAQ,KAAK,QAAQ,KAAK,KAAK,SAAS,CAAC;CACvH,IAAI,CAAC,MAAM,QAAQ,OAAO;CAC1B,OAAO;EACL,MAAM,KAAK,IAAI,GAAG,MAAM,KAAI,SAAQ,KAAK,IAAI,CAAC;EAC9C,SAAS,MAAM,EAAE,CAAE,MAAM,MAAM,EAAE,CAAE,SAAS;EAC5C;CACF;AACF"}

package/dist/features/block-ui/components/BlockActionsOverlay.js

@@ -1,14 +1,20 @@
 import { useUiKit } from "../../../vue/kit/use-ui-kit.js";
-import { blockActionsFor, effectiveTarget } from "../block-actions.js";
+import { blockActionsFor, blockCornerOf, effectiveTarget } from "../block-actions.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, unref, useTemplateRef, watch, withCtx, withModifiers } from "vue";
 //#region src/features/block-ui/components/BlockActionsOverlay.vue
 /** Gap between the bar and the editor's right edge. */
 const EDGE_GUTTER = 8;
+/** Gap between the bar and the block's own corner elements it docks next to. */
+const CORNER_GAP = 4;
 /**
 * The hover actions of a block, right-aligned at the editor's text column (the drag handle sits on the block's left and
 * targets the same block). Positioned absolutely inside `host`, a `relative` element around the editor; the composite
 * chrome (title, description, tags) addresses the composite (`effectiveTarget`). The bar is hidden while the editor is
 * read-only. `menu` actions open a dropdown of their items instead of running on click.
+*
+* A block that shows icons of its own in its top-right corner marks them with `data-block-corner` (`BLOCK_CORNER_ATTR`):
+* the bar then docks immediately left of them, centred on their row, instead of covering them. Without such elements
+* it sits at the editor's right edge, aligned to the block's top.
 */
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	__name: "BlockActionsOverlay",
@@ -43,13 +49,33 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const items = computed(() => block.value ? blockActionsFor(props.editor, block.value, props.actions) : []);
 		const top = ref(0);
 		const right = ref(0);
+		/** Whether the bar is docked next to the block's corner elements: `top` is then their vertical centre. */
+		const docked = ref(false);
 		const measured = ref(false);
+		let watched = [];
+		function watchCorner(elements) {
+			if (elements.length === watched.length && elements.every((element, index) => element === watched[index])) return;
+			for (const element of watched) resizeObserver?.unobserve(element);
+			watched = elements;
+			for (const element of watched) resizeObserver?.observe(element);
+		}
 		function measure() {
 			const { editor, host } = props;
 			const dom = block.value && host && !editor.isDestroyed ? editor.view.nodeDOM(block.value.pos) : null;
 			measured.value = dom instanceof HTMLElement;
-			if (!(dom instanceof HTMLElement) || !host) return;
+			if (!(dom instanceof HTMLElement) || !host) {
+				watchCorner([]);
+				return;
+			}
 			const hostRect = host.getBoundingClientRect();
+			const corner = blockCornerOf(dom);
+			watchCorner(corner?.elements ?? []);
+			docked.value = corner !== null;
+			if (corner) {
+				top.value = corner.centerY - hostRect.top;
+				right.value = hostRect.right - corner.left + CORNER_GAP;
+				return;
+			}
 			const rect = dom.getBoundingClientRect();
 			top.value = rect.top - hostRect.top + 2;
 			right.value = hostRect.right - editor.view.dom.getBoundingClientRect().right + EDGE_GUTTER;
@@ -76,21 +102,24 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			window.addEventListener("scroll", measure, true);
 			resizeObserver = new ResizeObserver(measure);
 			resizeObserver.observe(props.editor.view.dom);
+			for (const element of watched) resizeObserver.observe(element);
 		});
 		onBeforeUnmount(() => {
 			window.removeEventListener("resize", measure);
 			window.removeEventListener("scroll", measure, true);
 			resizeObserver?.disconnect();
+			watched = [];
 		});
 		return (_ctx, _cache) => {
 			return visible.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				ref_key: "root",
 				ref: root,
-				class: "block-actions absolute z-10 flex gap-0.5 rounded-md border border-[var(--sk-border)] bg-[var(--sk-bg)] p-0.5 shadow-sm",
+				class: "block-actions absolute z-10 flex gap-0.5 rounded-md bg-[var(--sk-bg)] p-0.5",
 				style: normalizeStyle({
 					top: `${top.value}px`,
-					right: `${right.value}px`
+					right: `${right.value}px`,
+					transform: docked.value ? "translateY(-50%)" : void 0
 				}),
 				onMouseenter: _cache[2] || (_cache[2] = ($event) => emit("hover", true)),
 				onMouseleave: onMouseLeave

package/dist/features/block-ui/components/BlockActionsOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlockActionsOverlay.js","names":["_openBlock","_createElementBlock","_normalizeStyle","_Fragment","_renderList","_createBlock","_unref","_withCtx","_createVNode","_withModifiers","_createCommentVNode"],"sources":["../../../../src/features/block-ui/components/BlockActionsOverlay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useUiKit } from '../../../vue/kit/use-ui-kit'\nimport type { Editor } from '@tiptap/vue-3'\nimport { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'\nimport type { BlockAction, BlockTarget } from '../../../core'\nimport { blockActionsFor, effectiveTarget } from '../block-actions'\n\n/** Gap between the bar and the editor's right edge. */\nconst EDGE_GUTTER = 8\n\n/**\n * The hover actions of a block, right-aligned at the editor's text column (the drag handle sits on the block's left and\n * targets the same block). Positioned absolutely inside `host`, a `relative` element around the editor; the composite\n * chrome (title, description, tags) addresses the composite (`effectiveTarget`). The bar is hidden while the editor is\n * read-only. `menu` actions open a dropdown of their items instead of running on click.\n */\nconst props = defineProps<{\n  editor: Editor\n  target: BlockTarget | null\n  actions: readonly BlockAction[]\n  host: HTMLElement | null\n}>()\n\nconst { Button: UButton, DropdownMenu: UDropdownMenu, Tooltip: UTooltip } = useUiKit()\n\nconst emit = defineEmits<{ hover: [hovered: boolean] }>()\n\n/** The target in the current document; null once its position holds something else (deleted, replaced). */\nconst block = computed<BlockTarget | null>(() => {\n  const { editor, target } = props\n  if (!target || editor.isDestroyed) return null\n  const { doc } = editor.state\n  if (target.pos < 0 || target.pos >= doc.content.size) return null\n  const node = doc.nodeAt(target.pos)\n  if (!node || node.type !== target.node.type) return null\n  return effectiveTarget(editor, { node, pos: target.pos })\n})\n\n// Reading `state` makes the flag follow `setEditable` (which dispatches a transaction).\nconst editable = computed(() => {\n  void props.editor.state\n  return props.editor.isEditable\n})\n\nconst items = computed(() => (block.value ? blockActionsFor(props.editor, block.value, props.actions) : []))\n\nconst top = ref(0)\nconst right = ref(0)\nconst measured = ref(false)\n\nfunction measure() {\n  const { editor, host } = props\n  const dom = block.value && host && !editor.isDestroyed ? editor.view.nodeDOM(block.value.pos) : null\n  measured.value = dom instanceof HTMLElement\n  if (!(dom instanceof HTMLElement) || !host) return\n  const hostRect = host.getBoundingClientRect()\n  const rect = dom.getBoundingClientRect()\n  top.value = rect.top - hostRect.top + 2\n  right.value = hostRect.right - editor.view.dom.getBoundingClientRect().right + EDGE_GUTTER\n}\n\nwatch([block, () => props.editor.state], measure, { flush: 'post' })\n\nconst visible = computed(() => editable.value && items.value.length > 0 && measured.value)\n\n// An open action menu is rendered outside the overlay (portal): the overlay counts as hovered until the menu closes.\nconst root = useTemplateRef<HTMLElement>('root')\nconst menuOpen = ref(false)\nfunction onMenuOpen(open: boolean) {\n  menuOpen.value = open\n  emit('hover', open || !!root.value?.matches(':hover'))\n}\nfunction onMouseLeave() {\n  if (!menuOpen.value) emit('hover', false)\n}\n\n// A vanishing overlay sends no mouseleave: report it, so the host does not keep waiting for one.\nwatch(visible, (value) => {\n  if (value) return\n  menuOpen.value = false\n  emit('hover', false)\n})\n\n// The bar follows the editor's right edge when the column resizes without the window doing so.\nlet resizeObserver: ResizeObserver | undefined\nonMounted(() => {\n  window.addEventListener('resize', measure)\n  window.addEventListener('scroll', measure, true)\n  resizeObserver = new ResizeObserver(measure)\n  resizeObserver.observe(props.editor.view.dom)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('resize', measure)\n  window.removeEventListener('scroll', measure, true)\n  resizeObserver?.disconnect()\n})\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    ref=\"root\"\n    class=\"block-actions absolute z-10 flex gap-0.5 rounded-md border border-[var(--sk-border)] bg-[var(--sk-bg)] p-0.5 shadow-sm\"\n    :style=\"{ top: `${top}px`, right: `${right}px` }\"\n    @mouseenter=\"emit('hover', true)\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <template v-for=\"entry in items\" :key=\"entry.action.id\">\n      <UDropdownMenu v-if=\"entry.menu\" :items=\"entry.menu\" :content=\"{ align: 'end' }\" @update:open=\"onMenuOpen\">\n        <UTooltip :text=\"entry.action.label\">\n          <UButton\n            size=\"xs\"\n            color=\"neutral\"\n            variant=\"ghost\"\n            :icon=\"entry.action.icon\"\n            :aria-label=\"entry.action.label\"\n            @mousedown.prevent\n          />\n        </UTooltip>\n      </UDropdownMenu>\n      <UTooltip v-else :text=\"entry.action.label\">\n        <UButton\n          size=\"xs\"\n          color=\"neutral\"\n          variant=\"ghost\"\n          :icon=\"entry.action.icon\"\n          :aria-label=\"entry.action.label\"\n          @mousedown.prevent\n          @click=\"entry.action.run?.(entry.ctx)\"\n        />\n      </UTooltip>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"BlockActionsOverlay.js","names":["_openBlock","_createElementBlock","_normalizeStyle","_Fragment","_renderList","_createBlock","_unref","_withCtx","_createVNode","_withModifiers","_createCommentVNode"],"sources":["../../../../src/features/block-ui/components/BlockActionsOverlay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useUiKit } from '../../../vue/kit/use-ui-kit'\nimport type { Editor } from '@tiptap/vue-3'\nimport { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'\nimport type { BlockAction, BlockTarget } from '../../../core'\nimport { blockActionsFor, blockCornerOf, effectiveTarget } from '../block-actions'\n\n/** Gap between the bar and the editor's right edge. */\nconst EDGE_GUTTER = 8\n/** Gap between the bar and the block's own corner elements it docks next to. */\nconst CORNER_GAP = 4\n\n/**\n * The hover actions of a block, right-aligned at the editor's text column (the drag handle sits on the block's left and\n * targets the same block). Positioned absolutely inside `host`, a `relative` element around the editor; the composite\n * chrome (title, description, tags) addresses the composite (`effectiveTarget`). The bar is hidden while the editor is\n * read-only. `menu` actions open a dropdown of their items instead of running on click.\n *\n * A block that shows icons of its own in its top-right corner marks them with `data-block-corner` (`BLOCK_CORNER_ATTR`):\n * the bar then docks immediately left of them, centred on their row, instead of covering them. Without such elements\n * it sits at the editor's right edge, aligned to the block's top.\n */\nconst props = defineProps<{\n  editor: Editor\n  target: BlockTarget | null\n  actions: readonly BlockAction[]\n  host: HTMLElement | null\n}>()\n\nconst { Button: UButton, DropdownMenu: UDropdownMenu, Tooltip: UTooltip } = useUiKit()\n\nconst emit = defineEmits<{ hover: [hovered: boolean] }>()\n\n/** The target in the current document; null once its position holds something else (deleted, replaced). */\nconst block = computed<BlockTarget | null>(() => {\n  const { editor, target } = props\n  if (!target || editor.isDestroyed) return null\n  const { doc } = editor.state\n  if (target.pos < 0 || target.pos >= doc.content.size) return null\n  const node = doc.nodeAt(target.pos)\n  if (!node || node.type !== target.node.type) return null\n  return effectiveTarget(editor, { node, pos: target.pos })\n})\n\n// Reading `state` makes the flag follow `setEditable` (which dispatches a transaction).\nconst editable = computed(() => {\n  void props.editor.state\n  return props.editor.isEditable\n})\n\nconst items = computed(() => (block.value ? blockActionsFor(props.editor, block.value, props.actions) : []))\n\nconst top = ref(0)\nconst right = ref(0)\n/** Whether the bar is docked next to the block's corner elements: `top` is then their vertical centre. */\nconst docked = ref(false)\nconst measured = ref(false)\n\nlet watched: HTMLElement[] = []\n// The corner elements can change size (a badge appears) without the document changing: watch the current ones.\nfunction watchCorner(elements: HTMLElement[]) {\n  if (elements.length === watched.length && elements.every((element, index) => element === watched[index])) return\n  for (const element of watched) resizeObserver?.unobserve(element)\n  watched = elements\n  for (const element of watched) resizeObserver?.observe(element)\n}\n\nfunction measure() {\n  const { editor, host } = props\n  const dom = block.value && host && !editor.isDestroyed ? editor.view.nodeDOM(block.value.pos) : null\n  measured.value = dom instanceof HTMLElement\n  if (!(dom instanceof HTMLElement) || !host) {\n    watchCorner([])\n    return\n  }\n  const hostRect = host.getBoundingClientRect()\n  const corner = blockCornerOf(dom)\n  watchCorner(corner?.elements ?? [])\n  docked.value = corner !== null\n  if (corner) {\n    top.value = corner.centerY - hostRect.top\n    right.value = hostRect.right - corner.left + CORNER_GAP\n    return\n  }\n  const rect = dom.getBoundingClientRect()\n  top.value = rect.top - hostRect.top + 2\n  right.value = hostRect.right - editor.view.dom.getBoundingClientRect().right + EDGE_GUTTER\n}\n\nwatch([block, () => props.editor.state], measure, { flush: 'post' })\n\nconst visible = computed(() => editable.value && items.value.length > 0 && measured.value)\n\n// An open action menu is rendered outside the overlay (portal): the overlay counts as hovered until the menu closes.\nconst root = useTemplateRef<HTMLElement>('root')\nconst menuOpen = ref(false)\nfunction onMenuOpen(open: boolean) {\n  menuOpen.value = open\n  emit('hover', open || !!root.value?.matches(':hover'))\n}\nfunction onMouseLeave() {\n  if (!menuOpen.value) emit('hover', false)\n}\n\n// A vanishing overlay sends no mouseleave: report it, so the host does not keep waiting for one.\nwatch(visible, (value) => {\n  if (value) return\n  menuOpen.value = false\n  emit('hover', false)\n})\n\n// The bar follows the editor's right edge when the column resizes without the window doing so.\nlet resizeObserver: ResizeObserver | undefined\nonMounted(() => {\n  window.addEventListener('resize', measure)\n  window.addEventListener('scroll', measure, true)\n  resizeObserver = new ResizeObserver(measure)\n  resizeObserver.observe(props.editor.view.dom)\n  for (const element of watched) resizeObserver.observe(element)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('resize', measure)\n  window.removeEventListener('scroll', measure, true)\n  resizeObserver?.disconnect()\n  watched = []\n})\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    ref=\"root\"\n    class=\"block-actions absolute z-10 flex gap-0.5 rounded-md bg-[var(--sk-bg)] p-0.5\"\n    :style=\"{ top: `${top}px`, right: `${right}px`, transform: docked ? 'translateY(-50%)' : undefined }\"\n    @mouseenter=\"emit('hover', true)\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <template v-for=\"entry in items\" :key=\"entry.action.id\">\n      <UDropdownMenu v-if=\"entry.menu\" :items=\"entry.menu\" :content=\"{ align: 'end' }\" @update:open=\"onMenuOpen\">\n        <UTooltip :text=\"entry.action.label\">\n          <UButton\n            size=\"xs\"\n            color=\"neutral\"\n            variant=\"ghost\"\n            :icon=\"entry.action.icon\"\n            :aria-label=\"entry.action.label\"\n            @mousedown.prevent\n          />\n        </UTooltip>\n      </UDropdownMenu>\n      <UTooltip v-else :text=\"entry.action.label\">\n        <UButton\n          size=\"xs\"\n          color=\"neutral\"\n          variant=\"ghost\"\n          :icon=\"entry.action.icon\"\n          :aria-label=\"entry.action.label\"\n          @mousedown.prevent\n          @click=\"entry.action.run?.(entry.ctx)\"\n        />\n      </UTooltip>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/features/block-ui/components/BlockActionsOverlay.vue.d.ts

@@ -7,6 +7,10 @@ import { Editor } from "@tiptap/vue-3";
  * targets the same block). Positioned absolutely inside `host`, a `relative` element around the editor; the composite
  * chrome (title, description, tags) addresses the composite (`effectiveTarget`). The bar is hidden while the editor is
  * read-only. `menu` actions open a dropdown of their items instead of running on click.
+ *
+ * A block that shows icons of its own in its top-right corner marks them with `data-block-corner` (`BLOCK_CORNER_ATTR`):
+ * the bar then docks immediately left of them, centred on their row, instead of covering them. Without such elements
+ * it sits at the editor's right edge, aligned to the block's top.
  */
 type __VLS_Props = {
   editor: Editor;

package/dist/features/block-ui/components/BlockUi.js

@@ -1,5 +1,5 @@
-import { isChromeNode } from "../../../core/schema/node-flags.js";
 import { editorEntryOf } from "../../../core/editor-ui.js";
+import { isChromeNode } from "../../../core/schema/node-flags.js";
 import { useUiKit } from "../../../vue/kit/use-ui-kit.js";
 import { useEditorSettings } from "../../../vue/settings.js";
 import { firstLineCenterShift, gutterShiftOf, handleLeftOf, hasKindIcon } from "../handle-geometry.js";

package/dist/features/block-ui/feature.js

@@ -13,6 +13,7 @@ import { NodeRange } from "@tiptap/extension-node-range";
 function blockUiFeatureCore(ui) {
 	return {
 		id: "block-ui",
+		dimension: "interaction",
 		extensions: () => [NodeRange],
 		overlays: [ui.overlay]
 	};

package/dist/features/block-ui/feature.js.map

@@ -1 +1 @@
-{"version":3,"file":"feature.js","names":[],"sources":["../../../src/features/block-ui/feature.ts"],"sourcesContent":["import { NodeRange } from '@tiptap/extension-node-range'\nimport type { EditorFeature } from '../../core'\n\n/** What a framework binding supplies to the block-ui feature. */\nexport interface BlockUiUi<C> {\n  /** The block UI of an editor (drag handle, permanent handles, hover actions); mounted beside the editor content. */\n  overlay: C\n}\n\n/**\n * Block-level UI beside the editor content: the drag handle (upstream `@tiptap/extension-drag-handle`) with hover\n * targeting, and the hover actions of the targeted block (features' and host block actions, `BlockActionsOverlay`).\n * Also adds block-range selection (`NodeRange`: Mod+drag, Shift+↑/↓). Composite chrome (`editorChrome` nodes) targets its\n * parent block.\n *\n * Opt-in: the simple editor has none of it. Installing a binding also bundles the drag handle's transitive collaboration\n * support code (its upstream package imports `@tiptap/extension-collaboration` and `y-tiptap`), even without a live\n * collaboration session.\n */\nexport function blockUiFeatureCore<C>(ui: BlockUiUi<C>): EditorFeature<C> {\n  return {\n    id: 'block-ui',\n    extensions: () => [NodeRange],\n    overlays: [ui.overlay],\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAmBA,SAAgB,mBAAsB,IAAoC;CACxE,OAAO;EACL,IAAI;EACJ,kBAAkB,CAAC,SAAS;EAC5B,UAAU,CAAC,GAAG,OAAO;CACvB;AACF"}
+{"version":3,"file":"feature.js","names":[],"sources":["../../../src/features/block-ui/feature.ts"],"sourcesContent":["import { NodeRange } from '@tiptap/extension-node-range'\nimport type { EditorFeature } from '../../core'\n\n/** What a framework binding supplies to the block-ui feature. */\nexport interface BlockUiUi<C> {\n  /** The block UI of an editor (drag handle, permanent handles, hover actions); mounted beside the editor content. */\n  overlay: C\n}\n\n/**\n * Block-level UI beside the editor content: the drag handle (upstream `@tiptap/extension-drag-handle`) with hover\n * targeting, and the hover actions of the targeted block (features' and host block actions, `BlockActionsOverlay`).\n * Also adds block-range selection (`NodeRange`: Mod+drag, Shift+↑/↓). Composite chrome (`editorChrome` nodes) targets its\n * parent block.\n *\n * Opt-in: the simple editor has none of it. Installing a binding also bundles the drag handle's transitive collaboration\n * support code (its upstream package imports `@tiptap/extension-collaboration` and `y-tiptap`), even without a live\n * collaboration session.\n */\nexport function blockUiFeatureCore<C>(ui: BlockUiUi<C>): EditorFeature<C> {\n  return {\n    id: 'block-ui',\n    dimension: 'interaction',\n    extensions: () => [NodeRange],\n    overlays: [ui.overlay],\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAmBA,SAAgB,mBAAsB,IAAoC;CACxE,OAAO;EACL,IAAI;EACJ,WAAW;EACX,kBAAkB,CAAC,SAAS;EAC5B,UAAU,CAAC,GAAG,OAAO;CACvB;AACF"}

package/dist/features/block-ui/index.d.ts

@@ -1,3 +1,3 @@
-import { BlockActionEntry, blockActionsFor, effectiveTarget } from "./block-actions.js";
+import { BLOCK_CORNER_ATTR, BlockActionEntry, BlockCorner, blockActionsFor, blockCornerOf, effectiveTarget } from "./block-actions.js";
 import { BlockUiUi, blockUiFeatureCore } from "./feature.js";
-export { type BlockActionEntry, type BlockUiUi, blockActionsFor, blockUiFeatureCore, effectiveTarget };
+export { BLOCK_CORNER_ATTR, type BlockActionEntry, type BlockCorner, type BlockUiUi, blockActionsFor, blockCornerOf, blockUiFeatureCore, effectiveTarget };

package/dist/features/block-ui/index.js

@@ -1,3 +1,3 @@
 import { blockUiFeatureCore } from "./feature.js";
-import { blockActionsFor, effectiveTarget } from "./block-actions.js";
-export { blockActionsFor, blockUiFeatureCore, effectiveTarget };
+import { BLOCK_CORNER_ATTR, blockActionsFor, blockCornerOf, effectiveTarget } from "./block-actions.js";
+export { BLOCK_CORNER_ATTR, blockActionsFor, blockCornerOf, blockUiFeatureCore, effectiveTarget };

package/dist/features/block-ui/react/BlockActionsOverlay.d.ts

@@ -7,6 +7,10 @@ import { Editor } from "@tiptap/core";
  * targets the same block). Positioned absolutely inside `host`, a `relative` element around the editor; the composite
  * chrome (title, description, tags) addresses the composite (`effectiveTarget`). The bar is hidden while the editor is
  * read-only. `menu` actions open a dropdown of their items instead of running on click.
+ *
+ * A block that shows icons of its own in its top-right corner marks them with `data-block-corner` (`BLOCK_CORNER_ATTR`):
+ * the bar then docks immediately left of them, centred on their row, instead of covering them. Without such elements
+ * it sits at the editor's right edge, aligned to the block's top.
  */
 export declare function BlockActionsOverlay({ editor, target, actions, host, onHover }: {
   editor: Editor;

package/dist/features/block-ui/react/BlockActionsOverlay.js

@@ -2,17 +2,23 @@ import { Icon } from "../../../react/Icon.js";
 import { Button } from "../../../react/ui/button.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../../react/ui/tooltip.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../../../react/ui/dropdown-menu.js";
-import { blockActionsFor, effectiveTarget } from "../block-actions.js";
+import { blockActionsFor, blockCornerOf, effectiveTarget } from "../block-actions.js";
 import { useEffect, useLayoutEffect, useReducer, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/features/block-ui/react/BlockActionsOverlay.tsx
 /** Gap between the bar and the editor's right edge. */
 const EDGE_GUTTER = 8;
+/** Gap between the bar and the block's own corner elements it docks next to. */
+const CORNER_GAP = 4;
 /**
 * The hover actions of a block, right-aligned at the editor's text column (the drag handle sits on the block's left and
 * targets the same block). Positioned absolutely inside `host`, a `relative` element around the editor; the composite
 * chrome (title, description, tags) addresses the composite (`effectiveTarget`). The bar is hidden while the editor is
 * read-only. `menu` actions open a dropdown of their items instead of running on click.
+*
+* A block that shows icons of its own in its top-right corner marks them with `data-block-corner` (`BLOCK_CORNER_ATTR`):
+* the bar then docks immediately left of them, centred on their row, instead of covering them. Without such elements
+* it sits at the editor's right edge, aligned to the block's top.
 */
 function BlockActionsOverlay({ editor, target, actions, host, onHover }) {
 	const [, rerender] = useReducer((count) => count + 1, 0);
@@ -35,19 +41,35 @@ function BlockActionsOverlay({ editor, target, actions, host, onHover }) {
 	})();
 	const items = block && editor.isEditable ? blockActionsFor(editor, block, actions) : [];
 	const [place, setPlace] = useState(null);
+	const resizeObserver = useRef(null);
+	const watched = useRef([]);
+	const watchCorner = (elements) => {
+		const current = watched.current;
+		if (elements.length === current.length && elements.every((element, index) => element === current[index])) return;
+		for (const element of current) resizeObserver.current?.unobserve(element);
+		watched.current = elements;
+		for (const element of elements) resizeObserver.current?.observe(element);
+	};
 	const measure = () => {
 		const dom = block && host && !editor.isDestroyed ? editor.view.nodeDOM(block.pos) : null;
 		if (!(dom instanceof HTMLElement) || !host) {
+			watchCorner([]);
 			setPlace(null);
 			return;
 		}
 		const hostRect = host.getBoundingClientRect();
-		const top = dom.getBoundingClientRect().top - hostRect.top + 2;
-		const right = hostRect.right - editor.view.dom.getBoundingClientRect().right + EDGE_GUTTER;
-		setPlace((previous) => previous && previous.top === top && previous.right === right ? previous : {
-			top,
-			right
-		});
+		const corner = blockCornerOf(dom);
+		watchCorner(corner?.elements ?? []);
+		const next = corner ? {
+			top: corner.centerY - hostRect.top,
+			right: hostRect.right - corner.left + CORNER_GAP,
+			docked: true
+		} : {
+			top: dom.getBoundingClientRect().top - hostRect.top + 2,
+			right: hostRect.right - editor.view.dom.getBoundingClientRect().right + EDGE_GUTTER,
+			docked: false
+		};
+		setPlace((previous) => previous && previous.top === next.top && previous.right === next.right && previous.docked === next.docked ? previous : next);
 	};
 	useLayoutEffect(measure);
 	const visible = editor.isEditable && items.length > 0 && place !== null;
@@ -57,12 +79,15 @@ function BlockActionsOverlay({ editor, target, actions, host, onHover }) {
 		const run = () => latestMeasure.current();
 		window.addEventListener("resize", run);
 		window.addEventListener("scroll", run, true);
-		const resizeObserver = new ResizeObserver(run);
-		resizeObserver.observe(editor.view.dom);
+		const observer = new ResizeObserver(run);
+		resizeObserver.current = observer;
+		observer.observe(editor.view.dom);
+		for (const element of watched.current) observer.observe(element);
 		return () => {
 			window.removeEventListener("resize", run);
 			window.removeEventListener("scroll", run, true);
-			resizeObserver.disconnect();
+			observer.disconnect();
+			resizeObserver.current = null;
 		};
 	}, [editor]);
 	const root = useRef(null);
@@ -82,10 +107,11 @@ function BlockActionsOverlay({ editor, target, actions, host, onHover }) {
 	if (!visible || !place) return null;
 	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx("div", {
 		ref: root,
-		className: "block-actions absolute z-10 flex gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-sm",
+		className: "block-actions absolute z-10 flex gap-0.5 rounded-md bg-background p-0.5",
 		style: {
 			top: `${place.top}px`,
-			right: `${place.right}px`
+			right: `${place.right}px`,
+			transform: place.docked ? "translateY(-50%)" : void 0
 		},
 		onMouseEnter: () => onHover(true),
 		onMouseLeave: () => {

package/dist/features/block-ui/react/BlockActionsOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlockActionsOverlay.js","names":[],"sources":["../../../../src/features/block-ui/react/BlockActionsOverlay.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { useEffect, useLayoutEffect, useReducer, useRef, useState } from 'react'\nimport type { BlockAction, BlockTarget, MenuItem } from '../../../core'\nimport { Icon } from '../../../react/Icon'\nimport { Button } from '../../../react/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '../../../react/ui/dropdown-menu'\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../../react/ui/tooltip'\nimport { blockActionsFor, effectiveTarget } from '../block-actions'\n\n/** Gap between the bar and the editor's right edge. */\nconst EDGE_GUTTER = 8\n\n/**\n * The hover actions of a block, right-aligned at the editor's text column (the drag handle sits on the block's left and\n * targets the same block). Positioned absolutely inside `host`, a `relative` element around the editor; the composite\n * chrome (title, description, tags) addresses the composite (`effectiveTarget`). The bar is hidden while the editor is\n * read-only. `menu` actions open a dropdown of their items instead of running on click.\n */\nexport function BlockActionsOverlay({ editor, target, actions, host, onHover }: {\n  editor: Editor\n  target: BlockTarget | null\n  actions: readonly BlockAction[]\n  host: HTMLElement | null\n  onHover: (hovered: boolean) => void\n}) {\n  // The document and `isEditable` change with transactions (`setEditable` dispatches one too): render on each.\n  const [, rerender] = useReducer((count: number) => count + 1, 0)\n  useEffect(() => {\n    editor.on('transaction', rerender)\n    return () => { editor.off('transaction', rerender) }\n  }, [editor])\n\n  // The target in the current document; null once its position holds something else (deleted, replaced).\n  const block = ((): BlockTarget | null => {\n    if (!target || editor.isDestroyed) return null\n    const { doc } = editor.state\n    if (target.pos < 0 || target.pos >= doc.content.size) return null\n    const node = doc.nodeAt(target.pos)\n    if (!node || node.type !== target.node.type) return null\n    return effectiveTarget(editor, { node, pos: target.pos })\n  })()\n  const items = block && editor.isEditable ? blockActionsFor(editor, block, actions) : []\n\n  const [place, setPlace] = useState<{ top: number, right: number } | null>(null)\n  const measure = () => {\n    const dom = block && host && !editor.isDestroyed ? editor.view.nodeDOM(block.pos) : null\n    if (!(dom instanceof HTMLElement) || !host) {\n      setPlace(null)\n      return\n    }\n    const hostRect = host.getBoundingClientRect()\n    const rect = dom.getBoundingClientRect()\n    const top = rect.top - hostRect.top + 2\n    const right = hostRect.right - editor.view.dom.getBoundingClientRect().right + EDGE_GUTTER\n    setPlace(previous => (previous && previous.top === top && previous.right === right ? previous : { top, right }))\n  }\n  // After every render: the block, the document or the layout may have moved it. Equal positions bail out of the state update.\n  useLayoutEffect(measure)\n\n  const visible = editor.isEditable && items.length > 0 && place !== null\n\n  // The bar follows the editor's right edge when the column resizes without the window doing so.\n  const latestMeasure = useRef(measure)\n  latestMeasure.current = measure\n  useEffect(() => {\n    const run = () => latestMeasure.current()\n    window.addEventListener('resize', run)\n    window.addEventListener('scroll', run, true)\n    const resizeObserver = new ResizeObserver(run)\n    resizeObserver.observe(editor.view.dom)\n    return () => {\n      window.removeEventListener('resize', run)\n      window.removeEventListener('scroll', run, true)\n      resizeObserver.disconnect()\n    }\n  }, [editor])\n\n  // An open action menu is rendered outside the overlay (portal): the overlay counts as hovered until the menu closes.\n  const root = useRef<HTMLDivElement>(null)\n  const menuOpen = useRef(false)\n  const onMenuOpenChange = (open: boolean) => {\n    menuOpen.current = open\n    onHover(open || !!root.current?.matches(':hover'))\n  }\n\n  // A vanishing overlay sends no mouseleave: report it, so the host does not keep waiting for one.\n  const wasVisible = useRef(false)\n  useEffect(() => {\n    if (wasVisible.current && !visible) {\n      menuOpen.current = false\n      onHover(false)\n    }\n    wasVisible.current = visible\n  }, [visible, onHover])\n\n  if (!visible || !place) return null\n  return (\n    <TooltipProvider>\n      <div\n        ref={root}\n        className=\"block-actions absolute z-10 flex gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-sm\"\n        style={{ top: `${place.top}px`, right: `${place.right}px` }}\n        onMouseEnter={() => onHover(true)}\n        onMouseLeave={() => { if (!menuOpen.current) onHover(false) }}\n      >\n        {items.map((entry) => {\n          const button = (\n            <Button\n              variant=\"ghost\"\n              size=\"icon-xs\"\n              aria-label={entry.action.label}\n              onMouseDown={event => event.preventDefault()}\n              onClick={entry.menu ? undefined : () => entry.action.run?.(entry.ctx)}\n            >\n              <Icon name={entry.action.icon} />\n            </Button>\n          )\n          if (!entry.menu) {\n            return (\n              <Tooltip key={entry.action.id}>\n                <TooltipTrigger asChild>{button}</TooltipTrigger>\n                <TooltipContent>{entry.action.label}</TooltipContent>\n              </Tooltip>\n            )\n          }\n          return (\n            <DropdownMenu key={entry.action.id} onOpenChange={onMenuOpenChange}>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <DropdownMenuTrigger asChild>{button}</DropdownMenuTrigger>\n                </TooltipTrigger>\n                <TooltipContent>{entry.action.label}</TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent align=\"end\">\n                {entry.menu.map((item, index) => <MenuRow key={index} item={item} />)}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          )\n        })}\n      </div>\n    </TooltipProvider>\n  )\n}\n\nfunction MenuRow({ item }: { item: MenuItem }) {\n  if (item.type === 'label') return <DropdownMenuLabel>{item.label}</DropdownMenuLabel>\n  if (item.type === 'separator') return <DropdownMenuSeparator />\n  return (\n    <DropdownMenuItem disabled={item.disabled} onSelect={() => item.onSelect?.()}>\n      {item.icon && <Icon name={item.icon} />}\n      <span>{item.label}</span>\n      {item.description && <span className=\"ml-auto text-xs text-muted-foreground\">{item.description}</span>}\n    </DropdownMenuItem>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"BlockActionsOverlay.js","names":[],"sources":["../../../../src/features/block-ui/react/BlockActionsOverlay.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { useEffect, useLayoutEffect, useReducer, useRef, useState } from 'react'\nimport type { BlockAction, BlockTarget, MenuItem } from '../../../core'\nimport { Icon } from '../../../react/Icon'\nimport { Button } from '../../../react/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '../../../react/ui/dropdown-menu'\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../../react/ui/tooltip'\nimport { blockActionsFor, blockCornerOf, effectiveTarget } from '../block-actions'\n\n/** Gap between the bar and the editor's right edge. */\nconst EDGE_GUTTER = 8\n/** Gap between the bar and the block's own corner elements it docks next to. */\nconst CORNER_GAP = 4\n\n/**\n * The hover actions of a block, right-aligned at the editor's text column (the drag handle sits on the block's left and\n * targets the same block). Positioned absolutely inside `host`, a `relative` element around the editor; the composite\n * chrome (title, description, tags) addresses the composite (`effectiveTarget`). The bar is hidden while the editor is\n * read-only. `menu` actions open a dropdown of their items instead of running on click.\n *\n * A block that shows icons of its own in its top-right corner marks them with `data-block-corner` (`BLOCK_CORNER_ATTR`):\n * the bar then docks immediately left of them, centred on their row, instead of covering them. Without such elements\n * it sits at the editor's right edge, aligned to the block's top.\n */\nexport function BlockActionsOverlay({ editor, target, actions, host, onHover }: {\n  editor: Editor\n  target: BlockTarget | null\n  actions: readonly BlockAction[]\n  host: HTMLElement | null\n  onHover: (hovered: boolean) => void\n}) {\n  // The document and `isEditable` change with transactions (`setEditable` dispatches one too): render on each.\n  const [, rerender] = useReducer((count: number) => count + 1, 0)\n  useEffect(() => {\n    editor.on('transaction', rerender)\n    return () => { editor.off('transaction', rerender) }\n  }, [editor])\n\n  // The target in the current document; null once its position holds something else (deleted, replaced).\n  const block = ((): BlockTarget | null => {\n    if (!target || editor.isDestroyed) return null\n    const { doc } = editor.state\n    if (target.pos < 0 || target.pos >= doc.content.size) return null\n    const node = doc.nodeAt(target.pos)\n    if (!node || node.type !== target.node.type) return null\n    return effectiveTarget(editor, { node, pos: target.pos })\n  })()\n  const items = block && editor.isEditable ? blockActionsFor(editor, block, actions) : []\n\n  // `docked`: the bar sits next to the block's corner elements, and `top` is then their vertical centre.\n  const [place, setPlace] = useState<{ top: number, right: number, docked: boolean } | null>(null)\n  const resizeObserver = useRef<ResizeObserver | null>(null)\n  const watched = useRef<HTMLElement[]>([])\n  // The corner elements can change size (a badge appears) without the document changing: watch the current ones.\n  const watchCorner = (elements: HTMLElement[]) => {\n    const current = watched.current\n    if (elements.length === current.length && elements.every((element, index) => element === current[index])) return\n    for (const element of current) resizeObserver.current?.unobserve(element)\n    watched.current = elements\n    for (const element of elements) resizeObserver.current?.observe(element)\n  }\n  const measure = () => {\n    const dom = block && host && !editor.isDestroyed ? editor.view.nodeDOM(block.pos) : null\n    if (!(dom instanceof HTMLElement) || !host) {\n      watchCorner([])\n      setPlace(null)\n      return\n    }\n    const hostRect = host.getBoundingClientRect()\n    const corner = blockCornerOf(dom)\n    watchCorner(corner?.elements ?? [])\n    const next = corner\n      ? { top: corner.centerY - hostRect.top, right: hostRect.right - corner.left + CORNER_GAP, docked: true }\n      : {\n          top: dom.getBoundingClientRect().top - hostRect.top + 2,\n          right: hostRect.right - editor.view.dom.getBoundingClientRect().right + EDGE_GUTTER,\n          docked: false,\n        }\n    setPlace(previous => (previous && previous.top === next.top && previous.right === next.right && previous.docked === next.docked ? previous : next))\n  }\n  // After every render: the block, the document or the layout may have moved it. Equal positions bail out of the state update.\n  useLayoutEffect(measure)\n\n  const visible = editor.isEditable && items.length > 0 && place !== null\n\n  // The bar follows the editor's right edge when the column resizes without the window doing so.\n  const latestMeasure = useRef(measure)\n  latestMeasure.current = measure\n  useEffect(() => {\n    const run = () => latestMeasure.current()\n    window.addEventListener('resize', run)\n    window.addEventListener('scroll', run, true)\n    const observer = new ResizeObserver(run)\n    resizeObserver.current = observer\n    observer.observe(editor.view.dom)\n    for (const element of watched.current) observer.observe(element)\n    return () => {\n      window.removeEventListener('resize', run)\n      window.removeEventListener('scroll', run, true)\n      observer.disconnect()\n      resizeObserver.current = null\n    }\n  }, [editor])\n\n  // An open action menu is rendered outside the overlay (portal): the overlay counts as hovered until the menu closes.\n  const root = useRef<HTMLDivElement>(null)\n  const menuOpen = useRef(false)\n  const onMenuOpenChange = (open: boolean) => {\n    menuOpen.current = open\n    onHover(open || !!root.current?.matches(':hover'))\n  }\n\n  // A vanishing overlay sends no mouseleave: report it, so the host does not keep waiting for one.\n  const wasVisible = useRef(false)\n  useEffect(() => {\n    if (wasVisible.current && !visible) {\n      menuOpen.current = false\n      onHover(false)\n    }\n    wasVisible.current = visible\n  }, [visible, onHover])\n\n  if (!visible || !place) return null\n  return (\n    <TooltipProvider>\n      <div\n        ref={root}\n        className=\"block-actions absolute z-10 flex gap-0.5 rounded-md bg-background p-0.5\"\n        style={{ top: `${place.top}px`, right: `${place.right}px`, transform: place.docked ? 'translateY(-50%)' : undefined }}\n        onMouseEnter={() => onHover(true)}\n        onMouseLeave={() => { if (!menuOpen.current) onHover(false) }}\n      >\n        {items.map((entry) => {\n          const button = (\n            <Button\n              variant=\"ghost\"\n              size=\"icon-xs\"\n              aria-label={entry.action.label}\n              onMouseDown={event => event.preventDefault()}\n              onClick={entry.menu ? undefined : () => entry.action.run?.(entry.ctx)}\n            >\n              <Icon name={entry.action.icon} />\n            </Button>\n          )\n          if (!entry.menu) {\n            return (\n              <Tooltip key={entry.action.id}>\n                <TooltipTrigger asChild>{button}</TooltipTrigger>\n                <TooltipContent>{entry.action.label}</TooltipContent>\n              </Tooltip>\n            )\n          }\n          return (\n            <DropdownMenu key={entry.action.id} onOpenChange={onMenuOpenChange}>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <DropdownMenuTrigger asChild>{button}</DropdownMenuTrigger>\n                </TooltipTrigger>\n                <TooltipContent>{entry.action.label}</TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent align=\"end\">\n                {entry.menu.map((item, index) => <MenuRow key={index} item={item} />)}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          )\n        })}\n      </div>\n    </TooltipProvider>\n  )\n}\n\nfunction MenuRow({ item }: { item: MenuItem }) {\n  if (item.type === 'label') return <DropdownMenuLabel>{item.label}</DropdownMenuLabel>\n  if (item.type === 'separator') return <DropdownMenuSeparator />\n  return (\n    <DropdownMenuItem disabled={item.disabled} onSelect={() => item.onSelect?.()}>\n      {item.icon && <Icon name={item.icon} />}\n      <span>{item.label}</span>\n      {item.description && <span className=\"ml-auto text-xs text-muted-foreground\">{item.description}</span>}\n    </DropdownMenuItem>\n  )\n}\n"],"mappings":"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"}

package/dist/features/block-ui/react/BlockUi.js

@@ -1,5 +1,5 @@
-import { isChromeNode } from "../../../core/schema/node-flags.js";
 import { editorEntryOf } from "../../../core/editor-ui.js";
+import { isChromeNode } from "../../../core/schema/node-flags.js";
 import { cn } from "../../../react/ui/utils.js";
 import { Icon } from "../../../react/Icon.js";
 import { useEditorSettings } from "../../../react/settings.js";

package/dist/features/collab/anchor-resolver.js

@@ -1,5 +1,5 @@
-import { absolutePositionToRelativePosition, relativePositionToAbsolutePosition, ySyncPluginKey, yUndoPluginKey } from "@tiptap/y-tiptap";
 import * as Y from "yjs";
+import { absolutePositionToRelativePosition, relativePositionToAbsolutePosition, ySyncPluginKey, yUndoPluginKey } from "@tiptap/y-tiptap";
 //#region src/features/collab/anchor-resolver.ts
 const positionMappings = /* @__PURE__ */ new WeakMap();
 /**

package/dist/features/collab/feature.js

@@ -15,6 +15,8 @@ import { CollaborationCaret } from "@tiptap/extension-collaboration-caret";
 function collabFeatureCore(ui = {}) {
 	return {
 		id: "collab",
+		dimension: "interaction",
+		backend: ["collaboration"],
 		anchorResolver: () => yjsAnchorResolver,
 		extensions: ({ collaboration }) => {
 			if (!collaboration) return [];

package/dist/features/collab/feature.js.map

@@ -1 +1 @@
-{"version":3,"file":"feature.js","names":[],"sources":["../../../src/features/collab/feature.ts"],"sourcesContent":["import type { AnyExtension } from '@tiptap/core'\nimport { Collaboration } from '@tiptap/extension-collaboration'\nimport { CollaborationCaret } from '@tiptap/extension-collaboration-caret'\nimport type { EditorFeature } from '../../core'\nimport { yjsAnchorResolver } from './anchor-resolver'\n\n/** What a framework binding supplies to the collab feature. */\nexport interface CollabUi {\n  /** Extensions added before `Collaboration` while a session exists (framework state-sync plugins). */\n  extensions?: AnyExtension[]\n}\n\n/**\n * Real-time collaboration through Yjs. Active only with a session on the surface (`collaboration` prop): the Y.Doc\n * is then the document (`Collaboration`, which brings the per-user undo/redo; core turns its own history off), and a\n * provider adds remote carets (`CollaborationCaret`, labelled with the session's `user`). Without a session the\n * feature contributes no extensions, so the editor behaves like a standalone one. It also supplies `DocAnchors` with\n * the Yjs-backed `AnchorResolver`, so anchored ranges (AI reviews, ghost text, chat ops) survive concurrent edits.\n *\n * Pairs with the server of `@ecsplico/editor/nuxt` (or any Hocuspocus server on the matching advanced schema).\n * A surface given a `collaboration` session requires this feature and throws otherwise.\n */\nexport function collabFeatureCore(ui: CollabUi = {}): EditorFeature<never> {\n  return {\n    id: 'collab',\n    anchorResolver: () => yjsAnchorResolver,\n    extensions: ({ collaboration }) => {\n      if (!collaboration) return []\n      if (collaboration.token !== undefined && collaboration.provider) collaboration.provider.configuration.token = collaboration.token\n      return [\n        ...(ui.extensions ?? []),\n        Collaboration.configure({ document: collaboration.ydoc }),\n        ...(collaboration.provider\n          ? [CollaborationCaret.configure({ provider: collaboration.provider, ...(collaboration.user && { user: collaboration.user }) })]\n          : []),\n      ]\n    },\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAsBA,SAAgB,kBAAkB,KAAe,CAAC,GAAyB;CACzE,OAAO;EACL,IAAI;EACJ,sBAAsB;EACtB,aAAa,EAAE,oBAAoB;GACjC,IAAI,CAAC,eAAe,OAAO,CAAC;GAC5B,IAAI,cAAc,UAAU,KAAA,KAAa,cAAc,UAAU,cAAc,SAAS,cAAc,QAAQ,cAAc;GAC5H,OAAO;IACL,GAAI,GAAG,cAAc,CAAC;IACtB,cAAc,UAAU,EAAE,UAAU,cAAc,KAAK,CAAC;IACxD,GAAI,cAAc,WACd,CAAC,mBAAmB,UAAU;KAAE,UAAU,cAAc;KAAU,GAAI,cAAc,QAAQ,EAAE,MAAM,cAAc,KAAK;IAAG,CAAC,CAAC,IAC5H,CAAC;GACP;EACF;CACF;AACF"}
+{"version":3,"file":"feature.js","names":[],"sources":["../../../src/features/collab/feature.ts"],"sourcesContent":["import type { AnyExtension } from '@tiptap/core'\nimport { Collaboration } from '@tiptap/extension-collaboration'\nimport { CollaborationCaret } from '@tiptap/extension-collaboration-caret'\nimport type { EditorFeature } from '../../core'\nimport { yjsAnchorResolver } from './anchor-resolver'\n\n/** What a framework binding supplies to the collab feature. */\nexport interface CollabUi {\n  /** Extensions added before `Collaboration` while a session exists (framework state-sync plugins). */\n  extensions?: AnyExtension[]\n}\n\n/**\n * Real-time collaboration through Yjs. Active only with a session on the surface (`collaboration` prop): the Y.Doc\n * is then the document (`Collaboration`, which brings the per-user undo/redo; core turns its own history off), and a\n * provider adds remote carets (`CollaborationCaret`, labelled with the session's `user`). Without a session the\n * feature contributes no extensions, so the editor behaves like a standalone one. It also supplies `DocAnchors` with\n * the Yjs-backed `AnchorResolver`, so anchored ranges (AI reviews, ghost text, chat ops) survive concurrent edits.\n *\n * Pairs with the server of `@ecsplico/editor/nuxt` (or any Hocuspocus server on the matching advanced schema).\n * A surface given a `collaboration` session requires this feature and throws otherwise.\n */\nexport function collabFeatureCore(ui: CollabUi = {}): EditorFeature<never> {\n  return {\n    id: 'collab',\n    dimension: 'interaction',\n    backend: ['collaboration'],\n    anchorResolver: () => yjsAnchorResolver,\n    extensions: ({ collaboration }) => {\n      if (!collaboration) return []\n      if (collaboration.token !== undefined && collaboration.provider) collaboration.provider.configuration.token = collaboration.token\n      return [\n        ...(ui.extensions ?? []),\n        Collaboration.configure({ document: collaboration.ydoc }),\n        ...(collaboration.provider\n          ? [CollaborationCaret.configure({ provider: collaboration.provider, ...(collaboration.user && { user: collaboration.user }) })]\n          : []),\n      ]\n    },\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAsBA,SAAgB,kBAAkB,KAAe,CAAC,GAAyB;CACzE,OAAO;EACL,IAAI;EACJ,WAAW;EACX,SAAS,CAAC,eAAe;EACzB,sBAAsB;EACtB,aAAa,EAAE,oBAAoB;GACjC,IAAI,CAAC,eAAe,OAAO,CAAC;GAC5B,IAAI,cAAc,UAAU,KAAA,KAAa,cAAc,UAAU,cAAc,SAAS,cAAc,QAAQ,cAAc;GAC5H,OAAO;IACL,GAAI,GAAG,cAAc,CAAC;IACtB,cAAc,UAAU,EAAE,UAAU,cAAc,KAAK,CAAC;IACxD,GAAI,cAAc,WACd,CAAC,mBAAmB,UAAU;KAAE,UAAU,cAAc;KAAU,GAAI,cAAc,QAAQ,EAAE,MAAM,cAAc,KAAK;IAAG,CAAC,CAAC,IAC5H,CAAC;GACP;EACF;CACF;AACF"}