@lavalogic/scoria 0.37.7 → 0.37.9

package/dist/Components/AlertModal.svelte

@@ -4,6 +4,7 @@
 	lang="ts"
 	module
 >
+	import { browser } from '$app/environment';
 	import { DATAMatrix } from '../Helpers/Datamatrix.js';
 
 	// Frozen const map of scanner shortcut codes recognised by AlertModal.
@@ -16,18 +17,17 @@
 	} as const);
 	type AlertShortcut = (typeof AlertShortcuts)[keyof typeof AlertShortcuts];
 
-	// Barcode icons are derived from literal constants. Build them once at
-	// module load so they are not re-encoded on every render.
+	// Barcode icons are encoded once at module load (rather than per
+	// component instance) so opening multiple alerts is cheap.
 	//
-	// `DATAMatrix` reaches for `document.createElement` internally, so we
-	// guard the calls against SSR module evaluation - the modal itself is
-	// `dialog.open === false` during SSR (no user-visible barcode rendered),
-	// and the client-side module re-evaluates with a real `document` so the
-	// icons get their proper SVG payload on the browser side.
-	const HAS_DOM = typeof document !== 'undefined';
-	const yesIcon = HAS_DOM ? DATAMatrix(AlertShortcuts.yes) : '';
-	const noIcon = HAS_DOM ? DATAMatrix(AlertShortcuts.no) : '';
-	const otherIcon = HAS_DOM ? DATAMatrix(AlertShortcuts.other) : '';
+	// `DATAMatrix` calls `document.createElement` internally, which does
+	// not exist during SvelteKit's server-render pass. The module loads
+	// in both environments; we gate the encoding on the `browser` flag so
+	// the server gets empty strings (the modal is hidden during SSR
+	// anyway) and the client gets the real SVGs after hydration.
+	const yesIcon = browser ? DATAMatrix(AlertShortcuts.yes) : '';
+	const noIcon = browser ? DATAMatrix(AlertShortcuts.no) : '';
+	const otherIcon = browser ? DATAMatrix(AlertShortcuts.other) : '';
 </script>
 
 <script lang="ts">

package/dist/Components/Modal.svelte

@@ -4,6 +4,7 @@
 	module
 	lang="ts"
 >
+	import { browser } from '$app/environment';
 	import { DATAMatrix } from '../Helpers/Datamatrix.js';
 	import { passthrough } from '../Helpers/Helpers.svelte.js';
 	import { ColourSet } from '../scss/colours.js';
@@ -53,8 +54,16 @@
 	// Pre-compute barcode SVGs once per `buttons` array. Building a DataMatrix
 	// barcode is non-trivial; rebuilding inside the each-block re-runs the
 	// encoder on every render.
