@lavalogic/scoria 0.37.56 → 0.38.1

package/dist/Components/Table/ARCHITECTURE.md

@@ -16,14 +16,14 @@ Everything in the public surface is re-exported from
 
 ```ts
 import {
-    createTable,
-    localRows,
-    remoteRows,
-    customRows,
-    Table,
-    type CreateTableOptions,
-    type DisplayModalProps,
-    // …per-kind option types: TextColumnOptions, NumberColumnOptions, …
+	createTable,
+	localRows,
+	remoteRows,
+	customRows,
+	Table,
+	type CreateTableOptions,
+	type DisplayModalProps,
+	// …per-kind option types: TextColumnOptions, NumberColumnOptions, …
 } from '@lavalogic/scoria';
 ```
 
@@ -96,16 +96,16 @@ Table/
 `TableContext` is the root state object. It owns the data repo and seven
 sub-contexts:
 
-| Sub-context             | Owns                                                                |
-| ----------------------- | ------------------------------------------------------------------- |
-| `_sorting`              | Sort comparators + the `sortedData` derived chain                   |
-| `_filtering`            | Filter-fn relays + the `filteredData` derived chain + quick-filter toggle |
-| `_columnLayout`         | Column widths / pinning / visibility / id-index maps                |
-| `_selection`            | Selected & highlighted maps, key cache, page-wide select helpers    |
-| `_preferences`          | Saved column-presets + localStorage round-trip                      |
-| `_focus`                | Focus-coordinate state + multi-cell selection                       |
-| `_virtualisation`       | Row virtualisation window                                           |
-| `_queryValues`          | Typeahead-echo cache for QuerySelect filter inputs                  |
+| Sub-context       | Owns                                                                      |
+| ----------------- | ------------------------------------------------------------------------- |
+| `_sorting`        | Sort comparators + the `sortedData` derived chain                         |
+| `_filtering`      | Filter-fn relays + the `filteredData` derived chain + quick-filter toggle |
+| `_columnLayout`   | Column widths / pinning / visibility / id-index maps                      |
+| `_selection`      | Selected & highlighted maps, key cache, page-wide select helpers          |
+| `_preferences`    | Table settings + layout / filter / view localStorage round-trip           |
+| `_focus`          | Focus-coordinate state + multi-cell selection                             |
+| `_virtualisation` | Row virtualisation window                                                 |
+| `_queryValues`    | Typeahead-echo cache for QuerySelect filter inputs                        |
 
 Each sub-context is a class under `Types/Context/<Name>State.svelte.ts`
 that takes a `deps` object of thunk-returning fields the parent reads
@@ -261,10 +261,10 @@ for the canonical pattern.
 
 ## Testing model
 
-| File pattern                      | Project   | What it covers                                  |
-| --------------------------------- | --------- | ----------------------------------------------- |
-| `*.test.ts` (no `.svelte.`)       | `server`  | Pure-node unit tests (helpers, type contracts). Runs via `pnpm test`. |
-| `*.svelte.test.ts`                | `client`  | Tests using `$state` / `$effect` from Svelte 5. Browser mode via Vitest + Playwright. |
+| File pattern                | Project  | What it covers                                                                        |
+| --------------------------- | -------- | ------------------------------------------------------------------------------------- |
+| `*.test.ts` (no `.svelte.`) | `server` | Pure-node unit tests (helpers, type contracts). Runs via `pnpm test`.                 |
+| `*.svelte.test.ts`          | `client` | Tests using `$state` / `$effect` from Svelte 5. Browser mode via Vitest + Playwright. |
 
 The browser-mode runner has a Windows-specific chromium launch issue;
 set `SCORIA_CHROMIUM_EXECUTABLE` to the headless-shell binary to work

package/dist/Components/Table/Misc/ColumnPanel.svelte

@@ -1,31 +1,12 @@
 <svelte:options runes />
 
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
->
-	import Button from '../../Button.svelte';
-	import SingleSelect from '../../SingleSelect.svelte';
+<script lang="ts">
 	import ColumnList from '../Body/Rows/ColumnList.svelte';
 	import TextInput from '../../TextInput.svelte';
-	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
 	import { Size } from '../../../Types/Internal/Size.js';
