@joewinke/jatui 0.1.28 → 0.1.30

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/dist/stores/confirmDialog.svelte.js

@@ -2,7 +2,7 @@
  * Global promise-based confirm dialog.
  * Usage: const ok = await showConfirm({ title: '...', body: '...' })
  */
-var pending = $state(null);
+let pending = $state(null);
 export function getPending() {
     return pending;
 }
@@ -11,21 +11,21 @@ export function showConfirm(options) {
     if (pending) {
         pending.resolve(false);
     }
-    return new Promise(function (resolve) {
-        pending = { options: options, resolve: resolve };
+    return new Promise((resolve) => {
+        pending = { options, resolve };
     });
 }
 export function confirmDialog() {
     if (!pending)
         return;
-    var p = pending;
+    const p = pending;
     pending = null;
     p.resolve(true);
 }
 export function cancelDialog() {
     if (!pending)
         return;
-    var p = pending;
+    const p = pending;
     pending = null;
     p.resolve(false);
 }

package/dist/stores/inputDialog.svelte.js

@@ -3,7 +3,7 @@
  * Usage: const value = await showInput({ title: '...', placeholder: '...' })
  * Returns the typed string if confirmed, null if cancelled.
  */
-var pending = $state(null);
+let pending = $state(null);
 export function getPendingInput() {
     return pending;
 }
@@ -12,21 +12,21 @@ export function showInput(options) {
     if (pending) {
         pending.resolve(null);
     }
-    return new Promise(function (resolve) {
-        pending = { options: options, resolve: resolve };
+    return new Promise((resolve) => {
+        pending = { options, resolve };
     });
 }
 export function submitInput(value) {
     if (!pending)
         return;
-    var p = pending;
+    const p = pending;
     pending = null;
     p.resolve(value);
 }
 export function cancelInput() {
     if (!pending)
         return;
-    var p = pending;
+    const p = pending;
     pending = null;
     p.resolve(null);
 }

package/dist/types/booking.js

@@ -1,7 +1,7 @@
 // Booking System Types
 // Generic types for scheduling/booking UI components
 // Day of week helpers
-export var DAYS_OF_WEEK = [
+export const DAYS_OF_WEEK = [
     'Sunday',
     'Monday',
     'Tuesday',
@@ -10,14 +10,14 @@ export var DAYS_OF_WEEK = [
     'Friday',
     'Saturday'
 ];
-export var DAYS_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+export const DAYS_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 // Location type display
-export var LOCATION_LABELS = {
+export const LOCATION_LABELS = {
     remote: 'Video Call',
     phone: 'Phone Call',
     in_person: 'In Person'
 };
-export var LOCATION_ICONS = {
+export const LOCATION_ICONS = {
     remote: 'video',
     phone: 'phone',
     in_person: 'map-pin'

package/dist/types/comments.js

@@ -6,7 +6,7 @@
 // Threading is ONE level deep on the data side: a comment is either
 // top-level (`parent_id === null`) or a single-level reply. The UI renders
 // this as two visual levels (a comment and its replies).
-export var COMMENT_ENTITY_TYPES = [
+export const COMMENT_ENTITY_TYPES = [
     'project',
     'invoice',
     'contract',
@@ -16,7 +16,7 @@ export var COMMENT_ENTITY_TYPES = [
     'milestone',
     'contract_term'
 ];
-export var COMMENT_VISIBILITIES = [
+export const COMMENT_VISIBILITIES = [
     'internal',
     'client'
 ];

package/dist/types/messaging.js

@@ -1,7 +1,7 @@
 // Messaging System Types
 // Generic types for messaging UI components — no framework or backend dependencies
 // ─── Emoji Data Constants ─────────────────────────────────────────────
-export var EMOJI_CATEGORIES = [
+export const EMOJI_CATEGORIES = [
     { id: 'search', name: 'Search', icon: '🔍', description: 'Search results' },
     {
         id: 'frequently_used',
@@ -59,7 +59,7 @@ export var EMOJI_CATEGORIES = [
         description: 'Organization custom emojis'
     }
 ];
-export var SKIN_TONES = [
+export const SKIN_TONES = [
     { id: 'default', name: 'Default', unicode: '', preview: '👋' },
     { id: 'light', name: 'Light', unicode: '🏻', preview: '👋🏻' },
     { id: 'medium-light', name: 'Medium Light', unicode: '🏼', preview: '👋🏼' },
@@ -68,7 +68,7 @@ export var SKIN_TONES = [
     { id: 'dark', name: 'Dark', unicode: '🏿', preview: '👋🏿' }
 ];
 // Default quick-reaction emojis (used when no user preferences available)
-export var DEFAULT_QUICK_REACTIONS = [
+export const DEFAULT_QUICK_REACTIONS = [
     {
         unicode: '👍',
         name: 'Thumbs Up',

package/dist/types/pipeline.js

@@ -1,11 +1,11 @@
 // ─── Core Stage/Column Types ───
 // ─── Defaults ───
-export var DEFAULT_DRAG_CONFIG = {
+export const DEFAULT_DRAG_CONFIG = {
     enabled: true,
     flipDurationMs: 200,
     dropTargetClass: 'outline-dashed outline-2 outline-base-content/20'
 };
-export var DEFAULT_PIPELINE_CONFIG = {
+export const DEFAULT_PIPELINE_CONFIG = {
     views: ['kanban'],
     defaultView: 'kanban',
     drag: DEFAULT_DRAG_CONFIG,

package/dist/utils/currency.js

@@ -5,12 +5,10 @@
  * Format a number as USD currency string.
  * Override locale/currency by passing options.
  */
-export function formatCurrency(amount, locale, currency) {
-    if (locale === void 0) { locale = 'en-US'; }
-    if (currency === void 0) { currency = 'USD'; }
+export function formatCurrency(amount, locale = 'en-US', currency = 'USD') {
     return new Intl.NumberFormat(locale, {
         style: 'currency',
-        currency: currency,
+        currency,
         minimumFractionDigits: 2,
         maximumFractionDigits: 2
     }).format(amount);