@joewinke/jatui 0.2.2 → 0.2.4

package/dist/components/CommandPalette.svelte

@@ -2,7 +2,7 @@
 	import { tick } from 'svelte';
 	import { fly, fade } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
-	import { commandPalette, type CommandItem } from '../stores/commandPalette.svelte.js';
+	import { commandPalette, type CommandItem } from '../stores/commandPalette.js';
 
 	// Respect prefers-reduced-motion
 	const reducedMotion =

package/dist/components/ConfirmDialog.svelte

@@ -2,7 +2,7 @@
 	import { fly, fade } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 	import { tick } from 'svelte';
-	import { getPending, confirmDialog, cancelDialog } from '../stores/confirmDialog.svelte';
+	import { getPending, confirmDialog, cancelDialog } from '../stores/confirmDialog';
 
 	const pending = $derived(getPending());
 	const opts = $derived(pending?.options ?? null);

package/dist/components/InputDialog.svelte

@@ -2,7 +2,7 @@
 	import { fly, fade } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 	import { tick } from 'svelte';
-	import { getPendingInput, submitInput, cancelInput } from '../stores/inputDialog.svelte';
+	import { getPendingInput, submitInput, cancelInput } from '../stores/inputDialog';
 
 	const pending = $derived(getPendingInput());
 	const opts = $derived(pending?.options ?? null);

package/dist/components/Tabs.svelte

@@ -189,7 +189,7 @@
 			left: 0;
 			width: 1px;
 			height: 2px;
-			background-color: oklch(var(--p, 55% 0.2 270) / 1);
+			background-color: var(--color-primary, oklch(55% 0.2 270));
 			transform-origin: left center;
 			border-radius: 1px;
 			transition:
@@ -216,7 +216,7 @@
 			border: none;
 			background: transparent;
 			cursor: pointer;
-			color: oklch(var(--bc, 20% 0 0) / 0.6);
+			color: color-mix(in oklch, var(--color-base-content, oklch(20% 0 0)) 60%, transparent);
 			transition:
 				color var(--motion-fast, 150ms) var(--motion-glide, cubic-bezier(0.16, 1, 0.3, 1));
 			white-space: nowrap;
@@ -224,11 +224,11 @@
 		}
 
 		.tab-btn:hover:not(:disabled) {
-			color: oklch(var(--bc, 20% 0 0) / 0.85);
+			color: color-mix(in oklch, var(--color-base-content, oklch(20% 0 0)) 85%, transparent);
 		}
 
 		.tab-btn.tab-active {
-			color: oklch(var(--bc, 20% 0 0) / 1);
+			color: var(--color-base-content, oklch(20% 0 0));
 		}
 
 		.tab-btn:disabled {
@@ -237,13 +237,13 @@
 		}
 
 		.tab-btn:focus-visible {
-			outline: 2px solid oklch(var(--p, 55% 0.2 270) / 1);
+			outline: 2px solid var(--color-primary, oklch(55% 0.2 270));
 			outline-offset: 2px;
 		}
 
 		/* Underline: active tab gets primary color */
 		.tabs-underline .tab-btn.tab-active {
-			color: oklch(var(--p, 55% 0.2 270) / 1);
+			color: var(--color-primary, oklch(55% 0.2 270));
 		}
 
 		/* Underline: button bottom padding so indicator aligns */

package/dist/components/shell/Sidebar.svelte

@@ -7,7 +7,7 @@
 	 *   icon      — icon-only rail (no width transition — labels/groups hide via class swap)
 	 *   collapsed — completely hidden; mobile uses a Drawer overlay
 	 *
-	 * Pass a sidebarState from createSidebarState() (shell.ts) for persistence
+	 * Pass a sidebarState from createSidebarState() (shell.svelte.ts) for persistence
 	 * and active-item tracking. Without it, the sidebar is stateless.
 	 */
 

package/dist/components/shell/Sidebar.svelte.d.ts

@@ -6,7 +6,7 @@
      *   icon      — icon-only rail (no width transition — labels/groups hide via class swap)
      *   collapsed — completely hidden; mobile uses a Drawer overlay
      *
-     * Pass a sidebarState from createSidebarState() (shell.ts) for persistence
+     * Pass a sidebarState from createSidebarState() (shell.svelte.ts) for persistence
      * and active-item tracking. Without it, the sidebar is stateless.
      */
 import type { Snippet } from 'svelte';

package/dist/components/shell/shell.js

