@joewinke/jatui 0.1.29 → 0.1.30

package/dist/dnd/DropIndicator.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	/**
+	 * Drop-edge indicator — Svelte port of pdnd's react-drop-indicator Line.
+	 * Render conditionally: {#if closestEdge}<DropIndicator edge={closestEdge} gap="0.5rem" />{/if}
+	 * Host item wrapper MUST be `position: relative`.
+	 */
+	import type { Edge } from './types';
+
+	let {
+		edge,
+		gap = '0px',
+		indent = '0px',
+		type = 'terminal',
+		appearance = 'default',
+	}: {
+		edge: Edge;
+		gap?: string;
+		indent?: string;
+		type?: 'terminal' | 'no-terminal' | 'terminal-no-bleed';
+		appearance?: 'default' | 'warning';
+	} = $props();
+
+	const orientation = $derived(edge === 'top' || edge === 'bottom' ? 'horizontal' : 'vertical');
+
+	const lineMainAxisStart = $derived(
+		type === 'terminal'
+			? `calc(var(--terminal-radius) + ${indent})`
+			: type === 'terminal-no-bleed'
+				? `calc(var(--terminal-diameter) + ${indent})`
+				: indent,
+	);
+</script>
+
+<div
+	class="drop-indicator {orientation} edge-{edge}"
+	style:--stroke-color={appearance === 'warning' ? 'var(--color-warning)' : 'var(--color-primary)'}
+	style:--main-axis-offset="calc(-0.5 * ({gap} + var(--stroke-width)))"
+	style:--line-main-axis-start={lineMainAxisStart}
+	style:--terminal-display={type === 'no-terminal' ? 'none' : 'block'}
+></div>
+
+<style>
+	.drop-indicator {
+		--stroke-width: 2px;
+		--terminal-diameter: calc(var(--stroke-width) * 4);
+		--terminal-radius: calc(var(--terminal-diameter) / 2);
+		--terminal-main-axis-start: calc(-1 * var(--terminal-diameter));
+		--terminal-cross-axis-offset: calc((var(--stroke-width) - var(--terminal-diameter)) / 2);
+
+		display: block;
+		position: absolute;
+		z-index: 1;
+		pointer-events: none;
+		background: var(--stroke-color);
+	}
+
+	.drop-indicator::before {
+		display: var(--terminal-display);
+		content: '';
+		position: absolute;
+		box-sizing: border-box;
+		width: var(--terminal-diameter);
+		height: var(--terminal-diameter);
+		border: var(--stroke-width) solid var(--stroke-color);
+		border-radius: 50%;
+	}
+
+	.horizontal {
+		height: var(--stroke-width);
+		inset-inline-start: var(--line-main-axis-start);
+		inset-inline-end: 0;
+	}
+
+	.horizontal::before {
+		inset-inline-start: var(--terminal-main-axis-start);
+	}
+
+	.vertical {
+		width: var(--stroke-width);
+		top: var(--line-main-axis-start);
+		bottom: 0;
+	}
+
+	.vertical::before {
+		top: var(--terminal-main-axis-start);
+	}
+
+	.edge-top {
+		top: var(--main-axis-offset);
+	}
+
+	.edge-top::before {
+		top: var(--terminal-cross-axis-offset);
+	}
+
+	.edge-bottom {
+		bottom: var(--main-axis-offset);
+	}
+
+	.edge-bottom::before {
+		bottom: var(--terminal-cross-axis-offset);
+	}
+
+	.edge-left {
+		left: var(--main-axis-offset);
+	}
+
+	.edge-left::before {
+		left: var(--terminal-cross-axis-offset);
+	}
+
+	.edge-right {
+		right: var(--main-axis-offset);
+	}
+
+	.edge-right::before {
+		right: var(--terminal-cross-axis-offset);
+	}
+</style>

package/dist/dnd/DropIndicator.svelte.d.ts

