@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/Contexts/ToastContainer.svelte

@@ -1,67 +1,63 @@
-<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);
+<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.identifier);
+function copyDataToClipboard(text) {
+	// `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.Info,
-			message: 'Message copied to clipboard',
-			copyable: false,
+			result: Validity.Invalid,
+			message: "Cannot Copy in an Insecure Connection",
+			copyable: false
 		});
+		return;
 	}
-</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>
-
+	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 +69,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,38 @@
-<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.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;
@@ -123,4 +122,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,101 @@
-<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;
+<svelte:options runes />
+
+<script lang="ts">import { passthrough } from "../Helpers/Helpers.svelte.js";
+import Icon from "./Icon.svelte";
+const { icon, interactive = false, title, oncontextmenu, ariaLabel = "Edit Barcode Value" } = $props();
+let svgContainer = $state(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 = 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) {
+	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);
 			}
-			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.
+	});
+}
+$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(local);
-			lastSvg = source;
+			svgContainer.replaceChildren();
+			lastSvg = undefined;
 		}
-	});
-</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}
-
+		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);
+		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 +105,4 @@ div.fit {
   background-color: #ffffff;
   display: flex;
   padding: 0.5rem;
-}</style>
+}</style>