@lavalogic/scoria 0.37.55 → 0.38.0

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

@@ -15,6 +15,8 @@
 	import { ExpandedPanel } from '../Types/ExpandedPanel.js';
 	import ColumnPanelModal from './ColumnPanelModal.svelte';
 	import FilterPanelModal from './FilterPanelModal.svelte';
+	import TableConfigurationModal from './TableConfigurationModal.svelte';
+	import TableViewDropdown from './TableViewDropdown.svelte';
 	import ToolboxPanelModal from './ToolboxPanelModal.svelte';
 
 	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
@@ -24,6 +26,7 @@
 		[ExpandedPanel.Column]: ColumnPanelModal,
 		[ExpandedPanel.Filter]: FilterPanelModal,
 		[ExpandedPanel.Toolbox]: ToolboxPanelModal,
+		[ExpandedPanel.Configuration]: TableConfigurationModal,
 	} as const;
 
 	let expandedPanel = $state<ExpandedPanel | null>(null);
@@ -39,6 +42,9 @@
 	/>
 {/if}
 <div class="sidebar">
+	<div class="view-dropdown-slot">
+		<TableViewDropdown />
+	</div>
 	<Button
 		side={Side.Bottom}
 		onclick={() => {
@@ -89,6 +95,19 @@
 			name: 'category',
 		}}>My Tool Box</Button
 	>
+	<Button
+		size={Size.Small}
+		side={Side.Bottom}
+		toggled={expandedPanel === ExpandedPanel.Configuration}
+		onclick={() => {
+			expandedPanel =
+				expandedPanel === ExpandedPanel.Configuration ? null : ExpandedPanel.Configuration;
+		}}
+		variant={Variant.Toolbar}
+		iconTop={{
+			name: 'setting-cog',
+		}}>Table Configuration</Button
+	>
 	{#if tableContext.dataRepo.addEmptyRow}
 		<Button
 			size={Size.Small}
@@ -140,4 +159,12 @@
 .sidebar .filler {
   flex-grow: 2;
   background-color: #ffffff;
+}
+.sidebar .view-dropdown-slot {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  background-color: #ffffff;
+  padding: 0 0.5rem;
+  flex-shrink: 0;
 }</style>

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

@@ -17,24 +17,39 @@
 	import ColumnPanel from './ColumnPanel.svelte';
 	import FilterPanel from './FilterPanel.svelte';
 	import SidePanel from './SidePanel.svelte';
+	import TableConfigurationModal from './TableConfigurationModal.svelte';
 	import ToolboxPanel from './ToolboxPanel.svelte';
 
 	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
 
+	// `TableConfigurationModal` is a full `DesktopModal` rather than a
+	// side-panel body, so it is registered here but rendered standalone
+	// (outside `SidePanel`) below - `panels` only maps the side-panel
+	// kinds. Keeping the Configuration key in the map documents the
+	// relationship and mirrors `TableHorizontalBar`'s registration.
 	const panels = {
 		[ExpandedPanel.Column]: ColumnPanel,
 		[ExpandedPanel.Filter]: FilterPanel,
 		[ExpandedPanel.Toolbox]: ToolboxPanel,
+		[ExpandedPanel.Configuration]: TableConfigurationModal,
 	} as const;
 
 	let expandedPanel = $state<ExpandedPanel | null>(null);
 
 	$effect(() => {
-		tableContext.limitFooter = !!expandedPanel;
+		// The Configuration modal owns its own overlay and must not shrink
+		// the table footer the way an inline side panel does.
+		tableContext.limitFooter = !!expandedPanel && expandedPanel !== ExpandedPanel.Configuration;
 	});
 
+	// Side-panel body for the inline panel kinds only; the Configuration
+	// kind is excluded and handled by the standalone modal block below.
 	let ExpandedPanelElement = $derived(
-		expandedPanel && expandedPanel !== ExpandedPanel.None ? panels[expandedPanel] : null
+		expandedPanel &&
+			expandedPanel !== ExpandedPanel.None &&
+			expandedPanel !== ExpandedPanel.Configuration
+			? panels[expandedPanel]
+			: null
 	);
 
 	function handleClickOutside(e: MouseEvent) {
@@ -58,6 +73,12 @@
 		if (target.closest('[data-scoria-portal-dropdown]') != null) {
 			return;
 		}
+		// The Table Configuration modal owns its own backdrop + close
+		// affordances; a click inside its `.modal-root` must not be
+		// treated as a click-outside that dismisses the panel.
+		if (target.closest('.modal-root') != null) {
+			return;
+		}
 		expandedPanel = null;
 	}
 
@@ -78,6 +99,14 @@
 		<ExpandedPanelElement />
 	</SidePanel>
 {/if}
+
+{#if expandedPanel === ExpandedPanel.Configuration}
+	<TableConfigurationModal
+		onclose={() => {
+			expandedPanel = null;
+		}}
+	/>
+{/if}
 <div class="sidebar">
 	<Button
 		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
@@ -133,6 +162,20 @@
 		}}
 		label="My Tool Box"
 	/>
