@signal9/era-ui 23.3.0 → 24.0.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [24.0.0](https://github.com/sig-nine/era-ui/compare/v23.3.0...v24.0.0) (2026-08-11)
+
+### ⚠ BREAKING CHANGES
+
+* **timeline:** `Timeline` moves from `@sig-nine/era-ui/ai` to
+`@sig-nine/era-ui/timeline`. `Todo` is unchanged at `@sig-nine/era-ui/ai`. The
+`/agent-progress` docs route is now `/timeline` and `/todo`. Verified against
+the built artifact: dist/ui/timeline/ resolves, dist/ai/timeline/ is gone, and
+the ai barrel exports Todo and not Timeline.
+
+toggle-group also leaves DEMO_OPTIONAL — it has a real demo page now.
+
+### Code Refactoring
+
+* **timeline:** Timeline is a ui primitive, not an AI one ([8093e9d](https://github.com/sig-nine/era-ui/commit/8093e9dac6133b180f5290827e124a2309c6adbd))
+
 ## [23.3.0](https://github.com/sig-nine/era-ui/compare/v23.2.0...v23.3.0) (2026-08-10)
 
 ### Features

package/dist/ai/index.d.ts

@@ -10,7 +10,6 @@ export * as Actions from './actions/index.js';
 export * as Artifact from './artifact/index.js';
 export * as Plan from './plan/index.js';
 export * as Todo from './todo/index.js';
-export * as Timeline from './timeline/index.js';
 export * as Queue from './queue/index.js';
 export * as Confirmation from './confirmation/index.js';
 export * as InlineCitation from './inline-citation/index.js';

package/dist/ai/index.js

@@ -15,7 +15,6 @@ export * as Actions from './actions/index.js';
 export * as Artifact from './artifact/index.js';
 export * as Plan from './plan/index.js';
 export * as Todo from './todo/index.js';
-export * as Timeline from './timeline/index.js';
 export * as Queue from './queue/index.js';
 export * as Confirmation from './confirmation/index.js';
 export * as InlineCitation from './inline-citation/index.js';

package/dist/dev/audit/audits/clipped-glyphs.js

@@ -36,6 +36,24 @@ export const clippedGlyphs = {
         const s = getComputedStyle(el);
         if (!/hidden|clip|auto|scroll/.test(s.overflowX + s.overflowY))
             return null;
+        /*
+         * VISUALLY HIDDEN TEXT IS SUPPOSED TO BE CLIPPED — that is the technique.
+         * `sr-only` is a 1x1 absolutely-positioned box with overflow:hidden, which
+         * is precisely the shape this rule hunts, so it reports every one of them
+         * as "a 1px box holding 16px text" and is right about the geometry and
+         * wrong about the defect.
+         *
+         * It had never fired because era's only sr-only spans were conditional
+         * (Button's loading label) and the board never rendered one. The first
+         * component to announce state unconditionally lit up four errors.
+         *
+         * Detected by SHAPE, not by the class name: a consumer's own
+         * visually-hidden helper is the same technique under a different name, and
+         * matching on `.sr-only` would flag theirs while excusing ours.
+         */
+        const r = el.getBoundingClientRect();
+        if (s.position === 'absolute' && r.width <= 1.5 && r.height <= 1.5)
+            return null;
         const fontSize = parseFloat(s.fontSize) || 14;
         const h = el.getBoundingClientRect().height;
         if (h === 0)

package/dist/ui/command-bar/command-bar.svelte

@@ -187,9 +187,16 @@
 <!-- The terminal command bar: a bare prompt line, not a floating palette. The
      dropdown anchors under it with no radius (a full-width sheet, like the shell
      it mirrors), but its chrome is surface-adaptive via --era-shadow-lg +
-     glass-blur: a flat sheet on flat (shadow resolves to none), the chisel frame
+     glass-blur: a 1px hairline at the divider colour on flat, the chisel frame
      on bevel, frost on glass — so it reads as "dedicated" on every surface, not
-     an undifferentiated rectangle. -->
+     an undifferentiated rectangle.
+
+     This said "a flat sheet on flat (shadow resolves to none)" until flat's
+     --era-shadow-lg stopped resolving to none. It is a RING (0 0 0 1px), not a
+     border, so it costs no layout — but it is visible, and describing it as
+     nothing is how a reader concludes a real edge is a bug. Note the token: the
+     resting --era-shadow IS still none on flat, and that is the one every
+     comment about a flat control's lack of chrome refers to. -->
 <div class={cn('relative flex h-control w-full min-w-0 items-center font-mono', className)}>
 	<ChevronRight class="mx-gutter size-icon shrink-0 text-fg" />
 

package/dist/ui/index.d.ts

@@ -40,6 +40,7 @@ export * as TimeField from './time-field/index.js';
 export * as TimeRangeField from './time-range-field/index.js';
 export * as Tooltip from './tooltip/index.js';
 export * as ToggleGroup from './toggle-group/index.js';
+export * as Timeline from './timeline/index.js';
 export * as Toolbar from './toolbar/index.js';
 export { Bar } from './bar/index.js';
 export { Button } from './button/index.js';

package/dist/ui/index.js

@@ -40,6 +40,7 @@ export * as TimeField from './time-field/index.js';
 export * as TimeRangeField from './time-range-field/index.js';
 export * as Tooltip from './tooltip/index.js';
 export * as ToggleGroup from './toggle-group/index.js';
+export * as Timeline from './timeline/index.js';
 export * as Toolbar from './toolbar/index.js';
 export { Bar } from './bar/index.js';
 export { Button } from './button/index.js';

package/dist/{ai → ui}/timeline/context.svelte.d.ts

@@ -29,7 +29,16 @@ export declare class TimelineData {
     steps: TimelineStep[];
     /** Live clock, ticked by the root while any step is running. */
     now: number;
-    /** A step's elapsed ms: its final duration, or live if still running. */
+    /**
+     * A step's elapsed ms: its final duration, or live if still running.
+     *
+     * `now === 0` means the clock never started — `tick={0}`, or a server render.
+     * A running step then falls back to its given `durationMs` instead of
+     * measuring against the wall clock, because measuring against a clock that
+     * was never started is how a frozen board rendered "1440215m 53s": the step's
+     * startedAt was a fixed epoch, and Date.now() minus a 2023 timestamp is a
+     * thousand days. A frozen timeline should show the durations it was handed.
+     */
     elapsed(step: TimelineStep): number;
     get total(): number;
     get running(): boolean;

package/dist/{ai → ui}/timeline/context.svelte.js

@@ -20,9 +20,18 @@ export class TimelineData {
     steps = $state([]);
     /** Live clock, ticked by the root while any step is running. */
     now = $state(0);
-    /** A step's elapsed ms: its final duration, or live if still running. */
+    /**
+     * A step's elapsed ms: its final duration, or live if still running.
+     *
+     * `now === 0` means the clock never started — `tick={0}`, or a server render.
+     * A running step then falls back to its given `durationMs` instead of
+     * measuring against the wall clock, because measuring against a clock that
+     * was never started is how a frozen board rendered "1440215m 53s": the step's
+     * startedAt was a fixed epoch, and Date.now() minus a 2023 timestamp is a
+     * thousand days. A frozen timeline should show the durations it was handed.
+     */
     elapsed(step) {
-        if (step.state === 'running' && step.startedAt) {
+        if (step.state === 'running' && step.startedAt && this.now > 0) {
             return Math.max(0, this.now - step.startedAt);
         }
         return step.durationMs ?? 0;

package/dist/{ai → ui}/timeline/timeline-step.svelte

@@ -47,6 +47,11 @@
 	WHAT, the bar's width is HOW LONG relative to the rest, and the caption is
 	WHEN in wall-clock, which is the one you need when correlating against logs.
 
+	role="listitem" sits on the step itself rather than on a wrapper. The wrapper
+	was `display: contents` — exactly a box that ISN'T — so anything measuring
+	this row read zeros from it (layout/wall-matches-gap reported a −48px wall).
+	A listitem outside a list is ignored, so a Step used standalone is fine.
+
 	flex-grow IS the duration, with a zero basis, so width is strictly
 	proportional. The min-width keeps a 200ms step readable beside a 60s one —
 	flexbox reserves it before distributing the rest, so the short step stays
@@ -60,6 +65,7 @@
 	fits `16:20:14.538`.
 -->
 <div
+	role="listitem"
 	class={cn('flex flex-col gap-gutter', showClock ? 'min-w-[12ch]' : 'min-w-[7ch]')}
 	style="flex: {grow} 1 0"
 >

package/dist/{ai → ui}/timeline/timeline.svelte

@@ -41,8 +41,12 @@
 		if (!shouldRun) {
 			if (timer) clearInterval(timer);
 			timer = null;
-			// Settle on a final reading rather than leaving the last tick's value.
-			data.now = Date.now();
+			// Settle on a final reading ONLY if the clock was ever running. With
+			// tick={0} — documented as "the counter freezes" — writing Date.now()
+			// here is the opposite of freezing: it hands every running step the
+			// wall clock to measure against, and a step whose startedAt is a fixed
+			// epoch reads a thousand days.
+			if (tick > 0) data.now = Date.now();
 			return;
 		}
 		data.now = Date.now();
@@ -78,7 +82,7 @@
 		{@render children()}
 	{:else}
 		{#each data.steps as step, i (step.id ?? i)}
-			<div role="listitem" class="contents"><Step {step} {showClock} /></div>
+			<Step {step} {showClock} />
 		{/each}
 	{/if}
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "23.3.0",
+	"version": "24.0.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",