entasis 0.11.0 → 0.12.0

package/dist/components/AIThread/threadTools.js

@@ -0,0 +1,79 @@
+import { getAIToolStatusFromState } from '../AITool/toolRendering.js';
+/**
+ * Every tool call a transcript message carries, in order: AI SDK tool parts and `{ type: 'tool' }`
+ * parts first, then `tools`, `tool`, or a tool-shaped message. Shared by the render-item
+ * derivation and ask-user-question detection so both see the same calls with the same ids.
+ */
+export function collectAIThreadMessageTools(message, _messageIndex, messageKey, includePartTools = true) {
+    const partTools = (includePartTools ? (message.parts ?? []) : []).flatMap((part, index) => {
+        const tool = toolFromPart(part, `${messageKey}:part-${index}`);
+        return tool ? [tool] : [];
+    });
+    if (partTools.length > 0)
+        return partTools;
+    if (message.tools?.length) {
+        return message.tools.map((tool, index) => normalizeToolCall(tool, `${messageKey}:tool-${index}`));
+    }
+    if (message.tool)
+        return [normalizeToolCall(message.tool, messageKey)];
+    if (message.role === 'tool' || message.type === 'tool') {
+        return [
+            {
+                id: message.id ?? messageKey,
+                name: message.toolName ?? message.name,
+                title: message.name,
+                status: messageToolStatus(message),
+                input: message.input,
+                output: message.output !== undefined ? message.output : message.content,
+                error: message.error
+            }
+        ];
+    }
+    return [];
+}
+export function normalizeToolCall(tool, fallbackId) {
+    return { ...tool, id: tool.id ?? fallbackId, status: toolStatus(tool) };
+}
+export function toolFromPart(part, fallbackId) {
+    if (part.type === 'tool' && part.tool)
+        return normalizeToolCall(part.tool, fallbackId);
+    if (!isToolPart(part))
+        return undefined;
+    const name = part.toolName ?? (part.type.startsWith('tool-') ? part.type.slice(5) : undefined);
+    return normalizeToolCall({
+        id: part.toolCallId ?? fallbackId,
+        name,
+        title: name,
+        // AI SDK approval states (`approval-requested`, `approval-responded`, `output-denied`) map
+        // onto AITool's own statuses, so a call waiting on the user never spins.
+        status: getAIToolStatusFromState(part.state),
+        input: part.input,
+        output: part.output,
+        structuredContent: part.structuredContent,
+        result: part.result,
+        error: part.errorText ?? part.error,
+        ...(part.approval ? { approval: part.approval } : {}),
+        _meta: part._meta
+    }, fallbackId);
+}
+export function isToolPart(part) {
+    return part.type === 'dynamic-tool' || part.type?.startsWith('tool-') === true;
+}
+function toolStatus(tool) {
+    if (tool.status)
+        return tool.status;
+    if (tool.error !== undefined)
+        return 'error';
+    if (tool.output !== undefined || tool.result !== undefined)
+        return 'success';
+    return undefined;
+}
+function messageToolStatus(message) {
+    if (message.status)
+        return message.status;
+    if (message.error !== undefined)
+        return 'error';
+    if (message.output !== undefined || message.content !== undefined)
+        return 'success';
+    return undefined;
+}

package/dist/components/AIThreadToc/AIThreadToc.svelte

@@ -7,10 +7,12 @@
 	import { quintOut } from 'svelte/easing';
 	import { prefersReducedMotion } from '../../utils/motion.svelte.js';
 	import { scale } from 'svelte/transition';
+	import type { Attachment } from 'svelte/attachments';
 	import HoverCard from '../HoverCard/HoverCard.svelte';
 	import ScrollArea from '../ScrollArea/ScrollArea.svelte';
 	import Slot from '../Slot/Slot.svelte';
 	import type { AIThreadItem, AIThreadTocEntry, AIThreadTocProps } from './aiThreadToc.props.js';
