@lavalogic/scoria 0.37.0 → 0.37.2

package/dist/Components/Table/Body/Rows/ColumnListRow.svelte

@@ -309,6 +309,19 @@
 
 {#if columnDef}
 	{@const reorderLabel = typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}
+	<!--
+		The `<li>` is a structural container for the eye, pin selector,
+		label, and reorder buttons - none of which the user activates by
+		clicking the `<li>` itself. The `onkeydown` here only captures
+		Alt+ArrowUp / Alt+ArrowDown / Alt+Home / Alt+End bubbling up from
+		whichever inner control has focus, to drive the reorder shortcut;
+		it never makes the `<li>` itself a focusable interactive widget.
+		Giving the row a `role` like `treeitem` or `option` would
+		mis-describe the structure (this is a free-form list of cards,
+		not a tree or listbox), so the right call is to silence the
+		warning here rather than fake the semantics.
+	-->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 	<li
 		bind:this={rowEl}
 		class="single-column"

package/dist/Components/Table/Body/Rows/Columns/FocusableImmutableCell.svelte

@@ -4,13 +4,15 @@
 	lang="ts"
 	generics="T extends object, FilterValueType, RowIdType extends Primitive"
 >
+	import Portal from '../../../../Portal.svelte';
+	import type { AbstractDisplayDef } from '../../../Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js';
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
 	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
 	import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
 	import { devCatch, isValidityTuple, loadingText } from '../../../../../Helpers/Helpers.svelte.js';
 	import type { SelectOption } from '../../../../../Types/Internal/SelectOption.js';
 	import { Validity } from '../../../../../Types/Internal/Validity.js';
-	import { getContext } from 'svelte';
+	import { getContext, tick } from 'svelte';
 	import type { FocusableImmutableCellProps } from './FocusableImmutableCellProps.js';
 
 	const { cell, children }: FocusableImmutableCellProps<T, FilterValueType> = $props();
@@ -35,6 +37,46 @@
 		tableContext._focus.getFocusDetailsFor(cell)
 	);
 