@@ -0,0 +1,16 @@
+/**
+     * Drop-edge indicator — Svelte port of pdnd's react-drop-indicator Line.
+     * Render conditionally: {#if closestEdge}<DropIndicator edge={closestEdge} gap="0.5rem" />{/if}
+     * Host item wrapper MUST be `position: relative`.
+     */
+import type { Edge } from './types';
+type $$ComponentProps = {
+    edge: Edge;
+    gap?: string;
+    indent?: string;
+    type?: 'terminal' | 'no-terminal' | 'terminal-no-bleed';
+    appearance?: 'default' | 'warning';
+};
+declare const DropIndicator: import("svelte").Component<$$ComponentProps, {}, "">;
+type DropIndicator = ReturnType<typeof DropIndicator>;
+export default DropIndicator;

package/dist/dnd/announce.d.ts

@@ -0,0 +1 @@
+export { announce, cleanup as cleanupAnnouncements } from '@atlaskit/pragmatic-drag-and-drop-live-region';

package/dist/dnd/announce.js

@@ -0,0 +1 @@
+export { announce, cleanup as cleanupAnnouncements } from '@atlaskit/pragmatic-drag-and-drop-live-region';

package/dist/dnd/autoScroll.d.ts

@@ -0,0 +1,7 @@
+import type { Action } from 'svelte/action';
+export interface AutoScrollParams {
+    types?: string[];
+    axis?: 'vertical' | 'horizontal' | 'all';
+    speed?: 'standard' | 'fast';
+}
+export declare const autoScroll: Action<HTMLElement, AutoScrollParams | undefined>;

package/dist/dnd/autoScroll.js

@@ -0,0 +1,25 @@
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+export const autoScroll = (node, params) => {
+    let current = params ?? {};
+    function register() {
+        return autoScrollForElements({
+            element: node,
+            canScroll: ({ source }) => {
+                if (!current.types?.length)
+                    return true;
+                return current.types.includes(source.data.type);
+            },
+            getAllowedAxis: () => current.axis ?? 'all',
+            getConfiguration: () => ({ maxScrollSpeed: current.speed ?? 'standard' }),
+        });
+    }
+    let cleanup = register();
+    return {
+        update(next) {
+            current = next ?? {};
+            cleanup();
+            cleanup = register();
+        },
+        destroy: () => cleanup(),
+    };
+};

package/dist/dnd/createDndBoard.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { type ItemDragData, type ContainerDropData } from './types';
+import type { DraggableParams } from './draggable';
+import type { DropTargetParams } from './dropTarget';
+export interface BoardMove<TItem> {
+    item: TItem;
+    from: {
+        container: string;
+        index: number;
+    };
+    to: {
+        container: string;
+        index: number;
+    };
+}
+export interface DndBoardOptions<TItem> {
+    type: string;
+    items: () => ReadonlyMap<string, readonly TItem[]> | Record<string, readonly TItem[]>;
+    key: (item: TItem) => string;
+    commit: (move: BoardMove<TItem>) => Promise<void>;
+    onError?: (error: unknown, move: BoardMove<TItem>) => void;
+    announce?: (move: BoardMove<TItem>) => string;
+    hover?: 'indicator' | 'shadow';
+    edges?: Edge[];
+}
+export declare function createDndBoard<TItem>(opts: DndBoardOptions<TItem>): {
+    get: (container: string) => readonly TItem[];
+    containers: () => string[];
+    readonly dragging: {
+        key: string;
+        item: TItem;
+        from: BoardMove<TItem>["from"];
+    } | null;
+    readonly proposal: {
+        container: string;
+        index: number;
+    } | null;
+    isSource: (item: TItem) => boolean;
+    isShadow: (item: TItem) => boolean;
+    item: (item: TItem, container: string, index: number) => DraggableParams<ItemDragData<TItem>>;
+    itemTarget: (container: string, index: number) => DropTargetParams<ContainerDropData>;
+    containerTarget: (container: string) => DropTargetParams<ContainerDropData>;
+};

package/dist/dnd/createDndBoard.svelte.js

