@signal9/era-ui 3.13.1 → 3.14.0

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/notes.svelte

@@ -158,16 +158,10 @@
 			size="md"
 			class="shrink-0 gap-(--era-xxs-inset-md) rounded-none border-b border-divider-faded px-(--era-xxs-inset-md)"
 		>
-			<!-- The glyph is on the ICON tier but every other child of this bar is on
-			     the xxs tier, so a bare svg here gets the bar's 3px side padding
-			     against its own ~6px vertical inset. The holder puts it on the same
-			     tier as the new-note button — one even gap for every child — while
-			     the glyph itself stays icon-sized inside it. -->
-			<span class="flex size-xxs shrink-0 items-center justify-center">
-				<Search class="size-(--era-icon-xxs) text-muted" />
-			</span>
-			<input
-				class="h-full min-w-0 flex-1 bg-transparent text-body text-fg outline-none placeholder:text-muted"
+			<Input
+				icon={Search}
+				bare
+				class="min-w-0 flex-1"
 				type="text"
 				placeholder="Filter…"
 				aria-label="Filter notes"
@@ -329,11 +323,9 @@
 					</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="h-full min-w-0 flex-1 bg-transparent px-0 shadow-none"
+					bare
+					class="min-w-0 flex-1"
 					aria-label="Note title"
 					placeholder="Untitled"
 					value={selected.title}

package/dist/generated-docs/input.md

@@ -15,4 +15,6 @@ Inherits all props from `HTMLInputAttributes`.
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `ref?` | `HTMLInputElement \| null` | `null` | bindable |
+| `icon?` | `Component<IconProps> \| null` | `null` | Lucide glyph rendered inside the field, left of the text. |
+| `bare?` | `boolean` | `false` | Drop the field chrome — for an input inside a container that is already the field. |
 | `value?` | `(forwarded)` | `''` | bindable |

package/dist/generated-docs/llms-full.txt

@@ -2753,6 +2753,8 @@ Inherits all props from `HTMLInputAttributes`.
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `ref?` | `HTMLInputElement \| null` | `null` | bindable |
+| `icon?` | `Component<IconProps> \| null` | `null` | Lucide glyph rendered inside the field, left of the text. |
+| `bare?` | `boolean` | `false` | Drop the field chrome — for an input inside a container that is already the field. |
 | `value?` | `(forwarded)` | `''` | bindable |
 
 <!-- end: input -->

package/dist/generated-docs/manifest.json

@@ -631,7 +631,7 @@
       "slug": "input",
       "title": "Input",
       "summary": "A text input field, with textarea variant.",
-      "tokenEstimate": 87,
+      "tokenEstimate": 145,
       "sections": [
         "Import",
         "Props"

package/dist/ui/input/input.svelte

@@ -1,27 +1,86 @@
+<script lang="ts" module>
+	import { cn, tv } from '../../utils/index.js';
+
+	/**
+	 * The field shell — the chrome an input paints, minus the text styling.
+	 *
+	 * Split out as a variant because an `icon` input has to move that chrome onto
+	 * a WRAPPER (the glyph and the <input> sit inside one field), while a plain
+	 * one keeps it on the <input> itself. Both spellings therefore have to
+	 * describe the same box, and a variant is how they stay one description.
+	 */
+	export const inputVariants = tv({
+		base: 'flex w-full era-interactive text-body text-fg',
+		variants: {
+			/**
+			 * `bare` drops the field chrome entirely — no fill, no well, no side
+			 * padding. For an input nested in a container that is ALREADY the field:
+			 * a Bar acting as a toolbar, a header row. Without it the input draws a
+			 * second box inside the first, and at the same tier it fills its parent
+			 * edge to edge so the two have no gap between them.
+			 */
+			bare: {
+				false:
+					'h-(--era-h-md) rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-field-px) shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) focus:bg-(--era-highlight)',
+				// h-full, NOT the md tier: a bare input's container IS the field, so it
+				// takes that container's height. Keeping h-md here made a bare input
+				// inside an h-md Bar overflow it by the bar's border — a −0.5px gap,
+				// which is the even-gap law failing by a hair rather than obviously.
+				// Implies a parent with a definite height, which is the only place
+				// `bare` makes sense anyway.
+				true: 'h-full bg-transparent px-0 shadow-none'
+			}
+		},
+		defaultVariants: { bare: false }
+	});
+</script>
+
 <script lang="ts">
+	import type { Component } from 'svelte';
+	import type { IconProps } from '@lucide/svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { cn } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
 		value = $bindable(''),
+		icon = null,
+		bare = false,
 		class: className,
 		...restProps
 	}: HTMLInputAttributes & {
 		ref?: HTMLInputElement | null;
+		/** Lucide glyph rendered inside the field, left of the text. */
+		icon?: Component<IconProps> | null;
+		/** Drop the field chrome — for an input inside a container that is already the field. */
+		bare?: boolean;
 	} = $props();
