@signal9/era-ui 4.3.1 → 4.4.0

package/dist/apps/notes/note-editor.svelte

@@ -186,6 +186,27 @@
 		font-size: var(--era-text);
 		line-height: 1.6;
 		color: var(--color-fg);
+
+		/*
+		 * The first line's half-leading is not padding, but it reads as padding.
+		 *
+		 * line-height 1.6 puts ~8px of empty box above the first glyph's cap, on
+		 * top of the container's 8px inset — so the document opened 16px from the
+		 * top and 8px from the left, an asymmetry that grows with the first
+		 * block's font size (a note starting with a heading was the worst case).
+		 *
+		 * Trimming the block-start to the cap edge makes the ink itself sit on the
+		 * container's inset, so the first thing you read has the same space above
+		 * it as beside it, whatever block it happens to be. This is the block half
+		 * of what era-text-trim does for single-line controls; only the START is
+		 * trimmed, because the editor scrolls and trimming the end would put the
+		 * last line's descenders past the scrollable area.
+		 *
+		 * Firefox has no text-box yet and keeps the untrimmed leading — the same
+		 * graceful degradation era-text-trim already ships with.
+		 */
+		text-box-trim: trim-start;
+		text-box-edge: cap alphabetic;
 	}
 
 	/* Placeholder, via @tiptap/extension-placeholder */

package/dist/apps/notes/notes.svelte

@@ -151,24 +151,22 @@
 >
 	<!-- Sidebar: filter + note list -->
 	<div class="flex w-56 shrink-0 flex-col border-r border-divider-faded">
-		<!-- md, not the default lg: this is a compact toolbar of xxs controls, and
-		     at lg the filter field towered over the 24px rows beneath it. The
-		     filter is chromeless — the bar IS its container, so a second well
-		     inside it just draws a box around a box. -->
-		<Bar
-			size="md"
-			class="shrink-0 gap-(--era-xxs-inset-md) rounded-none border-b border-divider-faded px-(--era-xxs-inset-md)"
-		>
+		<!-- Default lg bar holding md controls, which is the pairing Bar documents:
+		     (32-24)/2 lands on the bar's own xs-inset-sm padding, so the field sits
+		     concentric. This was md with a chromeless field — compact, but it made
+		     the filter the ONLY input in the library without a field fill. At md a
+		     real field is the same height as the bar and overflows it by the
+		     border. -->
+		<Bar class="shrink-0 rounded-none border-b border-divider-faded">
 			<Input
 				icon={Search}
-				bare
 				class="min-w-0 flex-1"
 				type="text"
 				placeholder="Filter…"
 				aria-label="Filter notes"
 				bind:value={query}
 			/>
-			<Button icon size="xxs" aria-label="New note" title="New note" onclick={createNote}>
+			<Button icon aria-label="New note" title="New note" onclick={createNote}>
 				<Plus />
 			</Button>
 		</Bar>
@@ -307,15 +305,11 @@
 	<!-- Document pane -->
 	<div class="flex min-w-0 flex-1 flex-col">
 		{#if selected}
-			<!-- 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)"
-			>
+			<!-- Matches the sidebar's filter bar exactly — the two headers sit side by
+			     side across the top of the app, so they must be the same tier. -->
+			<Bar class="shrink-0 rounded-none border-b border-divider-faded">
 				<Popover.Root bind:open={iconPickerOpen}>
-					<Popover.Trigger icon size="xxs" aria-label="Change icon" title="Change icon">
+					<Popover.Trigger icon aria-label="Change icon" title="Change icon">
 						{#if selected.icon}
 							<span aria-hidden="true">{selected.icon}</span>
 						{:else}
@@ -359,7 +353,7 @@
 				</Popover.Root>
 
 				<Input
-					bare
+					reveal
 					class="min-w-0 flex-1"
 					aria-label="Note title"
 					placeholder="Untitled"