@@ -0,0 +1,183 @@
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { extractClosestEdge, attachClosestEdge, } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { SvelteMap } from 'svelte/reactivity';
+import { announce } from './announce';
+import { makeItemData, isItemData, } from './types';
+const SHADOW_KEY = '__dnd-shadow__';
+export function createDndBoard(opts) {
+    const edges = opts.edges ?? ['top', 'bottom'];
+    const hover = opts.hover ?? 'indicator';
+    const mirror = new SvelteMap();
+    let dragging = $state(null);
+    let proposal = $state(null);
+    const seq = new Map();
+    let inFlight = 0;
+    let seedQueued = false;
+    function seed() {
+        mirror.clear();
+        const src = opts.items();
+        const entries = src instanceof Map
+            ? src
+            : new Map(Object.entries(src));
+        for (const [id, list] of entries)
+            mirror.set(id, [...list]);
+    }
+    $effect(() => {
+        opts.items();
+        if (dragging || inFlight > 0) {
+            seedQueued = true;
+            return;
+        }
+        seed();
+    });
+    function placementFrom(dropTargets) {
+        const inner = dropTargets[0];
+        if (!inner)
+            return null;
+        const d = inner.data;
+        if (typeof d.container !== 'string')
+            return null;
+        const list = mirror.get(d.container) ?? [];
+        if (typeof d.index !== 'number')
+            return { container: d.container, index: list.length };
+        const edge = extractClosestEdge(d);
+        const after = edge === 'bottom' || edge === 'right';
+        return { container: d.container, index: d.index + (after ? 1 : 0) };
+    }
+    function syncShadow(next) {
+        for (const [cid, list] of mirror) {
+            const idx = list.findIndex((item) => item[SHADOW_KEY]);
+            if (idx !== -1) {
+                list.splice(idx, 1);
+                mirror.set(cid, list);
+                break;
+            }
+        }
+        if (!next || !dragging)
+            return;
+        const list = [...(mirror.get(next.container) ?? [])];
+        const shadowItem = { [SHADOW_KEY]: true, key: `${SHADOW_KEY}-${dragging.key}` };
+        list.splice(Math.min(next.index, list.length), 0, shadowItem);
+        mirror.set(next.container, list);
+    }
+    function consider(next) {
+        if (next?.container === proposal?.container && next?.index === proposal?.index)
+            return;
+        proposal = next;
+        if (hover === 'shadow')
+            syncShadow(next);
+    }
+    function applyToMirror(move) {
+        const fromList = [...(mirror.get(move.from.container) ?? [])];
+        const toList = move.from.container === move.to.container
+            ? fromList
+            : [...(mirror.get(move.to.container) ?? [])];
+        const srcIdx = fromList.findIndex((it) => opts.key(it) === opts.key(move.item));
+        if (srcIdx === -1)
+            return;
+        fromList.splice(srcIdx, 1);
+        let destIdx = move.to.index;
+        if (move.from.container === move.to.container && move.to.index > move.from.index) {
+            destIdx = Math.max(0, destIdx - 1);
+        }
+        toList.splice(Math.min(destIdx, toList.length), 0, move.item);
+        mirror.set(move.from.container, fromList);
+        if (move.from.container !== move.to.container) {
+            mirror.set(move.to.container, toList);
+        }
+    }
+    function rollback(move) {
+        for (const [cid, list] of mirror) {
+            const idx = list.findIndex((it) => opts.key(it) === opts.key(move.item));
+            if (idx !== -1) {
+                list.splice(idx, 1);
+                mirror.set(cid, list);
+                break;
+            }
+        }
+        const fromList = [...(mirror.get(move.from.container) ?? [])];
+        fromList.splice(Math.min(move.from.index, fromList.length), 0, move.item);
+        mirror.set(move.from.container, fromList);
+    }
+    function finalize(dropped) {
+        const drag = dragging;
+        const to = dropped ? proposal : null;
+        dragging = null;
+        consider(null);
+        if (!drag)
+            return;
+        if (!to ||
+            (to.container === drag.from.container && to.index === drag.from.index)) {
+            if (seedQueued && inFlight === 0) {
+                seedQueued = false;
+                seed();
+            }
+            return;
+        }
+        const move = { item: drag.item, from: drag.from, to };
+        applyToMirror(move);
+        if (opts.announce)
+            announce(opts.announce(move));
+        const token = (seq.get(drag.key) ?? 0) + 1;
+        seq.set(drag.key, token);
+        inFlight++;
+        opts
+            .commit(move)
+            .catch((error) => {
+            if (seq.get(drag.key) === token)
+                rollback(move);
+            opts.onError?.(error, move);
+        })
+            .finally(() => {
+            inFlight--;
+            if (inFlight === 0 && seedQueued && !dragging) {
+                seedQueued = false;
+                seed();
+            }
+        });
+    }
+    $effect(() => monitorForElements({
+        canMonitor: ({ source }) => isItemData(source.data, opts.type),
+        onDragStart({ source }) {
+            const d = source.data;
+            dragging = {
+                key: d.key,
+                item: d.item,
+                from: { container: d.container, index: d.index },
+            };
+        },
+        onDropTargetChange({ location }) {
+            consider(placementFrom(location.current.dropTargets));
+        },
+        onDrag({ location }) {
+            consider(placementFrom(location.current.dropTargets));
+        },
+        onDrop({ location }) {
+            finalize(location.current.dropTargets.length > 0);
+        },
+    }));
+    return {
+        get: (container) => mirror.get(container) ?? [],
+        containers: () => [...mirror.keys()],
+        get dragging() {
+            return dragging;
+        },
+        get proposal() {
+            return proposal;
+        },
+        isSource: (item) => dragging?.key === opts.key(item),
+        isShadow: (item) => !!item[SHADOW_KEY],
+        item: (item, container, index) => ({
+            data: () => makeItemData({ type: opts.type, key: opts.key(item), item, container, index }),
+        }),
+        itemTarget: (container, index) => ({
+            data: (feedback) => attachClosestEdge({ type: `${opts.type}-target`, container, index }, { input: feedback.input, element: feedback.element, allowedEdges: edges }),
+            accepts: (d) => isItemData(d, opts.type),
+            sticky: true,
+        }),
+        containerTarget: (container) => ({
+            data: () => ({ type: `${opts.type}-target`, container }),
+            accepts: (d) => isItemData(d, opts.type),
+        }),
+    };
+}