+	//
+	// `DATAMatrix` calls `document.createElement` internally, which is
+	// undefined during SvelteKit's server render. Returning `null` on the
+	// server keeps the SVG slots empty for SSR; the client re-renders with
+	// the real encoded payload after hydration.
 	const barcodeIcons = $derived.by(
-		() => buttons?.map((b) => (b.barcodeValue != null ? DATAMatrix(b.barcodeValue) : null)) ?? []
+		() =>
+			buttons?.map((b) =>
+				b.barcodeValue != null && browser ? DATAMatrix(b.barcodeValue) : null
+			) ?? []
 	);
 
 	onMount(() => {

package/dist/Components/NumberInput.svelte

@@ -1,7 +1,7 @@
 <svelte:options runes />
 
 <script lang="ts">
-	import { cssLength, passthrough } from '../Helpers/Helpers.svelte.js';
+	import { cssLength } from '../Helpers/Helpers.svelte.js';
 	import { InputVariant } from '../Types/Internal/InputVariant.js';
 	import { Size } from '../Types/Internal/Size.js';
 	import Icon from './Icon.svelte';
@@ -28,7 +28,10 @@
 
 		onblur,
 		onfocus,
-		onkeydown = passthrough,
+		// No default `onkeydown` - see TextInput.svelte for the rationale.
+		// The legacy default (`passthrough`) blurred the input on every
+		// alphanumeric keystroke and made the field unusable.
+		onkeydown,
 		oninput,
 
 		inputRef = $bindable(),

package/dist/Components/PasswordInput.svelte

@@ -1,7 +1,7 @@
 <svelte:options runes />
 
 <script lang="ts">
-	import { cssLength, passthrough } from '../Helpers/Helpers.svelte.js';
+	import { cssLength } from '../Helpers/Helpers.svelte.js';
 	import { ColourSet } from '../scss/colours.js';
 	import { Size } from '../Types/Internal/Size.js';
 	import Action from './Action.svelte';
@@ -19,7 +19,10 @@
 		autocomplete = 'current-password',
 		onblur,
 		onfocus,
-		onkeydown = passthrough,
+		// No default `onkeydown` - see TextInput.svelte for the rationale.
+		// The legacy default (`passthrough`) blurred the input on every
+		// alphanumeric keystroke and made the field unusable.
+		onkeydown,
 	}: PasswordInputProps = $props();
 
 	function toggleVisibility(): void {

package/dist/Components/TextArea.svelte

@@ -1,7 +1,7 @@
 <svelte:options runes />
 
 <script lang="ts">
-	import { cssLength, passthrough } from '../Helpers/Helpers.svelte.js';
+	import { cssLength } from '../Helpers/Helpers.svelte.js';
 	import { InputVariant } from '../Types/Internal/InputVariant.js';
 	import { Size } from '../Types/Internal/Size.js';
 	import Icon from './Icon.svelte';
@@ -33,7 +33,10 @@
 		spellcheck,
 		onblur,
 		onfocus,
-		onkeydown = passthrough,
+		// No default `onkeydown` - see TextInput.svelte for the rationale.
+		// The legacy default (`passthrough`) blurred the textarea on every
+		// alphanumeric keystroke and made the field unusable.
+		onkeydown,
 		oninput,
 	}: TextAreaProps = $props();
 

package/dist/Components/TextInput.svelte

@@ -1,7 +1,7 @@
 <svelte:options runes />
 
 <script lang="ts">
-	import { cssLength, isValidEmailAddress, passthrough } from '../Helpers/Helpers.svelte.js';
+	import { cssLength, isValidEmailAddress } from '../Helpers/Helpers.svelte.js';
 	import { Colour, ColourSet } from '../scss/colours.js';
 	import { InputVariant } from '../Types/Internal/InputVariant.js';
 	import { Size } from '../Types/Internal/Size.js';
@@ -34,7 +34,17 @@
 		spellcheck,
 		onblur,
 		onfocus,
-		onkeydown = passthrough,
+		// No default `onkeydown`. The legacy default was `passthrough`,
+		// a helper that BLURS the target on every alphanumeric key (it is
+		// a barcode-scanner aid intended for buttons - note the
+		// `as HTMLButtonElement` cast inside it). Applied to a text input
+		// it makes the field unusable: each keystroke blurs the input
+		// before the value can update, so users see nothing as they type.
+		// Inputs should accept keystrokes by default; consumers that want
+		// the barcode-blur behaviour explicitly pass
+		// `onkeydown={passthrough}` (preferably renamed to
+		// `blurOnAlphanumeric` in a future patch).
+		onkeydown,
 		oninput,
 	}: TextInputProps = $props();
 

package/dist/Components/Touch/TouchModal.svelte

@@ -4,6 +4,7 @@
 	module
 	lang="ts"
 >
+	import { browser } from '$app/environment';
 	import { DATAMatrix } from '../../Helpers/Datamatrix.js';
 	import { useAsyncFlag } from '../../Helpers/AsyncFlag.svelte.js';
 	import { passthrough } from '../../Helpers/Helpers.svelte.js';
@@ -51,8 +52,16 @@
 	// Pre-compute barcode SVGs once per `buttons` array. Building a DataMatrix
 	// barcode is non-trivial; rebuilding inside the each-block re-runs the
 	// encoder on every render.
