@lavalogic/scoria 0.38.10 → 0.38.12

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

@@ -2191,10 +2191,33 @@ export class TableContext {
         // plain strings - look up cleanly against the live column set.
         // eslint-disable-next-line svelte/prefer-svelte-reactivity
         const liveColumnIds = new Set(this.columnDefs.map((def) => def.id));
+        // 1. Clear the current filter VALUES. Without this, switching
+        //    saved filter views would only ADD entries from the new view
+        //    on top of whatever the old view set - any column the old
+        //    view filtered but the new one does not would keep its old
+        //    value and `FilterInput` would still show it.
         if (typeof repo.resetFilters === 'function') {
             repo.resetFilters();
         }
-        // Modes first: a value-bearing mode must be set before its value.
+        // 2. Clear the current filter MODES the same way. `resetFilters`
+        //    deliberately keeps modes (so a "Clear filters" toolbar
+        //    action retains operator selections); but applying a saved
+        //    view is a *replace*, so a stale mode (e.g. the old view's
+        //    "Empty" operator) leaking into the new view would leave
+        //    `FilterInput`'s mode dropdown out of sync with the value it
+        //    renders.
+        if (typeof repo.setFilterMode === 'function') {
+            for (const id of [...repo.filterModes.keys()]) {
+                repo.setFilterMode(id, undefined);
+            }
+        }
+        // 3. Clear the QuerySelect typeahead-echo cache so the user
+        //    doesn't see a stale label hanging in a `QuerySelect` whose
+        //    underlying value just got reset. `_queryValues` is keyed by
+        //    `def.id`, the same key space `FilterInput` reads from.
+        this._queryValues.clear();
+        // 4. Apply the saved modes (before values so a value-bearing
+        //    mode like "Empty" sees its mode already set).
         if (typeof repo.setFilterMode === 'function') {
             for (const [id, mode] of Object.entries(filter.modes)) {
                 // Drop stale column ids and unrecognised mode strings.
@@ -2203,6 +2226,7 @@ export class TableContext {
                 }
             }
         }
+        // 5. Apply the saved values.
         if (typeof repo.filterBy === 'function') {
             for (const entry of filter.filters) {
                 if (liveColumnIds.has(entry.id)) {
@@ -2498,6 +2522,123 @@ export class TableContext {
             devCatch(e);
         }
     };
+    /**
+     * Save the live state of the table INTO an arbitrary saved view,
+     * overwriting that view's stored body. Unlike `saveActiveView` -
+     * which only works when the target IS the kind's active view -
+     * this accepts any saved view: a "Save Layout" / "Save Filter"
+     * button on a card can overwrite the saved view with the user's
+     * current tweaks regardless of what the active view is.
+     *
+     * Flow:
+     *
+     * 1. capture the live layout / filter (chosen by `view.kind`);
+     * 2. `await remoteLayouts.updateView({ id, body })`;
+     * 3. swap the matching entry in that kind's saved-views list with
+     *    the authoritative server return;
+     * 4. if the just-saved view IS the kind's currently active view,
+     *    repoint that kind's baseline at the new body and clear the
+     *    dirty flag - the dropdown immediately reads "<name>" instead
+     *    of "<name> (unsaved)".
+     *
+     * No-op (dev-logged) when remote saved views are disabled. Adapter
+     * rejections are re-thrown so the caller can surface them in the
+     * Table Configuration modal's inline error banner.
+     */
+    saveLiveStateIntoView = async (view) => {
+        const adapter = this.remoteLayouts;
+        if (!adapter) {
+            if (dev) {
+                console.warn('saveLiveStateIntoView: no adapter - cannot save remotely');
+            }
+            return;
+        }
+        const body = view.kind === 'filter'
+            ? { kind: 'filter', filter: this._captureFilter() }
+            : { kind: 'layout', layout: this._captureLayout() };
+        const request = {
+            id: view.id,
+            body,
+        };
+        const updated = await adapter.updateView(request);
+        // Swap the matching entry in the saved-views list so the picker
+        // + modal reflect the new body without an extra refresh round-trip.
+        this._viewState.setSavedViews(view.kind, this._viewState.savedViews(view.kind).map((v) => (v.id === updated.id ? updated : v)));
+        // If the saved-into view IS the active view for its kind,
+        // repoint the baseline so dirty re-compares against the new
+        // body and clears.
+        const active = this._viewState.activeView(view.kind);
+        if (active.kind === 'saved' && active.id === updated.id) {
+            this._viewState.selectSavedView(view.kind, { id: updated.id, name: updated.name });
+            if (view.kind === 'filter') {
+                this._filterBaseline =
+                    updated.body.kind === 'filter' ? updated.body.filter : this._captureFilter();
+                this._persistActiveFilterView();
+            }
+            else {
+                this._viewBaseline =
+                    updated.body.kind === 'layout' ? updated.body.layout : this._captureLayout();
+                this._persistActiveView();
+            }
+        }
+    };
+    /**
+     * Update a saved view's options - currently its `name` and
+     * `visibility`. The view's body is left untouched (use
+     * `saveLiveStateIntoView` or `saveActiveView` for that). Driven by
+     * the "Update Options" modal on each My-* card.
+     *
+     * Flow:
+     *
+     * 1. `await remoteLayouts.updateView({ id, name?, visibility? })`;
+     * 2. swap the matching entry in that kind's saved-views list with
+     *    the authoritative server return so the new name / visibility
+     *    are reflected in every reactive surface;
+     * 3. if the renamed view IS the kind's currently active view, push
+     *    the new name onto the active-view ref so the quick-switch
+     *    dropdown and "active view" label update immediately.
+     *
+     * No-op (dev-logged) when remote saved views are disabled. Adapter
+     * rejections are re-thrown so the caller can surface them in the
+     * modal.
+     */
+    updateViewOptions = async (view, options) => {
+        const adapter = this.remoteLayouts;
+        if (!adapter) {
+            if (dev) {
+                console.warn('updateViewOptions: no adapter - cannot update remotely');
+            }
+            return;
+        }
+        // Skip the network round-trip entirely when nothing actually
+        // changed. Avoids a no-op PATCH that would still bump the
+        // updated_at timestamp on the backend.
+        const nameChanged = options.name !== undefined && options.name !== view.name;
+        const visibilityChanged = options.visibility !== undefined && options.visibility !== view.visibility;
+        if (!nameChanged && !visibilityChanged) {
+            return;
+        }
+        const request = {
+            id: view.id,
+            ...(nameChanged ? { name: options.name } : {}),
+            ...(visibilityChanged ? { visibility: options.visibility } : {}),
+        };
+        const updated = await adapter.updateView(request);
+        this._viewState.setSavedViews(view.kind, this._viewState.savedViews(view.kind).map((v) => (v.id === updated.id ? updated : v)));
+        // If the just-edited view is the active one for its kind, push
+        // the new name onto the active-view ref so the dropdown label
+        // reflects the rename without waiting for a refresh.
+        const active = this._viewState.activeView(view.kind);
+        if (active.kind === 'saved' && active.id === updated.id) {
+            this._viewState.selectSavedView(view.kind, { id: updated.id, name: updated.name });
+            if (view.kind === 'filter') {
+                this._persistActiveFilterView();
+            }
+            else {
+                this._persistActiveView();
+            }
+        }
+    };
     /**
      * Fetch the saved views for this datatable through the injected
      * `remoteLayouts` adapter and publish them into `_viewState`, split by

package/dist/Components/Table/Types/DataRepository/BuiltInRemoteRepository.svelte.d.ts

@@ -65,7 +65,7 @@ export declare class BuiltInRemoteRepository<TRow extends object> extends TableD
     private _debounceTimer;
     private _quickFilterFocusCount;
     constructor(_options: BuiltInRemoteRepositoryOptions<TRow>);
-    readonly setFilterMode: (id: string, mode: FilterMode) => void;
+    readonly setFilterMode: (id: string, mode: FilterMode | undefined) => void;
     readonly filterBy: (id: string, value: unknown) => void;
     readonly resetFilters: () => void;
     /** Jumps to the given 1-based page number, clamped at >= 1. */
@@ -121,7 +121,7 @@ export declare class CustomRemoteRepository<TRow extends object> extends TableDa
     get filtering(): ColumnFiltersState;
     private _abortController;
     constructor(tableName: string, getUserId: () => string | undefined, _fetch: CustomRowSource<TRow>['fetch']);
-    readonly setFilterMode: (id: string, mode: FilterMode) => void;
+    readonly setFilterMode: (id: string, mode: FilterMode | undefined) => void;
     readonly filterBy: (id: string, value: unknown) => void;
     readonly resetFilters: () => void;
     /** Jumps to the given 1-based page number, clamped at >= 1. */

package/dist/Components/Table/Types/DataRepository/BuiltInRemoteRepository.svelte.js

@@ -91,7 +91,16 @@ export class BuiltInRemoteRepository extends TableDataRepository {
     }
     // ── IRemoteDataRepository surface ────────────────────────────────
     setFilterMode = (id, mode) => {
-        this._filterModes.set(id, mode);
+        if (mode === undefined) {
+            // Drop the entry entirely so the column falls back to its
+            // kind's default mode on the next render. Used by
+            // `TableContext._applyFilter` to clear stale modes when a
+            // saved filter view is applied.
+            this._filterModes.delete(id);
+        }
+        else {
+            this._filterModes.set(id, mode);
+        }
         this.scheduleReload();
     };
     filterBy = (id, value) => {
@@ -366,7 +375,16 @@ export class CustomRemoteRepository extends TableDataRepository {
         this._fetch = _fetch;
     }
     setFilterMode = (id, mode) => {
-        this._filterModes.set(id, mode);
+        if (mode === undefined) {
+            // Drop the entry entirely so the column falls back to its
+            // kind's default mode on the next render. Used by
+            // `TableContext._applyFilter` when restoring a saved filter
+            // view to clear modes left over from a prior view.
+            this._filterModes.delete(id);
+        }
+        else {
+            this._filterModes.set(id, mode);
+        }
         void this.reload();
     };
     filterBy = (id, value) => {

package/dist/Components/Table/Types/DataRepository/IDataRepository.d.ts

@@ -37,7 +37,15 @@ export interface IDataRepository<T extends object> {
     sorting: SortingState;
     filtering: ColumnFiltersState;
     filterModes: SvelteMap<string, FilterMode>;
-    setFilterMode: (id: string, mode: FilterMode) => void;
+    /**
+     * Set the filter mode for column `id`. Pass `undefined` to delete the
+     * entry entirely (the column then falls back to its kind's default
+     * mode when the next `FilterInput` / `QuickSearchCell` renders).
+     * Used by `_applyFilter` when restoring a saved filter view, so any
+     * mode from a previously-applied view is dropped before the new
+     * one's modes are applied.
+     */
+    setFilterMode: (id: string, mode: FilterMode | undefined) => void;
     filterBy: (id: string, value: unknown) => void;
     dateFilter?: FilterFn<T, DateFilterValueType>;
     numberFilter?: FilterFn<T, NumberFilterValueType>;

package/dist/Components/Table/Types/DataRepository/ILocalDataRepository.d.ts

@@ -21,7 +21,7 @@ export interface ILocalDataRepository<T extends object> extends IDataRepository<
     prevPage: () => void;
     filtering: ColumnFiltersState;
     filterModes: SvelteMap<string, FilterMode>;
-    setFilterMode: (id: string, mode: FilterMode) => void;
+    setFilterMode: (id: string, mode: FilterMode | undefined) => void;
     filterBy: (id: string, value: unknown) => void;
     dateFilter: FilterFn<T, DateFilterValueType>;
     numberFilter: FilterFn<T, NumberFilterValueType>;

package/dist/Components/Table/Types/DataRepository/IRemoteDataRepository.d.ts

@@ -26,7 +26,7 @@ export interface IRemoteDataRepository<T extends object> extends IDataRepository
     prevPage: () => void;
     filtering: ColumnFiltersState;
     filterModes: SvelteMap<string, FilterMode>;
-    setFilterMode: (id: string, mode: FilterMode) => void;
+    setFilterMode: (id: string, mode: FilterMode | undefined) => void;
     filterBy: (id: string, value: unknown) => void;
     resetFilters: () => void;
     lastPage: number;

package/dist/Components/Table/Types/DataRepository/TableDataRepository.svelte.d.ts

@@ -42,7 +42,7 @@ export declare abstract class TableDataRepository<T extends object, out FilterVa
      */
     abstract setPageSize: (size: number | string) => void;
     abstract filtering: ColumnFiltersState<FilterValueType>;
-    abstract setFilterMode: (id: string, mode: FilterMode) => void;
+    abstract setFilterMode: (id: string, mode: FilterMode | undefined) => void;
     abstract filterBy: (id: string, value: unknown) => void;
     abstract resetFilters: () => void;
     abstract setPage: (page: number) => void;

package/dist/Components/Table/Types/Persistence/DatatableView.d.ts

@@ -1,5 +1,15 @@
 import type { DatatableViewBody } from './DatatableViewEnvelope.js';
 import type { DatatableViewKind } from './DatatableViewKind.js';
+/**
+ * Sharing visibility for a saved view. `'private'` is the default for
+ * v1: only the owner and explicit subscribers can see and apply it.
+ * `'public'` exposes the view to every user who has access to the
+ * datatable - they see it in the "Subscribe to Additional…" picker and
+ * can subscribe to it. scoria never interprets this token beyond
+ * passing it back through the adapter; the backend enforces the
+ * visibility semantics.
+ */
+export type DatatableViewVisibility = 'private' | 'public';
 /**
  * A saved datatable view - a named, persisted column layout or filter
  * that round-trips through a `RemoteTableLayoutAdapter`. This is the
@@ -47,6 +57,15 @@ export interface DatatableView {
      * UI - scoria falls back to `userId` when it is absent.
      */
     subscribers?: ReadonlyArray<DatatableViewSubscriber>;
+    /**
+     * Sharing visibility. `'private'` (default) is only visible to the
+     * owner and explicit subscribers; `'public'` is offered to every
+     * user with datatable access through the "Subscribe to Additional…"
+     * picker. Optional on read for backwards compatibility - hosts that
+     * have not surfaced this column yet can omit it, and scoria falls
+     * back to private semantics in the UI.
+     */
+    visibility?: DatatableViewVisibility;
 }
 /**
  * One entry in a `DatatableView.subscribers` roster: an opaque user
@@ -81,6 +100,12 @@ export interface UpdateDatatableViewRequest {
     name?: string;
     /** New payload, if the layout/filter is being replaced. */
     body?: DatatableViewBody;
+    /**
+     * New sharing visibility, if it is being changed. `'private'` keeps
+     * the view scoped to its owner + subscribers; `'public'` exposes it
+     * to every user with datatable access.
+     */
+    visibility?: DatatableViewVisibility;
 }
 /**
  * A subscriber relationship for a shared `DatatableView`. v1 sharing is

package/dist/Components/Test/TestContextConsumer.svelte

@@ -1,13 +1,13 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { TestContext } from '../../Contexts/TestContext.svelte.js';
-	import { getContext } from 'svelte';
-
-	const testContext = getContext<TestContext>(TestContext.identifier);
-</script>
-
-<h1>counter 1: {testContext.value1.value}</h1>
-<p>Ref wrapper 1 is incremented every time you click the button</p>
-<h2>counter 2: {testContext.value2.value}</h2>
-<p>ref wrapper 2 adds ref wrapper 1's value every time ref wrapper 1's value is divisible by 3</p>
+<svelte:options runes />
+
+<script lang="ts">
+	import { TestContext } from '../../Contexts/TestContext.svelte.js';
+	import { getContext } from 'svelte';
+
+	const testContext = getContext<TestContext>(TestContext.identifier);
+</script>
+
+<h1>counter 1: {testContext.value1.value}</h1>
+<p>Ref wrapper 1 is incremented every time you click the button</p>
+<h2>counter 2: {testContext.value2.value}</h2>
+<p>ref wrapper 2 adds ref wrapper 1's value every time ref wrapper 1's value is divisible by 3</p>

package/dist/Components/TextArea.svelte

@@ -1,132 +1,132 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { cssLength } from '../Helpers/Helpers.svelte.js';
-	import { InputVariant } from '../Types/Internal/InputVariant.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import Icon from './Icon.svelte';
-	import type { TextAreaProps } from './TextAreaProps.js';
-
-	let {
-		value = $bindable(''),
-		labelTop,
-		labelRight,
-		placeholder,
-		maxWidth = false,
-		required = false,
-		variant = InputVariant.Default,
-		selectNone = false,
-		noresize = false,
-		uppercase = false,
-		disabled,
-		invalid = false,
-		showErrorColours = true,
-		optional = false,
-		leftIcon,
-		rightIcon,
-		onLeftIconClick,
-		onRightIconClick,
-		rows = 4,
-
-		textAreaRef = $bindable(),
-		autocomplete,
-		spellcheck,
-		onblur,
-		onfocus,
-		// No default `onkeydown` - see TextInput.svelte for the rationale.
-		// The legacy default (`passthrough`) blurred the textarea on every
-		// alphanumeric keystroke and made the field unusable.
-		onkeydown,
-		oninput,
-	}: TextAreaProps = $props();
-
-	const isInvalid = $derived(showErrorColours && ((required && value.trim() === '') || invalid));
-</script>
-
-<label
-	class:for-modal={variant === InputVariant.Modal}
-	class:max-width={maxWidth}
->
-	{#if labelTop && variant !== InputVariant.Modal}
-		<span
-			class="top-label"
-			class:for-default={variant === InputVariant.Default}
-			class:invalid={isInvalid}
-			>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
-		>
-		{#if variant === InputVariant.Default}
-			<span
-				aria-hidden="true"
-				class="border"
-				class:invalid={isInvalid}
-				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
-			>
-		{/if}
-	{/if}
-	<div
-		class="icon-container"
-		class:for-modal={variant == InputVariant.Modal}
-	>
-		{#if leftIcon}
-			<Icon
-				name={leftIcon.name}
-				size={leftIcon.size ?? Size.Medium}
-				colour={leftIcon.colour}
-				float
-				left={cssLength('0.75rem')}
-				top={cssLength('50%')}
-				anchorX={cssLength('0')}
-				anchorY={cssLength('-50%')}
-				clickable={!!onLeftIconClick}
-				onclick={onLeftIconClick}
-			/>
-		{/if}
-		<textarea
-			class:noresize
-			class:uppercase
-			class:invalid={isInvalid}
-			class:select-none={selectNone}
-			class:left-pad={leftIcon != undefined}
-			class:right-pad={rightIcon != undefined}
-			class:for-modal={variant == InputVariant.Modal}
-			class:max-width={maxWidth}
-			autocomplete={autocomplete ?? 'off'}
-			spellcheck={spellcheck ?? true}
-			aria-invalid={isInvalid || undefined}
-			bind:value
-			{onblur}
-			{onfocus}
-			{onkeydown}
-			{oninput}
-			{rows}
-			bind:this={textAreaRef}
-			{placeholder}
-			{required}
-			{disabled}
-		></textarea>
-		{#if rightIcon}
-			<Icon
-				name={rightIcon.name}
-				size={rightIcon.size ?? Size.Medium}
-				colour={rightIcon.colour}
-				float
-				right={cssLength(variant == InputVariant.Modal ? '1rem' : '0.5rem')}
-				top={cssLength('50%')}
-				anchorX={cssLength('0')}
-				anchorY={cssLength('-50%')}
-				clickable={!!onRightIconClick}
-				onclick={onRightIconClick}
-			/>
-		{/if}
-		{#if labelRight}
-			<span
-				class="right-label"
-				class:for-modal={variant == InputVariant.Modal}>{labelRight}</span
-			>
-		{/if}
-	</div>
-</label>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { cssLength } from '../Helpers/Helpers.svelte.js';
+	import { InputVariant } from '../Types/Internal/InputVariant.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import Icon from './Icon.svelte';
+	import type { TextAreaProps } from './TextAreaProps.js';
+
+	let {
+		value = $bindable(''),
+		labelTop,
+		labelRight,
+		placeholder,
+		maxWidth = false,
+		required = false,
+		variant = InputVariant.Default,
+		selectNone = false,
+		noresize = false,
+		uppercase = false,
+		disabled,
+		invalid = false,
+		showErrorColours = true,
+		optional = false,
+		leftIcon,
+		rightIcon,
+		onLeftIconClick,
+		onRightIconClick,
+		rows = 4,
+
+		textAreaRef = $bindable(),
+		autocomplete,
+		spellcheck,
+		onblur,
+		onfocus,
+		// No default `onkeydown` - see TextInput.svelte for the rationale.
+		// The legacy default (`passthrough`) blurred the textarea on every
+		// alphanumeric keystroke and made the field unusable.
+		onkeydown,
+		oninput,
+	}: TextAreaProps = $props();
+
+	const isInvalid = $derived(showErrorColours && ((required && value.trim() === '') || invalid));
+</script>
+
+<label
+	class:for-modal={variant === InputVariant.Modal}
+	class:max-width={maxWidth}
+>
+	{#if labelTop && variant !== InputVariant.Modal}
+		<span
+			class="top-label"
+			class:for-default={variant === InputVariant.Default}
+			class:invalid={isInvalid}
+			>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+		>
+		{#if variant === InputVariant.Default}
+			<span
+				aria-hidden="true"
+				class="border"
+				class:invalid={isInvalid}
+				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+			>
+		{/if}
+	{/if}
+	<div
+		class="icon-container"
+		class:for-modal={variant == InputVariant.Modal}
+	>
+		{#if leftIcon}
+			<Icon
+				name={leftIcon.name}
+				size={leftIcon.size ?? Size.Medium}
+				colour={leftIcon.colour}
+				float
+				left={cssLength('0.75rem')}
+				top={cssLength('50%')}
+				anchorX={cssLength('0')}
+				anchorY={cssLength('-50%')}
+				clickable={!!onLeftIconClick}
+				onclick={onLeftIconClick}
+			/>
+		{/if}
+		<textarea
+			class:noresize
+			class:uppercase
+			class:invalid={isInvalid}
+			class:select-none={selectNone}
+			class:left-pad={leftIcon != undefined}
+			class:right-pad={rightIcon != undefined}
+			class:for-modal={variant == InputVariant.Modal}
+			class:max-width={maxWidth}
+			autocomplete={autocomplete ?? 'off'}
+			spellcheck={spellcheck ?? true}
+			aria-invalid={isInvalid || undefined}
+			bind:value
+			{onblur}
+			{onfocus}
+			{onkeydown}
+			{oninput}
+			{rows}
+			bind:this={textAreaRef}
+			{placeholder}
+			{required}
+			{disabled}
+		></textarea>
+		{#if rightIcon}
+			<Icon
+				name={rightIcon.name}
+				size={rightIcon.size ?? Size.Medium}
+				colour={rightIcon.colour}
+				float
+				right={cssLength(variant == InputVariant.Modal ? '1rem' : '0.5rem')}
+				top={cssLength('50%')}
+				anchorX={cssLength('0')}
+				anchorY={cssLength('-50%')}
+				clickable={!!onRightIconClick}
+				onclick={onRightIconClick}
+			/>
+		{/if}
+		{#if labelRight}
+			<span
+				class="right-label"
+				class:for-modal={variant == InputVariant.Modal}>{labelRight}</span
+			>
+		{/if}
+	</div>
+</label>
+
 <style>textarea {
   box-sizing: border-box;
   height: 100%;
@@ -340,4 +340,4 @@ span.border.invalid {
 .textarea-error-wrapper.for-modal {
   position: relative;
   height: 100%;
-}</style>
+}</style>