@lavalogic/scoria 0.37.11 → 0.37.13

package/dist/Components/Table/Body/QuickSearchCell.svelte

@@ -687,8 +687,8 @@
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
-  white-space: nowrap;
-  overflow-x: clip;
+  white-space: var(--cell-white-space, nowrap);
+  overflow-x: var(--cell-overflow-x, clip);
   text-overflow: ellipsis;
   position: relative;
   padding-left: 0.75rem;
@@ -697,7 +697,8 @@
   border-bottom: solid 1px #cbd4da;
   box-sizing: border-box;
   width: 100%;
-  height: var(--height);
+  height: var(--cell-height, var(--height));
+  min-height: var(--cell-min-height, var(--height));
 }
 
 .input-cell {

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

@@ -56,8 +56,8 @@ which reads either "Highlight row N" or "Unhighlight row N" depending on state.
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
-  white-space: nowrap;
-  overflow-x: clip;
+  white-space: var(--cell-white-space, nowrap);
+  overflow-x: var(--cell-overflow-x, clip);
   text-overflow: ellipsis;
   position: relative;
   padding-left: 0.75rem;
@@ -66,7 +66,8 @@ which reads either "Highlight row N" or "Unhighlight row N" depending on state.
   border-bottom: solid 1px #cbd4da;
   box-sizing: border-box;
   width: 100%;
-  height: var(--height);
+  height: var(--cell-height, var(--height));
+  min-height: var(--cell-min-height, var(--height));
 }
 
 .highlight-content {

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

@@ -172,8 +172,8 @@
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
-  white-space: nowrap;
-  overflow-x: clip;
+  white-space: var(--cell-white-space, nowrap);
+  overflow-x: var(--cell-overflow-x, clip);
   text-overflow: ellipsis;
   position: relative;
   padding-left: 0.75rem;
@@ -182,7 +182,8 @@
   border-bottom: solid 1px #cbd4da;
   box-sizing: border-box;
   width: 100%;
-  height: var(--height);
+  height: var(--cell-height, var(--height));
+  min-height: var(--cell-min-height, var(--height));
 }
 
 .focusable.multifocus,

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

@@ -117,8 +117,8 @@
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
-  white-space: nowrap;
-  overflow-x: clip;
+  white-space: var(--cell-white-space, nowrap);
+  overflow-x: var(--cell-overflow-x, clip);
   text-overflow: ellipsis;
   position: relative;
   padding-left: 0.75rem;
@@ -127,7 +127,8 @@
   border-bottom: solid 1px #cbd4da;
   box-sizing: border-box;
   width: 100%;
-  height: var(--height);
+  height: var(--cell-height, var(--height));
+  min-height: var(--cell-min-height, var(--height));
 }
 
 .focusable.multifocus,

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

@@ -125,8 +125,8 @@
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
-  white-space: nowrap;
-  overflow-x: clip;
+  white-space: var(--cell-white-space, nowrap);
+  overflow-x: var(--cell-overflow-x, clip);
   text-overflow: ellipsis;
   position: relative;
   padding-left: 0.75rem;
@@ -135,7 +135,8 @@
   border-bottom: solid 1px #cbd4da;
   box-sizing: border-box;
   width: 100%;
-  height: var(--height);
+  height: var(--cell-height, var(--height));
+  min-height: var(--cell-min-height, var(--height));
 }
 
 .focusable {

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

@@ -201,8 +201,8 @@
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
-  white-space: nowrap;
-  overflow-x: clip;
+  white-space: var(--cell-white-space, nowrap);
+  overflow-x: var(--cell-overflow-x, clip);
   text-overflow: ellipsis;
   position: relative;
   padding-left: 0.75rem;
@@ -211,7 +211,8 @@
   border-bottom: solid 1px #cbd4da;
   box-sizing: border-box;
   width: 100%;
-  height: var(--height);
+  height: var(--cell-height, var(--height));
+  min-height: var(--cell-min-height, var(--height));
 }
 
 .focusable.multifocus,

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

@@ -110,8 +110,8 @@
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
-  white-space: nowrap;
-  overflow-x: clip;
+  white-space: var(--cell-white-space, nowrap);
+  overflow-x: var(--cell-overflow-x, clip);
   text-overflow: ellipsis;
   position: relative;
   padding-left: 0.75rem;
