@lavalogic/scoria 0.40.2 → 0.40.4

package/dist/Components/Contexts/Tooltip.svelte

@@ -49,6 +49,8 @@ set it up at the app root.
   border-radius: 4px;
   font-weight: 500;
   white-space: pre-wrap;
+  max-width: min(28rem, 90vw);
+  overflow-wrap: anywhere;
 }
 .tooltip-wrapper.top-arrow {
   left: var(--x, 0);

package/dist/Components/HorizontalTabGroup.svelte

@@ -9,7 +9,7 @@
 	import HorizontalTabGroupButton from './HorizontalTabGroupButton.svelte';
 	import type { HorizontalTabGroupProps } from './HorizontalTabGroupProps.js';
 	import TextInput from './TextInput.svelte';
-	const {
+	let {
 		tabComponent,
 		tabs,
 		selected,
@@ -18,10 +18,11 @@
 		dense = false,
 		filterable = false,
 		filterFn,
+		searchValue = $bindable(''),
+		searchInfo,
+		searchPlaceholder,
 	}: HorizontalTabGroupProps<CommonDenominator> = $props();
 
-	let searchValue = $state('');
-
 	// Debounce only the search value, not the tabs array. This way a parent
 	// rebuilding `tabs` shows the new list immediately, while typing still
 	// pays the 300ms cost.
@@ -51,9 +52,15 @@
 				<div class="searchbar">
 					<TextInput
 						bind:value={searchValue}
-						placeholder="Search any keyword to find matches{ellipses}"
+						placeholder={searchPlaceholder ?? `Search any keyword to find matches${ellipses}`}
 						rightIcon={{ name: 'search-1', colour: Colour['$ui-blue-4'] }}
 					/>
+					{#if searchInfo}
+						<span class="search-info">
+							<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+							{@render searchInfo()}
+						</span>
+					{/if}
 				</div>
 			{/if}
 		</div>
@@ -81,11 +88,24 @@
 
 <style>.searchbar {
   display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 0.5rem;
   width: 100%;
   padding: 0.5rem;
   background-color: #ffffff;
   min-width: 20.625rem;
 }
+.searchbar :global(> *:first-child) {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.search-info {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+}
 
 .wrapper {
   box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);

package/dist/Components/HorizontalTabGroup.svelte.d.ts

@@ -2,7 +2,7 @@ import type { HorizontalTabGroupProps } from './HorizontalTabGroupProps.js';
 declare function $$render<CommonDenominator>(): {
     props: HorizontalTabGroupProps<CommonDenominator>;
     exports: {};
-    bindings: "";
+    bindings: "searchValue";
     slots: {};
     events: {};
 };
@@ -10,7 +10,7 @@ declare class __sveltets_Render<CommonDenominator> {
     props(): ReturnType<typeof $$render<CommonDenominator>>['props'];
     events(): ReturnType<typeof $$render<CommonDenominator>>['events'];
     slots(): ReturnType<typeof $$render<CommonDenominator>>['slots'];
-    bindings(): "";
+    bindings(): "searchValue";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/Components/HorizontalTabGroupProps.d.ts

@@ -35,6 +35,14 @@ interface HorizontalTabGroupPropsBase<CommonDenominator> {
     filterable?: boolean;
     /** Predicate used to filter tabs on each keystroke (debounced by 300ms). */
     filterFn?: (item: TabOption<CommonDenominator>, filterValue: string) => boolean;
+    /** Bindable current value of the search box. Lets the parent read/drive
+     *  the search term (e.g. to highlight matches elsewhere). */
+    searchValue?: string;
+    /** Optional content rendered beside the search input (e.g. an info icon
+     *  with a tooltip). Only shown when `filterable`. */
+    searchInfo?: Snippet;
+    /** Override the search box placeholder. */
+    searchPlaceholder?: string;
 }
 export interface HorizontalTabGroupPropsWithoutSearch<CommonDenominator> extends HorizontalTabGroupPropsBase<CommonDenominator> {
     filterable?: false;

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

@@ -30,6 +30,36 @@
 		cell.column.columnDef.isEnabled(cell.row.original, cell.row.originalIndex)
 	);
 
+	// Per-row toggle visibility. When `isVisible` resolves false the toggle is
+	// omitted entirely (rather than disabled). Sync booleans are used directly
+	// so non-visible rows never flash the icon; promises resolve into state.
+	const visibleRaw: boolean | Promise<boolean> = $derived(
+		cell.column.columnDef.isVisible
+			? cell.column.columnDef.isVisible(cell.row.original, cell.row.originalIndex)
+			: true
+	);
+	let visibleAsyncResolved = $state(true);
+	let visibleCounter = 0;
+	$effect(() => {
+		const raw = visibleRaw;
+		if (typeof raw === 'boolean') {
+			return;
+		}
+		const local = (visibleCounter = visibleCounter + 1);
+		raw
+			.then((v) => {
+				if (visibleCounter === local) {
+					visibleAsyncResolved = v;
+				}
+			})
+			.catch(() => {
+				if (visibleCounter === local) {
+					visibleAsyncResolved = false;
+				}
+			});
+	});
+	const visible = $derived(typeof visibleRaw === 'boolean' ? visibleRaw : visibleAsyncResolved);
+
 	let validity: Validity = $state(Validity.Valid);
 	$effect(() => {
 		const validityPromise = focusDetails.validity;
@@ -81,13 +111,15 @@
 		class:multifocus={focusDetails.isMultiFocused}
 		class:multifocus-start={focusDetails.isMultiFocusStart}
 	>
-		{#await enabled}
-			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-			{@render action(false)}
-		{:then enabled}
-			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-			{@render action(enabled)}
-		{/await}
+		{#if visible}
+			{#await enabled}
+				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+				{@render action(false)}
+			{:then enabled}
+				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+				{@render action(enabled)}
+			{/await}
+		{/if}
 	</div>
 </div>
 

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

@@ -23,6 +23,31 @@
 		tableContext._focus.getFocusDetailsFor(cell)
 	);
 
+	// Resolve the column's (possibly async) `isEditable` predicate for this
+	// row. A non-editable checkbox renders disabled (read-only) rather than
+	// toggling — mirrors how the inline-edit cells gate on `isEditable`.
+	const editableAsync = $derived(
+		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
+	);
+	let editable = $state(false);
+	let editableCounter = 0;
+	$effect(() => {
+		void editableAsync;
+		const local = (editableCounter = editableCounter + 1);
+		(async () => {
+			try {
+				const resolved = await editableAsync;
+				if (editableCounter === local) {
+					editable = resolved;
+				}
+			} catch {
+				if (editableCounter === local) {
+					editable = false;
+				}
+			}
+		})().catch(devCatch);
+	});
+
 	let inputRef: HTMLInputElement | undefined = $state();
 
 	/**
@@ -32,6 +57,9 @@
 	 * already showed the new checked state.
 	 */
 	const onchange: ChangeEventHandler<HTMLInputElement> = (e) => {
+		if (!editable) {
+			return;
+		}
 		tableContext
 			.onEditCell(
 				cell.row.original,
@@ -84,7 +112,7 @@
 		}
 	}}
 	onkeyup={(e: KeyboardEvent) => {
-		if (e.key === 'Enter') {
+		if (e.key === 'Enter' && editable) {
 			e.stopPropagation();
 			tableContext.onEditCell(cell.row.original, focusDetails.coordinates, !value).catch(devCatch);
 		}
@@ -119,6 +147,7 @@
 			{onchange}
 			type="checkbox"
 			checked={value}
+			disabled={!editable}
 		/>
 	</label>
 </div>
@@ -198,4 +227,9 @@ label.multifocus.multifocus-start {
 .input-cell.error,
 .select-cell.error {
   background-color: #f9e9e9;
+}
+
+input:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
 }</style>

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

@@ -85,7 +85,12 @@
 	const firstCell = $derived(leftCells.at(0) ?? centreCells.at(0) ?? rightCells.at(0));
 	const rowIndex = $derived(firstCell?.row.visibleIndex);
 	let id = $state<RowIdType | undefined>();
-	const highlighted = $derived(id != undefined && tableContext.highlightedItems.has(id));
+	// Transient click/copy highlight OR the declarative, persistent
+	// `highlightRow` predicate (reactive; survives data/pagination resets).
+	const highlighted = $derived(
+		(id != undefined && tableContext.highlightedItems.has(id)) ||
+			(tableContext.highlightRow ? tableContext.highlightRow(row.original, rowIndex ?? 0) : false)
+	);
 
 	$effect(() => {
 		void row.original;

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

@@ -232,6 +232,11 @@ export function createColumnFactory() {
             const def = new CheckboxDef({
                 id: opts.id,
                 ...commonProps(opts, 'checkbox'),
+                // Checkboxes are interactive by default (the base ColumnDef
+                // default is read-only); only an explicit `isEditable` gates
+                // them. Keeps existing checkboxes editable while letting callers
+                // disable per row.
+                isEditable: opts.isEditable ?? (() => true),
                 accessorFn: opts.accessor,
                 getDisplayValue: opts.getDisplayValue,
                 filterValueType: FilterValueType.Bool,
@@ -522,6 +527,7 @@ export function createColumnFactory() {
                     allowCopy: opts.inner?.allowCopy,
                 },
                 onActivate: opts.onActivate,
+                isVisible: opts.isVisible,
             });
             // Expand has no public width option — apply the per-kind default.
             def.width = KIND_DEFAULT_WIDTHS.expand;

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

@@ -13,6 +13,8 @@ import { ColumnDef, type ColumnDefProps } from '../ColumnDef.svelte.js';
 export interface ExpandDefProps<T extends object, R extends object, InnerIdType extends Primitive = Primitive, in FilterValueType = unknown> extends ColumnDefProps<T, FilterValueType> {
     /** Per-row enable predicate for the expansion affordance. */
     isEnabled: (item: T, index: number) => boolean | Promise<boolean>;
+    /** Per-row predicate for whether the toggle renders at all. */
+    isVisible?: (item: T, index: number) => boolean | Promise<boolean>;
     /** Builds the inner table's column defs. Invoked per expansion. */
     getInnerColumnDefs: (item: T, index: number) => DefsWrapper<R>;
     /** Header icon name on the expand-toggle button. */
@@ -49,6 +51,8 @@ export declare class ExpandDef<T extends object, R extends object, InnerIdType e
     readonly headerIcon: IconProps['name'];
     /** Per-row enable predicate for the expansion affordance. */
     readonly isEnabled: (item: T, index: number) => boolean | Promise<boolean>;
+    /** Per-row predicate for whether the toggle renders at all. */
+    readonly isVisible?: (item: T, index: number) => boolean | Promise<boolean>;
     /** Init options for the inner table. */
     readonly innerTableOptions: TableInitOptions<R, InnerIdType>;
     /** Navigate-instead-of-expand callback; undefined for normal expand. */

package/dist/Components/Table/Types/Columns/Definitions/Expand/ExpandDef.svelte.js

@@ -17,6 +17,7 @@ export class ExpandDef extends ColumnDef {
         this.innerTableName = $derived(props.innerTableName);
         this.innerTableOptions = $derived(props.innerTableOptions);
         this.onActivate = $derived(props.onActivate);
+        this.isVisible = $derived(props.isVisible);
     }
     /** Expand columns are never filtered. */
     filterFn = undefined;
@@ -28,6 +29,8 @@ export class ExpandDef extends ColumnDef {
     headerIcon;
     /** Per-row enable predicate for the expansion affordance. */
     isEnabled;
+    /** Per-row predicate for whether the toggle renders at all. */
+    isVisible;
     /** Init options for the inner table. */
     innerTableOptions;
     /** Navigate-instead-of-expand callback; undefined for normal expand. */

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

@@ -60,6 +60,8 @@ export declare class TableContext<T extends object, RowIdType extends Primitive>
     allowAdvancedFiltering: boolean;
     toolbarPosition: ToolbarPosition;
     displayFooter: boolean;
+    /** Declarative persistent row-highlight predicate (see CreateTableOptions). */
+    readonly highlightRow: TableInitOptions<T, RowIdType>['highlightRow'];
     selectionExtractor: TableInitOptions<T, RowIdType>['selectionExtractor'];
     getUserId: () => string | undefined;
     private _onEditCell;
@@ -86,7 +88,9 @@ export declare class TableContext<T extends object, RowIdType extends Primitive>
      * `init`.
      */
     static init<T extends object, RowIdType extends Primitive>(defaultColumnDefs: DefsWrapper<T>, tableName: string, dataRepo: IDataRepository<T>, options: TableInitOptions<T, RowIdType>): TableContext<T, RowIdType>;
-    protected constructor(INTERNAL_ONLY: symbol, defaultColumnDefs: DefsWrapper<T>, tableName: string, dataRepo: IDataRepository<T>, allowCopy: boolean, enableResize: boolean, allowColumnReordering: boolean, allowQuickFiltering: boolean, showQuickFilterByDefault: boolean, allowAdvancedFiltering: boolean, toolbarPosition: ToolbarPosition, displayFooter: boolean, selectionExtractor: TableInitOptions<T, RowIdType>['selectionExtractor'], getUserId: () => string | undefined, _onEditCell: TableInitOptions<T, RowIdType>['onEditCell'], 
+    protected constructor(INTERNAL_ONLY: symbol, defaultColumnDefs: DefsWrapper<T>, tableName: string, dataRepo: IDataRepository<T>, allowCopy: boolean, enableResize: boolean, allowColumnReordering: boolean, allowQuickFiltering: boolean, showQuickFilterByDefault: boolean, allowAdvancedFiltering: boolean, toolbarPosition: ToolbarPosition, displayFooter: boolean, 
+    /** Declarative persistent row-highlight predicate (see CreateTableOptions). */
+    highlightRow: TableInitOptions<T, RowIdType>['highlightRow'], selectionExtractor: TableInitOptions<T, RowIdType>['selectionExtractor'], getUserId: () => string | undefined, _onEditCell: TableInitOptions<T, RowIdType>['onEditCell'], 
     /**
      * Stable per-table identifier supplied by the host app, or
      * `undefined` when remote saved views are disabled. Stored only;

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

@@ -107,6 +107,7 @@ export class TableContext {
     allowAdvancedFiltering;
     toolbarPosition;
     displayFooter;
+    highlightRow;
     selectionExtractor;
     getUserId;
     _onEditCell;
@@ -123,7 +124,7 @@ export class TableContext {
      * `init`.
      */
     static init(defaultColumnDefs, tableName, dataRepo, options) {
-        const context = new this(InternalSymbol, defaultColumnDefs, tableName, dataRepo, options.allowCopy ?? DEFAULT_TABLE_INIT_OPTIONS.allowCopy, options.enableResize ?? DEFAULT_TABLE_INIT_OPTIONS.enableResize, options.allowColumnReordering ?? DEFAULT_TABLE_INIT_OPTIONS.allowColumnReordering, options.allowQuickFiltering ?? DEFAULT_TABLE_INIT_OPTIONS.allowQuickFiltering, options.showQuickFilterByDefault ?? DEFAULT_TABLE_INIT_OPTIONS.showQuickFilterByDefault, options.allowAdvancedFiltering ?? DEFAULT_TABLE_INIT_OPTIONS.allowAdvancedFiltering, options.toolbar ?? DEFAULT_TABLE_INIT_OPTIONS.toolbar, options.displayFooter ?? DEFAULT_TABLE_INIT_OPTIONS.displayFooter, 
+        const context = new this(InternalSymbol, defaultColumnDefs, tableName, dataRepo, options.allowCopy ?? DEFAULT_TABLE_INIT_OPTIONS.allowCopy, options.enableResize ?? DEFAULT_TABLE_INIT_OPTIONS.enableResize, options.allowColumnReordering ?? DEFAULT_TABLE_INIT_OPTIONS.allowColumnReordering, options.allowQuickFiltering ?? DEFAULT_TABLE_INIT_OPTIONS.allowQuickFiltering, options.showQuickFilterByDefault ?? DEFAULT_TABLE_INIT_OPTIONS.showQuickFilterByDefault, options.allowAdvancedFiltering ?? DEFAULT_TABLE_INIT_OPTIONS.allowAdvancedFiltering, options.toolbar ?? DEFAULT_TABLE_INIT_OPTIONS.toolbar, options.displayFooter ?? DEFAULT_TABLE_INIT_OPTIONS.displayFooter, options.highlightRow, 
         // Fallback identity extractor when no `selectionExtractor` is
         // supplied (some consumers build an options object directly
         // without one). Returning the row object preserves identity
@@ -134,7 +135,9 @@ export class TableContext {
         return context;
     }
     // #region constructor
-    constructor(INTERNAL_ONLY, defaultColumnDefs, tableName, dataRepo, allowCopy, enableResize, allowColumnReordering, allowQuickFiltering, showQuickFilterByDefault, allowAdvancedFiltering, toolbarPosition, displayFooter, selectionExtractor, getUserId, _onEditCell = () => {
+    constructor(INTERNAL_ONLY, defaultColumnDefs, tableName, dataRepo, allowCopy, enableResize, allowColumnReordering, allowQuickFiltering, showQuickFilterByDefault, allowAdvancedFiltering, toolbarPosition, displayFooter, 
+    /** Declarative persistent row-highlight predicate (see CreateTableOptions). */
+    highlightRow, selectionExtractor, getUserId, _onEditCell = () => {
         console.warn('Cannot edit immutable table');
     }, 
     /**
@@ -159,6 +162,7 @@ export class TableContext {
         this.allowAdvancedFiltering = allowAdvancedFiltering;
         this.toolbarPosition = toolbarPosition;
         this.displayFooter = displayFooter;
+        this.highlightRow = highlightRow;
         this.selectionExtractor = selectionExtractor;
         this.getUserId = getUserId;
         this._onEditCell = _onEditCell;

package/dist/Components/Table/Types/Context/TableInitOptions.d.ts

@@ -28,6 +28,8 @@ export interface TableInitOptions<T extends object, Identifier extends Primitive
     allowAdvancedFiltering?: boolean;
     toolbar?: ToolbarPosition;
     displayFooter?: boolean;
+    /** Declarative persistent row-highlight predicate. See CreateTableOptions. */
+    highlightRow?: (item: T, index: number) => boolean;
     onEditCell?: (item: T, coords: CellCoordinates, value: unknown) => void | Promise<void>;
     getUserId: () => string | undefined;
     /** Stable per-table identifier supplied by the host app. Identifies

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

@@ -377,6 +377,15 @@ export interface ExpandColumnOptions<TRow extends object, TInner extends object,
      * inner content. Async supported. Defaults to `() => true`.
      */
     isEnabled?: (row: TRow, index: number) => boolean | Promise<boolean>;
+    /**
+     * Per-row predicate for whether the expand affordance renders at all.
+     * When it resolves to `false` the toggle is omitted entirely (not just
+     * disabled), so rows that can never expand show no icon. Use to surface
+     * only the rows that are actually expandable (vs `isEnabled`, which keeps
+     * the toggle visible but greyed). Async supported. Defaults to always
+     * visible.
+     */
+    isVisible?: (row: TRow, index: number) => boolean | Promise<boolean>;
     /**
      * Inner-table configuration. Each field maps 1:1 onto the equivalent
      * `CreateTableOptions` field that configures an outer Table; supply

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

@@ -59,6 +59,15 @@ export interface CreateTableOptions<TRow extends object, TRowId extends Primitiv
     toolbar?: 'top' | 'right' | 'left' | 'none';
     /** Whether to render the footer. Defaults to true. */
     showFooter?: boolean;
+    /**
+     * Declarative, persistent row highlight. When provided, every row for
+     * which this returns true is rendered highlighted — reactively and
+     * independently of the transient click/copy highlight, so it survives
+     * data/pagination changes (the latter clears the interaction highlight).
+     * Read reactive state inside the predicate (e.g. a search term) to drive
+     * the highlight from outside the table. Synchronous. Defaults to none.
+     */
+    highlightRow?: (row: TRow, index: number) => boolean;
     /** Whether copy operations are enabled. Defaults to true. */
     allowCopy?: boolean;
     /** Whether columns may be user-resized. Defaults to true. */

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

@@ -76,6 +76,7 @@ export function createTable(options) {
         allowAdvancedFiltering: options.allowAdvancedFilter,
         toolbar: translateToolbar(options.toolbar),
         displayFooter: options.showFooter,
+        highlightRow: options.highlightRow,
         onEditCell,
         datatableUuid: options.datatableUuid,
         remoteLayouts: options.remoteLayouts,

package/package.json

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