@urbicon-ui/blocks 6.9.0 → 6.10.1

package/dist/primitives/JourneyTimeline/JourneyTimeline.svelte

@@ -1,11 +1,6 @@
 <script lang="ts">
   import { useBlocksI18n } from '../..';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
-  import { resolveIcon } from '../../icons';
-  import CheckIconDefault from '../../icons/CheckIcon.svelte';
-  import CircleDotIconDefault from '../../icons/CircleDotIcon.svelte';
-  import BanIconDefault from '../../icons/BanIcon.svelte';
-  import MinusIconDefault from '../../icons/MinusIcon.svelte';
   import {
     journeyTimelineVariants,
     type JourneyTimelineSlots,
@@ -15,20 +10,16 @@
 
   const bt = useBlocksI18n();
 
-  const CheckIcon = resolveIcon('check', CheckIconDefault);
-  const CircleDotIcon = resolveIcon('circleDot', CircleDotIconDefault);
-  const BanIcon = resolveIcon('ban', BanIconDefault);
-  const MinusIcon = resolveIcon('minus', MinusIconDefault);
-
   let {
     items,
     orientation = 'vertical',
     size = 'md',
+    detail: detailProp,
     focusId = $bindable(),
     defaultFocusId,
-    scrollSpy = false,
     onFocusChange,
     node,
+    meta,
     class: className = '',
     unstyled: unstyledProp = false,
     slotClasses: slotClassesProp = {},
@@ -39,6 +30,14 @@
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
 
+  // Horizontal always renders the shared panel — inline expansion inside a
+  // horizontal rail has no sane geometry. `detail` only chooses for vertical.
+  const detailMode = $derived(orientation === 'horizontal' ? 'panel' : (detailProp ?? 'inline'));
+
+  // The chronicle axis renders as soon as any node carries `meta` (or a rich
+  // `meta` snippet is provided).
+  const hasMetaRail = $derived(!!meta || items.some((it) => it.meta !== undefined));
+
   // --- focus state (controlled via bind:focusId, else internal) -------------
   const focusableItems = $derived(items.filter((it) => it.focusable !== false));
   const isFocusable = (id: string | undefined) =>
@@ -52,17 +51,17 @@
   );
 
   let internalFocusId = $state<string | undefined>(undefined);
-  // A stale internal focus (the expanded node was removed) falls back to the
-  // default so a node is always open. A controlled `focusId` is honoured as-is
-  // (write-strict) and only surfaced via the dev warning below.
+  // A stale internal focus (the focused node was removed) falls back to the
+  // default so a node is always in focus. A controlled `focusId` is honoured
+  // as-is (write-strict) and only surfaced via the dev warning below.
   const activeFocusId = $derived(
     focusId !== undefined ? focusId : isFocusable(internalFocusId) ? internalFocusId : defaultFocus
   );
 
   // The roving-tabindex target: the last keyboard/click-touched node, else the
-  // expanded node. Kept distinct from `activeFocusId` so arrow keys can move DOM
-  // focus without expanding (expansion happens on Enter/Space/click). Guarded
-  // against a removed node so the tab stop never lands on nothing.
+  // focused node. Kept distinct from `activeFocusId` so arrow keys can move DOM
+  // focus without changing the focused node (that happens on Enter/Space/click).
+  // Guarded against removed nodes so the tab stop never lands on nothing.
   let rovingId = $state<string | undefined>(undefined);
   // Every candidate is validated against the live focusable set (not just the
   // first non-undefined one), so a stale roving/active id — or a bad controlled
@@ -77,7 +76,7 @@
     if (!import.meta.env?.DEV || items.length === 0) return;
     if (focusId !== undefined && !isFocusable(focusId)) {
       console.warn(
-        `[JourneyTimeline] focusId "${focusId}" matches no focusable node — every node stays collapsed.`
+        `[JourneyTimeline] focusId "${focusId}" matches no focusable node — no node shows its detail.`
       );
     }
     if (focusId === undefined && defaultFocusId !== undefined && !isFocusable(defaultFocusId)) {
@@ -87,22 +86,97 @@
     }
     if (!node && focusableItems.length > 0) {
       console.warn(
-        '[JourneyTimeline] focusable nodes render as expandable buttons but no `node` snippet was provided. Pass a `node` snippet or set focusable:false on nodes that carry no detail.'
+        '[JourneyTimeline] focusable nodes render as buttons but no `node` snippet was provided. Pass a `node` snippet or set focusable:false on nodes that carry no detail.'
+      );
+    }
+    if (orientation === 'horizontal' && detailProp === 'inline') {
+      console.warn(
+        '[JourneyTimeline] detail="inline" is ignored for orientation="horizontal" — the horizontal rail always renders the shared panel.'
       );
     }
   });
 
