JourneyTimelinebeta

<div class="flex w-full max-w-lg flex-col gap-3">
  <div class="flex items-center gap-2">
    <span class="text-text-tertiary text-xs font-medium">Focused node:</span>
    <Badge size="xs" intent="primary" variant="soft">{focusId}</Badge>
  </div>
  <JourneyTimeline items={billing} bind:focusId>
    {#snippet meta(item)}
      <div class="flex flex-col items-end gap-1">
        {#if item.meta}
          <span class="text-text-tertiary font-mono text-xs tabular-nums">{item.meta}</span>
        {/if}
        {#if actuals[item.id]}
          <Badge size="xs" intent="success" variant="soft">{actuals[item.id]}</Badge>
        {/if}
      </div>
    {/snippet}
    {#snippet node(item)}
      <div class="flex flex-col gap-2 py-0.5">
        <p class="text-text-secondary text-sm">
          Full record for <strong>{item.title}</strong>: assignments, anomalies and the audit
          trail live here.
        </p>
        <div>
          <Button size="sm" variant="outlined">Open {item.title.toLowerCase()}</Button>
        </div>
      </div>
    {/snippet}
  </JourneyTimeline>
</div>

<div class="w-full">
  <JourneyTimeline items={shipment} detail="panel">
    {#snippet node(item)}
      <div class="flex flex-col items-start gap-2">
        <p class="text-text-primary text-sm font-medium">{item.title}</p>
        <p class="text-text-secondary text-sm">
          Scans, carrier and location history for this stage.
        </p>
        {#if item.segmentLabel}
          <Badge size="xs" intent="neutral" variant="soft">{item.segmentLabel}</Badge>
        {/if}
      </div>
    {/snippet}
  </JourneyTimeline>
</div>

<div class="w-full">
  <JourneyTimeline items={lifecycle} orientation="horizontal">
    {#snippet node(item)}
      <p class="text-text-secondary text-sm">
        Invoice events during “{item.title}”: issued, reminders, payments.
      </p>
    {/snippet}
  </JourneyTimeline>
</div>

<div class="flex w-full max-w-lg flex-col gap-3">
  <p class="text-text-tertiary text-xs" aria-live="polite">
    {lastHelp ? `Help requested for “${lastHelp}”.` : 'No help requested yet.'}
  </p>
  <JourneyTimeline
    items={cockpit}
    slotClasses={{ marker: 'size-5 mt-1.5', markerColumn: 'w-5' }}
  >
    {#snippet marker(item)}
      <span class={['text-2xs leading-none font-bold', glyphTone[item.status]]}>
        {glyphs[item.status]}
      </span>
    {/snippet}
    {#snippet trailing(item)}
      {#if item.status === 'blocked'}
        <Badge size="xs" intent="danger" variant="soft">must · blocks close</Badge>
      {:else if item.status === 'attention'}
        <Badge size="xs" intent="warning" variant="soft">optional</Badge>
      {/if}
      {#if item.focusable !== false}
        <Button size="xs" variant="ghost" onclick={() => (lastHelp = item.title)}>?</Button>
      {/if}
    {/snippet}
    {#snippet node(item)}
      <p class="text-text-secondary text-sm">
        Why “{item.title}” matters, its consequences and the next action live here.
      </p>
    {/snippet}
  </JourneyTimeline>
</div>

<div class="w-full max-w-lg">
  <JourneyTimeline items={statuses} defaultFocusId="s-active">
    {#snippet node(item)}
      <p class="text-text-secondary text-sm">
        This node is <code>{item.status}</code>. Its detail renders only while focused.
      </p>
    {/snippet}
  </JourneyTimeline>
</div>

<div class="w-full">
  <JourneyTimeline
    items={approval}
    detail="panel"
    slotClasses={{
      marker: 'ring-2 ring-primary/30 ring-offset-2 ring-offset-surface-base',
      panel: 'bg-surface-selected border-primary/40'
    }}
  >
    {#snippet node(item)}
      <p class="text-text-secondary text-sm">
        Comments, reviewers and version history for “{item.title}” live here.
      </p>
    {/snippet}
  </JourneyTimeline>
</div>