+	import type { AIThreadTocPin } from '../AIThread/aiThread.props.js';
 	import { useAIThreadTocTheme } from './aiThreadToc.theme.js';
 	import AIThreadTocPreview from './AIThreadTocPreview.svelte';
 	import {
@@ -30,15 +32,21 @@
 	const PREVIEW_DELAY = 80;
 	const PREVIEW_CLOSE_DELAY = 120;
 	const PREVIEW_GAP = 10;
+	const PIN_ACTIVE_OPACITY = 1;
+	const PIN_VISIBLE_OPACITY = 0.55;
+	const PIN_IDLE_OPACITY = 0.28;
+	const DEFAULT_MIN_CONTAINER_WIDTH = 480;
 
 	let {
 		ref = $bindable(),
 		state: tocState,
 		maxPins = 96,
+		showRange = false,
 		scrollAreaLabel,
 		side = 'left',
 		previewSide,
 		previewAlign = 'center',
+		minContainerWidth = DEFAULT_MIN_CONTAINER_WIDTH,
 		pin,
 		preview,
 		title,
@@ -56,16 +64,51 @@
 	let pointerPinPosition = $state<number>();
 	let focusedPinIndex = $state<number>();
 	let pinAreaElement = $state<HTMLDivElement>();
+	// Roving tab stop: the last pin focused from the keyboard (the first pin until then). It never
+	// follows the active turn, so scrolling the thread writes no `tabindex`; a keyboard entry into
+	// the rail moves on to the active pin instead (see `handlePinFocus`).
+	let rovingKey = $state<string>();
+	// Width of the surrounding container, measured while the rail is mounted.
+	let containerWidth = $state<number>();
+	const narrow = $derived(
+		minContainerWidth > 0 && containerWidth !== undefined && containerWidth < minContainerWidth
+	);
+	// A touch tap previews a pin first; a second tap on the same pin navigates.
+	let lastPointerType: string | undefined;
+	let touchPreviewKey = $state<string>();
 	let pendingPointerY: number | undefined;
 	let pointerFrame: number | undefined;
 	let previewOpenTimer: ReturnType<typeof setTimeout> | undefined;
 	let previewCloseTimer: ReturnType<typeof setTimeout> | undefined;
-	const pins = $derived(
-		compactAIThreadTocEntries<TMessage>(tocState.entries, {
+	// The TOC state is rebuilt on every scroll. Keep the previous pins while they still show the same
+	// entries: new pin objects make the keyed list run its flip animation, which measures every pin
+	// with getBoundingClientRect on each scroll event and made scrolling stutter.
+	let previousPins: AIThreadTocPin<TMessage>[] = [];
+	const t = $derived(useI18n());
+	const pins = $derived.by(() => {
+		const next = compactAIThreadTocEntries<TMessage>(tocState.entries, {
 			maxPins,
 			activeEntryIndex: tocState.activeIndex
-		})
-	);
+		});
+		const same =
+			next.length === previousPins.length &&
+			next.every((pin, index) => {
+				const previous = previousPins[index];
+				return (
+					pin.key === previous.key &&
+					pin.isBucket === previous.isBucket &&
+					pin.entry.index === previous.entry.index &&
+					pin.entry.title === previous.entry.title &&
+					pin.entry.excerpt === previous.entry.excerpt &&
+					pin.entry.fileCount === previous.entry.fileCount
+				);
+			});
+		if (!same) previousPins = next;
+		return previousPins;
+	});
+	// Built once per pin list: in the template the label would be re-truncated on every scroll,
+	// because it updates with the pin's active and visible state.
+	const pinLabels = $derived(pins.map((tocPin) => getAIThreadTocLabel(tocPin.entry, t)));
 	const visibleStartPercent = $derived(offsetPercent(tocState.visibleStartOffset));
 	const visibleEndPercent = $derived(offsetPercent(tocState.visibleEndOffset));
 	const visibleRangePercent = $derived(Math.max(0, visibleEndPercent - visibleStartPercent));
@@ -80,10 +123,18 @@
 		previewPinIndex >= 0 ? pinStackTopPercent(previewPinIndex, pins.length) : 50
 	);
 	const resolvedPreviewPosition = $derived(previewPosition());
+	const activePinIndex = $derived(
+		pins.findIndex((tocPin) => tocPin.entryIndex === tocState.activeIndex)
+	);
+	const tabStopIndex = $derived(
+		Math.max(0, rovingKey === undefined ? 0 : pins.findIndex((tocPin) => tocPin.key === rovingKey))
+	);
+	const previewTurn = $derived(
+		previewEntry ? tocState.entries.findIndex((entry) => entry.key === previewEntry?.key) + 1 : 0
+	);
 	const pinTransitionDuration = $derived(prefersReducedMotion() ? 0 : 240);
 	const pinFlipDuration = $derived(prefersReducedMotion() ? 0 : 170);
 	const classes = $derived(useAIThreadTocTheme(theme));
-	const t = $derived(useI18n());
 
 	function offsetPercent(offset: number): number {
 		const rangeSize =
@@ -122,7 +173,11 @@
 		targeted: boolean
 	): string {
 		if (targeted) return '1';
-		const baseOpacity = active || visible ? 0.8 : 0.32;
+		const baseOpacity = active
+			? PIN_ACTIVE_OPACITY
+			: visible
+				? PIN_VISIBLE_OPACITY
+				: PIN_IDLE_OPACITY;
 		const peakOpacity = Math.max(baseOpacity, PIN_NEIGHBOR_MAX_OPACITY);
 		return (baseOpacity + influence * (peakOpacity - baseOpacity)).toFixed(3);
 	}
@@ -131,6 +186,98 @@
 		tocState.scrollToIndex(entry.index);
 	}
 