+	//
+	// `DATAMatrix` calls `document.createElement` internally, which is
+	// undefined during SvelteKit's server render. Returning `null` on the
+	// server keeps the SVG slots empty for SSR; the client re-renders with
+	// the real encoded payload after hydration.
 	const barcodeIcons = $derived.by(
-		() => buttons?.map((b) => (b.barcodeValue != null ? DATAMatrix(b.barcodeValue) : null)) ?? []
+		() =>
+			buttons?.map((b) =>
+				b.barcodeValue != null && browser ? DATAMatrix(b.barcodeValue) : null
+			) ?? []
 	);
 
 	// Resolve each button's `isValid` once at the component level rather than

package/dist/Helpers/Helpers.svelte.d.ts

@@ -136,11 +136,21 @@ export declare function SQLFriendlyWithLocalTime(date: InputDate | InputDateWith
  */
 export declare const localTimeFormat: Intl.DateTimeFormat;
 /**
- * Default `onkeydown` handler that blurs the focused element when
- * the user presses an alphanumeric key. Used on input wrappers
- * and buttons so that scanner-driven barcode characters do not
- * accumulate inside the focused field; instead the buffer goes
- * to `UntypedInputContext`.
+ * Barcode-scanner helper. Wire as an `onkeydown` on **buttons and
+ * other non-text focusable elements** that should yield focus when a
+ * scanner-driven keystream begins. On every alphanumeric key it
+ * calls `e.target.blur()` so the buffered keystrokes flow up to
+ * `UntypedInputContext` instead of being captured by the focused
+ * element.
+ *
+ * Do NOT apply to text inputs / textareas. Blurring the field on each
+ * keypress makes it impossible to type into - the field deselects
+ * before the browser commits the character.
+ *
+ * Despite the name, this is not a "pass the event through" no-op; it
+ * actively blurs the target. Renaming is deferred for backwards
+ * compatibility, but consumer-facing prop docs should describe the
+ * behaviour as "blur on alphanumeric".
  */
 export declare function passthrough(e: KeyboardEvent): void;
 /**

package/dist/Helpers/Helpers.svelte.js

@@ -248,11 +248,21 @@ export const localTimeFormat = new Intl.DateTimeFormat('en-GB', {
     timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
 });
 /**
- * Default `onkeydown` handler that blurs the focused element when
- * the user presses an alphanumeric key. Used on input wrappers
- * and buttons so that scanner-driven barcode characters do not
- * accumulate inside the focused field; instead the buffer goes
- * to `UntypedInputContext`.
+ * Barcode-scanner helper. Wire as an `onkeydown` on **buttons and
+ * other non-text focusable elements** that should yield focus when a
+ * scanner-driven keystream begins. On every alphanumeric key it
+ * calls `e.target.blur()` so the buffered keystrokes flow up to
+ * `UntypedInputContext` instead of being captured by the focused
+ * element.
+ *
+ * Do NOT apply to text inputs / textareas. Blurring the field on each
+ * keypress makes it impossible to type into - the field deselects
+ * before the browser commits the character.
+ *
+ * Despite the name, this is not a "pass the event through" no-op; it
+ * actively blurs the target. Renaming is deferred for backwards
+ * compatibility, but consumer-facing prop docs should describe the
+ * behaviour as "blur on alphanumeric".
  */
 export function passthrough(e) {
     if (!e.key.match(/^[a-zA-Z0-9[\]]$/gm)) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.37.7",
+  "version": "0.37.9",
   "publishConfig": {
     "access": "restricted"
   },
@@ -23,9 +23,9 @@
       "svelte": "./dist/index.js"
     },
     "./scss/*": {
-      "sass": "./dist/scss/*",
-      "style": "./dist/scss/*",
-      "default": "./dist/scss/*"
+      "sass": "./dist/scss/_*.scss",
+      "style": "./dist/scss/_*.scss",
+      "default": "./dist/scss/_*.scss"
     }
   },
   "peerDependencies": {