+	<Button
+		side={tableContext.toolbarPosition === ToolbarPosition.Left ? Side.Left : Side.Right}
+		toggled={expandedPanel === ExpandedPanel.Configuration}
+		onclick={() => {
+			expandedPanel =
+				expandedPanel === ExpandedPanel.Configuration ? null : ExpandedPanel.Configuration;
+		}}
+		variant={Variant.Toolbar}
+		iconTop={{
+			name: 'setting-cog',
+			size: Size.Medium,
+		}}
+		label="Table Configuration"
+	/>
 
 	{#if tableContext.paginationRepo?.reload}
 		<Button

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

@@ -0,0 +1,175 @@
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
+	import Button from '../../Button.svelte';
+	import SingleSelect from '../../SingleSelect.svelte';
+	import TextInput from '../../TextInput.svelte';
+	import { devCatch } from '../../../Helpers/Helpers.svelte.js';
+	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';
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
+	// Sentinel value for the "Default" option. A real saved view always
+	// carries a server-assigned, non-empty `id`, so an empty string never
+	// collides with one.
+	const DEFAULT_OPTION = '';
+
+	// The layout view-state slice, read live from the context.
+	const activeView = $derived(tableContext._viewState.activeView('layout'));
+	const isDirty = $derived(tableContext._viewState.isDirty('layout'));
+	const savedViews = $derived(tableContext._viewState.savedViews('layout'));
+
+	// Toolbar label: 'Default' / 'Custom (unsaved)' / '<name>' / '<name>
+	// (unsaved)'. Used as the displayed label of the currently-selected
+	// option so the dropdown reflects the dirty state exactly.
+	const dropdownLabel = $derived(tableContext._viewState.dropdownLabel('layout'));
+
+	// The value of the currently-active option: the sentinel for Default,
+	// otherwise the saved view's id.
+	const activeValue = $derived(activeView.kind === 'saved' ? activeView.id : DEFAULT_OPTION);
+
+	// Options for the select. The currently-active option's label is the
+	// `dropdownLabel` (so a dirty view reads "<name> (unsaved)"); every
+	// other option shows its plain name. "Default" is always first.
+	const options: Array<SelectOption<string>> = $derived([
+		{
+			label: activeValue === DEFAULT_OPTION ? dropdownLabel : 'Default',
+			value: DEFAULT_OPTION,
+		},
+		...savedViews.map((view) => ({
+			label: view.id === activeValue ? dropdownLabel : view.name,
+			value: view.id,
+		})),
+	]);
+
+	const selectedOption = $derived(options.find((o) => o.value === activeValue) ?? options[0]);
+
+	// Inline "name this layout" prompt state for the Save button.
+	let promptOpen = $state(false);
+	let pendingName = $state('');
+
+	/** Apply the option the user picked from the dropdown. */
+	function selectOption(option: SelectOption<string> | null): void {
+		if (!option) {
+			return;
+		}
+		if (option.value === DEFAULT_OPTION) {
+			tableContext.resetToDefault('layout');
+			return;
+		}
+		const view = savedViews.find((v) => v.id === option.value);
+		if (view) {
+			tableContext.applyDatatableView(view);
+		}
+	}
+
+	/**
+	 * Handle the Save button. When the active layout is a saved view, save
+	 * over it directly. When it is the Default (an unsaved custom layout),
+	 * open the inline name prompt so the user can name a brand-new view.
+	 */
+	function onSaveClicked(): void {
+		if (activeView.kind === 'saved') {
+			tableContext.saveActiveView('layout').catch(devCatch);
+			return;
+		}
+		promptOpen = true;
+		pendingName = '';
+	}
+
+	/** Commit the inline name prompt as a brand-new saved layout. */
+	function commitNewView(): void {
+		const trimmed = pendingName.trim();
+		if (!trimmed) {
+			return;
+		}
+		tableContext.saveCurrentAsNewView(trimmed, 'layout').catch(devCatch);
+		promptOpen = false;
+		pendingName = '';
+	}
+</script>
+
+<div class="view-dropdown">
+	<div class="select">
+		<SingleSelect
+			label="Layout"
+			name="Layout"
+			{options}
+			labelProp="label"
+			valueProp="value"
+			value={selectedOption}
+			valueAsObject
+			searchable={false}
+			onchange={selectOption}
+		/>
+	</div>
+
+	{#if promptOpen}
+		<div class="save-prompt">
+			<TextInput
+				placeholder="Layout name"
+				bind:value={pendingName}
+				onkeydown={(e: KeyboardEvent) => {
+					if (e.key === 'Enter') {
+						e.preventDefault();
+						commitNewView();
+					} else if (e.key === 'Escape') {
+						promptOpen = false;
+						pendingName = '';
+					}
+				}}
+			/>
+			<Button
+				type="submit"
+				variant={Variant.Primary}
+				size={Size.MediumSmall}
+				nowrap
+				disabled={!pendingName.trim()}
+				onclick={commitNewView}>Save</Button
+			>
+			<Button
+				variant={Variant.Secondary}
+				size={Size.MediumSmall}
+				nowrap
+				onclick={() => {
+					promptOpen = false;
+					pendingName = '';
+				}}>Cancel</Button
+			>
+		</div>
+	{:else}
+		<Button
+			variant={Variant.Secondary}
+			size={Size.MediumSmall}
+			nowrap
+			disabled={!isDirty}
+			onclick={onSaveClicked}>Save</Button
+		>
+	{/if}
+</div>
+
+<style>.view-dropdown {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: end;
+  gap: 0.5rem;
+}
+
+.select {
+  min-width: 12rem;
+}
+
+.save-prompt {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: end;
+  gap: 0.375rem;
+}</style>

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

@@ -0,0 +1,25 @@
+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 TableViewDropdown: $$IsomorphicComponent;
+type TableViewDropdown<T extends object, IdType extends Primitive> = InstanceType<typeof TableViewDropdown<T, IdType>>;
+export default TableViewDropdown;

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

@@ -237,48 +237,7 @@ export function makeFocusApi(ctx) {
 // Preferences
 // ─────────────────────────────────────────────────────────────────────────
 export function makePreferencesApi(ctx) {
-    // Adapt the internal `ColumnDefSet<T>` shape to the public `SavedPreset`
-    // shape. `ColumnDefSet` has no `savedAt` timestamp or per-column sizing
-    // map, so `savedAt` is an epoch-zero placeholder and per-column `width`
-    // falls back to the def's `minSize`.
-    const adapt = (set) => ({
-        name: set.name,
-        // Literal placeholder, no reactivity needed.
-        // eslint-disable-next-line svelte/prefer-svelte-reactivity
-        savedAt: new Date(0).toISOString(),
-        columns: set.columnDefs.map((c) => ({
-            id: c.id,
-            visible: set.visibilityState[c.id] !== false,
-            width: c.minSize,
-            pinned: set.columnPinningState.left?.has(c.id)
-                ? 'left'
-                : set.columnPinningState.right?.has(c.id)
-                    ? 'right'
-                    : 'none',
-        })),
-    });
     return Object.freeze({
-        get presets() {
-            return ctx._preferences.columnPresets.map(adapt);
-        },
-        get selectedPreset() {
-            const sel = ctx._preferences.selectedPreset;
-            return sel ? adapt(sel) : undefined;
-        },
-        savePreset(name) {
-            ctx._preferences.saveColumnPreset(name);
-        },
-        applyPreset(preset) {
-            const internal = ctx._preferences.columnPresets.find((p) => p.name === preset.name);
-            if (internal) {
-                ctx._preferences.setSelectedPreset(internal);
-            }
-        },
-        deletePreset(name) {
-            const next = ctx._preferences.columnPresets.filter((p) => p.name !== name);
-            ctx._preferences.setPresets(next);
-            ctx._preferences.persistPresets(next);
-        },
         get settings() {
             return Object.freeze({
                 isCompact: ctx.isCompact,

package/dist/Components/Table/Types/Columns/JSONTableLayout.d.ts

@@ -4,14 +4,14 @@ import type { VisibilityState } from './VisibilityState.js';
 /**
  * Persisted-to-localStorage snapshot of a table's *live* column layout -
  * the order / visibility / pinning / width state a user builds up by
- * dragging, hiding and resizing columns, as distinct from an explicitly
- * saved named preset (`JSONColumnDefSet`).
+ * dragging, hiding and resizing columns. This is the working copy the
+ * FPM 403 datatable-view machine measures dirtiness against.
  *
  * `TableContext` writes this automatically on every layout change and
  * re-applies it on the next mount, so a user's tweaks survive navigation
- * and reloads without having to save a preset - persisted until the
- * browser storage is cleared or the table's column set changes (schema
- * drift, which drops the stale snapshot).
+ * and reloads - persisted until the browser storage is cleared or the
+ * table's column set changes (schema drift, which drops the stale
+ * snapshot).
  *
  * Only ids and primitive maps are stored - never the column-def objects
  * themselves - so the snapshot stays small and is trivially validated.

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

@@ -50,8 +50,8 @@ export declare class ColumnLayoutState<T extends object> {
      *
      * Setter accepts any array of `ColumnDef<T>`; the parent
      * `TableContext` is responsible for index normalisation when
-     * applying drag-drop or preset switches (see `reorderColumn`,
-     * `moveColumnTo`, `setSelectedPreset`).
+     * applying drag-drop or a saved datatable-view layout (see
+     * `reorderColumn`, `moveColumnTo`, `_applyLayout`).
      */
     get columnDefs(): Array<ColumnDef<T>>;
     set columnDefs(v: Array<ColumnDef<T>>);
@@ -66,9 +66,9 @@ export declare class ColumnLayoutState<T extends object> {
     set columnSizing(v: ColumnSizingState);
     /**
      * Per-column pin state (left / right). Setter is exposed publicly
-     * for direct assignment by the parent (e.g. `setSelectedPreset` and
-     * the init flow); the gated `setColumnPinning` updater below honours
-     * the `allowColumnReordering` master gate.
+     * for direct assignment by the parent (e.g. `_applyLayout` and the
+     * init flow); the gated `setColumnPinning` updater below honours the
+     * `allowColumnReordering` master gate.
      */
     get columnPinning(): ColumnPinningState;
     set columnPinning(v: ColumnPinningState);

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

@@ -34,8 +34,8 @@ export class ColumnLayoutState {
      *
      * Setter accepts any array of `ColumnDef<T>`; the parent
      * `TableContext` is responsible for index normalisation when
-     * applying drag-drop or preset switches (see `reorderColumn`,
-     * `moveColumnTo`, `setSelectedPreset`).
+     * applying drag-drop or a saved datatable-view layout (see
+     * `reorderColumn`, `moveColumnTo`, `_applyLayout`).
      */
     get columnDefs() {
         return this._columnDefs;
@@ -58,9 +58,9 @@ export class ColumnLayoutState {
     }
     /**
      * Per-column pin state (left / right). Setter is exposed publicly
-     * for direct assignment by the parent (e.g. `setSelectedPreset` and
-     * the init flow); the gated `setColumnPinning` updater below honours
-     * the `allowColumnReordering` master gate.
+     * for direct assignment by the parent (e.g. `_applyLayout` and the
+     * init flow); the gated `setColumnPinning` updater below honours the
+     * `allowColumnReordering` master gate.
      */
     get columnPinning() {
         return this._columnPinning;