@joewinke/jatui 0.1.19 → 0.1.21

package/src/lib/components/linked-columns/LinkedColumns.svelte

@@ -0,0 +1,520 @@
+<script lang="ts" generics="L extends { id: string | number }, R extends { id: string | number }">
+	/**
+	 * LinkedColumns — generic two-column ink-up ribbon primitive.
+	 *
+	 * Renders two lists (LEFT = "many", RIGHT = "anchors") connected by bezier
+	 * ribbons that ink up when active. The many-to-one mapping is declared by the
+	 * caller via `links`: each link says which right item owns which range of left
+	 * items. Ribbons animate on hover and on scroll (scroll-center activation).
+	 *
+	 * Extracted from SessionNavigator (jat-jj79f.7) so any coverage/traceability
+	 * view — PRD↔tasks, files↔agents, plan sections↔work — can reuse the primitive
+	 * without coupling to transcript/signal domain types.
+	 *
+	 * ## Props
+	 *   leftItems   — ordered list of "many" items
+	 *   rightItems  — ordered list of "anchor" items (one per group)
+	 *   links       — for each right item: which leftItem id range it covers
+	 *   leftKey     — fn that returns the data-left-id attribute value for a left item
+	 *   rightKey    — fn that returns the data-right-id value for a right item
+	 *   accentColor — fn that returns an oklch color string for a right item (ribbon color)
+	 *   activeId    — currently highlighted right item id (controlled); null = auto from scroll
+	 *   onActiveChange — called when hover/scroll changes the active right item
+	 *   compact     — reduce outer padding (for embedding in panels)
+	 *
+	 * ## Slots / snippets
+	 *   leftItem   — renders each left item; receives `{ item, isActive }` context
+	 *   rightItem  — renders each right item; receives `{ item, isActive }` context
+	 *   leftHeader — optional column heading (default "Left")
+	 *   rightHeader — optional column heading (default "Right")
+	 *   empty      — shown in right column when rightItems is empty
+	 *
+	 * ## Usage
+	 * ```svelte
+	 * <LinkedColumns
+	 *   {leftItems}
+	 *   {rightItems}
+	 *   {links}
+	 *   leftKey={i => i.id}
+	 *   rightKey={r => r.id}
+	 *   accentColor={r => r.color}
+	 * >
+	 *   {#snippet leftItem({ item, isActive })}
+	 *     <div class:active={isActive}>{item.text}</div>
+	 *   {/snippet}
+	 *   {#snippet rightItem({ item, isActive })}
+	 *     <div class:active={isActive}>{item.title}</div>
+	 *   {/snippet}
+	 * </LinkedColumns>
+	 * ```
+	 */
+
+	import type { Snippet } from 'svelte';
+
+	/** Describes which left items a single right (anchor) item covers. */
+	export interface ColumnLink {
+		/** The right item's id this link belongs to. */
+		rightId: string | number;
+		/** First left item id in the covered range (inclusive). */
+		leftStartId: string | number;
+		/** Last left item id in the covered range (inclusive). */
+		leftEndId: string | number;
+	}
+
+	let {
+		leftItems,
+		rightItems,
+		links,
+		leftKey,
+		rightKey,
+		accentColor,
+		activeId = $bindable(null),
+		onActiveChange,
+		compact = false,
+		leftItem,
+		rightItem,
+		leftHeader,
+		rightHeader,
+		empty
+	}: {
+		leftItems: L[];
+		rightItems: R[];
+		links: ColumnLink[];
+		leftKey: (item: L) => string | number;
+		rightKey: (item: R) => string | number;
+		accentColor: (item: R, isActive: boolean) => string;
+		activeId?: string | number | null;
+		onActiveChange?: (id: string | number | null) => void;
+		compact?: boolean;
+		leftItem: Snippet<[{ item: L; isActive: boolean }]>;
+		rightItem: Snippet<[{ item: R; isActive: boolean }]>;
+		leftHeader?: Snippet;
+		rightHeader?: Snippet;
+		empty?: Snippet;
+	} = $props();
+
+	// ── State ──────────────────────────────────────────────────────────────────
+
+	/** Hover overrides scroll-center activation. */
+	let hoverActiveId = $state<string | number | null>(null);
+	/** Scroll-center derived active id. */
+	let scrollActiveId = $state<string | number | null>(null);
+
+	/** The "inked up" right item id: hover > controlled activeId > scroll. */
+	const resolvedActiveId = $derived(
+		hoverActiveId ?? activeId ?? scrollActiveId
+	);
+
+	// ── DOM refs ───────────────────────────────────────────────────────────────
+
+	let containerEl = $state<HTMLElement | null>(null);
+	let leftScrollEl = $state<HTMLElement | null>(null);
+	let svgW = $state(0);
+	let svgH = $state(0);
+
+	// ── Ribbon geometry ────────────────────────────────────────────────────────
+
+	interface Ribbon {
+		id: string | number;
+		accent: string;
+		path: string;
+		active: boolean;
+	}
+	let ribbons = $state<Ribbon[]>([]);
+
+	function relRect(el: Element | null): { top: number; bottom: number; left: number; right: number } | null {
+		if (!el || !containerEl) return null;
+		const c = containerEl.getBoundingClientRect();
+		const r = el.getBoundingClientRect();
+		return { top: r.top - c.top, bottom: r.bottom - c.top, left: r.left - c.left, right: r.right - c.left };
+	}
+
+	function ribbonPath(lTop: number, lBot: number, lx: number, rTop: number, rBot: number, rx: number): string {
+		const midX = (lx + rx) / 2;
+		return [
+			`M ${lx} ${lTop}`,
+			`C ${midX} ${lTop} ${midX} ${rTop} ${rx} ${rTop}`,
+			`L ${rx} ${rBot}`,
+			`C ${midX} ${rBot} ${midX} ${lBot} ${lx} ${lBot}`,
+			'Z'
+		].join(' ');
+	}
+
+	/** Build a lookup: left item id → its index in leftItems. */
+	const leftIdxMap = $derived(
+		(() => {
+			const m = new Map<string | number, number>();
+			leftItems.forEach((it, i) => m.set(leftKey(it), i));
+			return m;
+		})()
+	);
+
+	function recompute() {
+		if (!containerEl) return;
+		svgW = containerEl.clientWidth;
+		svgH = containerEl.clientHeight;
+
+		const lv = relRect(leftScrollEl);
+		const next: Ribbon[] = [];
+
+		for (const link of links) {
+			const rightId = link.rightId;
+			const rightItemData = rightItems.find((r) => rightKey(r) === rightId);
+			if (!rightItemData) continue;
+
+			const active = rightId === resolvedActiveId;
+			const accent = accentColor(rightItemData, active);
+
+			const startEl = containerEl.querySelector(`[data-left-id="${link.leftStartId}"]`);
+			const endEl = containerEl.querySelector(`[data-left-id="${link.leftEndId}"]`);
+			const anchorEl = containerEl.querySelector(`[data-right-id="${rightId}"]`);
+
+			if (!anchorEl) continue;
+
+			const cR = relRect(anchorEl);
+			if (!cR) continue;
+
+			const sR = relRect(startEl);
+			const eR = relRect(endEl);
+
+			let lTop = sR ? sR.top : (lv ? lv.top : 0);
+			let lBot = eR ? eR.bottom : (lv ? lv.bottom : svgH);
+
+			// Clamp to the visible scroll area
+			if (lv) {
+				lTop = Math.max(lv.top, Math.min(lv.bottom, lTop));
+				lBot = Math.max(lv.top, Math.min(lv.bottom, lBot));
+			}
+			if (lBot - lTop < 4) lBot = lTop + 4;
+
+			const lx = lv ? lv.right : svgW * 0.5;
+			next.push({
+				id: rightId,
+				accent,
+				path: ribbonPath(lTop, lBot, lx, cR.top, cR.bottom, cR.left),
+				active
+			});
+		}
+
+		ribbons = next;
+	}
+
+	function updateScrollActive() {
+		if (!leftScrollEl || !containerEl) return;
+		const lv = relRect(leftScrollEl);
+		if (!lv) return;
+		const centerY = (lv.top + lv.bottom) / 2;
+
+		let best: string | number | null = null;
+		let bestDist = Infinity;
+
+		for (const link of links) {
+			const startEl = containerEl.querySelector(`[data-left-id="${link.leftStartId}"]`);
+			const endEl = containerEl.querySelector(`[data-left-id="${link.leftEndId}"]`);
+			if (!startEl && !endEl) continue;
+			const top = (startEl ? relRect(startEl)?.top : null) ?? (relRect(endEl)?.top ?? 0);
+			const bot = (endEl ? relRect(endEl)?.bottom : null) ?? (relRect(startEl)?.bottom ?? 0);
+			const mid = (top + bot) / 2;
+			const dist = Math.abs(mid - centerY);
+			if (dist < bestDist) { bestDist = dist; best = link.rightId; }
+		}
+
+		if (best !== scrollActiveId) {
+			scrollActiveId = best;
+			onActiveChange?.(resolvedActiveId);
+		}
+	}
+
+	let raf = 0;
+	function schedule() {
+		if (raf) return;
+		raf = requestAnimationFrame(() => {
+			raf = 0;
+			updateScrollActive();
+			recompute();
+		});
+	}
+
+	$effect(() => {
+		// Re-run geometry whenever these reactive dependencies change
+		resolvedActiveId; leftItems; rightItems; links;
+		schedule();
+	});
+
+	$effect(() => {
+		if (!containerEl) return;
+		const ro = new ResizeObserver(schedule);
+		ro.observe(containerEl);
+		const onScroll = () => schedule();
+		leftScrollEl?.addEventListener('scroll', onScroll, { passive: true });
+		window.addEventListener('resize', schedule);
+		schedule();
+		return () => {
+			ro.disconnect();
+			leftScrollEl?.removeEventListener('scroll', onScroll);
+			window.removeEventListener('resize', schedule);
+		};
+	});
+
+	// ── Interaction ────────────────────────────────────────────────────────────
+
+	function onLeftHover(leftId: string | number | null) {
+		if (leftId === null) { hoverActiveId = null; return; }
+		const link = links.find((l) => {
+			// Check if leftId falls within this link's range
+			const startIdx = leftIdxMap.get(l.leftStartId) ?? -1;
+			const endIdx = leftIdxMap.get(l.leftEndId) ?? -1;
+			const thisIdx = leftIdxMap.get(leftId) ?? -1;
+			return thisIdx >= startIdx && thisIdx <= endIdx;
+		});
+		hoverActiveId = link?.rightId ?? null;
+	}
+
+	function onRightHover(rightId: string | number | null) {
+		hoverActiveId = rightId;
+	}
+
+	/** Scroll the left column so the start of this right item's range is visible. */
+	export function scrollToRight(rightId: string | number) {
+		const link = links.find((l) => l.rightId === rightId);
+		if (!link || !containerEl) return;
+		const startEl = containerEl.querySelector(`[data-left-id="${link.leftStartId}"]`) as HTMLElement | null;
+		startEl?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+	}
+
+	/** Scroll the left column to center the start of this right item's range. */
+	export function scrollToLeft(leftId: string | number) {
+		if (!containerEl) return;
+		const el = containerEl.querySelector(`[data-left-id="${leftId}"]`) as HTMLElement | null;
+		el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+	}
+</script>
+
+<div
+	class="lc-wrap"
+	class:lc-compact={compact}
+	bind:this={containerEl}
+>
+	<!-- SVG ribbon layer (behind both columns) -->
+	<svg
+		class="lc-svg"
+		width={svgW}
+		height={svgH}
+		viewBox="0 0 {svgW} {svgH}"
+		aria-hidden="true"
+	>
+		<defs>
+			{#each ribbons as r (r.id)}
+				<linearGradient id="lc-grad-{r.id}" x1="0" y1="0" x2="1" y2="0">
+					<stop
+						offset="0%"
+						stop-color={r.accent}
+						stop-opacity={r.active ? 0.55 : 0.10}
+					/>
+					<stop
+						offset="100%"
+						stop-color={r.accent}
+						stop-opacity={r.active ? 0.30 : 0.06}
+					/>
+				</linearGradient>
+			{/each}
+		</defs>
+		{#each ribbons as r (r.id)}
+			<path
+				d={r.path}
+				fill="url(#lc-grad-{r.id})"
+				stroke={r.accent}
+				stroke-opacity={r.active ? 0.8 : 0.12}
+				stroke-width={r.active ? 1.5 : 0.75}
+				class="lc-ribbon"
+				class:lc-ribbon-active={r.active}
+			/>
+		{/each}
+	</svg>
+
+	<!-- LEFT column (the "many") -->
+	<div class="lc-col lc-left" bind:this={leftScrollEl}>
+		<div class="lc-col-head">
+			{#if leftHeader}
+				{@render leftHeader()}
+			{:else}
+				Left
+			{/if}
+		</div>
+		{#each leftItems as item (leftKey(item))}
+			{@const itemId = leftKey(item)}
+			{@const link = links.find((l) => {
+				const startIdx = leftIdxMap.get(l.leftStartId) ?? -1;
+				const endIdx = leftIdxMap.get(l.leftEndId) ?? -1;
+				const thisIdx = leftIdxMap.get(itemId) ?? -1;
+				return thisIdx >= startIdx && thisIdx <= endIdx;
+			})}
+			{@const isActive = link ? link.rightId === resolvedActiveId : false}
+			<div
+				data-left-id={itemId}
+				class="lc-left-item"
+				class:lc-left-item-active={isActive}
+				role="presentation"
+				onmouseenter={() => onLeftHover(itemId)}
+				onmouseleave={() => onLeftHover(null)}
+			>
+				{@render leftItem({ item, isActive })}
+			</div>
+		{/each}
+	</div>
+
+	<!-- Gutter (ribbon breathing room) -->
+	<div class="lc-gutter"></div>
+
+	<!-- RIGHT column (the anchors) -->
+	<div class="lc-col lc-right">
+		<div class="lc-col-head">
+			{#if rightHeader}
+				{@render rightHeader()}
+			{:else}
+				Right
+			{/if}
+		</div>
+		{#if rightItems.length === 0}
+			{#if empty}
+				<div class="lc-empty">{@render empty()}</div>
+			{:else}
+				<div class="lc-empty">No items.</div>
+			{/if}
+		{:else}
+			{#each rightItems as item (rightKey(item))}
+				{@const rightId = rightKey(item)}
+				{@const isActive = rightId === resolvedActiveId}
+				{@const accent = accentColor(item, isActive)}
+				<div
+					data-right-id={rightId}
+					class="lc-right-item"
+					class:lc-right-item-active={isActive}
+					style="--lc-accent:{accent}; --lc-tint:color-mix(in oklch, {accent} 10%, transparent); --lc-glow:color-mix(in oklch, {accent} 40%, transparent);"
+					role="presentation"
+					onmouseenter={() => onRightHover(rightId)}
+					onmouseleave={() => onRightHover(null)}
+					onclick={() => scrollToRight(rightId)}
+				>
+					{@render rightItem({ item, isActive })}
+				</div>
+			{/each}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.lc-wrap {
+		position: relative;
+		display: flex;
+		height: 100%;
+		min-height: 0;
+		background: var(--color-base-100, oklch(0.16 0.01 250));
+		border-radius: 0.75rem;
+		overflow: hidden;
+	}
+
+	/* SVG ribbon layer */
+	.lc-svg {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		z-index: 0;
+	}
+	.lc-ribbon {
+		transition: stroke-opacity 0.25s ease, stroke-width 0.25s ease;
+	}
+	.lc-ribbon-active {
+		filter: drop-shadow(0 0 6px var(--color-success, oklch(0.7 0.18 145)));
+	}
+
+	/* Columns */
+	.lc-col {
+		position: relative;
+		z-index: 1;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+	}
+	.lc-left {
+		flex: 1 1 0;
+		overflow-y: auto;
+		padding: 0 1rem 40vh 1rem;
+	}
+	.lc-compact .lc-left {
+		padding: 0 0.5rem 20vh 0.5rem;
+	}
+	.lc-right {
+		flex: 0 0 320px;
+		overflow-y: auto;
+		padding: 0 0.75rem 1rem 0.75rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+	.lc-gutter {
+		flex: 0 0 90px;
+	}
+
+	/* Column headings */
+	.lc-col-head {
+		position: sticky;
+		top: 0;
+		z-index: 2;
+		padding: 0.5rem 0.25rem;
+		font-family: ui-sans-serif, system-ui, sans-serif;
+		font-size: 0.65rem;
+		font-weight: 700;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+		color: var(--color-base-content, oklch(0.85 0.02 250));
+		opacity: 0.55;
+		background: linear-gradient(
+			var(--color-base-100, oklch(0.16 0.01 250)) 70%,
+			transparent
+		);
+	}
+
+	/* Left item wrapper — consumers style via snippet */
+	.lc-left-item {
+		border-radius: 0.3rem;
+		padding: 0.05rem 0.15rem;
+		margin: 0.02rem 0;
+		transition: background-color 0.2s ease, box-shadow 0.2s ease;
+	}
+	.lc-left-item-active {
+		background: color-mix(in oklch, var(--color-success, oklch(0.7 0.18 145)) 8%, transparent);
+		box-shadow: inset 2px 0 0 var(--color-success, oklch(0.7 0.18 145));
+	}
+
+	/* Right item wrapper — consumers style via snippet; provides CSS vars */
+	.lc-right-item {
+		position: relative;
+		border-radius: 0.5rem;
+		border: 1px solid color-mix(in oklch, var(--lc-accent, currentColor) 22%, transparent);
+		background: var(--lc-tint, transparent);
+		cursor: pointer;
+		transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+	}
+	.lc-right-item:hover {
+		transform: translateX(-2px);
+	}
+	.lc-right-item-active {
+		border-color: var(--lc-accent, currentColor);
+		box-shadow: 0 0 0 1px var(--lc-accent, currentColor), 0 0 18px var(--lc-glow, transparent);
+	}
+
+	.lc-empty {
+		padding: 1rem;
+		font-size: 0.78rem;
+		opacity: 0.6;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.lc-ribbon,
+		.lc-left-item,
+		.lc-right-item {
+			transition: none;
+		}
+	}
+</style>