@signal9/era-ui 3.13.0 → 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/dist/apps/notes/note-editor.svelte

@@ -457,7 +457,17 @@
 	.era-notes-prose :global(.tiptap .column-resize-handle) {
 		background-color: var(--color-primary);
 	}
-	.era-notes-prose :global(.tiptap ::selection) {
-		background: var(--color-4);
-	}
+	/* NO ::selection rule here, deliberately.
+	 *
+	 * era owns text selection as a surface token contract — --era-selection-bg /
+	 * -fg / -shadow (surfaces/base.css), which is how flat gets inverse video,
+	 * glass a glowing wash, and bevel an opaque accent bar. This file used to
+	 * override it with `background: var(--color-4)` and no `color`, which threw
+	 * all of that away AND left body text on a mid-scale grey: the band barely
+	 * separated from the page and the glyphs sat on top of it at whatever
+	 * contrast happened to fall out. Dropping the override restores both the
+	 * contrast (bright fill, --color-1 glyphs) and the per-surface treatment.
+	 *
+	 * The ProseMirror overrides above are still needed — those replace hardcoded
+	 * library chrome that no era token would otherwise reach. */
 </style>

package/dist/apps/notes/notes.svelte

@@ -223,7 +223,7 @@
 									{#if note.icon}
 										{note.icon}
 									{:else}
-										<FileText class="size-xs text-muted" />
+										<FileText class="size-(--era-icon-xxs) text-muted" />
 									{/if}
 								</span>
 
@@ -232,7 +232,9 @@
 								<!-- One cell, three occupants: the age at rest, the actions on
 								     hover. Swapping them in place keeps the row from reflowing. -->
 								<span class="shrink-0 text-muted group-hover:hidden">
-									{#if note.pinned}<Pin class="size-xs" />{:else}{formatAge(note.updatedAt)}{/if}
+									{#if note.pinned}<Pin class="size-(--era-icon-xxs)" />{:else}{formatAge(
+											note.updatedAt
+										)}{/if}
 								</span>
 								<span class="hidden shrink-0 items-center gap-(--era-xs-inset-md) group-hover:flex">
 									<Button
@@ -276,9 +278,15 @@
 	<!-- Document pane -->
 	<div class="flex min-w-0 flex-1 flex-col">
 		{#if selected}
-			<Bar class="shrink-0 rounded-none border-b border-divider-faded">
+			<!-- md and xxs-padded, exactly like the sidebar's filter bar: the two
+			     headers sit side by side across the top of the app, so an lg bar
+			     here left the document header 8px taller than the list header. -->
+			<Bar
+				size="md"
+				class="shrink-0 gap-(--era-xxs-inset-md) rounded-none border-b border-divider-faded px-(--era-xxs-inset-md)"
+			>
 				<Popover.Root bind:open={iconPickerOpen}>
-					<Popover.Trigger icon aria-label="Change icon" title="Change icon">
+					<Popover.Trigger icon size="xxs" aria-label="Change icon" title="Change icon">
 						{#if selected.icon}
 							<span aria-hidden="true">{selected.icon}</span>
 						{:else}
@@ -321,8 +329,11 @@
 					</Popover.Content>
 				</Popover.Root>
 
+				<!-- Chromeless, like the filter input: an h-md Input inside an h-md bar
+				     fills it edge to edge, so the well would draw a box with no room
+				     around it. The bar is the container. -->
 				<Input
-					class="min-w-0 flex-1 bg-transparent shadow-none"
+					class="h-full min-w-0 flex-1 bg-transparent px-0 shadow-none"
 					aria-label="Note title"
 					placeholder="Untitled"
 					value={selected.title}

package/package.json

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