@threadlabs/looma 0.31.1 → 0.31.2

package/components/shared/tooltip.js

@@ -0,0 +1,7 @@
+/** Resolve the inherited pointer-intent delay; CSS time values and millisecond numbers are accepted. */
+export function tooltipShowDelay(element, fallback = 500) {
+  if (!element) return fallback;
+  const value = element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue("--ui-tooltip-show-delay").trim();
+  const match = /^([0-9]+(?:\.[0-9]+)?)(ms|s)?$/.exec(value);
+  return match ? Number(match[1]) * (match[2] === "s" ? 1000 : 1) : fallback;
+}

package/components/ui-tooltip/ui-tooltip.js

@@ -1,3 +1,4 @@
+import { tooltipShowDelay } from "../shared/tooltip.js";
 import { closeOverlay, createAnchoredSurface, createIdResolver, onOverlayOpen, openOverlay } from "../shared/overlay.js";
 
 const warmTooltips = new WeakMap();
@@ -61,7 +62,7 @@ export function connect(host) {
     showTimer = setTimeout(() => {
       showTimer = null;
       setOpen(true, "pointer");
-    }, warm.active > 0 || warm.until > Date.now() ? 0 : Math.max(0, Number(host.props.showDelay.value ?? 500)));
+    }, warm.active > 0 || warm.until > Date.now() ? 0 : Math.max(0, host.props.showDelay.inputValue != null ? Number(host.props.showDelay.value) : tooltipShowDelay(element)));
   };
   const onLeave = () => {
     clearShow();
@@ -134,6 +135,8 @@ export function connect(host) {
     if (how === "hover") {
       trigger.addEventListener("pointerenter", onEnter);
       trigger.addEventListener("pointerleave", onLeave);
+      // Editor decorations can acquire their tooltip after the pointer has already entered.
+      if (trigger.matches(":hover")) onEnter({ pointerType: "mouse" });
     }
     trigger.addEventListener("focusin", onFocusin);
     trigger.addEventListener("focusout", onFocusout);

package/editor/chunks/extensions.js

@@ -11155,6 +11155,26 @@ var TableHeader = Node$1.create({
 });
 //#endregion
 //#region src/editor/extensions/table-formatting.ts
+/** Table chrome lives outside the horizontal scroller, within the table's document block. */
+var LoomaTableView = class extends TableView {
+	toolbarHost;
+	constructor(node, cellMinWidth) {
+		super(node, cellMinWidth);
+		const scroller = this.dom;
+		this.dom = document.createElement("div");
+		this.dom.dataset.loomaTableBlock = "";
+		this.toolbarHost = document.createElement("div");
+		this.toolbarHost.dataset.loomaTableToolbarHost = "";
+		this.toolbarHost.contentEditable = "false";
+		this.dom.append(scroller, this.toolbarHost);
+	}
+	ignoreMutation(mutation) {
+		return mutation.type !== "selection" && this.toolbarHost.contains(mutation.target) || super.ignoreMutation(mutation);
+	}
+	stopEvent(event) {
+		return event.target instanceof globalThis.Node && this.toolbarHost.contains(event.target);
+	}
+};
 /**
 * Looma's table behavior policy: resizable columns, stable minimum cell width,
 * and no independently resizable trailing column. The narrow handle is also a
@@ -11165,6 +11185,7 @@ var TableHeader = Node$1.create({
 */
 var LoomaTable = Table.configure({
 	resizable: true,
+	View: LoomaTableView,
 	handleWidth: 3,
 	cellMinWidth: 112,
 	lastColumnResizable: false

package/editor/table-ui.d.ts

@@ -17,17 +17,8 @@ export declare const LOOMA_TABLE_CONTROLS_CLOSED: LoomaTableControls;
  * with nothing selected; narrow screens use the editing dock instead of the toolbar and overlay.
  */
 export declare function tableControls(state: ActiveTableUiState, selectionInTable: boolean, narrow: boolean): LoomaTableControls;
-/**
- * Centers the table toolbar on the table, at most 420px wide and 12px inside the viewport's sides,
- * above the table when there is room and below it otherwise.
- */
-export declare function tableToolbarPlacement(table: DOMRect, viewportWidth: number): {
-    top: string;
-    left: string;
-    maxWidth: string;
-};
-/** The overlay covers the table exactly. */
-export declare const tableOverlayPlacement: (table: DOMRect) => {
+/** Inline controls cover the table in the editor's coordinate system. */
+export declare const tableOverlayPlacement: (table: DOMRect, editor: DOMRect) => {
     top: string;
     left: string;
     width: string;

package/editor/toolbar-tooltip.d.ts

@@ -22,4 +22,4 @@ export interface LoomaToolbarTooltip {
     destroy(): void;
 }
 /** Calls `onChange` after every state change. */
-export declare function createToolbarTooltip(onChange: (state: LoomaToolbarTooltipState) => void): LoomaToolbarTooltip;
+export declare function createToolbarTooltip(onChange: (state: LoomaToolbarTooltipState) => void, delay?: () => number): LoomaToolbarTooltip;

package/package.json

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

package/vue/components.css

@@ -10438,6 +10438,30 @@ html[data-ui-input-modality="touch"]
 :is([data-component~="ui-editor-surface"], .ui-editor-surface) .ProseMirror[data-link-navigation] a[href] {
   cursor: pointer;
 }
+
+/* Inline table affordances share the document's scroll chain; popups use the top layer. */
+.looma-editor__table-overlay-shell {
+  position: absolute;
+  z-index: var(--ui-editor-overlay-z-index, 299);
+  overflow: visible;
+  pointer-events: none;
+}
+
+/* The toolbar follows its table, lifting inside the document scroller only when needed. */
+[data-looma-table-toolbar-host] { display: contents; }
+.looma-editor__table-toolbar-shell {
+  position: sticky;
+  bottom: var(--ui-space-3);
+  z-index: var(--ui-editor-popover-z-index, 300);
+  width: max-content;
+  max-width: 100%;
+  margin: var(--ui-space-3) auto 0;
+  overflow-x: auto;
+}
+
+.looma-editor .ProseMirror [data-looma-table-block] + p {
+  margin-top: var(--ui-editor-table-following-gap, var(--ui-space-4));
+}
 /**
  * Looma editor styles (tokens-based).
  * Tables, context menu, insert-table grid, slash menu. Use with ProseMirror/Tiptap content.
@@ -10738,7 +10762,6 @@ html[data-ui-input-modality="touch"]
 
 .looma-editor__table-picker-popover,
 .looma-editor__chip-popover,
-.looma-editor__table-toolbar-shell,
 .looma-editor__table-menu-shell {
   z-index: var(--ui-editor-popover-z-index, 300);
 }
@@ -10768,9 +10791,7 @@ html[data-ui-input-modality="touch"]
   outline-offset: var(--ui-focus-width);
 }
 
-.looma-editor__table-toolbar-shell,
-.looma-editor__table-menu-shell,
-.looma-editor__table-overlay-shell {
+.looma-editor__table-menu-shell {
   position: fixed;
 }
 
@@ -10836,12 +10857,6 @@ html[data-ui-input-modality="touch"]
   color: var(--ui-text-primary, #111827);
 }
 
-.looma-editor__table-overlay-shell {
-  z-index: var(--ui-editor-overlay-z-index, 299);
-  overflow: visible;
-  pointer-events: none;
-}
-
 .looma-editor .ProseMirror .looma-mention {
   padding: 0.08em 0.28em;
   color: var(--ui-editor-mention-color, var(--ui-accent-active, var(--ui-accent-solid)));

package/vue/editor/index.js

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, shallowRef, useId, watch } from "vue";
+import { Teleport, computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, shallowRef, useId, watch } from "vue";
 import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getTableOfContentsEntries, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeTableOfContentsConfig } from "@threadlabs/looma/editor";
 import { Button, Card, EditorBlockActions, EditorChipEditor, EditorCodeLanguage, EditorFootnoteEditor, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, IconButton, Popover, Stack, StatusMessage, Text, Tooltip } from "@threadlabs/looma/vue";
 import { Editor, Extension, InputRule, Node as Node$1, PasteRule, getText, getTextSerializersFromSchema, isNodeSelection, mergeAttributes, nodeInputRule, posToDOMRect } from "@tiptap/core";
@@ -2291,25 +2291,10 @@ function tableControls(state, selectionInTable, narrow) {
 		capabilities: state.capabilities
 	};
 }
-/** Space, in pixels, the toolbar needs above a table; with less it sits below. */
-var ROOM_ABOVE$1 = 76;
-/**
-* Centers the table toolbar on the table, at most 420px wide and 12px inside the viewport's sides,
-* above the table when there is room and below it otherwise.
-*/
-function tableToolbarPlacement(table, viewportWidth) {
-	const width = Math.min(420, viewportWidth - 24);
-	const left = Math.min(Math.max(12, table.left + (table.width - width) / 2), Math.max(12, viewportWidth - width - 12));
-	return {
-		top: `${table.top > ROOM_ABOVE$1 ? table.top - 52 : table.bottom + 12}px`,
-		left: `${left}px`,
-		maxWidth: `${width}px`
-	};
-}
-/** The overlay covers the table exactly. */
-var tableOverlayPlacement = (table) => ({
-	top: `${table.top}px`,
-	left: `${table.left}px`,
+/** Inline controls cover the table in the editor's coordinate system. */
+var tableOverlayPlacement = (table, editor) => ({
+	top: `${table.top - editor.top}px`,
+	left: `${table.left - editor.left}px`,
 	width: `${table.width}px`,
 	height: `${table.height}px`
 });
@@ -3114,8 +3099,17 @@ function formatEditorShortcut(keys, apple) {
 	].filter(Boolean).join("+");
 }
 var isApplePlatform = () => typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test(navigator.userAgentData?.platform || navigator.platform || navigator.userAgent);
+//#endregion
+//#region src/components/shared/tooltip.js
+/** Resolve the inherited pointer-intent delay; CSS time values and millisecond numbers are accepted. */
+function tooltipShowDelay$1(element, fallback = 500) {
+	if (!element) return fallback;
+	const value = element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue("--ui-tooltip-show-delay").trim();
+	const match = /^([0-9]+(?:\.[0-9]+)?)(ms|s)?$/.exec(value);
+	return match ? Number(match[1]) * (match[2] === "s" ? 1e3 : 1) : fallback;
+}
 /** Calls `onChange` after every state change. */
-function createToolbarTooltip(onChange) {
+function createToolbarTooltip(onChange, delay = () => 400) {
 	let state = {
 		for: "",
 		label: "",
@@ -3150,7 +3144,7 @@ function createToolbarTooltip(onChange) {
 			if (!open) timer = setTimeout(() => {
 				timer = void 0;
 				set({ open: true });
-			}, 400);
+			}, delay());
 		},
 		hide() {
 			clear();
@@ -10530,6 +10524,15 @@ defineComponent$1("ui-text", createUiText, [
 	"wrap"
 ]);
 //#endregion
+//#region components/shared/tooltip.js
+/** Resolve the inherited pointer-intent delay; CSS time values and millisecond numbers are accepted. */
+function tooltipShowDelay(element, fallback = 500) {
+	if (!element) return fallback;
+	const value = element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue("--ui-tooltip-show-delay").trim();
+	const match = /^([0-9]+(?:\.[0-9]+)?)(ms|s)?$/.exec(value);
+	return match ? Number(match[1]) * (match[2] === "s" ? 1e3 : 1) : fallback;
+}
+//#endregion
 //#region components/ui-tooltip/ui-tooltip.js
 var ui_tooltip_exports = /* @__PURE__ */ __exportAll({ connect: () => connect$4 });
 var warmTooltips = /* @__PURE__ */ new WeakMap();
@@ -10606,7 +10609,7 @@ function connect$4(host) {
 		showTimer = setTimeout(() => {
 			showTimer = null;
 			setOpen(true, "pointer");
-		}, warm.active > 0 || warm.until > Date.now() ? 0 : Math.max(0, Number(host.props.showDelay.value ?? 500)));
+		}, warm.active > 0 || warm.until > Date.now() ? 0 : Math.max(0, host.props.showDelay.inputValue != null ? Number(host.props.showDelay.value) : tooltipShowDelay(element)));
 	};
 	const onLeave = () => {
 		clearShow();
@@ -10676,6 +10679,7 @@ function connect$4(host) {
 		if (how === "hover") {
 			trigger.addEventListener("pointerenter", onEnter);
 			trigger.addEventListener("pointerleave", onLeave);
+			if (trigger.matches(":hover")) onEnter({ pointerType: "mouse" });
 		}
 		trigger.addEventListener("focusin", onFocusin);
 		trigger.addEventListener("focusout", onFocusout);
@@ -14758,7 +14762,7 @@ var LoomaEditor = defineComponent({
 		const toolbarScope = `looma-editor-tool-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const toolbarTooltip = createToolbarTooltip((state) => {
 			tooltip.value = state;
-		});
+		}, () => tooltipShowDelay$1(root.value));
 		const tooltip = shallowRef(toolbarTooltip.state);
 		const resizeHintFor = ref("");
 		let resizeHintSequence = 0;
@@ -14830,7 +14834,7 @@ var LoomaEditor = defineComponent({
 			rows: 0,
 			cols: 0,
 			geometry: null,
-			toolbarStyle: {},
+			toolbarTarget: null,
 			overlayStyle: {},
 			menuStyle: {},
 			capabilities: LOOMA_TABLE_CONTROLS_CLOSED.capabilities
@@ -15362,8 +15366,8 @@ var LoomaEditor = defineComponent({
 			tableUi.rows = Math.max(0, geometry.rowBoundaries.length - 1);
 			tableUi.cols = Math.max(0, geometry.columnBoundaries.length - 1);
 			tableUi.geometry = geometry;
-			tableUi.toolbarStyle = tableToolbarPlacement(rect, window.innerWidth);
-			tableUi.overlayStyle = tableOverlayPlacement(rect);
+			tableUi.toolbarTarget = table.closest("[data-looma-table-block]")?.querySelector("[data-looma-table-toolbar-host]") ?? null;
+			tableUi.overlayStyle = tableOverlayPlacement(rect, root.value.getBoundingClientRect());
 		};
 		const onEditorFocus = () => {
 			editorFocused.value = true;
@@ -15429,13 +15433,10 @@ var LoomaEditor = defineComponent({
 				presentation?.show();
 			};
 		};
-		const tableToolbarRef = popupRef(tableToolbarShell);
 		const codeLanguageRef = popupRef(codeLanguageShell, true);
 		const mobileToolbarRef = popupRef(mobileToolbarShell, true);
-		const presentTableOverlay = popupRef(tableOverlayShell);
 		const tableOverlayRef = (node) => {
-			presentTableOverlay(node);
-			if (node instanceof HTMLElement) node.hidden = !tableUi.overlayOpen;
+			tableOverlayShell.value = node instanceof HTMLElement ? node : null;
 		};
 		const onDocumentPointerDown = (event) => {
 			const path = typeof event.composedPath === "function" ? event.composedPath() : [];
@@ -16048,8 +16049,6 @@ var LoomaEditor = defineComponent({
 			}, [
 				resizeHintFor.value ? h(Tooltip, {
 					for: resizeHintFor.value,
-					open: true,
-					trigger: "focus",
 					placement: "top",
 					inverse: true
 				}, () => "Drag to resize column") : null,
@@ -16263,12 +16262,11 @@ var LoomaEditor = defineComponent({
 						mention.select?.(event.detail.index);
 					}
 				}) : null,
-				tableUi.toolbarOpen ? h("div", {
+				tableUi.toolbarOpen && tableUi.toolbarTarget ? h(Teleport, { to: tableUi.toolbarTarget }, [h("div", {
 					key: "looma-table-toolbar-shell",
-					ref: tableToolbarRef,
-					class: "looma-editor__table-toolbar-shell",
-					style: tableUi.toolbarStyle
-				}, [h(EditorTableToolbar, tableProps)]) : null,
+					ref: tableToolbarShell,
+					class: "looma-editor__table-toolbar-shell"
+				}, [h(EditorTableToolbar, tableProps)])]) : null,
 				instance && props.editable && !mobile.value ? h("div", {
 					key: "looma-table-overlay-shell",
 					ref: tableOverlayRef,