@signal9/era-ui 3.13.1 → 3.13.2

package/dist/apps/notes/editor/bubble-menu.svelte.js

@@ -9,7 +9,7 @@
  */
 import { Extension } from '@tiptap/core';
 import { Plugin, PluginKey } from '@tiptap/pm/state';
-import { mount, unmount } from 'svelte';
+import { flushSync, mount, unmount } from 'svelte';
 import Bold from '@lucide/svelte/icons/bold';
 import Italic from '@lucide/svelte/icons/italic';
 import Strikethrough from '@lucide/svelte/icons/strikethrough';
@@ -83,15 +83,43 @@ class BubbleMenuView {
             return;
         }
         this.#view.active = Object.fromEntries(buttons.map((b) => [b.mark, this.#editor.isActive(b.mark)]));
-        // Measuring requires a laid-out box, so unhide before placing.
+        // Measuring requires a laid-out box, so unhide before placing. flushSync
+        // applies the `active` change above FIRST — measuring a Svelte component
+        // before its pending render lands reads the previous frame's box, which is
+        // the same trap the slash menu documents.
         this.#host.style.display = 'block';
-        placeOverSelection(this.#host, view.coordsAtPos(selection.from), view.coordsAtPos(selection.to));
+        flushSync();
+        placeOverSelection(this.#host, selectionRect(view));
     }
     destroy() {
         unmount(this.#toolbar);
         this.#host.remove();
     }
 }
+/**
+ * The selection's bounding box in viewport coordinates.
+ *
+ * Prefers the live DOM selection, whose rect already unions every line of a
+ * multi-line selection. ProseMirror's coordsAtPos only describes ONE position,
+ * so reconstructing a tall selection's box from its two endpoints is what put
+ * the toolbar 305px off centre. The endpoint union is kept as a fallback for the
+ * case where the DOM selection is unavailable or collapsed to a zero rect (it
+ * still beats nothing, and it is exactly right on a single line).
+ */
+function selectionRect(view) {
+    const dom = window.getSelection();
+    if (dom && dom.rangeCount > 0) {
+        const rect = dom.getRangeAt(0).getBoundingClientRect();
+        if (rect.width > 0 || rect.height > 0)
+            return rect;
+    }
+    const { from, to } = view.state.selection;
+    const a = view.coordsAtPos(from);
+    const b = view.coordsAtPos(to);
+    const left = Math.min(a.left, b.left);
+    const top = Math.min(a.top, b.top);
+    return new DOMRect(left, top, Math.max(a.right, b.right) - left, Math.max(a.bottom, b.bottom) - top);
+}
 export const BubbleMenu = Extension.create({
     name: 'notesBubbleMenu',
     addProseMirrorPlugins() {

package/dist/apps/notes/editor/bubble-toolbar.svelte

@@ -21,12 +21,18 @@
 	let { items, active, onCommand }: Props = $props();
 </script>
 
-<Bar size="sm" class="w-max bg-elevated shadow-lg glass-blur">
+<!-- md with xxs buttons, matching the app's other bars. It was sm + size="icon"
+     — a 22px bar of 14px buttons around 10px glyphs, the smallest combination in
+     the ladder, which is why the formatting controls read as unhittable. -->
+<Bar
+	size="md"
+	class="w-max gap-(--era-xxs-inset-md) bg-elevated px-(--era-xxs-inset-md) shadow-lg glass-blur"
+>
 	{#each items as item (item.mark)}
 		{@const Icon = item.icon}
 		<Button
 			icon
-			size="icon"
+			size="xxs"
 			active={active[item.mark] ?? false}
 			aria-label={item.label}
 			title={item.label}

package/dist/apps/notes/editor/floating.d.ts

@@ -11,11 +11,15 @@
 export declare function createOverlayHost(): HTMLDivElement;
 /** Anchor below `rect`, flipping above when the bottom edge would run off. */
 export declare function placeBelow(host: HTMLElement, rect: DOMRect, gap?: number): void;
-/** Centre over a selection, flipping below when there is no room above. */
-export declare function placeOverSelection(host: HTMLElement, start: {
-    top: number;
-    left: number;
-    bottom: number;
-}, end: {
-    right: number;
-}, gap?: number): void;
+/**
+ * Centre over a selection's BOUNDING BOX, flipping below when there is no room
+ * above.
+ *
+ * Takes the whole rect on purpose. This used to take the two endpoint coords and
+ * centre on `(start.left + end.right) / 2`, which is only correct while the
+ * selection sits on one line: across several lines it averages an x from the
+ * FIRST line with an x from the LAST, and the result points at neither. Measured
+ * on a 7-line selection, the toolbar landed 305px from the selection's centre —
+ * one line was 0px, two lines 4px, so it looked fine until a selection got tall.
+ */
+export declare function placeOverSelection(host: HTMLElement, rect: DOMRect, gap?: number): void;

package/dist/apps/notes/editor/floating.js

@@ -28,14 +28,24 @@ export function placeBelow(host, rect, gap = EDGE) {
     host.style.left = `${Math.max(EDGE, left)}px`;
     host.style.top = `${Math.max(EDGE, top)}px`;
 }
-/** Centre over a selection, flipping below when there is no room above. */
-export function placeOverSelection(host, start, end, gap = 6) {
+/**
+ * Centre over a selection's BOUNDING BOX, flipping below when there is no room
+ * above.
+ *
+ * Takes the whole rect on purpose. This used to take the two endpoint coords and
+ * centre on `(start.left + end.right) / 2`, which is only correct while the
+ * selection sits on one line: across several lines it averages an x from the
+ * FIRST line with an x from the LAST, and the result points at neither. Measured
+ * on a 7-line selection, the toolbar landed 305px from the selection's centre —
+ * one line was 0px, two lines 4px, so it looked fine until a selection got tall.
+ */
+export function placeOverSelection(host, rect, gap = 6) {
     const box = host.getBoundingClientRect();
-    const centerX = (start.left + end.right) / 2;
+    const centerX = rect.left + rect.width / 2;
     const left = clamp(centerX - box.width / 2, EDGE, window.innerWidth - box.width - EDGE);
-    let top = start.top - box.height - gap;
+    let top = rect.top - box.height - gap;
     if (top < EDGE)
-        top = start.bottom + gap;
+        top = rect.bottom + gap;
     host.style.left = `${Math.max(EDGE, left)}px`;
     host.style.top = `${Math.max(EDGE, top)}px`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "3.13.1",
+	"version": "3.13.2",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",