@warkypublic/svelix 0.1.8 → 0.1.10

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

@@ -17,3 +17,5 @@ export declare const Local: Story;
 export declare const MultiSelect: Story;
 export declare const Clearable: Story;
 export declare const WithSearch: Story;
+export declare const WithResolveSpec: Story;
+export declare const WithHeaderSpec: Story;

package/dist/components/Boxer/Boxer.stories.js

@@ -1,5 +1,7 @@
 import { expect, userEvent, within } from '@storybook/test';
 import Boxer from './Boxer.svelte';
+import { BoxerResolveSpecAdapter } from './BoxerResolveSpecAdapter.js';
+import { BoxerRestHeaderSpecAdapter } from './BoxerRestHeaderSpecAdapter.js';
 const meta = {
     title: 'Components/Boxer',
     component: Boxer,
@@ -100,3 +102,73 @@ export const WithSearch = {
         expect(canvas.queryByText('Banana')).toBeFalsy();
     },
 };
+export const WithResolveSpec = {
+    argTypes: {
+        apiUrl: { control: 'text', description: 'ResolveSpec API base URL' },
+        authToken: { control: 'text', description: 'Bearer token for ResolveSpec authentication' },
+        schema: { control: 'text', description: 'Database schema' },
+        entity: { control: 'text', description: 'Entity / table name' },
+        labelField: { control: 'text', description: 'Field to display as the label' },
+        valueField: { control: 'text', description: 'Field to use as the selected value' },
+    },
+    args: {
+        apiUrl: "https://utils.btsys.tech/api/v2",
+        authToken: 'A684939F-BA4F-4CC1-9F5F-7050A2637171',
+        schema: 'public',
+        entity: "process",
+        labelField: "process",
+        valueField: "id_process",
+        label: 'ResolveSpec Select',
+        placeholder: 'Search...',
+        searchable: true,
+    },
+    render: ({ apiUrl, authToken, schema, entity, labelField, valueField, ...rest }) => ({
+        Component: Boxer,
+        props: {
+            ...rest,
+            adapter: new BoxerResolveSpecAdapter({
+                baseUrl: apiUrl,
+                token: authToken,
+                schema,
+                entity,
+                labelField,
+                valueField,
+            }),
+        },
+    }),
+};
+export const WithHeaderSpec = {
+    argTypes: {
+        apiUrl: { control: 'text', description: 'HeaderSpec API base URL' },
+        authToken: { control: 'text', description: 'Bearer token for HeaderSpec authentication' },
+        schema: { control: 'text', description: 'Database schema' },
+        entity: { control: 'text', description: 'Entity / table name' },
+        labelField: { control: 'text', description: 'Field to display as the label' },
+        valueField: { control: 'text', description: 'Field to use as the selected value' },
+    },
+    args: {
+        apiUrl: 'https://api.example.com',
+        authToken: 'your-token-here',
+        schema: 'public',
+        entity: 'items',
+        labelField: 'name',
+        valueField: 'id',
+        label: 'HeaderSpec Select',
+        placeholder: 'Search...',
+        searchable: true,
+    },
+    render: ({ apiUrl, authToken, schema, entity, labelField, valueField, ...rest }) => ({
+        Component: Boxer,
+        props: {
+            ...rest,
+            adapter: new BoxerRestHeaderSpecAdapter({
+                baseUrl: apiUrl,
+                token: authToken,
+                schema,
+                entity,
+                labelField,
+                valueField,
+            }),
+        },
+    }),
+};