@@ -1,65 +1,68 @@
-/**
- * Sidebar context state — createSidebarState returns a reactive object
- * driven by Svelte 5 runes. Pass it into Sidebar via setContext/getContext
- * or prop drilling.
- *
- * Persistence: localStorage (fallback to cookie via document.cookie) keyed
- * on `storageKey`. Set storageKey = '' to disable persistence.
- */
+/* shell.svelte.js generated by Svelte v5.53.11 */
+import * as $ from 'svelte/internal/client';
+
 function readStorage(key) {
-    if (!key || typeof window === 'undefined')
-        return null;
-    try {
-        return localStorage.getItem(key);
-    }
-    catch (_a) {
-        return null;
-    }
+	if (!key || typeof window === 'undefined') return null;
+
+	try {
+		return localStorage.getItem(key);
+	} catch(_a) {
+		return null;
+	}
 }
+
 function writeStorage(key, value) {
-    if (!key || typeof window === 'undefined')
-        return;
-    try {
-        localStorage.setItem(key, value);
-    }
-    catch (_a) {
-        // silently fail if storage unavailable
-    }
+	if (!key || typeof window === 'undefined') return;
+
+	try {
+		localStorage.setItem(key, value);
+	} catch(_a) {
+		// silently fail if storage unavailable
+	}
 }
+
 export function createSidebarState(options) {
-    var _a, _b, _c;
-    var storageKey = (_a = options === null || options === void 0 ? void 0 : options.storageKey) !== null && _a !== void 0 ? _a : 'jatui-sidebar';
-    var defaultMode = (_b = options === null || options === void 0 ? void 0 : options.defaultMode) !== null && _b !== void 0 ? _b : 'expanded';
-    var storedMode = readStorage(storageKey);
-    var validModes = ['expanded', 'collapsed', 'icon'];
-    var initialMode = storedMode && validModes.includes(storedMode) ? storedMode : defaultMode;
-    var mode = $state(initialMode);
-    var activeId = $state((_c = options === null || options === void 0 ? void 0 : options.defaultActiveId) !== null && _c !== void 0 ? _c : '');
-    var mobileOpen = $state(false);
-    return {
-        get mode() {
-            return mode;
-        },
-        get activeId() {
-            return activeId;
-        },
-        get mobileOpen() {
-            return mobileOpen;
-        },
-        setMode: function (m) {
-            mode = m;
-            writeStorage(storageKey, m);
-        },
-        toggleCollapse: function () {
-            var next = mode === 'expanded' ? 'icon' : 'expanded';
-            mode = next;
-            writeStorage(storageKey, next);
-        },
-        setActive: function (id) {
-            activeId = id;
-        },
-        setMobileOpen: function (open) {
-            mobileOpen = open;
-        }
-    };
-}
+	var _a, _b, _c;
+	var storageKey = (_a = options === null || options === void 0 ? void 0 : options.storageKey) !== null && _a !== void 0 ? _a : 'jatui-sidebar';
+	var defaultMode = (_b = options === null || options === void 0 ? void 0 : options.defaultMode) !== null && _b !== void 0 ? _b : 'expanded';
+	var storedMode = readStorage(storageKey);
+	var validModes = ['expanded', 'collapsed', 'icon'];
+	var initialMode = storedMode && validModes.includes(storedMode) ? storedMode : defaultMode;
+	var mode = $.state($.proxy(initialMode));
+	var activeId = $.state($.proxy((_c = options === null || options === void 0 ? void 0 : options.defaultActiveId) !== null && _c !== void 0 ? _c : ''));
+	var mobileOpen = $.state(false);
+
+	return {
+		get mode() {
+			return $.safe_get(mode);
+		},
+
+		get activeId() {
+			return $.safe_get(activeId);
+		},
+
+		get mobileOpen() {
+			return $.safe_get(mobileOpen);
+		},
+
+		setMode(m) {
+			$.set(mode, m, true);
+			writeStorage(storageKey, m);
+		},
+
+		toggleCollapse() {
+			var next = $.safe_get(mode) === 'expanded' ? 'icon' : 'expanded';
+
+			$.set(mode, next, true);
+			writeStorage(storageKey, next);
+		},
+
+		setActive(id) {
+			$.set(activeId, id, true);
+		},
+
+		setMobileOpen(open) {
+			$.set(mobileOpen, open, true);
+		}
+	};
+}

package/dist/components/table/DataTable.svelte

@@ -80,7 +80,16 @@
 			getPaginationRowModel: paginated ? getPaginationRowModel() : undefined,
 			renderFallbackValue: '',
 		};