-  function setFocus(id: string) {
+  function setFocus(id: string): boolean {
     const target = items.find((it) => it.id === id);
-    if (!target || target.focusable === false || id === activeFocusId) return;
+    if (!target || target.focusable === false || id === activeFocusId) return false;
     if (focusId !== undefined) focusId = id;
     else internalFocusId = id;
     onFocusChange?.(id);
+    return true;
   }
 
   function activate(item: JourneyNode) {
     rovingId = item.id;
-    setFocus(item.id);
+    if (setFocus(item.id)) pinFocusAnchor(item.id);
+  }
+
+  // --- focus anchor pinning --------------------------------------------------
+  // When activating a node below the currently open card, that card's collapse
+  // would yank the freshly activated header up the page. While the height
+  // transition runs, counter-scroll each frame so the activated header stays
+  // visually stationary — the context moves, the focus point doesn't. Real user
+  // scroll input cancels the pin immediately. Inline vertical detail only; the
+  // panel modes never change geometry.
+  // Only one pin may drive the scroll at a time: activating another node while
+  // a pin is in flight cancels it first (two loops anchored to different
+  // headers would fight over the scroll position frame by frame).
+  let cancelActivePin: (() => void) | undefined;
+  function pinFocusAnchor(id: string) {
+    if (orientation !== 'vertical' || detailMode !== 'inline' || !node || !rootRef) return;
+    cancelActivePin?.();
+    const anchor = rootRef.querySelector<HTMLElement>(
+      `[data-journey-trigger][data-node-id="${id}"]`
+    );
+    if (!anchor) return;
+
+    // Nearest scrollable ancestor, else the window.
+    let scroller: HTMLElement | null = rootRef.parentElement;
+    while (scroller) {
+      const style = getComputedStyle(scroller);
+      if (/(auto|scroll)/.test(style.overflowY) && scroller.scrollHeight > scroller.clientHeight)
+        break;
+      scroller = scroller.parentElement;
+    }
+
+    // Pin for as long as the grid-rows transition runs (motion tokens collapse
+    // to 1ms under prefers-reduced-motion, so the pin is a single correction).
+    const detailEl = rootRef.querySelector<HTMLElement>('[data-journey-detail]');
+    const raw = detailEl ? getComputedStyle(detailEl).transitionDuration.split(',')[0].trim() : '';
+    const parsed = raw.endsWith('ms')
+      ? Number.parseFloat(raw)
+      : raw.endsWith('s')
+        ? Number.parseFloat(raw) * 1000
+        : Number.NaN;
+    const duration = Math.min(Number.isFinite(parsed) ? parsed + 80 : 380, 600);
+
+    const startTop = anchor.getBoundingClientRect().top;
+    const start = performance.now();
+    let cancelled = false;
+    const cancel = () => {
+      cancelled = true;
+    };
+    cancelActivePin = cancel;
+    window.addEventListener('wheel', cancel, { passive: true, capture: true });
+    window.addEventListener('touchmove', cancel, { passive: true, capture: true });
+    const cleanup = () => {
+      window.removeEventListener('wheel', cancel, { capture: true });
+      window.removeEventListener('touchmove', cancel, { capture: true });
+      if (cancelActivePin === cancel) cancelActivePin = undefined;
+    };
+    const step = () => {
+      if (cancelled || !anchor.isConnected) {
+        cleanup();
+        return;
+      }
+      const drift = anchor.getBoundingClientRect().top - startTop;
+      if (drift !== 0) {
+        if (scroller) scroller.scrollTop += drift;
+        else window.scrollBy(0, drift);
+      }
+      if (performance.now() - start < duration) requestAnimationFrame(step);
+      else cleanup();
+    };
+    requestAnimationFrame(step);
   }
 
   // --- keyboard roving navigation -------------------------------------------
@@ -161,47 +235,13 @@
     }
   }
 
