@lavalogic/scoria 0.40.13 → 0.40.15

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

@@ -1,293 +1,264 @@
-<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) {
+<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";
+const { view, onclose, onsaved } = $props();
+const tableContext = getContext(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(null);
+// User-visible error banner. Adapter rejections are routed here so the
+// modal never throws into the host UI.
+let errorMessage = $state(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([]);
+/**
+* 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 = 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;
 		}
-		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;
-			});
+	}
+	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) => {
+		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);
+});
+/** Remove a user from the current selection. */
+function removeFromSelection(userId) {
+	selected = selected.filter((s) => s.id !== userId);
+}
+/** Apply the picker selection by issuing the required deltas. */
+async function save() {
+	const adapter = tableContext.remoteLayouts;
+	if (!adapter) {
+		errorMessage = "Sharing is unavailable: no remote layouts adapter is configured.";
+		return;
 	}
-
-	/** 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 = [];
+	const toRemove = [];
+	// Added: in the new selection but not the original roster.
+	for (const id of currentIds) {
+		if (!initialIds.has(id)) {
+			toAdd.push(id);
 		}
-		if (!dirty) {
-			onclose();
-			return;
+	}
+	// Removed: in the original roster but not the new selection.
+	for (const id of initialIds) {
+		if (!currentIds.has(id)) {
+			toRemove.push(id);
 		}
-
-		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);
-			}
+	}
+	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);
 		}
-		// Removed: in the original roster but not the new selection.
-		for (const id of initialIds) {
-			if (!currentIds.has(id)) {
-				toRemove.push(id);
-			}
+		for (const userId of toRemove) {
+			await adapter.removeSubscriber(view.id, userId);
 		}
-
-		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;
+		if (onsaved) {
+			await onsaved();
 		}
+		onclose();
+	} catch (e) {
+		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>
-
+}
+</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 +341,4 @@
   border-radius: 999px;
   background-color: #e9ecf1;
   color: #3a4952;
-}</style>
+}</style>

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

@@ -1,37 +1,34 @@
-<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";
+</script>
+
+<script lang="ts">const { toolbarPosition, onkeydown, ariaLabel, children } = $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 +48,4 @@
   flex-flow: column nowrap;
   flex: 1;
   width: 400px;
-}</style>
+}</style>