@signal9/era-ui 3.13.2 → 3.14.1

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

@@ -57,6 +57,11 @@ class BubbleMenuView {
     #host;
     #toolbar;
     #editor;
+    /**
+     * The DOCUMENT range the toolbar is currently parked over, or null while it is
+     * hidden. This is what the toolbar is anchored to — see update().
+     */
+    #anchor = null;
     #view = $state({
         items,
         active: {},
@@ -80,16 +85,42 @@ class BubbleMenuView {
             !state.doc.textBetween(selection.from, selection.to).length ||
             this.#editor.isActive('codeBlock')) {
             this.#host.style.display = 'none';
+            this.#anchor = null;
             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. 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.
+        const wasHidden = this.#host.style.display === 'none';
         this.#host.style.display = 'block';
-        flushSync();
-        placeOverSelection(this.#host, selectionRect(view));
+        /*
+         * The toolbar is anchored to the SELECTION RANGE, not to its pixel box.
+         *
+         * Those are not the same thing, and the difference is the whole bug:
+         * applying a mark re-renders the selected text — code sets it monospace, a
+         * link adds an underline — so its rect moves while the selection itself
+         * does not change by a single character. Re-centring on the new rect slides
+         * the toolbar out from under the pointer that just clicked it, and the next
+         * click lands on nothing. The user has to chase the menu to keep using it.
+         *
+         * So: reposition only when the range actually changes (or when the toolbar
+         * is appearing fresh). While `from`/`to` hold steady the toolbar is pinned,
+         * and a whole run of formatting happens under a motionless pointer.
+         *
+         * The trade is deliberate: if a format reflows the text far enough, the
+         * toolbar can end up slightly off its selection until the selection next
+         * changes. Being a few pixels stale beats moving while it is being used —
+         * a toolbar is a target first and an indicator second.
+         */
+        const { from, to } = selection;
+        const movedRange = !this.#anchor || this.#anchor.from !== from || this.#anchor.to !== to;
+        if (wasHidden || movedRange) {
+            // flushSync applies the `active` change above BEFORE measuring — reading
+            // a Svelte component's box before its pending render lands gives the
+            // previous frame's, the same trap the slash menu documents. Only needed
+            // on the frames that actually measure.
+            flushSync();
+            placeOverSelection(this.#host, selectionRect(view));
+            this.#anchor = { from, to };
+        }
     }
     destroy() {
         unmount(this.#toolbar);

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.2",
+	"version": "3.14.1",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",