@lavalogic/scoria 0.39.2 → 0.40.0

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

@@ -1,293 +1,293 @@
-<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>
-
+<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;
@@ -370,4 +370,4 @@
   border-radius: 999px;
   background-color: #e9ecf1;
   color: #3a4952;
-}</style>
+}</style>

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

@@ -1,37 +1,37 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import { quintOut } from 'svelte/easing';
-	import { slide } from 'svelte/transition';
-	import { Delay } from '../../../Delay/Delay.js';
-	import { usePrefersReducedMotion } from '../../../Helpers/prefersReducedMotion.svelte.js';
-	import { ToolbarPosition } from '../Types/Toolbar/ToolbarPosition.js';
-	import type { SidePanelProps } from './SidePanelProps.js';
-</script>
-
-<script lang="ts">
-	const { toolbarPosition, onkeydown, ariaLabel, children }: SidePanelProps = $props();
-	const reducedMotion = usePrefersReducedMotion();
-	const slideDuration = $derived(reducedMotion.matches ? 0 : Delay.Default);
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class="side-panel"
-	class:left={toolbarPosition === ToolbarPosition.Left}
-	class:right={toolbarPosition === ToolbarPosition.Right}
-	aria-label={ariaLabel}
-	{onkeydown}
-	transition:slide={{ duration: slideDuration, easing: quintOut, axis: 'x' }}
->
-	<div class="side-content">
-		{#if children}{@render children()}{/if}
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import { quintOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import { Delay } from '../../../Delay/Delay.js';
+	import { usePrefersReducedMotion } from '../../../Helpers/prefersReducedMotion.svelte.js';
+	import { ToolbarPosition } from '../Types/Toolbar/ToolbarPosition.js';
+	import type { SidePanelProps } from './SidePanelProps.js';
+</script>
+
+<script lang="ts">
+	const { toolbarPosition, onkeydown, ariaLabel, children }: SidePanelProps = $props();
+	const reducedMotion = usePrefersReducedMotion();
+	const slideDuration = $derived(reducedMotion.matches ? 0 : Delay.Default);
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="side-panel"
+	class:left={toolbarPosition === ToolbarPosition.Left}
+	class:right={toolbarPosition === ToolbarPosition.Right}
+	aria-label={ariaLabel}
+	{onkeydown}
+	transition:slide={{ duration: slideDuration, easing: quintOut, axis: 'x' }}
+>
+	<div class="side-content">
+		{#if children}{@render children()}{/if}
+	</div>
+</div>
+
 <style>.side-panel {
   display: flex;
   flex-shrink: 0;
@@ -51,4 +51,4 @@
   flex-flow: column nowrap;
   flex: 1;
   width: 400px;
-}</style>
+}</style>