-  // --- scroll-spy (optional) -------------------------------------------------
-  $effect(() => {
-    if (!scrollSpy || !rootRef) return;
-    // Re-subscribe when the node set changes (reading `items` makes it a dep).
-    const currentItems = items;
-    const nodeEls = Array.from(rootRef.querySelectorAll<HTMLElement>('[data-journey-node]'));
-    if (nodeEls.length === 0) return;
-
-    const visible = new Set<string>();
-    // `observe()` delivers a synthetic initial callback for every target before
-    // any scrolling. Seed `visible` from it but do NOT act — otherwise mounting
-    // would clobber the resolved default focus (or a controlled focusId) and fire
-    // a spurious onFocusChange. Scroll-spy only *follows* real scrolling.
-    let seeded = false;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          const id = (entry.target as HTMLElement).dataset.nodeId;
-          if (!id) continue;
-          if (entry.isIntersecting) visible.add(id);
-          else visible.delete(id);
-        }
-        if (!seeded) {
-          seeded = true;
-          return;
-        }
-        const topmost = currentItems.find((it) => it.focusable !== false && visible.has(it.id));
-        if (topmost) setFocus(topmost.id);
-      },
-      // A node counts as "current" while it sits in the top 40% of the viewport.
-      { rootMargin: '0px 0px -60% 0px', threshold: 0 }
-    );
-    for (const el of nodeEls) observer.observe(el);
-    return () => observer.disconnect();
-  });
-
   // --- styling ---------------------------------------------------------------
   type Styles = ReturnType<typeof journeyTimelineVariants>;
 
   const containerStyles = $derived(
-    unstyled ? null : journeyTimelineVariants({ orientation, size })
+    unstyled
+      ? null
+      : journeyTimelineVariants({ orientation, size, detail: detailMode, withMeta: hasMetaRail })
   );
 
   function nodeStyles(item: JourneyNode, focused: boolean): Styles | null {
@@ -210,11 +250,14 @@
       : journeyTimelineVariants({
           orientation,
           size,
+          detail: detailMode,
+          withMeta: hasMetaRail,
           status: item.status,
           focused,
           interactive: item.focusable !== false,
           // The connector leaving a completed node reads as "travelled".
-          connectorComplete: item.status === 'complete'
+          travelled: item.status === 'complete',
+          connectorStyle: item.connector ?? 'solid'
         });
   }
 
@@ -235,7 +278,6 @@
   }
 
   // --- misc derived ----------------------------------------------------------
-  const iconSize = $derived(size === 'sm' ? 14 : size === 'lg' ? 20 : 16);
   const focusedItem = $derived(
     items.find((it) => it.focusable !== false && it.id === activeFocusId)
   );
@@ -250,21 +292,15 @@
   }
 </script>
 
