@threadlabs/looma 0.23.17 → 0.23.18

package/components/ui-tree/ui-tree.js

@@ -403,6 +403,17 @@ export default function controller(host) {
   const focusItem = (item) => { syncTabStop(item); item.focus(); };
   const onFocusin = (event) => { if (!interactive(event)) { const item = itemFromEvent(event); if (item) syncTabStop(item); } };
   const onExpansion = () => requestAnimationFrame(() => syncTabStop());
+  let structureFrame = 0;
+  const requestStructureSync = () => {
+    if (structureFrame) return;
+    structureFrame = requestAnimationFrame(() => {
+      structureFrame = 0;
+      if (element.isConnected) syncStructure();
+    });
+  };
+  const onItemReady = (event) => {
+    if (event.target.closest('[role="tree"]') === element) requestStructureSync();
+  };
   const onKeydown = (event) => {
     if (onMoveKeydown(event)) return;
     if (interactive(event)) return;
@@ -441,7 +452,7 @@ export default function controller(host) {
       if (match) { event.preventDefault(); focusItem(match); }
     }
   };
-  const listeners = { dragstart: onDragStart, drag: onDrag, dragenter: onDragOver, dragover: onDragOver, dragleave: onDragLeave, drop: onDrop, dragend: onDragEnd, keydown: onKeydown, focusin: onFocusin, pointerdown: onHandlePointerDown, pointermove: onMovePointer, "ui-tree-expansion-change": onExpansion };
+  const listeners = { dragstart: onDragStart, drag: onDrag, dragenter: onDragOver, dragover: onDragOver, dragleave: onDragLeave, drop: onDrop, dragend: onDragEnd, keydown: onKeydown, focusin: onFocusin, pointerdown: onHandlePointerDown, pointermove: onMovePointer, "ui-tree-expansion-change": onExpansion, "ui-tree-item-ready": onItemReady };
   for (const [name, listener] of Object.entries(listeners)) element.addEventListener(name, listener);
   element.addEventListener("click", onMoveClick, true);
   const observer = new MutationObserver((records) => {
@@ -449,6 +460,12 @@ export default function controller(host) {
     else syncSelection();
   });
   observer.observe(element, { childList: true, subtree: true, attributes: true, attributeFilter: ["aria-selected"] });
+  // Responsive panels can reveal existing rows without changing the DOM. Keep
+  // the previous roving item while hidden, then reconcile the visible layout.
+  const size = new ResizeObserver(() => {
+    if (element.isConnected && element.getClientRects().length) requestStructureSync();
+  });
+  size.observe(element);
   const stop = host.effect(() => {
     element.setAttribute("aria-label", String(host.props.label.value || "Tree"));
     syncSelection();
@@ -458,6 +475,8 @@ export default function controller(host) {
     finish();
     stop();
     observer.disconnect();
+    size.disconnect();
+    cancelAnimationFrame(structureFrame);
     cancelHover();
     announcer.remove();
     for (const [name, listener] of Object.entries(listeners)) element.removeEventListener(name, listener);

package/components/ui-tree-item/ui-tree-item.js

@@ -211,6 +211,9 @@ export default function controller(host) {
   });
   if (actions) actionsSize.observe(actions);
 
+  // A parent may have sent its initial roving state before this controller loaded.
+  element.dispatchEvent(new CustomEvent("ui-tree-item-ready", { bubbles: true }));
+
   return () => {
     clearTimeout(marqueeRestart);
     stop?.();

package/package.json

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

package/vue/editor/index.js

@@ -1285,6 +1285,12 @@ var LoomaEditor = defineComponent({
 				h(Tooltip, { for: removeId }, () => "Remove link")
 			]);
 		};
+		const renderLinkContextCard = (instance) => h(Card, {
+			variant: "elevated",
+			padding: linkContextEditing.value ? "sm" : "xs",
+			size: linkContextEditing.value ? "sm" : "content",
+			class: ["looma-editor__link-context", { "looma-editor__link-context--editing": linkContextEditing.value }]
+		}, () => [renderLinkContext(instance)]);
 		const captureBlockAction = () => {
 			const instance = editor.value;
 			const head = instance?.state.selection.$head;
@@ -1993,16 +1999,26 @@ var LoomaEditor = defineComponent({
 				instance && props.editable && !mobile.value && (props.toolbarMode === "bubble" || props.toolbarMode === "popover" || props.toolbarMode === "contextual") ? h(BubbleMenu, {
 					editor: instance,
 					pluginKey: "looma-text-formatting-menu",
-					shouldShow: ({ editor: menuEditor, from, to }) => (props.toolbarMode !== "popover" || !props.toolbarOpen) && (props.toolbarMode === "contextual" ? menuEditor.isFocused : shouldShowTextFormattingToolbar(menuEditor, from, to)),
+					shouldShow: ({ editor: menuEditor, from, to }) => (props.toolbarMode !== "popover" || !props.toolbarOpen) && (props.toolbarMode === "contextual" ? menuEditor.isFocused || linkContextEditing.value : shouldShowTextFormattingToolbar(menuEditor, from, to)),
 					tippyOptions: {
 						appendTo: () => root.value?.closest("dialog[open], [popover]") ?? document.body,
 						onShow: () => announceOverlayOpen(root.value?.ownerDocument ?? document, root.value),
 						duration: 100,
 						maxWidth: "none",
-						placement: "top"
+						placement: "top",
+						...props.toolbarMode === "contextual" && root.value ? { popperOptions: { modifiers: [{
+							name: "flip",
+							options: { boundary: root.value }
+						}, {
+							name: "preventOverflow",
+							options: {
+								boundary: root.value,
+								altAxis: true
+							}
+						}] } } : {}
 					}
-				}, { default: () => renderToolbar(instance, true, props.toolbarMode === "popover") }) : null,
-				instance && props.editable && !mobile.value ? h(BubbleMenu, {
+				}, { default: () => props.toolbarMode === "contextual" ? h(Stack, { gap: "xs" }, () => [renderToolbar(instance, true), (linkContextEditing.value || instance.state.selection.empty && instance.isActive("link")) && !linkOpen.value ? renderLinkContextCard(instance) : null]) : renderToolbar(instance, true, props.toolbarMode === "popover") }) : null,
+				instance && props.editable && !mobile.value && props.toolbarMode !== "contextual" ? h(BubbleMenu, {
 					editor: instance,
 					pluginKey: "looma-link-context-menu",
 					shouldShow: ({ editor: menuEditor, from, to }) => from === to && menuEditor.isActive("link") && !linkOpen.value,
@@ -2013,12 +2029,7 @@ var LoomaEditor = defineComponent({
 						maxWidth: Math.min(480, window.innerWidth - 24),
 						placement: "bottom"
 					}
-				}, { default: () => h(Card, {
-					variant: "elevated",
-					padding: linkContextEditing.value ? "sm" : "xs",
-					size: linkContextEditing.value ? "sm" : "content",
-					class: ["looma-editor__link-context", { "looma-editor__link-context--editing": linkContextEditing.value }]
-				}, () => [renderLinkContext(instance)]) }) : null,
+				}, { default: () => renderLinkContextCard(instance) }) : null,
 				instance && props.editable && !mobile.value && props.toolbarMode === "popover" && props.toolbarTriggerId ? h(Popover, {
 					class: "looma-editor__formatting-popover",
 					role: "region",