+	function handlePinPointerDown(event: PointerEvent): void {
+		lastPointerType = event.pointerType;
+	}
+
+	function handlePinClick(entry: AIThreadTocEntry<TMessage>, pinIndex: number, key: string): void {
+		const touch = lastPointerType === 'touch';
+		lastPointerType = undefined;
+		if (touch && touchPreviewKey !== key) {
+			touchPreviewKey = key;
+			pointerPinPosition = pinIndex;
+			pointerPinIndex = pinIndex;
+			openPreview(entry, true);
+			return;
+		}
+		if (touch) closeTouchPreview();
+		activate(entry);
+	}
+
+	function closeTouchPreview(): void {
+		if (touchPreviewKey === undefined) return;
+		touchPreviewKey = undefined;
+		pointerPinIndex = undefined;
+		pointerPinPosition = undefined;
+		schedulePreviewClose();
+	}
+
+	// A touch preview closes on the next tap outside the rail.
+	$effect(() => {
+		if (touchPreviewKey === undefined || !ref) return;
+		const root = ref;
+		const ownerDocument = root.ownerDocument;
+		const handlePointerDown = (event: PointerEvent) => {
+			if (event.target instanceof Node && root.contains(event.target)) return;
+			closeTouchPreview();
+		};
+		ownerDocument.addEventListener('pointerdown', handlePointerDown, true);
+		return () => ownerDocument.removeEventListener('pointerdown', handlePointerDown, true);
+	});
+
+	function handleStackKeydown(event: KeyboardEvent): void {
+		if (event.altKey || event.ctrlKey || event.metaKey || pins.length === 0) return;
+		const current =
+			event.target instanceof Element ? event.target.closest('[data-toc-pin-key]') : null;
+		if (!current) return;
+		const index = pins.findIndex(
+			(tocPin) => tocPin.key === current.getAttribute('data-toc-pin-key')
+		);
+		let next: number;
+		if (event.key === 'ArrowDown' || event.key === 'ArrowRight') next = index + 1;
+		else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') next = index - 1;
+		else if (event.key === 'Home') next = 0;
+		else if (event.key === 'End') next = pins.length - 1;
+		else return;
+		event.preventDefault();
+		focusPin(Math.max(0, Math.min(pins.length - 1, next)));
+	}
+
+	function focusPin(pinIndex: number): void {
+		const tocPin = pins[pinIndex];
+		if (!tocPin || !pinAreaElement) return;
+		rovingKey = tocPin.key;
+		const element = Array.from(
+			pinAreaElement.querySelectorAll<HTMLElement>('[data-slot="ai-thread-toc-pin"]')
+		).find((candidate) => candidate.dataset.tocPinKey === tocPin.key);
+		element?.focus();
+	}
+
+	// The rail is a wide-layout affordance: it removes itself when the surrounding container (the
+	// nearest ancestor wider than the rail, typically the thread) is narrower than
+	// `minContainerWidth`.
+	const watchContainer: Attachment<HTMLElement> = (node) => {
+		if (typeof ResizeObserver === 'undefined') return;
+		let container = node.parentElement;
+		while (container && container.clientWidth <= node.offsetWidth + 1) {
+			container = container.parentElement;
+		}
+		if (!container) return;
+		const measured = container;
+		// Only the width is stored; `narrow` derives from it, so a new `minContainerWidth` applies
+		// at once instead of waiting for the next resize.
+		const measure = () => {
+			containerWidth = measured.clientWidth;
+		};
+		const observer = new ResizeObserver(measure);
+		observer.observe(measured);
+		measure();
+		return () => {
+			observer.disconnect();
+			containerWidth = undefined;
+		};
+	};
+
 	function handleStackPointerMove(event: PointerEvent): void {
 		if (event.pointerType !== 'mouse' && event.pointerType !== 'pen') return;
 		pendingPointerY = event.clientY;
@@ -190,6 +337,10 @@
 		const pinIndex = Math.round(pinPosition);
 		const tocPin = pins[pinIndex];
 		if (!tocPin) return;
+		if (lastPointerType === 'touch') {
+			handlePinClick(tocPin.entry, pinIndex, tocPin.key);
+			return;
+		}
 		activatePointerPin(pinIndex);
 		activate(tocPin.entry);
 	}
@@ -204,7 +355,16 @@
 			focusedPinIndex = undefined;
 			return;
 		}
+		// Tab (or Shift+Tab) into the rail lands on the resting tab stop; the active turn's pin is
+		// where a keyboard user expects to start.
+		const from = event.relatedTarget;
+		const entering = !(from instanceof Node && pinAreaElement?.contains(from));
+		if (entering && activePinIndex >= 0 && activePinIndex !== pinIndex) {
+			focusPin(activePinIndex);
+			return;
+		}
 		focusedPinIndex = pinIndex;
+		rovingKey = pins[pinIndex]?.key;
 		openPreview(entry, true);
 	}
 