-		return createTable(opts);
+		const instance = createTable(opts);
+		// createTable takes a fully-resolved state — unlike the framework adapters it does
+		// not fill in defaults, so feature state we never touch (columnPinning, columnVisibility,
+		// …) lands undefined and getHeaderGroups() dies reading columnPinning.left. Merge the
+		// instance defaults under our reactive slices, the same way the TanStack adapters do.
+		instance.setOptions((prev) => ({
+			...prev,
+			state: { ...instance.initialState, ...opts.state },
+		}));
+		return instance;
 	});
 
 	const headerGroups = $derived(table.getHeaderGroups());

package/dist/components/toast/ToastHost.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getToasts } from '../../stores/toast.svelte.js';
+	import { getToasts } from '../../stores/toast.js';
 	import ToastItem from './ToastItem.svelte';
 
 	const toasts = $derived(getToasts());

package/dist/components/toast/ToastItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { dismissToast, type Toast } from '../../stores/toast.svelte.js';
+	import { dismissToast, type Toast } from '../../stores/toast.js';
 
 	type Props = {
 		toast: Toast;

package/dist/components/toast/ToastItem.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type Toast } from '../../stores/toast.svelte.js';
+import { type Toast } from '../../stores/toast.js';
 type Props = {
     toast: Toast;
     index: number;

package/dist/dnd/createDndBoard.js

@@ -0,0 +1,329 @@
+/* createDndBoard.svelte.js generated by Svelte v5.53.11 */
+import * as $ from 'svelte/internal/client';
+
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+	if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+		if (ar || !(i in from)) {
+			if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+
+			ar[i] = from[i];
+		}
+	}
+
+	return to.concat(ar || Array.prototype.slice.call(from));
+};
+
+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';
+
+var SHADOW_KEY = '__dnd-shadow__';
+
+export function createDndBoard(opts) {
+	var _a, _b;
+	var edges = (_a = opts.edges) !== null && _a !== void 0 ? _a : ['top', 'bottom'];
+	var hover = (_b = opts.hover) !== null && _b !== void 0 ? _b : 'indicator';
+	var mirror = new SvelteMap();
+	var dragging = $.state(null);
+	var proposal = $.state(null);
+	var seq = new Map();
+	var inFlight = 0;
+	var seedQueued = false;
+
+	function seed() {
+		mirror.clear();
+
+		var src = opts.items();
+		var entries = src instanceof Map ? src : new Map(Object.entries(src));
+
+		for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+			var _a = entries_1[_i], id = _a[0], list = _a[1];
+
+			mirror.set(id, __spreadArray([], list, true));
+		}
+	}
+
+	$.user_effect(function () {
+		opts.items();
+
+		if ($.safe_get(dragging) || inFlight > 0) {
+			seedQueued = true;
+
+			return;
+		}
+
+		seed();
+	});
+
+	function placementFrom(dropTargets) {
+		var _a;
+		var inner = dropTargets[0];
+
+		if (!inner) return null;
+
+		var d = inner.data;
+
+		if (typeof d.container !== 'string') return null;
+
+		var list = (_a = mirror.get(d.container)) !== null && _a !== void 0 ? _a : [];
+
+		if (typeof d.index !== 'number') return { container: d.container, index: list.length };
+
+		var edge = extractClosestEdge(d);
+		var after = edge === 'bottom' || edge === 'right';
+
+		return { container: d.container, index: d.index + (after ? 1 : 0) };
+	}
+
+	function syncShadow(next) {
+		var _a;
+		var _b;
+
+		for (var _i = 0, mirror_1 = mirror; _i < mirror_1.length; _i++) {
+			var _c = mirror_1[_i], cid = _c[0], list_1 = _c[1];
+
+			var idx = list_1.findIndex(function (item) {
+				return item[SHADOW_KEY];
+			});
+
+			if (idx !== -1) {
+				list_1.splice(idx, 1);
+				mirror.set(cid, list_1);
+
+				break;
+			}
+		}
+
+		if (!next || !$.safe_get(dragging)) return;
+
+		var list = __spreadArray([], (_b = mirror.get(next.container)) !== null && _b !== void 0 ? _b : [], true);
+
+		var shadowItem = (
+			_a = {},
+			_a[SHADOW_KEY] = true,
+			_a.key = ("").concat(SHADOW_KEY, "-").concat($.safe_get(dragging).key),
+			_a
+		);
+
+		list.splice(Math.min(next.index, list.length), 0, shadowItem);
+		mirror.set(next.container, list);
+	}
+
+	function consider(next) {
+		if ((next === null || next === void 0 ? void 0 : next.container) === ($.safe_get(proposal) === null || $.safe_get(proposal) === void 0 ? void 0 : $.safe_get(proposal).container) && (next === null || next === void 0 ? void 0 : next.index) === ($.safe_get(proposal) === null || $.safe_get(proposal) === void 0 ? void 0 : $.safe_get(proposal).index)) return;
+
+		$.set(proposal, next, true);
+
+		if (hover === 'shadow') syncShadow(next);
+	}
+
+	function applyToMirror(move) {
+		var _a, _b;
+		var fromList = __spreadArray([], (_a = mirror.get(move.from.container)) !== null && _a !== void 0 ? _a : [], true);
+
+		var toList = move.from.container === move.to.container
+			? fromList
+			: __spreadArray([], (_b = mirror.get(move.to.container)) !== null && _b !== void 0 ? _b : [], true);
+
+		var srcIdx = fromList.findIndex(function (it) {
+			return opts.key(it) === opts.key(move.item);
+		});
+
+		if (srcIdx === -1) return;
+
+		fromList.splice(srcIdx, 1);
+
+		var 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) {
+		var _a;
+
+		for (var _i = 0, mirror_2 = mirror; _i < mirror_2.length; _i++) {
+			var _b = mirror_2[_i], cid = _b[0], list = _b[1];
+
+			var idx = list.findIndex(function (it) {
+				return opts.key(it) === opts.key(move.item);
+			});
+
+			if (idx !== -1) {
+				list.splice(idx, 1);
+				mirror.set(cid, list);
+
+				break;
+			}
+		}
+
+		var fromList = __spreadArray([], (_a = mirror.get(move.from.container)) !== null && _a !== void 0 ? _a : [], true);
+
+		fromList.splice(Math.min(move.from.index, fromList.length), 0, move.item);
+		mirror.set(move.from.container, fromList);
+	}
+
+	function finalize(dropped) {
+		var _a;
+		var drag = $.safe_get(dragging);
+		var to = dropped ? $.safe_get(proposal) : null;
+
+		$.set(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;
+		}
+
+		var move = { item: drag.item, from: drag.from, to };
+
+		applyToMirror(move);
+
+		if (opts.announce) announce(opts.announce(move));
+
+		var token = ((_a = seq.get(drag.key)) !== null && _a !== void 0 ? _a : 0) + 1;
+
+		seq.set(drag.key, token);
+		inFlight++;
+
+		opts.commit(move).catch(function (error) {
+			var _a;
+
+			if (seq.get(drag.key) === token) rollback(move);
+
+			(_a = opts.onError) === null || _a === void 0 ? void 0 : _a.call(opts, error, move);
+		}).finally(function () {
+			inFlight--;
+
+			if (inFlight === 0 && seedQueued && !$.safe_get(dragging)) {
+				seedQueued = false;
+				seed();
+			}
+		});
+	}
+
+	$.user_effect(function () {
+		return monitorForElements({
+			canMonitor(_a) {
+				var source = _a.source;
+
+				return isItemData(source.data, opts.type);
+			},
+
+			onDragStart(_a) {
+				var source = _a.source;
+				var d = source.data;
+
+				$.set(
+					dragging,
+					{
+						key: d.key,
+						item: d.item,
+						from: { container: d.container, index: d.index }
+					},
+					true
+				);
+			},
+
+			onDropTargetChange(_a) {
+				var location = _a.location;
+
+				consider(placementFrom(location.current.dropTargets));
+			},
+
+			onDrag(_a) {
+				var location = _a.location;
+
+				consider(placementFrom(location.current.dropTargets));
+			},
+
+			onDrop(_a) {
+				var location = _a.location;
+
+				finalize(location.current.dropTargets.length > 0);
+			}
+		});
+	});
+
+	return {
+		get(container) {
+			var _a;
+
+			return (_a = mirror.get(container)) !== null && _a !== void 0 ? _a : [];
+		},
+
+		containers() {
+			return __spreadArray([], mirror.keys(), true);
+		},
+
+		get dragging() {
+			return $.safe_get(dragging);
+		},
+
+		get proposal() {
+			return $.safe_get(proposal);
+		},
+
+		isSource(item) {
+			return ($.safe_get(dragging) === null || $.safe_get(dragging) === void 0 ? void 0 : $.safe_get(dragging).key) === opts.key(item);
+		},
+
+		isShadow(item) {
+			return !!item[SHADOW_KEY];
+		},
+
+		item(item, container, index) {
+			return {
+				data() {
+					return makeItemData({ type: opts.type, key: opts.key(item), item, container, index });
+				}
+			};
+		},
+
+		itemTarget(container, index) {
+			return {
+				data(feedback) {
+					return attachClosestEdge({ type: ("").concat(opts.type, "-target"), container, index }, {
+						input: feedback.input,
+						element: feedback.element,
+						allowedEdges: edges
+					});
+				},
+
+				accepts(d) {
+					return isItemData(d, opts.type);
+				},
+				sticky: true
+			};
+		},
+
+		containerTarget(container) {
+			return {
+				data() {
+					return { type: ("").concat(opts.type, "-target"), container };
+				},
+
+				accepts(d) {
+					return isItemData(d, opts.type);
+				}
+			};
+		}
+	};
+}

