@signal9/era-ui 4.12.1 → 4.14.0

package/dist/ai/conversation/conversation-empty-state.svelte

@@ -27,6 +27,6 @@
 >
 	{@render icon?.()}
 	<p class="text-body font-medium text-bright">{title}</p>
-	<p class="max-w-sm text-body text-muted">{description}</p>
+	<p class="max-w-sm text-body leading-body text-muted">{description}</p>
 	{@render children?.()}
 </div>

package/dist/ai/error-panel/error-panel.svelte

@@ -88,7 +88,7 @@
 	{/if}
 
 	{#if guidance}
-		<p class="text-body text-muted">{guidance}</p>
+		<p class="text-body leading-body text-muted">{guidance}</p>
 	{/if}
 
 	{#if showDetail}

package/dist/ai/message/message-content.svelte

@@ -16,7 +16,7 @@
      tier → rd-md (the step-content / menu-panel precedent), not rd-lg. -->
 <div
 	class={cn(
-		'min-w-0 text-body leading-relaxed text-fg',
+		'min-w-0 text-body leading-body text-fg',
 		'group-data-[role=user]/message:max-w-[80%] group-data-[role=user]/message:rounded-(--era-rd-md) group-data-[role=user]/message:bg-(--era-surface-bg-elevated) group-data-[role=user]/message:p-(--era-pad-sm) group-data-[role=user]/message:whitespace-pre-wrap group-data-[role=user]/message:shadow-(--era-shadow)',
 		className
 	)}

package/dist/ai/prompt-input/prompt-input-textarea.svelte

@@ -58,7 +58,7 @@
 	onkeydown={onKeydown}
 	onpaste={onPaste}
 	class={cn(
-		'field-sizing-content max-h-48 min-h-(--era-h-md) w-full resize-none bg-transparent px-(--era-inset-md) py-[calc((var(--era-h-md)-1lh)/2)] text-body leading-relaxed text-fg outline-none placeholder:text-muted',
+		'field-sizing-content max-h-48 min-h-(--era-h-md) w-full resize-none bg-transparent px-(--era-inset-md) py-[calc((var(--era-h-md)-1lh)/2)] text-body leading-body text-fg outline-none placeholder:text-muted',
 		className
 	)}
 	{...restProps}

package/dist/ai/response/response.svelte

@@ -34,7 +34,7 @@
 <!-- eslint-disable better-tailwindcss/no-unknown-classes -- era-response* are defined in this component's <style> -->
 <div
 	class={cn(
-		'era-response flex min-w-0 flex-col gap-(--era-gap) text-body leading-relaxed text-fg',
+		'era-response flex min-w-0 flex-col gap-(--era-gap) text-body leading-body text-fg',
 		streaming && 'era-response-streaming',
 		className
 	)}

package/dist/ai/swarm/swarm-artifact.svelte

@@ -37,5 +37,5 @@
 			<span class="shrink-0 font-mono text-body text-muted tabular-nums">{age}</span>
 		{/if}
 	</div>
-	<p class="text-body leading-relaxed text-muted">{artifact.summary}</p>
+	<p class="text-body leading-body text-muted">{artifact.summary}</p>
 </Card>

package/dist/ai/tool/tool-output.svelte

@@ -12,7 +12,7 @@
 {:else if output !== undefined}
 	<Step.Section label="output">
 		{#if typeof output === 'string'}
-			<p class="text-body whitespace-pre-wrap text-muted">{output}</p>
+			<p class="text-body leading-body whitespace-pre-wrap text-muted">{output}</p>
 		{:else}
 			<CodeBlock code={JSON.stringify(output, null, 2)} />
 		{/if}

package/dist/apps/llm-shell/llm-shell.svelte

@@ -223,7 +223,7 @@
 		<AI.Reasoning.Root streaming={block.streaming} bind:duration={block.duration}>
 			<AI.Reasoning.Trigger streaming={block.streaming} duration={block.duration} />
 			<AI.Reasoning.Content>
-				<p class="text-body leading-relaxed text-muted">{block.text}</p>
+				<p class="text-body leading-body text-muted">{block.text}</p>
 			</AI.Reasoning.Content>
 		</AI.Reasoning.Root>
 	{:else if block.kind === 'tool'}

package/dist/dev/audit/audits/index.d.ts

@@ -6,9 +6,10 @@ import { iconFlush } from './icon-flush.js';
 import { offAxisMotion } from './off-axis-motion.js';
 import { offTierHeight } from './off-tier-height.js';
 import { pillHoldsItsInk } from './pill-holds-its-ink.js';
+import { proseLeading } from './prose-leading.js';
 import { radiusConcentricity } from './radius-concentricity.js';
 import { restingGap } from './resting-gap.js';
 import { singleGlyphSquare } from './single-glyph-square.js';
 import { uniformSiblingGaps } from './uniform-sibling-gaps.js';
 import { wallMatchesGap } from './wall-matches-gap.js';
-export { clippedGlyphs, collapsedTextTrim, concentricInset, flatChrome, iconFlush, offAxisMotion, offTierHeight, pillHoldsItsInk, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };
+export { clippedGlyphs, collapsedTextTrim, concentricInset, flatChrome, iconFlush, offAxisMotion, offTierHeight, pillHoldsItsInk, proseLeading, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };

package/dist/dev/audit/audits/index.js

@@ -7,12 +7,13 @@ import { iconFlush } from './icon-flush.js';
 import { offAxisMotion } from './off-axis-motion.js';
 import { offTierHeight } from './off-tier-height.js';
 import { pillHoldsItsInk } from './pill-holds-its-ink.js';
+import { proseLeading } from './prose-leading.js';
 import { radiusConcentricity } from './radius-concentricity.js';
 import { restingGap } from './resting-gap.js';
 import { singleGlyphSquare } from './single-glyph-square.js';
 import { uniformSiblingGaps } from './uniform-sibling-gaps.js';
 import { wallMatchesGap } from './wall-matches-gap.js';
-export { clippedGlyphs, collapsedTextTrim, concentricInset, flatChrome, iconFlush, offAxisMotion, offTierHeight, pillHoldsItsInk, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };
+export { clippedGlyphs, collapsedTextTrim, concentricInset, flatChrome, iconFlush, offAxisMotion, offTierHeight, pillHoldsItsInk, proseLeading, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };
 // Auto-register built-ins. Consumers can still unregister or add their own.
 //
 // Two of these only tell the truth on a particular axis setting, because the bug
@@ -29,6 +30,7 @@ registry.register(iconFlush);
 registry.register(offAxisMotion);
 registry.register(offTierHeight);
 registry.register(pillHoldsItsInk);
+registry.register(proseLeading);
 registry.register(radiusConcentricity);
 registry.register(restingGap);
 registry.register(singleGlyphSquare);

package/dist/dev/audit/audits/prose-leading.d.ts

@@ -0,0 +1,2 @@
+import type { Audit } from '../types.js';
+export declare const proseLeading: Audit;

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

@@ -0,0 +1,91 @@
+/*
+ * Wrapping text set at a control's line-height.
+ *
+ * Era's type has two regimes and they want opposite things:
+ *
+ *   SINGLE-LINE control text wants NO leading. `era-text-trim` collapses the
+ *   line box to 1 and centres the ink inside a tier height — the space above
+ *   and below the line is the container's job, not the type's.
+ *
+ *   WRAPPING text wants leading and nothing else provides it. The space between
+ *   line 1 and line 2 is the only thing holding a paragraph apart, so a
+ *   paragraph set at line-height 1 is not "tight", it is two lines touching.
+ *
+ * The failure is silent and it is INHERITED, which is why it needs a runtime
+ * check rather than a lint rule: a wrapping <p> that names no leading of its own
+ * takes whatever its ancestors set, and in this library ancestors are very often
+ * fixed-height rows that legitimately set `leading-none` or the trim. The <p>
+ * looks correct in the markup — it just renders wrong the moment its text is
+ * long enough to wrap, which is exactly the case nobody screenshots.
+ *
+ * So the check is geometric, on live text: find elements that ACTUALLY wrapped
+ * (≥2 line boxes measured off a Range over their own text), then assert their
+ * line-height is a prose ratio and not a control's. Single-line text is never
+ * flagged — a trimmed button label is correct and must stay correct.
+ *
+ * The fix is always the same: add `leading-body` (--era-leading, 1.6).
+ */
+/** Below this ratio, the leading belongs to a control, not to a paragraph. */
+const PROSE_RATIO = 1.35;
+/**
+ * How many line boxes this element's OWN text occupies.
+ *
+ * Measured with a Range over the element's direct text nodes rather than by
+ * dividing height by line-height: the element may also contain inline children,
+ * floats or a wrapped icon, any of which make the height lie. Rect tops are
+ * bucketed to the nearest 0.5px because a fractional line box can report
+ * neighbouring rects a hair apart.
+ */
+function ownTextLines(el) {
+    const range = document.createRange();
+    const tops = new Set();
+    for (const node of el.childNodes) {
+        if (node.nodeType !== Node.TEXT_NODE || !node.textContent?.trim())
+            continue;
+        range.selectNodeContents(node);
+        for (const rect of range.getClientRects()) {
+            if (rect.width === 0 && rect.height === 0)
+                continue;
+            tops.add(Math.round(rect.top * 2) / 2);
+        }
+    }
+    range.detach();
+    return tops.size;
+}
+export const proseLeading = {
+    id: 'typography/prose-leading',
+    name: 'Wrapping text has prose leading',
+    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: '*',
+    check(el) {
+        if (!el.textContent?.trim())
+            return null;
+        const s = getComputedStyle(el);
+        // Text that cannot wrap cannot have this bug — the whole defect is the
+        // gap between line 1 and line 2.
+        if (s.whiteSpace === 'nowrap' || s.whiteSpace === 'pre')
+            return null;
+        const fontSize = parseFloat(s.fontSize);
+        const lineHeight = parseFloat(s.lineHeight); // `normal` resolves to px here
+        if (!fontSize || !lineHeight)
+            return null;
+        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)
+            return null;
+        const issue = {
+            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) }
+        };
+        return issue;
+    }
+};