@joewinke/jatui 0.22.0 → 0.24.0

package/dist/components/infiniteGridLoader.js

@@ -0,0 +1,141 @@
+/**
+ * Cursor-paged loader behind InfiniteGrid / InfiniteSearchGrid (jatui-m4uz3.4).
+ *
+ * Ported from chimaro's InfiniteMediaGrid/InfiniteSearchGrid, where the paging
+ * machinery was welded to Supabase + media types. This is the machinery alone,
+ * DOM-free and framework-free so it can be unit-tested under node:test:
+ *
+ *   - ONE request in flight per generation (the fast-scroll double-fire guard —
+ *     an IntersectionObserver can call back twice before `loading` flips).
+ *   - `reset()` bumps a generation and aborts the in-flight request. A response
+ *     that lands for an older generation is DROPPED, so a slow page for query
+ *     "ca" can never be appended under the results for "cat" (the cursor race).
+ *   - Items are de-duplicated by key across pages (offset paging over a list
+ *     that grew between requests re-sends rows).
+ *   - Empty and exhausted are distinct states: `empty` = done with zero items,
+ *     `exhausted` = done with some. A page that returns no items AND repeats the
+ *     cursor it was given is treated as the end, never as "try again".
+ *   - A failed page parks in `error`; nothing auto-retries (the observer would
+ *     hammer a dead endpoint). `retry()` re-requests the same cursor.
+ */
+function defaultKey(item) {
+    if (item && typeof item === 'object' && 'id' in item)
+        return item.id;
+    return item;
+}
+function isAbort(err) {
+    return (typeof err === 'object' &&
+        err !== null &&
+        err.name === 'AbortError');
+}
+export function createInfiniteLoader(opts) {
+    let load = opts.load;
+    const getKey = opts.getKey ?? defaultKey;
+    let seen = new Set();
+    let controller = null;
+    let destroyed = false;
+    let state = fresh(0);
+    function fresh(generation) {
+        return {
+            items: [],
+            status: 'idle',
+            cursor: null,
+            initialized: false,
+            empty: false,
+            exhausted: false,
+            error: undefined,
+            total: undefined,
+            generation,
+            lastPageCount: 0
+        };
+    }
+    function commit(patch) {
+        const next = { ...state, ...patch };
+        next.empty = next.status === 'done' && next.items.length === 0;
+        next.exhausted = next.status === 'done' && next.items.length > 0;
+        state = next;
+        if (!destroyed)
+            opts.onChange?.(state);
+    }
+    async function fetchPage() {
+        const generation = state.generation;
+        const sentCursor = state.cursor;
+        const ctrl = new AbortController();
+        controller = ctrl;
+        commit({ status: 'loading', error: undefined });
+        let page;
+        try {
+            page = await load(sentCursor, { signal: ctrl.signal });
+        }
+        catch (err) {
+            if (generation !== state.generation || destroyed)
+                return; // superseded
+            if (controller === ctrl)
+                controller = null;
+            if (isAbort(err)) {
+                commit({ status: 'idle' });
+                return;
+            }
+            commit({ status: 'error', error: err, initialized: true });
+            return;
+        }
+        // The cursor race: this page belongs to a generation the grid has left.
+        if (generation !== state.generation || destroyed || ctrl.signal.aborted)
+            return;
+        if (controller === ctrl)
+            controller = null;
+        const incoming = Array.isArray(page?.items) ? page.items : [];
+        const added = [];
+        for (const item of incoming) {
+            const key = getKey(item);
+            if (seen.has(key))
+                continue;
+            seen.add(key);
+            added.push(item);
+        }
+        const next = page?.nextCursor ?? null;
+        // No progress = end. A server that keeps handing back the same cursor with
+        // nothing new would otherwise loop the observer forever.
+        const stalled = added.length === 0 && next !== null && Object.is(next, sentCursor);
+        const done = next === null || stalled;
+        commit({
+            items: added.length ? [...state.items, ...added] : state.items,
+            cursor: done ? sentCursor : next,
+            status: done ? 'done' : 'idle',
+            initialized: true,
+            total: page?.total ?? state.total,
+            lastPageCount: added.length
+        });
+    }
+    return {
+        get state() {
+            return state;
+        },
+        loadNext() {
+            if (destroyed || state.status !== 'idle')
+                return Promise.resolve();
+            return fetchPage();
+        },
+        retry() {
+            if (destroyed || state.status !== 'error')
+                return Promise.resolve();
+            return fetchPage();
+        },
+        reset() {
+            controller?.abort();
+            controller = null;
+            seen = new Set();
+            state = fresh(state.generation + 1);
+            if (!destroyed)
+                opts.onChange?.(state);
+        },
+        setLoad(next) {
+            load = next;
+        },
+        destroy() {
+            destroyed = true;
+            controller?.abort();
+            controller = null;
+        }
+    };
+}

