@threadlabs/looma 0.28.2 → 0.28.3

package/components/shared/overlay.js

@@ -235,8 +235,22 @@ export function writtenPlace(surface, ownedStyles = []) {
   return { rect, floating };
 }
 
-function fallbackPosition(surface, anchor, placement, gap, viewportGap, surfaceRect = layoutRect(surface)) {
-  const bounds = viewport(surface.ownerDocument.defaultView);
+// The visible part of a boundary element, or the visual viewport when there is none or it is off screen.
+function containment(surface, boundary) {
+  const visible = viewport(surface.ownerDocument.defaultView);
+  const element = typeof boundary === "function" ? boundary() : boundary;
+  if (!element) return visible;
+  const box = element.getBoundingClientRect();
+  const left = Math.max(visible.left, box.left);
+  const top = Math.max(visible.top, box.top);
+  const right = Math.min(visible.right, box.right);
+  const bottom = Math.min(visible.bottom, box.bottom);
+  if (right <= left || bottom <= top) return visible;
+  return { left, top, right, bottom, width: right - left, height: bottom - top };
+}
+
+function fallbackPosition(surface, anchor, placement, gap, viewportGap, surfaceRect = layoutRect(surface), boundary = null) {
+  const bounds = containment(surface, boundary);
   const [preferred, align = "center"] = placement.split("-");
   const side = ["top", "bottom", "left", "right"].includes(preferred) ? preferred : "bottom";
   const opposite = { top: "bottom", bottom: "top", left: "right", right: "left" }[side];
@@ -271,9 +285,12 @@ function fallbackPosition(surface, anchor, placement, gap, viewportGap, surfaceR
   surface.style.bottom = "auto";
 }
 
-/** Applies the shared flip/shift policy to a live element or consumer-supplied virtual rectangle. */
+/**
+ * Applies the shared flip/shift policy to a live element or consumer-supplied virtual rectangle.
+ * `boundary` (an element, or a function returning one) narrows the room to its visible part.
+ */
 export function positionAnchoredSurface(surface, rect, options = {}) {
-  fallbackPosition(surface, rect, options.placement ?? "bottom-start", options.gap ?? 4, options.viewportGap ?? 8);
+  fallbackPosition(surface, rect, options.placement ?? "bottom-start", options.gap ?? 4, options.viewportGap ?? 8, undefined, options.boundary);
 }
 
 /**
@@ -379,6 +396,7 @@ export function createAnchoredSurface(surface, options = {}) {
   let placement = options.placement ?? "bottom-start";
   const gap = () => Math.max(0, Number(typeof options.gap === "function" ? options.gap() : options.gap ?? 4) || 0);
   const viewportGap = Math.max(0, options.viewportGap ?? 8);
+  const boundary = options.boundary ?? null;
   let anchor = options.anchor ?? null;
   let point = null;
   let open = false;
@@ -402,17 +420,22 @@ export function createAnchoredSurface(surface, options = {}) {
     // A disappearing trigger has no usable position. Keep the last valid position, or wait before first opening.
     if (!point && typeof anchor !== "function" && (anchor.isConnected === false || rect.width === 0 && rect.height === 0
       || anchor instanceof owner.Element && owner.getComputedStyle(anchor).visibility !== "visible")) {
-      if (lastAnchorRect) positionAnchoredSurface(surface, lastAnchorRect, { placement, gap: gap(), viewportGap });
+      if (lastAnchorRect) positionAnchoredSurface(surface, lastAnchorRect, { placement, gap: gap(), viewportGap, boundary });
       else hide(surface);
       return;
     }
     lastAnchorRect = { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom, width: rect.width, height: rect.height };
     show(surface);
-    positionAnchoredSurface(surface, rect, { placement: point ? "bottom-start" : placement, gap: gap(), viewportGap });
+    if (options.maxWidth !== undefined) {
+      const maxWidth = typeof options.maxWidth === "function" ? options.maxWidth() : options.maxWidth;
+      surface.style.maxWidth = maxWidth === null ? "" : `${maxWidth}px`;
+    }
+    positionAnchoredSurface(surface, rect, { placement: point ? "bottom-start" : placement, gap: gap(), viewportGap, boundary });
   };
   surface.style.position = "fixed";
   surface.style.margin = "0";
-  const presentation = createViewportSurface(surface, { position });
+  // `bare` resets the browser's popover chrome on a surface that has none of its own.
+  const presentation = createViewportSurface(surface, { position, bare: options.bare });
   // Resize and scroll events do not report an ancestor's transition or layout shift.
   // While visible, sample the live anchor and only re-position when its bounds change.
   const trackAnchor = () => {

package/editor/selection-surface.d.ts

@@ -0,0 +1,66 @@
+import { type Editor } from "@tiptap/core";
+import { type EditorState } from "@tiptap/pm/state";
+import type { EditorView } from "@tiptap/pm/view";
+type Rect = {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+};
+/** What `shouldShow` receives on each selection or document change. */
+export interface SelectionSurfaceContext {
+    editor: Editor;
+    view: EditorView;
+    state: EditorState;
+    oldState?: EditorState;
+    from: number;
+    to: number;
+}
+export interface SelectionSurfaceOptions {
+    editor: Editor;
+    /**
+     * The surface element, the only child of a host element that stays in place. It leaves the
+     * document while closed, so its content is absent rather than hidden, and returns to the host,
+     * in the top layer, while open.
+     */
+    element: HTMLElement;
+    pluginKey: string;
+    shouldShow(context: SelectionSurfaceContext): boolean;
+    /** Waits this long after the last change before deciding, for non-empty selections. */
+    updateDelay?: number;
+    placement?: "top" | "bottom";
+    /** The rectangle to anchor to; the selection's by default. */
+    anchor?: () => Rect;
+    /** Keeps the surface inside this element as well as the viewport. */
+    boundary?: () => HTMLElement | null;
+    maxWidth?: () => number | null;
+    /** Elements whose pointer presses do not dismiss the surface, such as the editor's own root. */
+    related?: () => HTMLElement[];
+    /** Return false to keep the surface open, for example while a picker in it has focus. */
+    onHide?: () => boolean | void;
+    /** Escape or a press outside reached this surface first on the shared overlay stack. */
+    onDismiss?: (reason: "escape" | "light-dismiss") => void;
+}
+/** A selection-anchored surface: the editor's floating toolbar, link card, and image actions. */
+export interface SelectionSurface {
+    readonly element: HTMLElement;
+    isOpen(): boolean;
+    show(): void;
+    hide(): void;
+    /** Anchors to `anchor` until the next change the surface decides on. */
+    setAnchor(anchor: () => Rect): void;
+    destroy(): void;
+}
+/**
+ * Shows `element` beside the selection whenever `shouldShow` allows, as Tiptap's bubble menu does,
+ * and presents it through Looma's shared overlay layer: in the top layer, placed by the shared
+ * flip/shift policy, travelling with its anchor, and registered on the overlay stack.
+ *
+ * @lifecycle Registers a ProseMirror plugin now; `destroy()` unregisters it and closes the surface.
+ * The editor destroying its view closes the surface too.
+ * @contract A press inside the surface keeps it open when the editor blurs; dragging hides it.
+ */
+export declare function createSelectionSurface(options: SelectionSurfaceOptions): SelectionSurface;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.28.2",
+  "version": "0.28.3",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/vue/editor/index.js

@@ -1,8 +1,8 @@
 import { computed, createApp, defineComponent, h, nextTick, onBeforeUnmount, onMounted, reactive, ref, shallowRef, useId, watch } from "vue";
 import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_CHIP_COLORS, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getTableOfContentsEntries, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeLoomaChipColor, normalizeTableOfContentsConfig, resolveTableCellAt, siteRelativeHref } from "@threadlabs/looma/editor";
 import { Button, Callout, Card, Checkbox, Cluster, Combobox, Disclosure, EditorInsertTableGrid, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, EditorToolbar as EditorToolbar$1, FormField, Icon, IconButton, Image, Input, InputGroup, List, Menu, MenuItem, Popover, ScrollArea, SearchResultRow, Separator, Stack, Text, Tooltip } from "@threadlabs/looma/vue";
-import { Editor, Extension, Node as Node$1, getText, getTextSerializersFromSchema, mergeAttributes, nodeInputRule, posToDOMRect } from "@tiptap/core";
-import { BubbleMenu, Editor as Editor$1 } from "@tiptap/vue-3";
+import { Editor, Extension, Node as Node$1, getText, getTextSerializersFromSchema, isNodeSelection, mergeAttributes, nodeInputRule, posToDOMRect } from "@tiptap/core";
+import { Editor as Editor$1 } from "@tiptap/vue-3";
 import { closeHistory } from "@tiptap/pm/history";
 import { AllSelection, NodeSelection, Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
@@ -25,9 +25,98 @@ var EDITOR_ADAPTER_COMPONENT_TAG_MAP = {
 };
 //#endregion
 //#region src/components/shared/overlay.js
+function stateFor(document) {
+	const key = Symbol.for("@threadlabs/looma/overlay-stack/v1");
+	let state = document[key];
+	if (state) return state;
+	state = {
+		records: [],
+		modalCount: 0,
+		listening: false
+	};
+	Object.defineProperty(document, key, { value: state });
+	return state;
+}
+function syncScrollLock(document, state) {
+	document.documentElement.toggleAttribute("data-ui-scroll-lock", state.modalCount > 0);
+	if (state.modalCount > 0) document.documentElement.style.overflow = "hidden";
+	else document.documentElement.style.removeProperty("overflow");
+}
+function syncModalBackdrops(state) {
+	const topModal = state.records.findLast((record) => record.modal);
+	for (const record of state.records) (record.modalElement ?? record.element).toggleAttribute("data-ui-backdrop-hidden", Boolean(record.modal && record !== topModal));
+}
+function requestClose(document, reason, trigger) {
+	const record = stateFor(document).records.at(-1);
+	if (!record || record.dismissible === false && (reason === "escape" || reason === "light-dismiss") || record.canClose?.(reason) === false) return false;
+	record.requestClose(reason, trigger);
+	return true;
+}
+function ensureListeners(document, state) {
+	if (state.listening) return;
+	state.onKeydown = (event) => {
+		if (event.key === "Escape" && !event.defaultPrevented && requestClose(document, "escape", "keyboard")) event.preventDefault();
+	};
+	state.onPointerdown = (event) => {
+		const top = state.records.at(-1);
+		if (!top || top.dismissible === false) return;
+		const boundary = [top.element, ...top.relatedElements ?? []];
+		if (event.clientX === 0 && event.clientY === 0) return;
+		const rect = top.element.getBoundingClientRect();
+		if (!(event.target === top.element && (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom)) && event.composedPath().some((target) => target instanceof Node && boundary.some((element) => element.contains(target)))) return;
+		requestClose(document, "light-dismiss", "pointer");
+	};
+	document.addEventListener("keydown", state.onKeydown);
+	document.addEventListener("pointerdown", state.onPointerdown, true);
+	state.listening = true;
+}
+function removeListeners(document, state) {
+	if (!state.listening || state.records.length) return;
+	document.removeEventListener("keydown", state.onKeydown);
+	document.removeEventListener("pointerdown", state.onPointerdown, true);
+	state.listening = false;
+}
+function openOverlay(record) {
+	const document = record.element.ownerDocument;
+	const state = stateFor(document);
+	const index = state.records.findIndex((entry) => entry.id === record.id);
+	if (index >= 0) {
+		const previous = state.records[index];
+		state.records[index] = record;
+		if (previous.modal !== record.modal) {
+			state.modalCount += record.modal ? 1 : -1;
+			syncScrollLock(document, state);
+		}
+		if (previous.modalElement && previous.modalElement !== record.modalElement) previous.modalElement.removeAttribute("data-ui-backdrop-hidden");
+		syncModalBackdrops(state);
+		return;
+	}
+	state.records.push(record);
+	if (record.modal) {
+		state.modalCount += 1;
+		syncScrollLock(document, state);
+	}
+	syncModalBackdrops(state);
+	ensureListeners(document, state);
+	announceOverlayOpen(document, record.id);
+}
 function announceOverlayOpen(document, id) {
 	document.dispatchEvent(new CustomEvent("ui-overlay-open", { detail: { id } }));
 }
+function closeOverlay(document, id) {
+	const state = stateFor(document);
+	const index = state.records.findIndex((record) => record.id === id);
+	if (index >= 0) {
+		const [record] = state.records.splice(index, 1);
+		(record.modalElement ?? record.element).removeAttribute("data-ui-backdrop-hidden");
+		if (record?.modal) {
+			state.modalCount = Math.max(0, state.modalCount - 1);
+			syncScrollLock(document, state);
+		}
+		syncModalBackdrops(state);
+	}
+	removeListeners(document, state);
+}
 function topLayerOpen(surface) {
 	try {
 		return surface.matches(":popover-open");
@@ -48,6 +137,178 @@ function hide(surface) {
 	} catch {}
 	surface.hidden = true;
 }
+function viewport(owner) {
+	const visual = owner.visualViewport;
+	const left = visual?.offsetLeft ?? 0;
+	const top = visual?.offsetTop ?? 0;
+	const width = visual?.width ?? owner.innerWidth;
+	const height = visual?.height ?? owner.innerHeight;
+	return {
+		left,
+		top,
+		right: left + width,
+		bottom: top + height,
+		width,
+		height
+	};
+}
+function clamp(rect, bounds, gutter) {
+	const availableWidth = Math.max(0, bounds.width - gutter * 2);
+	const availableHeight = Math.max(0, bounds.height - gutter * 2);
+	const left = rect.width > availableWidth ? bounds.left + gutter : Math.min(Math.max(rect.left, bounds.left + gutter), bounds.right - gutter - rect.width);
+	const top = rect.height > availableHeight ? bounds.top + gutter : Math.min(Math.max(rect.top, bounds.top + gutter), bounds.bottom - gutter - rect.height);
+	return {
+		x: left - rect.left,
+		y: top - rect.top
+	};
+}
+function layoutRect(surface) {
+	const box = surface.getBoundingClientRect();
+	const width = surface.offsetWidth || box.width;
+	const height = surface.offsetHeight || box.height;
+	const left = box.left + (box.width - width) / 2;
+	const top = box.top + (box.height - height) / 2;
+	return {
+		left,
+		top,
+		right: left + width,
+		bottom: top + height,
+		width,
+		height
+	};
+}
+/**
+* Where an unanchored surface is written, for presenting it there in the top layer. The top layer
+* takes a surface out of page flow, and engines disagree on its static position there (Chromium
+* uses the viewport origin), so measure the surface in flow before it is shown, with the inline
+* styles its caller owns cleared. `rect()` then carries that place with the box that holds it, so
+* the surface travels with scrolling and with layout around it. A fixed surface keeps its measured
+* place; one an integration places with inline insets the caller does not own keeps its live box.
+* `floating` reports a surface placed that way or written in a fixed or absolute box, which answers to
+* the viewport. Call it only while the surface is outside the top layer.
+*/
+function writtenPlace(surface, ownedStyles = []) {
+	const owner = surface.ownerDocument.defaultView;
+	const up = (node) => node.assignedSlot ?? node.parentElement ?? node.getRootNode().host ?? null;
+	let parent = up(surface);
+	while (parent && owner.getComputedStyle(parent).display === "contents") parent = up(parent);
+	const popover = surface.getAttribute("popover");
+	const hidden = surface.hidden;
+	const saved = ownedStyles.map((name) => [name, surface.style.getPropertyValue(name)]);
+	if (popover !== null) surface.removeAttribute("popover");
+	if (hidden) surface.hidden = false;
+	for (const name of ownedStyles) surface.style.removeProperty(name);
+	const spot = layoutRect(surface);
+	const floats = (node) => node instanceof owner.Element && /^(fixed|absolute)$/.test(owner.getComputedStyle(node).position);
+	const placed = ["left", "top"].some((name) => !ownedStyles.includes(name) && surface.style.getPropertyValue(name));
+	const fixed = owner.getComputedStyle(surface).position === "fixed";
+	const floating = placed || floats(surface) || floats(surface.offsetParent);
+	for (const [name, value] of saved) if (value) surface.style.setProperty(name, value);
+	if (hidden) surface.hidden = true;
+	if (popover !== null) surface.setAttribute("popover", popover);
+	surface.offsetWidth;
+	const scroll = () => !parent || parent === surface.ownerDocument.documentElement || parent === surface.ownerDocument.scrollingElement ? [0, 0] : [parent.scrollLeft, parent.scrollTop];
+	let offset = null;
+	const rect = () => {
+		let { left, top } = placed ? layoutRect(surface) : spot;
+		if (!placed && !fixed && parent) {
+			const base = parent.getBoundingClientRect();
+			const [x, y] = scroll();
+			offset ??= {
+				left: spot.left - base.left + x,
+				top: spot.top - base.top + y
+			};
+			left = base.left + offset.left - x;
+			top = base.top + offset.top - y;
+		}
+		return {
+			left,
+			top,
+			right: left,
+			bottom: top,
+			width: 0,
+			height: 0
+		};
+	};
+	return {
+		rect,
+		floating
+	};
+}
+function containment(surface, boundary) {
+	const visible = viewport(surface.ownerDocument.defaultView);
+	const element = typeof boundary === "function" ? boundary() : boundary;
+	if (!element) return visible;
+	const box = element.getBoundingClientRect();
+	const left = Math.max(visible.left, box.left);
+	const top = Math.max(visible.top, box.top);
+	const right = Math.min(visible.right, box.right);
+	const bottom = Math.min(visible.bottom, box.bottom);
+	if (right <= left || bottom <= top) return visible;
+	return {
+		left,
+		top,
+		right,
+		bottom,
+		width: right - left,
+		height: bottom - top
+	};
+}
+function fallbackPosition(surface, anchor, placement, gap, viewportGap, surfaceRect = layoutRect(surface), boundary = null) {
+	const bounds = containment(surface, boundary);
+	const [preferred, align = "center"] = placement.split("-");
+	const side = [
+		"top",
+		"bottom",
+		"left",
+		"right"
+	].includes(preferred) ? preferred : "bottom";
+	const opposite = {
+		top: "bottom",
+		bottom: "top",
+		left: "right",
+		right: "left"
+	}[side];
+	const available = {
+		top: anchor.top - bounds.top - viewportGap,
+		bottom: bounds.bottom - anchor.bottom - viewportGap,
+		left: anchor.left - bounds.left - viewportGap,
+		right: bounds.right - anchor.right - viewportGap
+	};
+	const needed = (side === "top" || side === "bottom" ? surfaceRect.height : surfaceRect.width) + gap;
+	const actual = available[side] < needed && available[opposite] > available[side] ? opposite : side;
+	surface.dataset.uiActualPlacement = actual;
+	surface.dataset.uiActualAlign = align;
+	const rtl = getComputedStyle(surface).direction === "rtl";
+	let left;
+	let top;
+	if (actual === "top" || actual === "bottom") {
+		top = actual === "top" ? anchor.top - surfaceRect.height - gap : anchor.bottom + gap;
+		left = align === "start" ? rtl ? anchor.right - surfaceRect.width : anchor.left : align === "end" ? rtl ? anchor.left : anchor.right - surfaceRect.width : (anchor.left + anchor.right - surfaceRect.width) / 2;
+	} else {
+		left = actual === "left" ? anchor.left - surfaceRect.width - gap : anchor.right + gap;
+		top = align === "start" ? anchor.top : align === "end" ? anchor.bottom - surfaceRect.height : (anchor.top + anchor.bottom - surfaceRect.height) / 2;
+	}
+	const shift = clamp({
+		left,
+		top,
+		right: left + surfaceRect.width,
+		bottom: top + surfaceRect.height,
+		width: surfaceRect.width,
+		height: surfaceRect.height
+	}, bounds, viewportGap);
+	surface.style.left = `${Math.round(left + shift.x)}px`;
+	surface.style.top = `${Math.round(top + shift.y)}px`;
+	surface.style.right = "auto";
+	surface.style.bottom = "auto";
+}
+/**
+* Applies the shared flip/shift policy to a live element or consumer-supplied virtual rectangle.
+* `boundary` (an element, or a function returning one) narrows the room to its visible part.
+*/
+function positionAnchoredSurface(surface, rect, options = {}) {
+	fallbackPosition(surface, rect, options.placement ?? "bottom-start", options.gap ?? 4, options.viewportGap ?? 8, void 0, options.boundary);
+}
 /**
 * One document-scoped scroll/resize listener and one frame for all active floating surfaces.
 * The registry lives on the document so HTML and Vue bundles share the same coordinator.
@@ -174,6 +435,152 @@ function createViewportSurface(surface, options = {}) {
 		}
 	};
 }
+function createAnchoredSurface(surface, options = {}) {
+	const owner = surface.ownerDocument.defaultView;
+	let placement = options.placement ?? "bottom-start";
+	const gap = () => Math.max(0, Number(typeof options.gap === "function" ? options.gap() : options.gap ?? 4) || 0);
+	const viewportGap = Math.max(0, options.viewportGap ?? 8);
+	const boundary = options.boundary ?? null;
+	let anchor = options.anchor ?? null;
+	let point = null;
+	let open = false;
+	let destroyed = false;
+	let anchorFrame = null;
+	let lastAnchorRect = null;
+	let written = null;
+	const anchorRect = () => typeof anchor === "function" ? anchor() : anchor ? anchor.getBoundingClientRect() : written?.rect();
+	const position = () => {
+		if (!anchor && !point) {
+			if (!written) return;
+			show(surface);
+			const rect = lastAnchorRect = written.rect();
+			Object.assign(surface.style, {
+				left: `${Math.round(rect.left)}px`,
+				top: `${Math.round(rect.top)}px`,
+				right: "auto",
+				bottom: "auto"
+			});
+			return;
+		}
+		const rect = point ? {
+			left: point.x,
+			right: point.x,
+			top: point.y,
+			bottom: point.y,
+			width: 0,
+			height: 0
+		} : anchorRect();
+		if (!rect) return;
+		if (!point && typeof anchor !== "function" && (anchor.isConnected === false || rect.width === 0 && rect.height === 0 || anchor instanceof owner.Element && owner.getComputedStyle(anchor).visibility !== "visible")) {
+			if (lastAnchorRect) positionAnchoredSurface(surface, lastAnchorRect, {
+				placement,
+				gap: gap(),
+				viewportGap,
+				boundary
+			});
+			else hide(surface);
+			return;
+		}
+		lastAnchorRect = {
+			left: rect.left,
+			top: rect.top,
+			right: rect.right,
+			bottom: rect.bottom,
+			width: rect.width,
+			height: rect.height
+		};
+		show(surface);
+		if (options.maxWidth !== void 0) {
+			const maxWidth = typeof options.maxWidth === "function" ? options.maxWidth() : options.maxWidth;
+			surface.style.maxWidth = maxWidth === null ? "" : `${maxWidth}px`;
+		}
+		positionAnchoredSurface(surface, rect, {
+			placement: point ? "bottom-start" : placement,
+			gap: gap(),
+			viewportGap,
+			boundary
+		});
+	};
+	surface.style.position = "fixed";
+	surface.style.margin = "0";
+	const presentation = createViewportSurface(surface, {
+		position,
+		bare: options.bare
+	});
+	const trackAnchor = () => {
+		anchorFrame = null;
+		if (!open || !(anchor || written) || point) return;
+		const rect = anchorRect();
+		if (rect && (!lastAnchorRect || rect.left !== lastAnchorRect.left || rect.top !== lastAnchorRect.top || rect.width !== lastAnchorRect.width || rect.height !== lastAnchorRect.height)) presentation.refresh();
+		anchorFrame = owner.requestAnimationFrame(trackAnchor);
+	};
+	const stopTracking = () => {
+		if (anchorFrame !== null) owner.cancelAnimationFrame(anchorFrame);
+		anchorFrame = null;
+		lastAnchorRect = null;
+	};
+	const syncTracking = () => {
+		if (open && (anchor || written) && !point) {
+			if (anchorFrame === null) anchorFrame = owner.requestAnimationFrame(trackAnchor);
+		} else stopTracking();
+	};
+	return {
+		setAnchor(next) {
+			point = null;
+			anchor = next;
+			syncTracking();
+			presentation.refresh();
+		},
+		setPlacement(next) {
+			placement = next || "bottom-start";
+			presentation.refresh();
+		},
+		show() {
+			if (destroyed) return;
+			point = null;
+			open = true;
+			if (anchor || topLayerOpen(surface)) {
+				presentation.show();
+				syncTracking();
+				return;
+			}
+			queueMicrotask(() => {
+				if (destroyed || !open || point || anchor || topLayerOpen(surface)) return;
+				written = writtenPlace(surface, [
+					"position",
+					"margin",
+					"left",
+					"top",
+					"right",
+					"bottom"
+				]);
+				presentation.show();
+				syncTracking();
+			});
+		},
+		showAtPoint(next) {
+			if (destroyed) return;
+			point = next;
+			open = true;
+			syncTracking();
+			presentation.show();
+		},
+		hide() {
+			open = false;
+			point = null;
+			syncTracking();
+			presentation.hide();
+		},
+		refresh: presentation.refresh,
+		destroy() {
+			destroyed = true;
+			open = false;
+			stopTracking();
+			presentation.destroy();
+			anchor = null;
+		}
+	};
+}
 //#endregion
 //#region ../../node_modules/.pnpm/@tiptap+extension-image@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2_/node_modules/@tiptap/extension-image/dist/index.js
 /**
@@ -737,6 +1144,184 @@ function selectedTableCellElement(editor) {
 	return selectionElement(editor)?.closest("td, th");
 }
 //#endregion
+//#region src/editor/selection-surface.ts
+var surfaceSequence = 0;
+/**
+* Shows `element` beside the selection whenever `shouldShow` allows, as Tiptap's bubble menu does,
+* and presents it through Looma's shared overlay layer: in the top layer, placed by the shared
+* flip/shift policy, travelling with its anchor, and registered on the overlay stack.
+*
+* @lifecycle Registers a ProseMirror plugin now; `destroy()` unregisters it and closes the surface.
+* The editor destroying its view closes the surface too.
+* @contract A press inside the surface keeps it open when the editor blurs; dragging hides it.
+*/
+function createSelectionSurface(options) {
+	const { editor, element } = options;
+	const document = element.ownerDocument;
+	const id = `looma-selection-surface-${++surfaceSequence}`;
+	const selectionRect = () => {
+		const { view, state } = editor;
+		const { ranges } = state.selection;
+		const from = Math.min(...ranges.map((range) => range.$from.pos));
+		const to = Math.max(...ranges.map((range) => range.$to.pos));
+		if (isNodeSelection(state.selection)) {
+			let node = view.nodeDOM(from);
+			const wrapper = node?.dataset?.nodeViewWrapper ? node : node?.querySelector?.("[data-node-view-wrapper]");
+			if (wrapper) node = wrapper.firstChild;
+			if (node instanceof Element) return node.getBoundingClientRect();
+		}
+		return posToDOMRect(view, from, to);
+	};
+	let anchor = options.anchor ?? selectionRect;
+	let lastRect = null;
+	let open = false;
+	let destroyed = false;
+	let preventHide = false;
+	let timer;
+	const presentation = createAnchoredSurface(element, {
+		anchor: () => {
+			if (editor.isDestroyed) return lastRect;
+			try {
+				lastRect = anchor();
+			} catch {}
+			return lastRect;
+		},
+		placement: options.placement ?? "top",
+		gap: 10,
+		viewportGap: 5,
+		boundary: options.boundary,
+		maxWidth: options.maxWidth,
+		bare: true
+	});
+	const host = element.parentElement;
+	element.hidden = true;
+	element.tabIndex = 0;
+	element.remove();
+	const show = () => {
+		if (destroyed) return;
+		if (!open) {
+			open = true;
+			openOverlay({
+				id,
+				modal: false,
+				element,
+				relatedElements: options.related?.() ?? [],
+				dismissible: true,
+				requestClose: (reason) => {
+					if (reason === "escape" || reason === "light-dismiss") options.onDismiss?.(reason);
+					else hide();
+				}
+			});
+		}
+		if (!element.isConnected) host?.append(element);
+		presentation.show();
+	};
+	const close = () => {
+		open = false;
+		presentation.hide();
+		element.remove();
+		closeOverlay(document, id);
+	};
+	const hide = () => {
+		if (!open || options.onHide?.() === false) return;
+		close();
+	};
+	const decide = (view, oldState, selectionChanged, docChanged) => {
+		const { state, composing } = view;
+		if (composing || !selectionChanged && !docChanged) return;
+		const { ranges } = state.selection;
+		const from = Math.min(...ranges.map((range) => range.$from.pos));
+		const to = Math.max(...ranges.map((range) => range.$to.pos));
+		if (!options.shouldShow({
+			editor,
+			view,
+			state,
+			oldState,
+			from,
+			to
+		})) {
+			hide();
+			return;
+		}
+		anchor = options.anchor ?? selectionRect;
+		show();
+		presentation.refresh();
+	};
+	const update = (view, oldState) => {
+		const selectionChanged = !oldState?.selection.eq(view.state.selection);
+		const docChanged = !oldState?.doc.eq(view.state.doc);
+		const delay = options.updateDelay ?? 0;
+		if (delay > 0 && view.state.selection.from !== view.state.selection.to) {
+			if (!selectionChanged && !docChanged) return;
+			clearTimeout(timer);
+			timer = setTimeout(() => decide(view, oldState, selectionChanged, docChanged), delay);
+			return;
+		}
+		decide(view, oldState, selectionChanged, docChanged);
+	};
+	const onPointerDown = () => {
+		preventHide = true;
+	};
+	const onDragStart = () => hide();
+	const onFocus = () => {
+		setTimeout(() => {
+			if (!destroyed && !editor.isDestroyed) update(editor.view);
+		});
+	};
+	const onBlur = ({ event }) => {
+		if (preventHide) {
+			preventHide = false;
+			return;
+		}
+		const next = event?.relatedTarget;
+		if (next instanceof Node && (element.contains(next) || next === editor.view.dom)) return;
+		hide();
+	};
+	const onElementBlur = (event) => onBlur({ event });
+	const key = new PluginKey(options.pluginKey);
+	const plugin = new Plugin({
+		key,
+		view: (view) => {
+			element.addEventListener("mousedown", onPointerDown, { capture: true });
+			element.addEventListener("blur", onElementBlur);
+			view.dom.addEventListener("dragstart", onDragStart);
+			editor.on("focus", onFocus);
+			editor.on("blur", onBlur);
+			return {
+				update,
+				destroy() {
+					clearTimeout(timer);
+					element.removeEventListener("mousedown", onPointerDown, { capture: true });
+					element.removeEventListener("blur", onElementBlur);
+					view.dom.removeEventListener("dragstart", onDragStart);
+					editor.off("focus", onFocus);
+					editor.off("blur", onBlur);
+					close();
+				}
+			};
+		}
+	});
+	editor.registerPlugin(plugin);
+	return {
+		element,
+		isOpen: () => open,
+		show,
+		hide,
+		setAnchor(next) {
+			anchor = next;
+			presentation.refresh();
+		},
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			if (!editor.isDestroyed) editor.unregisterPlugin(key);
+			clearTimeout(timer);
+			close();
+			presentation.destroy();
+		}
+	};
+}
+//#endregion
 //#region src/editor/session.ts
 function selectionSnapshot(selection) {
 	return {
@@ -2134,6 +2719,7 @@ var LoomaEditor = defineComponent({
 		let heldFormattingSelection = null;
 		let formattingPopup = null;
 		let linkPopup = null;
+		let imagePopup = null;
 		let heldPressTimer;
 		let heldPress = null;
 		const floatingFormattingMode = () => props.toolbarMode !== "sticky" && !(props.toolbarMode === "popover" && props.toolbarOpen) && !mobile.value;
@@ -2327,7 +2913,7 @@ var LoomaEditor = defineComponent({
 							editorStateVersion.value += 1;
 							const instance = editor.value;
 							if (instance?.isFocused && instance.state.selection.empty && instance.isActive("link") && !linkOpen.value) {
-								linkPopup?.setProps({ getReferenceClientRect: () => link.getBoundingClientRect() });
+								linkPopup?.setAnchor(() => link.getBoundingClientRect());
 								linkPopup?.show();
 							}
 						});
@@ -2468,7 +3054,7 @@ var LoomaEditor = defineComponent({
 				}).catch(() => {});
 			}
 			nextTick(() => {
-				if (context) (props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(instance) ? formattingPopup : linkPopup)?.setProps({ getReferenceClientRect: () => posToDOMRect(instance.view, instance.state.selection.from, instance.state.selection.to) });
+				if (context) (props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(instance) ? formattingPopup : linkPopup)?.setAnchor(() => posToDOMRect(instance.view, instance.state.selection.from, instance.state.selection.to));
 				(linkMode.value === "url" ? linkDestinationInput() : linkFormRoot.value?.querySelector("[data-link-search]"))?.focus();
 			});
 		};
@@ -2537,6 +3123,7 @@ var LoomaEditor = defineComponent({
 			const selection = linkSelection;
 			if (restoreFocus && selection) editor.value?.chain().focus().setTextSelection(selection.to).run();
 			dismissedFormattingSelection = editor.value?.state.selection ?? null;
+			heldFormattingSelection = null;
 			linkPopup?.hide();
 			formattingPopup?.hide();
 		};
@@ -2816,7 +3403,7 @@ var LoomaEditor = defineComponent({
 			tablePickerOpen,
 			formatOpen
 		], ([link, table, format]) => {
-			if (link || table || format || !floatingFormattingMode() || editor.value?.isFocused || formattingPopup?.popper.contains(document.activeElement)) return;
+			if (link || table || format || !floatingFormattingMode() || editor.value?.isFocused || formattingPopup?.element.contains(document.activeElement)) return;
 			heldFormattingSelection = null;
 			formattingPopup?.hide();
 		});
@@ -2998,7 +3585,7 @@ var LoomaEditor = defineComponent({
 			updateCodeUi();
 			setTimeout(() => {
 				if (!tableInteractionActive && !editor.value?.isFocused && !mobileToolbarShell.value?.contains(document.activeElement)) editorFocused.value = false;
-				if (!editor.value?.isFocused && !formattingPickerOpen() && !formattingPopup?.popper.contains(document.activeElement)) heldFormattingSelection = null;
+				if (!editor.value?.isFocused && !formattingPickerOpen() && !formattingPopup?.element.contains(document.activeElement)) heldFormattingSelection = null;
 			}, 0);
 		};
 		const bindEditorUi = (instance) => {
@@ -3053,44 +3640,6 @@ var LoomaEditor = defineComponent({
 		const tableToolbarRef = popupRef(tableToolbarShell);
 		const codeLanguageRef = popupRef(codeLanguageShell, true);
 		const mobileToolbarRef = popupRef(mobileToolbarShell, true);
-		const tippyPresentations = /* @__PURE__ */ new WeakMap();
-		const floatingTippyOptions = (placement, boundary = null) => ({
-			appendTo: () => root.value?.closest("dialog[open], [popover]") ?? document.body,
-			popperOptions: {
-				strategy: "fixed",
-				modifiers: [{
-					name: "eventListeners",
-					enabled: false
-				}, ...boundary ? [{
-					name: "flip",
-					options: { boundary }
-				}, {
-					name: "preventOverflow",
-					options: {
-						boundary,
-						altAxis: true
-					}
-				}] : []]
-			},
-			onShow: () => announceOverlayOpen(root.value?.ownerDocument ?? document, root.value),
-			onMount: (instance) => {
-				let presentation = tippyPresentations.get(instance.popper);
-				if (!presentation) {
-					presentation = createViewportSurface(instance.popper, {
-						bare: true,
-						position: () => {
-							instance.popperInstance?.update();
-						}
-					});
-					tippyPresentations.set(instance.popper, presentation);
-				}
-				presentation.show();
-			},
-			onHidden: (instance) => tippyPresentations.get(instance.popper)?.hide(),
-			onDestroy: (instance) => tippyPresentations.get(instance.popper)?.destroy(),
-			duration: 100,
-			placement
-		});
 		const onDocumentPointerDown = (event) => {
 			const path = typeof event.composedPath === "function" ? event.composedPath() : [];
 			const inElement = (element) => Boolean(element && (path.includes(element) || event.target instanceof Node && element.contains(event.target)));
@@ -3118,7 +3667,7 @@ var LoomaEditor = defineComponent({
 				if (!heldPress || !floatingFormattingMode() || tableResizeActive || !props.editable || !instance.isFocused || slash.active || mention.active || !(selection instanceof TextSelection)) return;
 				dismissedFormattingSelection = null;
 				heldFormattingSelection = selection;
-				formattingPopup?.setProps({ getReferenceClientRect: () => posToDOMRect(instance.view, selection.from, selection.to) });
+				formattingPopup?.setAnchor(() => posToDOMRect(instance.view, selection.from, selection.to));
 				formattingPopup?.show();
 			}, 500);
 		};
@@ -3130,7 +3679,11 @@ var LoomaEditor = defineComponent({
 		};
 		const onFormattingKeyDown = (event) => {
 			cancelHeldPress();
-			if (event.key !== "Escape" || !(event.target instanceof Node) || !(root.value?.contains(event.target) || formattingPopup?.popper.contains(event.target) || linkPopup?.popper.contains(event.target)) || !(formatOpen.value || formattingPopup?.popper.style.visibility === "visible" || linkPopup?.popper.style.visibility === "visible")) return false;
+			if (event.key !== "Escape" || !(event.target instanceof Node) || !(root.value?.contains(event.target) || formattingPopup?.element.contains(event.target) || linkPopup?.element.contains(event.target)) || !(formatOpen.value || formattingPopup?.isOpen() || linkPopup?.isOpen())) return false;
+			dismissFormatting();
+			return true;
+		};
+		const dismissFormatting = () => {
 			const selection = editor.value?.state.selection;
 			dismissedFormattingSelection = selection instanceof TextSelection || selection instanceof AllSelection ? selection : null;
 			heldFormattingSelection = null;
@@ -3138,8 +3691,57 @@ var LoomaEditor = defineComponent({
 			formattingPopup?.hide();
 			linkPopup?.hide();
 			hideTool();
-			return true;
 		};
+		const surfaceRef = (assign, options) => {
+			let current = null;
+			return (node) => {
+				const element = node instanceof HTMLElement ? node : null;
+				if (current?.element === element) return;
+				current?.destroy();
+				current = element && editor.value ? createSelectionSurface(options(element, editor.value)) : null;
+				assign(current);
+			};
+		};
+		const editorRoot = () => root.value ? [root.value] : [];
+		const formattingSurfaceRef = surfaceRef((surface) => {
+			formattingPopup = surface;
+		}, (element, instance) => ({
+			editor: instance,
+			element,
+			pluginKey: "looma-text-formatting-menu",
+			shouldShow: ({ editor: menuEditor }) => (props.toolbarMode !== "popover" || !props.toolbarOpen) && !slash.active && !mention.active && (!props.editable && (props.selectionActions.length > 0 || props.rangeActions.length > 0) || menuEditor.isFocused || formattingPopup?.element.contains(document.activeElement) || linkContextEditing.value || formattingPickerOpen()) && formattingSelectionActive(menuEditor),
+			boundary: () => props.toolbarMode === "contextual" ? root.value : null,
+			related: editorRoot,
+			onHide: () => instance.isEditable && floatingFormattingMode() && formattingPickerOpen() && formattingSelectionActive(instance) ? false : void 0,
+			onDismiss: (reason) => reason === "escape" ? dismissFormatting() : formattingPopup?.hide()
+		}));
+		const linkSurfaceRef = surfaceRef((surface) => {
+			linkPopup = surface;
+		}, (element, instance) => ({
+			editor: instance,
+			element,
+			pluginKey: "looma-link-context-menu",
+			shouldShow: ({ editor: menuEditor, from, to }) => from === to && menuEditor.isActive("link") && !linkOpen.value && !dismissedFormattingSelection?.eq(menuEditor.state.selection) && Boolean(menuEditor.isFocused || linkContextEditing.value || linkPopup?.element.contains(document.activeElement)) && !(props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(menuEditor)),
+			maxWidth: () => Math.min(480, window.innerWidth - 24),
+			related: editorRoot,
+			onDismiss: (reason) => reason === "escape" ? dismissFormatting() : linkPopup?.hide()
+		}));
+		const imageSurfaceRef = surfaceRef((surface) => {
+			imagePopup = surface;
+		}, (element, instance) => ({
+			editor: instance,
+			element,
+			pluginKey: "looma-image-actions",
+			updateDelay: 250,
+			shouldShow: ({ editor: menuEditor }) => menuEditor.isEditable && menuEditor.state.selection instanceof NodeSelection && menuEditor.state.selection.node.type.name === "image",
+			anchor: () => {
+				const dom = instance.view.nodeDOM(instance.state.selection.from);
+				return (dom instanceof Element ? dom.querySelector("img") ?? dom : instance.view.dom).getBoundingClientRect();
+			},
+			maxWidth: () => window.innerWidth - 24,
+			related: editorRoot,
+			onDismiss: () => imagePopup?.hide()
+		}));
 		const onResizePointerDown = (event) => {
 			tableResizeActive = event.target instanceof HTMLElement && event.target.classList.contains("column-resize-handle");
 		};
@@ -3681,47 +4283,16 @@ var LoomaEditor = defineComponent({
 					placement: "top",
 					inverse: true
 				}, () => "Drag to resize column") : null,
-				h(Stack, {
-					key: "looma-formatting-popup-host",
-					gap: "none"
-				}, () => [instance && (props.editable || props.selectionActions.length || props.rangeActions.length) && !mobile.value && (props.toolbarMode === "bubble" || props.toolbarMode === "popover" || props.toolbarMode === "contextual") ? h(BubbleMenu, {
-					editor: instance,
-					pluginKey: "looma-text-formatting-menu",
-					updateDelay: 0,
-					shouldShow: ({ editor: menuEditor }) => (props.toolbarMode !== "popover" || !props.toolbarOpen) && !slash.active && !mention.active && (!props.editable && (props.selectionActions.length > 0 || props.rangeActions.length > 0) || menuEditor.isFocused || formattingPopup?.popper.contains(document.activeElement) || linkContextEditing.value || formattingPickerOpen()) && formattingSelectionActive(menuEditor),
-					tippyOptions: {
-						...floatingTippyOptions("top", props.toolbarMode === "contextual" ? root.value : null),
-						maxWidth: "none",
-						onCreate: (popup) => {
-							formattingPopup = popup;
-						},
-						onDestroy: (popup) => {
-							formattingPopup = null;
-							tippyPresentations.get(popup.popper)?.destroy();
-						},
-						onHide: () => instance.isEditable && floatingFormattingMode() && formattingPickerOpen() && formattingSelectionActive(instance) ? false : void 0
-					}
-				}, { default: () => props.toolbarMode === "contextual" ? h(Stack, { gap: "xs" }, () => [renderToolbar(instance, true), (linkContextEditing.value || instance.state.selection.empty && instance.isActive("link")) && !linkOpen.value && formattingSelectionActive(instance) ? renderLinkContextCard(instance) : null]) : renderToolbar(instance, true, props.toolbarMode === "popover") }) : null]),
-				h(Stack, {
-					key: "looma-link-popup-host",
-					gap: "none"
-				}, () => [instance && props.editable ? h(BubbleMenu, {
-					editor: instance,
-					pluginKey: "looma-link-context-menu",
-					updateDelay: 0,
-					shouldShow: ({ editor: menuEditor, from, to }) => from === to && menuEditor.isActive("link") && !linkOpen.value && !dismissedFormattingSelection?.eq(menuEditor.state.selection) && Boolean(menuEditor.isFocused || linkContextEditing.value || linkPopup?.popper.contains(document.activeElement)) && !(props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(menuEditor)),
-					tippyOptions: {
-						...floatingTippyOptions("top"),
-						maxWidth: Math.min(480, window.innerWidth - 24),
-						onCreate: (popup) => {
-							linkPopup = popup;
-						},
-						onDestroy: (popup) => {
-							linkPopup = null;
-							tippyPresentations.get(popup.popper)?.destroy();
-						}
-					}
-				}, { default: () => props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(instance) ? null : renderLinkContextCard(instance) }) : null]),
+				instance && (props.editable || props.selectionActions.length || props.rangeActions.length) && !mobile.value && (props.toolbarMode === "bubble" || props.toolbarMode === "popover" || props.toolbarMode === "contextual") ? h("div", { key: "looma-formatting-host" }, [h("div", {
+					ref: formattingSurfaceRef,
+					class: "looma-editor__floating-shell looma-editor__formatting-shell",
+					hidden: true
+				}, [props.toolbarMode === "contextual" ? h(Stack, { gap: "xs" }, () => [renderToolbar(instance, true), (linkContextEditing.value || instance.state.selection.empty && instance.isActive("link")) && !linkOpen.value && formattingSelectionActive(instance) ? renderLinkContextCard(instance) : null]) : renderToolbar(instance, true, props.toolbarMode === "popover")])]) : null,
+				instance && props.editable ? h("div", { key: "looma-link-host" }, [h("div", {
+					ref: linkSurfaceRef,
+					class: "looma-editor__floating-shell looma-editor__link-shell",
+					hidden: true
+				}, [props.toolbarMode === "contextual" && floatingFormattingMode() && formattingSelectionActive(instance) ? null : renderLinkContextCard(instance)])]) : null,
 				instance && props.editable && !mobile.value && props.toolbarMode === "popover" && props.toolbarTriggerId ? h(Popover, {
 					class: "looma-editor__formatting-popover",
 					role: "region",
@@ -3737,21 +4308,11 @@ var LoomaEditor = defineComponent({
 					role: "toolbar",
 					"aria-label": "Editor tools"
 				}, [renderToolbar(instance, false)]) : null,
-				instance && props.editable ? h(BubbleMenu, {
-					editor: instance,
-					pluginKey: "looma-image-actions",
-					shouldShow: ({ editor: menuEditor }) => menuEditor.isEditable && menuEditor.state.selection instanceof NodeSelection && menuEditor.state.selection.node.type.name === "image",
-					tippyOptions: {
-						appendTo: () => root.value?.closest("dialog[open], [popover]") ?? document.body,
-						placement: "top",
-						duration: 100,
-						maxWidth: window.innerWidth - 24,
-						getReferenceClientRect: () => {
-							const dom = instance.view.nodeDOM(instance.state.selection.from);
-							return (dom instanceof Element ? dom.querySelector("img") ?? dom : instance.view.dom).getBoundingClientRect();
-						}
-					}
-				}, { default: () => h(ImageControls, { editor: instance }) }) : null,
+				instance && props.editable ? h("div", { key: "looma-image-host" }, [h("div", {
+					ref: imageSurfaceRef,
+					class: "looma-editor__floating-shell looma-editor__image-shell",
+					hidden: true
+				}, [h(ImageControls, { editor: instance })])]) : null,
 				instance ? h(EditorSurface, { density: props.editable ? "comfortable" : props.contentDensity }, () => h("div", { ref: attachDocument })) : null,
 				codeUi.open ? h("div", {
 					ref: codeLanguageRef,