@@ -120,7 +120,8 @@
   border-bottom: solid 1px #cbd4da;
   box-sizing: border-box;
   width: 100%;
-  height: var(--height);
+  height: var(--cell-height, var(--height));
+  min-height: var(--cell-min-height, var(--height));
 }
 
 .focusable.multifocus,

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

@@ -131,8 +131,8 @@
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
-  white-space: nowrap;
-  overflow-x: clip;
+  white-space: var(--cell-white-space, nowrap);
+  overflow-x: var(--cell-overflow-x, clip);
   text-overflow: ellipsis;
   position: relative;
   padding-left: 0.75rem;
@@ -141,7 +141,8 @@
   border-bottom: solid 1px #cbd4da;
   box-sizing: border-box;
   width: 100%;
-  height: var(--height);
+  height: var(--cell-height, var(--height));
+  min-height: var(--cell-min-height, var(--height));
 }
 
 input[type=checkbox] {

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

@@ -251,8 +251,8 @@
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
-  white-space: nowrap;
-  overflow-x: clip;
+  white-space: var(--cell-white-space, nowrap);
+  overflow-x: var(--cell-overflow-x, clip);
   text-overflow: ellipsis;
   position: relative;
   padding-left: 0.75rem;
@@ -261,7 +261,8 @@
   border-bottom: solid 1px #cbd4da;
   box-sizing: border-box;
   width: 100%;
-  height: var(--height);
+  height: var(--cell-height, var(--height));
+  min-height: var(--cell-min-height, var(--height));
 }
 
 .focusable.multifocus,

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

@@ -221,8 +221,8 @@
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
-  white-space: nowrap;
-  overflow-x: clip;
+  white-space: var(--cell-white-space, nowrap);
+  overflow-x: var(--cell-overflow-x, clip);
   text-overflow: ellipsis;
   position: relative;
   padding-left: 0.75rem;
@@ -231,7 +231,8 @@
   border-bottom: solid 1px #cbd4da;
   box-sizing: border-box;
   width: 100%;
-  height: var(--height);
+  height: var(--cell-height, var(--height));
+  min-height: var(--cell-min-height, var(--height));
 }
 
 .focusable.multifocus,

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

@@ -262,8 +262,8 @@
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
-  white-space: nowrap;
-  overflow-x: clip;
+  white-space: var(--cell-white-space, nowrap);
+  overflow-x: var(--cell-overflow-x, clip);
   text-overflow: ellipsis;
   position: relative;
   padding-left: 0.75rem;
@@ -272,7 +272,8 @@
   border-bottom: solid 1px #cbd4da;
   box-sizing: border-box;
   width: 100%;
-  height: var(--height);
+  height: var(--cell-height, var(--height));
+  min-height: var(--cell-min-height, var(--height));
 }
 
 .focusable.multifocus,

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

@@ -184,8 +184,8 @@
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
-  white-space: nowrap;
-  overflow-x: clip;
+  white-space: var(--cell-white-space, nowrap);
+  overflow-x: var(--cell-overflow-x, clip);
   text-overflow: ellipsis;
   position: relative;
   padding-left: 0.75rem;
@@ -194,7 +194,8 @@
   border-bottom: solid 1px #cbd4da;
   box-sizing: border-box;
   width: 100%;
-  height: var(--height);
+  height: var(--cell-height, var(--height));
+  min-height: var(--cell-min-height, var(--height));
 }
 
 input[type=checkbox] {

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

@@ -234,8 +234,8 @@
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
-  white-space: nowrap;
-  overflow-x: clip;
+  white-space: var(--cell-white-space, nowrap);
+  overflow-x: var(--cell-overflow-x, clip);
   text-overflow: ellipsis;
   position: relative;
   padding-left: 0.75rem;
@@ -244,7 +244,8 @@
   border-bottom: solid 1px #cbd4da;
   box-sizing: border-box;
   width: 100%;
-  height: var(--height);
+  height: var(--cell-height, var(--height));
+  min-height: var(--cell-min-height, var(--height));
 }
 
 .focusable.multifocus,

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