package/dist/components/linked-columns/LinkedColumns.svelte

@@ -1,17 +1,3 @@
-<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.
@@ -64,8 +50,7 @@
 	 */
 
 	import type { Snippet } from 'svelte';
-
-	// ColumnLink is declared in the module <script> above so it's importable as a module member.
+	import type { ColumnLink } from './types.js';
 
 	let {
 		leftItems,
@@ -410,12 +395,15 @@
 </div>
 
 <style>
+	/* Theme tokens (jatui-is2ow.3): fallbacks chain token → token (never a
+	   hard-coded oklch). --n-16 is a jat-IDE neutral; its inline fallback keeps
+	   standalone consumers (no app.css) rendering the same value. */
 	.lc-wrap {
 		position: relative;
 		display: flex;
 		height: 100%;
 		min-height: 0;
-		background: var(--color-base-100, oklch(0.16 0.01 250));
+		background: var(--color-base-100, var(--color-base-300));
 		border-radius: 0.75rem;
 		overflow: hidden;
 	}
@@ -431,7 +419,7 @@
 		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)));
+		filter: drop-shadow(0 0 6px var(--color-success));
 	}
 
 	/* Columns */
@@ -473,10 +461,10 @@
 		font-weight: 700;
 		letter-spacing: 0.08em;
 		text-transform: uppercase;
-		color: var(--color-base-content, oklch(0.85 0.02 250));
+		color: var(--color-base-content);
 		opacity: 0.55;
 		background: linear-gradient(
-			var(--color-base-100, oklch(0.16 0.01 250)) 70%,
+			var(--color-base-100, var(--n-16, oklch(0.16 0.01 250))) 70%,
 			transparent
 		);
 	}
@@ -489,8 +477,8 @@
 		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));
+		background: color-mix(in oklch, var(--color-success) 8%, transparent);
+		box-shadow: inset 2px 0 0 var(--color-success);
 	}
 
 	/* Right item wrapper — consumers style via snippet; provides CSS vars */

package/dist/components/linked-columns/LinkedColumns.svelte.d.ts

@@ -1,12 +1,3 @@
-/** 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;
-}
 /**
      * LinkedColumns — generic two-column ink-up ribbon primitive.
      *
@@ -57,6 +48,7 @@ export interface ColumnLink {
      * ```
      */
 import type { Snippet } from 'svelte';
