@warkypublic/svelix 0.1.35 → 0.1.37

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

@@ -1,5 +1,6 @@
 export { default as Boxer } from './Boxer.svelte';
 export { default as BoxerTarget } from './BoxerTarget.svelte';
+export { BoxerBaseAdapter } from './BoxerBaseAdapter.js';
 export { BoxerResolveSpecAdapter } from './BoxerResolveSpecAdapter.js';
 export { BoxerRestHeaderSpecAdapter } from './BoxerRestHeaderSpecAdapter.js';
 export { createBoxerStore } from './store';

package/dist/components/Boxer/index.js

@@ -1,5 +1,6 @@
 export { default as Boxer } from './Boxer.svelte';
 export { default as BoxerTarget } from './BoxerTarget.svelte';
+export { BoxerBaseAdapter } from './BoxerBaseAdapter.js';
 export { BoxerResolveSpecAdapter } from './BoxerResolveSpecAdapter.js';
 export { BoxerRestHeaderSpecAdapter } from './BoxerRestHeaderSpecAdapter.js';
 export { createBoxerStore } from './store';

package/dist/components/Boxer/store.d.ts

@@ -1,23 +1,32 @@
 import type { BoxerItem, BoxerProps } from './types';
-export interface BoxerStoreState extends BoxerProps {
+export interface BoxerStoreState extends Omit<BoxerProps, 'error'> {
     boxerData: Array<BoxerItem>;
+    /** Runtime fetch error, distinct from the `error` prop used for form validation. */
+    error: string | null;
     hasMore: boolean;
     input: string;
     isFetching: boolean;
     opened: boolean;
     page: number;
     search: string;
+    selectedItems: Array<BoxerItem>;
     selectedOptionIndex: number;
     total: number;
 }
 export declare function createBoxerStore(initialProps: BoxerProps): {
+    addSelectedItem: (item: BoxerItem) => void;
+    cancel: () => void;
+    clearSelectedItems: () => void;
     fetchData: (search?: string, reset?: boolean) => Promise<void>;
     fetchMoreOnBottomReached: (target: HTMLDivElement) => void;
     loadMore: () => Promise<void>;
+    refetch: () => Promise<void>;
+    removeSelectedItem: (value: unknown) => void;
     set: (this: void, value: BoxerStoreState) => void;
     setInput: (input: string) => void;
     setOpened: (opened: boolean) => void;
     setSearch: (search: string) => void;
+    setSelectedItems: (items: Array<BoxerItem>) => void;
     setSelectedOptionIndex: (index: number) => void;
     subscribe: (this: void, run: import("svelte/store").Subscriber<BoxerStoreState>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
     update: (this: void, updater: import("svelte/store").Updater<BoxerStoreState>) => void;

package/dist/components/Boxer/store.js

@@ -1,11 +1,20 @@
-import { writable } from 'svelte/store';
+import { get, writable } from 'svelte/store';
+function valueKey(v) {
+    return typeof v === 'object' && v !== null ? JSON.stringify(v) : String(v);
+}
+function matchesLocal(item, needle, columns) {
+    const lower = needle.toLowerCase();
+    return columns.some((col) => String(item[col] ?? '').toLowerCase().includes(lower));
+}
 export function createBoxerStore(initialProps) {
-    const { data = [], dataSource = 'local', pageSize = 50, ...rest } = initialProps;
+    const { data = [], dataSource = 'local', error: _propError, pageSize = 50, ...rest } = initialProps;
+    void _propError;
     const initial = {
         ...rest,
         boxerData: data,
         data,
         dataSource,
+        error: null,
         hasMore: dataSource === 'server',
         input: '',
         isFetching: false,
@@ -13,74 +22,117 @@ export function createBoxerStore(initialProps) {
         page: 0,
         pageSize,
         search: '',
+        selectedItems: [],
         selectedOptionIndex: -1,
         total: data.length,
     };
-    const { subscribe, update, set } = writable(initial);
-    function getState() {
-        let current;
-        subscribe((s) => (current = s))();
-        return current;
-    }
-    let lastResetSearch;
+    const store = writable(initial);
+    const { subscribe, update, set } = store;
+    let requestCounter = 0;
+    let activeController = null;
     async function fetchData(search, reset) {
-        const state = getState();
+        const state = get(store);
+        // Local mode — synchronous filter
         if (state.dataSource === 'local' || !state.onAPICall) {
             const localData = state.data ?? [];
             if (!search) {
-                update((s) => ({ ...s, boxerData: localData, hasMore: false, total: localData.length }));
+                update((s) => ({
+                    ...s,
+                    boxerData: localData,
+                    error: null,
+                    hasMore: false,
+                    total: localData.length,
+                }));
                 return;
             }
-            const filtered = localData.filter((item) => item.label.toLowerCase().includes(search.toLowerCase()));
-            update((s) => ({ ...s, boxerData: filtered, hasMore: false, total: filtered.length }));
+            const cols = state.searchColumns && state.searchColumns.length > 0
+                ? state.searchColumns
+                : ['label'];
+            const filtered = localData.filter((item) => matchesLocal(item, search, cols));
+            update((s) => ({
+                ...s,
+                boxerData: filtered,
+                error: null,
+                hasMore: false,
+                total: filtered.length,
+            }));
             return;
         }
-        if (state.onAPICall) {
-            // Prevent concurrent fetches
-            if (state.isFetching)
+        // Server mode — cancel in-flight, issue new request
+        const onAPICall = state.onAPICall;
+        activeController?.abort();
+        const controller = new AbortController();
+        activeController = controller;
+        const thisRequestId = ++requestCounter;
+        const currentPage = reset ? 0 : state.page;
+        update((s) => ({ ...s, error: null, isFetching: true }));
+        try {
+            const result = await onAPICall({
+                page: currentPage,
+                pageSize: state.pageSize ?? 50,
+                search,
+                signal: controller.signal,
+            });
+            if (thisRequestId !== requestCounter)
+                return;
+            update((s) => {
+                const boxerData = reset ? result.data : [...(s.boxerData ?? []), ...result.data];
+                return {
+                    ...s,
+                    boxerData,
+                    error: null,
+                    hasMore: boxerData.length < result.total,
+                    isFetching: false,
+                    page: reset ? 0 : s.page,
+                    total: result.total,
+                };
+            });
+        }
+        catch (err) {
+            // Aborted by a newer fetch — newer fetch owns the state now.
+            if (controller.signal.aborted)
                 return;
-            // Prevent duplicate reset fetches for the same search term
-            if (reset && search === lastResetSearch && state.boxerData.length > 0)
+            if (thisRequestId !== requestCounter)
                 return;
-            try {
-                if (reset)
-                    lastResetSearch = search;
-                update((s) => ({ ...s, isFetching: true }));
-                const currentPage = reset ? 0 : state.page;
-                const result = await state.onAPICall({ page: currentPage, pageSize: state.pageSize ?? 50, search });
-                update((s) => {
-                    const boxerData = reset ? result.data : [...(s.boxerData ?? []), ...result.data];
-                    return {
-                        ...s,
-                        boxerData,
-                        hasMore: boxerData.length < result.total,
-                        isFetching: false,
-                        page: reset ? 0 : s.page,
-                        total: result.total,
-                    };
-                });
-            }
-            catch (error) {
-                console.error('Boxer fetchData error:', error);
-                update((s) => ({ ...s, isFetching: false }));
-            }
+            const message = err instanceof Error ? err.message : String(err);
+            console.error('Boxer fetchData error:', err);
+            update((s) => ({ ...s, error: message, isFetching: false }));
+        }
+        finally {
+            if (activeController === controller)
+                activeController = null;
         }
     }
     async function loadMore() {
-        const state = getState();
+        const state = get(store);
         if (!state.hasMore || state.isFetching)
             return;
+        const prevPage = state.page;
         update((s) => ({ ...s, page: s.page + 1 }));
         await fetchData(state.search);
+        // Revert the page bump if the fetch errored (so next retry fetches the same page).
+        const after = get(store);
+        if (after.error && after.page === prevPage + 1) {
+            update((s) => ({ ...s, page: prevPage }));
+        }
     }
     function fetchMoreOnBottomReached(target) {
-        const state = getState();
+        const state = get(store);
         if (!state.hasMore || state.isFetching)
             return;
         const pct = (target.scrollTop + target.clientHeight) / target.scrollHeight;
         if (pct > 0.8)
             loadMore();
     }
+    function refetch() {
+        const state = get(store);
+        return fetchData(state.search, true);
+    }
+    function cancel() {
+        activeController?.abort();
+        activeController = null;
+        update((s) => (s.isFetching ? { ...s, isFetching: false } : s));
+    }
     function setOpened(opened) {
         update((s) => ({ ...s, opened }));
     }
@@ -93,17 +145,57 @@ export function createBoxerStore(initialProps) {
     function setSelectedOptionIndex(index) {
         update((s) => ({ ...s, selectedOptionIndex: index }));
     }
+    function addSelectedItem(item) {
+        update((s) => {
+            const key = valueKey(item.value);
+            if (s.selectedItems.some((i) => valueKey(i.value) === key))
+                return s;
+            return { ...s, selectedItems: [...s.selectedItems, item] };
+        });
+    }
+    function removeSelectedItem(value) {
+        update((s) => {
+            const key = valueKey(value);
+            const next = s.selectedItems.filter((i) => valueKey(i.value) !== key);
+            if (next.length === s.selectedItems.length)
+                return s;
+            return { ...s, selectedItems: next };
+        });
+    }
+    function setSelectedItems(items) {
+        update((s) => ({ ...s, selectedItems: items }));
+    }
+    function clearSelectedItems() {
+        update((s) => (s.selectedItems.length === 0 ? s : { ...s, selectedItems: [] }));
+    }
     function updateProps(props) {
-        update((s) => ({ ...s, ...props }));
+        update((s) => {
+            const merged = { ...s, ...props };
+            // Keep boxerData consistent with data in local mode.
+            if ((props.data !== undefined || props.dataSource !== undefined) &&
+                merged.dataSource === 'local') {
+                const localData = merged.data ?? [];
+                merged.boxerData = localData;
+                merged.total = localData.length;
+                merged.hasMore = false;
+            }
+            return merged;
+        });
     }
     return {
+        addSelectedItem,
+        cancel,
+        clearSelectedItems,
         fetchData,
         fetchMoreOnBottomReached,
         loadMore,
+        refetch,
+        removeSelectedItem,
         set,
         setInput,
         setOpened,
         setSearch,
+        setSelectedItems,
         setSelectedOptionIndex,
         subscribe,
         update,

package/dist/components/Boxer/types.d.ts

@@ -24,15 +24,19 @@ export interface BoxerAdapterConfig {
     /** Custom row-to-BoxerItem mapping. When omitted, `labelField` and `valueField` are mapped automatically. */
     mapItem?: (row: any) => BoxerItem;
 }
+export interface BoxerFetchParams {
+    page: number;
+    pageSize: number;
+    search?: string;
+    signal?: AbortSignal;
+}
 export interface BoxerServerAdapter {
-    fetch(params: {
-        page: number;
-        pageSize: number;
-        search?: string;
-    }): Promise<{
+    fetch(params: BoxerFetchParams): Promise<{
         data: BoxerItem[];
         total: number;
     }>;
+    /** Resolve BoxerItems for a list of selected values. Used to display labels for preloaded values not in the current page. */
+    resolveByValue?(values: any[], signal?: AbortSignal): Promise<BoxerItem[]>;
 }
 export type BoxerItem = {
     [key: string]: any;
@@ -45,6 +49,8 @@ export interface BoxerProps {
     clearable?: boolean;
     data?: Array<BoxerItem>;
     dataSource?: BoxerDataSource;
+    /** Debounce interval in ms for search-triggered fetches. Defaults to `300`. */
+    debounceMs?: number;
     disablePortal?: boolean;
     disabled?: boolean;
     error?: string;
@@ -54,21 +60,21 @@ export interface BoxerProps {
     mah?: number;
     multiSelect?: boolean;
     name?: string;
-    onAPICall?: (params: {
-        page: number;
-        pageSize: number;
-        search?: string;
-    }) => Promise<{
+    onAPICall?: (params: BoxerFetchParams) => Promise<{
         data: Array<BoxerItem>;
         total: number;
     }>;
     onBufferChange?: (buffer: Array<BoxerItem> | BoxerItem | null) => void;
     onChange?: (value: any | Array<any>) => void;
+    /** Resolve labels for preloaded values that may not be in the current page (server-mode initial values). */
+    onResolveValues?: (values: any[], signal?: AbortSignal) => Promise<Array<BoxerItem>>;
     openOnClear?: boolean;
     pageSize?: number;
     placeholder?: string;
     rightSection?: Snippet;
     searchable?: boolean;
+    /** Columns to search against in `local` mode. Falls back to `['label']`. */
+    searchColumns?: string[];
     selectFirst?: boolean;
     showAll?: boolean;
     value?: any | Array<any>;
@@ -79,5 +85,6 @@ export interface BoxerRef {
     focus: () => void;
     getValue: () => any | Array<any>;
     open: () => void;
+    refetch: () => void;
     setValue: (value: any | Array<any>) => void;
 }

package/dist/components/ContentEditor/subcomponents/MonacoEditor.svelte

@@ -35,7 +35,8 @@
       isDark = nextIsDark;
     });
 
-    editor = monaco.editor.create(container!, {
+    if (!container) return;
+    editor = monaco.editor.create(container, {
       value: '',
       language: lang,
       readOnly: readonly,
@@ -43,15 +44,16 @@
       automaticLayout: true,
     });
 
-    editor.onDidChangeModelContent(() => {
+    const createdEditor = editor;
+    createdEditor.onDidChangeModelContent(() => {
       if (changeGuard) return;
-      const content = editor!.getValue();
+      const content = createdEditor.getValue();
       onChange?.(new Blob([content]));
     });
 
-    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+    createdEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
       if (!onSave) return;
-      onSave(new Blob([editor!.getValue()]));
+      onSave(new Blob([createdEditor.getValue()]));
     });
 
     function doInsertText(text: string): void {
@@ -74,10 +76,11 @@
   // Sync incoming Blob → editor text
   $effect(() => {
     if (!editor || !value) return;
+    const currentEditor = editor;
     blobToString(value).then((text) => {
-      if (editor!.getValue() !== text) {
+      if (currentEditor.getValue() !== text) {
         changeGuard = true;
-        editor!.setValue(text);
+        currentEditor.setValue(text);
         changeGuard = false;
       }
     });

package/dist/components/GlobalStateStore/GlobalStateStore.js

@@ -108,6 +108,7 @@ const computeIsLoggedIn = (session) => {
     }
     return !isSessionExpired(session);
 };
+const VALIDATION_FAILURE_BACKOFF_MS = 5000;
 const createGlobalStateStore = () => {
     const initialState = createInitialState();
     let isStorageInitialized = false;
@@ -115,9 +116,14 @@ const createGlobalStateStore = () => {
     let operationLock = Promise.resolve();
     let hasAutoValidated = false;
     let validationScheduled = false;
+    let lastValidationFailureAt = 0;
     const scheduleValidation = () => {
         if (validationScheduled)
             return;
+        if (lastValidationFailureAt &&
+            Date.now() - lastValidationFailureAt < VALIDATION_FAILURE_BACKOFF_MS) {
+            return;
+        }
         validationScheduled = true;
         waitForInitialization()
             .then(() => withOperationLock(() => fetchDataInternal()))
@@ -131,9 +137,10 @@ const createGlobalStateStore = () => {
         const before = get(store);
         store.update((current) => {
             const nextPartial = typeof partial === "function" ? partial(current) : partial;
-            return replace
-                ? nextPartial
-                : { ...current, ...nextPartial };
+            if (replace) {
+                return { ...actions, ...nextPartial };
+            }
+            return { ...current, ...nextPartial };
         });
         const after = get(store);
         const handlerJustRegistered = !hasAutoValidated &&
@@ -260,6 +267,7 @@ const createGlobalStateStore = () => {
         }
         catch (e) {
             const error = `Load Exception: ${String(e)}`;
+            lastValidationFailureAt = Date.now();
             setGlobalState((state) => ({
                 session: {
                     ...state.session,
@@ -268,7 +276,9 @@ const createGlobalStateStore = () => {
                     loading: false,
                 },
             }));
+            return;
         }
+        lastValidationFailureAt = 0;
     };
     const actions = {
         fetchData: async (url) => {
@@ -345,10 +355,12 @@ const createGlobalStateStore = () => {
             return withOperationLock(async () => {
                 const previousState = getState();
                 try {
+                    const blank = createInitialState();
                     setGlobalState((state) => ({
-                        ...createInitialState(),
+                        ...blank,
+                        initialized: true,
                         session: {
-                            ...createInitialState().session,
+                            ...blank.session,
                             apiURL: state.session.apiURL,
                             expiryDate: undefined,
                             loading: true,
@@ -485,6 +497,7 @@ const createGlobalStateStore = () => {
         isStorageInitialized = true;
         initializationPromise = null;
     });
+    let lastPersistedState;
     store.subscribe((state) => {
         if (!isStorageInitialized) {
             return;
@@ -495,9 +508,11 @@ const createGlobalStateStore = () => {
             typeof state.onFetchSession === "function") {
             scheduleValidation();
         }
-        saveStorage(toPersistedState(state)).catch((e) => {
+        const nextPersisted = toPersistedState(state);
+        saveStorage(nextPersisted, lastPersistedState).catch((e) => {
             console.error("Error saving storage:", e);
         });
+        lastPersistedState = nextPersisted;
     });
     return {
         getState,

package/dist/components/GlobalStateStore/GlobalStateStore.utils.d.ts

@@ -1,4 +1,4 @@
 import type { PersistedGlobalState } from './GlobalStateStore.types';
 declare function loadStorage(): Promise<Partial<PersistedGlobalState>>;
-declare function saveStorage(state: PersistedGlobalState): Promise<void>;
+declare function saveStorage(state: PersistedGlobalState, previous?: Partial<PersistedGlobalState>): Promise<void>;
 export { loadStorage, saveStorage };

package/dist/components/GlobalStateStore/GlobalStateStore.utils.js

@@ -75,8 +75,10 @@ async function loadStorage() {
     }
     return result;
 }
-async function saveStorage(state) {
+async function saveStorage(state, previous) {
     for (const key of PERSIST_KEYS) {
+        if (previous && previous[key] === state[key])
+            continue;
         const storageKey = `${STORAGE_KEY}:${key}`;
         const filtered = filterState(state[key], key);
         const serialized = JSON.stringify(filtered);

package/dist/components/GlobalStateStore/GlobalStateStoreProvider.svelte

@@ -40,6 +40,12 @@
 	let lastFetchTime = 0;
 	let fetchInProgress = false;
 	let mounted = false;
+	let storeInitialized = $state(GetGlobalState().initialized);
+	let lastHandlers: {
+		onFetchSession?: Props['onFetchSession'];
+		onLogin?: Props['onLogin'];
+		onLogout?: Props['onLogout'];
+	} = {};
 
 	const throttledFetch = async (url?: string): Promise<void> => {
 		const now = Date.now();
@@ -67,30 +73,40 @@
 	};
 
 	$effect(() => {
+		const unsubscribe = GlobalStateStore.subscribe((state) => {
+			storeInitialized = state.initialized;
+		});
+		return unsubscribe;
+	});
+
+	$effect(() => {
+		if (!storeInitialized) return;
 		if (apiURL) {
 			GlobalStateStore.getState().setApiURL(apiURL);
 		}
 	});
 
 	$effect(() => {
+		if (!storeInitialized) return;
 		if (program) {
 			GlobalStateStore.getState().setProgram(program);
 		}
 	});
 
 	$effect(() => {
-		GlobalStateStore.setState({ onFetchSession });
-	});
-
-	$effect(() => {
-		GlobalStateStore.setState({ onLogin });
-	});
-
-	$effect(() => {
-		GlobalStateStore.setState({ onLogout });
+		if (
+			onFetchSession === lastHandlers.onFetchSession &&
+			onLogin === lastHandlers.onLogin &&
+			onLogout === lastHandlers.onLogout
+		) {
+			return;
+		}
+		lastHandlers = { onFetchSession, onLogin, onLogout };
+		GlobalStateStore.setState({ onFetchSession, onLogin, onLogout });
 	});
 
 	$effect(() => {
+		if (!storeInitialized) return;
 		if (!mounted) {
 			mounted = true;
 			if (autoFetch && fetchOnMount) {

package/dist/components/Gridler/components/Gridler.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   // @ts-nocheck
   import type { Snippet } from "svelte";
-  import { untrack } from "svelte";
   import type {
     GridlerProps,
     GridlerColumn,
@@ -74,7 +73,7 @@
     sortOrder,
     onFilterChange: _onFilterChange,
     filters: _filters,
-    selectedItems,
+    selectedItems: _selectedItems,
     onSelectedItemsChange: _onSelectedItemsChange,
     getRowData,
     settings,
@@ -123,8 +122,13 @@
 
   // ── Selection / editing state ────────────────────────────────────────────────
 
-  let currentSelection = $state<Selection>(untrack(() => selection));
+  let currentSelection = $state<Selection>({ type: "none" });
   let focusedCell = $state<Item | null>(null);
+
+  $effect(() => {
+    if (!selection || selection.type === "none") return;
+    currentSelection = selection;
+  });
   let isEditing = $state(false);
   let editingCell = $state<Item | null>(null);
 
@@ -211,10 +215,14 @@
     }
 
     if (lines.length > 0) {
-      await navigator.clipboard.writeText(lines.join("\n"));
-      canvasComponent?.setAnnouncement(
-        `Copied ${lines.length} row${lines.length > 1 ? "s" : ""} to clipboard`,
-      );
+      try {
+        await navigator.clipboard.writeText(lines.join("\n"));
+        canvasComponent?.setAnnouncement(
+          `Copied ${lines.length} row${lines.length > 1 ? "s" : ""} to clipboard`,
+        );
+      } catch {
+        canvasComponent?.setAnnouncement("Clipboard access denied");
+      }
     }
   }
 
@@ -222,7 +230,13 @@
     if (resolvedReadonly) return;
     const fc = canvasComponent?.getFocusedCell() ?? focusedCell;
     if (!fc) return;
-    const text = await navigator.clipboard.readText();
+    let text: string;
+    try {
+      text = await navigator.clipboard.readText();
+    } catch {
+      canvasComponent?.setAnnouncement("Clipboard access denied");
+      return;
+    }
     const pastedRows = text.split("\n").map((line) => line.split("\t"));
     const [startCol, startRow] = fc;
 
@@ -413,6 +427,7 @@
   width={typeof width === "number" ? `${width}px` : (width ?? "100%")}
   height={typeof height === "number" ? `${height}px` : (height ?? "400px")}
   {mergedTheme}
+  {isDarkMode}
   {headerHeight}
   {rowHeight}
   readonly={resolvedReadonly}
@@ -460,8 +475,10 @@
   onRowContextMenu={(row) => {
     onRowContextMenu?.(row);
   }}
-  onColumnResized={(col, width) => {
-    onGridEvent?.("column_resized", undefined, columns[col], undefined, { width });
+  onColumnResized={(col, newWidth) => {
+    columns[col].width = newWidth;
+    columns[col].grow = 0;
+    onGridEvent?.("column_resized", undefined, columns[col], undefined, { width: newWidth });
   }}
   onGridResize={(width, height) => {
     onGridEvent?.("resize", undefined, undefined, undefined, { width, height });