-<!-- Marker glyph — decorative; the status is conveyed by the sr-only label. -->
-{#snippet markerGlyph(item: JourneyNode)}
-  {#if item.status === 'complete'}
-    <CheckIcon size={iconSize} />
-  {:else if item.status === 'active'}
-    <CircleDotIcon size={iconSize} />
-  {:else if item.status === 'blocked'}
-    <BanIcon size={iconSize} />
-  {:else if item.status === 'skipped'}
-    <MinusIcon size={iconSize} />
+{#snippet metaCell(item: JourneyNode, styles: Styles | null)}
+  {#if meta}
+    {@render meta(item)}
+  {:else if item.meta !== undefined}
+    <span class={sc(styles, 'meta')}>{item.meta}</span>
   {/if}
 {/snippet}
 
-{#snippet header(item: JourneyNode, styles: Styles | null)}
-  <span class={sc(styles, 'marker')}>{@render markerGlyph(item)}</span>
+{#snippet labels(item: JourneyNode, styles: Styles | null)}
   <span class={sc(styles, 'labelGroup')}>
     <span class={sc(styles, 'title')}>{item.title}</span>
     {#if item.subtitle}
@@ -285,17 +321,19 @@
       tabindex={item.id === tabbableId ? 0 : -1}
       aria-expanded={node ? focused : undefined}
       aria-controls={node
-        ? orientation === 'horizontal'
-          ? panelId
+        ? detailMode === 'panel'
+          ? // Reference the shared readout only while it actually renders — a
+            // bad controlled focusId leaves no panel to point at.
+            focusedItem && panelId
           : detailDomId(index)
         : undefined}
       onclick={() => activate(item)}
     >
-      {@render header(item, styles)}
+      {@render labels(item, styles)}
     </button>
   {:else}
     <div class={sc(styles, 'trigger')} data-node-id={item.id}>
-      {@render header(item, styles)}
+      {@render labels(item, styles)}
     </div>
   {/if}
 {/snippet}
@@ -304,6 +342,7 @@
   bind:this={rootRef}
   class={sc(containerStyles, 'base', className)}
   data-orientation={orientation}
+  data-detail={detailMode}
   {...restProps}
 >
   <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
@@ -314,6 +353,7 @@
   >
     {#each items as item, index (item.id)}
       {@const focused = item.focusable !== false && item.id === activeFocusId}
+      {@const last = index === items.length - 1}
       {@const styles = nodeStyles(item, focused)}
       {#if orientation === 'horizontal'}
         <li
@@ -322,8 +362,34 @@
           data-node-id={item.id}
           aria-current={item.status === 'active' ? 'step' : undefined}
         >
+          {#if hasMetaRail}
+            <div class={sc(styles, 'metaColumn')}>
+              {#if meta || item.meta !== undefined}
+                {@render metaCell(item, styles)}
+              {:else}
+                <!-- Empty placeholder keeps every station's meta row the same
+                     height, so markers and titles stay on one baseline. -->
+                <span class={sc(styles, 'meta')} aria-hidden="true">&nbsp;</span>
+              {/if}
+            </div>
+          {/if}
+          <!-- DOM order trigger → spine (visual order flipped via order-*):
+               a segment label is announced after the node it departs from. -->
           {@render trigger(item, index, focused, styles)}
-          <span data-journey-connector class={sc(styles, 'connector')} aria-hidden="true"></span>
+          <div class={sc(styles, 'markerColumn')}>
+            <span class={sc(styles, 'marker')} data-journey-marker="" aria-hidden="true"></span>
+            {#if !last}
+              <span data-journey-connector="" class={sc(styles, 'connector')} aria-hidden="true"
+              ></span>
+              {#if item.segmentLabel}
+                <span class={sc(styles, 'segment')} data-journey-segment="">
+                  {item.segmentLabel}
+                </span>
+                <span data-journey-connector="" class={sc(styles, 'connector')} aria-hidden="true"
+                ></span>
+              {/if}
+            {/if}
+          </div>
         </li>
       {:else}
         <li
@@ -332,25 +398,41 @@
           data-node-id={item.id}
           aria-current={item.status === 'active' ? 'step' : undefined}
         >
-          {@render trigger(item, index, focused, styles)}
-          <div class={sc(styles, 'body')}>
-            <div class={sc(styles, 'connectorColumn')}>
-              <span data-journey-connector class={sc(styles, 'connector')} aria-hidden="true"
-              ></span>
+          {#if hasMetaRail}
+            <div class={sc(styles, 'metaColumn')}>
+              {@render metaCell(item, styles)}
             </div>
-            {#if node && item.focusable !== false}
-              <div
-                id={detailDomId(index)}
-                role="region"
-                aria-label={item.title}
-                class={sc(styles, 'detail')}
-                style="grid-template-rows: {focused ? '1fr' : '0fr'}"
-              >
-                <div class={sc(styles, 'detailInner')}>
-                  <div class={sc(styles, 'detailContent')}>
-                    {#if focused}{@render node(item)}{/if}
+          {/if}
+          <div class={sc(styles, 'markerColumn')}>
+            <span class={sc(styles, 'marker')} data-journey-marker="" aria-hidden="true"></span>
+            {#if !last}
+              <span data-journey-connector="" class={sc(styles, 'connector')} aria-hidden="true"
+              ></span>
+            {/if}
+          </div>
+          <div class={sc(styles, 'content', last && 'pb-0')}>
+            <div class={sc(styles, 'card')}>
+              {@render trigger(item, index, focused, styles)}
+              {#if detailMode === 'inline' && node && item.focusable !== false}
+                <div
+                  id={detailDomId(index)}
+                  role="region"
+                  aria-label={item.title}
+                  data-journey-detail=""
+                  class={sc(styles, 'detail')}
+                  style="grid-template-rows: {focused ? '1fr' : '0fr'}"
+                >
+                  <div class={sc(styles, 'detailInner')}>
+                    <div class={sc(styles, 'detailContent')}>
+                      {#if focused}{@render node(item)}{/if}
+                    </div>
                   </div>
                 </div>
+              {/if}
+            </div>
+            {#if item.segmentLabel && !last}
+              <div class={sc(styles, 'segment')} data-journey-segment="">
+                {item.segmentLabel}
               </div>
             {/if}
           </div>
@@ -359,11 +441,12 @@
     {/each}
   </ol>
 
-  {#if orientation === 'horizontal' && node && focusedItem}
+  {#if detailMode === 'panel' && node && focusedItem}
     <div
       id={panelId}
       role="region"
       aria-label={focusedItem.title}
+      data-journey-panel=""
       class={sc(containerStyles, 'panel')}
     >
       {@render node(focusedItem)}

package/dist/primitives/JourneyTimeline/index.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { JourneyTimelineSlots, JourneyTimelineVariants } from './journey-timeline.variants.js';
-/** Lifecycle status of a journey node — drives marker colour and glyph. */
+/** Lifecycle status of a journey node — drives marker colour and title tone. */
 export type JourneyStatus = 'complete' | 'active' | 'pending' | 'blocked' | 'skipped';
 /** A single node (waypoint) on a {@link JourneyTimelineProps | JourneyTimeline}. */
 export interface JourneyNode {
@@ -10,27 +10,54 @@ export interface JourneyNode {
     /** Node title, always visible next to the marker. */
     title: string;
     /**
-     * Lifecycle status. Maps to a semantic marker colour + glyph:
-     * `complete` (success ✓), `active` (primary ◉), `pending` (empty circle),
-     * `blocked` (danger ⊘), `skipped` (muted −).
+     * Lifecycle status. Maps to a semantic dot marker + title tone:
+     * `complete` (success), `active` (primary, ringed), `pending` (hollow),
+     * `blocked` (danger), `skipped` (muted). The status is also announced through
+     * a visually-hidden label.
      */
     status: JourneyStatus;
-    /** Short status line shown below the title while collapsed. */
+    /** Short context line shown below the title. */
     subtitle?: string;
     /**
-     * When `false`, the node is a pure waypoint: it renders a marker + labels but
-     * cannot receive focus, does not expand, and is skipped by keyboard navigation.
+     * Label on the chronicle axis (the meta rail left of the markers) — a time,
+     * date, version, actor…. The rail renders as soon as any node provides `meta`
+     * (or the `meta` snippet is set). Vertical orientation renders it as a
+     * right-aligned column; horizontal as a date row above the spine.
+     */
+    meta?: string;
+    /**
+     * Line style of the connector *leaving* this node — lets the connector carry
+     * meaning (e.g. solid = ride, dashed/dotted = transfer, walk, gap in the
+     * record). @default 'solid'
+     */
+    connector?: 'solid' | 'dashed' | 'dotted';
+    /**
+     * Label for the segment between this node and the next (a duration, transport
+     * mode, "3 days in transit"…). Rendered along the connector; ignored on the
+     * last node.
+     */
+    segmentLabel?: string;
+    /**
+     * When `false`, the node is a pure waypoint: it renders marker + labels but
+     * cannot receive focus, shows no detail, and is skipped by keyboard navigation.
      * @default true
      */
     focusable?: boolean;
 }
 /**
- * @description Connected timeline whose markers *are* the progress indicator and
- * where exactly one focusable node expands to reveal rich per-step detail (the
- * "journey" / travel-log pattern). Data-driven via `items`; the focused node's
- * body is rendered through the `node` snippet. For a compact progress indicator
- * without a detail container use `Stepper`; for peer views without sequence use
- * `Tab`.
+ * @description Retrospective chronicle timeline (focus + context): an ordered
+ * record of what happened / where things stand — shipment tracking, audit
+ * trails, travel logs, billing runs. Exactly one focusable node is in focus and
+ * shows rich detail (`node` snippet); the rest stay quiet, compact context
+ * rows. The chronicle axis is first-class: per-node `meta` (time/date/actor)
+ * renders on a meta rail, connectors carry meaning (`solid | dashed | dotted`)
+ * and `segmentLabel` annotates the stretch between nodes. Detail placement is
+ * configurable: `detail="inline"` expands in place (vertical default);
+ * `detail="panel"` renders a stable readout beside (wide) or docked below
+ * (narrow) the rail — horizontal always uses the panel. Use `Stepper` for a
+ * prospective wizard/progress indicator and `Tab` for switching between peer
+ * views; JourneyTimeline is read-only observation of a sequence, not process
+ * control or navigation.
  *
  * @tag navigation
  * @tag display
@@ -39,26 +66,27 @@ export interface JourneyNode {
  * @related Accordion
  * @stability beta
  *
- * @example Vertical journey with inline detail
+ * @example Vertical chronicle with inline detail
  * ```svelte
  * <script lang="ts">
  *   import { JourneyTimeline, type JourneyNode } from '@urbicon-ui/blocks';
- *   const stages: JourneyNode[] = [
- *     { id: 'draft', title: 'Draft', status: 'complete', subtitle: 'Sent 3 Jun' },
- *     { id: 'review', title: 'Review', status: 'active', subtitle: 'In progress' },
- *     { id: 'approve', title: 'Approval', status: 'pending' }
+ *   const run: JourneyNode[] = [
+ *     { id: 'readings', title: 'Meter readings', status: 'complete', meta: '3 Jun', segmentLabel: '2 days · validation' },
+ *     { id: 'validate', title: 'Validation', status: 'complete', meta: '5 Jun', connector: 'dashed', segmentLabel: 'manual review' },
+ *     { id: 'statement', title: 'Statements', status: 'active', meta: '6 Jun' },
+ *     { id: 'dispatch', title: 'Dispatch', status: 'pending' }
  *   ];
- *   let focusId = $state('review');
+ *   let focusId = $state('statement');
  * </script>
  *
- * <JourneyTimeline items={stages} bind:focusId>
+ * <JourneyTimeline items={run} bind:focusId>
  *   {#snippet node(item)}
  *     <p>Details for {item.title}…</p>
  *   {/snippet}
  * </JourneyTimeline>
  * ```
  *
- * @example Horizontal lifecycle with a shared detail panel + scroll-spy off
+ * @example Horizontal lifecycle — detail renders in the shared panel
  * ```svelte
  * <JourneyTimeline items={phases} orientation="horizontal" onFocusChange={(id) => track(id)}>
  *   {#snippet node(item)}
@@ -70,36 +98,43 @@ export interface JourneyNode {
 export interface JourneyTimelineProps extends Pick<JourneyTimelineVariants, 'orientation' | 'size'>, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** The ordered journey nodes. */
     items: JourneyNode[];
-    /** Layout direction. Vertical expands detail inline; horizontal into a panel below the rail. @default 'vertical' */
+    /** Layout direction. @default 'vertical' */
     orientation?: 'vertical' | 'horizontal';
     /** Marker + label scale. @default 'md' */
     size?: 'sm' | 'md' | 'lg';
     /**
-     * The expanded (focused) node id. Supports `bind:focusId`. When omitted the
-     * component is uncontrolled and falls back to `defaultFocusId`, then the first
-     * `active` node, then the first focusable node.
+     * Where the focused node's detail renders. `inline` expands in place inside
+     * the rail; `panel` renders a stable readout — beside the rail on wide
+     * viewports, docked to the viewport bottom on narrow ones. Horizontal
+     * orientation always uses the panel and ignores `inline` (DEV warning).
+     * @default 'inline' (vertical) / 'panel' (horizontal)
+     */
+    detail?: 'inline' | 'panel';
+    /**
+     * The focused node id. Supports `bind:focusId`. When omitted the component is
+     * uncontrolled and falls back to `defaultFocusId`, then the first `active`
+     * node, then the first focusable node.
      */
     focusId?: string;
     /** Initial focused node id in uncontrolled mode. Ignored once `focusId` is bound. */
     defaultFocusId?: string;
-    /**
-     * When `true`, the focus follows the node scrolled to the top of the viewport
-     * (the travel-log feel), driven by an IntersectionObserver. Reduced-motion safe.
-     * @default false
-     */
-    scrollSpy?: boolean;
-    /** Fires when the focused node changes (click, keyboard, or scroll-spy). */
+    /** Fires when the focused node changes (click or keyboard). */
     onFocusChange?: (id: string) => void;
-    /** Renders the body of the focused node. Receives the focused `JourneyNode`. */
+    /** Renders the detail of the focused node. Receives the focused `JourneyNode`. */
     node?: Snippet<[JourneyNode]>;
+    /**
+     * Rich override for the meta rail — receives each `JourneyNode` and replaces
+     * the plain `item.meta` text (e.g. planned + actual time with a Badge).
+     */
+    meta?: Snippet<[JourneyNode]>;
     /** Extra classes merged onto the root element. */
     class?: string;
     /** Remove all default tv() classes. */
     unstyled?: boolean;
     /**
-     * Per-slot class overrides. Slots: base | rail | node | trigger | marker |
-     * connectorColumn | connector | labelGroup | title | subtitle | body | detail |
-     * detailInner | detailContent | panel
+     * Per-slot class overrides. Slots: base | rail | node | metaColumn | meta |
+     * markerColumn | marker | connector | content | card | trigger | labelGroup |
+     * title | subtitle | segment | detail | detailInner | detailContent | panel
      */
     slotClasses?: Partial<Record<JourneyTimelineSlots, string>>;
     /**