+
+	// No era-text-trim on the <input> itself, in either branch: an <input> clips to
+	// a UA-owned inner editor box that IS the trimmed line box, so the trim slices
+	// the ascenders and descenders off what you type (a "d" renders as an "o"). The
+	// fixed tier height centres the text on its own. See styles/index.css.
+	const textClass = 'text-body text-fg placeholder:text-muted';
 </script>
 
-<input
-	bind:this={ref}
-	bind:value
-	class={cn(
-		// No era-text-trim here: an <input> clips to a UA-owned inner editor box that
-		// IS the trimmed line box, so the trim slices the ascenders and descenders off
-		// what you type (a "d" renders as an "o"). The fixed tier height centres the
-		// text on its own. See the utility's note in styles/index.css.
-		'flex h-(--era-h-md) w-full era-interactive rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-field-px) text-body text-fg shadow-(--era-shadow-well) placeholder:text-muted hover:bg-(--era-highlight) focus:bg-(--era-highlight)',
-		className
-	)}
-	{...restProps}
-/>
+{#if icon}
+	{@const Icon = icon}
+	<!-- The chrome moves to the wrapper so the glyph sits INSIDE the field. The
+	     glyph is on the icon tier of the field's own height, and the gap between
+	     it and the text is the universal inter-element gap. -->
+	<div class={cn(inputVariants({ bare }), 'items-center gap-(--era-gap)', className)}>
+		<Icon class="size-(--era-h-xs) shrink-0 text-muted" />
+		<input
+			bind:this={ref}
+			bind:value
+			class={cn('h-full w-full min-w-0 bg-transparent outline-none', textClass)}
+			{...restProps}
+		/>
+	</div>
+{:else}
+	<input
+		bind:this={ref}
+		bind:value
+		class={cn(inputVariants({ bare }), textClass, className)}
+		{...restProps}
+	/>
+{/if}

package/dist/ui/input/input.svelte.d.ts

@@ -1,7 +1,58 @@
+/**
+ * The field shell — the chrome an input paints, minus the text styling.
+ *
+ * Split out as a variant because an `icon` input has to move that chrome onto
+ * a WRAPPER (the glyph and the <input> sit inside one field), while a plain
+ * one keeps it on the <input> itself. Both spellings therefore have to
+ * describe the same box, and a variant is how they stay one description.
+ */
+export declare const inputVariants: import("tailwind-variants").TVReturnType<{
+    /**
+     * `bare` drops the field chrome entirely — no fill, no well, no side
+     * padding. For an input nested in a container that is ALREADY the field:
+     * a Bar acting as a toolbar, a header row. Without it the input draws a
+     * second box inside the first, and at the same tier it fills its parent
+     * edge to edge so the two have no gap between them.
+     */
+    bare: {
+        false: "h-(--era-h-md) rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-field-px) shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) focus:bg-(--era-highlight)";
+        true: "h-full bg-transparent px-0 shadow-none";
+    };
+}, undefined, "flex w-full era-interactive text-body text-fg", {
+    /**
+     * `bare` drops the field chrome entirely — no fill, no well, no side
+     * padding. For an input nested in a container that is ALREADY the field:
+     * a Bar acting as a toolbar, a header row. Without it the input draws a
+     * second box inside the first, and at the same tier it fills its parent
+     * edge to edge so the two have no gap between them.
+     */
+    bare: {
+        false: "h-(--era-h-md) rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-field-px) shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) focus:bg-(--era-highlight)";
+        true: "h-full bg-transparent px-0 shadow-none";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    /**
+     * `bare` drops the field chrome entirely — no fill, no well, no side
+     * padding. For an input nested in a container that is ALREADY the field:
+     * a Bar acting as a toolbar, a header row. Without it the input draws a
+     * second box inside the first, and at the same tier it fills its parent
+     * edge to edge so the two have no gap between them.
+     */
+    bare: {
+        false: "h-(--era-h-md) rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-field-px) shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) focus:bg-(--era-highlight)";
+        true: "h-full bg-transparent px-0 shadow-none";
+    };
+}, undefined>>;
+import type { Component } from 'svelte';
+import type { IconProps } from '@lucide/svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
 type $$ComponentProps = HTMLInputAttributes & {
     ref?: HTMLInputElement | null;
+    /** Lucide glyph rendered inside the field, left of the text. */
+    icon?: Component<IconProps> | null;
+    /** Drop the field chrome — for an input inside a container that is already the field. */
+    bare?: boolean;
 };
-declare const Input: import("svelte").Component<$$ComponentProps, {}, "value" | "ref">;
+declare const Input: Component<$$ComponentProps, {}, "value" | "ref">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/package.json

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