package/dist/dnd/createDndBoard.test.d.ts

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

package/dist/dnd/createDndBoard.test.js

@@ -0,0 +1,185 @@
+// @vitest-environment jsdom
+/**
+ * Unit tests for createDndBoard internals.
+ *
+ * We can't exercise $effect/$state directly in vitest (no Svelte compiler context),
+ * so these tests validate the pure-logic layer: sequence-token rollback ordering
+ * and reseed suppression. They work by extracting the board logic functions
+ * that don't depend on runes and driving them directly.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { makeItemData, isItemData } from './types';
+// ---- makeItemData / isItemData -------------------------------------------
+describe('makeItemData / isItemData', () => {
+    it('round-trips through the Symbol brand', () => {
+        const data = makeItemData({ type: 'card', key: 'a', item: { id: 'a' }, container: 'col1', index: 0 });
+        expect(isItemData(data)).toBe(true);
+        expect(isItemData(data, 'card')).toBe(true);
+        expect(isItemData(data, 'other')).toBe(false);
+    });
+    it('rejects plain objects without the brand', () => {
+        expect(isItemData({ type: 'card', key: 'a' })).toBe(false);
+    });
+    it('preserves all fields', () => {
+        const item = { id: 'x', name: 'Item X' };
+        const data = makeItemData({ type: 'board', key: 'x', item, container: 'c1', index: 2 });
+        expect(data.key).toBe('x');
+        expect(data.item).toBe(item);
+        expect(data.container).toBe('c1');
+        expect(data.index).toBe(2);
+    });
+});
+function makeMirror(initial) {
+    const m = new Map();
+    for (const [k, v] of Object.entries(initial))
+        m.set(k, [...v]);
+    return m;
+}
+function applyToMirror(mirror, move, key) {
+    const fromList = [...(mirror.get(move.from.container) ?? [])];
+    const toList = move.from.container === move.to.container
+        ? fromList
+        : [...(mirror.get(move.to.container) ?? [])];
+    const srcIdx = fromList.findIndex((it) => key(it) === key(move.item));
+    if (srcIdx === -1)
+        return;
+    fromList.splice(srcIdx, 1);
+    let destIdx = move.to.index;
+    if (move.from.container === move.to.container && move.to.index > move.from.index) {
+        destIdx = Math.max(0, destIdx - 1);
+    }
+    toList.splice(Math.min(destIdx, toList.length), 0, move.item);
+    mirror.set(move.from.container, fromList);
+    if (move.from.container !== move.to.container) {
+        mirror.set(move.to.container, toList);
+    }
+}
+function rollback(mirror, move, key) {
+    for (const [cid, list] of mirror) {
+        const idx = list.findIndex((it) => key(it) === key(move.item));
+        if (idx !== -1) {
+            list.splice(idx, 1);
+            mirror.set(cid, list);
+            break;
+        }
+    }
+    const fromList = [...(mirror.get(move.from.container) ?? [])];
+    fromList.splice(Math.min(move.from.index, fromList.length), 0, move.item);
+    mirror.set(move.from.container, fromList);
+}
+const key = (i) => i.id;
+const a = { id: 'a', name: 'A' };
+const b = { id: 'b', name: 'B' };
+const c = { id: 'c', name: 'C' };
+describe('applyToMirror', () => {
+    it('moves item within same container (downward)', () => {
+        const mirror = makeMirror({ col: [a, b, c] });
+        applyToMirror(mirror, { item: a, from: { container: 'col', index: 0 }, to: { container: 'col', index: 2 } }, key);
+        expect(mirror.get('col')?.map(key)).toEqual(['b', 'a', 'c']);
+    });
+    it('moves item within same container (upward)', () => {
+        const mirror = makeMirror({ col: [a, b, c] });
+        applyToMirror(mirror, { item: c, from: { container: 'col', index: 2 }, to: { container: 'col', index: 0 } }, key);
+        expect(mirror.get('col')?.map(key)).toEqual(['c', 'a', 'b']);
+    });
+    it('moves item across containers', () => {
+        const mirror = makeMirror({ col1: [a, b], col2: [c] });
+        applyToMirror(mirror, { item: b, from: { container: 'col1', index: 1 }, to: { container: 'col2', index: 0 } }, key);
+        expect(mirror.get('col1')?.map(key)).toEqual(['a']);
+        expect(mirror.get('col2')?.map(key)).toEqual(['b', 'c']);
+    });
+});
+describe('rollback', () => {
+    it('restores item to its original position', () => {
+        const mirror = makeMirror({ col: [b, c, a] });
+        rollback(mirror, { item: a, from: { container: 'col', index: 0 } }, key);
+        expect(mirror.get('col')?.map(key)).toEqual(['a', 'b', 'c']);
+    });
+    it('restores item from a different container', () => {
+        const mirror = makeMirror({ col1: [b], col2: [a, c] });
+        rollback(mirror, { item: a, from: { container: 'col1', index: 0 } }, key);
+        expect(mirror.get('col1')?.map(key)).toEqual(['a', 'b']);
+        expect(mirror.get('col2')?.map(key)).toEqual(['c']);
+    });
+});
+describe('sequence-token rollback ordering', () => {
+    it('does not rollback when a newer commit has already completed', async () => {
+        const seq = new Map();
+        const mirror = makeMirror({ col1: [a, b], col2: [c] });
+        const move1 = { item: a, from: { container: 'col1', index: 0 }, to: { container: 'col2', index: 0 } };
+        const move2 = { item: a, from: { container: 'col2', index: 0 }, to: { container: 'col1', index: 0 } };
+        const token1 = (seq.get('a') ?? 0) + 1;
+        seq.set('a', token1);
+        applyToMirror(mirror, move1, key);
+        const token2 = (seq.get('a') ?? 0) + 1;
+        seq.set('a', token2);
+        applyToMirror(mirror, { ...move2, from: { container: 'col2', index: 0 } }, key);
+        const shouldRollbackMove1 = seq.get('a') === token1;
+        expect(shouldRollbackMove1).toBe(false);
+        const shouldRollbackMove2 = seq.get('a') === token2;
+        expect(shouldRollbackMove2).toBe(true);
+    });
+    it('does rollback when this is the newest commit of the item', async () => {
+        const seq = new Map();
+        const mirror = makeMirror({ col1: [a, b], col2: [c] });
+        const move1 = { item: a, from: { container: 'col1', index: 0 }, to: { container: 'col2', index: 0 } };
+        const token1 = (seq.get('a') ?? 0) + 1;
+        seq.set('a', token1);
+        applyToMirror(mirror, move1, key);
+        const shouldRollback = seq.get('a') === token1;
+        expect(shouldRollback).toBe(true);
+        if (shouldRollback) {
+            rollback(mirror, move1, key);
+        }
+        expect(mirror.get('col1')?.map(key)).toContain('a');
+        expect(mirror.get('col2')?.map(key)).not.toContain('a');
+    });
+});
+describe('reseed suppression', () => {
+    it('suppresses reseed while dragging and applies it after', () => {
+        let seedCalled = 0;
+        let dragging = true;
+        let inFlight = 0;
+        let seedQueued = false;
+        function maybeSeed() {
+            if (dragging || inFlight > 0) {
+                seedQueued = true;
+                return;
+            }
+            seedCalled++;
+            seedQueued = false;
+        }
+        maybeSeed();
+        expect(seedCalled).toBe(0);
+        expect(seedQueued).toBe(true);
+        dragging = false;
+        if (inFlight === 0 && seedQueued && !dragging) {
+            seedCalled++;
+            seedQueued = false;
+        }
+        expect(seedCalled).toBe(1);
+        expect(seedQueued).toBe(false);
+    });
+    it('suppresses reseed while commits in-flight and applies after all settle', () => {
+        let seedCalled = 0;
+        let dragging = false;
+        let inFlight = 2;
+        let seedQueued = false;
+        function tryFlush() {
+            if (inFlight === 0 && seedQueued && !dragging) {
+                seedCalled++;
+                seedQueued = false;
+            }
+        }
+        if (dragging || inFlight > 0) {
+            seedQueued = true;
+        }
+        expect(seedQueued).toBe(true);
+        inFlight--;
+        tryFlush();
+        expect(seedCalled).toBe(0);
+        inFlight--;
+        tryFlush();
+        expect(seedCalled).toBe(1);
+    });
+});

package/dist/dnd/draggable.d.ts

@@ -0,0 +1,13 @@
+import type { DragData } from './types';
+export interface DraggableParams<TData extends DragData = DragData> {
+    data: () => TData;
+    disabled?: () => boolean;
+    dragHandle?: Element;
+    preview?: (container: HTMLElement, data: TData) => () => void;
+    onDragStart?: (data: TData) => void;
+    onDrop?: (data: TData) => void;
+}
+export declare const draggable: <TData extends DragData>(node: HTMLElement, params: DraggableParams<TData>) => {
+    update(next: DraggableParams<TData>): void;
+    destroy: () => void;
+};

package/dist/dnd/draggable.js

@@ -0,0 +1,42 @@
+import { draggable as registerDraggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
+export const draggable = ((node, params) => {
+    let current = params;
+    let cleanup;
+    function register() {
+        cleanup = registerDraggable({
+            element: node,
+            dragHandle: current.dragHandle,
+            canDrag: () => !(current.disabled?.() ?? false),
+            getInitialData: () => current.data(),
+            onGenerateDragPreview({ source, nativeSetDragImage }) {
+                if (!current.preview)
+                    return;
+                setCustomNativeDragPreview({
+                    render: ({ container }) => current.preview(container, source.data),
+                    nativeSetDragImage,
+                });
+            },
+            onDragStart({ source }) {
+                node.dataset.dragging = 'true';
+                current.onDragStart?.(source.data);
+            },
+            onDrop({ source }) {
+                delete node.dataset.dragging;
+                current.onDrop?.(source.data);
+            },
+        });
+    }
+    register();
+    return {
+        update(next) {
+            const handleChanged = next.dragHandle !== current.dragHandle;
+            current = next;
+            if (handleChanged) {
+                cleanup();
+                register();
+            }
+        },
+        destroy: () => cleanup(),
+    };
+});

package/dist/dnd/dropTarget.d.ts

@@ -0,0 +1,14 @@
+import type { DragData, TargetFeedback } from './types';
+export interface DropTargetParams<TSelf extends DragData = DragData> {
+    data: (feedback: TargetFeedback) => TSelf;
+    accepts?: (source: Record<string | symbol, unknown>) => boolean;
+    sticky?: boolean;
+    onEnter?: (source: Record<string | symbol, unknown>) => void;
+    onLeave?: () => void;
+    onMove?: (self: TSelf, source: Record<string | symbol, unknown>) => void;
+    onDropped?: (self: TSelf, source: Record<string | symbol, unknown>) => void;
+}
+export declare const dropTarget: <TSelf extends DragData>(node: HTMLElement, params: DropTargetParams<TSelf>) => {
+    update(next: DropTargetParams<TSelf>): void;
+    destroy: import("@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types").CleanupFn;
+};

package/dist/dnd/dropTarget.js

@@ -0,0 +1,31 @@
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+export const dropTarget = ((node, params) => {
+    let current = params;
+    const cleanup = dropTargetForElements({
+        element: node,
+        getData: ({ input, element, source }) => current.data({ input, element, source }),
+        canDrop: ({ source }) => current.accepts?.(source.data) ?? true,
+        getIsSticky: () => current.sticky ?? false,
+        onDragEnter({ source }) {
+            node.dataset.dropOver = 'true';
+            current.onEnter?.(source.data);
+        },
+        onDragLeave() {
+            delete node.dataset.dropOver;
+            current.onLeave?.();
+        },
+        onDrag({ self, source }) {
+            current.onMove?.(self.data, source.data);
+        },
+        onDrop({ self, source }) {
+            delete node.dataset.dropOver;
+            current.onDropped?.(self.data, source.data);
+        },
+    });
+    return {
+        update(next) {
+            current = next;
+        },
+        destroy: cleanup,
+    };
+});

package/dist/dnd/index.d.ts

@@ -0,0 +1,13 @@
+export { draggable } from './draggable';
+export type { DraggableParams } from './draggable';
+export { dropTarget } from './dropTarget';
+export type { DropTargetParams } from './dropTarget';
+export { createDndBoard } from './createDndBoard.svelte';
+export type { BoardMove, DndBoardOptions } from './createDndBoard.svelte';
+export { default as DropIndicator } from './DropIndicator.svelte';
+export { autoScroll } from './autoScroll';
+export type { AutoScrollParams } from './autoScroll';
+export { announce, cleanupAnnouncements } from './announce';
+export { makeItemData, isItemData } from './types';
+export type { DragData, ItemDragData, ContainerDropData, TargetFeedback, Edge } from './types';
+export { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';

package/dist/dnd/index.js

@@ -0,0 +1,9 @@
+export { draggable } from './draggable';
+export { dropTarget } from './dropTarget';
+export { createDndBoard } from './createDndBoard.svelte';
+export { default as DropIndicator } from './DropIndicator.svelte';
+export { autoScroll } from './autoScroll';
+export { announce, cleanupAnnouncements } from './announce';
+export { makeItemData, isItemData } from './types';
+// Low-level pdnd primitives re-exported to let host code avoid direct @atlaskit imports
+export { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';

package/dist/dnd/types.d.ts

@@ -0,0 +1,41 @@
+import type { Input } from '@atlaskit/pragmatic-drag-and-drop/types';
+export interface DragData extends Record<string | symbol, unknown> {
+    readonly type: string;
+}
+/**
+ * Module-scoped Symbol brand for board-managed items.
+ * ⚠ Symbol identity = module identity. Two copies of this module on one page makes
+ * isItemData() return false across the boundary — dnd/ must exist EXACTLY ONCE.
+ * Declare all @atlaskit/pragmatic-drag-and-drop* packages as peerDependencies in
+ * the host app (host owns the single instance).
+ */
+declare const ITEM: unique symbol;
+export interface ItemDragData<TItem = unknown> extends DragData {
+    readonly [ITEM]: true;
+    readonly key: string;
+    readonly item: TItem;
+    readonly container: string;
+    readonly index: number;
+}
+export interface ItemDragDataInput<TItem = unknown> {
+    type: string;
+    key: string;
+    item: TItem;
+    container: string;
+    index: number;
+}
+export declare function makeItemData<TItem>(args: ItemDragDataInput<TItem>): ItemDragData<TItem>;
+export declare function isItemData<TItem = unknown>(data: Record<string | symbol, unknown>, type?: string): data is ItemDragData<TItem>;
+export interface ContainerDropData extends DragData {
+    readonly container: string;
+    readonly index?: number;
+}
+export interface TargetFeedback {
+    input: Input;
+    element: Element;
+    source: {
+        element: HTMLElement;
+        data: Record<string | symbol, unknown>;
+    };
+}
+export type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';

