runeforge 0.0.53 → 0.0.54

package/dist/components/table/TableHeader.svelte.d.ts

@@ -13,6 +13,7 @@ declare function $$render<T extends object>(): {
         distinctValues: Record<string, DistinctEntry<T>[]>;
         hasRowActions?: boolean;
         actionsLabel?: string;
+        reorderActive?: boolean;
         onchange?: () => void;
     };
     exports: {};

package/dist/components/table/sortable.d.ts

@@ -0,0 +1,27 @@
+import type { Action } from 'svelte/action';
+import type { SortableModule } from '../../types/table.js';
+/** The indices SortableJS reports a drag settled at — `oldIndex`/`newIndex`
+ * for a single-row drag, `oldIndicies`/`newIndicies` (one entry per row)
+ * instead when `multiDrag` moved a whole selection together. */
+export interface SortEndIndices {
+    oldIndex?: number;
+    newIndex?: number;
+    oldIndicies: number[];
+    newIndicies: number[];
+}
+export interface SortableRowsParams {
+    enabled: boolean;
+    /** The resolved `sortablejs` module — required whenever `enabled` is true.
+     * Runeforge never imports `sortablejs` itself; the caller supplies it. */
+    sortable?: SortableModule;
+    multiDrag?: boolean;
+    onStart?: () => void;
+    onEnd?: (indices: SortEndIndices) => void;
+}
+/** Mounts SortableJS on a `<tbody>` to drive drag-to-reorder, restricting
+ * drag initiation to elements carrying `data-reorder-handle`. The settled
+ * order is computed from SortableJS's own before/after indices (see
+ * TableBody) rather than read back from the DOM — `multiDrag` in particular
+ * doesn't reliably leave the DOM in the dropped state, only its event data
+ * reflects it correctly. */
+export declare const sortableRows: Action<HTMLElement, SortableRowsParams>;

package/dist/components/table/sortable.js

@@ -0,0 +1,55 @@
+// A real Tailwind utility (not a hand-rolled class) so it's picked up by the
+// consuming project's own Tailwind build — see the README's "Tailwind source
+// scanning" note about `@source`-ing this package's `dist` output.
+const MULTI_DRAG_SELECTED_CLASS = 'bg-primary/10';
+/** Mounts SortableJS on a `<tbody>` to drive drag-to-reorder, restricting
+ * drag initiation to elements carrying `data-reorder-handle`. The settled
+ * order is computed from SortableJS's own before/after indices (see
+ * TableBody) rather than read back from the DOM — `multiDrag` in particular
+ * doesn't reliably leave the DOM in the dropped state, only its event data
+ * reflects it correctly. */
+export const sortableRows = (node, params) => {
+    let instance;
+    function setup(p) {
+        instance?.destroy();
+        instance = undefined;
+        if (!p.enabled || !p.sortable)
+            return;
+        instance = p.sortable.create(node, {
+            handle: '[data-reorder-handle]',
+            animation: 150,
+            // Mouse/touch-simulated dragging instead of native HTML5 DnD: avoids
+            // native drag-ghost/Firefox quirks and (usefully) makes drags
+            // reproducible with plain mouse events in end-to-end tests. Not used
+            // together with `multiDrag`, though — SortableJS's MultiDrag plugin
+            // relies on native HTML5 DnD to track a multi-item drag correctly;
+            // paired with `forceFallback` it reports the drop as a no-op.
+            forceFallback: !p.multiDrag,
+            // Keeps the floating drag clone out of the `<tbody>` — otherwise it's
+            // an extra element carrying the same `data-row-key` as the row it was
+            // cloned from, which could confuse the multi-drag selection sync query.
+            fallbackOnBody: true,
+            multiDrag: p.multiDrag || undefined,
+            selectedClass: p.multiDrag ? MULTI_DRAG_SELECTED_CLASS : undefined,
+            onStart: () => p.onStart?.(),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onEnd: (evt) => {
+                p.onEnd?.({
+                    oldIndex: evt.oldIndex,
+                    newIndex: evt.newIndex,
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    oldIndicies: (evt.oldIndicies ?? []).map((e) => e.index),
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    newIndicies: (evt.newIndicies ?? []).map((e) => e.index),
+                });
+            },
+        });
+    }
+    setup(params);
+    return {
+        update: setup,
+        destroy() {
+            instance?.destroy();
+        },
+    };
+};

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

@@ -1,7 +1,25 @@
 import type { ColumnDefinition } from '../../types/crud.js';