package/dist/dnd/index.d.ts

@@ -2,8 +2,8 @@ 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 { createDndBoard } from './createDndBoard';
+export type { BoardMove, DndBoardOptions } from './createDndBoard';
 export { default as DropIndicator } from './DropIndicator.svelte';
 export { autoScroll } from './autoScroll';
 export type { AutoScrollParams } from './autoScroll';

package/dist/dnd/index.js

@@ -1,6 +1,6 @@
 export { draggable } from './draggable';
 export { dropTarget } from './dropTarget';
-export { createDndBoard } from './createDndBoard.svelte';
+export { createDndBoard } from './createDndBoard';
 export { default as DropIndicator } from './DropIndicator.svelte';
 export { autoScroll } from './autoScroll';
 export { announce, cleanupAnnouncements } from './announce';

package/dist/dnd/types.d.ts

@@ -2,7 +2,16 @@ 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;

package/dist/index.d.ts

@@ -15,11 +15,11 @@ export { default as UserAvatar } from './components/UserAvatar.svelte';
 export { default as SidebarUserFooter } from './components/SidebarUserFooter.svelte';
 export { default as TaskTypeIcon } from './components/TaskTypeIcon.svelte';
 export { default as ConfirmDialog } from './components/ConfirmDialog.svelte';
-export { showConfirm, confirmDialog, cancelDialog, getPending } from './stores/confirmDialog.svelte';
-export type { ConfirmOptions } from './stores/confirmDialog.svelte';
+export { showConfirm, confirmDialog, cancelDialog, getPending } from './stores/confirmDialog';
+export type { ConfirmOptions } from './stores/confirmDialog';
 export { default as InputDialog } from './components/InputDialog.svelte';