package/dist/dnd/types.js

@@ -0,0 +1,14 @@
+/**
+ * Module-scoped Symbol brand for board-managed items.
+ * ⚠ Symbol identity = module identity. Two copies of this module on one page makes
+ * isItemData() return false across the boundary — dnd/ must exist EXACTLY ONCE.
+ * Declare all @atlaskit/pragmatic-drag-and-drop* packages as peerDependencies in
+ * the host app (host owns the single instance).
+ */
+const ITEM = Symbol('jatui-dnd-item');
+export function makeItemData(args) {
+    return { ...args, [ITEM]: true };
+}
+export function isItemData(data, type) {
+    return data[ITEM] === true && (type === undefined || data.type === type);
+}

package/dist/index.d.ts

@@ -142,3 +142,8 @@ export { default as LocationMap } from './components/LocationMap.svelte';
 export { default as GPSTracker } from './components/GPSTracker.svelte';
 export type { MapJob, MapAgent } from './types/maps';
 export { loadGoogleMapsAPI, isGoogleMapsLoaded, isPlacesLoaded, isGeometryLoaded, } from './utils/googleMapsLoader';
+export { draggable, dropTarget, autoScroll, announce, cleanupAnnouncements, monitorForElements, } from './dnd/index';
+export { createDndBoard } from './dnd/createDndBoard.svelte';
+export { default as DropIndicator } from './dnd/DropIndicator.svelte';
+export { makeItemData, isItemData } from './dnd/types';
+export type { DragData, ItemDragData, ContainerDropData, TargetFeedback, Edge, DraggableParams, DropTargetParams, AutoScrollParams, BoardMove, DndBoardOptions, } from './dnd/index';