-import type { DistinctEntry } from '../../types/table.js';
+import type { DistinctEntry, IndexedRow } from '../../types/table.js';
 export declare function cellRenderedText<T extends object>(row: T, col: ColumnDefinition<T>): string;
 export declare function isSortable<T extends object>(col: ColumnDefinition<T>): boolean;
 export declare function isFilterable<T extends object>(col: ColumnDefinition<T>): boolean;
 export declare function compare(a: unknown, b: unknown): number;
 export declare function distinctEntries<T extends object>(data: T[], columns: ColumnDefinition<T>[]): Record<string, DistinctEntry<T>[]>;
+/** Returns a copy of `rows` with the item at `from` moved to `to` — pure
+ * array surgery, handy for building custom reorder UIs on `PaginatedTable`.
+ * Out-of-range indices are a no-op. */
+export declare function moveIndexedRow<T extends object>(rows: IndexedRow<T>[], from: number, to: number): IndexedRow<T>[];
+/** Generalizes `moveIndexedRow` to moving a *set* of items (SortableJS's
+ * `multiDrag`) to `toIndex` in one go, preserving their relative order.
+ * `toIndex` is a position in the *result* array, same convention as
+ * `moveIndexedRow`'s `to` (and SortableJS's own `newIndex`) — not an index
+ * into the pre-move array. Duplicate/out-of-range `fromIndices` are ignored;
+ * an empty valid set is a no-op. */
+export declare function moveIndexedRows<T extends object>(rows: IndexedRow<T>[], fromIndices: number[], toIndex: number): IndexedRow<T>[];
+/** Resolves the comparator establishing reorder mode's row order: `compare`
+ * when given (composite orders — a related record's order first, then this
+ * row's own `attribute`), otherwise plain ascending by `attribute`. */
+export declare function resolveReorderComparator<T extends object>(reorder: {
+    attribute: keyof T & string;
+    compare?: (a: T, b: T) => number;
+}): (a: T, b: T) => number;

package/dist/components/table/utils.js

@@ -42,3 +42,43 @@ export function distinctEntries(data, columns) {
     }
     return result;
 }
+/** Returns a copy of `rows` with the item at `from` moved to `to` — pure
+ * array surgery, handy for building custom reorder UIs on `PaginatedTable`.
+ * Out-of-range indices are a no-op. */
+export function moveIndexedRow(rows, from, to) {
+    if (from === to || from < 0 || to < 0 || from >= rows.length || to >= rows.length)
+        return rows;
+    const next = [...rows];
+    const [moved] = next.splice(from, 1);
+    next.splice(to, 0, moved);
+    return next;
+}
+/** Generalizes `moveIndexedRow` to moving a *set* of items (SortableJS's
+ * `multiDrag`) to `toIndex` in one go, preserving their relative order.
+ * `toIndex` is a position in the *result* array, same convention as
+ * `moveIndexedRow`'s `to` (and SortableJS's own `newIndex`) — not an index
+ * into the pre-move array. Duplicate/out-of-range `fromIndices` are ignored;
+ * an empty valid set is a no-op. */
+export function moveIndexedRows(rows, fromIndices, toIndex) {
+    const validFrom = [...new Set(fromIndices)]
+        .filter((i) => i >= 0 && i < rows.length)
+        .sort((a, b) => a - b);
+    if (validFrom.length === 0)
+        return rows;
+    const fromSet = new Set(validFrom);
+    const moved = validFrom.map((i) => rows[i]);
+    const remaining = rows.filter((_, i) => !fromSet.has(i));
+    const insertAt = Math.min(remaining.length, Math.max(0, toIndex));
+    const next = [...remaining];
+    next.splice(insertAt, 0, ...moved);
+    return next;
+}
+/** Resolves the comparator establishing reorder mode's row order: `compare`
+ * when given (composite orders — a related record's order first, then this
+ * row's own `attribute`), otherwise plain ascending by `attribute`. */
+export function resolveReorderComparator(reorder) {
+    if (reorder.compare)
+        return reorder.compare;
+    const { attribute } = reorder;
+    return (a, b) => compare(a[attribute], b[attribute]);
+}

package/dist/i18n/en.js