-	import { Variant } from '../../../Types/Internal/Variant.js';
-	import { getContext } from 'svelte';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import type { Primitive } from '../Types/Context/TableInitOptions.js';
+	import TableViewDropdown from './TableViewDropdown.svelte';
 
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-
-	const labelledPresets: Array<SelectOption<string>> = $derived(
-		tableContext.columnPresets.map((pr) => ({ label: pr.name, value: pr.name }))
-	);
-
-	const selectedValue = $derived(
-		labelledPresets.find((it) => it.value === tableContext.selectedPreset?.name) ?? null
-	);
 	let searchValue = $state('');
-	let pendingPresetName = $state('');
 </script>
 
 <section class="side-panel-section">
@@ -34,22 +15,10 @@
 	</header>
 
 	<div class="toolbar">
-		<SingleSelect
-			label="Selected Preset"
-			name="Preset"
-			options={labelledPresets}
-			labelProp="label"
-			valueProp="value"
-			value={selectedValue}
-			valueAsObject
-			onchange={(newSelection: SelectOption<string> | null) => {
-				const preset =
-					newSelection && tableContext.columnPresets.find((p) => p.name === newSelection.value);
-				if (preset) {
-					tableContext.setSelectedPreset(preset);
-				}
-			}}
-		/>
+		<!-- Quick-switch dropdown for saved column layouts. Sits above the
+		     search box; saving a layout is done from the Table
+		     Configuration modal's "Save a new Layout" tab. -->
+		<TableViewDropdown kind="layout" />
 		<TextInput
 			bind:value={searchValue}
 			leftIcon={{ name: 'search', size: Size.Medium }}
@@ -65,30 +34,6 @@
 	<div class="column-list-wrapper">
 		<ColumnList {searchValue} />
 	</div>
-
-	<form
-		class="side-panel-footer"
-		onsubmit={(e) => {
-			e.preventDefault();
-			const trimmed = pendingPresetName.trim();
-			if (!trimmed) {
-				return;
-			}
-			tableContext.saveColumnPreset(trimmed);
-			pendingPresetName = '';
-		}}
-	>
-		<TextInput
-			placeholder="Preset name"
-			bind:value={pendingPresetName}
-		/>
-		<Button
-			type="submit"
-			variant={Variant.Secondary}
-			nowrap
-			size={Size.MediumSmall}>Save Layout</Button
-		>
-	</form>
 </section>
 
 <style>.side-panel-section {
@@ -143,6 +88,10 @@
   box-sizing: border-box;
 }
 
+/* Top toolbar (saved-layout dropdown + Search input) sits below the
+   header but above the scrollable list. It is intentionally not
+   inside `.side-panel-body` because the list takes the remaining
+   vertical space and scrolls on its own. */
 .toolbar {
   flex-shrink: 0;
   padding: 1rem 1.25rem;
@@ -160,6 +109,13 @@
   display: flex;
   flex-flow: column nowrap;
   background-color: #ffffff;
+  /* Horizontal padding aligned with FilterPanel's `.side-panel-body`
+     so the column-list cards leave the same gutter before the panel's
+     right border as the filter chips do, and the SidePanel's
+     `border-right` stays visible between the content and the toolbar
+     icons. Vertical padding is 0 because `.column-list` provides
+     its own 0.5rem padding (which doubles up to a 1.5rem gap from
+     the toolbar above and the footer below). */
   padding: 0 1.25rem;
   box-sizing: border-box;
 }</style>

package/dist/Components/Table/Misc/ColumnPanel.svelte.d.ts

@@ -1,25 +1,3 @@
-import type { Primitive } from '../Types/Context/TableInitOptions.js';
-declare function $$render<T extends object, IdType extends Primitive>(): {
-    props: Record<string, never>;
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-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, 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>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
-}
-declare const ColumnPanel: $$IsomorphicComponent;
-type ColumnPanel<T extends object, IdType extends Primitive> = InstanceType<typeof ColumnPanel<T, IdType>>;
+declare const ColumnPanel: import("svelte").Component<Record<string, never>, {}, "">;
+type ColumnPanel = ReturnType<typeof ColumnPanel>;
 export default ColumnPanel;

package/dist/Components/Table/Misc/ColumnPanelModal.svelte

