@lavalogic/scoria 0.39.2 → 0.40.0

package/dist/Components/Base/BaseModal.svelte

@@ -1,127 +1,127 @@
-<svelte:options runes />
-
-<!--
-	BaseModal.svelte - internal primitive that owns the `<dialog>`
-	open/close + Escape/backdrop dismissal + autofocus plumbing
-	shared between `Modal`, `DesktopModal`, and `TouchModal`. See
-	`BaseModalProps.ts` for the contract.
-
-	Cosmetic-free for inner content by design: each consumer renders
-	its own header / main / footer / button-row markup as
-	`{@render children()}`. The consumer also keeps its own
-	footer-text rules, scanner shortcut wiring, colourSet button
-	styling, etc. - those concerns intentionally do not live in
-	BaseModal.
-
-	The shared dialog SHELL styling (border, backdrop, zoom-in
-	animation, the `--dialog-*` size variables and the static-height
-	/ static-width / noscroll modifier classes) is included here via
-	the `@mixin dialog` SCSS so it is shared across all three
-	consumer modals.
--->
-
-<script lang="ts">
-	import { devCatch } from '../../Helpers/Helpers.svelte.js';
-	import { onMount, tick } from 'svelte';
-	import type { BaseModalProps } from './BaseModalProps.js';
-
-	let {
-		value = $bindable(true),
-		children,
-		onclose,
-		mandatory = false,
-		autofocusSelector,
-		ariaLabelledby,
-		ariaDescribedby,
-		closeOnEscape = true,
-		closeOnBackdropClick = true,
-		dialogClass,
-		dialogStyle,
-	}: BaseModalProps = $props();
-
-	let dialog: HTMLDialogElement | undefined = $state();
-
-	function tryFocusSelector() {
-		if (dialog && autofocusSelector != null && autofocusSelector.length > 0) {
-			const target = dialog.querySelector<HTMLElement>(autofocusSelector);
-			target?.focus();
-		}
-	}
-
-	onMount(() => {
-		// HACK tick() helps with Portal shenanigans. Matches the legacy
-		// Modal.svelte open-on-mount sequence.
-		tick()
-			.then(() => {
-				if (dialog && value && !dialog.open) {
-					dialog.showModal();
-					tryFocusSelector();
-				}
-			})
-			.catch(devCatch);
-	});
-
-	// React to parent flipping `value` after mount. We do not call
-	// showModal/close from inside a $derived because both have
-	// side-effects on the DOM; an $effect is the documented home
-	// for such bridges.
-	$effect(() => {
-		if (!dialog) {
-			return;
-		}
-		if (value && !dialog.open) {
-			dialog.showModal();
-			tryFocusSelector();
-		} else if (!value && dialog.open) {
-			dialog.close();
-		}
-	});
-
-	function handleNativeClose() {
-		// The dialog closed (native dismiss, our own close(), or Escape).
-		// Sync `value` back to false and fire the consumer callback.
-		if (value) {
-			value = false;
-		}
-		onclose?.();
-	}
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			// stopPropagation matches the legacy Modal.svelte behaviour
-			// (prevents Escape bubbling out of a nested modal stack).
-			e.stopPropagation();
-			if (mandatory || !closeOnEscape) {
-				e.preventDefault();
-			}
-			// otherwise let the browser-native Escape close the dialog,
-			// which fires the `close` event and `handleNativeClose`.
-		}
-	}
-
-	function handleBackdropClick(e: MouseEvent) {
-		if (e.target === dialog) {
-			if (!mandatory && closeOnBackdropClick) {
-				dialog.close();
-			}
-		}
-	}
-</script>
-
-<dialog
-	bind:this={dialog}
-	class={dialogClass}
-	style={dialogStyle}
-	aria-modal="true"
-	aria-labelledby={ariaLabelledby}
-	aria-describedby={ariaDescribedby}
-	onclose={handleNativeClose}
-	onkeydown={handleKeydown}
-	onclick={handleBackdropClick}
->
-	{@render children()}
-</dialog>
-
+<svelte:options runes />
+
+<!--
+	BaseModal.svelte - internal primitive that owns the `<dialog>`
+	open/close + Escape/backdrop dismissal + autofocus plumbing
+	shared between `Modal`, `DesktopModal`, and `TouchModal`. See
+	`BaseModalProps.ts` for the contract.
+
+	Cosmetic-free for inner content by design: each consumer renders
+	its own header / main / footer / button-row markup as
+	`{@render children()}`. The consumer also keeps its own
+	footer-text rules, scanner shortcut wiring, colourSet button
+	styling, etc. - those concerns intentionally do not live in
+	BaseModal.
+
+	The shared dialog SHELL styling (border, backdrop, zoom-in
+	animation, the `--dialog-*` size variables and the static-height
+	/ static-width / noscroll modifier classes) is included here via
+	the `@mixin dialog` SCSS so it is shared across all three
+	consumer modals.
+-->
+
+<script lang="ts">
+	import { devCatch } from '../../Helpers/Helpers.svelte.js';
+	import { onMount, tick } from 'svelte';
+	import type { BaseModalProps } from './BaseModalProps.js';
+
+	let {
+		value = $bindable(true),
+		children,
+		onclose,
+		mandatory = false,
+		autofocusSelector,
+		ariaLabelledby,
+		ariaDescribedby,
+		closeOnEscape = true,
+		closeOnBackdropClick = true,
+		dialogClass,
+		dialogStyle,
+	}: BaseModalProps = $props();
+
+	let dialog: HTMLDialogElement | undefined = $state();
+
+	function tryFocusSelector() {
+		if (dialog && autofocusSelector != null && autofocusSelector.length > 0) {
+			const target = dialog.querySelector<HTMLElement>(autofocusSelector);
+			target?.focus();
+		}
+	}
+
+	onMount(() => {
+		// HACK tick() helps with Portal shenanigans. Matches the legacy
+		// Modal.svelte open-on-mount sequence.
+		tick()
+			.then(() => {
+				if (dialog && value && !dialog.open) {
+					dialog.showModal();
+					tryFocusSelector();
+				}
+			})
+			.catch(devCatch);
+	});
+
+	// React to parent flipping `value` after mount. We do not call
+	// showModal/close from inside a $derived because both have
+	// side-effects on the DOM; an $effect is the documented home
+	// for such bridges.
+	$effect(() => {
+		if (!dialog) {
+			return;
+		}
+		if (value && !dialog.open) {
+			dialog.showModal();
+			tryFocusSelector();
+		} else if (!value && dialog.open) {
+			dialog.close();
+		}
+	});
+
+	function handleNativeClose() {
+		// The dialog closed (native dismiss, our own close(), or Escape).
+		// Sync `value` back to false and fire the consumer callback.
+		if (value) {
+			value = false;
+		}
+		onclose?.();
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			// stopPropagation matches the legacy Modal.svelte behaviour
+			// (prevents Escape bubbling out of a nested modal stack).
+			e.stopPropagation();
+			if (mandatory || !closeOnEscape) {
+				e.preventDefault();
+			}
+			// otherwise let the browser-native Escape close the dialog,
+			// which fires the `close` event and `handleNativeClose`.
+		}
+	}
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (e.target === dialog) {
+			if (!mandatory && closeOnBackdropClick) {
+				dialog.close();
+			}
+		}
+	}
+</script>
+
+<dialog
+	bind:this={dialog}
+	class={dialogClass}
+	style={dialogStyle}
+	aria-modal="true"
+	aria-labelledby={ariaLabelledby}
+	aria-describedby={ariaDescribedby}
+	onclose={handleNativeClose}
+	onkeydown={handleKeydown}
+	onclick={handleBackdropClick}
+>
+	{@render children()}
+</dialog>
+
 <style>dialog {
   overflow: clip;
   background-color: #e9ecf1;
@@ -175,4 +175,4 @@ dialog .modal-main.noscroll {
 }
 dialog .footer {
   flex-shrink: 0;
-}</style>
+}</style>