+	// `modal` lives on every `AbstractDisplayDef` subclass (Display,
+	// Bubble, Progress, Validity), so a duck-typed read against the base
+	// `ColumnDef` is sufficient and avoids importing the entire
+	// AbstractDisplayDef class chain just to satisfy the type checker.
+	const modalComponent = $derived(
+		(cell.column.columnDef as AbstractDisplayDef<T, FilterValueType>).modal
+	);
+
+	let previousFocusElement: HTMLElement | undefined = $state();
+	let showModal = $state(false);
+
+	const thisId = $derived(
+		`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`
+	);
+
+	// Match the open-modal state by row-object identity and column id so
+	// pagination / sort / filter does not silently re-target the modal at
+	// a different row that happens to occupy the same visible index.
+	$effect(() => {
+		const target = tableContext.openModalCell;
+		if (target !== null && target.row === cell.row.original && target.columnId === cell.column.id) {
+			previousFocusElement = document.activeElement as HTMLElement | undefined;
+			showModal = true;
+		} else {
+			showModal = false;
+		}
+	});
+
+	function onclose() {
+		tableContext.setOpenModalCell(null);
+
+		if (previousFocusElement?.id != thisId) {
+			tick()
+				.then(() => {
+					previousFocusElement?.focus();
+				})
+				.catch(devCatch);
+		}
+	}
+
 	let validity: Validity = $state(Validity.Valid);
 	$effect(() => {
 		const validityPromise = focusDetails.validity;
@@ -56,11 +98,12 @@
 <!-- svelte-ignore a11y_mouse_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
+	id={thisId}
 	class:info={validity == Validity.Info}
 	class:success={validity == Validity.Valid}
 	class:warning={validity == Validity.Warning}
 	class:error={validity == Validity.Invalid}
+	class:has-modal={!!modalComponent}
 	tabIndex={hasValue ? 0 : undefined}
 	class="focusable"
 	style={focusDetails.outline}
@@ -85,6 +128,31 @@
 	onmouseup={() => {
 		tableContext.endFocus(focusDetails.coordinates);
 	}}
+	onclick={() => {
+		// Open the per-cell modal if the column declares one. Click is
+		// the right trigger here (focus already started on mousedown);
+		// modal-less display cells fall through to the default focus
+		// behaviour with no extra handler.
+		if (modalComponent) {
+			tableContext.setOpenModalCell({
+				row: cell.row.original,
+				columnId: cell.column.id,
+			});
+		}
+	}}
+	onkeydown={(e) => {
+		// Keyboard parity with `onclick` above: when the cell has DOM
+		// focus (via `tabIndex`), Enter / Space opens the modal. Only
+		// fires for columns that declare a `modal`; non-modal display
+		// cells defer to the table's global keyboard navigation.
+		if (modalComponent && (e.key === 'Enter' || e.key === ' ')) {
+			e.preventDefault();
+			tableContext.setOpenModalCell({
+				row: cell.row.original,
+				columnId: cell.column.id,
+			});
+		}
+	}}
 >
 	{#if hasValue}
 		{#await visibleValue}
@@ -108,6 +176,22 @@
 		</div>
 	{/if}
 </div>
+{#if showModal && modalComponent}
+	<!--
+		Mirrors the `ValidityCell` pattern: portal the modal to
+		`document.body` so the surrounding sticky / overflow:hidden
+		ancestors (header, pinned columns, virtualised viewport) never
+		clip it. The component receives the public
+		`DisplayModalProps<T>` shape `{ row, close }`.
+	-->
+	<Portal target={document.body}>
+		{@const ModalComponent = modalComponent}
+		<ModalComponent
+			row={cell.row.original}
+			close={onclose}
+		/>
+	</Portal>
+{/if}
 
 <style>.focusable,
 .checkbox-cell,

package/dist/Components/Table/Body/Rows/Columns/ValidityCell.svelte

@@ -57,12 +57,13 @@
 	let previousFocusElement: HTMLElement | undefined = $state();
 	let showModal = $state(false);
 
+	// Match the open-modal state by row-object identity and column id.
+	// Identity-based comparison keeps the modal locked to the row it was
+	// opened on even when pagination / sort / filter changes the visible
+	// index of that row.
 	$effect(() => {
-		if (
-			!!tableContext.openModalCoordinates &&
-			focusDetails.coordinates.row === tableContext.openModalCoordinates.row &&
-			focusDetails.coordinates.id === tableContext.openModalCoordinates.id
-		) {
+		const target = tableContext.openModalCell;
+		if (target !== null && target.row === cell.row.original && target.columnId === cell.column.id) {
 			previousFocusElement = document.activeElement as HTMLElement | undefined;
 			showModal = true;
 		} else {
@@ -98,7 +99,7 @@
 	);
 
 	function onclose() {
-		tableContext.setOpenModalCoordinates(null);
+		tableContext.setOpenModalCell(null);
 
 		if (previousFocusElement?.id != thisId) {
 			tick()
@@ -151,17 +152,29 @@
 			{icon}
 			onclick={() => {
 				if (ColumnDef.modal) {
-					tableContext.setOpenModalCoordinates(focusDetails.coordinates);
+					tableContext.setOpenModalCell({
+						row: cell.row.original,
+						columnId: cell.column.id,
+					});
 				}
 			}}
 		/>
 	</div>
 	{#if showModal}
 		<Portal target={document.body}>
+			<!--
+				`ColumnDef.modal` is declared as
+				`Component<DisplayModalProps<TRow>>` on the public column
+				options, which exposes a stable `{ row, close }` prop
+				shape. Cell renderers used to hand a legacy
+				`{ cell, onclose, onsubmit }` triple here, which made the
+				public type lie about the runtime shape - migrated to
+				`{ row, close }` so consumer-authored modals can rely on
+				the documented type.
+			-->
 			<ColumnDef.modal
-				{cell}
-				{onclose}
-				onsubmit={onclose}
+				row={cell.row.original}
+				close={onclose}
 			/>
 		</Portal>
 	{/if}

package/dist/Components/Table/ColumnDefinitions/ExampleItemColumnDefRepository.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { ExampleItem } from '../../../Types/Examples/ExampleItem.js';
 import { type Component } from 'svelte';
-import type { DisplayDefModalProps } from '../Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js';
+import type { DisplayModalProps } from '../Types/Public/ColumnOptions.js';
 import type { DefsWrapper } from '../Types/Columns/DefsWrapper.js';
-export declare function generateExampleItemColumnDefs(modal: Component<DisplayDefModalProps<ExampleItem>, object, ''>): DefsWrapper<ExampleItem>;
+export declare function generateExampleItemColumnDefs(modal: Component<DisplayModalProps<ExampleItem>, object, ''>): DefsWrapper<ExampleItem>;

package/dist/Components/Table/ColumnFactory.svelte.js

@@ -215,6 +215,11 @@ export function createColumnFactory() {
                 ...commonProps(opts),
                 accessorFn: opts.value,
                 modal: opts.modal,
+                // Display columns have no implicit filter type (unlike the
+                // typed kinds where the factory pins one based on the
+                // column kind). Consumers opt in by passing the type they
+                // want the filter input rendered as.
+                filterValueType: opts.filterValueType,
             });
             return makeSpec('display', def);
         },
@@ -225,6 +230,7 @@ export function createColumnFactory() {
                 ...commonProps(opts),
                 accessorFn: opts.value,
                 getColour: opts.colour,
+                filterValueType: opts.filterValueType,
             });
             return makeSpec('bubble', def);
         },
@@ -250,6 +256,7 @@ export function createColumnFactory() {
                 ...commonProps(opts),
                 accessorFn: tupleAccessor,
                 getColour,
+                filterValueType: opts.filterValueType,
             });
             return makeSpec('progress', def);
         },

package/dist/Components/Table/SubApis.svelte.d.ts

@@ -11,7 +11,7 @@
  */
 import type { TableContext } from './Types/Context/TableContext.svelte.js';
 import type { Primitive } from './Types/Context/TableInitOptions.js';
-import type { ClipboardApi, ColumnsApi, FilteringApi, FocusApi, PaginationApi, PreferencesApi, SelectionApi, SortingApi } from './Types/Public/TableSubApis.js';
+import type { ClipboardApi, ColumnsApi, FilteringApi, FocusApi, ModalApi, PaginationApi, PreferencesApi, SelectionApi, SortingApi } from './Types/Public/TableSubApis.js';
 import type { ColumnSpec } from './Types/Public/ColumnSpec.js';
 export declare function makeSelectionApi<TRow extends object, TRowId extends Primitive>(ctx: TableContext<TRow, TRowId>): SelectionApi<TRow, TRowId>;
 export declare function makeFilteringApi<TRow extends object, TRowId extends Primitive>(ctx: TableContext<TRow, TRowId>): FilteringApi<TRow>;
@@ -20,4 +20,5 @@ export declare function makePaginationApi<TRow extends object, TRowId extends Pr
 export declare function makeColumnsApi<TRow extends object, TRowId extends Primitive>(ctx: TableContext<TRow, TRowId>, specsById: ReadonlyMap<string, ColumnSpec<TRow>>): ColumnsApi<TRow>;
 export declare function makeFocusApi<TRow extends object, TRowId extends Primitive>(ctx: TableContext<TRow, TRowId>): FocusApi<TRow>;
 export declare function makePreferencesApi<TRow extends object, TRowId extends Primitive>(ctx: TableContext<TRow, TRowId>): PreferencesApi<TRow>;
+export declare function makeModalApi<TRow extends object, TRowId extends Primitive>(ctx: TableContext<TRow, TRowId>): ModalApi<TRow>;
 export declare function makeClipboardApi<TRow extends object, TRowId extends Primitive>(ctx: TableContext<TRow, TRowId>): ClipboardApi<TRow>;

package/dist/Components/Table/SubApis.svelte.js

@@ -325,6 +325,27 @@ export function makePreferencesApi(ctx) {
     });
 }
 // ─────────────────────────────────────────────────────────────────────────
+// Modal
+// ─────────────────────────────────────────────────────────────────────────
+export function makeModalApi(ctx) {
+    return Object.freeze({
+        get openCell() {
+            return ctx.openModalCell;
+        },
+        open(row, columnId) {
+            // The underlying setter takes the row by reference. Cells
+            // compare via object identity, so passing the same instance
+            // the table holds for the row is load-bearing - callers
+            // typically have that instance in hand from `table.rows`,
+            // `table.selection.map`, or a `col.actions` callback.
+            ctx.setOpenModalCell({ row, columnId });
+        },
+        close() {
+            ctx.setOpenModalCell(null);
+        },
+    });
+}
+// ─────────────────────────────────────────────────────────────────────────
 // Clipboard
 // ─────────────────────────────────────────────────────────────────────────
 export function makeClipboardApi(ctx) {

package/dist/Components/Table/Table.svelte

@@ -334,8 +334,6 @@
 	const centreColumns = $derived(tableContext.table.getCenterVisibleLeafColumns());
 	const rightColumns = $derived(tableContext.table.getRightVisibleLeafColumns());
 
-	const visibleColumns = $derived([...leftColumns, ...centreColumns, ...rightColumns]);
-
 	// CSS Grid template for the table.
 	//
 	// - First track is the highlight column (always present, fixed at

package/dist/Components/Table/Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.d.ts

@@ -1,37 +1,20 @@
 import type { Component } from 'svelte';
+import type { DisplayModalProps } from '../../../Public/ColumnOptions.js';
 import type { DisplayType } from '../../DisplayType.js';
-import type { TableCell } from '../../TableCell.js';
 import { ColumnDef, type ColumnDefProps } from '../ColumnDef.svelte.js';
-/**
- * Props passed to the modal a display column may open.
- *
- * - `cell`: the source cell, used to read row context and the row value.
- * - `onclose`: invoked when the user dismisses without committing.
- * - `onsubmit`: invoked when the user commits.
- *
- * Note: neither callback carries a payload today (engineering F-secondary);
- * callers persist any state through the cell's row reference.
- */
-export interface DisplayDefModalProps<T extends object, in FilterValueType = never, out FilterOptionsType = unknown> {
-    /** The source cell. */
-    cell: TableCell<T, FilterValueType, FilterOptionsType>;
-    /** Invoked on dismissal without commit. */
-    onclose: () => void;
-    /** Invoked on commit. */
-    onsubmit: () => void;
-}
 /**
  * Construction-time props for every `AbstractDisplayDef` subclass.
  *
- * Note: `modal` is typed with `Component<any, any, any>` because the
- * dynamic-dispatch site cannot statically know the consumer's full
- * exports / events / slots triple. The narrowing is delegated to the
- * caller via `DisplayDefModalProps`.
+ * `modal` is typed against the public `DisplayModalProps<T>` shape - the
+ * cell renderer hands the modal component `{ row, close }` at runtime, and
+ * the public type advertises that same shape via `col.display({ modal })`
+ * and `col.validity({ modal })`. The dynamic-dispatch slot uses
+ * `Component<DisplayModalProps<T>>` with `any` filling the events / slots
+ * channels because the consumer-supplied component declares those itself.
  */
 export interface AbstractDisplayDefProps<T extends object, in FilterFnType, out FilterOptionsType> extends ColumnDefProps<T, FilterFnType, FilterOptionsType> {
-    /** Optional Svelte component opened as a modal from the cell. The
-     *  `any` triple is intentional: see class JSDoc. */
-    modal?: Component<any, any, any>;
+    /** Optional Svelte component opened as a modal from the cell. */
+    modal?: Component<DisplayModalProps<T>, any, any>;
 }
 /**
  * `AbstractDisplayDef<T, FilterValueType, FilterOptionsType>` is the
@@ -41,11 +24,9 @@ export interface AbstractDisplayDefProps<T extends object, in FilterFnType, out
  *
  * @remarks
  *
- * `modal` is `Component<any, any, any>` rather than a narrower generic
- * because the consumer-supplied modal component declares its own
- * exports / events / slots and the cell dispatch site cannot statically
- * know the full triple. Callers should accept `DisplayDefModalProps`
- * as props and ignore the slot / event channels.
+ * `modal` accepts any Svelte component whose props match the public
+ * `DisplayModalProps<T>` shape. The cell renderers hand it
+ * `{ row: T; close: () => void }` at runtime.
  */
 export declare abstract class AbstractDisplayDef<T extends object, in FilterValueType = never, out FilterOptionsType = unknown> extends ColumnDef<T, FilterValueType, FilterOptionsType> {
     /** Inner discriminator literal narrowed by each leaf subclass. */
@@ -55,5 +36,5 @@ export declare abstract class AbstractDisplayDef<T extends object, in FilterValu
     readonly columnType: "Display";
     /** Optional Svelte component opened as a modal from the cell. */
     readonly modal: // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    Component<DisplayDefModalProps<T>, any, any> | undefined;
+    Component<DisplayModalProps<T>, any, any> | undefined;
 }

package/dist/Components/Table/Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js

@@ -8,11 +8,9 @@ import { ColumnDef } from '../ColumnDef.svelte.js';
  *
  * @remarks
  *
- * `modal` is `Component<any, any, any>` rather than a narrower generic
- * because the consumer-supplied modal component declares its own
- * exports / events / slots and the cell dispatch site cannot statically
- * know the full triple. Callers should accept `DisplayDefModalProps`
- * as props and ignore the slot / event channels.
+ * `modal` accepts any Svelte component whose props match the public
+ * `DisplayModalProps<T>` shape. The cell renderers hand it
+ * `{ row: T; close: () => void }` at runtime.
  */
 export class AbstractDisplayDef extends ColumnDef {
     constructor(props) {

package/dist/Components/Table/Types/Context/TableContext.svelte.d.ts

@@ -9,7 +9,6 @@ import type { ColumnDefSet } from '../Columns/Definitions/ColumnDefSet.js';
 import type { DefsWrapper } from '../Columns/DefsWrapper.js';
 import type { VisibilityState } from '../Columns/VisibilityState.js';
 import type { CellCoordinates } from '../Coordinates/CellCoordinates.js';
-import type { CellCoordinatesWithoutColumn } from '../Coordinates/CellCoordinatesWithoutColumn.js';
 import type { VisualColumnIndex } from '../Coordinates/ColumnIndices.js';
 import type { IDataRepository } from '../DataRepository/IDataRepository.js';
 import { SortingState } from './SortingState.svelte.js';
@@ -230,9 +229,28 @@ export declare class TableContext<T extends object, RowIdType extends Primitive>
      */
     get columnVisibility(): VisibilityState;
     set columnVisibility(v: VisibilityState);
-    private _openModalCoordinates;
-    get openModalCoordinates(): CellCoordinatesWithoutColumn | null;
-    set openModalCoordinates(v: CellCoordinatesWithoutColumn | null);
+    /**
+     * Identifies the cell whose `col.validity({ modal })` /
+     * `col.display({ modal })` modal is currently open, or `null` when no
+     * modal is open.
+     *
+     * Keyed on the **row object reference**, not on visible index, so the
+     * open-modal state is stable across pagination, sort, and filter
+     * changes - the cell renderer matches via `cell.row.original ===
+     * openModalCell.row`. Visible-index-based keying (the old
+     * `CellCoordinatesWithoutColumn` shape) silently re-targeted the modal
+     * to whichever row happened to occupy the same index after a page
+     * change.
+     */
+    private _openModalCell;
+    get openModalCell(): {
+        row: T;
+        columnId: string;
+    } | null;
+    set openModalCell(v: {
+        row: T;
+        columnId: string;
+    } | null);
     private _shownActionsPopup;
     get shownActionsPopup(): symbol | undefined;
     set shownActionsPopup(v: symbol | undefined);
@@ -486,8 +504,18 @@ export declare class TableContext<T extends object, RowIdType extends Primitive>
     readonly addInvalidValue: (item: T) => void | Promise<void>;
     /** Delegating accessor preserved for backwards compatibility. */
     readonly removeInvalidValue: (item: T) => void | Promise<void>;
-    /** Stores or clears the coordinates of the open per-cell modal. */
-    readonly setOpenModalCoordinates: (coordinates: CellCoordinatesWithoutColumn | null) => void;
+    /**
+     * Stores or clears the cell whose per-cell modal is currently open.
+     *
+     * Pass `{ row, columnId }` to open; pass `null` to close. The `row`
+     * value must be the same object reference the table holds for that row
+     * (`cell.row.original`) - identity comparison is what the cell
+     * renderers use to decide which one of them should render the modal.
+     */
+    readonly setOpenModalCell: (cell: {
+        row: T;
+        columnId: string;
+    } | null) => void;
     /** Delegating accessor preserved for backwards compatibility. */
     readonly toggleHighlightedRow: (item: T) => void | Promise<void>;
     /** Delegating accessor preserved for backwards compatibility. */

package/dist/Components/Table/Types/Context/TableContext.svelte.js

@@ -673,12 +673,25 @@ export class TableContext {
     set columnVisibility(v) {
         this._columnLayout.columnVisibility = v;
     }
-    _openModalCoordinates = $state(null);
-    get openModalCoordinates() {
-        return this._openModalCoordinates;
+    /**
+     * Identifies the cell whose `col.validity({ modal })` /
+     * `col.display({ modal })` modal is currently open, or `null` when no
+     * modal is open.
+     *
+     * Keyed on the **row object reference**, not on visible index, so the
+     * open-modal state is stable across pagination, sort, and filter
+     * changes - the cell renderer matches via `cell.row.original ===
+     * openModalCell.row`. Visible-index-based keying (the old
+     * `CellCoordinatesWithoutColumn` shape) silently re-targeted the modal
+     * to whichever row happened to occupy the same index after a page
+     * change.
+     */
+    _openModalCell = $state(null);
+    get openModalCell() {
+        return this._openModalCell;
     }
-    set openModalCoordinates(v) {
-        this._openModalCoordinates = v;
+    set openModalCell(v) {
+        this._openModalCell = v;
     }
     // Per-table identifier of the ActionsCell that currently has its popup open.
     // Lives on the context rather than at module scope so multiple tables on the
@@ -1166,13 +1179,6 @@ export class TableContext {
                     },
                 };
             };
-            const makeCellFromId = (columnId) => {
-                const def = this.columnDefsById.get(columnId);
-                if (!def) {
-                    throw new Error(`Could not find column with id ${columnId}`);
-                }
-                return makeRow(def);
-            };
             // Iterating `this.columnDefs.filter(...)` instead of
             // `this.columnPinning.left?.keys()` puts pinned-left body
             // cells in declaration order (matching the header rendering
@@ -1235,9 +1241,16 @@ export class TableContext {
     removeInvalidValue = (item) => {
         return this._selection.removeInvalidValue(item);
     };
-    /** Stores or clears the coordinates of the open per-cell modal. */
-    setOpenModalCoordinates = (coordinates) => {
-        this.openModalCoordinates = coordinates ? { ...coordinates } : null;
+    /**
+     * Stores or clears the cell whose per-cell modal is currently open.
+     *
+     * Pass `{ row, columnId }` to open; pass `null` to close. The `row`
+     * value must be the same object reference the table holds for that row
+     * (`cell.row.original`) - identity comparison is what the cell
+     * renderers use to decide which one of them should render the modal.
+     */
+    setOpenModalCell = (cell) => {
+        this.openModalCell = cell ? { row: cell.row, columnId: cell.columnId } : null;
     };
     /** Delegating accessor preserved for backwards compatibility. */
     toggleHighlightedRow = (item) => {
@@ -1813,13 +1826,6 @@ export class TableContext {
                 },
             };
         };
-        const makeCellFromId = (columnId) => {
-            const def = this.columnDefsById.get(columnId);
-            if (!def) {
-                throw new Error(`Could not make cell from id ${columnId}: Coloumn Def was not found`);
-            }
-            return makeRow(def);
-        };
         // Visibility filter applied to every cell collection so the cell
         // count in TableRow stays in sync with the visible-column count
         // that drives `--cols` in Table.svelte. Without this, a hidden

package/dist/Components/Table/Types/Public/ColumnOptions.d.ts

@@ -132,6 +132,21 @@ export interface DisplayColumnOptions<TRow extends object, TValue = unknown> ext
     /** Override the auto-generated id. Rare; only useful when the consumer
      *  needs a stable id for preset persistence or test selectors. */
     idHint?: string;
+    /**
+     * Filter-input shape for this column. Display columns have no
+     * implicit filter type (unlike `col.number` / `col.date` etc.
+     * which derive theirs from the column kind). Set this when the
+     * displayed `value` is a computed string but the underlying field
+     * the server filters on is a number / date / select - this keeps
+     * the typed filter UI (e.g. number ranges, date pickers) for
+     * foreign-key columns that show a human-readable name.
+     *
+     * When omitted, the filter row renders a generic string input.
+     *
+     * The filter targets the column id (use `idHint` to set a stable
+     * id matching the server field name).
+     */
+    filterValueType?: FilterValueType;
 }
 /** Options for `col.bubble({ header, value, colour, ... })`. Renders one or
  *  more coloured pill bubbles per row. */
@@ -143,6 +158,12 @@ export interface BubbleColumnOptions<TRow extends object, TValue = unknown> exte
      *  so multi-bubble cells can colour each independently. */
     colour: (row: TRow, index: number, value: TValue) => BubbleColour | Promise<BubbleColour>;
     idHint?: string;
+    /**
+     * Filter-input shape for this column. See `DisplayColumnOptions.filterValueType`
+     * - same semantics, applied to bubble cells. Common case: a tag-bubble column
+     * where the displayed values are strings but the server filter is a select.
+     */
+    filterValueType?: FilterValueType;
 }
 /** Options for `col.progress({ header, value, ... })`. Renders a horizontal
  *  progress bar from a numeric ratio. */
@@ -152,6 +173,12 @@ export interface ProgressColumnOptions<TRow extends object> extends BaseColumnOp
     /** Optional colour override. Defaults to scoria's progress colour ramp. */
     colour?: (row: TRow, index: number, fraction: number) => ColourSet | Promise<ColourSet>;
     idHint?: string;
+    /**
+     * Filter-input shape for this column. See `DisplayColumnOptions.filterValueType`
+     * - same semantics. Progress columns most commonly filter on a numeric
+     * "percent complete" field, in which case set this to `'Number'`.
+     */
+    filterValueType?: FilterValueType;
 }
 /** Options for `col.validity({ header, ... })`. Renders the row's overall
  *  validity indicator and (optionally) opens a modal with the validity
@@ -228,9 +255,15 @@ export interface FilterOnlyColumnOptions<TRow extends object, K extends keyof TR
      *  omit this and rely on the backend instead. */
     customFilter?: CustomFilter<TValue>;
 }
-/** Props passed to a `DisplayColumnOptions.modal` / `ValidityColumnOptions.modal`
- *  Component. Mirrors the existing `DisplayDefModalProps` shape so consumers
- *  can reuse their existing modal components unchanged. */
+/**
+ * Props passed to a `DisplayColumnOptions.modal` / `ValidityColumnOptions.modal`
+ * Component when the table opens it (either via the column's built-in click
+ * handler or imperatively through `table.modal.open(row, columnId)`).
+ *
+ * Consumer-authored modals should declare their props as
+ * `DisplayModalProps<MyRow>` and read `row` for the row context and `close()`
+ * to dismiss themselves.
+ */
 export interface DisplayModalProps<TRow extends object> {
     row: TRow;
     /** Closes the modal. */

package/dist/Components/Table/Types/Public/Table.d.ts

@@ -1,5 +1,5 @@
 import type { Primitive } from '../Context/TableInitOptions.js';
-import type { ClipboardApi, ColumnsApi, FilteringApi, FocusApi, PaginationApi, PreferencesApi, SelectionApi, SortingApi } from './TableSubApis.js';
+import type { ClipboardApi, ColumnsApi, FilteringApi, FocusApi, ModalApi, PaginationApi, PreferencesApi, SelectionApi, SortingApi } from './TableSubApis.js';
 /**
  * Public Table instance returned by `createTable(...)`. Mount the underlying
  * Table component via `<Table {table} />`; the structured object below is
@@ -32,6 +32,7 @@ export interface Table<TRow extends object, TRowId extends Primitive> {
     readonly focus: FocusApi<TRow>;
     readonly preferences: PreferencesApi<TRow>;
     readonly clipboard: ClipboardApi<TRow>;
+    readonly modal: ModalApi<TRow>;
     /** Trigger a refetch (remote / custom) or a recompute (local). */
     reload(): Promise<void>;
     /** Tear down any subscriptions and abort in-flight requests. */

package/dist/Components/Table/Types/Public/TableSubApis.d.ts

@@ -155,3 +155,36 @@ export interface ClipboardApi<TRow extends object> {
     /** Copy a single cell. */
     copyCell(row: TRow, columnId: string): Promise<void>;
 }
+/**
+ * Imperative control of the per-cell modal that display / validity columns
+ * may declare. Use cases:
+ *
+ * - Programmatically open a row's validity modal from a callback (e.g. when
+ *   toggling `held=true` without a reason on a hold-and-release editor).
+ * - Close any open modal as part of a higher-level cancellation flow.
+ * - Read the current open-modal state to decide whether a pending action
+ *   should defer until the user dismisses the modal.
+ *
+ * The open-modal state is keyed on the row's object identity, so it
+ * survives pagination, sort, and filter changes - if the row is currently
+ * off-page, the modal stays "queued" and renders as soon as the cell
+ * mounts (typically when the user navigates back to that page). To open
+ * the modal at a stable rowId rather than at a row reference you already
+ * have, look the row up via `table.rows` / `table.selection.map` first.
+ *
+ * Modal-less display cells silently ignore `open()` (no error, no state
+ * change) so consumers do not need to guard the call site against
+ * column-shape mismatches.
+ */
+export interface ModalApi<TRow extends object> {
+    /** The cell whose modal is currently open, or `null` when none is. Reactive. */
+    readonly openCell: {
+        readonly row: TRow;
+        readonly columnId: string;
+    } | null;
+    /** Open the per-cell modal at the given row + column. No-op when the
+     *  column does not declare a `modal` component. */
+    open(row: TRow, columnId: string): void;
+    /** Close any open modal. No-op when none is open. */
+    close(): void;
+}

package/dist/Components/Table/Types/Public/index.d.ts

@@ -17,4 +17,4 @@ export type { SelectionOptions } from './SelectionOptions.js';
 export type { Table } from './Table.js';
 export type { TableInitialState } from './TableInitialState.js';
 export type { TablePersistence, TablePersistenceObject, TableStorageAdapter, } from './TablePersistence.js';
-export type { ClipboardApi, ColumnsApi, FilteringApi, FocusApi, PaginationApi, PreferencesApi, SavedPreset, SelectionApi, SortingApi, } from './TableSubApis.js';
+export type { ClipboardApi, ColumnsApi, FilteringApi, FocusApi, ModalApi, PaginationApi, PreferencesApi, SavedPreset, SelectionApi, SortingApi, } from './TableSubApis.js';

package/dist/Components/Table/createTable.svelte.js

@@ -23,7 +23,7 @@ import { LocalTableDataRepository } from './Types/DataRepository/LocalTableDataR
 import { TableContext } from './Types/Context/TableContext.svelte.js';
 import { ToolbarPosition } from './Types/Toolbar/ToolbarPosition.js';
 import { createColumnFactory, unwrapColumnSpec } from './ColumnFactory.svelte.js';
-import { makeClipboardApi, makeColumnsApi, makeFilteringApi, makeFocusApi, makePaginationApi, makePreferencesApi, makeSelectionApi, makeSortingApi, } from './SubApis.svelte.js';
+import { makeClipboardApi, makeColumnsApi, makeFilteringApi, makeFocusApi, makeModalApi, makePaginationApi, makePreferencesApi, makeSelectionApi, makeSortingApi, } from './SubApis.svelte.js';
 // ─────────────────────────────────────────────────────────────────────────
 // Public entry point
 // ─────────────────────────────────────────────────────────────────────────
@@ -121,6 +121,7 @@ export function createTable(options) {
         focus: makeFocusApi(ctx),
         preferences: makePreferencesApi(ctx),
         clipboard: makeClipboardApi(ctx),
+        modal: makeModalApi(ctx),
         reload() {
             return ctx.dataRepo.reload?.() ?? Promise.resolve();
         },

package/dist/Types/Examples/ExampleModal.svelte

@@ -4,28 +4,28 @@
 	import DesktopModal from '../../Components/DesktopModal.svelte';
 	import { cssLength } from '../../Helpers/Helpers.svelte.js';
 	import Switch from '../../Components/Switch.svelte';
-	import type { DisplayDefModalProps } from '../../Components/Table/Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js';
+	import type { DisplayModalProps } from '../../Components/Table/Types/Public/ColumnOptions.js';
 	import type { ExampleItem } from './ExampleItem.js';
 
-	const { cell, onclose, onsubmit }: DisplayDefModalProps<ExampleItem> = $props();
+	const { row, close }: DisplayModalProps<ExampleItem> = $props();
 </script>
 
 <DesktopModal
 	width={cssLength('1220px')}
 	headerLabel="Hello World"
-	{onclose}
-	{onsubmit}
-	buttons={[{ label: 'Close', callback: onclose }]}
+	onclose={close}
+	onsubmit={close}
+	buttons={[{ label: 'Close', callback: close }]}
 >
 	<div class="wrapper">
-		This is an Example modal where you can do additional work through cell.row.original or a custom
-		context
+		This is an Example modal where you can do additional work through the `row` prop or a custom
+		context.
 		<div>
 			<Switch
-				label="{cell.row.original.id} checked?"
-				value={cell.row.original.isChecked}
+				label="{row.id} checked?"
+				value={row.isChecked}
 				onchange={() => {
-					cell.row.original.isChecked = !cell.row.original.isChecked;
+					row.isChecked = !row.isChecked;
 				}}
 			/>
 		</div>

package/dist/Types/Examples/ExampleModal.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { DisplayDefModalProps } from '../../Components/Table/Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js';
+import type { DisplayModalProps } from '../../Components/Table/Types/Public/ColumnOptions.js';
 import type { ExampleItem } from './ExampleItem.js';
-declare const ExampleModal: import("svelte").Component<DisplayDefModalProps<ExampleItem, never, unknown>, {}, "">;
+declare const ExampleModal: import("svelte").Component<DisplayModalProps<ExampleItem>, {}, "">;
 type ExampleModal = ReturnType<typeof ExampleModal>;
 export default ExampleModal;

package/dist/index.d.ts

@@ -104,7 +104,7 @@ export type { TabGroupButtonProps } from './Components/TabGroupButtonProps.js';
 export { default as Table, type TableProps } from './Components/Table/Table.svelte';
 export { createTable, customRows, localRows, remoteRows, } from './Components/Table/createTable.svelte.js';
 export type { ColumnSpecInternals } from './Components/Table/ColumnFactory.svelte.js';
-export type { ActionsColumnOptions, AnyEditEvent, BaseColumnOptions, BooleanKeyOf, BubbleColumnOptions, CheckboxColumnOptions, ClipboardApi, ColumnFactory as TableColumnFactory, ColumnKind, ColumnSpec, ColumnsApi, CreateTableOptions, CustomRowSource, DateColumnOptions, DateKeyOf, DisplayColumnOptions, DisplayModalProps, ExpandColumnOptions, FilterOnlyColumnOptions, FilteringApi, FocusApi, LiteralRowIdKey, LocalRowSource, NumberColumnOptions, NumberKeyOf, PaginationApi, PreferencesApi, ProgressColumnOptions, QueryColumnOptions, RemoteRowSource, RowAction, RowFetchRequest, RowFetchResponse, RowSelectionColumnOptions, RowSource, SavedPreset, SelectColumnOptions, SelectionApi, SelectionOptions, SortingApi, StringKeyOf, Table as TableInstance, TableInitialState, TablePersistence, TablePersistenceObject, TableStorageAdapter, TextColumnOptions, ValidityColumnOptions, } from './Components/Table/Types/Public/index.js';
+export type { ActionsColumnOptions, AnyEditEvent, BaseColumnOptions, BooleanKeyOf, BubbleColumnOptions, CheckboxColumnOptions, ClipboardApi, ColumnFactory as TableColumnFactory, ColumnKind, ColumnSpec, ColumnsApi, CreateTableOptions, CustomRowSource, DateColumnOptions, DateKeyOf, DisplayColumnOptions, DisplayModalProps, ExpandColumnOptions, FilterOnlyColumnOptions, FilteringApi, FocusApi, LiteralRowIdKey, LocalRowSource, ModalApi, NumberColumnOptions, NumberKeyOf, PaginationApi, PreferencesApi, ProgressColumnOptions, QueryColumnOptions, RemoteRowSource, RowAction, RowFetchRequest, RowFetchResponse, RowSelectionColumnOptions, RowSource, SavedPreset, SelectColumnOptions, SelectionApi, SelectionOptions, SortingApi, StringKeyOf, Table as TableInstance, TableInitialState, TablePersistence, TablePersistenceObject, TableStorageAdapter, TextColumnOptions, ValidityColumnOptions, } from './Components/Table/Types/Public/index.js';
 export { type CellCoordinates } from './Components/Table/Types/Coordinates/CellCoordinates.js';
 export { type ColumnPinningState } from './Components/Table/Types/Columns/ColumnPinningState.js';
 export { type ColumnSizingState } from './Components/Table/Types/Columns/ColumnSizingState.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.37.0",
+  "version": "0.37.2",
   "publishConfig": {
     "access": "restricted"
   },