@signal9/era-ui 10.0.0 → 10.1.0

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-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-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/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}

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/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/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

@@ -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"

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.',

package/dist/docs/notes.md

@@ -1,12 +1,12 @@
 ## Usage
 
-Apps ship on their own subpath and are **not** re-exported from `@sig-nine/era-ui`.
+Apps ship on their own subpath and are **not** re-exported from `@signal9/era-ui`.
 Notes carries TipTap, and a consumer who never imports an app should never pay
 for it.
 
 ```svelte
 <script>
-	import { Notes } from '@sig-nine/era-ui/apps';
+	import { Notes } from '@signal9/era-ui/apps';
 </script>
 
 <Notes />
@@ -46,7 +46,7 @@ Persistence is one small interface, so server-backed hosting is a drop-in swap
 `load`/`save` may be sync or async:
 
 ```ts
-import { Notes, NotesStore } from '@sig-nine/era-ui/apps';
+import { Notes, NotesStore } from '@signal9/era-ui/apps';
 
 const store = new NotesStore({
 	adapter: {