-export { showInput, submitInput, cancelInput, getPendingInput } from './stores/inputDialog.svelte';
-export type { InputOptions } from './stores/inputDialog.svelte';
+export { showInput, submitInput, cancelInput, getPendingInput } from './stores/inputDialog';
+export type { InputOptions } from './stores/inputDialog';
 export { default as SearchDropdown } from './components/SearchDropdown.svelte';
 export { default as FilterDropdown } from './components/FilterDropdown.svelte';
 export { default as ContextMenu } from './components/ContextMenu.svelte';
@@ -158,16 +158,16 @@ export { play as playSound, registerSound, isSoundEnabled, setSoundEnabled } fro
 export { splitText } from './utils/splitText';
 export type { SplitBy, SplitTextOptions, SplitTextResult } from './utils/splitText';
 export { default as ToastHost } from './components/toast/ToastHost.svelte';
-export { showToast, dismissToast, getToasts } from './stores/toast.svelte';
-export type { Toast, ToastType, ToastOptions, DismissHandle } from './stores/toast.svelte';
+export { showToast, dismissToast, getToasts } from './stores/toast';
+export type { Toast, ToastType, ToastOptions, DismissHandle } from './stores/toast';
 export { default as Skeleton } from './components/Skeleton.svelte';
 export { default as ProgressBar } from './components/progress/ProgressBar.svelte';
 export { default as ProgressRing } from './components/progress/ProgressRing.svelte';
 export { default as Steps } from './components/progress/Steps.svelte';
 export { default as Tabs } from './components/Tabs.svelte';
 export { default as CommandPalette } from './components/CommandPalette.svelte';
-export { commandPalette } from './stores/commandPalette.svelte';
-export type { CommandItem } from './stores/commandPalette.svelte';
+export { commandPalette } from './stores/commandPalette';
+export type { CommandItem } from './stores/commandPalette';
 export { default as AnimatedNumber } from './components/AnimatedNumber.svelte';
 export { default as CopyButton } from './components/CopyButton.svelte';
 export { default as HoldToConfirm } from './components/HoldToConfirm.svelte';