@joewinke/jatui 0.38.6 → 0.40.0

package/dist/components/graph/GraphCanvas.svelte.d.ts

@@ -76,7 +76,7 @@ declare function $$render<N extends Node = Node, E extends Edge = Edge>(): {
         screenToFlowPosition: (p: import("@xyflow/system").XYPosition) => import("@xyflow/system").XYPosition;
         getViewport: () => Viewport;
     };
-    bindings: "viewport" | "nodes" | "edges";
+    bindings: "viewport" | "edges" | "nodes";
     slots: {};
     events: {};
 };
@@ -84,7 +84,7 @@ declare class __sveltets_Render<N extends Node = Node, E extends Edge = Edge> {
     props(): ReturnType<typeof $$render<N, E>>['props'];
     events(): ReturnType<typeof $$render<N, E>>['events'];
     slots(): ReturnType<typeof $$render<N, E>>['slots'];
-    bindings(): "viewport" | "nodes" | "edges";
+    bindings(): "viewport" | "edges" | "nodes";
     exports(): {
         /**
              * Imperative handle (`bind:this={canvas}` → `canvas.api.fitView()`). Every

package/dist/components/messaging/MessageInput.svelte

@@ -4,6 +4,13 @@
   Rich text input for composing and sending messages.
   Supports mentions, attachments, and drag/drop.
   All searches and uploads are via callbacks.
+
+  Agent composers (opt-in, jatui-lltq9): `busy` + `onStop` swap the send
+  button for a same-size Stop button (aria-label "Stop generating") while a
+  reply is generating; Escape inside the input also stops (an open mention
+  list still takes Escape first). Sending is held while busy — the draft is
+  kept. `statusTab` renders a slim strip attached to the input's top edge
+  (e.g. model · message count). Pair with ComposerGlow for the rim light.
 -->
 
 <script lang="ts">
@@ -18,6 +25,7 @@
   } from '../../utils/mentionParser'
   import MentionAutocomplete from './MentionAutocomplete.svelte'
   import QuotedMessageDisplay from './QuotedMessageDisplay.svelte'
+  import type { Snippet } from 'svelte'
 
   interface Props {
     placeholder?: string
@@ -37,6 +45,12 @@
     ontyping?: (data: { isTyping: boolean }) => void
     onquoteremove?: () => void
     onsearchmentions?: (query: string) => Promise<MentionItem[]>
+    /** A reply is generating: the send slot shows Stop, Escape stops, sending is held. */
+    busy?: boolean
+    /** Called by the Stop button / Escape while `busy`. */
+    onStop?: () => void
+    /** Slim strip attached to the input's top edge (status chrome). */
+    statusTab?: Snippet
   }
 
   let {
@@ -52,6 +66,9 @@
     ontyping,
     onquoteremove,
     onsearchmentions,
+    busy = false,
+    onStop,
+    statusTab,
   }: Props = $props()
 
   let selectedPriority = $state<'low' | 'normal' | 'high' | 'urgent'>('normal')
@@ -203,6 +220,7 @@
 
   function handleKeyDown(event: KeyboardEvent) {
     if (showMentionAutocomplete && ['ArrowUp', 'ArrowDown', 'Tab', 'Enter', 'Escape'].includes(event.key)) return
+    if (event.key === 'Escape' && busy && onStop) { event.preventDefault(); event.stopPropagation(); onStop(); return }
     if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); sendMessage() }
   }
 
