@lavalogic/scoria 0.39.2 → 0.40.0

package/dist/Components/Contexts/ToastContainer.svelte

@@ -1,67 +1,67 @@
-<svelte:options runes />
-
-<!--
-@component
-Live region for the {@link ToastContext}. Iterates the context's
-queue and renders one `Toast` per message, providing the
-copy-to-clipboard callback (the container owns the clipboard logic
-because the toast itself only knows the message it should copy).
-
-The wrapping `<section>` carries `role="region"` plus
-`aria-live="polite"` so multiple toast appearances are announced as
-a single rolling region without interrupting the user; individual
-`Toast` elements override `aria-live` to `assertive` for hard errors.
-
-Mounted once at the app root by `ContextWrapper`; consumers should
-not render this directly.
--->
-<script lang="ts">
-	import { ToastContext } from '../../Contexts/ToastContext.svelte.js';
-	import { devCatch } from '../../Helpers/Helpers.svelte.js';
-	import { Validity } from '../../Types/Internal/Validity.js';
-	import { getContext } from 'svelte';
-	import Toast from './Toast.svelte';
-
-	const toastContext = getContext<ToastContext>(ToastContext.identifier);
-
-	function copyDataToClipboard(text: string): void {
-		// `navigator.clipboard` is `undefined` on insecure (HTTP)
-		// origins and in some embedded WebViews. The compile-time
-		// type says it is always defined, hence the eslint disable;
-		// the runtime check is the load-bearing one.
-		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-		if (!navigator.clipboard) {
-			toastContext.toast({
-				result: Validity.Invalid,
-				message: 'Cannot Copy in an Insecure Connection',
-				copyable: false,
-			});
-			return;
-		}
-
-		navigator.clipboard.writeText(text).catch(devCatch);
-		toastContext.toast({
-			result: Validity.Info,
-			message: 'Message copied to clipboard',
-			copyable: false,
-		});
-	}
-</script>
-
-<section
-	aria-live="polite"
-	aria-label="Notifications"
->
-	{#each toastContext.toasts as toast (toast.id)}
-		<Toast
-			{toast}
-			copy={() => {
-				copyDataToClipboard(toast.getVerbose?.() ?? toast.message);
-			}}
-		/>
-	{/each}
-</section>
-
+<svelte:options runes />
+
+<!--
+@component
+Live region for the {@link ToastContext}. Iterates the context's
+queue and renders one `Toast` per message, providing the
+copy-to-clipboard callback (the container owns the clipboard logic
+because the toast itself only knows the message it should copy).
+
+The wrapping `<section>` carries `role="region"` plus
+`aria-live="polite"` so multiple toast appearances are announced as
+a single rolling region without interrupting the user; individual
+`Toast` elements override `aria-live` to `assertive` for hard errors.
+
+Mounted once at the app root by `ContextWrapper`; consumers should
+not render this directly.
+-->
+<script lang="ts">
+	import { ToastContext } from '../../Contexts/ToastContext.svelte.js';
+	import { devCatch } from '../../Helpers/Helpers.svelte.js';
+	import { Validity } from '../../Types/Internal/Validity.js';
+	import { getContext } from 'svelte';
+	import Toast from './Toast.svelte';
+
+	const toastContext = getContext<ToastContext>(ToastContext.identifier);
+
+	function copyDataToClipboard(text: string): void {
+		// `navigator.clipboard` is `undefined` on insecure (HTTP)
+		// origins and in some embedded WebViews. The compile-time
+		// type says it is always defined, hence the eslint disable;
+		// the runtime check is the load-bearing one.
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+		if (!navigator.clipboard) {
+			toastContext.toast({
+				result: Validity.Invalid,
+				message: 'Cannot Copy in an Insecure Connection',
+				copyable: false,
+			});
+			return;
+		}
+
+		navigator.clipboard.writeText(text).catch(devCatch);
+		toastContext.toast({
+			result: Validity.Info,
+			message: 'Message copied to clipboard',
+			copyable: false,
+		});
+	}
+</script>
+
+<section
+	aria-live="polite"
+	aria-label="Notifications"
+>
+	{#each toastContext.toasts as toast (toast.id)}
+		<Toast
+			{toast}
+			copy={() => {
+				copyDataToClipboard(toast.getVerbose?.() ?? toast.message);
+			}}
+		/>
+	{/each}
+</section>
+
 <style>section {
   user-select: none;
   gap: 0.5rem;
@@ -73,4 +73,4 @@ not render this directly.
   justify-content: flex-end;
   align-items: flex-end;
   z-index: 99999;
-}</style>
+}</style>

package/dist/Components/Contexts/Tooltip.svelte

@@ -1,39 +1,39 @@
-<svelte:options runes />
-
-<!--
-@component
-Visual host for `TooltipContext`. Renders a fixed-position tooltip at
-the coordinates the context exposes, with a CSS arrow that points
-back toward the anchored element on the configured side.
-
-The tooltip just appears and disappears; no transition is applied,
-which is the conservative choice for `prefers-reduced-motion`. Reads
-the context with `getContext` and relies on `ContextWrapper` to have
-set it up at the app root.
--->
-<script lang="ts">
-	import { TooltipContext } from '../../Contexts/TooltipContext.svelte.js';
-	import { Side } from '../../Types/Internal/Side.js';
-	import { getContext } from 'svelte';
-	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
-</script>
-
-{#if tooltipContext.isShowingTooltip}
-	<div
-		role="tooltip"
-		style="--y: {tooltipContext.y}px; --x: {tooltipContext.x}px;"
-		class="tooltip-wrapper"
-		class:top-arrow={tooltipContext.anchor === Side.Top}
-		class:bottom-arrow={tooltipContext.anchor === Side.Bottom}
-		class:left-arrow={tooltipContext.anchor === Side.Left}
-		class:right-arrow={tooltipContext.anchor === Side.Right}
-	>
-		<div class="tooltip">
-			{tooltipContext.text}
-		</div>
-	</div>
-{/if}
-
+<svelte:options runes />
+
+<!--
+@component
+Visual host for `TooltipContext`. Renders a fixed-position tooltip at
+the coordinates the context exposes, with a CSS arrow that points
+back toward the anchored element on the configured side.
+
+The tooltip just appears and disappears; no transition is applied,
+which is the conservative choice for `prefers-reduced-motion`. Reads
+the context with `getContext` and relies on `ContextWrapper` to have
+set it up at the app root.
+-->
+<script lang="ts">
+	import { TooltipContext } from '../../Contexts/TooltipContext.svelte.js';
+	import { Side } from '../../Types/Internal/Side.js';
+	import { getContext } from 'svelte';
+	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
+</script>
+
+{#if tooltipContext.isShowingTooltip}
+	<div
+		role="tooltip"
+		style="--y: {tooltipContext.y}px; --x: {tooltipContext.x}px;"
+		class="tooltip-wrapper"
+		class:top-arrow={tooltipContext.anchor === Side.Top}
+		class:bottom-arrow={tooltipContext.anchor === Side.Bottom}
+		class:left-arrow={tooltipContext.anchor === Side.Left}
+		class:right-arrow={tooltipContext.anchor === Side.Right}
+	>
+		<div class="tooltip">
+			{tooltipContext.text}
+		</div>
+	</div>
+{/if}
+
 <style>.tooltip-wrapper {
   position: fixed;
   z-index: 99999;
@@ -121,4 +121,4 @@ set it up at the app root.
   transform: rotate(45deg);
   background-color: #3a4952;
   border: solid 2px #dae0e5;
-}</style>
+}</style>

package/dist/Components/DataMatrixIcon.svelte

@@ -1,114 +1,114 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { passthrough } from '../Helpers/Helpers.svelte.js';
-	import type { DataMatrixIconProps } from './DataMatrixIconProps.js';
-	import Icon from './Icon.svelte';
-
-	const {
-		icon,
-		interactive = false,
-		title,
-		oncontextmenu,
-		ariaLabel = 'Edit Barcode Value',
-	}: DataMatrixIconProps = $props();
-
-	let svgContainer = $state<HTMLDivElement | null>(null);
-
-	// Track the last SVG we mounted so the effect only re-runs when the
-	// underlying SVG identity changes. Repeated parent renders that hand
-	// back the same node should NOT force a DOM replacement; each replace
-	// forces layout, which becomes expensive with many barcodes on a screen.
-	let lastSvg: SVGSVGElement | undefined = undefined;
-
-	/**
-	 * Defensively sanitise the SVG before mounting it.
-	 *
-	 * SECURITY: although the prop is branded `DataMatrixSvg` to discourage
-	 * arbitrary callers, the brand is type-only. As defence in depth we
-	 * strip `<script>` nodes plus any `on*` / `href` / `xlink:href`
-	 * attributes from the cloned tree before it enters the document. This
-	 * neutralises stored-XSS sinks (`<script>`, `<image href="javascript:...">`,
-	 * inline event handlers) without depending on caller discipline.
-	 */
-	function sanitiseSvg(node: SVGSVGElement): void {
-		node.querySelectorAll('script').forEach((s) => {
-			s.remove();
-		});
-		node.querySelectorAll('*').forEach((el) => {
-			for (const attr of [...el.attributes]) {
-				const lower = attr.name.toLowerCase();
-				if (lower.startsWith('on') || lower === 'href' || lower === 'xlink:href') {
-					el.removeAttribute(attr.name);
-				}
-			}
-		});
-	}
-
-	$effect(() => {
-		if (icon.kind !== 'svg') {
-			// icon-props branch renders an <Icon> below; nothing for the
-			// SVG mount effect to do, and we clear the stale mount so a
-			// later toggle back to kind: 'svg' re-mounts correctly.
-			if (svgContainer != null && lastSvg !== undefined) {
-				// Mirror of the mount path below; `replaceChildren()` is the
-				// cheapest way to detach the previously cloned SVG.
-				// eslint-disable-next-line svelte/no-dom-manipulating
-				svgContainer.replaceChildren();
-				lastSvg = undefined;
-			}
-			return;
-		}
-		const source = icon.svg;
-		if (svgContainer != null && source !== lastSvg) {
-			// Clone so we never mutate the consumer-supplied node. If the
-			// same SVG is rendered into multiple DataMatrixIcon instances or
-			// reused elsewhere the original keeps its original attributes.
-			const local = source.cloneNode(true) as SVGSVGElement;
-			sanitiseSvg(local);
-			local.setAttribute('width', '64');
-			local.setAttribute('height', '64');
-			// `replaceChildren` is cheaper than `innerHTML = ''` + `appendChild`:
-			// it skips the HTML parse step and only touches the child list.
-			// eslint-disable-next-line svelte/no-dom-manipulating
-			svgContainer.replaceChildren(local);
-			lastSvg = source;
-		}
-	});
-</script>
-
-{#if interactive}
-	<button
-		aria-label={ariaLabel}
-		onkeydown={passthrough}
-		title="Right click to edit barcode value for the {title} command"
-		oncontextmenu={(e) => {
-			if (oncontextmenu) {
-				e.preventDefault();
-				oncontextmenu(e);
-			}
-		}}
-	>
-		<div
-			class="fit"
-			bind:this={svgContainer}
-		>
-			{#if icon.kind === 'icon-props'}
-				<Icon {...icon.iconProps} />
-			{/if}
-		</div>
-	</button>
-{:else}
-	<div
-		class="fit"
-		bind:this={svgContainer}
-	>
-		{#if icon.kind === 'icon-props'}
-			<Icon {...icon.iconProps} />
-		{/if}
-	</div>
-{/if}
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { passthrough } from '../Helpers/Helpers.svelte.js';
+	import type { DataMatrixIconProps } from './DataMatrixIconProps.js';
+	import Icon from './Icon.svelte';
+
+	const {
+		icon,
+		interactive = false,
+		title,
+		oncontextmenu,
+		ariaLabel = 'Edit Barcode Value',
+	}: DataMatrixIconProps = $props();
+
+	let svgContainer = $state<HTMLDivElement | null>(null);
+
+	// Track the last SVG we mounted so the effect only re-runs when the
+	// underlying SVG identity changes. Repeated parent renders that hand
+	// back the same node should NOT force a DOM replacement; each replace
+	// forces layout, which becomes expensive with many barcodes on a screen.
+	let lastSvg: SVGSVGElement | undefined = undefined;
+
+	/**
+	 * Defensively sanitise the SVG before mounting it.
+	 *
+	 * SECURITY: although the prop is branded `DataMatrixSvg` to discourage
+	 * arbitrary callers, the brand is type-only. As defence in depth we
+	 * strip `<script>` nodes plus any `on*` / `href` / `xlink:href`
+	 * attributes from the cloned tree before it enters the document. This
+	 * neutralises stored-XSS sinks (`<script>`, `<image href="javascript:...">`,
+	 * inline event handlers) without depending on caller discipline.
+	 */
+	function sanitiseSvg(node: SVGSVGElement): void {
+		node.querySelectorAll('script').forEach((s) => {
+			s.remove();
+		});
+		node.querySelectorAll('*').forEach((el) => {
+			for (const attr of [...el.attributes]) {
+				const lower = attr.name.toLowerCase();
+				if (lower.startsWith('on') || lower === 'href' || lower === 'xlink:href') {
+					el.removeAttribute(attr.name);
+				}
+			}
+		});
+	}
+
+	$effect(() => {
+		if (icon.kind !== 'svg') {
+			// icon-props branch renders an <Icon> below; nothing for the
+			// SVG mount effect to do, and we clear the stale mount so a
+			// later toggle back to kind: 'svg' re-mounts correctly.
+			if (svgContainer != null && lastSvg !== undefined) {
+				// Mirror of the mount path below; `replaceChildren()` is the
+				// cheapest way to detach the previously cloned SVG.
+				// eslint-disable-next-line svelte/no-dom-manipulating
+				svgContainer.replaceChildren();
+				lastSvg = undefined;
+			}
+			return;
+		}
+		const source = icon.svg;
+		if (svgContainer != null && source !== lastSvg) {
+			// Clone so we never mutate the consumer-supplied node. If the
+			// same SVG is rendered into multiple DataMatrixIcon instances or
+			// reused elsewhere the original keeps its original attributes.
+			const local = source.cloneNode(true) as SVGSVGElement;
+			sanitiseSvg(local);
+			local.setAttribute('width', '64');
+			local.setAttribute('height', '64');
+			// `replaceChildren` is cheaper than `innerHTML = ''` + `appendChild`:
+			// it skips the HTML parse step and only touches the child list.
+			// eslint-disable-next-line svelte/no-dom-manipulating
+			svgContainer.replaceChildren(local);
+			lastSvg = source;
+		}
+	});
+</script>
+
+{#if interactive}
+	<button
+		aria-label={ariaLabel}
+		onkeydown={passthrough}
+		title="Right click to edit barcode value for the {title} command"
+		oncontextmenu={(e) => {
+			if (oncontextmenu) {
+				e.preventDefault();
+				oncontextmenu(e);
+			}
+		}}
+	>
+		<div
+			class="fit"
+			bind:this={svgContainer}
+		>
+			{#if icon.kind === 'icon-props'}
+				<Icon {...icon.iconProps} />
+			{/if}
+		</div>
+	</button>
+{:else}
+	<div
+		class="fit"
+		bind:this={svgContainer}
+	>
+		{#if icon.kind === 'icon-props'}
+			<Icon {...icon.iconProps} />
+		{/if}
+	</div>
+{/if}
+
 <style>button {
   display: contents;
   cursor: pointer;
@@ -118,4 +118,4 @@ div.fit {
   background-color: #ffffff;
   display: flex;
   padding: 0.5rem;
-}</style>
+}</style>