@lavalogic/scoria 0.40.32 → 0.40.33

package/dist/Components/LoadingAnimation.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
 >import { m as i18n } from "../paraglide/messages.js";
 /**
 * Warm, on-brand phrases printed inside the box's rear flap. One is chosen at
@@ -96,8 +96,8 @@ function fluteCol(k, faceRGB, deepRGB) {
 	const valley = mixRGB(faceRGB, deepRGB, .74 + .26 * t);
 	return rgbStr(mixRGB(ridge, valley, wave));
 }
-</script>
-
+</script>
+
 <script lang="ts">import { loaderDefaults } from "../Helpers/loaderDefaults.svelte.js";
 const { name = "", showText = true, label = i18n["scoria.label.loading"](), caption = i18n["scoria.label.loading"](), messages = defaultLoaderMessages(), letterFace = "#cdab73", letterDeep = "#2a1d0d" } = $props();
 // The word the box spells: the caller's first name, or the product name as a
@@ -502,225 +502,225 @@ $effect(() => {
 		}
 	};
 });
-</script>
-
-<div
-	bind:this={rootRef}
-	class="flowms-loader"
-	role="status"
-	aria-live="polite"
-	aria-label={label}
->
-	<svg
-		width="0"
-		height="0"
-		style="position:absolute"
-		aria-hidden="true"
-	>
-		<filter
-			id="flowms-stamp"
-			x="-15%"
-			y="-15%"
-			width="130%"
-			height="130%"
-		>
-			<feTurbulence
-				type="fractalNoise"
-				baseFrequency="0.03 0.045"
-				numOctaves="3"
-				seed="6"
-				result="warp"
-			/>
-			<feDisplacementMap
-				in="SourceGraphic"
-				in2="warp"
-				scale="3.4"
-				xChannelSelector="R"
-				yChannelSelector="G"
-				result="rough"
-			/>
-			<feTurbulence
-				type="fractalNoise"
-				baseFrequency="0.5 0.55"
-				numOctaves="2"
-				seed="11"
-				result="grain"
-			/>
-			<feColorMatrix
-				in="grain"
-				type="matrix"
-				values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1.3 0 0 0 0.05"
-				result="grainA"
-			/>
-			<feComposite
-				in="rough"
-				in2="grainA"
-				operator="in"
-			/>
-		</filter>
-	</svg>
-
-	<div class="scene">
-		<div class="shadow"></div>
-		<div
-			bind:this={boxRef}
-			class="box"
-		>
-			<div class="face back"></div>
-			<div class="face left">
-				<svg
-					class="flo-logo"
-					viewBox="0 0 172 300"
-					xmlns="http://www.w3.org/2000/svg"
-					aria-hidden="true"
-				>
-					<path
-						d="M1.54715 179.524C4.94675 176.764 11.6045 178.966 13.4335 180.132L13.44 180.125L29.0209 188.966L25.7231 191.604C13.44 200.508 18.7976 216.338 37.1425 217.942L54.0844 219.353L56.3929 219.471V268.062C56.3929 269.123 55.7069 270.574 54.5791 271.201L54.2886 271.366L5.44142 299.569C2.62507 300.967 0 298.711 0 296.429V185.886C0 183.535 0.318398 180.522 1.54715 179.524Z"
-					/>
-					<path
-						d="M62.3754 133.49C66.3328 131.155 71.4576 130.799 76.0086 133.424L111.784 154.082L128.952 144.169C130.963 143.008 133.536 144.01 134.228 146.226L153.092 206.478V206.498L153.099 206.517C153.547 208.845 151.674 210.976 149.306 210.818L56.3865 204.855V204.861L39.0593 203.747C35.4781 203.516 34.3703 198.78 37.4768 196.986L55.4036 186.632L19.0811 165.703L19.0746 165.71C17.3158 164.58 12.8616 162.913 7.58502 165.222L62.3754 133.477V133.49Z"
-					/>
-					<path
-						d="M19.2923 34.575C10.3024 29.1402 0 35.2873 0 45.7151V145.85C0 148.133 2.98124 150.626 5.44142 148.99L54.5725 120.622C55.4893 120.094 56.3863 118.544 56.3863 117.483V55.6152L19.2923 34.5816V34.575Z"
-					/>
-					<path
-						d="M61.9664 2.15088C65.9765 -0.408228 71.2992 -0.890029 76.0085 1.83397L170.036 52.5942C173.393 54.5333 172.147 59.361 167.992 59.3618L167.813 59.3483L132.375 60.3248C130.264 60.3248 129.605 62.329 129.229 64.2422L125.357 84.5503C124.658 88.3819 123.135 90.4663 120.252 88.956L56.3864 55.6215V55.615L19.2923 34.5817C17.5446 33.3614 12.7433 31.4565 7.51929 33.5988L61.9664 2.15088Z"
-					/>
-				</svg>
-			</div>
-			<div class="face right">
-				<svg
-					class="flo-logo"
-					viewBox="0 0 172 300"
-					xmlns="http://www.w3.org/2000/svg"
-					aria-hidden="true"
-				>
-					<path
-						d="M1.54715 179.524C4.94675 176.764 11.6045 178.966 13.4335 180.132L13.44 180.125L29.0209 188.966L25.7231 191.604C13.44 200.508 18.7976 216.338 37.1425 217.942L54.0844 219.353L56.3929 219.471V268.062C56.3929 269.123 55.7069 270.574 54.5791 271.201L54.2886 271.366L5.44142 299.569C2.62507 300.967 0 298.711 0 296.429V185.886C0 183.535 0.318398 180.522 1.54715 179.524Z"
-					/>
-					<path
-						d="M62.3754 133.49C66.3328 131.155 71.4576 130.799 76.0086 133.424L111.784 154.082L128.952 144.169C130.963 143.008 133.536 144.01 134.228 146.226L153.092 206.478V206.498L153.099 206.517C153.547 208.845 151.674 210.976 149.306 210.818L56.3865 204.855V204.861L39.0593 203.747C35.4781 203.516 34.3703 198.78 37.4768 196.986L55.4036 186.632L19.0811 165.703L19.0746 165.71C17.3158 164.58 12.8616 162.913 7.58502 165.222L62.3754 133.477V133.49Z"
-					/>
-					<path
-						d="M19.2923 34.575C10.3024 29.1402 0 35.2873 0 45.7151V145.85C0 148.133 2.98124 150.626 5.44142 148.99L54.5725 120.622C55.4893 120.094 56.3863 118.544 56.3863 117.483V55.6152L19.2923 34.5816V34.575Z"
-					/>
-					<path
-						d="M61.9664 2.15088C65.9765 -0.408228 71.2992 -0.890029 76.0085 1.83397L170.036 52.5942C173.393 54.5333 172.147 59.361 167.992 59.3618L167.813 59.3483L132.375 60.3248C130.264 60.3248 129.605 62.329 129.229 64.2422L125.357 84.5503C124.658 88.3819 123.135 90.4663 120.252 88.956L56.3864 55.6215V55.615L19.2923 34.5817C17.5446 33.3614 12.7433 31.4565 7.51929 33.5988L61.9664 2.15088Z"
-					/>
-				</svg>
-			</div>
-			<div class="face floor"></div>
-			<div class="face front">
-				<div class="label-wrap">
-					<div class="label">{i18n['scoria.text.crate_label']()}</div>
-				</div>
-			</div>
-
-			<div class="vent">
-				<div
-					bind:this={glowRef}
-					class="glow"
-				></div>
-				{#each fills as _fill, i (i)}
-					<span
-						bind:this={fillRefs[i]}
-						class="fill"
-					></span>
-				{/each}
-			</div>
-
-			<div class="flap-unit s0 outer">
-				<div
-					bind:this={s0pivot}
-					class="flap-pivot"
-				>
-					<div class="flap-panel">
-						<div class="flap-face out"></div>
-						<div class="flap-face in"></div>
-					</div>
-				</div>
-			</div>
-			<div class="flap-unit s2 outer">
-				<div
-					bind:this={s2pivot}
-					class="flap-pivot"
-				>
-					<div class="flap-panel">
-						<div class="flap-face out"></div>
-						<div class="flap-face in">
-							{#if messages.length}
-								<div class="flap-msg">{messages[msgIndex] ?? ''}</div>
-							{/if}
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="flap-unit s1 inner">
-				<div
-					bind:this={s1pivot}
-					class="flap-pivot"
-				>
-					<div class="flap-panel">
-						<div class="flap-face out"></div>
-						<div class="flap-face in"></div>
-					</div>
-				</div>
-			</div>
-			<div class="flap-unit s3 inner">
-				<div
-					bind:this={s3pivot}
-					class="flap-pivot"
-				>
-					<div class="flap-panel">
-						<div class="flap-face out"></div>
-						<div class="flap-face in"></div>
-					</div>
-				</div>
-			</div>
-		</div>
-
-	</div>
-
-	<!-- Letters live in their own perspective stage, drawn after (above) the box,
-	     so they erupt from the opening and land in front of everything. -->
-	<div class="letterstage">
-		<div class="l3d">
-			{#each geom.letters as letter, i (i)}
-				<span
-					bind:this={letterRefs[i]}
-					class="letter"
-					style="font-size:{geom.fontSize}px"
-				>
-					{#each letter.layers as layer, k (k)}
-						<span
-							class="lyr"
-							style="transform:{layer.transform};color:{layer.color}"
-							>{letter.glyph}</span
-						>
-					{/each}
-					<span
-						class="lface"
-						style="transform:translate(-50%,-50%);color:{letterFace}"
-						>{letter.glyph}</span
-					>
-				</span>
-			{/each}
-		</div>
-	</div>
-
-	<!-- Caption sits above the box and is the loader's last child, so it is never
-	     hidden by the erupting letters. The dots are three always-present spans
-	     whose opacity cycles, so the pill width stays fixed as they animate. -->
-	{#if showText}
-		<div class="caption">
-			<span class="caption-label">{captionText}</span><span
-				class="caption-dots"
-				aria-hidden="true"><span>.</span><span>.</span><span>.</span></span
-			>
-		</div>
-	{/if}
-</div>
-
+</script>
+
+<div
+	bind:this={rootRef}
+	class="flowms-loader"
+	role="status"
+	aria-live="polite"
+	aria-label={label}
+>
+	<svg
+		width="0"
+		height="0"
+		style="position:absolute"
+		aria-hidden="true"
+	>
+		<filter
+			id="flowms-stamp"
+			x="-15%"
+			y="-15%"
+			width="130%"
+			height="130%"
+		>
+			<feTurbulence
+				type="fractalNoise"
+				baseFrequency="0.03 0.045"
+				numOctaves="3"
+				seed="6"
+				result="warp"
+			/>
+			<feDisplacementMap
+				in="SourceGraphic"
+				in2="warp"
+				scale="3.4"
+				xChannelSelector="R"
+				yChannelSelector="G"
+				result="rough"
+			/>
+			<feTurbulence
+				type="fractalNoise"
+				baseFrequency="0.5 0.55"
+				numOctaves="2"
+				seed="11"
+				result="grain"
+			/>
+			<feColorMatrix
+				in="grain"
+				type="matrix"
+				values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1.3 0 0 0 0.05"
+				result="grainA"
+			/>
+			<feComposite
+				in="rough"
+				in2="grainA"
+				operator="in"
+			/>
+		</filter>
+	</svg>
+
+	<div class="scene">
+		<div class="shadow"></div>
+		<div
+			bind:this={boxRef}
+			class="box"
+		>
+			<div class="face back"></div>
+			<div class="face left">
+				<svg
+					class="flo-logo"
+					viewBox="0 0 172 300"
+					xmlns="http://www.w3.org/2000/svg"
+					aria-hidden="true"
+				>
+					<path
+						d="M1.54715 179.524C4.94675 176.764 11.6045 178.966 13.4335 180.132L13.44 180.125L29.0209 188.966L25.7231 191.604C13.44 200.508 18.7976 216.338 37.1425 217.942L54.0844 219.353L56.3929 219.471V268.062C56.3929 269.123 55.7069 270.574 54.5791 271.201L54.2886 271.366L5.44142 299.569C2.62507 300.967 0 298.711 0 296.429V185.886C0 183.535 0.318398 180.522 1.54715 179.524Z"
+					/>
+					<path
+						d="M62.3754 133.49C66.3328 131.155 71.4576 130.799 76.0086 133.424L111.784 154.082L128.952 144.169C130.963 143.008 133.536 144.01 134.228 146.226L153.092 206.478V206.498L153.099 206.517C153.547 208.845 151.674 210.976 149.306 210.818L56.3865 204.855V204.861L39.0593 203.747C35.4781 203.516 34.3703 198.78 37.4768 196.986L55.4036 186.632L19.0811 165.703L19.0746 165.71C17.3158 164.58 12.8616 162.913 7.58502 165.222L62.3754 133.477V133.49Z"
+					/>
+					<path
+						d="M19.2923 34.575C10.3024 29.1402 0 35.2873 0 45.7151V145.85C0 148.133 2.98124 150.626 5.44142 148.99L54.5725 120.622C55.4893 120.094 56.3863 118.544 56.3863 117.483V55.6152L19.2923 34.5816V34.575Z"
+					/>
+					<path
+						d="M61.9664 2.15088C65.9765 -0.408228 71.2992 -0.890029 76.0085 1.83397L170.036 52.5942C173.393 54.5333 172.147 59.361 167.992 59.3618L167.813 59.3483L132.375 60.3248C130.264 60.3248 129.605 62.329 129.229 64.2422L125.357 84.5503C124.658 88.3819 123.135 90.4663 120.252 88.956L56.3864 55.6215V55.615L19.2923 34.5817C17.5446 33.3614 12.7433 31.4565 7.51929 33.5988L61.9664 2.15088Z"
+					/>
+				</svg>
+			</div>
+			<div class="face right">
+				<svg
+					class="flo-logo"
+					viewBox="0 0 172 300"
+					xmlns="http://www.w3.org/2000/svg"
+					aria-hidden="true"
+				>
+					<path
+						d="M1.54715 179.524C4.94675 176.764 11.6045 178.966 13.4335 180.132L13.44 180.125L29.0209 188.966L25.7231 191.604C13.44 200.508 18.7976 216.338 37.1425 217.942L54.0844 219.353L56.3929 219.471V268.062C56.3929 269.123 55.7069 270.574 54.5791 271.201L54.2886 271.366L5.44142 299.569C2.62507 300.967 0 298.711 0 296.429V185.886C0 183.535 0.318398 180.522 1.54715 179.524Z"
+					/>
+					<path
+						d="M62.3754 133.49C66.3328 131.155 71.4576 130.799 76.0086 133.424L111.784 154.082L128.952 144.169C130.963 143.008 133.536 144.01 134.228 146.226L153.092 206.478V206.498L153.099 206.517C153.547 208.845 151.674 210.976 149.306 210.818L56.3865 204.855V204.861L39.0593 203.747C35.4781 203.516 34.3703 198.78 37.4768 196.986L55.4036 186.632L19.0811 165.703L19.0746 165.71C17.3158 164.58 12.8616 162.913 7.58502 165.222L62.3754 133.477V133.49Z"
+					/>
+					<path
+						d="M19.2923 34.575C10.3024 29.1402 0 35.2873 0 45.7151V145.85C0 148.133 2.98124 150.626 5.44142 148.99L54.5725 120.622C55.4893 120.094 56.3863 118.544 56.3863 117.483V55.6152L19.2923 34.5816V34.575Z"
+					/>
+					<path
+						d="M61.9664 2.15088C65.9765 -0.408228 71.2992 -0.890029 76.0085 1.83397L170.036 52.5942C173.393 54.5333 172.147 59.361 167.992 59.3618L167.813 59.3483L132.375 60.3248C130.264 60.3248 129.605 62.329 129.229 64.2422L125.357 84.5503C124.658 88.3819 123.135 90.4663 120.252 88.956L56.3864 55.6215V55.615L19.2923 34.5817C17.5446 33.3614 12.7433 31.4565 7.51929 33.5988L61.9664 2.15088Z"
+					/>
+				</svg>
+			</div>
+			<div class="face floor"></div>
+			<div class="face front">
+				<div class="label-wrap">
+					<div class="label">{i18n['scoria.text.crate_label']()}</div>
+				</div>
+			</div>
+
+			<div class="vent">
+				<div
+					bind:this={glowRef}
+					class="glow"
+				></div>
+				{#each fills as _fill, i (i)}
+					<span
+						bind:this={fillRefs[i]}
+						class="fill"
+					></span>
+				{/each}
+			</div>
+
+			<div class="flap-unit s0 outer">
+				<div
+					bind:this={s0pivot}
+					class="flap-pivot"
+				>
+					<div class="flap-panel">
+						<div class="flap-face out"></div>
+						<div class="flap-face in"></div>
+					</div>
+				</div>
+			</div>
+			<div class="flap-unit s2 outer">
+				<div
+					bind:this={s2pivot}
+					class="flap-pivot"
+				>
+					<div class="flap-panel">
+						<div class="flap-face out"></div>
+						<div class="flap-face in">
+							{#if messages.length}
+								<div class="flap-msg">{messages[msgIndex] ?? ''}</div>
+							{/if}
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="flap-unit s1 inner">
+				<div
+					bind:this={s1pivot}
+					class="flap-pivot"
+				>
+					<div class="flap-panel">
+						<div class="flap-face out"></div>
+						<div class="flap-face in"></div>
+					</div>
+				</div>
+			</div>
+			<div class="flap-unit s3 inner">
+				<div
+					bind:this={s3pivot}
+					class="flap-pivot"
+				>
+					<div class="flap-panel">
+						<div class="flap-face out"></div>
+						<div class="flap-face in"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+	</div>
+
+	<!-- Letters live in their own perspective stage, drawn after (above) the box,
+	     so they erupt from the opening and land in front of everything. -->
+	<div class="letterstage">
+		<div class="l3d">
+			{#each geom.letters as letter, i (i)}
+				<span
+					bind:this={letterRefs[i]}
+					class="letter"
+					style="font-size:{geom.fontSize}px"
+				>
+					{#each letter.layers as layer, k (k)}
+						<span
+							class="lyr"
+							style="transform:{layer.transform};color:{layer.color}"
+							>{letter.glyph}</span
+						>
+					{/each}
+					<span
+						class="lface"
+						style="transform:translate(-50%,-50%);color:{letterFace}"
+						>{letter.glyph}</span
+					>
+				</span>
+			{/each}
+		</div>
+	</div>
+
+	<!-- Caption sits above the box and is the loader's last child, so it is never
+	     hidden by the erupting letters. The dots are three always-present spans
+	     whose opacity cycles, so the pill width stays fixed as they animate. -->
+	{#if showText}
+		<div class="caption">
+			<span class="caption-label">{captionText}</span><span
+				class="caption-dots"
+				aria-hidden="true"><span>.</span><span>.</span><span>.</span></span
+			>
+		</div>
+	{/if}
+</div>
+
 <style>@charset "UTF-8";
 .flowms-loader {
   --w: 120px; /* footprint width / depth (square) */
