runeforge 0.0.53 → 0.0.55

package/dist/icons/defaults/SortDesc.svelte

@@ -1,6 +1,6 @@
-<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.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
-</svg>
+<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.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
+</svg>

package/dist/icons/defaults/SortNone.svelte

@@ -1,6 +1,6 @@
-<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="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708"/>
-</svg>
+<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="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708"/>
+</svg>

package/dist/icons/defaults/View.svelte

@@ -1,7 +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="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"/>
-  <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0"/>
-</svg>
+<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="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"/>
+  <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0"/>
+</svg>

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/attribute.d.ts

@@ -75,6 +75,15 @@ export type AttributeMetadata = {
     excludedFromRead?: boolean;
     sortable?: boolean;
     filterable?: boolean;
+    /** List column filter only: a static, exhaustive set of choices shown in
+     * the column filter's checkbox list, instead of the values sampled off
+     * currently loaded rows. For a bounded, known set (e.g. an enum-like text
+     * column) that the loaded page might not fully represent — especially
+     * under [server-side pagination](#server-side-pagination-sorting--filtering),
+     * where the sample is only a handful of values off the current page. `value`
+     * is matched against the rendered cell text (and sent server-side as-is);
+     * `label` is only what's displayed, falling back to `value`. */
+    filterOptions?: SelectOption[];
     groupedAs?: string;
     min?: number;
     max?: number;

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;
@@ -11,6 +12,8 @@ export type ColumnDefinition<T extends object = Record<string, unknown>> = {
         formatter?: CellFormatter<T, T[K]>;
         sortable?: boolean;
         filterable?: boolean;
+        /** Static, exhaustive filter choices — see `AttributeMetadata.filterOptions`. */
+        filterOptions?: SelectOption[];
         /** Embedded columns only: sub-field definitions for each item, used to
          * render a default cell summary and to expand the column into one
          * sub-column per field on CSV/XLSX export. */
@@ -182,3 +185,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.55",
   "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",