@lavalogic/scoria 0.38.7 → 0.38.9

package/dist/Components/InfoAlert.svelte

@@ -0,0 +1,65 @@
+<svelte:options runes />
+
+<script lang="ts">
+	import { Size } from '../Types/Internal/Size.js';
+	import Icon from './Icon.svelte';
+	import type { InfoAlertProps } from './InfoAlertProps.js';
+
+	const { children, iconName = 'circle-information' }: InfoAlertProps = $props();
+</script>
+
+<!--
+	Small, inline informational banner. Mirrors the structure of the
+	`.error-banner` block already used inside the Table Configuration
+	modal - leading icon + body text on a tinted background - but on a
+	neutral blue palette so it reads as "helper text" rather than "error".
+
+	The body is a snippet so callers can inline links or emphasis without
+	the component prescribing a content shape.
+-->
+<div
+	class="info-alert"
+	role="status"
+>
+	<div class="icon">
+		<Icon
+			name={iconName}
+			size={Size.Small}
+		/>
+	</div>
+	<div class="body">
+		{@render children()}
+	</div>
+</div>
+
+<style>.info-alert {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.625rem 0.875rem;
+  border: solid 1px #cbd4da;
+  border-radius: 4px;
+  background-color: #f4f7f9;
+  color: #3a4952;
+  font-size: 1.125rem;
+  line-height: 1.4;
+}
+
+/* Nudge the icon down a hair so it sits visually centred against
+   the first line of body text rather than aligned to the very top
+   of the first character ascent. */
+.icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding-top: 0.0625rem;
+  color: #647d8e;
+  --colour: #647d8e;
+}
+
+.body {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: #647d8e;
+}</style>

package/dist/Components/InfoAlert.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { InfoAlertProps } from './InfoAlertProps.js';
+declare const InfoAlert: import("svelte").Component<InfoAlertProps, {}, "">;
+type InfoAlert = ReturnType<typeof InfoAlert>;
+export default InfoAlert;

package/dist/Components/InfoAlertProps.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import type { icons } from './Icons.js';
+/**
+ * Props for `InfoAlert` - the small, inline informational banner used
+ * for non-blocking helper text and empty-state messages (e.g. "you
+ * have not saved any layouts yet…", "no filters match the search…").
+ *
+ * Visually it mirrors the existing `.error-banner` pattern used inside
+ * scoria's modals - an icon plus a single line / paragraph of body
+ * text on a tinted background - but with neutral / informational
+ * colours rather than error-red. It is deliberately a thin shell: any
+ * inline links or `<strong>` accents go inside the default snippet.
+ */
+export interface InfoAlertProps {
+    /** Body of the alert, rendered to the right of the leading icon. */
+    children: Snippet;
+    /**
+     * Optional icon name override. Defaults to `circle-information`,
+     * the standard neutral-info glyph; pass another name from the
+     * frozen `icons` registry to fit a more specific empty-state visual
+     * (e.g. `circle-exclamation` for a gentle warning).
+     */
+    iconName?: keyof typeof icons;
+}

package/dist/Components/InfoAlertProps.js

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

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

@@ -17,7 +17,6 @@
 
 	const { columnDef }: ColumnListRowProps<T> = $props();
 
