@joewinke/jatui 0.1.23 → 0.1.24

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

@@ -1,526 +0,0 @@
-<script module lang="ts">
-	// Declared in the module script so `import type { ColumnLink } from
-	// './LinkedColumns.svelte'` resolves (instance-script exports are not module members).
-	/** 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;
-	}
-</script>
-
-<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';
-
-	// ColumnLink is declared in the module <script> above so it's importable as a module member.
-
-	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>