+import type { ColumnLink } from './types.js';
 declare function $$render<L extends {
     id: string | number;
 }, R extends {

package/dist/components/linked-columns/types.d.ts

@@ -0,0 +1,9 @@
+/** 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;
+}

package/dist/components/linked-columns/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/replay/ChapterTimeline.svelte

@@ -11,7 +11,12 @@
 	 * on the full IDE codebase (jat-jj79f.16 G1).
 	 *
 	 * The IDE-specific `SESSION_STATE_VISUALS` import has been replaced with
-	 * an inline `SIGNAL_COLORS` map that covers the same canonical signal types.
+	 * an inline `SIGNAL_COLORS` map that covers the same canonical signal types,
+	 * plus an optional `stateVisual(state)` resolver prop (jatui-is2ow.4): a
+	 * caller — e.g. the jat IDE with its own SESSION_STATE_VISUALS — can supply
+	 * its own colour resolver and the built-in palette is only used as the
+	 * default / fallback. `ChapterBlock.itemRange` matches the IDE's WorkBlock
+	 * shape so IDE callers can pass blocks straight through without remapping.
 	 */
 
 	export interface ChapterBlock {
@@ -22,17 +27,20 @@
 		filesTouched: { path: string; how: string }[];
 		checkpoint: { timestamp: string | null };
 		summary: string | null;
+		/** Index span of the transcript items this block owns (IDE WorkBlock shape). */
+		itemRange?: { start: number; end: number };
 	}
 
-	/** Minimal color descriptors for each canonical signal state. */
-	interface SignalColor {
+	/** Colour descriptors the timeline needs per canonical signal state. */
+	export interface ChapterStateVisual {
 		accent: string;
 		bgTint: string;
 		glow: string;
 		shortLabel: string;
 	}
 
-	const SIGNAL_COLORS: Record<string, SignalColor> = {
+	/** Default palette for each canonical signal state — kept for standalone consumers without a resolver. */
+	const SIGNAL_COLORS: Record<string, ChapterStateVisual> = {
 		starting:         { accent: 'oklch(0.70 0.16 250)', bgTint: 'oklch(0.70 0.16 250 / 0.10)', glow: 'oklch(0.70 0.16 250 / 0.45)', shortLabel: '🚀 Starting' },
 		working:          { accent: 'oklch(0.75 0.16 85)',  bgTint: 'oklch(0.75 0.16 85 / 0.08)',  glow: 'oklch(0.75 0.16 85 / 0.45)',  shortLabel: '🔧 Working' },
 		'needs-input':    { accent: 'oklch(0.68 0.19 25)',  bgTint: 'oklch(0.68 0.19 25 / 0.08)',  glow: 'oklch(0.68 0.19 25 / 0.4)',   shortLabel: '❓ Needs Input' },
@@ -49,10 +57,19 @@
 		blocks = [],
 		activeBlockId = null,
 		onSeek = (_blockId: string) => {},
+		stateVisual,
 	}: {
 		blocks: ChapterBlock[];
 		activeBlockId: string | null;
 		onSeek?: (blockId: string) => void;
+		/**
+		 * Optional colour resolver: canonical state name → visual. Receives the
+		 * NORMALIZED state (e.g. `'needs-input'`, not the raw `'needs_input'`),
+		 * so a caller can pass `(state) => SESSION_STATE_VISUALS[state]` directly.
+		 * Return `undefined` for unknown states — the built-in palette (then
+		 * idle) is used as the fallback, matching the IDE's `?? idle` behaviour.
+		 */
+		stateVisual?: (state: string) => ChapterStateVisual | undefined;
 	} = $props();
 
 	function rawTypeToState(raw: string): string {
@@ -65,8 +82,9 @@
 		}
 	}
 
-	function visual(signalType: string): SignalColor {
-		return SIGNAL_COLORS[rawTypeToState(signalType)] ?? DEFAULT_COLOR;
+	function visual(signalType: string): ChapterStateVisual {
+		const state = rawTypeToState(signalType);
+		return stateVisual?.(state) ?? SIGNAL_COLORS[state] ?? DEFAULT_COLOR;
 	}
 
 	function glyph(signalType: string): string {
@@ -183,7 +201,7 @@
 
 	.empty {
 		font-size: 0.75rem;
-		color: oklch(0.55 0.02 250);
+		color: oklch(from var(--color-base-content) l c h / 60%);
 		padding: 0.5rem;
 		text-align: center;
 	}
@@ -193,8 +211,8 @@
 		height: 2.25rem;
 		border-radius: 0.5rem;
 		overflow: hidden;
-		background: oklch(0.14 0.01 250);
-		border: 1px solid oklch(0.22 0.02 250);
+		background: var(--color-base-300);
+		border: 1px solid var(--color-base-100);
 		gap: 1px;
 	}
 
@@ -203,9 +221,9 @@
 		align-items: center;
 		gap: 0.3rem;
 		padding: 0 0.5rem;
-		background: var(--chapter-tint, oklch(0.18 0.01 250));
+		background: var(--chapter-tint, var(--color-base-200));
 		border: none;
-		border-right: 1px solid oklch(0.20 0.02 250);
+		border-right: 1px solid var(--color-base-100);
 		cursor: pointer;
 		transition: background 0.12s ease, box-shadow 0.12s ease;
 		overflow: hidden;
@@ -218,12 +236,12 @@
 	}
 
 	.chapter:hover {
-		background: color-mix(in oklch, var(--chapter-accent) 18%, oklch(0.16 0.01 250));
+		background: color-mix(in oklch, var(--chapter-accent) 18%, var(--color-base-300));
 		box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--chapter-accent) 40%, transparent);
 	}
 
 	.chapter.active {
-		background: color-mix(in oklch, var(--chapter-accent) 22%, oklch(0.16 0.01 250));
+		background: color-mix(in oklch, var(--chapter-accent) 22%, var(--color-base-300));
 		box-shadow:
 			inset 0 0 0 2px color-mix(in oklch, var(--chapter-accent) 70%, transparent),
 			0 0 12px color-mix(in oklch, var(--chapter-glow) 30%, transparent);
@@ -247,20 +265,20 @@
 
 	.ch-label {
 		font-size: 0.7rem;
-		color: oklch(0.78 0.04 250);
+		color: oklch(from var(--color-base-content) l c h / 90%);
 		overflow: hidden;
 		text-overflow: ellipsis;
 		min-width: 0;
 	}
 
 	.chapter.active .ch-label {
-		color: oklch(0.92 0.06 250);
+		color: oklch(from var(--color-primary) 0.92 0.06 h);
 		font-weight: 600;
 	}
 
 	.ch-meta {
 		font-size: 0.6rem;
-		color: oklch(0.50 0.02 250);
+		color: oklch(from var(--color-base-content) l c h / 55%);
 		margin-left: auto;
 		flex-shrink: 0;
 		font-family: monospace;
@@ -273,10 +291,10 @@
 		gap: 0.6rem;
 		padding: 0.25rem 0.5rem;
 		font-size: 0.72rem;
-		color: oklch(0.70 0.04 250);
-		background: oklch(0.15 0.01 250);
+		color: oklch(from var(--color-base-content) l c h / 80%);
+		background: var(--color-base-300);
 		border-radius: 0.375rem;
-		border: 1px solid oklch(0.22 0.02 250);
+		border: 1px solid var(--color-base-100);
 		min-height: 1.75rem;
 		flex-wrap: wrap;
 		gap-y: 0.15rem;
@@ -285,7 +303,7 @@
 	.ch-detail-idx {
 		font-size: 0.65rem;
 		font-family: monospace;
-		color: oklch(0.50 0.02 250);
+		color: oklch(from var(--color-base-content) l c h / 55%);
 		flex-shrink: 0;
 	}
 
@@ -297,7 +315,7 @@
 	}
 
 	.ch-detail-summary.muted {
-		color: oklch(0.55 0.02 250);
+		color: oklch(from var(--color-base-content) l c h / 60%);
 		font-style: italic;
 	}
 
@@ -310,17 +328,17 @@
 	.ch-file {
 		font-size: 0.64rem;
 		font-family: monospace;
-		background: oklch(0.19 0.02 250);
-		border: 1px solid oklch(0.25 0.02 250);
+		background: var(--color-base-200);
+		border: 1px solid var(--color-base-100);
 		border-radius: 0.2rem;
 		padding: 0.1rem 0.35rem;
-		color: oklch(0.70 0.08 200);
+		color: var(--color-info);
 	}
 
 	.ch-detail-ts {
 		font-size: 0.62rem;
 		font-family: monospace;
-		color: oklch(0.48 0.02 250);
+		color: oklch(from var(--color-base-content) l c h / 50%);
 		flex-shrink: 0;
 	}
 </style>

package/dist/components/replay/ChapterTimeline.svelte.d.ts

@@ -10,7 +10,12 @@
  * on the full IDE codebase (jat-jj79f.16 G1).
  *
  * The IDE-specific `SESSION_STATE_VISUALS` import has been replaced with
- * an inline `SIGNAL_COLORS` map that covers the same canonical signal types.
+ * an inline `SIGNAL_COLORS` map that covers the same canonical signal types,
+ * plus an optional `stateVisual(state)` resolver prop (jatui-is2ow.4): a
+ * caller — e.g. the jat IDE with its own SESSION_STATE_VISUALS — can supply
+ * its own colour resolver and the built-in palette is only used as the
+ * default / fallback. `ChapterBlock.itemRange` matches the IDE's WorkBlock
+ * shape so IDE callers can pass blocks straight through without remapping.
  */
 export interface ChapterBlock {
     id: string;
@@ -28,11 +33,31 @@ export interface ChapterBlock {
         timestamp: string | null;
     };
     summary: string | null;
+    /** Index span of the transcript items this block owns (IDE WorkBlock shape). */
+    itemRange?: {
+        start: number;
+        end: number;
+    };
+}
+/** Colour descriptors the timeline needs per canonical signal state. */
+export interface ChapterStateVisual {
+    accent: string;
+    bgTint: string;
+    glow: string;
+    shortLabel: string;
 }
 type $$ComponentProps = {
     blocks: ChapterBlock[];
     activeBlockId: string | null;
     onSeek?: (blockId: string) => void;
+    /**
+     * Optional colour resolver: canonical state name → visual. Receives the
+     * NORMALIZED state (e.g. `'needs-input'`, not the raw `'needs_input'`),
+     * so a caller can pass `(state) => SESSION_STATE_VISUALS[state]` directly.
+     * Return `undefined` for unknown states — the built-in palette (then
+     * idle) is used as the fallback, matching the IDE's `?? idle` behaviour.
+     */
+    stateVisual?: (state: string) => ChapterStateVisual | undefined;
 };
 declare const ChapterTimeline: import("svelte").Component<$$ComponentProps, {}, "">;
 type ChapterTimeline = ReturnType<typeof ChapterTimeline>;

package/dist/components/table/columnResize.d.ts

@@ -0,0 +1,38 @@
+export interface ColumnResizeOptions {
+    /** When true, the resize handle is not added and nothing happens. Default: false */
+    disabled?: boolean;
+    /** Minimum column width in pixels. Default: 40 */
+    minWidth?: number;
+    /** Called on mousedown — use this to show the guide line (e.g. set resizeGuideX state) */
+    onResizeStart?: (initialX: number) => void;
+    /** Called on every mousemove with the new width */
+    onResize: (width: number) => void;
+    /** Called on mouseup with the final width — use this to save settings and hide the guide */
+    onResizeEnd?: (width: number) => void;
+    /**
+     * Return the container element that holds the `.resize-guide` element.
+     * If provided, the guide line position is updated on each mousemove via direct DOM manipulation,
+     * avoiding reactive overhead.
+     */
+    getGuideContainer?: () => HTMLElement | null;
+}
+/**
+ * Svelte action that attaches a column-resize handle to a `<th>` (or any element).
+ *
+ * Usage:
+ * ```svelte
+ * <th use:columnResize={{
+ *   minWidth: col.minWidth,
+ *   onResize: (w) => { columnWidths[col.id] = w; },
+ *   onResizeEnd: (w) => { saveColumnSettings(); },
+ *   getGuideContainer: () => tableContainerEl,
+ * }}>
+ * ```
+ *
+ * The action appends a 4px-wide resize handle div at the right edge of the host element.
+ * Dragging it fires `onResize` continuously and `onResizeEnd` on mouse-up.
+ */
+export declare function columnResize(node: HTMLElement, options: ColumnResizeOptions): {
+    update(opts: ColumnResizeOptions): void;
+    destroy(): void;
+};

package/dist/components/table/columnResize.js

@@ -0,0 +1,117 @@
+/**
+ * Svelte action that attaches a column-resize handle to a `<th>` (or any element).
+ *
+ * Usage:
+ * ```svelte
+ * <th use:columnResize={{
+ *   minWidth: col.minWidth,
+ *   onResize: (w) => { columnWidths[col.id] = w; },
+ *   onResizeEnd: (w) => { saveColumnSettings(); },
+ *   getGuideContainer: () => tableContainerEl,
+ * }}>
+ * ```
+ *
+ * The action appends a 4px-wide resize handle div at the right edge of the host element.
+ * Dragging it fires `onResize` continuously and `onResizeEnd` on mouse-up.
+ */
+export function columnResize(node, options) {
+    let opts = options;
+    // If disabled, return a no-op handle
+    if (opts.disabled) {
+        return {
+            update(newOptions) { opts = newOptions; },
+            destroy() { },
+        };
+    }
+    // Build the resize handle element
+    const handle = document.createElement('div');
+    handle.className = 'col-resize-handle';
+    handle.style.cssText = [
+        'position: absolute',
+        'right: 0',
+        'top: 0',
+        'bottom: 0',
+        'width: 5px',
+        'cursor: col-resize',
+        'z-index: 2',
+    ].join(';');
+    // Make the host element position-relative if it isn't already
+    const hostPosition = getComputedStyle(node).position;
+    if (hostPosition === 'static') {
+        node.style.position = 'relative';
+    }
+    node.appendChild(handle);
+    // Resize tracking state
+    let startX = 0;
+    let startWidth = 0;
+    let currentWidth = 0;
+    let resizing = false;
+    function updateGuide(clientX) {
+        const container = opts.getGuideContainer?.();
+        if (!container)
+            return;
+        const guide = container.querySelector('.resize-guide');
+        if (!guide)
+            return;
+        const rect = container.getBoundingClientRect();
+        guide.style.left = `${clientX - rect.left + container.scrollLeft}px`;
+    }
+    function onMouseMove(e) {
+        const minWidth = opts.minWidth ?? 40;
+        const diff = e.clientX - startX;
+        const newWidth = Math.max(minWidth, startWidth + diff);
+        currentWidth = newWidth;
+        opts.onResize(newWidth);
+        updateGuide(e.clientX);
+    }
+    function onMouseUp() {
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        // Call onResizeEnd — the parent is responsible for clearing the guide line
+        // (typically by setting resizeGuideX = null in its onResizeEnd handler)
+        opts.onResizeEnd?.(currentWidth);
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+        // Suppress the click event that fires after mouseup on the host <th>,
+        // which would otherwise trigger a column sort.
+        resizing = true;
+        requestAnimationFrame(() => { resizing = false; });
+    }
+    function onMouseDown(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        startX = e.clientX;
+        startWidth = node.offsetWidth;
+        currentWidth = startWidth;
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+        opts.onResizeStart?.(e.clientX);
+        updateGuide(e.clientX);
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    }
+    // Suppress click events on the host element that fire right after a resize ends.
+    // Without this, mouseup after dragging the resize handle triggers the host's onclick (e.g. sort).
+    function onHostClick(e) {
+        if (resizing) {
+            e.stopImmediatePropagation();
+            e.preventDefault();
+        }
+    }
+    handle.addEventListener('mousedown', onMouseDown);
+    node.addEventListener('click', onHostClick, true);
+    return {
+        update(newOptions) {
+            opts = newOptions;
+        },
+        destroy() {
+            handle.removeEventListener('mousedown', onMouseDown);
+            node.removeEventListener('click', onHostClick, true);
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+            if (handle.parentNode === node) {
+                node.removeChild(handle);
+            }
+        },
+    };
+}

package/dist/components/table/index.d.ts

@@ -1,3 +1,5 @@
 export { default as DataTable } from './DataTable.svelte';
 export { flexRender } from './flexRender';
+export { columnResize } from './columnResize';
+export type { ColumnResizeOptions } from './columnResize';
 export type { DataTableProps, SelectionEvent, ColumnDef, Row } from './types';

package/dist/components/table/index.js

@@ -1,3 +1,4 @@
 // Subpath entry: @joewinke/jatui/table — requires peer @tanstack/table-core.
 export { default as DataTable } from './DataTable.svelte';
 export { flexRender } from './flexRender';
+export { columnResize } from './columnResize';