@lavalogic/scoria 0.40.10 → 0.40.12

package/dist/Components/LoadingAnimation.svelte

@@ -99,6 +99,7 @@
 </script>
 
 <script lang="ts">
+	import { loaderDefaults } from '../Helpers/loaderDefaults.svelte.js';
 	import type { LoadingAnimationProps } from './LoadingAnimationProps.js';
 
 	const {
@@ -114,7 +115,16 @@
 	// The word the box spells: the caller's first name, or the product name as a
 	// friendly fallback. Block capitals tumble cleanly and dodge lowercase
 	// descenders clipping the baseline on landing.
-	const word = $derived((name.trim() || 'FloWMS').toUpperCase());
+	// Explicit `name` prop wins; otherwise fall back to the app-wide default
+	// (set by the host so internally-rendered loaders also show the user), then
+	// finally the product name.
+	const word = $derived(
+		(name.trim() || loaderDefaults.name.trim() || 'FloWMS').toUpperCase()
+	);
+
+	// Caption text with any trailing dots/ellipsis stripped, since the pill
+	// appends its own animated "..." — avoids "moment……" style doubling.
+	const captionText = $derived(caption.replace(/[\s.…]+$/, ''));
 
 	// Per-letter render data: each letter is a stack of DEPTH layers (painted
 	// back-to-front) topped by the lit face, so it has genuine 3D thickness.
@@ -764,7 +774,7 @@
 	     whose opacity cycles, so the pill width stays fixed as they animate. -->
 	{#if showText}
 		<div class="caption">
-			<span class="caption-label">{caption}</span><span
+			<span class="caption-label">{captionText}</span><span
 				class="caption-dots"
 				aria-hidden="true"><span>.</span><span>.</span><span>.</span></span
 			>
@@ -786,17 +796,20 @@
   --kraft-inner: #8a6b43;
   --seam: rgba(0, 0, 0, 0.14);
   --ink: #3c4045;
-  /* brand-blue confetti */
-  --fill-1: #259fc7;
-  --fill-2: #1b87b0;
-  --fill-3: #5cc4e6;
-  --fill-4: #0f6e93;
-  --fill-5: #86d6ef;
+  /* subtle white confetti — shades of white/off-white */
+  --fill-1: #ffffff;
+  --fill-2: #eef1f4;
+  --fill-3: #f8fafb;
+  --fill-4: #e2e7ec;
+  --fill-5: #fbfcfd;
   --hw: calc(var(--w) / 2);
   --hd: calc(var(--d) / 2);
   --hh: calc(var(--h) / 2);
   --y-outer: calc(var(--hh) * -1 + 0.5px);
   --y-inner: calc(var(--hh) * -1 + 1.5px);
+  /* Push the box (and its letters) down within the footprint so the caption
+     pill has clear headroom above the opened flaps. */
+  --stage-shift: 40px;
   display: grid;
   place-items: center;
   position: relative;
@@ -806,6 +819,7 @@
 .flowms-loader .scene {
   width: var(--w);
   height: var(--h);
+  translate: 0 var(--stage-shift);
   perspective: 820px;
   perspective-origin: 50% 40%;
   transform-style: preserve-3d;
@@ -1021,7 +1035,7 @@
   margin-top: -48px;
   border-radius: 50%;
   opacity: 0;
-  background: radial-gradient(circle, rgba(127, 212, 236, 0.6666666667) 0%, rgba(37, 159, 199, 0.3333333333) 35%, rgba(37, 159, 199, 0) 70%);
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 35%, rgba(255, 255, 255, 0) 70%);
 }
 .flowms-loader .fill {
   position: absolute;
@@ -1033,6 +1047,8 @@
   margin-top: -6.5px;
   border-radius: 3px;
   opacity: 0;
+  /* faint edge so the white pieces stay visible on light backgrounds */
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
 }
 .flowms-loader .fill:nth-child(5n+1) {
   background: var(--fill-1);
@@ -1064,7 +1080,7 @@
 .flowms-loader .letterstage {
   position: absolute;
   left: 50%;
-  top: 50%;
+  top: calc(50% + var(--stage-shift)); /* track the shifted box */
   width: var(--w);
   height: var(--h);
   transform: translate(-50%, -50%);
@@ -1097,21 +1113,30 @@
   top: 0;
 }
 .flowms-loader {
-  /* Caption pill: sits above the box and on top of every other layer. */
+  /* Caption pill: sits above the box and on top of every other layer. Its
+     bottom edge is anchored just above the opened flaps, so longer messages
+     wrap and grow UPWARD into the headroom rather than down over the box. */
 }
 .flowms-loader .caption {
   position: absolute;
   left: 50%;
-  top: 22px; /* above the box, clear of the eruption */
+  bottom: calc(100% - 50px);
   transform: translateX(-50%);
-  white-space: nowrap;
+  /* `width: max-content` opts out of the half-container shrink that
+     `left: 50%` would otherwise impose, so the pill sizes to its text up
+     to the max-width (then wraps). */
+  width: max-content;
+  max-width: min(380px, 90vw);
+  white-space: normal;
+  text-align: center;
+  text-wrap: balance;
   padding: 7px 16px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.82);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   -webkit-backdrop-filter: blur(3px);
   backdrop-filter: blur(3px);
-  font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
+  font: 600 14px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
   color: #44515a;
   letter-spacing: 0.2px;
 }

package/dist/Components/LoadingModal.svelte

@@ -4,7 +4,7 @@
 	import LoadingAnimation from './LoadingAnimation.svelte';
 	import type { LoadingModalProps } from './LoadingModalProps.js';
 
-	const { showModal, message, name }: LoadingModalProps = $props();
+	const { showModal, message, name, caption }: LoadingModalProps = $props();
 
 	let dialog: HTMLDialogElement | undefined = $state();
 
@@ -35,12 +35,9 @@
 	aria-live="polite"
 >
 	<div class="modal-root">
-		{#if message}
-			<p>{message}</p>
-		{/if}
 		<LoadingAnimation
 			{name}
-			showText={!message}
+			caption={message ?? caption}
 		/>
 	</div>
 </dialog>
@@ -309,17 +306,4 @@ dialog .modal-root {
   align-items: center;
   background: rgba(0, 0, 0, 0);
   position: relative;
-}
-dialog .modal-root p {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  z-index: 99999;
-  translate: -50% -80%;
-  user-select: none;
-  text-shadow: 0px 0px 3px #000000;
-  background-color: rgba(0, 0, 0, 0.4);
-  border-radius: 4px;
-  padding: 1rem;
-  color: #ffffff;
 }</style>

package/dist/Components/LoadingModalProps.d.ts

@@ -19,4 +19,11 @@ export interface LoadingModalProps {
      * erupts. When omitted the loader falls back to the product name.
      */
     name?: string | undefined;
+    /**
+     * Optional caption shown in the pill above the box (an animated `...` is
+     * appended automatically). Use this instead of {@link message} to keep the
+     * loader's own pill rather than rendering a separate message bar. Ignored
+     * when {@link message} is set. Defaults to `'Loading'`.
+     */
+    caption?: string | undefined;
 }

package/dist/Components/LoadingOverlay.svelte

@@ -4,7 +4,7 @@
 	import LoadingAnimation from './LoadingAnimation.svelte';
 	import type { LoadingOverlayProps } from './LoadingOverlayProps.js';
 
-	const { message, absolute, borderRadius, name }: LoadingOverlayProps =
+	const { message, absolute, borderRadius, name, caption }: LoadingOverlayProps =
 		$props();
 </script>
 
@@ -17,12 +17,9 @@
 		? `border-radius: ${borderRadius};`
 		: undefined}
 >
-	{#if message}
-		<p>{message}</p>
-	{/if}
 	<LoadingAnimation
 		{name}
-		showText={!message}
+		caption={message ?? caption}
 	/>
 </div>
 
@@ -42,19 +39,6 @@
   flex-flow: column;
   gap: 2rem;
 }
-.loading-overlay p {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  z-index: 99999;
-  translate: -50% -80%;
-  user-select: none;
-  text-shadow: 0px 0px 3px #000000;
-  background-color: rgba(0, 0, 0, 0.4);
-  border-radius: 4px;
-  padding: 1rem;
-  color: #ffffff;
-}
 .loading-overlay.absolute {
   position: absolute;
 }</style>

package/dist/Components/LoadingOverlayProps.d.ts

@@ -13,6 +13,13 @@ export interface LoadingOverlayProps {
      * erupts. When omitted the loader falls back to the product name.
      */
     name?: string | undefined;
+    /**
+     * Optional caption shown in the pill above the box (an animated `...` is
+     * appended automatically). Use this instead of {@link message} to keep the
+     * loader's own pill rather than rendering a separate message bar. Ignored
+     * when {@link message} is set. Defaults to `'Loading'`.
+     */
+    caption?: string | undefined;
     /**
      * When `true` the overlay uses `position: absolute` and fills its
      * nearest positioned ancestor instead of the viewport. Use this

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

@@ -0,0 +1,16 @@
+/**
+ * Global fallback configuration for all loaders.
+ *
+ * Loaders rendered *internally* by components like {@link Table},
+ * {@link DesktopModal} and {@link AppointmentCalendar} can't be handed a `name`
+ * prop at the call site. So the host app sets {@link loaderDefaults.name} once —
+ * typically in its root layout inside a browser `$effect` — and every loader
+ * (including those internal ones) spells that name. An explicit `name` prop on a
+ * specific loader still takes precedence.
+ *
+ * Only assign this on the client (inside an `$effect` / `onMount`). Assigning it
+ * during SSR would share one request's value with concurrent requests.
+ */
+export declare const loaderDefaults: {
+    name: string;
+};

package/dist/Helpers/loaderDefaults.svelte.js

@@ -0,0 +1,14 @@
+/**
+ * Global fallback configuration for all loaders.
+ *
+ * Loaders rendered *internally* by components like {@link Table},
+ * {@link DesktopModal} and {@link AppointmentCalendar} can't be handed a `name`
+ * prop at the call site. So the host app sets {@link loaderDefaults.name} once —
+ * typically in its root layout inside a browser `$effect` — and every loader
+ * (including those internal ones) spells that name. An explicit `name` prop on a
+ * specific loader still takes precedence.
+ *
+ * Only assign this on the client (inside an `$effect` / `onMount`). Assigning it
+ * during SSR would share one request's value with concurrent requests.
+ */
+export const loaderDefaults = $state({ name: '' });

package/dist/index.d.ts

@@ -64,6 +64,7 @@ export type { InfoAlertProps } from './Components/InfoAlertProps.js';
 export type { InputProps } from './Components/InputProps.js';
 export { default as LoadingAnimation } from './Components/LoadingAnimation.svelte';
 export type { LoadingAnimationProps } from './Components/LoadingAnimationProps.js';
+export { loaderDefaults } from './Helpers/loaderDefaults.svelte.js';
 export { default as LoadingModal } from './Components/LoadingModal.svelte';
 export type { LoadingModalProps } from './Components/LoadingModalProps.js';
 export { default as LoadingOverlay } from './Components/LoadingOverlay.svelte';

package/dist/index.js

@@ -40,6 +40,7 @@ export {} from './Components/IconProps.js';
 export { icons } from './Components/Icons.js';
 export { default as InfoAlert } from './Components/InfoAlert.svelte';
 export { default as LoadingAnimation } from './Components/LoadingAnimation.svelte';
+export { loaderDefaults } from './Helpers/loaderDefaults.svelte.js';
 export { default as LoadingModal } from './Components/LoadingModal.svelte';
 export { default as LoadingOverlay } from './Components/LoadingOverlay.svelte';
 export { default as Modal } from './Components/Modal.svelte';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.40.10",
+  "version": "0.40.12",
   "publishConfig": {
     "access": "restricted"
   },