@lavalogic/scoria 0.37.56 → 0.38.1

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,97 @@
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
+	import SingleSelect from '../../SingleSelect.svelte';
+	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
+	import { getContext } from 'svelte';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
+	import type { DatatableViewKind } from '../Types/Persistence/DatatableViewKind.js';
+
+	interface Props {
+		/**
+		 * Which view-state slice this dropdown switches between. `'layout'`
+		 * lists saved column layouts; `'filter'` lists saved filter sets.
+		 * Drives every `_viewState` read (label / active view / saved
+		 * views) and which kind `resetToDefault` is called with.
+		 */
+		kind: DatatableViewKind;
+	}
+
+	const { kind }: Props = $props();
+
+	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 view-state slice for `kind`, read live from the context.
+	const activeView = $derived(tableContext._viewState.activeView(kind));
+	const savedViews = $derived(tableContext._viewState.savedViews(kind));
+
+	// Dropdown 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(kind));
+
+	// 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, even
+	// when remote saved views are disabled and `savedViews` is empty.
+	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]);
+
+	/** 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(kind);
+			return;
+		}
+		const view = savedViews.find((v) => v.id === option.value);
+		if (view) {
+			tableContext.applyDatatableView(view);
+		}
+	}
+</script>
+
+<div class="view-dropdown">
+	<SingleSelect
+		label={kind === 'filter' ? 'Filter' : 'Layout'}
+		name={kind === 'filter' ? 'Filter' : 'Layout'}
+		{options}
+		labelProp="label"
+		valueProp="value"
+		value={selectedOption}
+		valueAsObject
+		searchable={false}
+		onchange={selectOption}
+	/>
+</div>
+
+<style>.view-dropdown {
+  display: flex;
+  flex-flow: column nowrap;
+  width: 100%;
+}</style>

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

@@ -0,0 +1,35 @@
+import type { Primitive } from '../Types/Context/TableInitOptions.js';
+import type { DatatableViewKind } from '../Types/Persistence/DatatableViewKind.js';
+interface Props {
+    /**
+     * Which view-state slice this dropdown switches between. `'layout'`
+     * lists saved column layouts; `'filter'` lists saved filter sets.
+     * Drives every `_viewState` read (label / active view / saved
+     * views) and which kind `resetToDefault` is called with.
+     */
+    kind: DatatableViewKind;
+}
+declare function $$render<T extends object, IdType extends Primitive>(): {
+    props: Props;
+    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 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;