@@ -754,6 +754,7 @@ $effect(() => {
   position: relative;
   width: 300px;
   height: 300px;
+  direction: ltr;
 }
 .flowms-loader .scene {
   width: var(--w);
@@ -1157,4 +1158,4 @@ $effect(() => {
   66%, 100% {
     opacity: 1;
   }
-}</style>
+}</style>

package/dist/Components/LoadingModal.svelte

@@ -1,5 +1,5 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { m as i18n } from "../paraglide/messages.js";
 import LoadingAnimation from "./LoadingAnimation.svelte";
 const { showModal, message, name, caption } = $props();
@@ -19,22 +19,22 @@ function uncloseable(e) {
 		e.preventDefault();
 	}
 }
-</script>
-
-<dialog
-	bind:this={dialog}
-	onkeydown={uncloseable}
-	aria-label={message ?? i18n['scoria.label.loading']()}
-	aria-live="polite"
->
-	<div class="modal-root">
-		<LoadingAnimation
-			{name}
-			caption={message ?? caption}
-		/>
-	</div>
-</dialog>
-
+</script>
+
+<dialog
+	bind:this={dialog}
+	onkeydown={uncloseable}
+	aria-label={message ?? i18n['scoria.label.loading']()}
+	aria-live="polite"
+>
+	<div class="modal-root">
+		<LoadingAnimation
+			{name}
+			caption={message ?? caption}
+		/>
+	</div>
+</dialog>
+
 <style>dialog {
   overflow: clip;
   background-color: #e9ecf1;
@@ -299,4 +299,4 @@ dialog .modal-root {
   align-items: center;
   background: rgba(0, 0, 0, 0);
   position: relative;
-}</style>
+}</style>

package/dist/Components/LoadingOverlay.svelte

@@ -1,24 +1,24 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import LoadingAnimation from "./LoadingAnimation.svelte";
 const { message, absolute, borderRadius, name, caption } = $props();
-</script>
-
-<div
-	class="loading-overlay"
-	class:absolute
-	role="status"
-	aria-live="polite"
-	style={borderRadius != null && borderRadius.length > 0
-		? `border-radius: ${borderRadius};`
-		: undefined}
->
-	<LoadingAnimation
-		{name}
-		caption={message ?? caption}
-	/>
-</div>
-
+</script>
+
+<div
+	class="loading-overlay"
+	class:absolute
+	role="status"
+	aria-live="polite"
+	style={borderRadius != null && borderRadius.length > 0
+		? `border-radius: ${borderRadius};`
+		: undefined}
+>
+	<LoadingAnimation
+		{name}
+		caption={message ?? caption}
+	/>
+</div>
+
 <style>.loading-overlay {
   display: flex;
   position: fixed;
@@ -37,4 +37,4 @@ const { message, absolute, borderRadius, name, caption } = $props();
 }
 .loading-overlay.absolute {
   position: absolute;
-}</style>
+}</style>