@joewinke/jatui 0.38.6 → 0.40.0

package/dist/components/agent/revealCore.js

@@ -0,0 +1,160 @@
+/**
+ * Reveal ticker — the pacing core behind AgentLog / AgentTaskList.
+ *
+ * Counts how many units of a streaming log are visible. Two modes:
+ *
+ *   timer       one unit per tick: `startDelay` before the first, then
+ *               `stepInterval` between the rest, or `delayFor(i)` per unit
+ *               (the dwell before unit `i` appears) when given.
+ *   controlled  pass `revealed` and the timer is off: real events drive
+ *               the count, clamped to [0, total].
+ *
+ * `onComplete` fires exactly once each time the count reaches `total`
+ * (total > 0). Dropping back below total (total grew, `replay()`, a lower
+ * controlled value) re-arms it.
+ *
+ * Framework-free and DOM-free, with an injectable clock, so
+ * tests/unit/revealTicker.test.ts drives it with fake timers. The Svelte
+ * rune wrapper is createRevealTicker in revealTicker.svelte.ts.
+ *
+ * Behaviour adapted from BoardUI's agent-log `useRevealTicker`:
+ *   MIT License — Copyright (c) 2026 Mertcan Dundar Esmergul (BoardUI)
+ * Differences: framework-free class, an in-flight tick survives option
+ * updates that do not change the next unit (a log whose `total` grows while
+ * streaming does not stall), and switching from controlled back to timer
+ * mode resumes from the controlled count instead of jumping back.
+ */
+export const DEFAULT_STEP_INTERVAL = 850;
+export const DEFAULT_START_DELAY = 320;
+const realClock = {
+    setTimeout: (fn, ms) => globalThis.setTimeout(fn, ms),
+    clearTimeout: (id) => globalThis.clearTimeout(id)
+};
+function clampCount(n, total) {
+    if (!Number.isFinite(n))
+        return n > 0 ? total : 0;
+    return Math.max(0, Math.min(Math.floor(n), total));
+}
+/** The delay before unit `index` (pure; exported for tests and hosts). */
+export function revealDelay(index, opts) {
+    const raw = opts.delayFor
+        ? opts.delayFor(index)
+        : index === 0
+            ? (opts.startDelay ?? DEFAULT_START_DELAY)
+            : (opts.stepInterval ?? DEFAULT_STEP_INTERVAL);
+    return Number.isFinite(raw) && raw > 0 ? raw : 0;
+}
+export class RevealCore {
+    #opts;
+    #hooks;
+    #clock;
+    #ticked = 0;
+    #timer = null;
+    /** The unit index the pending timer will reveal. */
+    #pendingFor = -1;
+    #fired = false;
+    #active = false;
+    #last = -1;
+    constructor(opts, hooks = {}) {
+        this.#opts = { ...opts };
+        this.#hooks = hooks;
+        this.#clock = hooks.clock ?? realClock;
+    }
+    get total() {
+        return Math.max(0, Math.floor(this.#opts.total || 0));
+    }
+    get controlled() {
+        return this.#opts.revealed !== undefined;
+    }
+    /** Units currently visible. */
+    get revealed() {
+        const total = this.total;
+        return this.controlled
+            ? clampCount(this.#opts.revealed, total)
+            : clampCount(this.#ticked, total);
+    }
+    get complete() {
+        return this.total > 0 && this.revealed >= this.total;
+    }
+    /** True while a tick is scheduled. */
+    get pending() {
+        return this.#timer !== null;
+    }
+    /** Begin scheduling (call on mount — never during SSR). */
+    start() {
+        this.#active = true;
+        this.#sync();
+    }
+    /** Merge new options (any subset) and reconcile. */
+    update(next) {
+        const wasControlled = this.controlled;
+        const before = this.revealed;
+        this.#opts = { ...this.#opts, ...next };
+        if ('revealed' in next && next.revealed === undefined)
+            this.#opts.revealed = undefined;
+        // Leaving controlled mode: carry on from where the events left the count.
+        if (wasControlled && !this.controlled)
+            this.#ticked = before;
+        this.#ticked = Math.min(this.#ticked, this.total);
+        this.#sync();
+    }
+    /** Back to zero and run again (timer mode). */
+    replay() {
+        this.#ticked = 0;
+        this.#fired = false;
+        this.#cancel();
+        this.#sync();
+    }
+    /** Stop the timer for good (call on unmount). */
+    destroy() {
+        this.#active = false;
+        this.#cancel();
+    }
+    #cancel() {
+        if (this.#timer !== null)
+            this.#clock.clearTimeout(this.#timer);
+        this.#timer = null;
+        this.#pendingFor = -1;
+    }
+    #sync() {
+        this.#emit();
+        this.#checkComplete();
+        this.#schedule();
+    }
+    #emit() {
+        const n = this.revealed;
+        if (n !== this.#last) {
+            this.#last = n;
+            this.#hooks.onChange?.(n);
+        }
+    }
+    #checkComplete() {
+        if (!this.complete) {
+            this.#fired = false;
+            return;
+        }
+        if (this.#fired)
+            return;
+        this.#fired = true;
+        this.#hooks.onComplete?.();
+    }
+    #schedule() {
+        const n = this.revealed;
+        const canRun = this.#active && !this.controlled && this.#opts.run !== false && n < this.total;
+        if (!canRun) {
+            this.#cancel();
+            return;
+        }
+        // A tick for this very unit is already on its way: leave it alone.
+        if (this.#timer !== null && this.#pendingFor === n)
+            return;
+        this.#cancel();
+        this.#pendingFor = n;
+        this.#timer = this.#clock.setTimeout(() => {
+            this.#timer = null;
+            this.#pendingFor = -1;
+            this.#ticked = Math.min(this.#ticked + 1, this.total);
+            this.#sync();
+        }, revealDelay(n, this.#opts));
+    }
+}

package/dist/components/agent/revealTicker.d.ts

@@ -0,0 +1,34 @@
+import { type RevealClock } from './revealCore';
+type MaybeGetter<T> = T | (() => T);
+export interface RevealTickerOptions {
+    /** How many units the log has in total. */
+    total: MaybeGetter<number>;
+    /** ms between units after the first (timer mode). Default 850. */
+    stepInterval?: MaybeGetter<number>;
+    /** ms before the first unit (timer mode). Default 320. */
+    startDelay?: MaybeGetter<number>;
+    /**
+     * Drive the count yourself from real events. While this resolves to a
+     * number the timer is off; resolve to `undefined` to hand back to it.
+     * Pass a getter (`() => count`) to keep it reactive.
+     */
+    revealed?: (() => number | undefined) | number;
+    /** Dwell before unit `index` appears (overrides startDelay/stepInterval). */
+    delayFor?: (index: number) => number;
+    /** false pauses the timer. Default true. */
+    run?: MaybeGetter<boolean>;
+    /** Fired once when the last unit lands (re-armed if the count drops). */
+    onComplete?: () => void;
+    /** Injectable clock (tests). */
+    clock?: RevealClock;
+}
+export interface RevealTicker {
+    /** Units visible right now. */
+    readonly revealed: number;
+    /** Every unit is visible (total > 0). */
+    readonly complete: boolean;
+    /** Restart from zero (timer mode). */
+    replay(): void;
+}
+export declare function createRevealTicker(opts: RevealTickerOptions): RevealTicker;
+export {};

package/dist/components/agent/revealTicker.js

@@ -0,0 +1,73 @@
+/* revealTicker.svelte.js generated by Svelte v5.53.11 */
+import * as $ from 'svelte/internal/client';
+import { untrack } from 'svelte';
+import { RevealCore } from './revealCore';
+
+function read(v) {
+	return typeof v === 'function' ? v() : v;
+}
+
+function resolve(opts) {
+	return {
+		total: read(opts.total) ?? 0,
+		stepInterval: read(opts.stepInterval),
+		startDelay: read(opts.startDelay),
+		revealed: read(opts.revealed),
+		delayFor: opts.delayFor,
+		run: read(opts.run)
+	};
+}
+
+export function createRevealTicker(opts) {
+	let revealed = $.state(0);
+	let complete = $.state(false);
+
+	const core = new RevealCore(resolve(opts), {
+		clock: opts.clock,
+		onChange: (n) => {
+			$.set(revealed, n, true);
+			$.set(complete, core.complete, true);
+		},
+
+		onComplete: () => {
+			$.set(complete, true);
+			opts.onComplete?.();
+		}
+	});
+
+	// SSR / first paint: the controlled count is already known.
+	$.set(revealed, core.revealed, true);
+
+	$.set(complete, core.complete, true);
+
+	let started = false;
+
+	$.user_effect(() => {
+		const next = resolve(opts);
+
+		// Only the options are dependencies — never state read by onComplete.
+		untrack(() => {
+			core.update(next);
+
+			if (!started) {
+				started = true;
+				core.start();
+			}
+
+			$.set(complete, core.complete, true);
+		});
+	});
+
+	$.user_effect(() => () => core.destroy());
+
+	return {
+		get revealed() {
+			return $.get(revealed);
+		},
+
+		get complete() {
+			return $.get(complete);
+		},
+		replay: () => core.replay()
+	};
+}

package/dist/components/agent/streamedText.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Block splitter behind StreamedText (jatui-lltq9).
+ *
+ * Streamed assistant text is append-only, so the split has to be too: for any
+ * prefix of the final text, every block but the last is IDENTICAL to the
+ * final text's block at that index, and the last block's text is a PREFIX of
+ * the final block. That is what lets each block mount once (keyed by index)
+ * and then only grow — nothing restarts, nothing reflows backwards.
+ *
+ * Rules that keep that guarantee:
+ *   - The text after the last "\n" is the in-progress line; it never closes
+ *     a block, even when it is blank so far.
+ *   - Block text is right-trimmed, so a half-typed trailing space or a
+ *     dangling newline never has to be "taken back" later.
+ *   - 'paragraph' mode: a blank line closes a block, except inside a fenced
+ *     code block (``` or ~~~) — a markdown `renderBlock` sees whole fences.
+ *   - 'line' mode: each non-blank line is a block.
+ */
+export type StreamedTextSplit = 'paragraph' | 'line';
+export interface StreamedBlock {
+    /** Stable key: the block's index ("b0", "b1", …). */
+    key: string;
+    /** Block text, right-trimmed. */
+    text: string;
+    /** True once a later separator closed the block — it can no longer grow. */
+    complete: boolean;
+}
+export declare function splitStreamedText(text: string, split?: StreamedTextSplit): StreamedBlock[];

package/dist/components/agent/streamedText.js

@@ -0,0 +1,59 @@
+/**
+ * Block splitter behind StreamedText (jatui-lltq9).
+ *
+ * Streamed assistant text is append-only, so the split has to be too: for any
+ * prefix of the final text, every block but the last is IDENTICAL to the
+ * final text's block at that index, and the last block's text is a PREFIX of
+ * the final block. That is what lets each block mount once (keyed by index)
+ * and then only grow — nothing restarts, nothing reflows backwards.
+ *
+ * Rules that keep that guarantee:
+ *   - The text after the last "\n" is the in-progress line; it never closes
+ *     a block, even when it is blank so far.
+ *   - Block text is right-trimmed, so a half-typed trailing space or a
+ *     dangling newline never has to be "taken back" later.
+ *   - 'paragraph' mode: a blank line closes a block, except inside a fenced
+ *     code block (``` or ~~~) — a markdown `renderBlock` sees whole fences.
+ *   - 'line' mode: each non-blank line is a block.
+ */
+const FENCE = /^\s{0,3}(```|~~~)/;
+export function splitStreamedText(text, split = 'paragraph') {
+    if (!text)
+        return [];
+    const lines = text.replace(/\r\n?/g, '\n').split('\n');
+    const last = lines.length - 1; // index of the in-progress line
+    const blocks = [];
+    let open = null;
+    let inFence = false;
+    const close = (complete) => {
+        if (!open)
+            return;
+        const body = open.join('\n').trimEnd();
+        if (body)
+            blocks.push({ key: `b${blocks.length}`, text: body, complete });
+        open = null;
+    };
+    for (let i = 0; i <= last; i++) {
+        const line = lines[i];
+        const blank = line.trim() === '';
+        const partial = i === last;
+        if (split === 'line') {
+            if (!blank)
+                blocks.push({ key: `b${blocks.length}`, text: line.trimEnd(), complete: !partial });
+            continue;
+        }
+        if (blank && !inFence) {
+            // A blank in-progress line has not closed anything yet.
+            if (!partial)
+                close(true);
+            continue;
+        }
+        if (!open)
+            open = [];
+        open.push(line);
+        if (FENCE.test(line) && !partial)
+            inFence = !inFence;
+    }
+    close(false);
+    return blocks;
+}

package/dist/components/basic/Breadcrumb.svelte

@@ -1,27 +1,242 @@
 <script lang="ts">
+	/**
+	 * Breadcrumb — hierarchical location trail.
+	 *
+	 *   <Breadcrumb items={[{ label: 'Home', href: '/' }, …, { label: 'README.md' }]} />
+	 *   <Breadcrumb {items} maxItems={4} />          Home / … / y / z
+	 *   <Breadcrumb items={[{ label: 'Home', href: '/', icon: HomeIcon }, …]} />
+	 *
+	 * `maxItems` (BoardUI wave 1, jatui-owg2z) keeps the root and the last
+	 * `maxItems - 1` items and folds the middle into an ellipsis button whose
+	 * menu lists the hidden levels (arrow keys, Escape, click-outside). The last
+	 * item is the current page (`aria-current="page"`). Icons come from
+	 * `item.icon` (any component taking `{ size, class }`, e.g. lucide-svelte)
+	 * or the `icon` snippet for full control.
+	 */
+	import { tick, type Component, type Snippet } from 'svelte';
+	import { floating } from '../../actions/floating';
+	import { collapseBreadcrumb } from './breadcrumbCollapse';
+
 	export interface BreadcrumbItem {
 		label: string;
 		href?: string;
+		/** Leading icon component (receives `size` and `class`). */
+		icon?: Component<{ size?: number; class?: string }>;
 	}
 
 	interface Props {
 		items: BreadcrumbItem[];
+		/** Collapse long trails to root / … / last (maxItems - 1). Unset = never collapse. */
+		maxItems?: number;
+		/** Custom leading icon per item — overrides `item.icon`. */
+		icon?: Snippet<[BreadcrumbItem, number]>;
+		/** Accessible name of the nav landmark. Default "Breadcrumb". */
+		ariaLabel?: string;
 		class?: string;
 	}
 
-	let { items, class: className = '' }: Props = $props();
+	let { items, maxItems, icon, ariaLabel = 'Breadcrumb', class: className = '' }: Props = $props();
+
+	const slots = $derived(collapseBreadcrumb(items, maxItems));
+
+	let menuOpen = $state(false);
+	let triggerEl: HTMLButtonElement | undefined = $state();
+	let menuEl: HTMLUListElement | undefined = $state();
+
+	function openMenu() {
+		menuOpen = true;
+		// Focus the first hidden level once the menu has mounted.
+		void tick().then(() => menuEl?.querySelector<HTMLElement>('[role="menuitem"]')?.focus());
+	}
+
+	function closeMenu(refocus = true) {
+		menuOpen = false;
+		if (refocus) triggerEl?.focus();
+	}
+
+	// use:floating dismisses on a capture-phase click outside the menu — which
+	// includes the trigger, so a click meant to CLOSE would re-open it.
+	let dismissedAt = 0;
+	function dismiss() {
+		dismissedAt = performance.now();
+		closeMenu(false);
+	}
+	function onTriggerClick() {
+		if (performance.now() - dismissedAt < 100) return;
+		if (menuOpen) closeMenu();
+		else openMenu();
+	}
+
+	function onMenuKeydown(e: KeyboardEvent) {
+		const entries = [...(menuEl?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? [])];
+		const at = entries.indexOf(document.activeElement as HTMLElement);
+		let next = -1;
+		if (e.key === 'ArrowDown') next = (at + 1) % entries.length;
+		else if (e.key === 'ArrowUp') next = (at - 1 + entries.length) % entries.length;
+		else if (e.key === 'Home') next = 0;
+		else if (e.key === 'End') next = entries.length - 1;
+		else if (e.key === 'Escape') {
+			e.preventDefault();
+			e.stopPropagation();
+			closeMenu();
+			return;
+		} else if (e.key === 'Tab') {
+			closeMenu(false);
+			return;
+		}
+		if (next >= 0) {
+			e.preventDefault();
+			entries[next]?.focus();
+		}
+	}
+
+	function onTriggerKeydown(e: KeyboardEvent) {
+		if (e.key === 'ArrowDown' && !menuOpen) {
+			e.preventDefault();
+			openMenu();
+		}
+	}
 </script>
 
-<div class="breadcrumbs text-sm {className}">
+{#snippet lead(item: BreadcrumbItem, i: number)}
+	{#if icon}
+		{@render icon(item, i)}
+	{:else if item.icon}
+		{@const Icon = item.icon}
+		<Icon size={14} class="jatui-crumb-icon" />
+	{/if}
+{/snippet}
+
+<nav class="breadcrumbs text-sm {className}" aria-label={ariaLabel}>
 	<ul>
-		{#each items as item, i}
-			<li>
-				{#if item.href && i < items.length - 1}
-					<a href={item.href}>{item.label}</a>
-				{:else}
-					<span>{item.label}</span>
-				{/if}
-			</li>
+		{#each slots as slot (slot.kind === 'item' ? slot.index : 'ellipsis')}
+			{#if slot.kind === 'item'}
+				{@const isLast = slot.index === items.length - 1}
+				<li>
+					{#if slot.item.href && !isLast}
+						<a href={slot.item.href} class="jatui-crumb">
+							{@render lead(slot.item, slot.index)}{slot.item.label}
+						</a>
+					{:else}
+						<span class="jatui-crumb" aria-current={isLast ? 'page' : undefined}>
+							{@render lead(slot.item, slot.index)}{slot.item.label}
+						</span>
+					{/if}
+				</li>
+			{:else}
+				<li>
+					<button
+						bind:this={triggerEl}
+						type="button"
+						class="jatui-crumb-more"
+						aria-haspopup="menu"
+						aria-expanded={menuOpen}
+						aria-label="Show {slot.hidden.length} hidden {slot.hidden.length === 1 ? 'level' : 'levels'}"
+						onclick={onTriggerClick}
+						onkeydown={onTriggerKeydown}
+					>
+						<span aria-hidden="true">…</span>
+					</button>
+					{#if menuOpen}
+						<ul
+							bind:this={menuEl}
+							role="menu"
+							aria-label="Hidden levels"
+							class="jatui-crumb-menu bg-base-100 border-base-300 z-50 border p-1"
+							use:floating={{
+								anchor: triggerEl ?? null,
+								placement: 'bottom-start',
+								offset: 4,
+								onDismiss: dismiss
+							}}
+							onkeydown={onMenuKeydown}
+						>
+							{#each slot.hidden as h (h.index)}
+								<li role="none">
+									{#if h.item.href}
+										<a
+											role="menuitem"
+											href={h.item.href}
+											class="jatui-crumb-menuitem"
+											onclick={() => closeMenu(false)}
+										>
+											{@render lead(h.item, h.index)}{h.item.label}
+										</a>
+									{:else}
+										<span role="menuitem" tabindex="-1" aria-disabled="true" class="jatui-crumb-menuitem">
+											{@render lead(h.item, h.index)}{h.item.label}
+										</span>
+									{/if}
+								</li>
+							{/each}
+						</ul>
+					{/if}
+				</li>
+			{/if}
 		{/each}
 	</ul>
-</div>
+</nav>
+
+<style>
+	.jatui-crumb,
+	.jatui-crumb-menuitem {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--jatui-space-md, 6px);
+	}
+	.jatui-crumb-more {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 1.75rem;
+		height: 1.5rem;
+		padding: 0 var(--jatui-space-sm, 4px);
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		color: inherit;
+		cursor: pointer;
+		transition: background-color var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+	.jatui-crumb-more:hover,
+	.jatui-crumb-more[aria-expanded='true'] {
+		background-color: var(
+			--jatui-hover-bg,
+			color-mix(in oklab, var(--color-base-content) 6%, transparent)
+		);
+	}
+	.jatui-crumb-more:focus-visible,
+	.jatui-crumb-menuitem:focus-visible {
+		outline: var(--jatui-focus-ring-width, 2px) solid
+			var(--jatui-focus-ring, color-mix(in oklab, var(--color-primary) 70%, transparent));
+		outline-offset: var(--jatui-focus-ring-offset, 2px);
+	}
+	.jatui-crumb-menu {
+		min-width: 10rem;
+		max-width: 20rem;
+		border-radius: var(--jatui-radius-box, 0.5rem);
+		list-style: none;
+	}
+	/* DaisyUI's breadcrumbs paints a separator before every li — not inside the menu. */
+	.jatui-crumb-menu :global(li::before) {
+		display: none !important;
+	}
+	.jatui-crumb-menuitem {
+		display: flex;
+		width: 100%;
+		padding: var(--jatui-space-sm, 4px) var(--jatui-space-base, 8px);
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		text-decoration: none;
+	}
+	.jatui-crumb-menuitem:hover,
+	.jatui-crumb-menuitem:focus-visible {
+		background-color: var(
+			--jatui-hover-bg,
+			color-mix(in oklab, var(--color-base-content) 6%, transparent)
+		);
+	}
+	.jatui-crumb-menuitem[aria-disabled='true'] {
+		opacity: 0.6;
+	}
+</style>

package/dist/components/basic/Breadcrumb.svelte.d.ts

@@ -1,11 +1,37 @@
+/**
+     * Breadcrumb — hierarchical location trail.
+     *
+     *   <Breadcrumb items={[{ label: 'Home', href: '/' }, …, { label: 'README.md' }]} />
+     *   <Breadcrumb {items} maxItems={4} />          Home / … / y / z
+     *   <Breadcrumb items={[{ label: 'Home', href: '/', icon: HomeIcon }, …]} />
+     *
+     * `maxItems` (BoardUI wave 1, jatui-owg2z) keeps the root and the last
+     * `maxItems - 1` items and folds the middle into an ellipsis button whose
+     * menu lists the hidden levels (arrow keys, Escape, click-outside). The last
+     * item is the current page (`aria-current="page"`). Icons come from
+     * `item.icon` (any component taking `{ size, class }`, e.g. lucide-svelte)
+     * or the `icon` snippet for full control.
+     */
+import { type Component, type Snippet } from 'svelte';
 export interface BreadcrumbItem {
     label: string;
     href?: string;
+    /** Leading icon component (receives `size` and `class`). */
+    icon?: Component<{
+        size?: number;
+        class?: string;
+    }>;
 }
 interface Props {
     items: BreadcrumbItem[];
+    /** Collapse long trails to root / … / last (maxItems - 1). Unset = never collapse. */
+    maxItems?: number;
+    /** Custom leading icon per item — overrides `item.icon`. */
+    icon?: Snippet<[BreadcrumbItem, number]>;
+    /** Accessible name of the nav landmark. Default "Breadcrumb". */
+    ariaLabel?: string;
     class?: string;
 }
-declare const Breadcrumb: import("svelte").Component<Props, {}, "">;
+declare const Breadcrumb: Component<Props, {}, "">;
 type Breadcrumb = ReturnType<typeof Breadcrumb>;
 export default Breadcrumb;

package/dist/components/basic/breadcrumbCollapse.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Breadcrumb overflow collapse (jatui-owg2z). Pure.
+ *
+ * Keeps the first item and the last `maxItems - 1`, folding the middle into
+ * one ellipsis entry: "Home / … / y / z". The current page (last item) is
+ * always visible; the root is visible whenever maxItems ≥ 2.
+ */
+export type BreadcrumbSlot<T> = {
+    kind: 'item';
+    item: T;
+    index: number;
+} | {
+    kind: 'ellipsis';
+    hidden: {
+        item: T;
+        index: number;
+    }[];
+};
+export declare function collapseBreadcrumb<T>(items: readonly T[], maxItems?: number): BreadcrumbSlot<T>[];

package/dist/components/basic/breadcrumbCollapse.js

@@ -0,0 +1,12 @@
+export function collapseBreadcrumb(items, maxItems) {
+    const all = items.map((item, index) => ({ kind: 'item', item, index }));
+    if (maxItems == null || !(maxItems > 0) || items.length <= maxItems)
+        return all;
+    const max = Math.max(1, Math.floor(maxItems));
+    if (max === 1) {
+        return [{ kind: 'ellipsis', hidden: all.slice(0, -1) }, all[all.length - 1]];
+    }
+    const tail = all.slice(items.length - (max - 1));
+    const hidden = all.slice(1, items.length - (max - 1));
+    return [all[0], { kind: 'ellipsis', hidden }, ...tail];
+}