@lavalogic/scoria 0.24.0 → 0.25.0

package/dist/Components/Base/ContextWrapper.svelte

@@ -34,6 +34,7 @@
 	setContext(AlertContext.identifier, alertContext);
 
 	// NOTE known limitation. Not expected to mutate after instantiation
+	// svelte-ignore state_referenced_locally
 	const untypedListenerContext = new UntypedInputContext(debug);
 	setContext(UntypedInputContext.identifier, untypedListenerContext);
 </script>

package/dist/Components/Base/Pagination.svelte

@@ -1,6 +1,17 @@
 <svelte:options runes />
 
-<script lang="ts" generics="T extends object">
+<!-- @component
+	Allows for automated pagination of local content in cases where a collection may become a performance concern
+
+	### Usage
+	```svelte
+		<Pagination snippet={itemSnippet} pageSize={20} items={dataWrapper.value} key="id" />
+	```
+ -->
+<script
+	lang="ts"
+	generics="T extends object"
+>
 	import { autoPluralise, generateShortUUID } from '../../Helpers/Helpers.svelte.js';
 	import { Colour } from '../../scss/colours.js';
 	import { Side } from '../../Types/Internal/Side.js';
@@ -20,7 +31,7 @@
 		border = false,
 		padding = '1.5rem', //sizing.$regular-padding
 		gap = '1.5rem', // sizing.$regular-gap
-		height
+		height,
 	}: PaginationProps<T> = $props();
 
 	const _uuid = generateShortUUID();
@@ -101,18 +112,28 @@
 
 		<div class="scrollable">
 			<div class="block">
-				<Icon name="paper" colour={Colour['$ui-blue-6']} />
+				<Icon
+					name="paper"
+					colour={Colour['$ui-blue-6']}
+				/>
 				<span>{lastPage} {autoPluralise('Page', lastPage)}</span>
 			</div>
 
 			<div class="block">
 				<label for="{_uuid}-jump-to-page"
-					><Icon name="arrow-move-horizontal" colour={Colour['$ui-blue-6']} /></label
+					><Icon
+						name="arrow-move-horizontal"
+						colour={Colour['$ui-blue-6']}
+					/></label
 				>
 
 				<label for="{_uuid}-jump-to-page">Jump to page:</label>
 
-				<NumberInput id="{_uuid}-jump-to-page" value={pageValue} oninput={onNumberInput} />
+				<NumberInput
+					id="{_uuid}-jump-to-page"
+					value={pageValue}
+					oninput={onNumberInput}
+				/>
 			</div>
 
 			<div class="block nopad page-arrow">
@@ -126,7 +147,7 @@
 					size={Size.FillHeight}
 					iconLeft={{
 						name: 'left-close',
-						size: Size.FillHeight
+						size: Size.FillHeight,
 					}}>Previous Page</Button
 				>
 			</div>
@@ -158,7 +179,7 @@
 					disabled={pageIndex == lastPageIndex}
 					iconRight={{
 						name: 'right-close',
-						size: Size.FillHeight
+						size: Size.FillHeight,
 					}}>Next Page</Button
 				>
 			</div>

package/dist/Components/Base/Pagination.svelte.d.ts