-
 	/**
 	 * Position of this column inside the sorted column list. Drives the
 	 * disabled state of the "move up" / "move down" buttons and supplies
@@ -507,6 +506,14 @@ li.single-column:not(.anchor):last-of-type {
   display: flex;
   flex-shrink: 0;
 }
+.visibility-wrapper :global(div.inner-checkbox-container) {
+  border-width: 1px;
+  border-color: #cbd4da;
+}
+.visibility-wrapper :global(.outer-checkbox-container:hover div.inner-checkbox-container:not(.disabled)) {
+  border-width: 1px;
+  border-color: #adbbc5;
+}
 
 .pin-selector {
   --input-height: 2.25rem;
@@ -519,6 +526,12 @@ li.single-column:not(.anchor):last-of-type {
 .pin-selector.disabled {
   opacity: 0.5;
 }
+.pin-selector :global(.radios > label) {
+  padding: 0;
+}
+.pin-selector :global(.radios > label:first-child) {
+  border-left: none;
+}
 
 .column-label {
   width: 100%;

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

@@ -0,0 +1,378 @@
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
+	import Button from '../../Button.svelte';
+	import DesktopModal from '../../DesktopModal.svelte';
+	import Icon from '../../Icon.svelte';
+	import InfoAlert from '../../InfoAlert.svelte';
+	import MultiSelect from '../../MultiSelect.svelte';
+	import { cssLength } from '../../../Helpers/Helpers.svelte.js';
+	import { ColourSet } from '../../../scss/colours.js';
+	import { Size } from '../../../Types/Internal/Size.js';
+	import { Variant } from '../../../Types/Internal/Variant.js';
+	import { getContext, onMount } from 'svelte';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
+	import type { DatatableViewUser } from '../Types/Persistence/RemoteTableLayoutAdapter.js';
+	import type { ShareViewModalProps } from './ShareViewModalProps.js';
+
+	const { view, onclose, onsaved }: ShareViewModalProps = $props();
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
+	// All users the current user is allowed to share with. `null` until the
+	// boot-time `listUsers` fetch resolves; an array (possibly empty) once
+	// the call lands. Bound to the `MultiSelect` options below.
+	let allUsers = $state<ReadonlyArray<DatatableViewUser> | null>(null);
+
+	// User-visible error banner. Adapter rejections are routed here so the
+	// modal never throws into the host UI.
+	let errorMessage = $state<string | null>(null);
+
+	// In-flight flags for the two adapter call sites. `loadingUsers` blanks
+	// the picker while `listUsers` is in flight; `saving` disables the
+	// footer buttons while the subscribe / unsubscribe deltas land.
+	let loadingUsers = $state(false);
+	let saving = $state(false);
+
+	/**
+	 * Current picker selection. Each entry is a `DatatableViewUser`. The
+	 * initial value is seeded from `view.subscribers` (the existing
+	 * roster) inside `onMount` so opening the modal shows "who is already
+	 * shared with", and Save can diff against the originals.
+	 *
+	 * `displayName` falls back to the opaque `userId` when the subscriber
+	 * record carries no label, matching the rest of the Configuration
+	 * modal's fallback behaviour.
+	 */
+	let selected = $state<Array<DatatableViewUser>>([]);
+
+	/**
+	 * Snapshot of the subscriber ids the view started with. The Save diff
+	 * reads it to compute which subscribers were added (POST subscribe)
+	 * vs removed (POST unsubscribe). Seeded in `onMount` from
+	 * `view.subscribers` so the snapshot stays a true *initial* roster
+	 * regardless of any concurrent edits to `view`.
+	 *
+	 * Typed as a plain `Set` (not `ReadonlySet`) only because it is
+	 * reassigned once in `onMount`; reads downstream still treat it as
+	 * read-only. Not reactive - the modal owns this snapshot for its
+	 * lifetime and never re-derives it.
+	 */
+	let initialIds: Set<string> = new Set();
+
+	// Whether anything in the picker differs from the initial roster.
+	// Drives the Save button's disabled state so a no-op Save never hits
+	// the network.
+	const dirty = $derived.by(() => {
+		const currentIds = new Set(selected.map((s) => s.id));
+		if (currentIds.size !== initialIds.size) {
+			return true;
+		}
+		for (const id of currentIds) {
+			if (!initialIds.has(id)) {
+				return true;
+			}
+		}
+		return false;
+	});
+
+	onMount(() => {
+		// Snapshot the initial subscriber roster once on mount so the
+		// Save diff has a stable starting point. Done inside `onMount`
+		// (rather than at `$state` init) so Svelte's reactivity lint does
+		// not flag the read as "captures the initial value of `view`" -
+		// the modal owns this snapshot for its lifetime intentionally.
+		const initial = (view.subscribers ?? []).map((s) => ({
+			id: s.userId,
+			displayName: s.displayName?.trim() ? s.displayName : s.userId,
+		}));
+		selected = initial;
+		initialIds = new Set(initial.map((u) => u.id));
+
+		const adapter = tableContext.remoteLayouts;
+		if (!adapter) {
+			errorMessage = 'Sharing is unavailable: no remote layouts adapter is configured.';
+			return;
+		}
+		loadingUsers = true;
+		adapter
+			.listUsers()
+			.then((users) => {
+				// Exclude the view's owner from the picker - sharing a view
+				// with its own owner is nonsensical and the backend would
+				// reject the subscribe anyway.
+				allUsers = users.filter((u) => u.id !== view.ownerUserId);
+			})
+			.catch((e: unknown) => {
+				console.error('[ShareViewModal] listUsers failed:', e);
+				errorMessage =
+					e instanceof Error
+						? `Could not load the user list. (${e.message})`
+						: 'Could not load the user list.';
+			})
+			.finally(() => {
+				loadingUsers = false;
+			});
+	});
+
+	/** Remove a user from the current selection. */
+	function removeFromSelection(userId: string): void {
+		selected = selected.filter((s) => s.id !== userId);
+	}
+
+	/** Apply the picker selection by issuing the required deltas. */
+	async function save(): Promise<void> {
+		const adapter = tableContext.remoteLayouts;
+		if (!adapter) {
+			errorMessage = 'Sharing is unavailable: no remote layouts adapter is configured.';
+			return;
+		}
+		if (!dirty) {
+			onclose();
+			return;
+		}
+
+		const currentIds = new Set(selected.map((s) => s.id));
+		const toAdd: Array<string> = [];
+		const toRemove: Array<string> = [];
+
+		// Added: in the new selection but not the original roster.
+		for (const id of currentIds) {
+			if (!initialIds.has(id)) {
+				toAdd.push(id);
+			}
+		}
+		// Removed: in the original roster but not the new selection.
+		for (const id of initialIds) {
+			if (!currentIds.has(id)) {
+				toRemove.push(id);
+			}
+		}
+
+		errorMessage = null;
+		saving = true;
+		try {
+			// Run sequentially so a partial failure surfaces a useful error
+			// and leaves the already-applied deltas committed (an aborted
+			// `Promise.all` is much harder to reason about).
+			for (const userId of toAdd) {
+				await adapter.addSubscriber(view.id, userId);
+			}
+			for (const userId of toRemove) {
+				await adapter.removeSubscriber(view.id, userId);
+			}
+			if (onsaved) {
+				await onsaved();
+			}
+			onclose();
+		} catch (e: unknown) {
+			console.error('[ShareViewModal] save failed:', e);
+			errorMessage =
+				e instanceof Error
+					? `Could not update sharing. Some changes may have been applied. (${e.message})`
+					: 'Could not update sharing. Some changes may have been applied.';
+		} finally {
+			saving = false;
+		}
+	}
+</script>
+
+<DesktopModal
+	headerLabel={`Share "${view.name}"`}
+	headerSubtitle={`Choose who can access this ${view.kind === 'filter' ? 'filter' : 'layout'}.`}
+	onclose={() => {
+		if (!saving) {
+			onclose();
+		}
+	}}
+	width={cssLength('40vw')}
+	minWidth={cssLength('32rem')}
+	buttons={[
+		{
+			label: 'Cancel',
+			callback: () => {
+				if (!saving) {
+					onclose();
+				}
+			},
+			disabled: saving,
+		},
+		{
+			label: saving ? 'Saving…' : 'Save',
+			callback: () => {
+				void save();
+			},
+			colourSet: ColourSet.Primary,
+			disabled: saving || !dirty || allUsers === null,
+		},
+	]}
+>
+	<div class="share-body">
+		{#if errorMessage}
+			<div
+				class="error-banner"
+				role="alert"
+			>
+				<Icon
+					name="circle-exclamation"
+					size={Size.Small}
+				/>
+				<span>{errorMessage}</span>
+			</div>
+		{/if}
+
+		<div class="picker">
+			{#if loadingUsers && allUsers === null}
+				<InfoAlert>Loading users…</InfoAlert>
+			{:else if allUsers !== null}
+				<MultiSelect
+					label="Users"
+					name="User"
+					options={allUsers as Array<DatatableViewUser>}
+					labelProp="displayName"
+					valueProp="id"
+					valueAsObject={true}
+					selectedValues={selected}
+					onchange={(values) => {
+						selected = values;
+					}}
+				/>
+			{/if}
+		</div>
+
+		{#if selected.length === 0}
+			<InfoAlert>
+				No users selected. Use the picker above to share this {view.kind === 'filter'
+					? 'filter'
+					: 'layout'} with one or more users.
+			</InfoAlert>
+		{:else}
+			<ul class="user-card-list">
+				{#each selected as user (user.id)}
+					<li class="user-card">
+						<div class="user-info">
+							<Icon
+								name="user-3"
+								size={Size.Medium}
+							/>
+							<span class="user-name">{user.displayName}</span>
+						</div>
+						<div class="user-meta">
+							<!--
+								v1 sharing exposes a single role - subscriber - so
+								the "permission" surface is informational only. The
+								backend's `editor` / `systemOwned` flags are
+								reserved no-ops in v1 (see `DatatableView` DTO
+								JSDoc); scoria never sets them.
+							-->
+							<span class="permission-pill">Subscriber</span>
+							<Button
+								variant={Variant.Secondary}
+								size={Size.MediumSmall}
+								nowrap
+								iconLeft={{ name: 'circle-cross', size: Size.Small }}
+								disabled={saving}
+								onclick={() => {
+									removeFromSelection(user.id);
+								}}>Remove</Button
+							>
+						</div>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+</DesktopModal>
+
+<style>.share-body {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.75rem;
+  padding: 1rem;
+  min-height: 25vh;
+  max-height: 60vh;
+  overflow-y: auto;
+  background-color: #ffffff;
+}
+
+.error-banner {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border: solid 1px #aa1414;
+  border-radius: 4px;
+  background-color: #f9e9e9;
+  color: #aa1414;
+}
+
+.picker {
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.muted {
+  color: #647d8e;
+  margin: 0;
+}
+
+.user-card-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.5rem;
+}
+
+.user-card {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.6rem 0.75rem;
+  border: solid 1px #cbd4da;
+  border-radius: 4px;
+  background-color: #ffffff;
+}
+
+.user-info {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.user-name {
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.user-meta {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+/* v1 permissions are informational only - one pill per card showing
+   "Subscriber". The visual is a quiet tag so it does not compete with
+   the Remove action; the backend's `editor` / `systemOwned` flags are
+   reserved no-ops in v1. */
+.permission-pill {
+  font-size: 0.875rem;
+  padding: 0.15rem 0.5rem;
+  border-radius: 999px;
+  background-color: #e9ecf1;
+  color: #3a4952;
+}</style>

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

@@ -0,0 +1,26 @@
+import type { Primitive } from '../Types/Context/TableInitOptions.js';
+import type { ShareViewModalProps } from './ShareViewModalProps.js';
+declare function $$render<T extends object, IdType extends Primitive>(): {
+    props: ShareViewModalProps;
+    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 ShareViewModal: $$IsomorphicComponent;
+type ShareViewModal<T extends object, IdType extends Primitive> = InstanceType<typeof ShareViewModal<T, IdType>>;
+export default ShareViewModal;

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

@@ -0,0 +1,24 @@
+import type { DatatableView } from '../Types/Persistence/DatatableView.js';
+/**
+ * Props for `ShareViewModal` - the FPM 403 round-4 share dialog opened
+ * from a saved view card's "Share" button. The modal renders a user
+ * picker (driven by `RemoteTableLayoutAdapter.listUsers`) plus a
+ * permission card per selected user; on Save it diffs the picker
+ * selection against the view's current `subscribers` and issues one
+ * `addSubscriber` / `removeSubscriber` call per change.
+ */
+export interface ShareViewModalProps {
+    /** The view being shared. The modal reads its current `subscribers`
+     *  roster as the initial picker selection and writes deltas back via
+     *  `addSubscriber` / `removeSubscriber`. */
+    view: DatatableView;
+    /** Called when the modal should close - both on Cancel and after a
+     *  successful Save. The host (Table Configuration modal) is also
+     *  expected to refresh its view list after a successful Save so the
+     *  subscriber strip on the card reflects the change. */
+    onclose: () => void;
+    /** Called after a successful Save, before `onclose`. The host wires
+     *  this to a saved-views refresh so the subscriber strip on the
+     *  caller's card updates. Optional - omit to skip the refresh. */
+    onsaved?: () => void | Promise<void>;
+}

package/dist/Components/Table/Misc/ShareViewModalProps.js

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

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

@@ -8,6 +8,7 @@
 	import DesktopModal from '../../DesktopModal.svelte';
 	import HorizontalTabGroup from '../../HorizontalTabGroup.svelte';
 	import Icon from '../../Icon.svelte';
+	import InfoAlert from '../../InfoAlert.svelte';
 	import TextInput from '../../TextInput.svelte';
 	import VerticalTabGroup from '../../VerticalTabGroup.svelte';
 	import { cssLength } from '../../../Helpers/Helpers.svelte.js';
@@ -19,6 +20,7 @@
 	import type { Primitive } from '../Types/Context/TableInitOptions.js';
 	import type { DatatableView } from '../Types/Persistence/DatatableView.js';
 	import type { DatatableViewKind } from '../Types/Persistence/DatatableViewKind.js';
+	import ShareViewModal from './ShareViewModal.svelte';
 	import type { TableConfigurationModalProps } from './TableConfigurationModalProps.js';
 
 	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
@@ -52,6 +54,12 @@
 	// My-tab shows "Loading…" rather than the "nothing saved yet" message.
 	let loadingViews = $state(false);
 
+	// The view whose Share modal is currently open. `null` when no share
+	// modal is rendered. Owner cards (rendered on the My-tab) wire their
+	// Share button to open `ShareViewModal` against the view they belong
+	// to; the modal closes itself on Cancel / Save.
+	let sharingView = $state<DatatableView | null>(null);
+
 	// Whether remote saved views are available at all. A table created
 	// without `datatableUuid` / `remoteLayouts` opts out of remote views;
 	// the modal then renders a graceful "unavailable" empty state and
@@ -329,12 +337,12 @@
 
 		{#if args.tab === 'mine'}
 			{#if loadingViews}
-				<p class="muted">Loading saved {sectionNounPlural.toLowerCase()}…</p>
+				<InfoAlert>Loading saved {sectionNounPlural.toLowerCase()}…</InfoAlert>
 			{:else if myViews.length === 0}
-				<p class="muted">
+				<InfoAlert>
 					You have not saved any {sectionNounPlural.toLowerCase()} yet. Use the "Save a new {sectionNoun}"
 					tab to create one.
-				</p>
+				</InfoAlert>
 			{:else}
 				<ul class="card-list">
 					{#each myViews as view (view.id)}
@@ -356,7 +364,12 @@
 										nowrap
 										iconLeft={{ name: 'external-link', size: Size.Small }}
 										onclick={() => {
-											selectTab('shared');
+											// Open the share dialog rather than switching to
+											// the "Shared" tab - subscribing OTHER users to
+											// this view is a distinct flow from "Subscribe
+											// to Additional" (which is the current user
+											// joining a public view).
+											sharingView = view;
 										}}>Share</Button
 									>
 									<Button
@@ -409,9 +422,9 @@
 
 			{#if publicViews !== null}
 				{#if publicViews.length === 0}
-					<p class="muted">
+					<InfoAlert>
 						There are no further {sectionNounPlural.toLowerCase()} available to subscribe to.
-					</p>
+					</InfoAlert>
 				{:else}
 					<ul class="card-list">
 						{#each publicViews as view (view.id)}
@@ -437,9 +450,9 @@
 			{/if}
 
 			{#if sharedViews.length === 0}
-				<p class="muted">
+				<InfoAlert>
 					No {sectionNounPlural.toLowerCase()} are currently shared with you.
-				</p>
+				</InfoAlert>
 			{:else}
 				<ul class="card-list">
 					{#each sharedViews as view (view.id)}
@@ -472,10 +485,10 @@
 			{/if}
 		{:else}
 			<div class="save-tab">
-				<p class="muted">
+				<InfoAlert>
 					Save the table's current {sectionNoun.toLowerCase()} as a reusable named
 					{sectionNoun.toLowerCase()}.
-				</p>
+				</InfoAlert>
 				<TextInput
 					placeholder={`${sectionNoun} name`}
 					bind:value={newViewName}
@@ -486,10 +499,16 @@
 						}
 					}}
 				/>
-				<Button
-					disabled={!newViewName.trim()}
-					onclick={saveNewView}>Save Current</Button
-				>
+				<!-- Wrap the button in a row so the flex column's default
+					`align-items: stretch` does not blow it up to the input's
+					width. The row itself can stretch; the button inside sits
+					at its natural content width like every other Button. -->
+				<div class="save-tab-actions">
+					<Button
+						disabled={!newViewName.trim()}
+						onclick={saveNewView}>Save Current</Button
+					>
+				</div>
 			</div>
 		{/if}
 	</div>
@@ -524,6 +543,25 @@
 	{/if}
 </DesktopModal>
 
+<!--
+	Share dialog stacked on top of the Configuration modal. Rendered as a
+	sibling (not nested in the modal body) so the second modal's overlay
+	covers the first - matching how every other layered modal in scoria
+	stacks. After a successful Save we refresh the saved-views list so the
+	owner's card's subscriber strip updates immediately, then close.
+-->
+{#if sharingView}
+	<ShareViewModal
+		view={sharingView}
+		onclose={() => {
+			sharingView = null;
+		}}
+		onsaved={async () => {
+			await tableContext.refreshSavedViews();
+		}}
+	/>
+{/if}
+
 <style>.empty-state {
   display: flex;
   flex-flow: column nowrap;
@@ -574,7 +612,9 @@
    frame visually stable across every section/tab combination (short
    tabs no longer shrink the dialog); the `max-height` + `overflow-y`
    keep taller content scrolling within that fixed frame rather than
-   growing the dialog. */
+   growing the dialog. The white background overrides the wrapping
+   `VerticalTabGroup .content` background (`$ui-blue-1`, a grey tint)
+   so the body reads as a clean content surface. */
 .tab-body {
   display: flex;
   flex-flow: column nowrap;
@@ -583,6 +623,7 @@
   min-height: 30vh;
   max-height: 60vh;
   overflow-y: auto;
+  background-color: #ffffff;
 }
 
 .muted {
@@ -659,4 +700,14 @@
   flex-flow: column nowrap;
   gap: 0.75rem;
   max-width: 24rem;
+}
+
+/* Row wrapping the Save Current button. The wrapper stretches with
+   the surrounding flex column, but the button inside sits at its
+   natural content width (matching every other standard Button) and
+   left-aligns on the row. */
+.save-tab-actions {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
 }</style>

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

@@ -409,6 +409,18 @@ export declare class TableContext<T extends object, RowIdType extends Primitive>
      * factory layout regardless of which saved view was active.
      */
     private _defaultLayoutSnapshot;
+    /**
+     * Coded-default column widths captured before any user interaction, by
+     * column id. Populated once during the boot chain (after
+     * `setupDefaultColumnDefs` and before the working copy / saved view
+     * hydration overlays anything). `_applyLayout` reads it to restore the
+     * factory widths of columns NOT mentioned in the applied layout's
+     * `sizing` map; without this, switching back to the Default view (whose
+     * `sizing` is empty) would leave previously-resized columns at the
+     * resized width because the apply loop only touches columns it has an
+     * explicit entry for.
+     */
+    private _defaultColumnWidths;
     /**
      * Baseline `JSONTableFilter` the *filter* dirty comparison is
      * measured against: the saved state of whatever filter view

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

@@ -500,6 +500,17 @@ export class TableContext {
                 // `resetToDefault` restores it.
                 this._defaultLayoutSnapshot = this._captureLayout();
                 this._viewBaseline = this._defaultLayoutSnapshot;
+                // Capture each column's coded-default width here, BEFORE
+                // any saved snapshot or user-resize can mutate `def.width`.
+                // `_applyLayout` consults this map to restore widths of
+                // columns absent from an applied layout's `sizing` (e.g.
+                // the Default view, whose `sizing` is empty) - otherwise
+                // a previously-resized column would stay at its resized
+                // width forever.
+                this._defaultColumnWidths.clear();
+                for (const def of this.columnDefs) {
+                    this._defaultColumnWidths.set(def.id, def.width);
+                }
                 // Capture the Default-filter baseline: the empty / initial
                 // filter state at boot, BEFORE the localStorage working
                 // copy is overlaid. This is the "Default" the FPM 403
@@ -1015,6 +1026,19 @@ export class TableContext {
      * factory layout regardless of which saved view was active.
      */
     _defaultLayoutSnapshot = undefined;
+    /**
+     * Coded-default column widths captured before any user interaction, by
+     * column id. Populated once during the boot chain (after
+     * `setupDefaultColumnDefs` and before the working copy / saved view
+     * hydration overlays anything). `_applyLayout` reads it to restore the
+     * factory widths of columns NOT mentioned in the applied layout's
+     * `sizing` map; without this, switching back to the Default view (whose
+     * `sizing` is empty) would leave previously-resized columns at the
+     * resized width because the apply loop only touches columns it has an
+     * explicit entry for.
+     */
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    _defaultColumnWidths = new Map();
     /**
      * Baseline `JSONTableFilter` the *filter* dirty comparison is
      * measured against: the saved state of whatever filter view
@@ -1986,8 +2010,26 @@ export class TableContext {
         }
         this.columnVisibility = visibility;
         // Sizing: restore user-resized widths onto the matching defs. The
-        // grid template reads `def.width` + `def.userResized`, so set both;
-        // columns absent from the snapshot keep their factory default.
+        // grid template reads `def.width` + `def.userResized`, so set both.
+        //
+        // Columns ABSENT from `layout.sizing` must be reset to their
+        // coded-default width (with `userResized = false`) - otherwise a
+        // previously-resized column stays at its resized width forever when
+        // the user switches to a layout that does not mention it (most
+        // notably the Default view, whose `sizing` is empty). Two passes:
+        // reset everything to its coded default first, then overwrite with
+        // the layout's explicit entries.
+        const sizedIds = new Set(Object.keys(layout.sizing));
+        for (const def of this.columnDefs) {
+            if (sizedIds.has(def.id)) {
+                continue;
+            }
+            const original = this._defaultColumnWidths.get(def.id);
+            if (original !== undefined) {
+                def.width = original;
+            }
+            def.userResized = false;
+        }
         for (const [id, width] of Object.entries(layout.sizing)) {
             const def = byId.get(id);
             if (def) {

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

@@ -1,4 +1,17 @@
 import type { CreateDatatableViewRequest, DatatableView, UpdateDatatableViewRequest } from './DatatableView.js';
+/**
+ * One entry in the user-picker roster returned by
+ * `RemoteTableLayoutAdapter.listUsers`. The opaque `id` is the same token
+ * space as `DatatableView.ownerUserId` / `DatatableViewSubscriber.userId`
+ * (so it can be passed straight to `addSubscriber` / `removeSubscriber`);
+ * `displayName` is a host-provided human label scoria renders verbatim.
+ */
+export interface DatatableViewUser {
+    /** Opaque user identifier (same token space as `ownerUserId`). */
+    id: string;
+    /** Human-readable label shown in the share modal's user picker. */
+    displayName: string;
+}
 /**
  * Injected backend adapter for saved datatable layouts and filters.
  *
@@ -44,4 +57,15 @@ export interface RemoteTableLayoutAdapter {
     addSubscriber(viewId: string, userId: string): Promise<void>;
     /** Remove a subscriber. */
     removeSubscriber(viewId: string, userId: string): Promise<void>;
+    /**
+     * Roster of users the current user could share a view with. Used by
+     * the Table Configuration modal's Share dialog to populate the user
+     * picker. The implementation decides who is "available" (typically
+     * everyone the current user can see); scoria treats the result as an
+     * opaque list. A backend "not found" / empty list is returned as an
+     * empty array - implementations must never return `null`.
+     *
+     * Added in the FPM 403 round-4 share flow.
+     */
+    listUsers(): Promise<ReadonlyArray<DatatableViewUser>>;
 }

package/dist/index.d.ts

@@ -54,6 +54,8 @@ export type { HorizontalTabGroupProps } from './Components/HorizontalTabGroupPro
 export { default as Icon } from './Components/Icon.svelte';
 export { type IconProps } from './Components/IconProps.js';
 export { icons } from './Components/Icons.js';
+export { default as InfoAlert } from './Components/InfoAlert.svelte';
+export type { InfoAlertProps } from './Components/InfoAlertProps.js';
 export type { InputProps } from './Components/InputProps.js';
 export { default as LoadingAnimation } from './Components/LoadingAnimation.svelte';
 export type { LoadingAnimationProps } from './Components/LoadingAnimationProps.js';
@@ -113,7 +115,7 @@ export { type JSONTableFilter, TABLE_FILTER_SCHEMA_VERSION, isJSONTableFilter, }
 export { type DatatableViewKind } from './Components/Table/Types/Persistence/DatatableViewKind.js';
 export { type DatatableViewBody } from './Components/Table/Types/Persistence/DatatableViewEnvelope.js';
 export type { CreateDatatableViewRequest, DatatableView, DatatableViewSubscriber, DatatableViewSubscription, UpdateDatatableViewRequest, } from './Components/Table/Types/Persistence/DatatableView.js';
-export { type RemoteTableLayoutAdapter } from './Components/Table/Types/Persistence/RemoteTableLayoutAdapter.js';
+export { type RemoteTableLayoutAdapter, type DatatableViewUser, } from './Components/Table/Types/Persistence/RemoteTableLayoutAdapter.js';
 export { type ActiveViewRef, type JSONActiveView, TABLE_ACTIVE_VIEW_SCHEMA_VERSION, isJSONActiveView, } from './Components/Table/Types/Persistence/JSONActiveView.js';
 export { type ValidationFn } from './Components/Table/Types/Columns/Definitions/ValidationFn.js';
 export { type TableSettings } from './Components/Table/Types/Context/TableSettings.js';

package/dist/index.js

@@ -35,6 +35,7 @@ export { default as HorizontalTabGroup } from './Components/HorizontalTabGroup.s
 export { default as Icon } from './Components/Icon.svelte';
 export {} from './Components/IconProps.js';
 export { icons } from './Components/Icons.js';
+export { default as InfoAlert } from './Components/InfoAlert.svelte';
 export { default as LoadingAnimation } from './Components/LoadingAnimation.svelte';
 export { default as LoadingModal } from './Components/LoadingModal.svelte';
 export { default as LoadingOverlay } from './Components/LoadingOverlay.svelte';

package/package.json

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