@signal9/era-ui 9.0.0 → 10.1.0

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

@@ -4,10 +4,10 @@
 	let { onclick }: { onclick?: (e: MouseEvent) => void } = $props();
 </script>
 
-<!-- size="xxs", the close-affordance tier (Pane.Close, the chip dismiss): an
+<!-- size="pill", the close-affordance tier (Pane.Close, the chip dismiss): an
      18px hit target whose tier draws the 12px dismiss ink by itself. The <X>
      used to carry size-(--era-h-icon) — a class the Button variant's [&_svg]
      selector outranks, so it claimed 14px while 10 shipped. -->
-<Button icon size="xxs" aria-label="Close" {onclick}>
+<Button icon size="pill" aria-label="Close" {onclick}>
 	<X />
 </Button>

package/dist/ai/checkpoint.svelte

@@ -20,7 +20,7 @@
 
 <div class={cn('flex w-full items-center gap-(--era-gap) text-muted', className)}>
 	<Bookmark class="size-(--era-h-icon) shrink-0" aria-hidden="true" />
-	<Button variant="link" size="sm" onclick={onRestore}>
+	<Button variant="link" size="chip" onclick={onRestore}>
 		{#if children}{@render children()}{:else}{label}{/if}
 	</Button>
 	<Separator class="flex-1" />

package/dist/ai/context/context.svelte

@@ -23,7 +23,7 @@
 </script>
 
 <Popover.Root>
-	<Popover.Trigger size="sm" class={cn('gap-(--era-gap) tabular-nums', className)}>
+	<Popover.Trigger size="chip" class={cn('gap-(--era-gap) tabular-nums', className)}>
 		{Math.round(percent * 100)}%
 		<svg viewBox="0 0 24 24" class="size-(--era-h-icon) -rotate-90" aria-hidden="true">
 			<circle cx="12" cy="12" r="10" fill="none" stroke="var(--color-3)" stroke-width="3" />

package/dist/ai/conversation/conversation-scroll-button.svelte

@@ -16,7 +16,7 @@
 	>
 		<Button
 			icon
-			size="default"
+			size="control"
 			aria-label="Scroll to bottom"
 			class="rounded-full shadow-(--era-shadow-lg)"
 			onclick={() => stick.repin()}

package/dist/ai/conversations/conversations-item.svelte

@@ -203,7 +203,7 @@
 	>
 		<Button
 			icon
-			size="xxs"
+			size="pill"
 			aria-label={starred ? 'Unstar conversation' : 'Star conversation'}
 			aria-pressed={starred}
 			onclick={toggleStar}
@@ -212,14 +212,14 @@
 		</Button>
 
 		{#if showCancel}
-			<Button icon size="xxs" aria-label="Cancel generation" onclick={() => onCancel?.()}>
+			<Button icon size="pill" aria-label="Cancel generation" onclick={() => onCancel?.()}>
 				<X class="size-(--era-h-icon)" />
 			</Button>
 		{/if}
 
 		<Button
 			icon
-			size="xxs"
+			size="pill"
 			tone="destructive"
 			active={armed}
 			aria-label={armed ? 'Confirm delete conversation' : 'Delete conversation'}

package/dist/ai/index.js

@@ -2,7 +2,7 @@
 // era-ui take on Vercel's AI Elements (via the Svelte port). Namespaced parts
 // for the families, flat exports for the singles. `workflow/` is deliberately
 // NOT exported here: it depends on @xyflow/svelte and lives on its own
-// subpath (`@sig-nine/era-ui/ai/workflow`) so the dependency stays opt-in.
+// subpath (`@signal9/era-ui/ai/workflow`) so the dependency stays opt-in.
 export * as Conversation from './conversation/index.js';
 export * as Message from './message/index.js';
 export * as PromptInput from './prompt-input/index.js';

package/dist/ai/message/message-branch-selector.svelte

@@ -12,13 +12,13 @@
 
 {#if ctrl.total > 1}
 	<ButtonGroup class={cn(className)}>
-		<Button icon size="sm" aria-label="Previous version" onclick={() => ctrl.previous()}>
+		<Button icon size="chip" aria-label="Previous version" onclick={() => ctrl.previous()}>
 			<ChevronLeft class="size-(--era-h-icon)" />
 		</Button>
 		<span class="flex items-center px-(--era-inset-chip) text-body text-muted tabular-nums">
 			{ctrl.current + 1} of {ctrl.total}
 		</span>
-		<Button icon size="sm" aria-label="Next version" onclick={() => ctrl.next()}>
+		<Button icon size="chip" aria-label="Next version" onclick={() => ctrl.next()}>
 			<ChevronRight class="size-(--era-h-icon)" />
 		</Button>
 	</ButtonGroup>

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

@@ -84,7 +84,7 @@
 
 <div
 	class={cn(
-		'flex items-center gap-(--era-inset-chip) font-mono text-body era-text-trim text-muted tabular-nums',
+		'flex items-center gap-(--era-inset-chip) font-mono text-body leading-none text-muted tabular-nums',
 		className
 	)}
 	{...restProps}

package/dist/ai/prompt-input/prompt-input-add-attachments.svelte

@@ -7,6 +7,6 @@
 	const attachments = getAttachmentsContext();
 </script>
 
-<Button icon size="default" aria-label={label} onclick={() => attachments.openFileDialog()}>
+<Button icon size="control" aria-label={label} onclick={() => attachments.openFileDialog()}>
 	<Plus class="size-(--era-h-icon)" />
 </Button>

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

@@ -22,7 +22,7 @@
 					<!-- md control geometry, like a Button with an icon: wall inset and
 					     icon gap both --era-inset-control, ink centered by era-text-trim. -->
 					<div
-						class="flex h-(--era-h-control) items-center gap-(--era-inset-control) rounded-(--era-rd-control) bg-(--era-surface-bg) px-(--era-inset-control) text-body era-text-trim text-muted shadow-(--era-shadow)"
+						class="flex h-(--era-h-control) items-center gap-(--era-inset-control) rounded-(--era-rd-control) bg-(--era-surface-bg) px-(--era-inset-control) text-body leading-none text-muted shadow-(--era-shadow)"
 					>
 						<Paperclip class="size-(--era-h-icon) shrink-0" />
 						<span class="max-w-32 truncate">{a.filename}</span>

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

@@ -26,7 +26,7 @@
      resubmitting. -->
 <Button
 	icon
-	size="default"
+	size="control"
 	tone={generating ? 'default' : 'accent'}
 	type={generating ? 'button' : 'submit'}
 	aria-label={generating ? 'Stop' : 'Send'}

package/dist/ai/run-status/run-status.svelte

@@ -91,11 +91,12 @@
 	<div class="flex h-(--era-h-control) items-center gap-(--era-gap) px-(--era-inset-control)">
 		<!-- leading status dot + label -->
 		<span
-			class="flex items-center gap-(--era-inset-pill) font-mono text-body {style.text} era-text-trim"
+			class="flex items-center gap-(--era-inset-pill) font-mono text-body {style.text} leading-none"
 		>
 			<span class={cn('size-1.5 shrink-0 rounded-full', style.dot, style.pulse && 'animate-pulse')}
 			></span>
-			{style.label}
+			<!-- Own box, so the trim applies — see Role for the anonymous-item rule. -->
+			<span class="era-text-trim">{style.label}</span>
 		</span>
 
 		{#if tools}
@@ -115,7 +116,7 @@
 		<div class="flex-1"></div>
 
 		{#if style.active && oncancel}
-			<Button size="xs" tone="destructive" onclick={() => oncancel?.()}>
+			<Button size="icon" tone="destructive" onclick={() => oncancel?.()}>
 				<X class="size-(--era-h-icon)" aria-hidden="true" />
 				Cancel
 			</Button>

package/dist/ai/suggestion/suggestion.svelte

@@ -21,7 +21,7 @@
      vertical inset) so the words breathe. Era pills are rd-sm, not
      full-round — touch mode alone pills the ladder. -->
 <Button
-	size="sm"
+	size="chip"
 	class={cn('shrink-0 px-(--era-chip-px)', className)}
 	onclick={() => onSelect?.(suggestion)}
 >

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

@@ -60,7 +60,7 @@
 {#if cancel}
 	<Button
 		icon
-		size="xxs"
+		size="pill"
 		tone="destructive"
 		aria-label="Cancel {agent.task}"
 		onclick={(event: MouseEvent) => {
@@ -74,7 +74,7 @@
 {#if open}
 	<Button
 		icon
-		size="xxs"
+		size="pill"
 		aria-label="Open {agent.task}"
 		onclick={(event: MouseEvent) => {
 			event.stopPropagation();

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

@@ -61,7 +61,7 @@
 	)}
 	{...restProps}
 >
-	<div class="flex min-w-0 items-center gap-(--era-gap) text-body era-text-trim">
+	<div class="flex min-w-0 items-center gap-(--era-gap) text-body leading-none">
 		<Dot status={agent.status} />
 		<Role role={agent.role ?? 'worker'} label={agent.label} class="min-w-0" />
 		{#if agent.key}
@@ -85,7 +85,7 @@
 	{@render children?.(agent)}
 
 	{#if agent.sandbox || elapsed != null}
-		<div class="flex min-w-0 items-center gap-(--era-gap) text-body era-text-trim text-muted">
+		<div class="flex min-w-0 items-center gap-(--era-gap) text-body leading-none text-muted">
 			{#if agent.sandbox}
 				<Sandbox sandbox={agent.sandbox} label />
 			{/if}

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

@@ -43,7 +43,7 @@
 	class={cn('flex min-w-0 flex-col gap-(--era-gap) p-(--era-pad-panel)', className)}
 	{...restProps}
 >
-	<div class="flex min-w-0 items-center gap-(--era-gap) text-body era-text-trim">
+	<div class="flex min-w-0 items-center gap-(--era-gap) text-body leading-none">
 		<span class="shrink-0 font-mono text-[0.625rem] tracking-[0.15em] text-muted uppercase">
 			{artifact.kind}
 		</span>

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

@@ -40,7 +40,7 @@
 	class={cn('flex min-w-0 flex-col gap-(--era-gap)', className)}
 	{...restProps}
 >
-	<div class="flex min-w-0 items-center gap-(--era-gap) text-body era-text-trim">
+	<div class="flex min-w-0 items-center gap-(--era-gap) text-body leading-none">
 		<GitMerge class="size-(--era-h-icon) shrink-0 text-muted" aria-hidden="true" />
 		<span class="min-w-0 flex-1 truncate text-fg">{barrier.title}</span>
 		{#if barrier.key}

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

@@ -50,14 +50,15 @@
 
 <div
 	class={cn(
-		'flex h-(--era-h-control) shrink-0 items-center gap-(--era-gap) border-t border-divider-faded px-(--era-inset-control) font-mono text-body era-text-trim',
+		'flex h-(--era-h-control) shrink-0 items-center gap-(--era-gap) border-t border-divider-faded px-(--era-inset-control) font-mono text-body leading-none',
 		className
 	)}
 	{...restProps}
 >
 	<span class={cn('flex shrink-0 items-center gap-(--era-gap)', tone.class)}>
 		<Dot status={tone.status} label={tone.label} class={tone.pulse ? 'animate-pulse' : undefined} />
-		{tone.label}
+		<!-- Own box, so the trim applies — see Role for the anonymous-item rule. -->
+		<span class="era-text-trim">{tone.label}</span>
 	</span>
 	<!-- Always rendered, empty when there is nothing to say: the span is also the
 	     spacer that pushes the watermark to the trailing edge. -->

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

@@ -43,7 +43,7 @@
      the end of a sentence you can hover for, never the count of what failed. -->
 <div
 	class={cn(
-		'flex h-(--era-h-control) shrink-0 items-center gap-(--era-gap) px-(--era-inset-control) text-body era-text-trim',
+		'flex h-(--era-h-control) shrink-0 items-center gap-(--era-gap) px-(--era-inset-control) text-body leading-none',
 		className
 	)}
 	{...restProps}

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

@@ -160,7 +160,7 @@
 	     highlight instantly so a fast pass down the tree doesn't smear. -->
 	<div
 		class={cn(
-			'flex h-(--era-h-control) items-center gap-(--era-gap) rounded-(--era-rd-control) pl-(--era-inset-control) text-body era-text-trim',
+			'flex h-(--era-h-control) items-center gap-(--era-gap) rounded-(--era-rd-control) pl-(--era-inset-control) text-body leading-none',
 			hasActions ? 'pr-(--era-pill-inset-control)' : 'pr-(--era-inset-control)',
 			(hasChildren || hasDetail) && 'cursor-pointer',
 			active

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

@@ -53,12 +53,15 @@
 	data-role={role}
 	title={name}
 	class={cn(
-		'inline-flex shrink-0 items-center gap-(--era-gap) font-mono text-[0.625rem] era-text-trim-caps tracking-[0.15em] uppercase',
+		'inline-flex shrink-0 items-center gap-(--era-gap) font-mono text-[0.625rem] leading-none tracking-[0.15em] uppercase',
 		role === 'orchestrator' ? 'text-fg' : 'text-muted',
 		className
 	)}
 	{...restProps}
 >
 	<Icon class="size-(--era-h-icon) shrink-0" aria-hidden="true" />
-	{name}
+	<!-- The name gets its OWN box so the caps trim has something to trim. Left on
+	     the flex row it was inert: bare text in a flex container is an anonymous
+	     item, which no non-inherited property reaches. -->
+	<span class="era-text-trim-caps">{name}</span>
 </span>

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

@@ -47,7 +47,7 @@
 	data-status={status}
 	{onclick}
 	class={cn(
-		'inline-flex h-(--era-h-pill) max-w-full min-w-0 shrink-0 era-interactive cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-pill) px-(--era-pill-px) text-body era-text-trim text-muted transition-colors duration-(--era-duration) ease-(--era-ease) hover:bg-(--era-highlight) hover:text-fg',
+		'inline-flex h-(--era-h-pill) max-w-full min-w-0 shrink-0 era-interactive cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-pill) px-(--era-pill-px) text-body leading-none text-muted transition-colors duration-(--era-duration) ease-(--era-ease) hover:bg-(--era-highlight) hover:text-fg',
 		active && 'bg-fill text-fg',
 		className
 	)}

package/dist/ai/web-preview/web-preview.svelte

@@ -21,8 +21,8 @@
 		className
 	)}
 >
-	<Bar size="md" class="shrink-0 gap-(--era-gap) rounded-none">
-		<Button icon size="sm" aria-label="Reload" onclick={() => (nonce += 1)}>
+	<Bar size="control" class="shrink-0 gap-(--era-gap) rounded-none">
+		<Button icon size="chip" aria-label="Reload" onclick={() => (nonce += 1)}>
 			<RotateCw class="size-(--era-h-icon)" />
 		</Button>
 		<Input

package/dist/apps/index.d.ts

@@ -7,11 +7,11 @@
  * makes product decisions a primitive never would, which is exactly why these
  * live behind their own subpath instead of the root barrel.
  *
- * Apps are NOT re-exported from `@sig-nine/era-ui`. Each carries heavy,
+ * Apps are NOT re-exported from `@signal9/era-ui`. Each carries heavy,
  * app-specific dependencies (Notes brings TipTap), and the same reasoning that
  * isolates `ai/workflow` on its own subpath applies here: a consumer who never
- * imports an app never pays for it. Import from `@sig-nine/era-ui/apps` (or a
- * single app, e.g. `@sig-nine/era-ui/apps/notes`) and install that app's peers.
+ * imports an app never pays for it. Import from `@signal9/era-ui/apps` (or a
+ * single app, e.g. `@signal9/era-ui/apps/notes`) and install that app's peers.
  *
  * Exports are flat and prefixed by app (`Notes`, `NotesStore`, `NoteEditor`) so
  * a second app can land without a namespace churn.

package/dist/apps/index.js

@@ -7,11 +7,11 @@
  * makes product decisions a primitive never would, which is exactly why these
  * live behind their own subpath instead of the root barrel.
  *
- * Apps are NOT re-exported from `@sig-nine/era-ui`. Each carries heavy,
+ * Apps are NOT re-exported from `@signal9/era-ui`. Each carries heavy,
  * app-specific dependencies (Notes brings TipTap), and the same reasoning that
  * isolates `ai/workflow` on its own subpath applies here: a consumer who never
- * imports an app never pays for it. Import from `@sig-nine/era-ui/apps` (or a
- * single app, e.g. `@sig-nine/era-ui/apps/notes`) and install that app's peers.
+ * imports an app never pays for it. Import from `@signal9/era-ui/apps` (or a
+ * single app, e.g. `@signal9/era-ui/apps/notes`) and install that app's peers.
  *
  * Exports are flat and prefixed by app (`Notes`, `NotesStore`, `NoteEditor`) so
  * a second app can land without a namespace churn.

package/dist/apps/notes/editor/bubble-toolbar.svelte

@@ -31,15 +31,15 @@
      leaves no discernible edge. border-divider-faded is the token'd hairline, so
      it still tracks the surface rather than being a drawn-on line. -->
 <Bar
-	size="md"
-	content="xxs"
+	size="control"
+	content="pill"
 	class="w-max border border-divider-faded bg-elevated shadow-lg glass-blur"
 >
 	{#each items as item (item.mark)}
 		{@const Icon = item.icon}
 		<Button
 			icon
-			size="xxs"
+			size="pill"
 			active={active[item.mark] ?? false}
 			aria-label={item.label}
 			title={item.label}

package/dist/apps/notes/editor/slash-menu.svelte

@@ -53,9 +53,7 @@
 	class="scrollbar-none flex max-h-[calc(var(--era-h-control)*8)] w-max min-w-48 flex-col overflow-y-auto rounded-control bg-elevated p-menu shadow-lg glass-blur"
 >
 	{#if items.length === 0}
-		<div
-			class="flex h-control shrink-0 items-center px-inset-control text-body era-text-trim text-muted"
-		>
+		<div class="era-label-ink h-control shrink-0 px-inset-control text-body text-muted">
 			No commands
 		</div>
 	{:else}
@@ -63,7 +61,7 @@
 			{@const Icon = item.icon}
 			<button
 				type="button"
-				class="flex h-control w-full shrink-0 cursor-pointer items-center gap-gutter rounded-menu-item px-inset-control text-left text-body era-text-trim text-fg {i ===
+				class="flex h-control w-full shrink-0 cursor-pointer items-center gap-gutter rounded-menu-item px-inset-control text-left text-body leading-none text-fg {i ===
 				selected
 					? 'bg-highlight shadow-highlight'
 					: ''}"

package/dist/apps/notes/notes.svelte

@@ -165,7 +165,7 @@
 
 {#snippet iconPicker(note: Note)}
 	<Popover.Root bind:open={iconPickerOpen}>
-		<Popover.Trigger icon size="xxs" aria-label="Change icon" title="Change icon">
+		<Popover.Trigger icon size="pill" aria-label="Change icon" title="Change icon">
 			{#if note.icon}
 				<span aria-hidden="true">{note.icon}</span>
 			{:else}
@@ -179,7 +179,7 @@
 						{#each row as glyph (glyph)}
 							<Button
 								icon
-								size="default"
+								size="control"
 								active={note.icon === glyph}
 								aria-label={glyph}
 								onclick={() => {
@@ -194,7 +194,7 @@
 				{/each}
 				{#if note.icon}
 					<Button
-						size="sm"
+						size="chip"
 						class="w-full"
 						onclick={() => {
 							store.setIcon(note.id, null);
@@ -219,7 +219,7 @@
 {#snippet titleField(note: Note, cls: string)}
 	<Input
 		reveal
-		size="xxs"
+		size="pill"
 		class={cls}
 		aria-label="Note title"
 		placeholder="Untitled"
@@ -265,7 +265,7 @@
 >
 	<!-- Sidebar: filter + note list -->
 	<div class="flex w-56 shrink-0 flex-col border-r border-divider-faded">
-		<!-- content="xxs": 24/30/36/48 of chrome around an 18/20/22/26 field and
+		<!-- content="pill": 24/30/36/48 of chrome around an 18/20/22/26 field and
 		     button, with Bar deriving the two-tier concentric inset. A notes sidebar
 		     is chrome around a list; at the lg/md pairing it was a 32px bar over
 		     24px rows and the chrome outweighed the content. This is the tier pair
@@ -277,17 +277,17 @@
 		     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" divider class="rounded-none">
+		<Bar size="control" content="pill" divider class="rounded-none">
 			<Input
 				icon={Search}
-				size="xxs"
+				size="pill"
 				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 size="pill" aria-label="New note" title="New note" onclick={createNote}>
 				<Plus />
 			</Button>
 		</Bar>
@@ -331,7 +331,7 @@
 									{#snippet child({ props })}
 										<div
 											{...props}
-											class="group/row flex h-control cursor-pointer items-center gap-(--era-pill-inset-control) rounded-control px-(--era-pill-inset-control) era-text-trim {current
+											class="group/row flex h-control cursor-pointer items-center gap-(--era-pill-inset-control) rounded-control px-(--era-pill-inset-control) leading-none {current
 												? 'bg-hover text-bright shadow-(--era-shadow-pressed)'
 												: 'hover:bg-highlight hover:shadow-highlight'}"
 											role="option"
@@ -374,7 +374,7 @@
 											>
 												<Button
 													icon
-													size="xxs"
+													size="pill"
 													aria-label={note.pinned ? 'Unpin note' : 'Pin note'}
 													title={note.pinned ? 'Unpin note' : 'Pin note'}
 													active={note.pinned}
@@ -387,7 +387,7 @@
 												</Button>
 												<Button
 													icon
-													size="xxs"
+													size="pill"
 													tone="destructive"
 													aria-label="Delete note"
 													title="Delete note"
@@ -444,7 +444,7 @@
 			     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" divider class="rounded-none">
+				<Bar size="control" content="pill" divider class="rounded-none">
 					{@render iconPicker(selected)}
 					{@render titleField(selected, 'min-w-0 flex-1')}
 					<!-- Fixed-width so the badge appearing and clearing never nudges the

package/dist/dev/audit/audits/anonymous-text.d.ts

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

package/dist/dev/audit/audits/anonymous-text.js

@@ -0,0 +1,73 @@
+/*
+ * A flex row that centres its OWN bare text — the one place ink centring
+ * cannot be applied, and so the one place it silently isn't.
+ *
+ * `text-box-trim` is era's mechanism for centring INK rather than the font box:
+ * it collapses the line box to a typographic band so what you see is centred
+ * rather than what the metrics measure. It applies to a BLOCK box. It cannot
+ * apply to bare text inside a flex container, because that text is wrapped in
+ * an ANONYMOUS flex item — a box no selector reaches and no non-inherited
+ * property touches. `text-box-trim` is not inherited, so it never arrives.
+ *
+ * Proven rather than reasoned: the same pill rendered `flex + trim` and `flex,
+ * no trim` produces IDENTICAL ink, to the device pixel. Centring then falls
+ * back to `align-items` on the LINE BOX — precisely the font-metric-dependent
+ * centring the trim exists to eliminate. On the shipped mono stack that put a
+ * badge's caps 2px high in an 18px pill.
+ *
+ * This audit deliberately does NOT look for the `era-text-trim` class. That was
+ * the first version, and it was the wrong instrument: deleting an inert class
+ * silences it while leaving the text exactly as mis-centred as before. What
+ * matters is the SHAPE — a centring flex row with a text node of its own — so
+ * that is what it measures. It stays true after the cleanup.
+ *
+ * Two kinds of hit, and only one of them is the author's to fix:
+ *
+ *   FIXABLE — the row holds nothing but text. It has no reason to be flex; as a
+ *   block with `era-label-ink` (or `era-token-ink` for a centred token) the trim
+ *   works and the centring stops depending on the font.
+ *
+ *   STRUCTURAL — the row holds an icon AND text. The box must stay flex to lay
+ *   the two out, which re-creates the anonymous item, and no CSS reaches it.
+ *   Components take the `not-has-[svg]:era-label-ink` guard so the text-only
+ *   case is centred properly and only the icon case falls back. Closing it for
+ *   good means the label arriving in its own slot instead of inside an opaque
+ *   `children` snippet — an API change, tracked in KNOWN_ISSUES.
+ */
+/** Cheap pre-filter: only a row that CENTRES is relying on ink centring. */
+const CENTRING = new Set(['center', 'safe center', 'anchor-center']);
+export const anonymousText = {
+    id: 'typography/anonymous-text',
+    name: 'A flex row centres its own bare text',
+    description: 'Bare text in a flex container is an anonymous flex item, which text-box-trim cannot reach — the ink is centred by font metrics instead. Make a text-only row a block with era-label-ink; an icon+text row needs the label in its own element.',
+    category: 'typography',
+    severity: 'warn',
+    // Every flex box is a candidate; the checks below are the real gate and are
+    // far cheaper than reading styles for the whole tree.
+    selector: 'div,span,button,a,label,li,header,footer,summary',
+    check(el) {
+        const s = getComputedStyle(el);
+        if (s.display !== 'flex' && s.display !== 'inline-flex')
+            return null;
+        if (!CENTRING.has(s.alignItems))
+            return null;
+        // The anonymous item itself: a text node directly under the flex box.
+        const ownText = [...el.childNodes].some((n) => n.nodeType === Node.TEXT_NODE && n.textContent?.trim());
+        if (!ownText)
+            return null;
+        // Multi-line text is not centred by ink in the first place — this law is
+        // about single-line control chrome, which is what `nowrap` marks.
+        if (s.whiteSpace !== 'nowrap' && s.flexWrap !== 'nowrap')
+            return null;
+        const hasElementChild = el.children.length > 0;
+        const issue = {
+            auditId: 'typography/anonymous-text',
+            element: el,
+            message: hasElementChild
+                ? 'flex row holding an icon AND its own bare text — the text is an anonymous flex item, so its ink is centred by font metrics. The label needs its own element (or its own slot) before a trim can reach it.'
+                : 'flex row holding nothing but text — it has no reason to be flex. Make it a block with era-label-ink (or era-token-ink for a centred token) and the trim applies.',
+            details: { display: s.display, hasElementChild }
+        };
+        return issue;
+    }
+};

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

@@ -4,6 +4,7 @@ import { concentricInset } from './concentric-inset.js';
 import { cornersAxis } from './corners-axis.js';
 import { evenContainerPadding } from './even-container-padding.js';
 import { flatChrome } from './flat-chrome.js';
+import { anonymousText } from './anonymous-text.js';
 import { iconFlush } from './icon-flush.js';
 import { offAxisMotion } from './off-axis-motion.js';
 import { offTierHeight } from './off-tier-height.js';
@@ -14,4 +15,4 @@ 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, cornersAxis, evenContainerPadding, flatChrome, iconFlush, offAxisMotion, offTierHeight, pillHoldsItsInk, proseLeading, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };
+export { clippedGlyphs, collapsedTextTrim, concentricInset, cornersAxis, evenContainerPadding, flatChrome, iconFlush, anonymousText, offAxisMotion, offTierHeight, pillHoldsItsInk, proseLeading, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };

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

@@ -5,6 +5,7 @@ import { concentricInset } from './concentric-inset.js';
 import { cornersAxis } from './corners-axis.js';
 import { evenContainerPadding } from './even-container-padding.js';
 import { flatChrome } from './flat-chrome.js';
+import { anonymousText } from './anonymous-text.js';
 import { iconFlush } from './icon-flush.js';
 import { offAxisMotion } from './off-axis-motion.js';
 import { offTierHeight } from './off-tier-height.js';
@@ -15,7 +16,7 @@ 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, cornersAxis, evenContainerPadding, flatChrome, iconFlush, offAxisMotion, offTierHeight, pillHoldsItsInk, proseLeading, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };
+export { clippedGlyphs, collapsedTextTrim, concentricInset, cornersAxis, evenContainerPadding, flatChrome, iconFlush, anonymousText, 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
@@ -31,6 +32,7 @@ registry.register(cornersAxis);
 registry.register(evenContainerPadding);
 registry.register(flatChrome);
 registry.register(iconFlush);
+registry.register(anonymousText);
 registry.register(offAxisMotion);
 registry.register(offTierHeight);
 registry.register(pillHoldsItsInk);

package/dist/dev/audit/types.d.ts

@@ -1,5 +1,5 @@
 export type AuditSeverity = 'info' | 'warn' | 'error';
-export type AuditCategory = 'layout' | 'tokens' | 'a11y' | 'semantics';
+export type AuditCategory = 'layout' | 'tokens' | 'typography' | 'a11y' | 'semantics';
 export interface Issue {
     readonly auditId: string;
     readonly element: HTMLElement;

package/dist/docs/css-utilities.js

@@ -105,7 +105,7 @@ const INTRO = [
     'with the stylesheet and needs no import:',
     '',
     '```ts',
-    'import "@sig-nine/era-ui/css";',
+    'import "@signal9/era-ui/css";',
     '```',
     '',
     '```svelte',

package/dist/docs/llms-txt.js

@@ -10,8 +10,8 @@ function orientation(origin) {
         '## Using the library',
         '',
         '```ts',
-        'import { Button, Table, Select } from "@sig-nine/era-ui";',
-        'import "@sig-nine/era-ui/css";',
+        'import { Button, Table, Select } from "@signal9/era-ui";',
+        'import "@signal9/era-ui/css";',
         '```',
         '',
         'Named exports wrap a single primitive (`Button`, `Badge`, `Chip`, `Input`, …). Namespace exports compose primitives via sub-components (`Table.Root`, `Table.Row`, `Select.Trigger`, `Dialog.Content`, …). Every wrapper forwards unknown props to its underlying element or bits-ui primitive, so standard HTML attributes (`class`, `style`, event handlers, `aria-*`, `data-*`) work without ceremony.',