@@ -1,56 +1,15 @@
 <svelte:options runes />
 
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
->
-	import Button from '../../Button.svelte';
+<script lang="ts">
 	import DesktopModal from '../../DesktopModal.svelte';
-	import SingleSelect from '../../SingleSelect.svelte';
 	import ColumnList from '../Body/Rows/ColumnList.svelte';
 	import TextInput from '../../TextInput.svelte';
-	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
 	import { Size } from '../../../Types/Internal/Size.js';
-	import { Variant } from '../../../Types/Internal/Variant.js';
-	import { getContext } from 'svelte';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import type { Primitive } from '../Types/Context/TableInitOptions.js';
 	import type { ColumnPanelModalProps } from './ColumnPanelModalProps.js';
 
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-
 	const { onclose }: ColumnPanelModalProps = $props();
-	const labelledPresets: Array<SelectOption<string>> = $derived(
-		tableContext.columnPresets.map((pr) => ({ label: pr.name, value: pr.name }))
-	);
-	let searchValue = $state('');
-	let pendingPresetName = $state('');
-
-	const selectedValue = $derived(
-		labelledPresets.find((it) => it.value === tableContext.selectedPreset?.name) ?? null
-	);
-
-	function trySavePreset(e: KeyboardEvent) {
-		if (e.key === 'Enter') {
-			e.preventDefault();
-			const trimmed = pendingPresetName.trim();
-			if (!trimmed) {
-				return;
-			}
-			tableContext.saveColumnPreset(trimmed);
-			pendingPresetName = '';
-		}
-	}
 
-	function savePreset(e: MouseEvent) {
-		e.preventDefault();
-		const trimmed = pendingPresetName.trim();
-		if (!trimmed) {
-			return;
-		}
-		tableContext.saveColumnPreset(trimmed);
-		pendingPresetName = '';
-	}
+	let searchValue = $state('');
 </script>
 
 <DesktopModal
@@ -59,25 +18,7 @@
 	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
 >
 	<div class="flex">
-		<div class="column-panel top presets-and-filter">
-			<div class="select">
-				<SingleSelect
-					label="Selected Preset"
-					name="Preset"
-					options={labelledPresets}
-					labelProp="label"
-					valueProp="value"
-					value={selectedValue}
-					valueAsObject
-					onchange={(newSelection: SelectOption<string> | null) => {
-						const preset =
-							newSelection && tableContext.columnPresets.find((p) => p.name === newSelection.value);
-						if (preset) {
-							tableContext.setSelectedPreset(preset);
-						}
-					}}
-				/>
-			</div>
+		<div class="column-panel top">
 			<TextInput
 				bind:value={searchValue}
 				leftIcon={{ name: 'search', size: Size.Medium }}
@@ -92,20 +33,6 @@
 		<div class="scrollable">
 			<ColumnList {searchValue} />
 		</div>
-		<div class="column-panel bottom save-preset-wrapper">
-			<TextInput
-				placeholder="Preset name"
-				bind:value={pendingPresetName}
-				onkeydown={trySavePreset}
-			/>
-			<Button
-				type="submit"
-				variant={Variant.Secondary}
-				nowrap
-				size={Size.MediumSmall}
-				onclick={savePreset}>Save Layout</Button
-			>
-		</div>
 	</div>
 </DesktopModal>
 
@@ -128,25 +55,9 @@
 }
 .column-panel.top {
   border-bottom: solid 2px #cbd4da;
-}
-.column-panel.bottom {
-  border-top: solid 2px #cbd4da;
-}
-.column-panel.presets-and-filter {
   display: flex;
   flex-flow: column;
   row-gap: 0.5rem;
   padding: 0.5rem;
   flex-basis: min-content;
-}
-.column-panel.save-preset-wrapper {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-between;
-  gap: 0.5rem;
-  padding: 0.5rem;
-  flex-basis: min-content;
-}
-.column-panel .select {
-  width: 100%;
 }</style>

package/dist/Components/Table/Misc/ColumnPanelModal.svelte.d.ts

@@ -1,26 +1,4 @@
-import type { Primitive } from '../Types/Context/TableInitOptions.js';
 import type { ColumnPanelModalProps } from './ColumnPanelModalProps.js';
