@threadlabs/looma 0.23.23 → 0.23.24

package/components/shared/overlay.js

@@ -205,6 +205,8 @@ export function createAnchoredSurface(surface, options = {}) {
   let point = null;
   let open = false;
   let frame = null;
+  let anchorFrame = null;
+  let lastAnchorRect = null;
   let abort = null;
   let sizeObserver = null;
   surface.setAttribute("popover", "manual");
@@ -218,12 +220,31 @@ export function createAnchoredSurface(surface, options = {}) {
       return;
     }
     if (!anchor) return;
-    fallbackPosition(surface, anchor.getBoundingClientRect(), placement, gap(), viewportGap);
+    lastAnchorRect = anchor.getBoundingClientRect();
+    fallbackPosition(surface, lastAnchorRect, placement, gap(), viewportGap);
   };
   const schedule = () => {
     if (open && frame === null) frame = owner.requestAnimationFrame(position);
   };
+  // Resize and scroll events do not report an ancestor's transition or layout shift.
+  // While visible, sample the anchor and only re-position when its bounds change.
+  const trackAnchor = () => {
+    anchorFrame = null;
+    if (!open || !anchor || point) return;
+    const rect = anchor.getBoundingClientRect();
+    if (!lastAnchorRect || rect.left !== lastAnchorRect.left || rect.top !== lastAnchorRect.top
+      || rect.width !== lastAnchorRect.width || rect.height !== lastAnchorRect.height) schedule();
+    anchorFrame = owner.requestAnimationFrame(trackAnchor);
+  };
+  const stopTracking = () => {
+    if (anchorFrame !== null) owner.cancelAnimationFrame(anchorFrame);
+    anchorFrame = null;
+    lastAnchorRect = null;
+  };
   const syncListeners = () => {
+    if (open && anchor && !point) {
+      if (anchorFrame === null) anchorFrame = owner.requestAnimationFrame(trackAnchor);
+    } else stopTracking();
     const needed = open && (point || anchor);
     if (!needed) {
       abort?.abort();
@@ -251,7 +272,7 @@ export function createAnchoredSurface(surface, options = {}) {
     showAtPoint(next) { point = next; open = true; syncListeners(); show(surface); position(); schedule(); observeSize(); },
     hide() { open = false; point = null; syncListeners(); stopSize(); if (frame !== null) owner.cancelAnimationFrame(frame); frame = null; hide(surface); },
     refresh: schedule,
-    destroy() { open = false; abort?.abort(); abort = null; stopSize(); if (frame !== null) owner.cancelAnimationFrame(frame); frame = null; hide(surface); anchor = null; },
+    destroy() { open = false; stopTracking(); abort?.abort(); abort = null; stopSize(); if (frame !== null) owner.cancelAnimationFrame(frame); frame = null; hide(surface); anchor = null; },
   };
 }
 

package/package.json

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

package/vue/components.css

@@ -9969,27 +9969,4 @@ html[data-ui-input-modality="touch"]
   width: 3px;
   background: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
 }
-
-.ProseMirror .column-resize-handle::before {
-  content: "Drag to resize column";
-  position: absolute;
-  z-index: 4;
-  top: 4px;
-  left: calc(100% + 6px);
-  width: max-content;
-  padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
-  border-radius: var(--ui-radius-sm, 4px);
-  background: var(--ui-text-primary, #1a1a1a);
-  color: var(--ui-surface-elevated, #fff);
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  line-height: var(--ui-line-height-md, 1.4);
-  opacity: 0;
-  transform: none;
-  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-  pointer-events: none;
-}
-
-.ProseMirror .column-resize-handle:hover::before {
-  opacity: 1;
-}
 /*$vite$:1*/

package/vue/editor/index.js

@@ -1758,6 +1758,8 @@ var LoomaEditor = defineComponent({
 		const tooltipLabel = ref("");
 		const tooltipShortcut = ref("");
 		const tooltipOpen = ref(false);
+		const resizeHintFor = ref("");
+		let resizeHintSequence = 0;
 		let tooltipTimer = 0;
 		const clearTooltipTimer = () => {
 			if (tooltipTimer) window.clearTimeout(tooltipTimer);
@@ -2879,6 +2881,11 @@ var LoomaEditor = defineComponent({
 			nextTick(updateTableUi);
 		};
 		const onEditorPointerOver = (event) => {
+			const handle = event.pointerType !== "touch" && event.target instanceof HTMLElement ? event.target.closest(".column-resize-handle") : null;
+			if (handle) {
+				if (!handle.id) handle.id = `${toolbarScope}-resize-${++resizeHintSequence}`;
+				resizeHintFor.value = handle.id;
+			}
 			const cell = event.target instanceof HTMLElement ? event.target.closest("td, th") : null;
 			if (!cell) return;
 			if (cell === hoveredTableCell) return;
@@ -2890,6 +2897,8 @@ var LoomaEditor = defineComponent({
 			});
 		};
 		const onEditorPointerOut = (event) => {
+			const handle = event.target instanceof HTMLElement ? event.target.closest(".column-resize-handle") : null;
+			if (handle && (!(event.relatedTarget instanceof Node) || !handle.contains(event.relatedTarget))) resizeHintFor.value = "";
 			const fromCell = event.target instanceof HTMLElement ? event.target.closest("td, th") : null;
 			if (!fromCell || fromCell !== hoveredTableCell) return;
 			const next = event.relatedTarget;
@@ -2898,6 +2907,7 @@ var LoomaEditor = defineComponent({
 			nextTick(updateTableUi);
 		};
 		const onEditorPointerLeave = (event) => {
+			resizeHintFor.value = "";
 			const next = event.relatedTarget;
 			if (next instanceof Node && (tableOverlayShell.value?.contains(next) || tableToolbarShell.value?.contains(next) || tableMenuShell.value?.contains(next))) return;
 			if (!hoveredTableCell) return;
@@ -3111,6 +3121,13 @@ var LoomaEditor = defineComponent({
 				onDblclick: onImageDoubleClick,
 				onKeydown: onImageKeyDown
 			}, [
+				resizeHintFor.value ? h(Tooltip, {
+					for: resizeHintFor.value,
+					open: true,
+					trigger: "focus",
+					placement: "top",
+					inverse: true
+				}, () => "Drag to resize column") : null,
 				instance && props.editable && !mobile.value && (props.toolbarMode === "bubble" || props.toolbarMode === "popover" || props.toolbarMode === "contextual") ? h(BubbleMenu, {
 					editor: instance,
 					pluginKey: "looma-text-formatting-menu",