@lavalogic/scoria 0.35.0 → 0.37.0

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

@@ -1,25 +1,26 @@
+import type { Primitive } from '../../Types/Context/TableInitOptions.js';
 import type { ColumnListRowProps } from './ColumnListRowProps.js';
-declare function $$render<T extends object>(): {
+declare function $$render<T extends object, IdType extends Primitive>(): {
     props: ColumnListRowProps<T>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends object> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+declare class __sveltets_Render<T extends object, IdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, IdType>>['props'];
+    events(): ReturnType<typeof $$render<T, IdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, IdType>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <T extends object, IdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, IdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, IdType>['props']>, ReturnType<__sveltets_Render<T, IdType>['events']>, ReturnType<__sveltets_Render<T, IdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, IdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    <T extends object, IdType extends Primitive>(internal: unknown, props: ReturnType<__sveltets_Render<T, IdType>['props']> & {}): ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const ColumnListRow: $$IsomorphicComponent;
-type ColumnListRow<T extends object> = InstanceType<typeof ColumnListRow<T>>;
+type ColumnListRow<T extends object, IdType extends Primitive> = InstanceType<typeof ColumnListRow<T, IdType>>;
 export default ColumnListRow;

package/dist/Components/Table/Body/Rows/ColumnListRowProps.d.ts

@@ -1,4 +1,9 @@
 import type { ColumnDef } from '../../Types/Columns/Definitions/ColumnDef.svelte.js';
 export interface ColumnListRowProps<T extends object> {
+    /**
+     * The column definition rendered as a row in the column-settings list.
+     * Pass `null` to render the placeholder top-anchor `<li>` used as a
+     * drop target for "drag column to the top".
+     */
     columnDef: ColumnDef<T> | null;
 }

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

@@ -1,49 +1,79 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import { AccessorDef } from '../../../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js';
-	import type { ColumnDef } from '../../../Types/Columns/Definitions/ColumnDef.svelte.js';
-	import type { Component } from 'svelte';
-	import type { AccessorComponentProps } from './AccessorComponentProps.js';
-	import FocusableImmutableCell from './FocusableImmutableCell.svelte';
-	import TableCheckbox from './TableCheckbox.svelte';
-	import TableDatePicker from './TableDatePicker.svelte';
-	import TableNumberInput from './TableNumberInput.svelte';
-	import TableQuerySelect from './TableQuerySelect.svelte';
-	import TableSelect from './TableSelect.svelte';
-	import TableTextInput from './TableTextInput.svelte';
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	const { cell }: AccessorComponentProps<T> = $props();
-
-	const cellTypes: Record<
-		'Number' | 'Date' | 'Select' | 'Checkbox' | 'Query' | 'Text',
-		object & Component<any>
-	> = {
-		Number: TableNumberInput,
-		Date: TableDatePicker,
-		Select: TableSelect,
-		Query: TableQuerySelect,
-		Checkbox: TableCheckbox,
-		Text: TableTextInput,
-	} as const;
-
-	const CurrentComponent = $derived(getAppropriateAccessorDef(cell.column.columnDef));
-
-	function getAppropriateAccessorDef(columnDef: ColumnDef<T>): Component<any> {
-		if (columnDef instanceof AccessorDef) {
-			return cellTypes[columnDef.accessorType];
-		}
-
-		return FocusableImmutableCell;
-	}
-</script>
-
-<CurrentComponent {cell} />
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import { AccessorDef } from '../../../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js';
+	import type { ColumnDef } from '../../../Types/Columns/Definitions/ColumnDef.svelte.js';
+	import type { Component } from 'svelte';
+	import type { AccessorComponentProps } from './AccessorComponentProps.js';
+	import FocusableImmutableCell from './FocusableImmutableCell.svelte';
+	import TableCheckbox from './TableCheckbox.svelte';
+	import TableDatePicker from './TableDatePicker.svelte';
+	import TableNumberInput from './TableNumberInput.svelte';
+	import TableQuerySelect from './TableQuerySelect.svelte';
+	import TableSelect from './TableSelect.svelte';
+	import TableTextInput from './TableTextInput.svelte';
+
+	/**
+	 * Loose structural type used for the cell-host dispatch table.
+	 *
+	 * Every accessor cell host (TableNumberInput, TableDatePicker, ...) is a
+	 * Svelte 5 `Component` whose props include at minimum `{ cell: TableCell<T> }`
+	 * plus host-specific extras. A fully discriminated `AccessorComponentMap<T>`
+	 * keyed on `accessorType` was considered (see the RowGenericThreading
+	 * follow-up workorder) but deferred: it would force every cell host to share
+	 * an identical prop signature or each branch of the dispatch to be invoked
+	 * through a type-narrowed switch, both of which have a large blast radius
+	 * across the Table subtree. Using `Component<Record<string, unknown>>` keeps
+	 * the residual loosening contained to a single line and removes the previous
+	 * `Component<any>` from this file.
+	 */
+	type AccessorCellComponent = Component<Record<string, unknown>>;
+
+	/**
+	 * Frozen lookup from `AccessorDef.accessorType` discriminator to the matching
+	 * cell-host Svelte component. Hoisted to module scope so the table does not
+	 * allocate a fresh 6-key object per cell on each render (with 100 rows by
+	 * roughly 10 accessor columns that would be 1000 redundant allocations per
+	 * render).
+	 */
+	const cellTypes = Object.freeze({
+		Number: TableNumberInput,
+		Date: TableDatePicker,
+		Select: TableSelect,
+		Query: TableQuerySelect,
+		Checkbox: TableCheckbox,
+		Text: TableTextInput,
+	}) as unknown as Readonly<
+		Record<'Number' | 'Date' | 'Select' | 'Checkbox' | 'Query' | 'Text', AccessorCellComponent>
+	>;
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object"
+>
+	/** Single cell to render for the supplied {@link TableCell}. The accessor type discriminator is read off `cell.column.columnDef`. */
+	const { cell }: AccessorComponentProps<T> = $props();
+
+	const CurrentComponent = $derived(getAppropriateAccessorDef(cell.column.columnDef));
+
+	/**
+	 * Returns the cell-host component for `columnDef`'s discriminant. Falls back
+	 * to `FocusableImmutableCell` when the column is not an `AccessorDef` (this
+	 * branch is technically dead in the live dispatcher since `TableColumn`
+	 * filters first, but the total function keeps this file safe to call
+	 * directly from other dispatch sites).
+	 */
+	function getAppropriateAccessorDef(columnDef: ColumnDef<T>): AccessorCellComponent {
+		if (columnDef instanceof AccessorDef) {
+			return cellTypes[columnDef.accessorType];
+		}
+
+		return FocusableImmutableCell as unknown as AccessorCellComponent;
+	}
+</script>
+
+<CurrentComponent {cell} />

package/dist/Components/Table/Body/Rows/Columns/AccessorComponentProps.d.ts

@@ -1,4 +1,16 @@
 import type { TableCell } from '../../../Types/Columns/TableCell.js';
+/**
+ * Props for {@link AccessorComponent}. The dispatcher reads
+ * `cell.column.columnDef.accessorType` to pick the matching cell-host
+ * component (TableNumberInput, TableDatePicker, etc.).
+ *
+ * The narrow per-accessor cell types are not threaded here yet; the dispatch
+ * accepts the generic `TableCell<T>` and the chosen host re-narrows via
+ * `cell.column.columnDef`. Threading a discriminated `TValue` through the
+ * accessor cell hosts is tracked under the cross-cutting RowGenericThreading
+ * workorder.
+ */
 export interface AccessorComponentProps<T extends object> {
+    /** The cell whose value should be rendered by the matching accessor cell host. */
     cell: TableCell<T>;
 }

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

@@ -1,183 +1,174 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import Action from '../../../../Action.svelte';
-	import Portal from '../../../../Portal.svelte';
-	import type { TableActionButton } from '../../../Types/Columns/TableActionButton.js';
-	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import { MultiFocusEdge } from '../../../Types/Focus/MultiFocusEdge.js';
-	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { asyncMap, devCatch, isValidityTuple, refWrapper } from '../../../../../Helpers/Helpers.svelte.js';
-	import { Colour, ColourSet } from '../../../../../scss/colours.js';
-	import { Size } from '../../../../../Types/Internal/Size.js';
-	import { Validity } from '../../../../../Types/Internal/Validity.js';
-	import { getContext, untrack } from 'svelte';
-	import type { ActionsCellProps } from './ActionsCellProps.js';
-	import TableAction from './TableAction.svelte';
-
-	export let shownPopup = refWrapper<symbol | undefined>(undefined);
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object,FilterValueType"
->
-	const { cell }: ActionsCellProps<T, FilterValueType> = $props();
-
-	const value = $derived(cell.getValue());
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const actions: Array<TableActionButton<T>> = $derived(cell.column.columnDef.actions);
-
-	const thisPopup = $state(Symbol());
-	const thisPopupIsVisibile = $derived(thisPopup === shownPopup.value);
-	const hasValue: boolean = $derived(value !== undefined);
-	const edge: MultiFocusEdge | undefined = $state();
-	const focusDetails: TableFocusDetails<T, never> = $derived(
-		new TableFocusDetails(cell, tableContext)
-	);
-
-	let cellRef: HTMLDivElement | undefined = $state();
-
-	let x = $state(0);
-	let y = $state(0);
-	$effect.pre(() => {
-		if (thisPopupIsVisibile && cellRef) {
-			const rect = cellRef.getBoundingClientRect();
-			untrack(() => {
-				const totalOffsetX = -6;
-				// (props.offsetX ?? 0) +
-				// (props.arrow === Side.Top || props.arrow === Side.Bottom
-				// 	? props.rect.width / 2
-				// 	: props.arrow === Side.Right
-				// 		? -6 //  arrow width
-				// 		: props.rect.width + 6); // arrow width
-
-				const totalOffsetY = rect.height / 2;
-				// (props.offsetY ?? 0) +
-				// (props.arrow === Side.Left || props.arrow === Side.Right
-				// 	? props.rect.height / 2
-				// 	: props.arrow === Side.Top
-				// 		? props.rect.height
-				// 		: 0);
-
-				x = rect.x + totalOffsetX;
-				y = rect.y + totalOffsetY;
-			});
-		}
-	});
-
-	let validity: Validity = $state(Validity.Valid);
-	$effect(() => {
-		const validityPromise = focusDetails.validity;
-
-		validityPromise
-			.then((v) => {
-				if (!v) {
-					validity = Validity.Neutral;
-				} else if (isValidityTuple(v)) {
-					validity = v.value;
-				} else {
-					validity = v;
-				}
-			})
-			.catch(devCatch);
-	});
-</script>
-
-<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-<td
-	id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
-	tabIndex={hasValue ? 0 : undefined}
-	class="focusable"
-	class:multifocus={hasValue && focusDetails.isMultiFocused}
-	class:multifocus-start={hasValue && focusDetails.isMultiFocusStart}
-	class:left={edge === MultiFocusEdge.Left}
-	class:top-left={edge === MultiFocusEdge.TopLeft}
-	class:top={edge === MultiFocusEdge.Top}
-	class:top-right={edge === MultiFocusEdge.TopRight}
-	class:right={edge === MultiFocusEdge.Right}
-	class:bottom-right={edge === MultiFocusEdge.BottomRight}
-	class:bottom={edge === MultiFocusEdge.Bottom}
-	class:bottom-left={edge === MultiFocusEdge.BottomLeft}
-	class:info={validity == Validity.Info}
-	class:success={validity == Validity.Valid}
-	class:warning={validity == Validity.Warning}
-	class:error={validity == Validity.Invalid}
-	onmousedown={(e) => {
-		// start focus only on left click
-		if (e.button === 0) {
-			if (e.shiftKey) {
-				e.preventDefault();
-				tableContext.setFocusEnd(focusDetails.coordinates);
-			} else {
-				tableContext.startFocus(focusDetails.coordinates);
-			}
-		}
-	}}
-	onmouseover={() => {
-		if (tableContext.isMousingDown) {
-			tableContext.setFocusEnd(focusDetails.coordinates);
-		}
-	}}
-	onmouseup={() => {
-		tableContext.endFocus(focusDetails.coordinates);
-	}}
->
-	<div
-		class="slot-wrapper"
-		class:multifocus={focusDetails.isMultiFocused}
-		class:multifocus-start={focusDetails.isMultiFocusStart}
-		bind:this={cellRef}
-	>
-		<!-- TODO {isMultiFocusStart} -->
-		<Action
-			style={focusDetails.outline}
-			border={false}
-			size={Size.FillWidth}
-			icon={{ name: 'ellipsis', size: Size.Medium, colour: Colour['$brand-primary'] }}
-			colourSet={ColourSet.Auxiliary}
-			onclick={() => {
-				if (shownPopup.value === thisPopup) {
-					shownPopup.value = undefined;
-				} else {
-					shownPopup.value = thisPopup;
-				}
-			}}
-		/>
-	</div>
-	{#if thisPopupIsVisibile}
-		{@const awaitedActions = asyncMap<TableActionButton<T>, [TableActionButton<T>, string]>(
-			actions,
-			async (item) => {
-				return [item, await item.getLabel(cell.row.original, cell.row.visibleIndex)];
-			}
-		)}
-		{#await awaitedActions then actions}
-			<Portal>
-				<div
-					class="popup"
-					style="--y: {y}px; --x: {x}px;"
-				>
-					<div class="action-container">
-						{#each actions as [action, label] (label)}
-							<TableAction
-								{action}
-								{cell}
-							/>
-						{/each}
-					</div>
-				</div>
-			</Portal>
-		{/await}
-	{/if}
-</td>
-
-<style>td {
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import Action from '../../../../Action.svelte';
+	import Portal from '../../../../Portal.svelte';
+	import type { TableActionButton } from '../../../Types/Columns/TableActionButton.js';
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../../../Types/Context/TableInitOptions.js';
+	import { MultiFocusEdge } from '../../../Types/Focus/MultiFocusEdge.js';
+	import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import { asyncMap, devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
+	import { Colour, ColourSet } from '../../../../../scss/colours.js';
+	import { Size } from '../../../../../Types/Internal/Size.js';
+	import { Validity } from '../../../../../Types/Internal/Validity.js';
+	import { getContext, untrack } from 'svelte';
+	import type { ActionsCellProps } from './ActionsCellProps.js';
+	import TableAction from './TableAction.svelte';
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object, FilterValueType, RowIdType extends Primitive"
+>
+	const { cell }: ActionsCellProps<T, FilterValueType> = $props();
+
+	const value = $derived(cell.getValue());
+
+	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
+
+	const actions: Array<TableActionButton<T>> = $derived(cell.column.columnDef.actions);
+
+	const thisPopup = $state(Symbol());
+	const thisPopupIsVisibile = $derived(thisPopup === tableContext.shownActionsPopup);
+	const hasValue: boolean = $derived(value !== undefined);
+	const edge: MultiFocusEdge | undefined = $state();
+	const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
+		tableContext._focus.getFocusDetailsFor(cell)
+	);
+
+	let cellRef: HTMLDivElement | undefined = $state();
+
+	let x = $state(0);
+	let y = $state(0);
+	$effect.pre(() => {
+		if (thisPopupIsVisibile && cellRef) {
+			const rect = cellRef.getBoundingClientRect();
+			untrack(() => {
+				const totalOffsetX = -6;
+				const totalOffsetY = rect.height / 2;
+
+				x = rect.x + totalOffsetX;
+				y = rect.y + totalOffsetY;
+			});
+		}
+	});
+
+	let validity: Validity = $state(Validity.Valid);
+	$effect(() => {
+		const validityPromise = focusDetails.validity;
+
+		validityPromise
+			.then((v) => {
+				if (!v) {
+					validity = Validity.Neutral;
+				} else if (isValidityTuple(v)) {
+					validity = v.value;
+				} else {
+					validity = v;
+				}
+			})
+			.catch(devCatch);
+	});
+</script>
+
+<!-- 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}`}
+	tabIndex={hasValue ? 0 : undefined}
+	class="focusable"
+	class:multifocus={hasValue && focusDetails.isMultiFocused}
+	class:multifocus-start={hasValue && focusDetails.isMultiFocusStart}
+	class:left={edge === MultiFocusEdge.Left}
+	class:top-left={edge === MultiFocusEdge.TopLeft}
+	class:top={edge === MultiFocusEdge.Top}
+	class:top-right={edge === MultiFocusEdge.TopRight}
+	class:right={edge === MultiFocusEdge.Right}
+	class:bottom-right={edge === MultiFocusEdge.BottomRight}
+	class:bottom={edge === MultiFocusEdge.Bottom}
+	class:bottom-left={edge === MultiFocusEdge.BottomLeft}
+	class:info={validity == Validity.Info}
+	class:success={validity == Validity.Valid}
+	class:warning={validity == Validity.Warning}
+	class:error={validity == Validity.Invalid}
+	onmousedown={(e) => {
+		// start focus only on left click
+		if (e.button === 0) {
+			if (e.shiftKey) {
+				e.preventDefault();
+				tableContext.setFocusEnd(focusDetails.coordinates);
+			} else {
+				tableContext.startFocus(focusDetails.coordinates);
+			}
+		}
+	}}
+	onmouseover={() => {
+		if (tableContext.isMousingDown) {
+			tableContext.setFocusEnd(focusDetails.coordinates);
+		}
+	}}
+	onmouseup={() => {
+		tableContext.endFocus(focusDetails.coordinates);
+	}}
+>
+	<div
+		class="slot-wrapper"
+		class:multifocus={focusDetails.isMultiFocused}
+		class:multifocus-start={focusDetails.isMultiFocusStart}
+		bind:this={cellRef}
+	>
+		<!-- TODO {isMultiFocusStart} -->
+		<Action
+			style={focusDetails.outline}
+			border={false}
+			size={Size.FillWidth}
+			icon={{ name: 'ellipsis', size: Size.Medium, colour: Colour['$brand-primary'] }}
+			colourSet={ColourSet.Auxiliary}
+			onclick={() => {
+				if (tableContext.shownActionsPopup === thisPopup) {
+					tableContext.shownActionsPopup = undefined;
+				} else {
+					tableContext.shownActionsPopup = thisPopup;
+				}
+			}}
+		/>
+	</div>
+	{#if thisPopupIsVisibile}
+		{@const awaitedActions = asyncMap<TableActionButton<T>, [TableActionButton<T>, string]>(
+			actions,
+			async (item) => {
+				return [item, await item.getLabel(cell.row.original, cell.row.visibleIndex)];
+			}
+		)}
+		{#await awaitedActions then actions}
+			<Portal>
+				<div
+					class="popup"
+					style="--y: {y}px; --x: {x}px;"
+				>
+					<div class="action-container">
+						{#each actions as [action, label] (label)}
+							<TableAction
+								{action}
+								{cell}
+							/>
+						{/each}
+					</div>
+				</div>
+			</Portal>
+		{/await}
+	{/if}
+</div>
+
+<style>.focusable,
+.checkbox-cell,
+.input-cell,
+.select-cell,
+.datepicker-cell {
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
@@ -187,31 +178,52 @@
   position: relative;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
-  border: solid 1px #cbd4da;
-  border-left: none;
+  border-right: solid 1px #cbd4da;
+  border-bottom: solid 1px #cbd4da;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--height);
 }
 
-td.multifocus {
+.focusable.multifocus,
+.checkbox-cell.multifocus,
+.input-cell.multifocus,
+.select-cell.multifocus {
   background-color: var(--multifocus-colour, #e6f8fd);
 }
-td.multifocus.multifocus-start {
+.focusable.multifocus.multifocus-start,
+.checkbox-cell.multifocus.multifocus-start,
+.input-cell.multifocus.multifocus-start,
+.select-cell.multifocus.multifocus-start {
   background-color: #ffffff;
 }
 
-td.info {
+.focusable.info,
+.checkbox-cell.info,
+.input-cell.info,
+.select-cell.info {
   background-color: #1f81a0;
 }
-td.warning {
+.focusable.warning,
+.checkbox-cell.warning,
+.input-cell.warning,
+.select-cell.warning {
   background-color: #f8eab8;
 }
-td.error {
+.focusable.error,
+.checkbox-cell.error,
+.input-cell.error,
+.select-cell.error {
   background-color: #f9e9e9;
 }
 
-td {
+.focusable,
+.checkbox-cell,
+.input-cell,
+.select-cell {
   max-height: var(--max-height);
   height: var(--height);
-  box-sizing: content-box;
+  box-sizing: border-box;
   overflow-x: clip;
   --td-padding-left: 0;
   --td-padding-right: 0;
@@ -251,7 +263,7 @@ td {
   align-items: center;
 }
 
-td {
+[role=cell] {
   overflow: visible;
 }
 
@@ -302,4 +314,4 @@ div.slot-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
-}</style>
+}</style>