@@ -20,6 +20,8 @@ export const en = {
     delete: 'Delete',
     create: 'Create',
     searchPlaceholder: 'Search...',
+    reorder: 'Drag to reorder',
+    reorderPage: (page) => `Page ${page}`,
     export: 'Export',
     exportCsv: 'Export as CSV',
     exportExcel: 'Export as Excel',

package/dist/i18n/es.js

@@ -20,6 +20,8 @@ export const es = {
     delete: 'Eliminar',
     create: 'Crear',
     searchPlaceholder: 'Buscar...',
+    reorder: 'Arrastrar para reordenar',
+    reorderPage: (page) => `Pág ${page}`,
     export: 'Exportar',
     exportCsv: 'Exportar a CSV',
     exportExcel: 'Exportar a Excel',

package/dist/i18n/types.d.ts

@@ -20,6 +20,8 @@ export interface RuneforgeStrings {
     delete: string;
     create: string;
     searchPlaceholder: string;
+    reorder: string;
+    reorderPage: (page: number) => string;
     export: string;
     exportCsv: string;
     exportExcel: string;

package/dist/icons/defaults/Grip.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  let { size = '1em', class: cls = '' }: { size?: string | number; class?: string } = $props();
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 16 16" fill="currentColor" class={cls}>
+  <path d="M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
+</svg>

package/dist/icons/defaults/Grip.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    size?: string | number;
+    class?: string;
+};
+declare const Grip: import("svelte").Component<$$ComponentProps, {}, "">;
+type Grip = ReturnType<typeof Grip>;
+export default Grip;

package/dist/icons/sets/bootstrap.js

@@ -10,7 +10,7 @@
  *   setIconSet(bootstrapIconSet);
  */
 import * as Icons from 'svelte-bootstrap-icons';
-const { ChevronExpand, CaretUpFill, CaretDownFill, Funnel, FunnelFill, Plus, Eye, PencilSquare, Trash3, HouseDoor, Folder, EyeSlash, X, Download, } = Icons;
+const { ChevronExpand, CaretUpFill, CaretDownFill, Funnel, FunnelFill, Plus, Eye, PencilSquare, Trash3, HouseDoor, Folder, EyeSlash, X, Download, GripVertical, } = Icons;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function asIcon(c) { return c; }
 export const bootstrapIconSet = {
@@ -29,6 +29,7 @@ export const bootstrapIconSet = {
     passwordShow: asIcon(Eye),
     passwordHide: asIcon(EyeSlash),
     download: asIcon(Download),
+    grip: asIcon(GripVertical),
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     getByName: (name) => asIcon(Icons[name]) ?? null,
 };

package/dist/icons/sets/default.js

@@ -13,6 +13,7 @@ import Folder from '../defaults/Folder.svelte';
 import PasswordShow from '../defaults/PasswordShow.svelte';
 import PasswordHide from '../defaults/PasswordHide.svelte';
 import Download from '../defaults/Download.svelte';
+import Grip from '../defaults/Grip.svelte';
 export const defaultIconSet = {
     sortNone: SortNone,
     sortAsc: SortAsc,
@@ -29,4 +30,5 @@ export const defaultIconSet = {
     passwordShow: PasswordShow,
     passwordHide: PasswordHide,
     download: Download,
+    grip: Grip,
 };

package/dist/icons/types.d.ts

@@ -19,5 +19,8 @@ export interface CRUDIconSet {
     passwordShow: IconComponent;
     passwordHide: IconComponent;
     download: IconComponent;
+    /** Drag handle shown at the start of each row when list reordering is
+     * enabled. Optional so existing custom icon sets keep compiling. */
+    grip?: IconComponent;
     getByName?: (name: string) => IconComponent | null;
 }

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 export type { BreadcrumbItem } from './types/breadcrumb.js';
 export { AttributeType } from './types/attribute.js';
 export type { AttributeMetadata, InterfaceMetadata, SelectOption, OptionsResolver, FormatterResolver, EmbeddedItemLabelResolver } from './types/attribute.js';
-export type { CellProps, CellComponent, CellFormatter, SortDirection, IndexedRow, DistinctEntry, PaginatedEnvelope, ServerPagination, FilterSnapshot, TableQuery } from './types/table.js';
-export type { ColumnDefinition, FieldDefinition, ActionConfiguration, CustomAction, BaseCustomBulkAction, ViewBasedCustomBulkAction, EndpointBasedCustomBulkAction, CustomBulkAction, RowAction, SearchConfiguration } from './types/crud.js';
+export type { CellProps, CellComponent, CellFormatter, SortDirection, IndexedRow, DistinctEntry, PaginatedEnvelope, ServerPagination, FilterSnapshot, TableQuery, ReorderOptions } from './types/table.js';
+export type { ColumnDefinition, FieldDefinition, ActionConfiguration, CustomAction, BaseCustomBulkAction, ViewBasedCustomBulkAction, EndpointBasedCustomBulkAction, CustomBulkAction, RowAction, SearchConfiguration, ExportConfiguration, ReorderConfiguration, ListActions, ListConfig } from './types/crud.js';
 export type { RuneforgeConfig } from './config/context.js';
 export { setConfig, getConfig } from './config/context.js';
 export type { CRUDIconSet, IconComponent } from './icons/types.js';
@@ -31,14 +31,14 @@ export { default as SortHeader } from './components/table/SortHeader.svelte';
 export { default as Paginator } from './components/table/Paginator.svelte';
 export { default as ColumnFilter } from './components/table/ColumnFilter.svelte';
 export { SortState, FilterState, snapshotFilter } from './components/table/state.svelte.js';
-export { cellRenderedText, isSortable, isFilterable, compare, distinctEntries } from './components/table/utils.js';
+export { cellRenderedText, isSortable, isFilterable, compare, distinctEntries, moveIndexedRow } from './components/table/utils.js';
 export { default as GenericCRUD } from './components/crud/GenericCRUD.svelte';
 export { default as Field } from './components/crud/Field.svelte';
 export { default as EmbeddedField } from './components/crud/EmbeddedField.svelte';
 export { default as Header } from './components/common/Header.svelte';
 export { default as AvatarCell } from './components/crud/columns/Avatar.svelte';
 export { default as IconCell } from './components/crud/columns/Icon.svelte';
-export { default as CRUDList } from './components/crud/views/List.svelte';
+export { default as CRUDList } from './components/crud/views/list/List.svelte';
 export { default as CRUDCreate } from './components/crud/views/Create.svelte';
 export { default as CRUDRead } from './components/crud/views/Read.svelte';
 export { default as CRUDUpdate } from './components/crud/views/Update.svelte';
@@ -50,5 +50,6 @@ export { formatBoolean, formatDatetime, formatInstance } from './components/crud
 export { groupFields } from './components/crud/utils/grouping.js';
 export type { FieldGroup } from './components/crud/utils/grouping.js';
 export { validateAll } from './components/crud/utils/validation.js';
+export { computeReorderChanges } from './components/crud/utils/reorder.js';
 export { emptyRecord, defaultItemLabel } from './components/crud/utils/embedded.js';
 export { buildChildrenByParent, collectDescendantIds } from './components/crud/utils/tree.js';

package/dist/index.js

@@ -27,7 +27,7 @@ export { default as SortHeader } from './components/table/SortHeader.svelte';
 export { default as Paginator } from './components/table/Paginator.svelte';
 export { default as ColumnFilter } from './components/table/ColumnFilter.svelte';
 export { SortState, FilterState, snapshotFilter } from './components/table/state.svelte.js';
-export { cellRenderedText, isSortable, isFilterable, compare, distinctEntries } from './components/table/utils.js';
+export { cellRenderedText, isSortable, isFilterable, compare, distinctEntries, moveIndexedRow } from './components/table/utils.js';
 // CRUD components
 export { default as GenericCRUD } from './components/crud/GenericCRUD.svelte';
 export { default as Field } from './components/crud/Field.svelte';
@@ -35,7 +35,7 @@ export { default as EmbeddedField } from './components/crud/EmbeddedField.svelte
 export { default as Header } from './components/common/Header.svelte';
 export { default as AvatarCell } from './components/crud/columns/Avatar.svelte';
 export { default as IconCell } from './components/crud/columns/Icon.svelte';
-export { default as CRUDList } from './components/crud/views/List.svelte';
+export { default as CRUDList } from './components/crud/views/list/List.svelte';
 export { default as CRUDCreate } from './components/crud/views/Create.svelte';
 export { default as CRUDRead } from './components/crud/views/Read.svelte';
 export { default as CRUDUpdate } from './components/crud/views/Update.svelte';
@@ -47,5 +47,6 @@ export { fieldLabel, initials } from './components/crud/utils/misc.js';
 export { formatBoolean, formatDatetime, formatInstance } from './components/crud/utils/formatters.js';
 export { groupFields } from './components/crud/utils/grouping.js';
 export { validateAll } from './components/crud/utils/validation.js';
+export { computeReorderChanges } from './components/crud/utils/reorder.js';
 export { emptyRecord, defaultItemLabel } from './components/crud/utils/embedded.js';
 export { buildChildrenByParent, collectDescendantIds } from './components/crud/utils/tree.js';

package/dist/types/crud.d.ts

@@ -1,7 +1,8 @@
 import type { Component } from 'svelte';
 import type { FullAutoFill } from 'svelte/elements';
 import type { AttributeType, SearchResolver, RequiredResolver, SelectOption } from './attribute.js';
-import type { CellComponent, CellFormatter } from './table.js';
+import type { CellComponent, CellFormatter, SortableModule, TableQuery } from './table.js';
+import type { XlsxModule } from '../components/table/export.js';
 export type ColumnDefinition<T extends object = Record<string, unknown>> = {
     [K in keyof T & string]: {
         attribute: K;
@@ -182,3 +183,71 @@ export interface SearchConfiguration {
     placeholder?: string;
     debounceMs?: number;
 }
+export interface ExportConfiguration<T extends object = Record<string, unknown>> {
+    callback?: (query: TableQuery) => Promise<T[]>;
+    xlsx?: XlsxModule;
+}
+/** Turns on drag-to-reorder rows in the list view — off by default, enabled
+ * by providing this object (`enabled: false` keeps the configuration in
+ * place but disables dragging, e.g. temporarily). Not supported alongside
+ * [server-side pagination](#server-side-pagination-sorting--filtering): the
+ * whole row set needs to be reachable client-side for indices to stay
+ * meaningful, so `reorder` is ignored whenever a `PaginatedEnvelope` is used. */
+export interface ReorderConfiguration<T extends object = Record<string, unknown>> {
+    enabled?: boolean;
+    /** The attribute that stores each row's order index. Establishes the
+     * default ascending order (when `compare` is absent) and is written to
+     * its new sequential 0-based value on every row whose position changes
+     * after a drag. */
+    attribute: keyof T & string;
+    /** Resolved `sortablejs` default export, e.g. `import Sortable from
+     * 'sortablejs'`. Runeforge never bundles `sortablejs` itself — install it
+     * separately and pass it in, so the dependency stays fully optional. */
+    sortable: SortableModule;
+    /** Overrides the plain `attribute`-ascending order for composite orders
+     * — e.g. a row's true resting position depends first on a related
+     * record's own order, and only then on this row's `attribute`. Takes
+     * full ownership of row order while reorder is active (column-header
+     * sorting is unavailable, same as the plain `attribute` case). */
+    compare?: (a: T, b: T) => number;
+    /** POSTed once per drag that settles with at least one changed row — a
+     * single request, not one per row — then the list is refreshed. FormData
+     * field `changes` carries a JSON-encoded array of `{ id, value }` pairs,
+     * one per row whose `attribute` changed (`value` being its new
+     * sequential position). Provide this or `callback`. */
+    endpoint?: string;
+    /** Alternative to `endpoint`: receives the rows whose `attribute` value
+     * changed, already updated to their new index. */
+    callback?: (items: T[]) => void | Promise<void>;
+    /** Drag-handle icon shown at the start of each row. Falls back to the
+     * active icon set's `grip` icon. */
+    icon?: any;
+    /** Lets dragging one row of the current checkbox selection move the
+     * whole selection together, via SortableJS's `MultiDrag` plugin (must be
+     * mounted on the `sortable` module you pass in). Off by default. */
+    multiDrag?: boolean;
+    /** While dragging, hovering over the edge zone for this long flips a
+     * page instead of requiring one long drag across the whole list.
+     * Default `2000`. */
+    pageFlipThresholdMs?: number;
+}
+/** Groups the list view's row-level and selection-level custom actions —
+ * `custom` replaces the old top-level `actions` prop, `bulk` replaces
+ * `customBulkActions`. */
+export interface ListActions<T extends object = Record<string, unknown>> {
+    /** Extra per-row actions — see Custom row actions. */
+    custom?: CustomAction<T>[];
+    /** Extra actions on the current selection — see Custom bulk actions. */
+    bulk?: CustomBulkAction<T>[];
+}
+/** Groups the list view's opt-in behaviors. Replaces the old top-level
+ * `search`, `enableExport`/`onExport`/`xlsx` props. */
+export interface ListConfig<T extends object = Record<string, unknown>> {
+    /** Free-text search box — see Free-text search. */
+    search?: SearchConfiguration;
+    /** CSV/Excel export. Presence of this object enables the export button —
+     * even as an empty `{}` — replacing the old `enableExport` boolean. */
+    export?: ExportConfiguration<T>;
+    /** Drag-to-reorder rows — see Reordering rows. */
+    reorder?: ReorderConfiguration<T>;
+}

package/dist/types/table.d.ts

@@ -45,3 +45,59 @@ export interface TableQuery {
     ordering: string | null;
     filters: FilterSnapshot;
 }
+/** An instance created by `SortableModule.create()` — the only bit of it
+ * runeforge ever touches directly. */
+export interface SortableInstance {
+    destroy(): void;
+}
+/** Programmatic selection API SortableJS's `MultiDrag` plugin exposes as
+ * `Sortable.utils` — used to mirror this table's own row-selection
+ * (checkboxes) into the plugin's selection state, so `multiDrag` drags
+ * whatever's currently checked instead of relying on its own click/modifier
+ * based selection UX. */
+export interface SortableUtils {
+    select(element: HTMLElement): void;
+    deselect(element: HTMLElement): void;
+}
+/** Minimal duck-typed subset of the `sortablejs` module API used to drive
+ * drag-to-reorder. Runeforge never imports `sortablejs` itself — install it
+ * separately and pass the resolved default export in via `reorder.sortable`
+ * (or `ReorderConfiguration.sortable` on `GenericCRUD`), so the dependency
+ * stays fully optional, mirroring `xlsx` for export. Pass `MultiDrag`
+ * pre-mounted (`Sortable.mount(new MultiDrag())`) on the module you hand in
+ * if you're using `multiDrag`. */
+export interface SortableModule {
+    create(element: HTMLElement, options?: Record<string, any>): SortableInstance;
+    utils?: SortableUtils;
+}
+/** Enables the drag-to-reorder row layer on `PaginatedTable`/`TableBody`.
+ * Presence of this object is what turns dragging on — per-column filtering
+ * is suppressed while it's active (dragging needs the full, unfiltered row
+ * set reachable), and row order is fully owned by `compare`/`attribute`
+ * rather than column-header sorting. Pagination stays on; crossing a page
+ * boundary mid-drag is done via the edge hover zones (see
+ * `pageFlipThresholdMs`), not by disabling pagination. */
+export interface ReorderOptions<T extends object = Record<string, unknown>> {
+    /** The attribute establishing the default ascending order, used when
+     * `compare` is not provided. */
+    attribute: keyof T & string;
+    /** Resolved `sortablejs` module — see the interface doc above. */
+    sortable: SortableModule;
+    /** Overrides the plain `attribute`-ascending order for cases where the
+     * true resting order depends on more than the row's own attribute (e.g.
+     * a parent's order first, then this row's own order within it). Takes
+     * full ownership of row order while reorder is active. */
+    compare?: (a: T, b: T) => number;
+    /** Drag-handle icon shown at the start of each row. Falls back to the
+     * active icon set's `grip` icon. */
+    icon?: any;
+    /** Lets dragging one row of the current checkbox selection move the
+     * whole selection together, via SortableJS's `MultiDrag` plugin (must be
+     * mounted on the `sortable` module you pass in). Off by default. */
+    multiDrag?: boolean;
+    /** While dragging, hovering the pointer over the narrow zone at either
+     * edge of the table for this long flips to the previous/next page —
+     * lets a row travel across pages without an unwieldy long drag. Repeated
+     * hovering (without leaving the zone) keeps flipping. Default `2000`. */
+    pageFlipThresholdMs?: number;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runeforge",
-  "version": "0.0.53",
+  "version": "0.0.54",
   "description": "SvelteKit toolkit for building metadata-driven CRUD interfaces with tables, forms, and actions",
   "license": "MIT",
   "author": "Ezequiel Puerta",
@@ -49,6 +49,7 @@
     "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@tailwindcss/vite": "^4.3.1",
     "@types/node": "^22",
+    "@types/sortablejs": "^1.15.9",
     "daisyui": "^5.5.23",
     "eslint": "^10.4.1",
     "eslint-config-prettier": "^10.1.8",
@@ -57,6 +58,7 @@
     "prettier": "^3.8.3",
     "prettier-plugin-svelte": "^4.1.0",
     "publint": "^0.3.21",
+    "sortablejs": "^1.15.7",
     "svelte": "^5.56.1",
     "svelte-bootstrap-icons": "^3.3.0",
     "svelte-check": "^4.6.0",