package/dist/index.js

@@ -141,3 +141,8 @@ export { default as LocationMap } from './components/LocationMap.svelte';
 export { default as GPSTracker } from './components/GPSTracker.svelte';
 // Utilities — Google Maps loader
 export { loadGoogleMapsAPI, isGoogleMapsLoaded, isPlacesLoaded, isGeometryLoaded, } from './utils/googleMapsLoader';
+// DnD — pragmatic-drag-and-drop wrappers (peerDep: @atlaskit/pragmatic-drag-and-drop*)
+export { draggable, dropTarget, autoScroll, announce, cleanupAnnouncements, monitorForElements, } from './dnd/index';
+export { createDndBoard } from './dnd/createDndBoard.svelte';
+export { default as DropIndicator } from './dnd/DropIndicator.svelte';
+export { makeItemData, isItemData } from './dnd/types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",
@@ -31,12 +31,28 @@
     "prepublishOnly": "npm run package"
   },
   "peerDependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "~2.0.0",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "~3.0.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "~2.0.0",
+    "@atlaskit/pragmatic-drag-and-drop-live-region": "~2.0.0",
     "d3": "^7.0.0",
     "daisyui": "^5.0.0",
     "svelte": "^5.0.0",
     "tailwindcss": "^4.0.0"
   },
   "peerDependenciesMeta": {
+    "@atlaskit/pragmatic-drag-and-drop": {
+      "optional": true
+    },
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": {
+      "optional": true
+    },
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": {
+      "optional": true
+    },
+    "@atlaskit/pragmatic-drag-and-drop-live-region": {
+      "optional": true
+    },
     "d3": {
       "optional": true
     },
@@ -48,6 +64,10 @@
     }
   },
   "devDependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "~2.0.1",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "~3.0.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "~2.0.0",
+    "@atlaskit/pragmatic-drag-and-drop-live-region": "~2.0.0",
     "@sveltejs/adapter-auto": "^6.0.0",
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.21.0",
@@ -69,4 +89,4 @@
     "svelte-dnd-action": "^0.9.69"
   },
   "license": "MIT"
-}
+}