-declare function $$render<T extends object, IdType extends Primitive>(): {
-    props: ColumnPanelModalProps;
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-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, 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 ColumnPanelModal: $$IsomorphicComponent;
-type ColumnPanelModal<T extends object, IdType extends Primitive> = InstanceType<typeof ColumnPanelModal<T, IdType>>;
+declare const ColumnPanelModal: import("svelte").Component<ColumnPanelModalProps, {}, "">;
+type ColumnPanelModal = ReturnType<typeof ColumnPanelModal>;
 export default ColumnPanelModal;

package/dist/Components/Table/Misc/ColumnPanelModalProps.d.ts

@@ -1,6 +1,6 @@
 /**
- * Props for `ColumnPanelModal` (the touch variant of the column-presets and
- * column-list management panel).
+ * Props for `ColumnPanelModal` (the touch variant of the column-list
+ * visibility / reorder management panel).
  */
 export interface ColumnPanelModalProps {
     /** Called when the modal requests close. */

package/dist/Components/Table/Misc/FilterPanel.svelte

@@ -5,17 +5,16 @@
 	generics="T extends object, IdType extends Primitive"
 >
 	import Action from '../../Action.svelte';
-	import Button from '../../Button.svelte';
 	import TextInput from '../../TextInput.svelte';
 	import { Colour, ColourSet } from '../../../scss/colours.js';
 	import { Size } from '../../../Types/Internal/Size.js';
-	import { Variant } from '../../../Types/Internal/Variant.js';
 	import { SvelteSet } from 'svelte/reactivity';
 	import { getContext } from 'svelte';
 	import type { Primitive } from '../Types/Context/TableInitOptions.js';
 	import type { ColumnDef } from '../Types/Columns/Definitions/ColumnDef.svelte.js';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 	import FilterInput from './FilterInput.svelte';
+	import TableViewDropdown from './TableViewDropdown.svelte';
 
 	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
 
@@ -31,11 +30,6 @@
 	 *  string is the "no filter" state. */
 	let quickFindValue: string = $state('');
 
-	/** Whether the Save Filter overflow menu is open. The chevron
-	 *  toggles it; clicking anywhere else (via the window-level
-	 *  listener below) closes it. */
-	let saveMenuOpen: boolean = $state(false);
-
 	/** Names of currently-collapsed groups. A name absent from this
 	 *  set is rendered expanded. Reactive via `SvelteSet` so the panel
 	 *  re-renders on toggle without manually re-assigning. */
@@ -106,39 +100,6 @@
 		}
 	}
 