@@ -20,6 +20,14 @@ interface $$IsomorphicComponent {
     <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
+/**
+ * Allows for automated pagination of local content in cases where a collection may become a performance concern
+ *
+ * ### Usage
+ * ```svelte
+ * 	<Pagination snippet={itemSnippet} pageSize={20} items={dataWrapper.value} key="id" />
+ * ```
+ */
 declare const Pagination: $$IsomorphicComponent;
 type Pagination<T extends object> = InstanceType<typeof Pagination<T>>;
 export default Pagination;

package/dist/Components/Base/PaginationProps.d.ts

@@ -1,9 +1,11 @@
 import type { Snippet } from 'svelte';
 export interface PaginationProps<T extends object> {
-    items: Array<T>;
+    /** Used to index each item for a unique key. Duplicate values will result in error */
     key: string & keyof T;
-    pageSize?: number;
+    items: Array<T>;
+    /** Second argument is the index */
     snippet: Snippet<[T, number]>;
+    pageSize?: number;
     itemName?: string;
     border?: boolean;
     padding?: string;

package/dist/Components/Base/Snippets.svelte

@@ -1,5 +1,8 @@
 <svelte:options runes />
 
+<!-- @component
+An empty component that only exists to export common snippets
+ -->
 <script
 	lang="ts"
 	module

package/dist/Components/Base/Snippets.svelte.d.ts

@@ -1,5 +1,6 @@
 export declare const pending: () => ReturnType<import("svelte").Snippet>;
 export declare const failed: (e: unknown, retry?: () => void) => ReturnType<import("svelte").Snippet>;
+/** An empty component that only exists to export common snippets */
 declare const Snippets: import("svelte").Component<Record<string, never>, {}, "">;
 type Snippets = ReturnType<typeof Snippets>;
 export default Snippets;

package/dist/Components/Contexts/ContextMenu.svelte

@@ -1,11 +1,17 @@
 <svelte:options runes />
 
+<!-- 
+@component
+
+
+ -->
 <script lang="ts">
 	import { ContextMenuContext } from '../../Contexts/ContextMenuContext.svelte.js';
 	import { devCatch } from '../../Helpers/Helpers.svelte.js';
-	import { getContext, tick } from 'svelte';
+	import { getContext, tick, untrack } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import ContextMenuOption from './ContextMenuOption.svelte';
+	import type { MaybeFocusable } from './MaybeFocusable.js';
 
 	const contextMenuContext = getContext<ContextMenuContext>(ContextMenuContext.identifier);
 
@@ -36,8 +42,8 @@
 			.catch(devCatch);
 	}
 
-	let menuEl: HTMLDivElement | undefined = $state();
-	function onPageClick(e: MouseEvent) {
+	let menuEl = $state<HTMLUListElement | undefined>();
+	function closeOnClickOutside(e: MouseEvent) {
 		if (!menuEl) {
 			return;
 		}
@@ -46,14 +52,81 @@
 		}
 		contextMenuContext.closeMenu();
 	}
+
+	let previousElement = $state<MaybeFocusable | null | undefined>();
+
+	$effect.pre(() => {
+		if (contextMenuContext.showMenu) {
+			untrack(() => {
+				previousElement = document.activeElement as MaybeFocusable;
+			});
+		}
+	});
+
+	function refocusPrevious() {
+		previousElement?.focus?.();
+	}
+
+	function focusNext() {
+		if (!menuEl) {
+			return;
+		}
+		const items = [...menuEl.querySelectorAll<HTMLElement>('[role="menuitem"]')];
+		const index = items.indexOf(document.activeElement as HTMLElement);
+		const found = items.at((index + 1) % items.length);
+		if (!found) {
+			console.warn(`could not find next item`);
+		}
+		found?.focus();
+	}
+
+	function focusPrev() {
+		if (!menuEl) {
+			return;
+		}
+		const items = [...menuEl.querySelectorAll<HTMLElement>('[role="menuitem"]')];
+		const index = items.indexOf(document.activeElement as HTMLElement);
+
+		const found = items.at((index - 1 + items.length) % items.length);
+		if (!found) {
+			console.warn('could not find prev item');
+		}
+		found?.focus();
+	}
 </script>
 
-<svelte:body onclick={onPageClick} />
+<svelte:body onclick={closeOnClickOutside} />
 
 {#if contextMenuContext.showMenu}
-	<div transition:fade={{ duration: 50 }} bind:this={menuEl} style="top: {_y}px; left: {_x}px;">
-		{#each contextMenuContext.items as item (item)}
+	<ul
+		transition:fade={{ duration: 50 }}
+		bind:this={menuEl}
+		style="top: {_y}px; left: {_x}px;"
+		role="menu"
+		aria-label="Context menu"
+		onkeydown={(e) => {
+			if (e.key === 'Escape') {
+				e.stopImmediatePropagation();
+				e.stopPropagation();
+				e.preventDefault();
+				contextMenuContext.closeMenu();
+				refocusPrevious();
+			} else if (e.key == 'ArrowUp') {
+				e.stopImmediatePropagation();
+				e.stopPropagation();
+				e.preventDefault();
+				focusPrev();
+			} else if (e.key == 'ArrowDown') {
+				e.stopImmediatePropagation();
+				e.stopPropagation();
+				e.preventDefault();
+				focusNext();
+			}
+		}}
+	>
+		{#each contextMenuContext.items as item, index (item)}
 			<ContextMenuOption
+				{index}
 				disabled={item.disabled}
 				onclick={() => {
 					item.callback();
@@ -62,17 +135,23 @@
 				text={item.text}
 			/>
 		{/each}
-	</div>
+	</ul>
 {/if}
 
 <style>
-	div {
+	ul {
+		padding: 4px;
 		position: fixed;
 		display: grid;
 		border: 1px solid #0003;
 		box-shadow: 2px 2px 5px 0px #0002;
+		gap: 4px;
 		background: white;
 		z-index: 9999;
 		line-height: initial;
 	}
+
+	ul:focus {
+		outline: none;
+	}
 </style>

package/dist/Components/Contexts/ContextMenuOption.svelte

@@ -1,21 +1,40 @@
 <svelte:options runes />
 
 <script lang="ts">
+	import { devCatch } from '../../Helpers/Helpers.svelte.js';
+	import { tick } from 'svelte';
 	import type { ContextMenuOptionProps } from './ContextMenuOptionProps.js';
 
 	let {
 		text = $bindable(''),
+		index,
 		disabled = false,
 		onclick,
-		children
+		children,
 	}: ContextMenuOptionProps = $props();
+
+	let element = $state<HTMLButtonElement | undefined>();
+
+	$effect(() => {
+		void element;
+		if (index == 0) {
+			tick()
+				.then(() => {
+					if (element) {
+						element.focus();
+					}
+				})
+				.catch(devCatch);
+		}
+	});
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
+<button
 	class="context-menu-item"
+	role="menuitem"
 	class:disabled
+	tabindex={index}
+	bind:this={element}
 	onclick={(e) => {
 		e.stopImmediatePropagation();
 		e.stopPropagation();
@@ -28,9 +47,11 @@
 	{:else if children}
 		{@render children()}
 	{/if}
-</div>
+</button>
 
-<style>div {
+<style>button {
+  background-color: #ffffff;
+  border: none;
   padding: 4px 15px;
   cursor: default;
   font-size: 14px;
@@ -40,14 +61,19 @@
   user-select: none;
 }
 
-div:hover {
+button:focus,
+button:focus-within {
+  outline: solid 1px #259fc7;
+}
+
+button:hover {
   background: rgba(0, 0, 0, 0.1333333333);
 }
 
-div.disabled {
+button.disabled {
   color: rgba(0, 0, 0, 0.4);
 }
 
-div.disabled:hover {
+button.disabled:hover {
   background: #ffffff;
 }</style>

package/dist/Components/Contexts/ContextMenuOptionProps.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 export interface ContextMenuOptionProps {
+    index: number;
     text?: string;
     disabled?: boolean | undefined;
     onclick?: (e: MouseEvent) => void;

package/dist/Components/Contexts/MaybeFocusable.d.ts

@@ -0,0 +1,3 @@
+export interface MaybeFocusable {
+    focus?: () => void;
+}

package/dist/Components/Contexts/MaybeFocusable.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Contexts/Toast.svelte

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script
+	lang="ts"
+	module
+>
 	import { ColourSet } from '../../scss/colours.js';
 	import { Size } from '../../Types/Internal/Size.js';
 	import { Validity } from '../../Types/Internal/Validity.js';
@@ -14,7 +17,9 @@
 	let { toast, copy }: ToastProps = $props();
 </script>
 
-<article
+<output
+	role={toast.result == Validity.Invalid ? 'alert' : 'status'}
+	aria-live={toast.result == Validity.Invalid ? 'assertive' : 'polite'}
 	class:info={toast.result == Validity.Info}
 	class:success={toast.result == Validity.Valid}
 	class:warning={toast.result == Validity.Warning}
@@ -31,7 +36,10 @@
 					colourSet={ColourSet.Auxiliary}
 				/>
 			{:else}
-				<Icon name="info" size={Size.MediumLarge} />
+				<Icon
+					name="info"
+					size={Size.MediumLarge}
+				/>
 			{/if}
 		</div>
 		<span>{toast.message}</span>
@@ -48,36 +56,36 @@
 			</div>
 		{/if}
 	</div>
-</article>
+</output>
 
-<style>article {
+<style>output {
   font-weight: 700;
   font-size: 1.125rem;
   padding: 0.75rem;
   border-radius: 4px;
 }
-article.info, article.success {
+output.info, output.success {
   color: #ffffff;
   --colour: #ffffff;
   background-color: #259fc7;
 }
-article.warning {
+output.warning {
   color: #ffffff;
   --colour: #ffffff;
   background-color: #e7b500;
 }
-article.error {
+output.error {
   color: #ffffff;
   --colour: #ffffff;
   background-color: #aa1414;
 }
-article > div {
+output > div {
   display: flex;
   flex-flow: row nowrap;
   gap: 0.75rem;
   align-items: center;
 }
-article span {
+output span {
   text-wrap: nowrap;
   word-break: keep-all;
   overflow: hidden;

package/dist/Components/HorizontalTabGroup.svelte

@@ -4,8 +4,6 @@
 	lang="ts"
 	generics="CommonDenominator"
 >
-	import { dev } from '$app/environment';
-
 	import HorizontalTabGroupButton from './HorizontalTabGroupButton.svelte';
 	import type { HorizontalTabGroupProps } from './HorizontalTabGroupProps.js';
 	let {
@@ -16,27 +14,6 @@
 		noRadius = false,
 		grow = false,
 	}: HorizontalTabGroupProps<CommonDenominator> = $props();
-
-	$effect(() => {
-		if (!dev) {
-			return;
-		}
-		for (const tab of tabs) {
-			if (tab.debug) {
-				$inspect(
-					tab.label,
-					tab.content,
-					tab.onclick,
-					tab.args,
-					tab.iconLeft,
-					tab.iconRight,
-					tab.isValid,
-					tab.disabled,
-					tab.visible
-				);
-			}
-		}
-	});
 </script>
 
 <div

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

@@ -2,7 +2,7 @@
 
 <script
 	lang="ts"
-	generics="T extends object"
+	generics="T extends object, RowIdType extends Primitive"
 >
 	import { dev } from '$app/environment';
 	import { devCatch, generateShortUUID } from '../../../../Helpers/Helpers.svelte.js';
@@ -12,10 +12,12 @@
 	import type { DefsWrapper } from '../../Types/Columns/DefsWrapper.js';
 	import type { TableCell } from '../../Types/Columns/TableCell.js';
 	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
+	import { type Primitive } from '../../Types/Context/TableInitOptions.js';
 	import ColumnHighlight from './ColumnHighlight.svelte';
 	import TableColumn from './Columns/TableColumn.svelte';
 	import type { TableRowProps } from './TableRowProps.js';
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+
+	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
 
 	const { row, side, odd = false, customHeight, includeHighlight }: TableRowProps<T> = $props();
 
@@ -50,10 +52,28 @@
 	let prevExpandedColumnDef: ExpandDef<T, object> | undefined = $state();
 
 	const rowIndex = $derived(cells.at(0) && cells[0].row.visibleIndex);
-	const highlighted = $derived(
-		rowIndex != undefined &&
-			tableContext.highlightedItems.has(tableContext.selectionExtractor(row.original))
-	);
+	let id = $state<RowIdType | undefined>();
+	const highlighted = $derived(id != undefined && tableContext.highlightedItems.has(id));
+
+	$effect(() => {
+		void row.original;
+		void tableContext.selectionExtractor;
+
+		if (rowIndex != undefined) {
+			const maybePromise = tableContext.selectionExtractor(row.original);
+			if (maybePromise instanceof Promise) {
+				maybePromise
+					.then((it) => {
+						id = it;
+					})
+					.catch(devCatch);
+			} else {
+				id = maybePromise;
+			}
+		} else {
+			id = undefined;
+		}
+	});
 
 	const showHighlightButton = $derived(rowIndex != null && includeHighlight);
 
@@ -94,66 +114,70 @@
 		}
 	}
 
-	//FIXME the below threw errors before. Please investigate
-	// let trRef: HTMLTableRowElement | undefined = $state();
-	// let _trHeight = $state(0);
-	// export const trHeight = {
-	// 	get value() {
-	// 		return _trHeight;
-	// 	},
-	// };
-
-	// $effect(() => {
-	// 	void trRef;
-	// 	return untrack(() => {
-	// 		if (trRef) {
-	// 			const observer = new ResizeObserver((entries) => {
-	// 				if (customHeight) {
-	// 					_trHeight = 0;
-	// 				} else {
-	// 					_trHeight = entries[0].borderBoxSize[0].blockSize;
-	// 				}
-	// 			});
-	// 			observer.observe(trRef);
-
-	// 			const currentTrRef = trRef;
-	// 			return () => {
-	// 				observer.unobserve(currentTrRef);
-	// 			};
-	// 		}
-	// 		return () => {};
-	// 	});
-	// });
-
-	// let innerTrRef: HTMLTableRowElement | undefined = $state();
-	// let _innerTrHeight = $state(0);
-	// export const innerTrHeight = {
-	// 	get value() {
-	// 		return _innerTrHeight;
-	// 	}
-	// };
-	// $effect(() => {
-	// 	if (innerTrRef) {
-	// 		const observer = new ResizeObserver((entries) => {
-	// 			_innerTrHeight = entries[0].borderBoxSize[0].blockSize;
-	// 		});
-	// 		observer.observe(innerTrRef);
-
-	// 		const currentinnerTrRef = innerTrRef;
-	// 		return () => observer.unobserve(currentTrRef);
-	// 	}
-	// });
+	let trRef: HTMLTableRowElement | undefined = $state();
+	let _trHeight = $state(0);
+
+	let innerTrRef: HTMLTableRowElement | undefined = $state();
+	let _innerTrHeight = $state(0);
+
+	$effect(() => {
+		void trRef;
+		void customHeight;
+
+		return untrack(() => {
+			if (trRef && customHeight == null) {
+				const observer = new ResizeObserver((entries) => {
+					_trHeight = entries[0].borderBoxSize[0].blockSize;
+				});
+				observer.observe(trRef);
+
+				const currenttrRef = trRef;
+				return () => {
+					observer.unobserve(currenttrRef);
+					_trHeight = 0;
+				};
+			} else {
+				_trHeight = 0;
+			}
+			return () => {};
+		});
+	});
+
+	$effect(() => {
+		void innerTrRef;
+		return untrack(() => {
+			if (innerTrRef) {
+				const observer = new ResizeObserver((entries) => {
+					_innerTrHeight = entries[0].borderBoxSize[0].blockSize;
+				});
+				observer.observe(innerTrRef);
+
+				const currentinnerTrRef = innerTrRef;
+				return () => {
+					observer.unobserve(currentinnerTrRef);
+				};
+			} else {
+				_innerTrHeight = 0;
+			}
+			return () => {};
+		});
+	});
+
+	const _totalTrHeight = $derived(_trHeight + _innerTrHeight);
+	export const totalTrHeight = {
+		get value() {
+			return _totalTrHeight;
+		},
+	};
 </script>
 
-<!-- onMouseEnter={onMouseEnter}
-onMouseLeave={onMouseLeave} -->
 <tr
 	class:hoverable
 	class:alt={tableContext.alternateRowColours && odd}
 	class:highlighted
 	style={customHeight ? `height: ${customHeight}px !important;` : null}
+	bind:this={trRef}
 >
-	<!-- bind:this={trRef} -->
 	{#if showHighlightButton}
 		<ColumnHighlight
 			rowIndex={rowIndex ??
@@ -181,8 +205,10 @@ onMouseLeave={onMouseLeave} -->
 {#if expandedColumnDef}
 	<!-- TODO re-test and re-implement these -->
 	<!-- transition:slide={{ duration: 150, axis: 'y', delay: 0 }} -->
-	<!--  bind:this={innerTrRef} -->
-	<tr class="inner-table">
+	<tr
+		class="inner-table"
+		bind:this={innerTrRef}
+	>
 		{#await innerDataPromise}
 			<td {colspan}>loading&hellip;</td>
 		{:then data}

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

@@ -1,25 +1,34 @@
+import { type Primitive } from '../../Types/Context/TableInitOptions.js';
 import type { TableRowProps } from './TableRowProps.js';
-declare function $$render<T extends object>(): {
+declare function $$render<T extends object, RowIdType extends Primitive>(): {
     props: TableRowProps<T>;
-    exports: {};
+    exports: {
+        totalTrHeight: {
+            readonly value: number;
+        };
+    };
     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, RowIdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, RowIdType>>['props'];
+    events(): ReturnType<typeof $$render<T, RowIdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, RowIdType>>['slots'];
     bindings(): "";
-    exports(): {};
+    exports(): {
+        totalTrHeight: {
+            readonly value: number;
+        };
+    };
 }
 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, RowIdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, RowIdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, RowIdType>['props']>, ReturnType<__sveltets_Render<T, RowIdType>['events']>, ReturnType<__sveltets_Render<T, RowIdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, RowIdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, RowIdType>['exports']>;
+    <T extends object, RowIdType extends Primitive>(internal: unknown, props: ReturnType<__sveltets_Render<T, RowIdType>['props']> & {}): ReturnType<__sveltets_Render<T, RowIdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const TableRow: $$IsomorphicComponent;
-type TableRow<T extends object> = InstanceType<typeof TableRow<T>>;
+type TableRow<T extends object, RowIdType extends Primitive> = InstanceType<typeof TableRow<T, RowIdType>>;
 export default TableRow;

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

@@ -4,38 +4,34 @@
 	lang="ts"
 	generics="T extends object"
 >
+	import type { RefWrapper } from '../../../Types/Internal/RefWrapper.js';
 	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 	import QuickSearchCell from './QuickSearchCell.svelte';
 	import TableRow from './Rows/TableRow.svelte';
 	import type { TableBodyProps } from './TableBodyProps.js';
 
-	let {
-		side,
-		// heights,
-		columns,
-		includeHighlight,
-	}: TableBodyProps<T> = $props();
+	let { side, heights, columns, includeHighlight }: TableBodyProps<T> = $props();
 
 	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
-	// type HasHeight = {
-	// 	trHeight: RefWrapper<number>;
-	// };
-	// const rows: Array<TableRow<T>> = $state([]);
-	// const _rowHeights = $derived(
-	// 	// HACK terrible type casting due to svelte type gen not being liked by eslint
-	// 	rows.map((it) => (it as HasHeight | undefined)?.trHeight.value ?? 0)
-	// );
-	// export const rowHeights = {
-	// 	get value() {
-	// 		return _rowHeights;
-	// 	}
-	// };
+	type HasHeight = {
+		totalTrHeight?: RefWrapper<number>;
+	};
+	const rows: Array<TableRow<T, never>> = $state([]);
 
-	// $inspect(tableContext.paginationRowModel).with((...v) => {
-	// 	console.trace(...v);
-	// });
+	const _rowHeights = $derived(
+		// HACK terrible type casting due to svelte type gen not being liked by eslint
+		rows.map((it) => {
+			return (it as HasHeight | undefined)?.totalTrHeight?.value ?? 0;
+		})
+	);
+
+	export const rowHeights = {
+		get value() {
+			return _rowHeights;
+		},
+	};
 </script>
 
 <tbody>
@@ -54,18 +50,17 @@
 	{/if}
 
 	{#each tableContext.paginationRowModel.rows as row, index (row.visibleIndex)}
-		<!-- {@const customHeight = heights[index]?.applyTo.includes(side)
-					? heights[index].maxHeight
-					: undefined} -->
-		<!-- {customHeight} -->
+		{@const customHeight = heights[index]?.applyTo.includes(side)
+			? heights[index].maxHeight
+			: undefined}
 		<TableRow
-			customHeight={undefined}
+			{customHeight}
 			{includeHighlight}
 			{row}
 			{side}
 			odd={index % 2 == 1}
+			bind:this={rows[index]}
 		/>
-		<!-- bind:this={rows[index]} -->
 	{/each}
 </tbody>
 

package/dist/Components/Table/Body/TableBody.svelte.d.ts

@@ -1,7 +1,11 @@
 import type { TableBodyProps } from './TableBodyProps.js';
 declare function $$render<T extends object>(): {
     props: TableBodyProps<T>;
-    exports: {};
+    exports: {
+        rowHeights: {
+            readonly value: number[];
+        };
+    };
     bindings: "";
     slots: {};
     events: {};
@@ -11,7 +15,11 @@ declare class __sveltets_Render<T extends object> {
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
-    exports(): {};
+    exports(): {
+        rowHeights: {
+            readonly value: number[];
+        };
+    };
 }
 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']>> & {

package/dist/Components/Table/Body/TableBodyProps.d.ts

@@ -1,6 +1,8 @@
 import type { Column } from '../Types/Columns/Column.js';
+import type { HeightData } from './HeightData.js';
 export interface TableBodyProps<T extends object> {
     side: 'left' | 'centre' | 'right';
+    heights: Array<HeightData<T>>;
     columns: Array<Column<T>>;
     includeHighlight: boolean;
 }

package/dist/Components/Table/ColumnDefinitions/ExampleItemColumnDefRepository.svelte.js

@@ -60,7 +60,7 @@ export function generateExampleItemColumnDefs(modal) {
         new ValidityDef({
             header: 'Valid',
             id: 'valid',
-            debug: true,
+            // debug: true,
             isValid,
             modal,
         }),

package/dist/Components/Table/Table.svelte

@@ -12,6 +12,7 @@
 	import type { RefWrapper } from '../../Types/Internal/RefWrapper.js';
 	import { getContext, onMount, setContext, tick, untrack } from 'svelte';
 	import LoadingOverlay from '../LoadingOverlay.svelte';
+	import type { HeightData } from './Body/HeightData.js';
 	import { shownPopup } from './Body/Rows/Columns/ActionsCell.svelte';
 	import TableBody from './Body/TableBody.svelte';
 	import TableHead from './Headers/TableHead.svelte';
@@ -48,6 +49,7 @@
 	const { nested = false, tableContext }: TableProps<T, IdType> = $props();
 
 	// NOTE: known limitation. This is passed as a wrapper, and they should never require reassignment. It is deeply reactive
+	// svelte-ignore state_referenced_locally
 	setContext(TableContext.identifier, tableContext);
 
 	const { openContextMenu: _openContextMenu } = getContext<ContextMenuContext>(
@@ -181,16 +183,7 @@
 	const minNestedHeight = $derived(20 * remPxRatio);
 
 	// HACK please figure this one out
-	// let nestedHeight = $state(minNestedHeight);
-
-	//intentionally not using derived here as we sometimes need to manually change it
-	// while also allowing it to auto-pickup min height mutations
-	// eslint-disable-next-line svelte/prefer-writable-derived
-	let nestedHeight = $state(0);
-
-	$effect(() => {
-		nestedHeight = minNestedHeight;
-	});
+	let nestedHeight = $derived(minNestedHeight);
 
 	let tableRef: HTMLDivElement | undefined = undefined;
 	let mousedDownEmptySpace = $state(false);
@@ -275,46 +268,51 @@
 		}
 	});
 
-	// type SvelteTableElement = {
-	// 	rowHeights: RefWrapper<Array<number>>;
-	// };
-
-	// let leftTable: SvelteTableElement | undefined = $state();
-	// let centreTable: SvelteTableElement | undefined = $state();
-	// let rightTable: SvelteTableElement | undefined = $state();
-
-	// const totalRowSizes: Array<HeightData<T>> = $derived.by(() => {
-	// 	if (!leftTable || !centreTable || !rightTable) {
-	// 		return [];
-	// 	}
-	// 	const centre = centreTable.rowHeights.value;
-	// 	const right = rightTable.rowHeights.value;
-
-	// 	return leftTable.rowHeights.value.map((_leftHeight, index) => {
-	// 		const leftHeight = _leftHeight || 0;
-	// 		const centreHeight = centre[index] || 0;
-	// 		const rightHeight = right[index] || 0;
-
-	// 		const maxHeight = Math.max(leftHeight, centreHeight, rightHeight);
-	// 		const applyTo: HeightData<T>['applyTo'] = [];
-
-	// 		if (leftHeight < maxHeight) {
-	// 			applyTo.push('left');
-	// 		}
-	// 		if (centreHeight < maxHeight) {
-	// 			applyTo.push('centre');
-	// 		}
-	// 		if (rightHeight < maxHeight) {
-	// 			applyTo.push('right');
-	// 		}
-
-	// 		return {
-	// 			index,
-	// 			applyTo,
-	// 			maxHeight
-	// 		};
-	// 	});
-	// });
+	type SvelteTableElement = {
+		rowHeights: RefWrapper<Array<number>>;
+	};
+
+	let leftTable: SvelteTableElement | undefined = $state();
+	let centreTable: SvelteTableElement | undefined = $state();
+	let rightTable: SvelteTableElement | undefined = $state();
+
+	const totalRowSizes: Array<HeightData<T>> = $derived.by(() => {
+		if (!leftTable || !centreTable || !rightTable) {
+			return [];
+		}
+
+		// console.debug(`got refs for all tables`);
+		const centre = centreTable.rowHeights.value;
+		const right = rightTable.rowHeights.value;
+
+		return leftTable.rowHeights.value.map((_leftHeight, index) => {
+			const leftHeight = _leftHeight || 0;
+			const centreHeight = centre[index] || 0;
+			const rightHeight = right[index] || 0;
+
+			const maxHeight = Math.max(leftHeight, centreHeight, rightHeight);
+			const applyTo: HeightData<T>['applyTo'] = [];
+
+			if (leftHeight < maxHeight) {
+				// console.debug(`left (${leftHeight}) was lower than max (${maxHeight})`);
+				applyTo.push('left');
+			}
+			if (centreHeight < maxHeight) {
+				// console.debug(`centre (${centreHeight}) was lower than max (${maxHeight})`);
+				applyTo.push('centre');
+			}
+			if (rightHeight < maxHeight) {
+				// console.debug(`right (${rightHeight}) was lower than max (${maxHeight})`);
+				applyTo.push('right');
+			}
+
+			return {
+				index,
+				applyTo,
+				maxHeight,
+			};
+		});
+	});
 </script>
 
 <svelte:window
@@ -427,9 +425,9 @@
 						includeHighlight={appropriateSide == 'left'}
 						columns={leftColumns}
 						side="left"
+						heights={totalRowSizes}
+						bind:this={leftTable}
 					/>
-					<!-- heights={totalRowSizes} -->
-					<!-- bind:this={leftTable} -->
 				</table>
 				<!-- {/if} -->
 
@@ -447,9 +445,9 @@
 						includeHighlight={appropriateSide == 'centre'}
 						columns={centreColumns}
 						side="centre"
+						heights={totalRowSizes}
+						bind:this={centreTable}
 					/>
-					<!-- heights={totalRowSizes}
-							bind:this={centreTable} -->
 				</table>
 				<!-- {/if} -->
 
@@ -466,9 +464,9 @@
 						includeHighlight={appropriateSide == 'right'}
 						columns={rightColumns}
 						side="right"
+						heights={totalRowSizes}
+						bind:this={rightTable}
 					/>
-					<!-- heights={totalRowSizes}
-							bind:this={rightTable} -->
 				</table>
 				<!-- {/if} -->
 			</div>

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

@@ -77,7 +77,7 @@ export declare class TableContext<T extends object, RowIdType extends Primitive>
     private _focusedRowIndices;
     get focusedRowIndices(): ReadonlySet<number>;
     private readonly _highlightedItems;
-    get highlightedItems(): SvelteMap<Awaited<unknown>, T>;
+    get highlightedItems(): SvelteMap<RowIdType, T>;
     _focusedColumnIds: ReadonlySet<string>;
     get focusedColumnIds(): ReadonlySet<string>;
     private _isMousingDown;

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

@@ -314,7 +314,6 @@ export class TableContext {
         if (browser) {
             this._getUserDefaults();
             const removeInvalidPresets = () => {
-                console.warn('invalid presets. removing:', localStorage.getItem(`${this.userId}-${tableName}-presets`));
                 localStorage.removeItem(`${this.userId}-${tableName}-presets`);
                 localStorage.removeItem(`${this.userId}-${tableName}-selected-preset-name`);
                 const visibilityState = {};
@@ -1241,6 +1240,7 @@ export class TableContext {
     };
     onHighlightAll = () => {
         if (this.allHighlighted) {
+            // console.debug('All were highlighted. Clearing');
             this.highlightedItems.clear();
             return Promise.resolve();
         }
@@ -2155,6 +2155,9 @@ export class TableContext {
             }
             indices.set(item, rowIndex);
         }
+        selectedRows.sort((left, right) => {
+            return (indices.get(left) ?? -1) - (indices.get(right) ?? -1);
+        });
         // TODO somewhere between here and the ending of the copy functionality, we end up with issues where instead of it using the accessor fn, it tries to pick up the select option, and ends up using the value ("1", etc)
         const selectedCells = [];
         const rowLength = selectedRows.length;

package/dist/Components/Touch/NumberKeyboard.svelte

@@ -3,7 +3,7 @@
 <script lang="ts">
 	import { devCatch, passthrough } from '../../Helpers/Helpers.svelte.js';
 	import { InputVariant } from '../../Types/Internal/InputVariant.js';
-	import { tick } from 'svelte';
+	import { tick, untrack } from 'svelte';
 	import Icon from '../Icon.svelte';
 	import TextInput from '../TextInput.svelte';
 	import type { NumberKeyboardProps } from './NumberKeyboardProps.js';
@@ -17,10 +17,29 @@
 		max,
 		decimal = false,
 		inputRef = $bindable(),
-		coerceValue = true
+		coerceValue = false,
 	}: NumberKeyboardProps = $props();
 
-	let _value: string = $derived(value?.toFixed(decimal ? 2 : 0) ?? '');
+	let _value: string = $derived(
+		value != null && value % 1 == 0 ? value.toString() : getDecimalValue()
+	);
+
+	function getDecimalPlaces(value: number): number {
+		const str = value.toString();
+		if (!str.includes('.')) {
+			return decimal ? 2 : 0;
+		}
+		return str.split('.')[1].length;
+	}
+
+	const decimalPlaces = $derived(
+		min != null ? getDecimalPlaces(min) : max != null ? getDecimalPlaces(max) : decimal ? 2 : 0
+	);
+
+	function getDecimalValue(): string {
+		//HACK this absolutely moronic line is intentional. It's the best way to allow arbitrary decimal places without adding leading zeroes
+		return value ? parseFloat(value.toFixed(decimalPlaces)).toString() : '';
+	}
 
 	const newValue = $derived.by(() => {
 		const v = decimal ? parseFloat(_value) : parseInt(_value);
@@ -32,22 +51,32 @@
 
 	$effect(() => {
 		{
-			value = coerceValue
-				? min != undefined && newValue != null && min > newValue
-					? min
-					: max != undefined && newValue != null && max < newValue
-						? max
-						: newValue
-				: newValue;
+			if (coerceValue) {
+				const v =
+					min != undefined && newValue != null && min > newValue
+						? min
+						: max != undefined && newValue != null && max < newValue
+							? max
+							: newValue;
 
-			tick()
-				.then(() => {
-					inputRef?.focus();
-				})
-				.catch(devCatch);
+				value = v;
+			} else {
+				value = newValue;
+			}
+
+			untrack(() => {
+				refocus();
+			});
 		}
 	});
 
+	function refocus() {
+		tick()
+			.then(() => {
+				inputRef?.focus();
+			})
+			.catch(devCatch);
+	}
 	function getPrevValue() {
 		if (inputRef) {
 			if (
@@ -62,6 +91,7 @@
 
 	function addDecimal() {
 		_value = getPrevValue() + '.';
+		refocus();
 	}
 
 	/* due to the fact that number inputs won't allow a leading dot, we have to use a text input 
@@ -74,16 +104,24 @@
 
 	function backspace() {
 		const preVvalue = getPrevValue();
-		_value = preVvalue && _value.slice(0, _value.length - 1);
+		const v = preVvalue && _value.slice(0, _value.length - 1);
+		_value = v;
 	}
 
 	function minus() {
-		_value = (((decimal ? parseFloat(_value) : parseInt(_value)) || 0) - 1).toString();
+		const v = ((decimal ? parseFloat(_value) : parseInt(_value)) || 0) - 1;
+
+		_value = (min != null ? Math.max(min, v) : v).toString();
 	}
 
 	function plus() {
-		_value = (((decimal ? parseFloat(_value) : parseInt(_value)) || 0) + 1).toString();
+		const v = ((decimal ? parseFloat(_value) : parseInt(_value)) || 0) + 1;
+
+		_value = (max != null ? Math.min(max, v) : v).toString();
 	}
+
+	const lessThanMin = $derived(min != null && (value == null || value < min));
+	const moreThanMax = $derived(max != null && (value == null || value > max));
 </script>
 
 <div class="number-input-wrapper">
@@ -98,6 +136,7 @@
 				bind:value={_value}
 				variant={InputVariant.Modal}
 				required
+				invalid={lessThanMin || moreThanMax}
 			/>
 			{#if max != undefined}
 				<TextInput
@@ -204,7 +243,7 @@
 		<button
 			onkeydown={passthrough}
 			type="button"
-			disabled={!decimal || (value != null && value % 1 !== 0)}
+			disabled={!decimal || (value != null && value % 1 !== 0) || _value.endsWith('.')}
 			onclick={addDecimal}>.</button
 		>
 		<button

package/dist/Components/VerticalTabGroup.svelte

@@ -2,18 +2,11 @@
 
 <script
 	lang="ts"
-	module
+	generics="CommonDenominator"
 >
-	import { dev } from '$app/environment';
 	import { onMount, untrack } from 'svelte';
 	import VerticalTabGroupButton from './VerticalTabGroupButton.svelte';
 	import type { VerticalTabGroupProps } from './VerticalTabGroupProps.js';
-</script>
-
-<script
-	lang="ts"
-	generics="CommonDenominator"
->
 	let {
 		name,
 		tabs,
@@ -24,27 +17,6 @@
 		nohistory = false,
 	}: VerticalTabGroupProps<CommonDenominator> = $props();
 
-	$effect(() => {
-		if (!dev) {
-			return;
-		}
-		for (const tab of tabs) {
-			if (tab.debug) {
-				$inspect(
-					tab.label,
-					tab.content,
-					tab.onclick,
-					tab.args,
-					tab.iconLeft,
-					tab.iconRight,
-					tab.isValid,
-					tab.disabled,
-					tab.visible
-				);
-			}
-		}
-	});
-
 	onMount(() => {
 		if (name && !nohistory) {
 			const tabName = sessionStorage.getItem(`${name}-active-tab`);

package/dist/Types/Internal/TabOption.d.ts

@@ -5,7 +5,6 @@ export interface TabOption<Args> {
     content: Snippet<[Args]>;
     onclick: () => void;
     args: Args;
-    debug?: boolean;
     iconLeft?: IconProps;
     iconRight?: IconProps;
     isValid?: boolean | Promise<boolean>;

package/package.json

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