@@ -292,6 +452,8 @@
 	{#if previewEntry}
 		<AIThreadTocPreview
 			entry={previewEntry}
+			turn={previewTurn}
+			total={tocState.entries.length}
 			{preview}
 			{title}
 			{excerpt}
@@ -306,17 +468,20 @@
 	bind:this={ref}
 	data-slot="ai-thread-toc"
 	aria-label={t.threadMinimap}
+	data-narrow={narrow || undefined}
+	hidden={narrow || undefined}
 	class={classes.root({ side, className })}
 	{...rootAttributes}
+	{@attach watchContainer}
 >
-	{#if pins.length > 0}
+	{#if pins.length > 0 && !narrow}
 		<ScrollArea
 			label={scrollAreaLabel ?? t.threadMinimapEntries}
+			viewportAttrs={{ tabindex: -1 }}
 			class={classes.scrollArea()}
 			theme={aiThreadTocScrollAreaTheme}
 		>
 			<div class={classes.scrollContent()}>
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div
 					data-slot="ai-thread-toc-stack"
@@ -325,7 +490,9 @@
 					style:height={`${trackHeight}px`}
 					onpointermove={handleStackPointerMove}
 					onpointerleave={handleStackPointerLeave}
+					onpointerdown={handlePinPointerDown}
 					onfocusout={handleStackFocusOut}
+					onkeydown={handleStackKeydown}
 					onclick={handleStackClick}
 				>
 					<div
@@ -334,14 +501,16 @@
 						class={classes.pinArea()}
 						style={`--ai-thread-toc-preview-top: ${previewPinTop}%`}
 					>
-						<div data-slot="ai-thread-toc-rail" class={classes.rail()}>
-							<div
-								data-slot="ai-thread-toc-viewport"
-								class={classes.viewport()}
-								style:top={`${visibleStartPercent}%`}
-								style:height={`${visibleRangePercent}%`}
-							></div>
-						</div>
+						{#if showRange}
+							<div data-slot="ai-thread-toc-rail" class={classes.rail()}>
+								<div
+									data-slot="ai-thread-toc-viewport"
+									class={classes.viewport()}
+									style:top={`${visibleStartPercent}%`}
+									style:height={`${visibleRangePercent}%`}
+								></div>
+							</div>
+						{/if}
 
 						{#each pins as tocPin, pinIndex (tocPin.key)}
 							{@const active = tocPin.entryIndex === tocState.activeIndex}
@@ -357,10 +526,11 @@
 								data-bucket={tocPin.isBucket}
 								data-magnified={influence > 0 ? 'true' : undefined}
 								data-targeted={targeted ? 'true' : undefined}
+								tabindex={pinIndex === tabStopIndex ? 0 : -1}
 								class={classes.pin({ side, active })}
 								style:top={`${pinStackTopPercent(pinIndex, pins.length)}%`}
 								style:transform-origin={side === 'left' ? 'left center' : 'right center'}
-								aria-label={getAIThreadTocLabel(tocPin.entry)}
+								aria-label={pinLabels[pinIndex]}
 								aria-current={active ? 'location' : undefined}
 								animate:flip={{ duration: pinFlipDuration, easing: quintOut }}
 								transition:scale={{
@@ -369,7 +539,7 @@
 									easing: quintOut
 								}}
 								onfocus={(event) => handlePinFocus(event, tocPin.entry, pinIndex)}
-								onclick={() => activate(tocPin.entry)}
+								onclick={() => handlePinClick(tocPin.entry, pinIndex, tocPin.key)}
 							>
 								{#if pin}
 									<Slot render={pin} payload={{ entry: tocPin.entry, active }} />

package/dist/components/AIThreadToc/AIThreadTocPreview.svelte

@@ -9,19 +9,35 @@
 		AIThreadTocProps
 	} from './aiThreadToc.props.js';
 	import { useAIThreadTocTheme } from './aiThreadToc.theme.js';
+	import { useI18n } from '../../i18n/context.svelte.js';
 
 	type Props = Pick<
 		AIThreadTocProps<TMessage>,
 		'preview' | 'title' | 'excerpt' | 'metadata' | 'icon' | 'theme'
 	> & {
 		entry: AIThreadTocEntry<TMessage>;
+		/** 1-based position of the entry among the thread's user turns; 0 hides it. */
+		turn?: number;
+		total?: number;
 	};
 
 	type PreviewFile = {
 		file: AIFileSource;
 	};
 
-	let { entry, preview, title, excerpt, metadata, icon, theme }: Props = $props();
+	let {
+		entry,
+		turn = 0,
+		total = 0,
+		preview,
+		title,
+		excerpt,
+		metadata,
+		icon,
+		theme
+	}: Props = $props();
+
+	const t = $derived(useI18n());
 
 	const classes = $derived(useAIThreadTocTheme(theme));
 	const files = $derived(previewFiles(entry));
@@ -55,6 +71,11 @@
 				<div data-slot="ai-thread-toc-preview-title" class={classes.previewTitle()}>
 					<Slot render={title ?? entry.title} payload={entry} />
 				</div>
+				{#if turn > 0 && total > 0}
+					<div data-slot="ai-thread-toc-preview-turn" class={classes.previewTurn()}>
+						{t.aiThreadTocTurn(turn, total)}
+					</div>
+				{/if}
 				{#if metadata}
 					<div data-slot="ai-thread-toc-preview-metadata" class={classes.previewMetadata()}>
 						<Slot render={metadata} payload={entry} />
@@ -79,7 +100,9 @@
 					</div>
 				{/each}
 				{#if entry.fileCount > files.length}
-					<div class={classes.previewMetadata()}>+{entry.fileCount - files.length} more</div>
+					<div class={classes.previewMetadata()}>
+						{t.aiThreadTocMoreFiles(entry.fileCount - files.length)}
+					</div>
 				{/if}
 			</div>
 		{/if}

package/dist/components/AIThreadToc/AIThreadTocPreview.svelte.d.ts

@@ -2,6 +2,9 @@ import type { AIThreadItem, AIThreadTocEntry, AIThreadTocProps } from './aiThrea
 declare function $$render<TMessage extends AIThreadItem = AIThreadItem>(): {
     props: Pick<AIThreadTocProps<TMessage>, "theme" | "title" | "metadata" | "icon" | "preview" | "excerpt"> & {
         entry: AIThreadTocEntry<TMessage>;
+        /** 1-based position of the entry among the thread's user turns; 0 hides it. */
+        turn?: number;
+        total?: number;
     };
     exports: {};
     bindings: "";

package/dist/components/AIThreadToc/aiThreadToc.d.ts

@@ -1,5 +1,7 @@
 import type { AIThreadItem, AIThreadScrollBehavior, AIThreadTocEntry, AIThreadTocPin, AIThreadTocState } from '../AIThread/aiThread.props.js';
 import type { AIThreadRenderItem } from '../AIThread/threadRenderItems.js';
+import type { Messages } from '../../i18n/en.js';
+type AIThreadTocMessages = Pick<Messages, 'aiThreadTocFiles' | 'aiThreadTocScrollTo'>;
 type BuildAIThreadTocStateOptions = {
     totalSize: number;
     scrollOffset: number;
@@ -17,7 +19,7 @@ type CompactAIThreadTocOptions = {
 };
 export declare function buildAIThreadTocState<TMessage extends AIThreadItem>(items: readonly AIThreadRenderItem<TMessage>[], options: BuildAIThreadTocStateOptions): AIThreadTocState<TMessage>;
 export declare function compactAIThreadTocEntries<TMessage extends AIThreadItem>(entries: readonly AIThreadTocEntry<TMessage>[], options: CompactAIThreadTocOptions): AIThreadTocPin<TMessage>[];
-export declare function getAIThreadTocMetadata(entry: AIThreadTocEntry): string;
-export declare function getAIThreadTocLabel(entry: AIThreadTocEntry): string;
+export declare function getAIThreadTocMetadata(entry: AIThreadTocEntry, t: AIThreadTocMessages): string;
+export declare function getAIThreadTocLabel(entry: AIThreadTocEntry, t: AIThreadTocMessages): string;
 export declare function isAIThreadTocEntryVisible(entry: AIThreadTocEntry, state: AIThreadTocState): boolean;
 export {};

package/dist/components/AIThreadToc/aiThreadToc.js

@@ -62,7 +62,7 @@ export function compactAIThreadTocEntries(entries, options) {
         return createPin(entry, entryIndex, !preservedIndexes.has(entryIndex));
     });
 }
-export function getAIThreadTocMetadata(entry) {
+export function getAIThreadTocMetadata(entry, t) {
     if (entry.fileCount === 0)
         return '';
     const names = [...entry.attachments, ...entry.files]
@@ -72,12 +72,12 @@ export function getAIThreadTocMetadata(entry) {
     const hiddenCount = Math.max(0, names.length - shownNames.length);
     const namesLabel = shownNames.length > 0 ? ` - ${shownNames.join(', ')}` : '';
     const hiddenLabel = hiddenCount > 0 ? ` +${hiddenCount}` : '';
-    return truncate(`${entry.fileCount} ${entry.fileCount === 1 ? 'file' : 'files'}${namesLabel}${hiddenLabel}`, TOC_METADATA_LABEL_MAX_LENGTH);
+    return truncate(`${t.aiThreadTocFiles(entry.fileCount)}${namesLabel}${hiddenLabel}`, TOC_METADATA_LABEL_MAX_LENGTH);
 }
-export function getAIThreadTocLabel(entry) {
-    const metadata = getAIThreadTocMetadata(entry);
+export function getAIThreadTocLabel(entry, t) {
+    const metadata = getAIThreadTocMetadata(entry, t);
     return truncate([
-        `Scroll to ${truncate(entry.title, TOC_TITLE_MAX_LENGTH)}`,
+        t.aiThreadTocScrollTo(truncate(entry.title, TOC_TITLE_MAX_LENGTH)),
         truncate(entry.excerpt, TOC_ARIA_EXCERPT_MAX_LENGTH),
         metadata
     ]
@@ -136,7 +136,19 @@ function buildEntries(items, options) {
     }
     return entries;
 }
+// The TOC is rebuilt on every scroll (its active entry follows the viewport), and normalizing every
+// message's text each time made scrolling a long thread drop frames. Messages are replaced, never
+// mutated, so their text is computed once per message object.
+const messageTextCache = new WeakMap();
 function messageText(message, renderedContent) {
+    const cached = messageTextCache.get(message);
+    if (cached && cached.renderedContent === renderedContent)
+        return cached.text;
+    const text = computeMessageText(message, renderedContent);
+    messageTextCache.set(message, { renderedContent, text });
+    return text;
+}
+function computeMessageText(message, renderedContent) {
     const content = normalize(message.content ?? '');
     if (content)
         return content;

package/dist/components/AIThreadToc/aiThreadToc.mcp.d.ts

@@ -1 +1 @@
-export declare const aiThreadTocDescription = "\n# AIThreadToc\n\nStandalone, controlled user-turn navigation for AI transcripts. It renders a compact rail, visible-range marker, magnifying pins, and one shared HoverCard preview from an AIThreadTocState.\n\nImport it directly from **entasis/ai-thread-toc**. AIThread composes the same primitive for its default minimap and exposes measured state through its **toc** slot.\n\n## Thread composition\n\n~~~svelte\n<script lang=\"ts\">\n  import { AIThread } from '../AIThread/index.ts';\n  import { AIThreadToc, type AIThreadTocState } from './index.ts';\n</script>\n\n{#snippet toc(state: AIThreadTocState)}\n  <AIThreadToc {state} side=\"left\" previewAlign=\"start\" />\n{/snippet}\n\n<AIThread {messages} showToc {toc} />\n~~~\n\nThe component is controlled: **state.entries** supplies measured user turns, **activeIndex** and visible offsets describe the transcript viewport, and **scrollToIndex** performs navigation. A manually constructed state is also valid.\n\n## Props\n\n- **state**: AIThreadTocState - Required controlled navigation state.\n- **maxPins**: number - Maximum pins before spatial compaction. Default 96.\n- **scrollAreaLabel**: string - Accessible label for the nested scrollable pin region.\n- **side**: 'left' | 'right' - Rail alignment and pin transform origin. Default 'left'.\n- **previewSide**: 'left' | 'right' - Preview side; defaults away from the rail.\n- **previewAlign**: 'start' | 'center' | 'end' - Preview alignment. Default 'center'.\n- **pin**: Slot<{ entry, active }> - Replaces each pin indicator.\n- **preview**: Slot<AIThreadTocEntry> - Replaces the complete shared HoverCard preview.\n- **title**, **excerpt**, **metadata**, **icon**: Slot<AIThreadTocEntry> - Compose the default preview.\n- **ref**, **class**, **theme**, native nav attributes, and Svelte attachments.\n\nThe root is bounded to 80% of its containing height. Pins live in the shared ScrollArea; native and custom scrollbars are hidden, while wheel, touch, and keyboard scrolling remain available. Give a standalone TOC a parent with an explicit height.\n\n## State and entries\n\nAIThreadTocEntry includes the source user message, prompt title, latest assistant excerpt, measured offset and size, files, attachments, and file count. AIThreadTocState includes entries, total range, active entry, visible offsets, **scrollToIndex**, and **scrollToOffset**.\n\nThe default preview clamps the prompt to one line, clamps the assistant response to four lines, and renders attachments as quiet inline labels. Pin focus and activation are keyboard accessible.\n\n## Theme\n\nTheme parts are **root**, **scrollArea**, **scrollContent**, **track**, **pinArea**, **rail**, **viewport**, **pin**, **pinIndicator**, **previewAnchor**, **preview**, **previewHeader**, **previewIcon**, **previewTitle**, **previewExcerpt**, **previewMetadata**, and **previewFiles**.\n";
+export declare const aiThreadTocDescription = "\n# AIThreadToc\n\nStandalone, controlled user-turn navigation for AI transcripts. It renders magnifying pins (with an optional rail and visible-range marker, `showRange`), and one shared HoverCard preview from an AIThreadTocState.\n\nImport it directly from **entasis/ai-thread-toc**. AIThread composes the same primitive for its default minimap and exposes measured state through its **toc** slot.\n\n## Thread composition\n\n~~~svelte\n<script lang=\"ts\">\n  import { AIThread } from '../AIThread/index.ts';\n  import { AIThreadToc, type AIThreadTocState } from './index.ts';\n</script>\n\n{#snippet toc(state: AIThreadTocState)}\n  <AIThreadToc {state} side=\"left\" previewAlign=\"start\" />\n{/snippet}\n\n<AIThread {messages} showToc {toc} />\n~~~\n\nThe component is controlled: **state.entries** supplies measured user turns, **activeIndex** and visible offsets describe the transcript viewport, and **scrollToIndex** performs navigation. A manually constructed state is also valid.\n\n## Props\n\n- **state**: AIThreadTocState - Required controlled navigation state.\n- **maxPins**: number - Maximum pins before spatial compaction. Default 96.\n- **showRange**: boolean - Draws a rail beside the pins with a bar marking the part of the thread on screen. Default false (AIThread: `tocShowRange`).\n- **scrollAreaLabel**: string - Accessible label for the nested scrollable pin region.\n- **side**: 'left' | 'right' - Rail alignment and pin transform origin. Default 'left'.\n- **previewSide**: 'left' | 'right' - Preview side; defaults away from the rail.\n- **previewAlign**: 'start' | 'center' | 'end' - Preview alignment. Default 'center'.\n- **minContainerWidth**: number - Container width in pixels below which the rail removes itself (hidden, no pins). The container is the nearest ancestor wider than the rail, usually the thread. Default 480; 0 keeps it at every width.\n- **pin**: Slot<{ entry, active }> - Replaces each pin indicator.\n- **preview**: Slot<AIThreadTocEntry> - Replaces the complete shared HoverCard preview.\n- **title**, **excerpt**, **metadata**, **icon**: Slot<AIThreadTocEntry> - Compose the default preview.\n- **ref**, **class**, **theme**, native nav attributes, and Svelte attachments.\n\nThe root is bounded to 80% of its containing height. Pins live in the shared ScrollArea; native and custom scrollbars are hidden, while wheel, touch, and keyboard scrolling remain available. Give a standalone TOC a parent with an explicit height.\n\n## State and entries\n\nAIThreadTocEntry includes the source user message, prompt title, latest assistant excerpt, measured offset and size, files, attachments, and file count. AIThreadTocState includes entries, total range, active entry, visible offsets, **scrollToIndex**, and **scrollToOffset**.\n\nThe default preview clamps the prompt to one line, shows \"Turn N of M\", clamps the assistant response to four lines, and renders attachments as quiet inline labels.\n\n## Interaction\n\n- With `showRange`, the rail and the visible-range bar are painted; the active turn's pin is longer and fully opaque, pins in view are lighter, the rest faint.\n- Keyboard: the rail is one tab stop, and Tab into it lands on the active turn's pin. ArrowUp/ArrowDown (and Left/Right), Home and End move between pins; Enter or Space navigates.\n- Pointer: hovering magnifies nearby pins and previews the one under the pointer; clicking navigates.\n- Touch: the first tap on a pin previews it, a second tap on the same pin navigates, and a tap outside closes the preview.\n- Pin transitions run only while the stack is pointed at or focused; scrolling the thread does not restyle the pins.\n\n## Theme\n\nTheme parts are **root**, **scrollArea**, **scrollContent**, **track**, **pinArea**, **rail**, **viewport**, **pin**, **pinIndicator** (`active` variant), **previewAnchor**, **preview**, **previewHeader**, **previewIcon**, **previewTitle**, **previewTurn**, **previewExcerpt**, **previewMetadata**, and **previewFiles**.\n";

package/dist/components/AIThreadToc/aiThreadToc.mcp.js

@@ -1,7 +1,7 @@
 export const aiThreadTocDescription = `
 # AIThreadToc
 
-Standalone, controlled user-turn navigation for AI transcripts. It renders a compact rail, visible-range marker, magnifying pins, and one shared HoverCard preview from an AIThreadTocState.
+Standalone, controlled user-turn navigation for AI transcripts. It renders magnifying pins (with an optional rail and visible-range marker, \`showRange\`), and one shared HoverCard preview from an AIThreadTocState.
 
 Import it directly from **entasis/ai-thread-toc**. AIThread composes the same primitive for its default minimap and exposes measured state through its **toc** slot.
 
@@ -26,10 +26,12 @@ The component is controlled: **state.entries** supplies measured user turns, **a
 
 - **state**: AIThreadTocState - Required controlled navigation state.
 - **maxPins**: number - Maximum pins before spatial compaction. Default 96.
+- **showRange**: boolean - Draws a rail beside the pins with a bar marking the part of the thread on screen. Default false (AIThread: \`tocShowRange\`).
 - **scrollAreaLabel**: string - Accessible label for the nested scrollable pin region.
 - **side**: 'left' | 'right' - Rail alignment and pin transform origin. Default 'left'.
 - **previewSide**: 'left' | 'right' - Preview side; defaults away from the rail.
 - **previewAlign**: 'start' | 'center' | 'end' - Preview alignment. Default 'center'.
+- **minContainerWidth**: number - Container width in pixels below which the rail removes itself (hidden, no pins). The container is the nearest ancestor wider than the rail, usually the thread. Default 480; 0 keeps it at every width.
 - **pin**: Slot<{ entry, active }> - Replaces each pin indicator.
 - **preview**: Slot<AIThreadTocEntry> - Replaces the complete shared HoverCard preview.
 - **title**, **excerpt**, **metadata**, **icon**: Slot<AIThreadTocEntry> - Compose the default preview.
@@ -41,9 +43,17 @@ The root is bounded to 80% of its containing height. Pins live in the shared Scr
 
 AIThreadTocEntry includes the source user message, prompt title, latest assistant excerpt, measured offset and size, files, attachments, and file count. AIThreadTocState includes entries, total range, active entry, visible offsets, **scrollToIndex**, and **scrollToOffset**.
 
-The default preview clamps the prompt to one line, clamps the assistant response to four lines, and renders attachments as quiet inline labels. Pin focus and activation are keyboard accessible.
+The default preview clamps the prompt to one line, shows "Turn N of M", clamps the assistant response to four lines, and renders attachments as quiet inline labels.
+
+## Interaction
+
+- With \`showRange\`, the rail and the visible-range bar are painted; the active turn's pin is longer and fully opaque, pins in view are lighter, the rest faint.
+- Keyboard: the rail is one tab stop, and Tab into it lands on the active turn's pin. ArrowUp/ArrowDown (and Left/Right), Home and End move between pins; Enter or Space navigates.
+- Pointer: hovering magnifies nearby pins and previews the one under the pointer; clicking navigates.
+- Touch: the first tap on a pin previews it, a second tap on the same pin navigates, and a tap outside closes the preview.
+- Pin transitions run only while the stack is pointed at or focused; scrolling the thread does not restyle the pins.
 
 ## Theme
 
-Theme parts are **root**, **scrollArea**, **scrollContent**, **track**, **pinArea**, **rail**, **viewport**, **pin**, **pinIndicator**, **previewAnchor**, **preview**, **previewHeader**, **previewIcon**, **previewTitle**, **previewExcerpt**, **previewMetadata**, and **previewFiles**.
+Theme parts are **root**, **scrollArea**, **scrollContent**, **track**, **pinArea**, **rail**, **viewport**, **pin**, **pinIndicator** (\`active\` variant), **previewAnchor**, **preview**, **previewHeader**, **previewIcon**, **previewTitle**, **previewTurn**, **previewExcerpt**, **previewMetadata**, and **previewFiles**.
 `;

package/dist/components/AIThreadToc/aiThreadToc.props.d.ts

@@ -12,6 +12,11 @@ export type AIThreadTocProps<TMessage extends AIThreadItem = AIThreadItem> = Wit
     state: AIThreadTocState<TMessage>;
     /** Maximum visible navigation pins before entries are compacted. */
     maxPins?: number;
+    /**
+     * Draws a rail beside the pins with a bar marking the part of the thread on screen.
+     * @default false
+     */
+    showRange?: boolean;
     /** Accessible label for the nested scrollable pin region. */
     scrollAreaLabel?: string;
     /** Side occupied by the navigation rail. @default 'left' */
@@ -20,6 +25,12 @@ export type AIThreadTocProps<TMessage extends AIThreadItem = AIThreadItem> = Wit
     previewSide?: AIThreadTocPreviewSide;
     /** Alignment of previews relative to their navigation pins. */
     previewAlign?: AIThreadTocPreviewAlign;
+    /**
+     * Container width in pixels below which the rail removes itself. The container is the
+     * nearest ancestor wider than the rail, usually the thread. `0` keeps it at every width.
+     * @default 480
+     */
+    minContainerWidth?: number;
     /** Replaces the visual indicator for each navigation pin. */
     pin?: Slot<AIThreadTocPinPayload<TMessage>>;
     /** Replaces the complete preview for a user turn. */

package/dist/components/AIThreadToc/aiThreadToc.theme.d.ts

@@ -40,6 +40,7 @@ export declare const aiThreadTocTheme: {
     previewTitle: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     previewExcerpt: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     previewMetadata: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    previewTurn: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     previewFiles: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 };
 export type AIThreadTocTheme = typeof aiThreadTocTheme;
@@ -85,6 +86,7 @@ export declare const setAIThreadTocTheme: (theme: InferComponentTheme<{
     previewTitle: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     previewExcerpt: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     previewMetadata: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    previewTurn: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     previewFiles: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 }>) => void;
 export declare const useAIThreadTocTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
@@ -128,5 +130,6 @@ export declare const useAIThreadTocTheme: import("../../utils/cva/theme.js").Use
     previewTitle: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     previewExcerpt: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     previewMetadata: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    previewTurn: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     previewFiles: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 }>;