-	function resetFilters(): void {
-		tableContext.paginationRepo?.resetFilters();
-	}
-
-	/**
-	 * Placeholder for the future Save-Filter / preset workflow. For
-	 * now this just closes the overflow menu; consumers wire the real
-	 * persistence layer in a follow-up workorder. The chevron menu is
-	 * still useful today as a home for the Reset action and as the
-	 * insertion point for "Load Filter" / "Manage Filters" entries
-	 * once those land.
-	 */
-	function saveFilter(): void {
-		saveMenuOpen = false;
-		if (typeof window !== 'undefined') {
-			window.dispatchEvent(
-				new CustomEvent('scoria:save-filter', {
-					detail: { tableName: tableContext.tableName },
-				})
-			);
-		}
-	}
-
-	function handleWindowClick(e: MouseEvent): void {
-		if (!saveMenuOpen) {
-			return;
-		}
-		const target = e.target as HTMLElement | null;
-		if (target?.closest('.save-filter-cluster') == null) {
-			saveMenuOpen = false;
-		}
-	}
-
 	/**
 	 * No-op keydown handler used to override `TextInput`'s default
 	 * `passthrough` keydown (defined in `Helpers.svelte.ts`), which
@@ -155,14 +116,16 @@
 	}
 </script>
 
-<svelte:window onclick={handleWindowClick} />
-
 <section class="side-panel-section">
 	<header class="side-panel-header">
 		<h2>Advanced Filter</h2>
 	</header>
 
 	<div class="toolbar">
+		<!-- Quick-switch dropdown for saved filter sets. Sits above the
+		     search box; saving a filter is done from the Table
+		     Configuration modal's "Save a new Filter" tab. -->
+		<TableViewDropdown kind="filter" />
 		<div class="quick-find">
 			<TextInput
 				labelTop="Quick Find a Filter"
@@ -172,36 +135,6 @@
 				onkeydown={noopKeydown}
 			/>
 		</div>
-
-		<div class="save-filter-cluster">
-			<Button
-				variant={Variant.Secondary}
-				nowrap
-				disabled
-				size={Size.MediumSmall}
-				onclick={saveFilter}>Save Filter</Button
-			>
-			<Action
-				label="More save options"
-				colourSet={ColourSet.Auxiliary}
-				icon={{ name: 'chevron-down', size: Size.Medium }}
-				onclick={() => {
-					saveMenuOpen = !saveMenuOpen;
-				}}
-			/>
-			{#if saveMenuOpen}
-				<div class="save-menu">
-					<button
-						type="button"
-						class="save-menu-item"
-						onclick={() => {
-							saveMenuOpen = false;
-							resetFilters();
-						}}>Reset all filters</button
-					>
-				</div>
-			{/if}
-		</div>
 	</div>
 
 	<div class="side-panel-body">
@@ -306,59 +239,24 @@
   box-sizing: border-box;
 }
 
+/* Top toolbar (saved-filter dropdown + Quick Find) sits below the
+   header but above the scrollable body. Kept outside
+   `.side-panel-body` so it stays pinned while the groups list
+   scrolls underneath. The two rows stack vertically: the
+   quick-switch dropdown on top, the search field below it. */
 .toolbar {
   flex-shrink: 0;
   display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
+  flex-flow: column nowrap;
   gap: 0.75rem;
   padding: 1rem 1.25rem;
   background-color: #ffffff;
   border-bottom: solid 1px #cbd4da;
 }
 .toolbar .quick-find {
-  flex: 1;
   min-width: 0;
   --input-height: 3rem;
 }
-.toolbar .save-filter-cluster {
-  position: relative;
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  gap: 0.25rem;
-}
-.toolbar .save-filter-cluster .save-menu {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 0.25rem;
-  background-color: #ffffff;
-  border: solid 1px #cbd4da;
-  border-radius: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-  min-width: 12rem;
-  z-index: 5;
-  display: flex;
-  flex-flow: column nowrap;
-  padding: 0.25rem 0;
-}
-.toolbar .save-filter-cluster .save-menu-item {
-  background: transparent;
-  border: none;
-  text-align: left;
-  padding: 0.5rem 0.75rem;
-  cursor: pointer;
-  font: inherit;
-  color: #3a4952;
-}
-.toolbar .save-filter-cluster .save-menu-item:hover {
-  background-color: #f4f7f9;
-}
-.toolbar .save-filter-cluster .save-menu-item:focus-visible {
-  outline: 2px solid #259fc7;
-  outline-offset: -2px;
-}
 
 p.empty {
   color: #647d8e;
@@ -372,6 +270,11 @@ p.empty {
   gap: 1rem;
 }
 
+/* `overflow: visible` (no longer `overflow: hidden`) so a filter
+   row's select dropdown can extend below the group's bottom edge
+   when there are not enough rows in the group to push the dropdown
+   past it. The header / body each round their own outer corners
+   instead so the rounded-card look survives without clipping. */
 .group {
   border: solid 1px #cbd4da;
   border-radius: 4px;
@@ -387,6 +290,11 @@ p.empty {
   padding: 0.5rem 0.75rem;
   background-color: #f4f7f9;
   border-bottom: solid 1px #cbd4da;
+  /* Round the header's top corners directly so the tinted strip
+     follows the parent's rounded outline. Without this rule
+     (combined with the `.group` `overflow: visible` change) the
+     header's blue band would leak past the parent's rounded
+     corners. */
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
@@ -399,10 +307,14 @@ p.empty {
 
 .group.collapsed > .group-header {
   border-bottom: none;
+  /* When collapsed the header is the only visible row, so it
+     has to round all four corners to follow the parent outline. */
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 }
 
+/* Round the bottom of the body so its visual edge follows the
+   parent's rounded outline once `overflow: hidden` is gone. */
 .group:not(.collapsed) > .group-body {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;