@@ -202,8 +202,8 @@
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
-  white-space: nowrap;
-  overflow-x: clip;
+  white-space: var(--cell-white-space, nowrap);
+  overflow-x: var(--cell-overflow-x, clip);
   text-overflow: ellipsis;
   position: relative;
   padding-left: 0.75rem;
@@ -212,7 +212,8 @@
   border-bottom: solid 1px #cbd4da;
   box-sizing: border-box;
   width: 100%;
-  height: var(--height);
+  height: var(--cell-height, var(--height));
+  min-height: var(--cell-min-height, var(--height));
 }
 
 .focusable.multifocus,

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

@@ -188,8 +188,8 @@
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
-  white-space: nowrap;
-  overflow-x: clip;
+  white-space: var(--cell-white-space, nowrap);
+  overflow-x: var(--cell-overflow-x, clip);
   text-overflow: ellipsis;
   position: relative;
   padding-left: 0.75rem;
@@ -198,7 +198,8 @@
   border-bottom: solid 1px #cbd4da;
   box-sizing: border-box;
   width: 100%;
-  height: var(--height);
+  height: var(--cell-height, var(--height));
+  min-height: var(--cell-min-height, var(--height));
 }
 
 .focusable {

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

@@ -153,6 +153,19 @@
 	// `innerTableName`. Generating this once per row prevents localStorage
 	// preset keys from accumulating UUID-keyed garbage every expand toggle.
 	const fallbackInnerTableName = generateWeakId<ScoriaStorageKey>();
+
+	/**
+	 * Inline style appended to a cell's `style="..."` when its column opts
+	 * into `wrapValue`. The hooks switch the leaf cell's `white-space`,
+	 * `overflow-x`, and `height` to wrap-friendly values. Implemented as
+	 * CSS-variable overrides so the table-cell-basic mixin in
+	 * `_mixins.scss` consumes them via `var(--cell-* , fallback)`.
+	 */
+	function cellWrapStyle(cell: TableCell<T>): string {
+		return cell.column.columnDef.wrapValue
+			? '--cell-white-space: normal; --cell-overflow-x: visible; --cell-height: auto; --cell-min-height: var(--height);'
+			: '';
+	}
 </script>
 
 <div
@@ -187,7 +200,7 @@
 		<div
 			role="cell"
 			class="cell pinned-left"
-			style="left: {leftOffsets[index]}px"
+			style="left: {leftOffsets[index]}px; {cellWrapStyle(cell)}"
 		>
 			<TableColumn
 				{cell}
@@ -200,6 +213,7 @@
 		<div
 			role="cell"
 			class="cell"
+			style={cellWrapStyle(cell)}
 		>
 			<TableColumn
 				{cell}
@@ -212,7 +226,7 @@
 		<div
 			role="cell"
 			class="cell pinned-right"
-			style="right: {rightOffsets[index]}px"
+			style="right: {rightOffsets[index]}px; {cellWrapStyle(cell)}"
 		>
 			<TableColumn
 				{cell}

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

@@ -109,6 +109,8 @@ function commonProps(opts, kind) {
         // per-kind differentiation the factory just put in place.
         minSize: opts.minWidth ?? defaultWidth,
         width: opts.width ?? defaultWidth,
+        maxWidth: opts.maxWidth,
+        wrapValue: opts.wrapValue,
         allowSorting: opts.allowSorting,
         allowFiltering: opts.allowFiltering,
         defaultHidden: opts.defaultHidden,
@@ -256,9 +258,27 @@ export function createColumnFactory() {
             const normalisedOptions = opts.getOptions
                 ? normaliseOptionsLoader(opts.getOptions)
                 : undefined;
+            // Display columns have no intrinsic kind (the value comes from an
+            // arbitrary `value: (row) => ...` thunk) so the generic 'display'
+            // default (150px) is the fallback. When the consumer DOES pass a
+            // `filterValueType`, treat it as a hint about the rendered shape
+            // of the column and pick the matching per-kind default so a table
+            // full of `col.display` columns ends up visually differentiated
+            // instead of every column collapsing to the same 150px floor.
+            const inferredKind = opts.filterValueType === 'Number'
+                ? 'number'
+                : opts.filterValueType === 'Date'
+                    ? 'date'
+                    : opts.filterValueType === 'Bool'
+                        ? 'checkbox'
+                        : opts.filterValueType === 'Select'
+                            ? 'select'
+                            : opts.filterValueType === 'String'
+                                ? 'text'
+                                : 'display';
             const def = new DisplayDef({
                 id,
-                ...commonProps(opts, 'display'),
+                ...commonProps(opts, inferredKind),
                 accessorFn: opts.value,
                 modal: opts.modal,
                 // Display columns have no implicit filter type (unlike the

package/dist/Components/Table/Table.svelte

@@ -356,17 +356,20 @@
 	//   20px to match the existing visual).
 	// - Each other track uses one of two strategies based on the
 	//   column's `userResized` flag:
-	//   - `userResized = false` (default): `minmax(width, 1fr)`. The
-	//     column flexes to share the row's remaining horizontal space
-	//     so the grid fills the container, and it automatically takes
-	//     back any space a sibling column gives up when shrunk - this
-	//     means the table never ends up narrower than its container
-	//     while any column is still in the flexible set.
+	//   - `userResized = false` (default): `minmax(width, maxWidth ?? 1fr)`.
+	//     The column is at least `width` wide and grows to share any
+	//     leftover horizontal space with its sibling tracks. If the
+	//     column has a `maxWidth`, that pixel value is the upper bound
+	//     instead - the column never grows past `maxWidth`, and cells
+	//     whose content exceeds the track ellipsise (or wrap, when the
+	//     column opts in to `wrapValue`). The `1fr` upper bound was
+	//     chosen over `max-content` because `max-content` is unstable
+	//     under row virtualisation: tracks resize as rows scroll in
+	//     and out of the rendered window because the auto-min/max
+	//     consults only the currently-rendered cells.
 	//   - `userResized = true`: `${width}px` (fixed). The column sits
 	//     at exactly the size the user dragged it to, and dragging the
-	//     handle again only changes this column - other user-resized
-	//     columns keep their explicit widths and non-resized columns
-	//     just adjust their flex share.
+	//     handle again only changes this column.
 	// - Pinned and centre columns use the same per-column rule so
 	//   toggling a column's pin state does not change its width.
 	// - Sticky-cell offsets are read from `_columnRenderedWidths`
@@ -374,10 +377,16 @@
 	//   accurate sticky positions in both states.
 	const colsTemplate = $derived.by(() => {
 		void tableContext.columnSizing;
-		const track = (col: { columnDef: { width: number; userResized: boolean } }) =>
-			col.columnDef.userResized
-				? `${col.columnDef.width}px`
-				: `minmax(${col.columnDef.width}px, 1fr)`;
+		const track = (col: {
+			columnDef: { width: number; maxWidth?: number; userResized: boolean };
+		}) => {
+			if (col.columnDef.userResized) {
+				return `${col.columnDef.width}px`;
+			}
+			const upper =
+				col.columnDef.maxWidth != null ? `${col.columnDef.maxWidth}px` : '1fr';
+			return `minmax(${col.columnDef.width}px, ${upper})`;
+		};
 		const tracks: Array<string> = ['20px'];
 		for (const col of leftColumns) {
 			tracks.push(track(col));

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

@@ -48,6 +48,16 @@ export interface ColumnDefProps<T extends object, in FilterFnType, out OptionsTy
     minSize?: Pixels;
     /** Initial width in pixels. Defaults to `minSize`. */
     width?: Pixels;
+    /** Maximum width in pixels. When set, caps the grid track at this
+     *  value (replacing the default `1fr` upper bound on the track).
+     *  Cell content beyond the track is ellipsised, or wraps when
+     *  `wrapValue` is also set. */
+    maxWidth?: Pixels;
+    /** When true, cell content that does not fit wraps onto new lines
+     *  and the row's height grows to fit. When false (default) overflow
+     *  is clipped with ellipsis. Surfaces as the `--wrap-value` CSS
+     *  variable on the column track so cell SCSS picks it up. */
+    wrapValue?: boolean;
     /** Async-flag predicate for whether a given cell is currently editable. */
     isEditable?: (item: T, index: number) => boolean | Promise<boolean>;
     /** Whether the column may be resized by the user. Defaults to `true`. */
@@ -129,6 +139,15 @@ export declare abstract class ColumnDef<T extends object, in FilterFnType = neve
     /** Current width in pixels. Mutated by the resize handle. */
     get width(): Pixels;
     set width(v: Pixels);
+    private _maxWidth;
+    /** Maximum width in pixels. Undefined = no cap (track flexes under `1fr`). */
+    get maxWidth(): Pixels | undefined;
+    set maxWidth(v: Pixels | undefined);
+    private _wrapValue;
+    /** Whether oversized cell content wraps onto new lines (true) or is
+     *  clipped with ellipsis (false). */
+    get wrapValue(): boolean;
+    set wrapValue(v: boolean);
     private _isResizing;
     /** Whether the resize handle is currently active. */
     get isResizing(): boolean;

package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.js

@@ -36,6 +36,8 @@ export class ColumnDef {
         this.accessorFn = $derived(props.accessorFn);
         this._minSize = $state(props.minSize ?? 48);
         this._width = $state(props.width ?? props.minSize ?? 48);
+        this._maxWidth = $state(props.maxWidth);
+        this._wrapValue = $state(props.wrapValue ?? false);
         this.isEditable = $derived(props.isEditable ?? (() => Promise.resolve(false)));
         this.resizable = $derived(props.resizable ?? true);
         this.header = $derived(props.header);
@@ -89,6 +91,23 @@ export class ColumnDef {
     set width(v) {
         this._width = v;
     }
+    _maxWidth;
+    /** Maximum width in pixels. Undefined = no cap (track flexes under `1fr`). */
+    get maxWidth() {
+        return this._maxWidth;
+    }
+    set maxWidth(v) {
+        this._maxWidth = v;
+    }
+    _wrapValue;
+    /** Whether oversized cell content wraps onto new lines (true) or is
+     *  clipped with ellipsis (false). */
+    get wrapValue() {
+        return this._wrapValue;
+    }
+    set wrapValue(v) {
+        this._wrapValue = v;
+    }
     _isResizing = $state(false);
     /** Whether the resize handle is currently active. */
     get isResizing() {

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

@@ -21,6 +21,18 @@ export interface BaseColumnOptions {
     minWidth?: number;
     /** Initial width in pixels. Defaults to `minWidth`. */
     width?: number;
+    /** Maximum width in pixels. When set, the column's grid track is
+     *  capped at this value (instead of flexing freely under `1fr`).
+     *  Cell content longer than the track is ellipsised by default;
+     *  set `wrapValue: true` to make the row grow vertically and the
+     *  content wrap onto multiple lines instead. */
+    maxWidth?: number;
+    /** When true, cell content that does not fit horizontally wraps
+     *  onto a new line and the row's height expands to fit. When false
+     *  (the default) overflow is clipped with `text-overflow: ellipsis`.
+     *  Most useful when combined with `maxWidth` to clamp the track
+     *  width and force wrapping to kick in. */
+    wrapValue?: boolean;
     /** Whether this column may be sorted. Defaults to true. */
     allowSorting?: boolean;
     /** Whether this column may be filtered. Defaults to true. */

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

@@ -3,6 +3,7 @@ import type { AnyEditEvent } from './AnyEditEvent.js';
 import type { ColumnFactory } from './ColumnFactory.js';
 import type { ColumnSpec } from './ColumnSpec.js';
 import type { LiteralRowIdKey } from './KeyConstraints.js';
+import type { CustomRemoteFilters } from '../Filtering/CustomRemoteFilters.js';
 import type { RowSource } from './RowSource.js';
 import type { SelectionOptions } from './SelectionOptions.js';
 import type { TableInitialState } from './TableInitialState.js';
@@ -35,6 +36,16 @@ export interface CreateTableOptions<TRow extends object, TRowId extends Primitiv
     /** Column declarations. The closure receives a typed `ColumnFactory<TRow>`;
      *  return the column specs in memory order. */
     columns: (col: ColumnFactory<TRow>) => ReadonlyArray<ColumnSpec<TRow>>;
+    /** Optional registry of custom server-driven filters, keyed by column id.
+     *  Each entry provides the metadata the advanced filter panel needs to
+     *  render an input for a column that does not have a built-in `filterFn`
+     *  (such as `col.filterOnly(...)` chips or nested-path display columns).
+     *
+     *  Passed as a thunk so the caller can return a `SvelteMap` whose
+     *  reactive identity is preserved across re-renders. The same map is
+     *  typically also handed to `createRemoteRowSource({ remoteFilters })`
+     *  so the server query and the filter UI agree on the available keys. */
+    remoteFilters?: () => CustomRemoteFilters<unknown> | undefined;
     /** Selection. Defaults to `{ mode: 'multiple' }` with internal map ownership. */
     selection?: SelectionOptions<TRow, TRowId>;
     /** Persistence. Defaults to all layers enabled. Pass `false` to disable

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

@@ -1,6 +1,7 @@
 import type { RefWrapper } from '../../../../Types/Internal/RefWrapper.js';
 import type { ColumnFiltersState } from '../Filtering/ColumnFiltersState.js';
 import type { SortingState } from '../DataRepository/SortingState.js';
+import type { CustomRemoteFilters } from '../Filtering/CustomRemoteFilters.js';
 /**
  * Data source for a Table. One of three variants:
  *
@@ -71,6 +72,14 @@ export interface CustomRowSource<TRow extends object> {
      *  `AbortSignal` so consumers can cancel an in-flight request when its
      *  result is superseded. */
     fetch: (request: RowFetchRequest) => Promise<RowFetchResponse<TRow>>;
+    /** Optional registry of server-driven filters keyed by column id. When
+     *  set, the table's advanced filter panel will render a chip for each
+     *  entry alongside the standard column-derived chips. Typically the
+     *  custom-rows factory (e.g. `createRemoteRowSource`) populates this
+     *  from the same map it uses to build the request URL, so the UI and
+     *  the server query stay in sync without the caller having to wire the
+     *  map twice. */
+    remoteFilters?: CustomRemoteFilters<unknown>;
 }
 /** Argument passed to `CustomRowSource.fetch`. */
 export interface RowFetchRequest {

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

@@ -69,7 +69,15 @@ export function createTable(options) {
         }
         return internal.def;
     });
-    const defsWrapper = { defs };
+    // remoteFilters resolution order:
+    //   1. Explicit `options.remoteFilters` thunk on createTable.
+    //   2. `kind: 'custom'` row source's `remoteFilters` field (set by
+    //      `createRemoteRowSource` from its own option of the same name).
+    // This means a caller can hand the same `SvelteMap` to the custom
+    // row-source factory once and the filter panel picks it up for free.
+    const remoteFilters = options.remoteFilters?.() ??
+        (options.rows.kind === 'custom' ? options.rows.remoteFilters : undefined);
+    const defsWrapper = remoteFilters ? { defs, remoteFilters } : { defs };
     // ── 3. Construct the repository for the chosen row source ──────
     const repository = makeRepository(options.name, options.rows, options.getUserId);
     // ── 4. Build the `onEditCell` wrapper ──────────────────────────

package/dist/scss/_mixins.scss

@@ -1605,8 +1605,13 @@
 		@include table-height-transition;
 		--input-border: none;
 		--input-height: var(--height);
-		white-space: nowrap;
-		overflow-x: clip;
+		// Layout hooks driven by per-column `wrapValue` (set as
+		// `--cell-white-space`, `--cell-overflow-x`, `--cell-height` on
+		// the cell wrapper by TableRow / TableHead when the column opts
+		// in). Defaults preserve the historical single-line-with-ellipsis
+		// rendering.
+		white-space: var(--cell-white-space, nowrap);
+		overflow-x: var(--cell-overflow-x, clip);
 		text-overflow: ellipsis;
 		position: relative;
 		padding-left: 0.75rem;
@@ -1626,7 +1631,11 @@
 		// BubbleCell, etc.) - the visible symptom was the display
 		// cells' bottom borders sitting 1px above the row's actual
 		// bottom edge.
-		height: var(--height);
+		//
+		// `--cell-height` lets `wrapValue` columns override the floor to
+		// `auto`, allowing the row to grow vertically to fit wrapped text.
+		height: var(--cell-height, var(--height));
+		min-height: var(--cell-min-height, var(--height));
 	}
 }
 

package/package.json

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