@signal9/era-ui 34.12.2 → 34.13.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [34.13.0](https://github.com/sig-nine/era-ui/compare/v34.12.2...v34.13.0) (2026-08-31)
+
+### Features
+
+* **timeline:** add activity inspection ([e43d313](https://github.com/sig-nine/era-ui/commit/e43d313577473f854c1b39ea7eda5ecafd0ff3db))
+
 ## [34.12.2](https://github.com/sig-nine/era-ui/compare/v34.12.1...v34.12.2) (2026-08-31)
 
 ### Bug Fixes

package/dist/ui/timeline/context.svelte.d.ts

@@ -53,6 +53,10 @@ export declare class TimelineData {
     activityLayout: ActivityTimelineLayout;
     selectedId: TimelineStepId | null;
     onselect: ((step: ActivityTimelineStep) => void) | undefined;
+    expandedId: TimelineStepId | null;
+    hasActivityDetails: boolean;
+    onexpandedchange: ((id: TimelineStepId | null) => void) | undefined;
+    instanceId: string;
     /** Live clock, ticked by the root while any step is running. */
     now: number;
     /**
@@ -68,6 +72,8 @@ export declare class TimelineData {
     elapsed(step: AnyTimelineStep): number;
     get total(): number;
     get running(): boolean;
+    detailsId(): string;
+    toggleExpanded(step: ActivityTimelineStep): void;
     /**
      * This step's GROW FACTOR — its duration, straight.
      *

package/dist/ui/timeline/context.svelte.js

@@ -31,6 +31,10 @@ export class TimelineData {
     activityLayout = $state('scroll');
     selectedId = $state(null);
     onselect = $state();
+    expandedId = $state(null);
+    hasActivityDetails = $state(false);
+    onexpandedchange = $state();
+    instanceId = $state('');
     /** Live clock, ticked by the root while any step is running. */
     now = $state(0);
     /**
@@ -55,6 +59,14 @@ export class TimelineData {
     get running() {
         return this.steps.some((s) => s.state === 'running');
     }
+    detailsId() {
+        return `${this.instanceId}-activity-details`;
+    }
+    toggleExpanded(step) {
+        if (!this.hasActivityDetails)
+            return;
+        this.onexpandedchange?.(this.expandedId === step.id ? null : step.id);
+    }
     /**
      * This step's GROW FACTOR — its duration, straight.
      *

package/dist/ui/timeline/timeline-step.svelte

@@ -47,7 +47,9 @@
 	import CircleSlash from '@lucide/svelte/icons/circle-slash';
 	import CircleX from '@lucide/svelte/icons/circle-x';
 	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+	import { mergeProps } from 'bits-ui';
 	import { cn } from '../../utils/index.js';
+	import * as Tooltip from '../tooltip/index.js';
 	import {
 		getTimelineData,
 		formatDuration,
@@ -60,11 +62,15 @@
 		step,
 		showClock = true,
 		activityCompletedIcon,
+		activityIcon,
+		activityTooltip,
 		class: className
 	}: {
 		step: AnyTimelineStep;
 		showClock?: boolean;
 		activityCompletedIcon?: Snippet<[ActivityTimelineStep]>;
+		activityIcon?: Snippet<[ActivityTimelineStep]>;
+		activityTooltip?: Snippet<[ActivityTimelineStep]>;
 		class?: string;
 	} = $props();
 
@@ -78,10 +84,49 @@
 	const activityTone = $derived(ACTIVITY_TONE[activityStep.state]);
 	const stateLabel = $derived(ACTIVITY_STATE_LABEL[activityStep.state]);
 	const selected = $derived(data?.selectedId === step.id);
-	const interactive = $derived(data?.variant === 'activity' && !!data.onselect);
+	const expanded = $derived(data?.expandedId === step.id);
+	const interactive = $derived(
+		data?.variant === 'activity' && (!!data.onselect || data.hasActivityDetails)
+	);
 	const durationActivity = $derived(
 		data?.variant === 'activity' && data.activityLayout === 'duration'
 	);
+
+	function activateActivity() {
+		data?.onselect?.(activityStep);
+		data?.toggleExpanded(activityStep);
+	}
+
+	function handleActivityKeydown(event: KeyboardEvent) {
+		if (!data) return;
+		if (event.key === 'Escape' && expanded && data.hasActivityDetails) {
+			event.preventDefault();
+			data.onexpandedchange?.(null);
+			return;
+		}
+		const destinations = ['ArrowLeft', 'ArrowRight', 'Home', 'End'];
+		if (!destinations.includes(event.key)) return;
+		const list = (event.currentTarget as HTMLElement).closest('[role="list"]');
+		const controls = list
+			? [...list.querySelectorAll<HTMLElement>('[data-timeline-activity-control]')]
+			: [];
+		const current = controls.indexOf(event.currentTarget as HTMLElement);
+		if (current < 0 || controls.length === 0) return;
+		event.preventDefault();
+		const target =
+			event.key === 'Home'
+				? 0
+				: event.key === 'End'
+					? controls.length - 1
+					: event.key === 'ArrowLeft'
+						? Math.max(0, current - 1)
+						: Math.min(controls.length - 1, current + 1);
+		controls[target]?.focus();
+	}
+
+	function handleActivityFocus(event: FocusEvent) {
+		(event.currentTarget as HTMLElement).scrollIntoView({ block: 'nearest', inline: 'nearest' });
+	}
 </script>
 
 <!--
@@ -109,7 +154,36 @@
 -->
 {#if data?.variant === 'activity'}
 	{#snippet activityContent()}
-		{#if activityStep.state === 'running'}
+		{#if activityIcon}
+			<span
+				class="flex size-icon shrink-0 items-center justify-center {activityTone.icon}"
+				data-timeline-activity-identity
+				aria-hidden="true"
+			>
+				{@render activityIcon(activityStep)}
+				<span
+					class="flex items-center justify-center rounded-full bg-elevated {activityTone.icon}"
+					data-timeline-activity-indicator
+				>
+					{#if activityStep.state === 'running'}
+						<LoaderCircle
+							class="motion-safe:animate-spin"
+							style="animation-duration: calc(var(--era-duration) * 8)"
+						/>
+					{:else if activityStep.state === 'awaiting'}
+						<CircleAlert />
+					{:else if activityStep.state === 'done'}
+						<CircleCheck />
+					{:else if activityStep.state === 'failed'}
+						<CircleX />
+					{:else if activityStep.state === 'cancelled'}
+						<CircleSlash />
+					{:else}
+						<Circle />
+					{/if}
+				</span>
+			</span>
+		{:else if activityStep.state === 'running'}
 			<LoaderCircle
 				class="size-icon shrink-0 {activityTone.icon} [animation-duration:calc(var(--era-duration)*8)] motion-safe:animate-spin"
 				aria-hidden="true"
@@ -176,29 +250,61 @@
 		data-timeline-activity-density={durationActivity ? data.density : undefined}
 		data-timeline-step-id={step.id}
 	>
-		{#if interactive}
-			<button
-				type="button"
-				aria-current={selected ? 'step' : undefined}
-				aria-label={`${step.label}: ${stateLabel}`}
-				title={activityTitle}
-				class={activityClass}
-				data-timeline-activity-control={durationActivity ? '' : undefined}
-				onclick={() => data.onselect?.(activityStep)}
-				onfocus={(event) =>
-					event.currentTarget.scrollIntoView({ block: 'nearest', inline: 'nearest' })}
-			>
-				{@render activityContent()}
-			</button>
-		{:else}
-			<div
-				title={activityTitle}
-				class={activityClass}
-				data-timeline-activity-control={durationActivity ? '' : undefined}
-			>
-				{@render activityContent()}
-			</div>
-		{/if}
+		<Tooltip.Provider delayDuration={250}>
+			<Tooltip.Root>
+				<Tooltip.Trigger>
+					{#snippet child({ props })}
+						{#if interactive}
+							{@const triggerProps = mergeProps(props, {
+								onclick: activateActivity,
+								onkeydown: handleActivityKeydown,
+								onfocus: handleActivityFocus
+							})}
+							<button
+								{...triggerProps}
+								type="button"
+								aria-current={selected ? 'step' : undefined}
+								aria-label={`${step.label}: ${stateLabel}`}
+								aria-expanded={data.hasActivityDetails ? expanded : undefined}
+								aria-controls={data.hasActivityDetails ? data.detailsId() : undefined}
+								class={activityClass}
+								data-state={activityStep.state}
+								data-selected={selected ? '' : undefined}
+								data-expanded={expanded ? '' : undefined}
+								data-layout={data.activityLayout}
+								data-timeline-activity-control
+							>
+								{@render activityContent()}
+							</button>
+						{:else}
+							<div
+								{...props}
+								aria-label={`${step.label}: ${stateLabel}`}
+								class={activityClass}
+								data-state={activityStep.state}
+								data-selected={selected ? '' : undefined}
+								data-expanded={expanded ? '' : undefined}
+								data-layout={data.activityLayout}
+								data-timeline-activity-control
+							>
+								{@render activityContent()}
+							</div>
+						{/if}
+					{/snippet}
+				</Tooltip.Trigger>
+				<Tooltip.Content
+					role="tooltip"
+					class="h-auto max-w-prose flex-col items-start py-inset-pill whitespace-normal"
+				>
+					{#if activityTooltip}
+						{@render activityTooltip(activityStep)}
+					{:else}
+						<span class="text-fg">{step.label}</span>
+						<span class="font-mono text-micro text-muted tabular-nums">{activityTitle}</span>
+					{/if}
+				</Tooltip.Content>
+			</Tooltip.Root>
+		</Tooltip.Provider>
 	</div>
 {:else}
 	<div
@@ -250,6 +356,28 @@
 		container-type: inline-size;
 	}
 
+	[data-timeline-activity-identity] {
+		position: relative;
+	}
+
+	[data-timeline-activity-identity] > :not([data-timeline-activity-indicator]) {
+		width: 100%;
+		height: 100%;
+	}
+
+	[data-timeline-activity-indicator] {
+		position: absolute;
+		right: calc(var(--era-sp) / -8);
+		bottom: calc(var(--era-sp) / -8);
+		width: var(--era-sp);
+		height: var(--era-sp);
+	}
+
+	[data-timeline-activity-indicator] > :global(svg) {
+		width: 100%;
+		height: 100%;
+	}
+
 	/* Once a segment has less than one control tier plus roughly three glyphs,
 	   fragments stop communicating useful information. Collapse the whole text
 	   treatment at once and preserve a concentric, state-bearing icon control. */

package/dist/ui/timeline/timeline-step.svelte.d.ts

@@ -6,6 +6,8 @@ type $$ComponentProps = {
     step: AnyTimelineStep;
     showClock?: boolean;
     activityCompletedIcon?: Snippet<[ActivityTimelineStep]>;
+    activityIcon?: Snippet<[ActivityTimelineStep]>;
+    activityTooltip?: Snippet<[ActivityTimelineStep]>;
     class?: string;
 };
 declare const TimelineStep: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/ui/timeline/timeline.svelte

@@ -23,10 +23,15 @@
 		ariaLabel = 'Build timeline',
 		selectedId = null,
 		onselect,
+		expandedId = $bindable(null),
+		onexpandedchange,
 		reveal,
 		tick = 100,
 		showClock = true,
 		activityCompletedIcon,
+		activityIcon,
+		activityDetails,
+		activityTooltip,
 		children,
 		class: className
 	}: {
@@ -43,19 +48,33 @@
 		selectedId?: TimelineStepId | null;
 		/** Supplying this callback turns activity steps into native buttons. */
 		onselect?: (step: ActivityTimelineStep) => void;
+		/** Controlled expanded activity. Bind it or update it from `onexpandedchange`. */
+		expandedId?: TimelineStepId | null;
+		onexpandedchange?: (id: TimelineStepId | null) => void;
 		/** Opt-in horizontal reveal target. `latest` follows appends; `running` follows the first active step. */
 		reveal?: TimelineStepId | 'latest' | 'running';
 		/** Live counter interval in ms. 0 stops the clock (the counter freezes). */
 		tick?: number;
 		showClock?: boolean;
 		/** Consumer-rendered identity for completed activity steps. Other states keep
-		 * Era's lifecycle glyphs so running, approval, failure, and cancellation remain explicit. */
+		 * Era's lifecycle glyphs. Ignored when the general `activityIcon` is supplied. */
 		activityCompletedIcon?: Snippet<[ActivityTimelineStep]>;
+		/** Persistent consumer identity rendered throughout every activity lifecycle state. */
+		activityIcon?: Snippet<[ActivityTimelineStep]>;
+		/** Detail content rendered in Era's controlled disclosure panel. */
+		activityDetails?: Snippet<[ActivityTimelineStep]>;
+		/** Optional replacement for Era's label, state, duration, and description tooltip. */
+		activityTooltip?: Snippet<[ActivityTimelineStep]>;
 		children?: Snippet;
 		class?: string;
 	} = $props();
+	const instanceId = $props.id();
 
 	const data = setTimelineData(new TimelineData());
+	function requestExpanded(id: TimelineStepId | null) {
+		expandedId = id;
+		onexpandedchange?.(id);
+	}
 	$effect(() => {
 		data.steps = steps;
 		data.variant = variant;
@@ -63,7 +82,16 @@
 		data.density = density;
 		data.selectedId = selectedId;
 		data.onselect = onselect;
+		data.expandedId = expandedId;
+		data.hasActivityDetails = !!activityDetails;
+		data.onexpandedchange = requestExpanded;
+		data.instanceId = instanceId;
 	});
+	const expandedStep = $derived(
+		variant === 'activity' && activityDetails
+			? (steps.find((step) => step.id === expandedId) as ActivityTimelineStep | undefined)
+			: undefined
+	);
 
 	let lastRevealed = '';
 	$effect(() => {
@@ -126,6 +154,32 @@
 	});
 </script>
 
+{#snippet timelineList()}
+	<div
+		bind:this={ref}
+		role="list"
+		aria-label={ariaLabel}
+		aria-live={variant === 'activity' ? 'polite' : undefined}
+		class={cn(
+			'flex w-full min-w-0 gap-gutter',
+			variant === 'activity'
+				? activityLayout === 'duration'
+					? 'max-w-full items-center overflow-x-clip overflow-y-visible'
+					: 'scrollbar-none max-w-full items-center overflow-x-auto overscroll-x-contain'
+				: 'items-start',
+			className
+		)}
+	>
+		{#if children}
+			{@render children()}
+		{:else}
+			{#each data.steps as step, i (step.id ?? i)}
+				<Step {activityCompletedIcon} {activityIcon} {activityTooltip} {step} {showClock} />
+			{/each}
+		{/if}
+	</div>
+{/snippet}
+
 <!--
 	A build timeline: one full-width bar cut into a segment per step, where a
 	segment's WIDTH is how long that step took. You read "installing took three
@@ -138,26 +192,21 @@
 	carries its own sr-only summary because the visual encoding — width — is
 	exactly the part that does not survive being read aloud.
 -->
-<div
-	bind:this={ref}
-	role="list"
-	aria-label={ariaLabel}
-	aria-live={variant === 'activity' ? 'polite' : undefined}
-	class={cn(
-		'flex w-full min-w-0 gap-gutter',
-		variant === 'activity'
-			? activityLayout === 'duration'
-				? 'max-w-full items-center overflow-x-clip overflow-y-visible'
-				: 'scrollbar-none max-w-full items-center overflow-x-auto overscroll-x-contain'
-			: 'items-start',
-		className
-	)}
->
-	{#if children}
-		{@render children()}
-	{:else}
-		{#each data.steps as step, i (step.id ?? i)}
-			<Step {activityCompletedIcon} {step} {showClock} />
-		{/each}
-	{/if}
-</div>
+{#if variant === 'activity' && activityDetails}
+	<div class="w-full min-w-0">
+		{@render timelineList()}
+		{#if expandedStep}
+			<div
+				id={data.detailsId()}
+				role="region"
+				aria-label={`${expandedStep.label} details`}
+				class="mt-gutter w-full min-w-0 overflow-hidden border border-divider bg-well p-card text-body text-fg"
+				data-timeline-activity-details={expandedStep.id}
+			>
+				{@render activityDetails(expandedStep)}
+			</div>
+		{/if}
+	</div>
+{:else}
+	{@render timelineList()}
+{/if}

package/dist/ui/timeline/timeline.svelte.d.ts

@@ -14,17 +14,26 @@ type $$ComponentProps = {
     selectedId?: TimelineStepId | null;
     /** Supplying this callback turns activity steps into native buttons. */
     onselect?: (step: ActivityTimelineStep) => void;
+    /** Controlled expanded activity. Bind it or update it from `onexpandedchange`. */
+    expandedId?: TimelineStepId | null;
+    onexpandedchange?: (id: TimelineStepId | null) => void;
     /** Opt-in horizontal reveal target. `latest` follows appends; `running` follows the first active step. */
     reveal?: TimelineStepId | 'latest' | 'running';
     /** Live counter interval in ms. 0 stops the clock (the counter freezes). */
     tick?: number;
     showClock?: boolean;
     /** Consumer-rendered identity for completed activity steps. Other states keep
-     * Era's lifecycle glyphs so running, approval, failure, and cancellation remain explicit. */
+     * Era's lifecycle glyphs. Ignored when the general `activityIcon` is supplied. */
     activityCompletedIcon?: Snippet<[ActivityTimelineStep]>;
+    /** Persistent consumer identity rendered throughout every activity lifecycle state. */
+    activityIcon?: Snippet<[ActivityTimelineStep]>;
+    /** Detail content rendered in Era's controlled disclosure panel. */
+    activityDetails?: Snippet<[ActivityTimelineStep]>;
+    /** Optional replacement for Era's label, state, duration, and description tooltip. */
+    activityTooltip?: Snippet<[ActivityTimelineStep]>;
     children?: Snippet;
     class?: string;
 };
-declare const Timeline: import("svelte").Component<$$ComponentProps, {}, "ref">;
+declare const Timeline: import("svelte").Component<$$ComponentProps, {}, "ref" | "expandedId">;
 type Timeline = ReturnType<typeof Timeline>;
 export default Timeline;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "34.12.2",
+	"version": "34.13.0",
 	"packageManager": "npm@11.19.0",
 	"engines": {
 		"node": ">=24 <27",

package/skills/era-ui/references/releases/34.md

@@ -1,5 +1,11 @@
 # Era UI v34 release history
 
+## [34.13.0](https://github.com/sig-nine/era-ui/compare/v34.12.2...v34.13.0) (2026-08-31)
+
+### Features
+
+* **timeline:** add activity inspection ([e43d313](https://github.com/sig-nine/era-ui/commit/e43d313577473f854c1b39ea7eda5ecafd0ff3db))
+
 ## [34.12.2](https://github.com/sig-nine/era-ui/compare/v34.12.1...v34.12.2) (2026-08-31)
 
 ### Bug Fixes

package/skills/era-ui/references/releases/index.md

@@ -5,7 +5,7 @@ Load only the major versions crossed by an upgrade; use the package-root `CHANGE
 
 | Major | Range | Releases | History |
 | ---: | --- | ---: | --- |
-| 34 | 34.0.0–34.12.2 | 40 | [Read](./34.md) |
+| 34 | 34.0.0–34.13.0 | 41 | [Read](./34.md) |
 | 33 | 33.0.0–33.0.1 | 2 | [Read](./33.md) |
 | 32 | 32.0.0–32.0.1 | 2 | [Read](./32.md) |
 | 31 | 31.0.0–31.0.0 | 1 | [Read](./31.md) |