package/dist/Components/Base/ContextWrapper.svelte

@@ -1,72 +1,72 @@
-<svelte:options runes />
-
-<!--
-@component
-Application-level wrapper that mounts the global context hosts and
-instantiates the contexts they depend on. Mount it once near the root
-of a SvelteKit app, in `+layout.svelte` or `+page.svelte`, so that
-every descendant can read the contexts via `getContext`.
-
-### Hosts mounted
-
-| Host             | Driving context        | Notes                                              |
-| ---------------- | ---------------------- | -------------------------------------------------- |
-| `ContextMenu`    | `ContextMenuContext`   | Right-click / programmatic menus.                  |
-| `Tooltip`        | `TooltipContext`       | Hover tooltips driven by Button / Action.          |
-| `ToastContainer` | `ToastContext`         | Queue of toast notifications.                      |
-| `AlertModal`     | `AlertContext`         | Mounts only when `alertContext.showModal` is true. |
-
-`UntypedInputContext` is registered alongside the visual hosts. The
-wrapper installs a `svelte:window onkeydown` listener that forwards
-key events to `untypedListenerContext.handleGlobalKeydown` so barcode
-scanners and similar untyped input sources reach the context queue.
-
-### Usage
-
-```svelte
-<script lang="ts">
-	import { ContextWrapper } from '@lavalogic/scoria';
-</script>
-
-<ContextWrapper>
-	{@render children()}
-</ContextWrapper>
-```
--->
-<script lang="ts">
-	import { AlertContext } from '../../Contexts/AlertContext.svelte.js';
-	import { ContextMenuContext } from '../../Contexts/ContextMenuContext.svelte.js';
-	import { ToastContext } from '../../Contexts/ToastContext.svelte.js';
-	import { TooltipContext } from '../../Contexts/TooltipContext.svelte.js';
-	import { UntypedInputContext } from '../../Contexts/UntypedInputContext.svelte.js';
-	import { setContext } from 'svelte';
-	import AlertModal from '../AlertModal.svelte';
-	import ContextMenu from '../Contexts/ContextMenu.svelte';
-	import ToastContainer from '../Contexts/ToastContainer.svelte';
-	import Tooltip from '../Contexts/Tooltip.svelte';
-	import type { ContextWrapperProps } from './ContextWrapperProps.js';
-
-	const { children, debug = false }: ContextWrapperProps = $props();
-
-	setContext(ContextMenuContext.identifier, new ContextMenuContext());
-	setContext(TooltipContext.identifier, new TooltipContext());
-	setContext(ToastContext.identifier, new ToastContext());
-	const alertContext = new AlertContext();
-	setContext(AlertContext.identifier, alertContext);
-
-	// NOTE known limitation. `debug` is captured at construction time;
-	// later prop changes are not propagated to the listener because the
-	// keydown handler closes over the constructed context instance.
-	// svelte-ignore state_referenced_locally
-	const untypedListenerContext = new UntypedInputContext(debug);
-	setContext(UntypedInputContext.identifier, untypedListenerContext);
-</script>
-
-<ContextMenu />
-<Tooltip />
-<ToastContainer />
-{#if alertContext.showModal}
-	<AlertModal />
-{/if}
-<svelte:window onkeydown={untypedListenerContext.handleGlobalKeydown} />
-{@render children()}
+<svelte:options runes />
+
+<!--
+@component
+Application-level wrapper that mounts the global context hosts and
+instantiates the contexts they depend on. Mount it once near the root
+of a SvelteKit app, in `+layout.svelte` or `+page.svelte`, so that
+every descendant can read the contexts via `getContext`.
+
+### Hosts mounted
+
+| Host             | Driving context        | Notes                                              |
+| ---------------- | ---------------------- | -------------------------------------------------- |
+| `ContextMenu`    | `ContextMenuContext`   | Right-click / programmatic menus.                  |
+| `Tooltip`        | `TooltipContext`       | Hover tooltips driven by Button / Action.          |
+| `ToastContainer` | `ToastContext`         | Queue of toast notifications.                      |
+| `AlertModal`     | `AlertContext`         | Mounts only when `alertContext.showModal` is true. |
+
+`UntypedInputContext` is registered alongside the visual hosts. The
+wrapper installs a `svelte:window onkeydown` listener that forwards
+key events to `untypedListenerContext.handleGlobalKeydown` so barcode
+scanners and similar untyped input sources reach the context queue.
+
+### Usage
+
+```svelte
+<script lang="ts">
+	import { ContextWrapper } from '@lavalogic/scoria';
+</script>
+
+<ContextWrapper>
+	{@render children()}
+</ContextWrapper>
+```
+-->
+<script lang="ts">
+	import { AlertContext } from '../../Contexts/AlertContext.svelte.js';
+	import { ContextMenuContext } from '../../Contexts/ContextMenuContext.svelte.js';
+	import { ToastContext } from '../../Contexts/ToastContext.svelte.js';
+	import { TooltipContext } from '../../Contexts/TooltipContext.svelte.js';
+	import { UntypedInputContext } from '../../Contexts/UntypedInputContext.svelte.js';
+	import { setContext } from 'svelte';
+	import AlertModal from '../AlertModal.svelte';
+	import ContextMenu from '../Contexts/ContextMenu.svelte';
+	import ToastContainer from '../Contexts/ToastContainer.svelte';
+	import Tooltip from '../Contexts/Tooltip.svelte';
+	import type { ContextWrapperProps } from './ContextWrapperProps.js';
+
+	const { children, debug = false }: ContextWrapperProps = $props();
+
+	setContext(ContextMenuContext.identifier, new ContextMenuContext());
+	setContext(TooltipContext.identifier, new TooltipContext());
+	setContext(ToastContext.identifier, new ToastContext());
+	const alertContext = new AlertContext();
+	setContext(AlertContext.identifier, alertContext);
+
+	// NOTE known limitation. `debug` is captured at construction time;
+	// later prop changes are not propagated to the listener because the
+	// keydown handler closes over the constructed context instance.
+	// svelte-ignore state_referenced_locally
+	const untypedListenerContext = new UntypedInputContext(debug);
+	setContext(UntypedInputContext.identifier, untypedListenerContext);
+</script>
+
+<ContextMenu />
+<Tooltip />
+<ToastContainer />
+{#if alertContext.showModal}
+	<AlertModal />
+{/if}
+<svelte:window onkeydown={untypedListenerContext.handleGlobalKeydown} />
+{@render children()}