@@ -255,7 +273,7 @@
 
   function sendMessage() {
     const content = inputText.trim()
-    if ((!content && attachments.length === 0) || disabled) return
+    if ((!content && attachments.length === 0) || disabled || busy) return
 
     onsend?.({
       content,
@@ -368,6 +386,12 @@
     </div>
   {/if}
 
+  {#if statusTab}
+    <div class="self-start -mb-2 ml-3 max-w-[calc(100%-1.5rem)] truncate px-2.5 py-0.5 text-xs text-base-content/60 bg-base-200 border border-b-0 border-base-300 rounded-t-lg">
+      {@render statusTab()}
+    </div>
+  {/if}
+
   <div class="flex items-end gap-2 {compact ? 'p-2' : 'p-3'} border border-base-300 rounded-lg focus-within:border-primary transition-colors">
     {#if !compact}
       <button type="button" class="btn btn-ghost btn-sm btn-circle flex-shrink-0" onclick={handleFileUpload} title="Attach file" {disabled}>📎</button>
@@ -412,9 +436,15 @@
       </select>
     {/if}
 
-    <button type="button" class="btn btn-primary {compact ? 'btn-xs' : 'btn-sm'} btn-circle flex-shrink-0" onclick={sendMessage} disabled={disabled || (!inputText.trim() && attachments.length === 0) || isOverLimit} title="Send message (Enter)">
-      ➤
-    </button>
+    {#if busy}
+      <button type="button" class="btn btn-primary {compact ? 'btn-xs' : 'btn-sm'} btn-circle flex-shrink-0" onclick={() => onStop?.()} disabled={!onStop} aria-label="Stop generating" title="Stop generating (Esc)">
+        <svg viewBox="0 0 16 16" class="w-3 h-3" fill="currentColor" aria-hidden="true"><rect x="3" y="3" width="10" height="10" rx="2" /></svg>
+      </button>
+    {:else}
+      <button type="button" class="btn btn-primary {compact ? 'btn-xs' : 'btn-sm'} btn-circle flex-shrink-0" onclick={sendMessage} disabled={disabled || (!inputText.trim() && attachments.length === 0) || isOverLimit} title="Send message (Enter)">
+        ➤
+      </button>
+    {/if}
   </div>
 
   <div class="text-xs text-base-content/50">

package/dist/components/messaging/MessageInput.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { QuotedMessage, PendingAttachment, MentionItem, AttachmentCallbacks } from '../../types/messaging';
+import type { Snippet } from 'svelte';
 interface Props {
     placeholder?: string;
     disabled?: boolean;
@@ -19,6 +20,12 @@ interface Props {
     }) => void;
     onquoteremove?: () => void;
     onsearchmentions?: (query: string) => Promise<MentionItem[]>;
+    /** A reply is generating: the send slot shows Stop, Escape stops, sending is held. */
+    busy?: boolean;
+    /** Called by the Stop button / Escape while `busy`. */
+    onStop?: () => void;
+    /** Slim strip attached to the input's top edge (status chrome). */
+    statusTab?: Snippet;
 }
 declare const MessageInput: import("svelte").Component<Props, {
     focus: () => void;

package/dist/components/messaging/MessageItem.svelte

@@ -290,7 +290,7 @@
     {#if !isConsecutive}
       <Avatar name={message.senderName} avatarUrl={message.senderAvatar} size="small" />
     {:else}
-      <div class="text-xs text-base-content/40 opacity-0 group-hover:opacity-100 transition-opacity text-center pt-0.5">
+      <div class="text-xs text-base-content/40 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity text-center pt-0.5">
         {formatTime(message.createdAt).split(' ')[1] || ''}
       </div>
     {/if}
@@ -299,7 +299,7 @@
   <!-- Content -->
   <div class="flex-1 min-w-0 relative">
     <!-- Floating action buttons -->
-    <div class="absolute right-0 {!isConsecutive ? 'top-0' : 'top-1'} opacity-0 group-hover:opacity-100 transition-opacity bg-base-200 rounded-lg border border-base-300 p-1 z-10">
+    <div class="absolute right-0 {!isConsecutive ? 'top-0' : 'top-1'} opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity bg-base-200 rounded-lg border border-base-300 p-1 z-10">
       <div class="flex items-center">
         {#if reactionCallbacks && currentUserId}
           <div class="flex items-center gap-1 mr-1">

package/dist/components/notificationCenter.d.ts

@@ -0,0 +1,65 @@
+export type NotificationStatus = 'info' | 'success' | 'warning' | 'error';
+export interface NotificationAction {
+    label: string;
+    onSelect: (item: NotificationItem) => void;
+    /** Button weight. Default 'secondary' (a quiet outline button). */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+}
+export interface NotificationItem {
+    id: string;
+    title: string;
+    description?: string;
+    /** When it happened — Date, ISO/DB timestamp string, or epoch ms. */
+    timestamp: Date | string | number;
+    /** Host-owned read flag. Missing / false = unread. */
+    read?: boolean;
+    /** Free-form category the tabs filter on (defaults: 'mentions', 'system'). */
+    category?: string;
+    /** Status glyph shown when there is no avatar. */
+    status?: NotificationStatus;
+    avatar?: {
+        name: string;
+        src?: string | null;
+    };
+    actions?: NotificationAction[];
+    /** Opening the item follows this link. */
+    href?: string;
+}
+export interface NotificationTab {
+    id: string;
+    label: string;
+    /** Which items the tab shows. Omitted = every item. */
+    filter?: (item: NotificationItem) => boolean;
+}
+/** All / Mentions / System, filtered by `category` ('mention(s)' / 'system'). */
+export declare const DEFAULT_NOTIFICATION_TABS: NotificationTab[];
+export type DateGroupKey = 'today' | 'yesterday' | 'week' | 'earlier';
+export declare const DATE_GROUP_LABELS: Record<DateGroupKey, string>;
+/** Epoch ms for a timestamp, or NaN when it cannot be parsed. */
+export declare function toTimestampMs(ts: Date | string | number | null | undefined): number;
+/**
+ * Which date bucket a timestamp falls in, by LOCAL calendar day relative to
+ * `now`: today, yesterday, the 5 days before that ("This week" = within the
+ * last 7 calendar days), else earlier. Future and unparseable timestamps land
+ * in 'today' / 'earlier' respectively.
+ */
+export declare function dateGroupKey(ts: Date | string | number, now?: Date | number): DateGroupKey;
+export interface NotificationGroup<T extends NotificationItem = NotificationItem> {
+    key: DateGroupKey;
+    label: string;
+    items: T[];
+}
+/**
+ * Newest-first items bucketed under Today / Yesterday / This week / Earlier.
+ * Empty buckets are dropped; ties keep input order (stable sort); items with
+ * an unparseable timestamp sort last.
+ */
+export declare function groupNotificationsByDate<T extends NotificationItem>(items: readonly T[], now?: Date | number): NotificationGroup<T>[];
+/** Unread = host says not read AND not optimistically read locally. */
+export declare function isNotificationUnread(item: NotificationItem, localRead?: ReadonlySet<string>): boolean;
+export declare function unreadIds(items: readonly NotificationItem[], localRead?: ReadonlySet<string>): string[];
+export declare function filterByTab<T extends NotificationItem>(items: readonly T[], tab: NotificationTab | undefined): T[];
+/** Item count per tab id (what the tab chips show). */
+export declare function tabCounts(items: readonly NotificationItem[], tabs: readonly NotificationTab[]): Record<string, number>;
+/** The header sentence: "3 unread" / "No unread notifications". */
+export declare function unreadSummary(count: number): string;

package/dist/components/notificationCenter.js

@@ -0,0 +1,110 @@
+/**
+ * NotificationCenter — pure data helpers (DOM-free, unit-tested in
+ * tests/unit/notificationCenter.test.ts).
+ *
+ * The data model is adapted from BoardUI's notification-center.tsx
+ * (MIT License — Copyright (c) 2026 Mertcan Dundar Esmergul (BoardUI)):
+ * `category` / `status` / `avatar` / `actions[]` and the All / Mentions /
+ * System tab split. jatui changes: real timestamps (Date | string | epoch ms)
+ * grouped into calendar date buckets, configurable tabs, host-owned read state.
+ */
+import { parseTimestamp } from '../utils/dateFormatters';
+const inCategory = (...names) => (item) => item.category != null && names.includes(item.category.toLowerCase());
+/** All / Mentions / System, filtered by `category` ('mention(s)' / 'system'). */
+export const DEFAULT_NOTIFICATION_TABS = [
+    { id: 'all', label: 'All' },
+    { id: 'mentions', label: 'Mentions', filter: inCategory('mentions', 'mention') },
+    { id: 'system', label: 'System', filter: inCategory('system') }
+];
+export const DATE_GROUP_LABELS = {
+    today: 'Today',
+    yesterday: 'Yesterday',
+    week: 'This week',
+    earlier: 'Earlier'
+};
+const DATE_GROUP_ORDER = ['today', 'yesterday', 'week', 'earlier'];
+/** Epoch ms for a timestamp, or NaN when it cannot be parsed. */
+export function toTimestampMs(ts) {
+    if (ts == null || ts === '')
+        return NaN;
+    if (typeof ts === 'number')
+        return Number.isFinite(ts) ? ts : NaN;
+    const d = parseTimestamp(ts);
+    return d ? d.getTime() : NaN;
+}
+/** Local midnight of the day containing `ms`. */
+function startOfDay(ms) {
+    const d = new Date(ms);
+    d.setHours(0, 0, 0, 0);
+    return d.getTime();
+}
+/**
+ * Which date bucket a timestamp falls in, by LOCAL calendar day relative to
+ * `now`: today, yesterday, the 5 days before that ("This week" = within the
+ * last 7 calendar days), else earlier. Future and unparseable timestamps land
+ * in 'today' / 'earlier' respectively.
+ */
+export function dateGroupKey(ts, now = Date.now()) {
+    const ms = toTimestampMs(ts);
+    if (Number.isNaN(ms))
+        return 'earlier';
+    const today = startOfDay(typeof now === 'number' ? now : now.getTime());
+    const day = startOfDay(ms);
+    if (day >= today)
+        return 'today';
+    // Calendar-day difference, rounded so DST shifts (23h / 25h days) don't skew it.
+    const days = Math.round((today - day) / 86_400_000);
+    if (days === 1)
+        return 'yesterday';
+    if (days < 7)
+        return 'week';
+    return 'earlier';
+}
+/**
+ * Newest-first items bucketed under Today / Yesterday / This week / Earlier.
+ * Empty buckets are dropped; ties keep input order (stable sort); items with
+ * an unparseable timestamp sort last.
+ */
+export function groupNotificationsByDate(items, now = Date.now()) {
+    const sorted = items
+        .map((item, i) => ({ item, i, ms: toTimestampMs(item.timestamp) }))
+        .sort((a, b) => {
+        const am = Number.isNaN(a.ms) ? -Infinity : a.ms;
+        const bm = Number.isNaN(b.ms) ? -Infinity : b.ms;
+        return bm - am || a.i - b.i;
+    });
+    const buckets = new Map();
+    for (const { item } of sorted) {
+        const key = dateGroupKey(item.timestamp, now);
+        let list = buckets.get(key);
+        if (!list)
+            buckets.set(key, (list = []));
+        list.push(item);
+    }
+    return DATE_GROUP_ORDER.filter((k) => buckets.has(k)).map((key) => ({
+        key,
+        label: DATE_GROUP_LABELS[key],
+        items: buckets.get(key)
+    }));
+}
+/** Unread = host says not read AND not optimistically read locally. */
+export function isNotificationUnread(item, localRead) {
+    return item.read !== true && !(localRead?.has(item.id) ?? false);
+}
+export function unreadIds(items, localRead) {
+    return items.filter((it) => isNotificationUnread(it, localRead)).map((it) => it.id);
+}
+export function filterByTab(items, tab) {
+    return tab?.filter ? items.filter((it) => tab.filter(it)) : items.slice();
+}
+/** Item count per tab id (what the tab chips show). */
+export function tabCounts(items, tabs) {
+    const out = {};
+    for (const tab of tabs)
+        out[tab.id] = tab.filter ? items.filter(tab.filter).length : items.length;
+    return out;
+}
+/** The header sentence: "3 unread" / "No unread notifications". */
+export function unreadSummary(count) {
+    return count === 0 ? 'No unread notifications' : `${count} unread`;
+}

package/dist/components/progress/Steps.svelte

@@ -1,4 +1,24 @@
+<!--
+  Steps — a numbered step track with an animated connector fill.
+
+  Opt-in extras (jatui-lltq9; none of them change the default output):
+    collapsible   a summary header button ("3 steps left") that folds the
+                  track away; the summary stays live while folded, and the
+                  folded header also shows the active step's label + ring.
+    activeProgress 0–1 → a mini ProgressRing on the active step's node.
+    orientation   'vertical' stacks the steps (labels + descriptions beside
+                  the nodes) — the shape for agent-progress / todo cards.
+    onFinished    fires once, `completionDelay` ms after `current` passes the
+                  last step (re-arms if `current` drops back), so a host can
+                  hand the surface back to the agent's answer.
+  Drive `current` from real events; there is no time-simulated stepping.
+-->
 <script lang="ts">
+	import { untrack, type Snippet } from 'svelte';
+	import ProgressRing from './ProgressRing.svelte';
+	import { motionSlide } from '../../motion/transitions';
+	import { clampStepProgress, isStepsFinished, stepsSummary } from './stepsSummary';
+
 	interface Step {
 		label?: string;
 		description?: string;
@@ -10,6 +30,20 @@
 		color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
 		size?: 'sm' | 'md' | 'lg';
 		class?: string;
+		/** Render a summary header button that folds the steps away. */
+		collapsible?: boolean;
+		/** Folded state (bindable). Only meaningful with `collapsible`. */
+		collapsed?: boolean;
+		/** Header copy. Default: "N steps left" / "All steps done". */
+		summary?: string | Snippet;
+		/** Layout. Default 'horizontal'. */
+		orientation?: 'horizontal' | 'vertical';
+		/** 0–1 progress of the active step → a mini ring on its node. */
+		activeProgress?: number;
+		/** Hold (ms) after the last step completes before `onFinished`. Default 0. */
+		completionDelay?: number;
+		/** Fired once after `current` passes the last step (+ `completionDelay`). */
+		onFinished?: () => void;
 	}
 
 	let {
@@ -17,7 +51,14 @@
 		current = 1,
 		color = 'primary',
 		size = 'md',
-		class: className = ''
+		class: className = '',
+		collapsible = false,
+		collapsed = $bindable(false),
+		summary,
+		orientation = 'horizontal',
+		activeProgress,
+		completionDelay = 0,
+		onFinished
 	}: Props = $props();
 
 	const normalized = $derived(
@@ -53,17 +94,45 @@
 	const nodePx = $derived(nodeSize[size]);
 	const fontSize: Record<NonNullable<Props['size']>, string> = { sm: '0.6875rem', md: '0.8125rem', lg: '1rem' };
 	const labelSize = $derived(fontSize[size]);
+
+	// ── Opt-in extras ────────────────────────────────────────────────────
+	const uid = $props.id();
+	const bodyId = `steps-body-${uid}`;
+	const vertical = $derived(orientation === 'vertical');
+	const finished = $derived(isStepsFinished(count, current));
+	const ringValue = $derived(
+		activeProgress == null ? null : Math.round(clampStepProgress(activeProgress) * 100)
+	);
+	const summaryText = $derived(typeof summary === 'string' ? summary : stepsSummary(count, current));
+	const activeLabel = $derived(finished ? undefined : normalized[current - 1]?.label);
+
+	// onFinished: once per "run" — re-arms when current drops back to a step.
+	let finishedFired = false;
+	$effect(() => {
+		if (!finished) {
+			finishedFired = false;
+			return;
+		}
+		if (finishedFired) return;
+		const delay = Math.max(0, completionDelay);
+		const timer = setTimeout(() => {
+			finishedFired = true;
+			untrack(() => onFinished)?.();
+		}, delay);
+		return () => clearTimeout(timer);
+	});
 </script>
 
+{#snippet track()}
 <div
-	class="steps-wrap {className}"
+	class="steps-wrap {collapsible ? '' : className}{vertical ? ' steps-wrap--vertical' : ''}"
 	role="list"
 	aria-label="Progress steps"
 	style="--fill:{fillColor};--fg:{fgColor};--node:{nodePx}px"
 >
 	<!-- Connector track -->
 	<div class="steps-track" aria-hidden="true">
-		<div class="steps-track-fill" style="transform:scaleX({trackFill})"></div>
+		<div class="steps-track-fill" style="transform:{vertical ? 'scaleY' : 'scaleX'}({trackFill})"></div>
 	</div>
 
 	<!-- Step nodes -->
@@ -78,7 +147,7 @@
 			role="listitem"
 			aria-current={isActive ? 'step' : undefined}
 		>
-			<div class="step-node" style="font-size:{labelSize}">
+			<div class="step-node" class:step-node--ring={isActive && ringValue != null} style="font-size:{labelSize}">
 				{#if isComplete}
 					<!-- Check mark drawn in on complete -->
 					<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="step-check" aria-hidden="true">
@@ -86,14 +155,71 @@
 					</svg>
 				{:else}
 					<span>{stepNum}</span>
+				{/if}{#if isActive && ringValue != null}
+					<span class="step-ring">
+						<ProgressRing
+							value={ringValue}
+							size={nodePx}
+							strokeWidth={size === 'sm' ? 2 : 3}
+							{color}
+							showValue={false}
+							label="{step.label ?? `Step ${stepNum}`} progress"
+						/>
+					</span>
 				{/if}
 			</div>
-			{#if step.label}
+			{#if vertical}
+				{#if step.label || step.description}
+					<span class="step-text">
+						{#if step.label}<span class="step-label" style="font-size:{labelSize}">{step.label}</span>{/if}
+						{#if step.description}<span class="step-desc">{step.description}</span>{/if}
+					</span>
+				{/if}
+			{:else if step.label}
 				<span class="step-label" style="font-size:{labelSize}">{step.label}</span>
 			{/if}
 		</div>
 	{/each}
 </div>
+{/snippet}
+
+{#if collapsible}
+	<div class="steps-fold {className}" style="--fill:{fillColor}">
+		<button
+			type="button"
+			class="steps-fold-header"
+			aria-expanded={!collapsed}
+			aria-controls={bodyId}
+			onclick={() => (collapsed = !collapsed)}
+		>
+			<svg class="steps-fold-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+				<polyline points="6,4 10,8 6,12" />
+			</svg>
+			<span class="steps-fold-summary">
+				{#if typeof summary === 'function'}{@render summary()}{:else}{summaryText}{/if}
+			</span>
+			{#if collapsed && activeLabel}
+				<span class="steps-fold-current">{activeLabel}</span>
+			{/if}
+			{#if collapsed && ringValue != null && !finished}
+				<span class="steps-fold-ring" aria-hidden="true">
+					<ProgressRing value={ringValue} size={16} strokeWidth={2} {color} showValue={false} />
+				</span>
+			{/if}
+		</button>
+		<!-- Live summary for assistive tech — the header text itself is not a live region. -->
+		<span class="sr-only" aria-live="polite">{summaryText}</span>
+		<div id={bodyId} class="steps-fold-body">
+			{#if !collapsed}
+				<div class="steps-fold-inner" transition:motionSlide>
+					{@render track()}
+				</div>
+			{/if}
+		</div>
+	</div>
+{:else}
+	{@render track()}
+{/if}
 
 <style>
 	.steps-wrap {
@@ -136,6 +262,7 @@
 	}
 
 	.step-node {
+		position: relative;
 		width: var(--node);
 		height: var(--node);
 		border-radius: 9999px;
@@ -160,6 +287,18 @@
 		transform: scale(1.18);
 	}
 
+	/* Active node with a progress ring: the ring IS the border. */
+	.step--active .step-node--ring {
+		border-color: transparent;
+	}
+
+	.step-ring {
+		position: absolute;
+		inset: -2px;
+		display: flex;
+		pointer-events: none;
+	}
+
 	.step--complete .step-node {
 		background: var(--fill);
 		border-color: var(--fill);
@@ -184,6 +323,127 @@
 		color: var(--color-base-content);
 	}
 
+	/* ── Vertical orientation ─────────────────────────────────────────── */
+	.steps-wrap--vertical {
+		flex-direction: column;
+		align-items: stretch;
+		justify-content: flex-start;
+		gap: 0.875rem;
+		padding-top: 0;
+	}
+
+	.steps-wrap--vertical .steps-track {
+		top: calc(var(--node) / 2);
+		bottom: calc(var(--node) / 2);
+		left: calc(var(--node) / 2);
+		right: auto;
+		width: 3px;
+		height: auto;
+		transform: translateX(-50%);
+	}
+
+	.steps-wrap--vertical .steps-track-fill {
+		width: 100%;
+		transform-origin: top;
+	}
+
+	.steps-wrap--vertical .step {
+		flex-direction: row;
+		align-items: flex-start;
+		gap: 0.75rem;
+	}
+
+	.steps-wrap--vertical .step-node {
+		flex-shrink: 0;
+	}
+
+	.step-text {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+		min-width: 0;
+		min-height: var(--node);
+		justify-content: center;
+	}
+
+	.steps-wrap--vertical .step-label {
+		text-align: left;
+		max-width: none;
+	}
+
+	.step-desc {
+		font-size: 0.75rem;
+		line-height: 1.3;
+		color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
+	}
+
+	/* ── Collapsible header ───────────────────────────────────────────── */
+	.steps-fold {
+		width: 100%;
+	}
+
+	.steps-fold-header {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		min-height: 2.25rem;
+		padding: 0.375rem 0.5rem;
+		border-radius: var(--jatui-radius-field, var(--radius-field, 0.25rem));
+		font-size: 0.875rem;
+		font-weight: 600;
+		text-align: left;
+		color: var(--color-base-content);
+		background: transparent;
+		cursor: pointer;
+		transition: background var(--motion-fast, 150ms) var(--motion-glide);
+	}
+
+	.steps-fold-header:hover {
+		background: color-mix(in oklch, var(--color-base-content) 6%, transparent);
+	}
+
+	.steps-fold-header:focus-visible {
+		outline: 2px solid var(--fill);
+		outline-offset: 2px;
+	}
+
+	.steps-fold-chevron {
+		width: 1rem;
+		height: 1rem;
+		flex-shrink: 0;
+		color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
+		transform: rotate(90deg);
+		transition: transform var(--motion-fast, 150ms) var(--motion-glide);
+	}
+
+	.steps-fold-header[aria-expanded='false'] .steps-fold-chevron {
+		transform: rotate(0deg);
+	}
+
+	.steps-fold-summary {
+		font-variant-numeric: tabular-nums;
+	}
+
+	.steps-fold-current {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-weight: 400;
+		color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+	}
+
+	.steps-fold-ring {
+		display: inline-flex;
+		margin-left: auto;
+		flex-shrink: 0;
+	}
+
+	.steps-fold-inner {
+		padding: 0.5rem 0.25rem 0.25rem;
+	}
+
 	@media (prefers-reduced-motion: reduce) {
 		.steps-track-fill {
 			transition: none;
@@ -191,5 +451,9 @@
 		.step-node {
 			transition: none;
 		}
+		.steps-fold-chevron,
+		.steps-fold-header {
+			transition: none;
+		}
 	}
 </style>