package/dist/components/Boxer/Boxer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-non-null-assertion */
+  import { untrack } from "svelte";
   import {
     createVirtualizer,
     type SvelteVirtualizer,
@@ -7,19 +8,19 @@
   import type { BoxerItem, BoxerProps } from "./types";
   import { createBoxerStore } from "./store";
   import BoxerTarget from "./BoxerTarget.svelte";
-  import Portal from "../Portal/Portal.svelte";
 
   let {
+    adapter,
     clearable = true,
     data = [],
-    dataSource = "local",
+    dataSource: dataSourceProp = undefined,
     disabled,
     error,
     label,
     leftSection,
     mah = 200,
     multiSelect,
-    onAPICall,
+    onAPICall: onAPICallProp = undefined,
     onBufferChange,
     onChange,
     openOnClear,
@@ -31,6 +32,15 @@
     value = $bindable<any>(undefined),
   }: BoxerProps = $props();
 
+  // Derive effective dataSource and onAPICall from adapter when not explicitly provided
+  const dataSource = dataSourceProp ?? (adapter ? "server" : "local");
+  const onAPICall =
+    onAPICallProp ??
+    (adapter
+      ? (params: { page: number; pageSize: number; search?: string }) =>
+          adapter!.fetch(params)
+      : undefined);
+
   // Create store once with initial props
   const store = createBoxerStore({
     clearable,
@@ -52,8 +62,13 @@
     value,
   });
 
-  // Use $store auto-subscribe (Svelte 5 runes mode supports $store syntax)
-  // This correctly triggers re-renders when the store updates from external calls (e.g. open())
+  // Fine-grained derived values so $effect blocks only re-run when the
+  // specific field they care about actually changes (not on every store update).
+  const storeSearch = $derived($store.search);
+  const storeOpened = $derived($store.opened);
+  const storeBoxerData = $derived($store.boxerData);
+  const storeInput = $derived($store.input);
+  const boxerDataLength = $derived($store.boxerData.length);
 
   // Sync value prop changes into store
   $effect(() => {
@@ -63,31 +78,45 @@
   // Virtualizer
   let parentEl = $state<HTMLDivElement | undefined>(undefined);
   let targetRef = $state<{ focus: () => void } | undefined>(undefined);
-  let virtualizerInstance = $state<SvelteVirtualizer<
+  // Plain variable — NOT $state to avoid deep proxy on the complex virtualizer object.
+  let rawVirtualizer: SvelteVirtualizer<
     HTMLDivElement,
     HTMLDivElement
-  > | null>(null);
+  > | null = null;
+  // Virtualizer outputs as $state — updated directly by the subscribe callback.
+  let virtualItems = $state.raw<
+    ReturnType<
+      SvelteVirtualizer<HTMLDivElement, HTMLDivElement>["getVirtualItems"]
+    >
+  >([]);
+  let totalSize = $state(0);
 
+  // Create virtualizer only when parentEl changes (dropdown mount/unmount).
   $effect(() => {
     if (!parentEl) {
-      virtualizerInstance = null;
+      rawVirtualizer = null;
+      virtualItems = [];
+      totalSize = 0;
       return;
     }
+    const initialCount = untrack(() => boxerDataLength);
     const v = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-      count: $store.boxerData.length,
+      count: initialCount,
       estimateSize: () => 36,
       getScrollElement: () => parentEl!,
     });
     return v.subscribe((instance) => {
-      virtualizerInstance = instance;
+      rawVirtualizer = instance;
+      virtualItems = instance.getVirtualItems();
+      totalSize = instance.getTotalSize();
     });
   });
 
-  // Update virtualizer count when data changes
+  // Update virtualizer count when data length actually changes (preserves scroll).
   $effect(() => {
-    const count = $store.boxerData.length;
-    if (virtualizerInstance && parentEl) {
-      virtualizerInstance.setOptions({
+    const count = boxerDataLength;
+    if (rawVirtualizer && parentEl) {
+      rawVirtualizer.setOptions({
         count,
         estimateSize: () => 36,
         getScrollElement: () => parentEl!,
@@ -95,18 +124,14 @@
     }
   });
 
-  const virtualItems = $derived(virtualizerInstance?.getVirtualItems() ?? []);
-  const totalSize = $derived(virtualizerInstance?.getTotalSize() ?? 0);
-
-  // Debounced search
+  // Debounced search — only reacts to actual search text changes, not unrelated store updates.
   let searchTimeout: ReturnType<typeof setTimeout> | undefined;
 
   $effect(() => {
-    const search = $store.search;
-    const opened = $store.opened;
+    const search = storeSearch;
     clearTimeout(searchTimeout);
     searchTimeout = setTimeout(() => {
-      if (search !== undefined && opened) {
+      if (search !== undefined && storeOpened) {
         store.fetchData(search, true);
       }
     }, 300);
@@ -120,9 +145,9 @@
 
   // Sync value -> input label
   $effect(() => {
-    const boxerData = $store.boxerData;
-    const opened = $store.opened;
-    const currentInput = $store.input;
+    const boxerData = storeBoxerData;
+    const opened = storeOpened;
+    const currentInput = storeInput;
 
     if (multiSelect) {
       const labels = boxerData
@@ -159,7 +184,7 @@
 
   // Select first
   $effect(() => {
-    const boxerData = $store.boxerData;
+    const boxerData = storeBoxerData;
     if (selectFirst && boxerData.length > 0 && !multiSelect && !value) {
       onOptionSubmit(0);
     }

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

@@ -0,0 +1,17 @@
+import type { BoxerAdapterConfig, BoxerItem, BoxerServerAdapter } from './types.js';
+export declare class BoxerResolveSpecAdapter implements BoxerServerAdapter {
+    private readonly client;
+    private readonly config;
+    constructor(config: BoxerAdapterConfig);
+    fetch({ page, pageSize, search }: {
+        page: number;
+        pageSize: number;
+        search?: string;
+    }): Promise<{
+        data: BoxerItem[];
+        total: number;
+    }>;
+    private resolveColumns;
+    private buildSearchFilters;
+    private mapRow;
+}

package/dist/components/Boxer/BoxerResolveSpecAdapter.js

@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ResolveSpecClient } from '@warkypublic/resolvespec-js';
+export class BoxerResolveSpecAdapter {
+    client;
+    config;
+    constructor(config) {
+        this.client = new ResolveSpecClient({ baseUrl: config.baseUrl, token: config.token });
+        this.config = {
+            labelField: 'label',
+            valueField: 'id',
+            searchOperator: 'ilike',
+            ...config,
+        };
+    }
+    async fetch({ page, pageSize, search }) {
+        const { schema, entity, labelField, valueField, columns, sort, filters, searchColumns, searchOperator, mapItem } = this.config;
+        const cols = this.resolveColumns(columns, labelField, valueField);
+        const searchFilters = this.buildSearchFilters(search, labelField, searchColumns, searchOperator);
+        const options = {
+            columns: cols,
+            sort: sort ?? [],
+            filters: [...(filters ?? []), ...searchFilters],
+            limit: pageSize,
+            offset: page * pageSize,
+        };
+        const response = await this.client.read(schema, entity, undefined, options);
+        const rows = Array.isArray(response?.data) ? response.data : (Array.isArray(response) ? response : []);
+        const total = response?.metadata?.total ?? rows.length;
+        return {
+            data: rows.map((row) => this.mapRow(row, labelField, valueField, mapItem)),
+            total,
+        };
+    }
+    resolveColumns(columns, labelField, valueField) {
+        if (!columns)
+            return undefined;
+        return [...new Set([...columns, labelField, valueField])];
+    }
+    buildSearchFilters(search, labelField, searchColumns, searchOperator) {
+        const trimmed = search?.trim();
+        if (!trimmed)
+            return [];
+        const cols = searchColumns?.length ? searchColumns : [labelField];
+        return cols.map((column, index) => ({
+            column,
+            operator: searchOperator,
+            value: `%${trimmed}%`,
+            logic_operator: index === 0 ? 'AND' : 'OR',
+        }));
+    }
+    mapRow(row, labelField, valueField, mapItem) {
+        if (mapItem)
+            return mapItem(row);
+        return { ...row, label: String(row[labelField] ?? ''), value: row[valueField] };
+    }
+}

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

@@ -0,0 +1,17 @@
+import type { BoxerAdapterConfig, BoxerItem, BoxerServerAdapter } from './types.js';
+export declare class BoxerRestHeaderSpecAdapter implements BoxerServerAdapter {
+    private readonly client;
+    private readonly config;
+    constructor(config: BoxerAdapterConfig);
+    fetch({ page, pageSize, search }: {
+        page: number;
+        pageSize: number;
+        search?: string;
+    }): Promise<{
+        data: BoxerItem[];
+        total: number;
+    }>;
+    private resolveColumns;
+    private buildSearchFilters;
+    private mapRow;
+}

package/dist/components/Boxer/BoxerRestHeaderSpecAdapter.js

@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { HeaderSpecClient } from '@warkypublic/resolvespec-js';
+export class BoxerRestHeaderSpecAdapter {
+    client;
+    config;
+    constructor(config) {
+        this.client = new HeaderSpecClient({ baseUrl: config.baseUrl, token: config.token });
+        this.config = {
+            labelField: 'label',
+            valueField: 'id',
+            searchOperator: 'ilike',
+            ...config,
+        };
+    }
+    async fetch({ page, pageSize, search }) {
+        const { schema, entity, labelField, valueField, columns, sort, filters, searchColumns, searchOperator, mapItem } = this.config;
+        const cols = this.resolveColumns(columns, labelField, valueField);
+        const searchFilters = this.buildSearchFilters(search, labelField, searchColumns, searchOperator);
+        const options = {
+            columns: cols,
+            sort: sort ?? [],
+            filters: [...(filters ?? []), ...searchFilters],
+            limit: pageSize,
+            offset: page * pageSize,
+        };
+        const response = await this.client.read(schema, entity, undefined, options);
+        const rows = Array.isArray(response?.data) ? response.data : (Array.isArray(response) ? response : []);
+        const total = response?.metadata?.total ?? rows.length;
+        return {
+            data: rows.map((row) => this.mapRow(row, labelField, valueField, mapItem)),
+            total,
+        };
+    }
+    resolveColumns(columns, labelField, valueField) {
+        if (!columns)
+            return undefined;
+        return [...new Set([...columns, labelField, valueField])];
+    }
+    buildSearchFilters(search, labelField, searchColumns, searchOperator) {
+        const trimmed = search?.trim();
+        if (!trimmed)
+            return [];
+        const cols = searchColumns?.length ? searchColumns : [labelField];
+        return cols.map((column, index) => ({
+            column,
+            operator: searchOperator,
+            value: `%${trimmed}%`,
+            logic_operator: index === 0 ? 'AND' : 'OR',
+        }));
+    }
+    mapRow(row, labelField, valueField, mapItem) {
+        if (mapItem)
+            return mapItem(row);
+        return { ...row, label: String(row[labelField] ?? ''), value: row[valueField] };
+    }
+}

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

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

package/dist/components/Boxer/index.js

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

package/dist/components/Boxer/store.js

@@ -22,6 +22,7 @@ export function createBoxerStore(initialProps) {
         subscribe((s) => (current = s))();
         return current;
     }
+    let lastResetSearch;
     async function fetchData(search, reset) {
         const state = getState();
         if (state.dataSource === 'local' || !state.onAPICall) {
@@ -35,7 +36,15 @@ export function createBoxerStore(initialProps) {
             return;
         }
         if (state.onAPICall) {
+            // Prevent concurrent fetches
+            if (state.isFetching)
+                return;
+            // Prevent duplicate reset fetches for the same search term
+            if (reset && search === lastResetSearch && state.boxerData.length > 0)
+                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 });

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

@@ -1,11 +1,47 @@
 import type { Snippet } from 'svelte';
+import type { FilterOption, SortOption } from '@warkypublic/resolvespec-js';
 export type BoxerDataSource = 'local' | 'server';
+export type BoxerClientType = 'body' | 'header';
+export interface BoxerAdapterConfig {
+    baseUrl: string;
+    token?: string;
+    schema: string;
+    entity: string;
+    /** Field to display as the label. Defaults to `'label'`. */
+    labelField?: string;
+    /** Field to use as the selected value. Defaults to `'id'`. */
+    valueField?: string;
+    /** Columns to fetch. When omitted, all columns are fetched. `labelField` and `valueField` are always included. */
+    columns?: string[];
+    /** Default sort applied to every request. */
+    sort?: SortOption[];
+    /** Base filters always applied to every request. */
+    filters?: FilterOption[];
+    /** Columns to search against. Defaults to `[labelField]`. */
+    searchColumns?: string[];
+    /** Filter operator used for search. Defaults to `'ilike'`. */
+    searchOperator?: string;
+    /** Custom row-to-BoxerItem mapping. When omitted, `labelField` and `valueField` are mapped automatically. */
+    mapItem?: (row: any) => BoxerItem;
+}
+export interface BoxerServerAdapter {
+    fetch(params: {
+        page: number;
+        pageSize: number;
+        search?: string;
+    }): Promise<{
+        data: BoxerItem[];
+        total: number;
+    }>;
+}
 export type BoxerItem = {
     [key: string]: any;
     label: string;
     value: any;
 };
 export interface BoxerProps {
+    /** Server adapter (ResolveSpec or HeaderSpec). Automatically sets `dataSource` to `'server'` when provided. */
+    adapter?: BoxerServerAdapter;
     clearable?: boolean;
     data?: Array<BoxerItem>;
     dataSource?: BoxerDataSource;

package/dist/components/Former/Former.stories.js

@@ -51,10 +51,17 @@ export const DeleteUser = {
     render: () => ({ Component: FormerPreview, props: { request: 'delete' } }),
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
-        // Save button in delete mode should be present and not disabled
-        const saveBtn = canvas.getByRole('button', { name: /save/i });
-        await expect(saveBtn).toBeVisible();
-        await expect(saveBtn).not.toBeDisabled();
+        // Form fields should be disabled in delete mode
+        const textInputs = canvas.getAllByRole('textbox');
+        await expect(textInputs[0]).toBeDisabled();
+        // Delete button should be disabled until confirmation is checked
+        const deleteBtn = canvas.getByRole('button', { name: /delete/i });
+        await expect(deleteBtn).toBeDisabled();
+        // Check the confirmation checkbox
+        const confirmCheckbox = canvas.getByRole('checkbox', { name: /confirm.*delete/i });
+        await userEvent.click(confirmCheckbox);
+        // Delete button should now be enabled
+        await expect(deleteBtn).not.toBeDisabled();
     },
 };
 export const ViewUser = {
@@ -148,9 +155,16 @@ export const ModalDelete = {
         await userEvent.click(canvas.getByRole('button', { name: /open form/i }));
         const body = within(document.body);
         await expect(body.getByRole('heading', { name: /delete record/i })).toBeVisible();
-        // Save is always enabled in delete mode
-        const saveBtn = body.getByRole('button', { name: /save/i });
-        await expect(saveBtn).not.toBeDisabled();
+        // Form fields should be disabled
+        const textInputs = body.getAllByRole('textbox');
+        await expect(textInputs[0]).toBeDisabled();
+        // Delete button should be disabled until confirmation is checked
+        const deleteBtn = body.getByRole('button', { name: /delete/i });
+        await expect(deleteBtn).toBeDisabled();
+        // Check the confirmation checkbox
+        const confirmCheckbox = body.getByRole('checkbox', { name: /confirm.*delete/i });
+        await userEvent.click(confirmCheckbox);
+        await expect(deleteBtn).not.toBeDisabled();
     },
 };
 // ── Drawer layout ─────────────────────────────────────────────────────────────
@@ -188,8 +202,16 @@ export const DrawerDelete = {
         await userEvent.click(canvas.getByRole('button', { name: /open drawer/i }));
         const body = within(document.body);
         await expect(body.getByRole('heading', { name: /delete record/i })).toBeVisible();
-        const saveBtn = body.getByRole('button', { name: /save/i });
-        await expect(saveBtn).not.toBeDisabled();
+        // Form fields should be disabled
+        const textInputs = body.getAllByRole('textbox');
+        await expect(textInputs[0]).toBeDisabled();
+        // Delete button should be disabled until confirmation is checked
+        const deleteBtn = body.getByRole('button', { name: /delete/i });
+        await expect(deleteBtn).toBeDisabled();
+        // Check the confirmation checkbox
+        const confirmCheckbox = body.getByRole('checkbox', { name: /confirm.*delete/i });
+        await userEvent.click(confirmCheckbox);
+        await expect(deleteBtn).not.toBeDisabled();
     },
 };
 // ── REST API live example ─────────────────────────────────────────────────────

package/dist/components/Former/Former.svelte

@@ -77,6 +77,8 @@
 			// Reset when form closes so re-opens start fresh.
 			initialValues = undefined;
 			dirty = false;
+			deleteConfirmed = false;
+			error = undefined;
 		}
 	});
 
@@ -153,6 +155,7 @@
 	async function load(reset?: boolean): Promise<void> {
 		try {
 			loading = true;
+			error = undefined;
 
 			// Base data for "load" comes from existing values or primeData.
 			// If `beforeGet` is provided, it can normalize/augment this data even
@@ -192,6 +195,7 @@
 	async function save(): Promise<any> {
 		try {
 			loading = true;
+			error = undefined;
 
 			let data = values ? { ...values } : {};
 
@@ -226,6 +230,7 @@
 					values = clearedData;
 					initialValues = JSON.parse(JSON.stringify(clearedData));
 					dirty = false;
+					deleteConfirmed = false;
 					onChange?.(clearedData, getAllState());
 					return newData;
 				}
@@ -355,6 +360,7 @@
 		{:else}
 			<FormerButtonArea
 				closeButtonTitle={layout?.closeButtonTitle}
+				{deleteConfirmed}
 				{dirty}
 				{keepOpen}
 				{request}
@@ -395,10 +401,27 @@
 				save();
 			}}
 		>
-			{#if children}
-				{@render children(formerState)}
-			{/if}
+			<fieldset disabled={request === 'delete'} class="contents">
+				{#if children}
+					{@render children(formerState)}
+				{/if}
+			</fieldset>
 		</form>
+
+		{#if request === 'delete'}
+			<div class="mt-3 p-3 rounded border border-error-500 bg-error-50 dark:bg-error-950 text-sm space-y-2">
+				<p class="font-semibold text-error-700 dark:text-error-300">⚠ This action cannot be undone</p>
+				<label class="flex items-center gap-2 cursor-pointer">
+					<input
+						type="checkbox"
+						class="checkbox"
+						checked={deleteConfirmed}
+						onchange={(e) => (deleteConfirmed = e.currentTarget.checked)}
+					/>
+					<span>I confirm I want to permanently delete this record</span>
+				</label>
+			</div>
+		{/if}
 	</div>
 
 	<!-- Bottom button area -->
@@ -408,6 +431,7 @@
 		{:else if layout?.buttonArea !== 'none'}
 			<FormerButtonArea
 				closeButtonTitle={layout?.closeButtonTitle}
+				{deleteConfirmed}
 				{dirty}
 				{keepOpen}
 				{request}