@signal9/era-ui 4.15.0 → 4.15.2

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

@@ -209,6 +209,26 @@
 		text-box-edge: cap alphabetic;
 	}
 
+	/* FALLBACK for engines without text-box (Firefox): the trim above silently
+	 * disappears there, and the first line opened ~0.47em too low (measured:
+	 * cap 16.4px from the top against 8px from the left, dense/mono) — the
+	 * exact asymmetry the trim exists to remove. Approximate the same cut with
+	 * a negative first-block margin: -0.45em is the first line's half-leading
+	 * (0.3em at line-height 1.6) plus the ascent-above-cap of the ui stacks
+	 * (~0.15-0.17em). In em on purpose — it scales with the FIRST BLOCK's own
+	 * size, so a note opening on an h1 and one opening on a paragraph both
+	 * land their cap on the container inset, which one padding value could
+	 * never do for both (the reference terminal app's pt-1 is this same idea,
+	 * tuned only for paragraphs). The margin collapses up through .tiptap and
+	 * stops at the scroll container's padding, which is where it should act.
+	 * Within ~1px of the trimmed geometry; engines with text-box never match
+	 * this block and keep the exact version. */
+	@supports not ((text-box-trim: trim-start) and (text-box-edge: cap alphabetic)) {
+		.era-notes-prose :global(.tiptap > :first-child) {
+			margin-top: -0.45em;
+		}
+	}
+
 	/* Placeholder, via @tiptap/extension-placeholder */
 	.era-notes-prose :global(.tiptap p.is-editor-empty:first-child::before) {
 		content: attr(data-placeholder);

package/dist/apps/notes/notes.svelte

@@ -216,29 +216,38 @@
      content-sized (field-sizing) so the cluster hugs the title and stays
      optically centred; the status badge hangs OFF the flow (absolute, past the
      right edge) so saved/error appearing never nudges the centred title. -->
+{#snippet titleField(note: Note, cls: string)}
+	<Input
+		reveal
+		size="xxs"
+		class={cls}
+		aria-label="Note title"
+		placeholder="Untitled"
+		value={note.title}
+		oninput={(e: Event & { currentTarget: HTMLInputElement }) =>
+			store.update(note.id, { title: e.currentTarget.value })}
+	/>
+{/snippet}
+
+{#snippet statusBadge()}
+	{#if store.status === 'saved'}
+		<Badge tone="success">saved</Badge>
+	{:else if store.status === 'error'}
+		<Badge tone="destructive" title={store.lastError ?? undefined}>error</Badge>
+	{/if}
+{/snippet}
+
 {#snippet paneHeader()}
 	{#if selected}
 		<div class="relative flex min-w-0 items-center gap-(--era-gap)" data-pane-control>
 			{@render iconPicker(selected)}
-			<Input
-				reveal
-				size="xxs"
-				class="field-sizing-content max-w-56 min-w-0 text-center"
-				aria-label="Note title"
-				placeholder="Untitled"
-				value={selected.title}
-				oninput={(e: Event & { currentTarget: HTMLInputElement }) =>
-					store.update(selected.id, { title: e.currentTarget.value })}
-			/>
-			{#if store.status === 'saved' || store.status === 'error'}
-				<span class="absolute top-1/2 left-full ml-(--era-gap) -translate-y-1/2">
-					{#if store.status === 'saved'}
-						<Badge tone="success">saved</Badge>
-					{:else}
-						<Badge tone="destructive" title={store.lastError ?? undefined}>error</Badge>
-					{/if}
-				</span>
-			{/if}
+			{@render titleField(selected, 'field-sizing-content max-w-56 min-w-0 text-center')}
+			<!-- Absolutely positioned, so the badge appearing never nudges the
+			     centred title; empty when the status is quiet, which costs
+			     nothing off-flow. -->
+			<span class="absolute top-1/2 left-full ml-(--era-gap) -translate-y-1/2">
+				{@render statusBadge()}
+			</span>
 		</div>
 	{/if}
 {/snippet}
@@ -268,11 +277,7 @@
 		     centred in 23px and sat 2.5px from the top against a 3px wall. Outset
 		     costs no layout, so the bar keeps its full tier height and every child
 		     sits the wall's distance from all four edges. -->
-		<Bar
-			size="md"
-			content="xxs"
-			class="shrink-0 rounded-none [box-shadow:0_1px_0_var(--color-divider-faded)]"
-		>
+		<Bar size="md" content="xxs" divider class="rounded-none">
 			<Input
 				icon={Search}
 				size="xxs"
@@ -435,33 +440,14 @@
 			     header (see the snippets below) lives in the pane bar's centre and
 			     drawing it twice would title the document twice. -->
 			{#if !pane}
-				<Bar
-					size="md"
-					content="xxs"
-					class="shrink-0 rounded-none [box-shadow:0_1px_0_var(--color-divider-faded)]"
-				>
+				<Bar size="md" content="xxs" divider class="rounded-none">
 					{@render iconPicker(selected)}
-
-					<Input
-						reveal
-						size="xxs"
-						class="min-w-0 flex-1"
-						aria-label="Note title"
-						placeholder="Untitled"
-						value={selected.title}
-						oninput={(e: Event & { currentTarget: HTMLInputElement }) =>
-							store.update(selected.id, { title: e.currentTarget.value })}
-					/>
-
+					{@render titleField(selected, 'min-w-0 flex-1')}
 					<!-- Fixed-width so the badge appearing and clearing never nudges the
 					     title field; `saving` is deliberately silent — the badge only
 					     reports a settled outcome. -->
 					<span class="flex w-16 shrink-0 justify-end">
-						{#if store.status === 'saved'}
-							<Badge tone="success">saved</Badge>
-						{:else if store.status === 'error'}
-							<Badge tone="destructive" title={store.lastError ?? undefined}>error</Badge>
-						{/if}
+						{@render statusBadge()}
 					</span>
 				</Bar>
 			{/if}

package/dist/dev/audit/audits/prose-leading.js

@@ -49,7 +49,6 @@ function ownTextLines(el) {
             tops.add(Math.round(rect.top * 2) / 2);
         }
     }
-    range.detach();
     return tops.size;
 }
 export const proseLeading = {
@@ -58,11 +57,24 @@ export const proseLeading = {
     description: 'Text that wraps to a second line must set its own leading (leading-body) — otherwise it inherits a fixed-height row’s control leading and the lines collide.',
     category: 'layout',
     severity: 'error',
-    // Only elements that can hold text directly; a <div> wrapper with no text of
-    // its own has nothing to measure and is skipped by ownTextLines anyway.
-    selector: '*',
+    // Text-bearing elements only. The audit is about PROSE, and the wrapping the
+    // check measures happens on the element that owns the text nodes — chrome
+    // tags (svg, input, button…) can't fire it, so they never pay for a style
+    // read. div/span stay in: half the wrapping copy in this library lives in
+    // them.
+    selector: 'p, span, div, li, dd, dt, td, th, label, a, blockquote, figcaption, h1, h2, h3, h4, h5, h6',
     check(el) {
-        if (!el.textContent?.trim())
+        // Cheapest gate first: any own text at all? A scan over direct children
+        // short-circuits; textContent would serialize the whole subtree on every
+        // wrapper in the tree.
+        let hasText = false;
+        for (const n of el.childNodes) {
+            if (n.nodeType === Node.TEXT_NODE && n.textContent.trim()) {
+                hasText = true;
+                break;
+            }
+        }
+        if (!hasText)
             return null;
         const s = getComputedStyle(el);
         // Text that cannot wrap cannot have this bug — the whole defect is the
@@ -76,16 +88,17 @@ export const proseLeading = {
         const ratio = lineHeight / fontSize;
         if (ratio >= PROSE_RATIO)
             return null;
-        // The expensive half, deliberately last: only measure once the leading is
-        // already known to be too tight.
-        if (ownTextLines(el) < 2)
+        // The expensive half (a Range + getClientRects is a forced layout read),
+        // deliberately last and measured once: only elements whose leading is
+        // already known to be too tight pay for it.
+        const lines = ownTextLines(el);
+        if (lines < 2)
             return null;
-        const issue = {
+        return {
             auditId: 'typography/prose-leading',
             element: el,
             message: `wrapped text at line-height ${ratio.toFixed(2)}× (${lineHeight.toFixed(1)}px on ${fontSize}px type) — this is control leading, inherited from a fixed-height row. Add leading-body.`,
-            details: { ratio: +ratio.toFixed(2), lineHeight, fontSize, lines: ownTextLines(el) }
+            details: { ratio: +ratio.toFixed(2), lineHeight, fontSize, lines }
         };
-        return issue;
     }
 };