@lavalogic/scoria 0.37.44 → 0.37.46

package/dist/Components/Nav/Nav.svelte

@@ -1,101 +1,112 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T"
->
-	import { Size } from '../../Types/Internal/Size.js';
-	import Icon from '../Icon.svelte';
-	import type { NavProps } from './NavProps.js';
-	import ServicesNav from './ServicesNav.svelte';
-
-	const {
-		userName,
-		extras,
-		userDialog,
-		serviceTabs,
-		selectedServiceTab,
-		brand,
-		// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-arguments
-	}: NavProps<T> = $props();
-
-	const userIcon = $derived.by(() => {
-		const names = userName.split(' ');
-
-		const initials = names.map((it) => it.charAt(0)).slice(0, 2);
-		return initials;
-	});
-
-	const singleLetter = $derived(userIcon.length === 1);
-	const hasLetters = $derived(userIcon.length > 0);
-
-	let showServicesDialog = $state(false);
-	let showUserDialog = $state(false);
-</script>
-
-<nav class="main-navigation">
-	{#if typeof brand === 'string'}
-		<span class="nav-link brand">{brand}</span>
-	{:else if brand}
-		<span class="nav-link brand">{@render brand()}</span>
-	{/if}
-
-	<div class="nav-link">
-		<button
-			onclick={() => {
-				showServicesDialog = !showServicesDialog;
-			}}
-		>
-			<div class="delimited">
-				<Icon
-					name="block-menu"
-					size={Size.Medium}
-				/>
-				<span>Services</span>
-			</div>
-		</button>
-
-		{#if showServicesDialog}
-			<ServicesNav
-				onclose={() => {
-					showServicesDialog = false;
-				}}
-				{serviceTabs}
-				{selectedServiceTab}
-			/>
-		{/if}
-	</div>
-
-	<div class="nav-search-container"></div>
-	{#if extras}
-		<div class="nav-link spaced selects">
-			{@render extras()}
-		</div>
-	{/if}
-
-	<div>
-		<button
-			onclick={() => {
-				showUserDialog = !showUserDialog;
-			}}
-		>
-			<span class="nav-link padded">
-				<span
-					class="user-icon"
-					class:visible={hasLetters}
-					class:single-letter={singleLetter}>{userIcon}</span
-				>
-				<span class="user-name">{userName}</span>
-			</span>
-		</button>
-		{#if showUserDialog}
-			{@render userDialog(() => {
-				showUserDialog = false;
-			})}
-		{/if}
-	</div>
-</nav>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T"
+>
+	import { afterNavigate } from '$app/navigation';
+	import { Size } from '../../Types/Internal/Size.js';
+	import Icon from '../Icon.svelte';
+	import type { NavProps } from './NavProps.js';
+	import ServicesNav from './ServicesNav.svelte';
+
+	const {
+		userName,
+		extras,
+		userDialog,
+		serviceTabs,
+		selectedServiceTab,
+		brand,
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-arguments
+	}: NavProps<T> = $props();
+
+	const userIcon = $derived.by(() => {
+		const names = userName.split(' ');
+
+		const initials = names.map((it) => it.charAt(0)).slice(0, 2);
+		return initials;
+	});
+
+	const singleLetter = $derived(userIcon.length === 1);
+	const hasLetters = $derived(userIcon.length > 0);
+
+	let showServicesDialog = $state(false);
+	let showUserDialog = $state(false);
+
+	// Close both nav popovers after any navigation. Selecting an item in
+	// the Services menu is a navigation, so the menu must dismiss itself —
+	// without this it only closed when the consumer happened to remount
+	// `<Nav>` (e.g. on a main-area change), leaving it open when the user
+	// picked a sibling item within the same area.
+	afterNavigate(() => {
+		showServicesDialog = false;
+		showUserDialog = false;
+	});
+</script>
+
+<nav class="main-navigation">
+	{#if typeof brand === 'string'}
+		<span class="nav-link brand">{brand}</span>
+	{:else if brand}
+		<span class="nav-link brand">{@render brand()}</span>
+	{/if}
+
+	<div class="nav-link">
+		<button
+			onclick={() => {
+				showServicesDialog = !showServicesDialog;
+			}}
+		>
+			<div class="delimited">
+				<Icon
+					name="block-menu"
+					size={Size.Medium}
+				/>
+				<span>Services</span>
+			</div>
+		</button>
+
+		{#if showServicesDialog}
+			<ServicesNav
+				onclose={() => {
+					showServicesDialog = false;
+				}}
+				{serviceTabs}
+				{selectedServiceTab}
+			/>
+		{/if}
+	</div>
+
+	<div class="nav-search-container"></div>
+	{#if extras}
+		<div class="nav-link spaced selects">
+			{@render extras()}
+		</div>
+	{/if}
+
+	<div>
+		<button
+			onclick={() => {
+				showUserDialog = !showUserDialog;
+			}}
+		>
+			<span class="nav-link padded">
+				<span
+					class="user-icon"
+					class:visible={hasLetters}
+					class:single-letter={singleLetter}>{userIcon}</span
+				>
+				<span class="user-name">{userName}</span>
+			</span>
+		</button>
+		{#if showUserDialog}
+			{@render userDialog(() => {
+				showUserDialog = false;
+			})}
+		{/if}
+	</div>
+</nav>
+
 <style>div.overlay {
   position: fixed;
   top: calc(3.25rem + var(--env-border-height, 0));
@@ -219,4 +230,4 @@ div.delimited {
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-}</style>
+}</style>

package/dist/Components/Nav/NavProps.d.ts

@@ -34,17 +34,10 @@ export interface NavProps<T = unknown> {
     selectedServiceTab: TabOption<T> | undefined;
     /**
      * Optional brand label rendered as the first item in the navigation
-     * bar.
-     *
-     * Accepts either a plain string (rendered as text inside the brand
-     * container) or a `Snippet` for rich brand rendering such as a logo
-     * image, a link, or a custom layout. When omitted the brand slot
-     * renders nothing, which keeps the component free of consumer
-     * specific branding by default.
-     *
-     * Consumer apps that previously relied on the historic hard-coded
-     * "FloWMS" string must now pass `brand="FloWMS"` (or a Snippet) to
-     * preserve the previous visual.
+     * bar. Accepts a plain string (rendered as text in the brand container)
+     * or a `Snippet` for rich content (logo, link, custom layout). When
+     * omitted the brand slot renders nothing, so the component carries no
+     * consumer-specific branding by default.
      */
     brand?: string | Snippet;
     /**

package/dist/Components/Nav/NavServiceMenuList.svelte

@@ -1,45 +1,45 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { Colour } from '../../scss/colours.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import Icon from '../Icon.svelte';
-	import { Dimensions } from './Dimensions.js';
-	import type { NavServiceMenuListProps } from './NavServiceMenuListProps.js';
-	import ServiceMenuItem from './ServiceMenuItem.svelte';
-
-	const { title, items, icon }: NavServiceMenuListProps = $props();
-</script>
-
-<div
-	class="wrapper"
-	style="--icon-column-width: {Dimensions.smallPanelWidth}rem"
-	role="group"
-	aria-label={title}
->
-	<h3>
-		<div class="icon">
-			{#if icon}
-				<Icon
-					size={Size.Large}
-					colour={Colour['$font-primary']}
-					{...icon}
-				/>
-			{/if}
-		</div>
-		{title}
-	</h3>
-
-	<div
-		class="items"
-		role="list"
-	>
-		{#each items as { item } (item.label)}
-			<ServiceMenuItem {item} />
-		{/each}
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { Colour } from '../../scss/colours.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import Icon from '../Icon.svelte';
+	import { Dimensions } from './Dimensions.js';
+	import type { NavServiceMenuListProps } from './NavServiceMenuListProps.js';
+	import ServiceMenuItem from './ServiceMenuItem.svelte';
+
+	const { title, items, icon }: NavServiceMenuListProps = $props();
+</script>
+
+<div
+	class="wrapper"
+	style="--icon-column-width: {Dimensions.smallPanelWidth}rem"
+	role="group"
+	aria-label={title}
+>
+	<h3>
+		<div class="icon">
+			{#if icon}
+				<Icon
+					size={Size.Large}
+					colour={Colour['$font-primary']}
+					{...icon}
+				/>
+			{/if}
+		</div>
+		{title}
+	</h3>
+
+	<div
+		class="items"
+		role="list"
+	>
+		{#each items as { item } (item.label)}
+			<ServiceMenuItem {item} />
+		{/each}
+	</div>
+</div>
+
 <style>h3 {
   font-size: 1.5rem;
   display: flex;
@@ -63,4 +63,4 @@ h3 .icon {
 .wrapper .items {
   flex-shrink: 1;
   overflow: auto;
-}</style>
+}</style>

package/dist/Components/Nav/NavTab.svelte

@@ -1,64 +1,64 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="Args"
->
-	import { useAsyncFlag } from '../../Helpers/AsyncFlag.svelte.js';
-	import { Colour } from '../../scss/colours.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import Icon from '../Icon.svelte';
-	import type { NavTabProps } from './NavTabProps.js';
-
-	// `Args` defaults to `unknown` on the props interface, but we still
-	// pass the generic explicitly so consumers using the component as
-	// `<NavTab>` inside a typed snippet receive the same `Args` rune.
-	// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-arguments
-	let { option, selected }: NavTabProps<Args> = $props();
-
-	const isValid = useAsyncFlag(() => option.isValid, true);
-	const disabled = useAsyncFlag(() => option.disabled, false);
-	const visible = useAsyncFlag(() => option.visible, true);
-</script>
-
-<button
-	class:selected
-	onclick={() => {
-		option.onclick();
-	}}
-	type="button"
-	class="tab"
-	role="tab"
-	aria-selected={selected}
-	aria-label={option.label}
-	disabled={disabled.value}
-	class:invalid={!isValid.value}
-	class:hidden={!visible.value}
->
-	<Icon
-		name="nothing"
-		colour={Colour['$brand-primary']}
-		size={Size.MediumLarge}
-		{...option.iconLeft}
-	/>
-
-	{option.label}
-	{#if option.isValid === false}
-		<Icon
-			name="error"
-			colour={Colour['$error-border']}
-			size={Size.MediumLarge}
-		/>
-	{:else}
-		<Icon
-			name="nothing"
-			colour={Colour['$brand-primary']}
-			size={Size.MediumLarge}
-			{...option.iconRight}
-		/>
-	{/if}
-</button>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="Args"
+>
+	import { useAsyncFlag } from '../../Helpers/AsyncFlag.svelte.js';
+	import { Colour } from '../../scss/colours.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import Icon from '../Icon.svelte';
+	import type { NavTabProps } from './NavTabProps.js';
+
+	// `Args` defaults to `unknown` on the props interface, but we still
+	// pass the generic explicitly so consumers using the component as
+	// `<NavTab>` inside a typed snippet receive the same `Args` rune.
+	// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-arguments
+	let { option, selected }: NavTabProps<Args> = $props();
+
+	const isValid = useAsyncFlag(() => option.isValid, true);
+	const disabled = useAsyncFlag(() => option.disabled, false);
+	const visible = useAsyncFlag(() => option.visible, true);
+</script>
+
+<button
+	class:selected
+	onclick={() => {
+		option.onclick();
+	}}
+	type="button"
+	class="tab"
+	role="tab"
+	aria-selected={selected}
+	aria-label={option.label}
+	disabled={disabled.value}
+	class:invalid={!isValid.value}
+	class:hidden={!visible.value}
+>
+	<Icon
+		name="nothing"
+		colour={Colour['$brand-primary']}
+		size={Size.MediumLarge}
+		{...option.iconLeft}
+	/>
+
+	{option.label}
+	{#if option.isValid === false}
+		<Icon
+			name="error"
+			colour={Colour['$error-border']}
+			size={Size.MediumLarge}
+		/>
+	{:else}
+		<Icon
+			name="nothing"
+			colour={Colour['$brand-primary']}
+			size={Size.MediumLarge}
+			{...option.iconRight}
+		/>
+	{/if}
+</button>
+
 <style>button.tab.hidden {
   display: none !important;
 }
@@ -91,4 +91,4 @@
 }
 .tab.invalid {
   color: #aa1414;
-}</style>
+}</style>

package/dist/Components/Nav/ServiceMenuItem.svelte

@@ -1,102 +1,102 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { dev } from '$app/environment';
-	import { page } from '$app/state';
-	import { useAsyncFlag } from '../../Helpers/AsyncFlag.svelte.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import Icon from '../Icon.svelte';
-	import { Dimensions } from './Dimensions.js';
-	import type { SideMenuItemProps } from './SideMenuItemProps.js';
-
-	const { item, selected: maybeSelected }: SideMenuItemProps = $props();
-
-	const selected = $derived(maybeSelected ?? (item.path ? page.url.pathname == item.path : false));
-
-	const visible = useAsyncFlag(() => item.visible, true);
-
-	/**
-	 * Constrain the rendered `href` to safe, relative paths only.
-	 *
-	 * `item.path` is typed as the SvelteKit `Pathname` brand at the
-	 * boundary, but the property is still a `string` at runtime. To
-	 * keep the trust boundary tight we reject anything that contains
-	 * a URL scheme (anything matching `^[a-z][a-z0-9+.-]*:`) and any
-	 * input that does not start with `/`. Disallowed values resolve
-	 * to `#` so the link is harmless if a future consumer supplies an
-	 * unsafe value.
-	 */
-	function safeHref(path: string): string {
-		if (typeof path !== 'string' || path.length === 0) {
-			return '#';
-		}
-		if (!path.startsWith('/')) {
-			return '#';
-		}
-		if (/^[a-z][a-z0-9+.-]*:/i.test(path)) {
-			return '#';
-		}
-		return path;
-	}
-</script>
-
-{#if item.callback}
-	<button
-		onclick={() => {
-			item.callback();
-		}}
-		style="--iconWidth: {Dimensions.smallPanelWidth}rem"
-		class:selected
-		class:hidden={!visible.value}
-	>
-		<!-- <div class="selected-marker"></div> -->
-		<div class="icon-wrapper">
-			{#if item.iconName}
-				<Icon
-					name={item.iconName}
-					size={Size.Medium}
-					label={item.label}
-				/>
-			{/if}
-		</div>
-		<div class="spacer"></div>
-		<div class="text">
-			<div class="label">{item.label}</div>
-			{#if item.subtitle}
-				<div class="subtitle">{item.subtitle}</div>
-			{/if}
-		</div></button
-	>
-{:else if item.path}
-	<a
-		href={safeHref(item.path)}
-		style="--iconWidth: {Dimensions.smallPanelWidth}rem"
-		aria-current={selected ? 'page' : undefined}
-		class:selected
-		class:hidden={!visible.value}
-	>
-		<!-- <div class="selected-marker"></div> -->
-		<div class="icon-wrapper">
-			{#if item.iconName}
-				<Icon
-					name={item.iconName}
-					size={Size.Medium}
-					label={item.label}
-				/>
-			{/if}
-		</div>
-		<div class="spacer"></div>
-		<div class="text">
-			<div class="label">{item.label}</div>
-			{#if item.subtitle}
-				<div class="subtitle">{item.subtitle}</div>
-			{/if}
-		</div></a
-	>
-{:else if dev}
-	Error: Callback had neither callback nor path
-{/if}
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { dev } from '$app/environment';
+	import { page } from '$app/state';
+	import { useAsyncFlag } from '../../Helpers/AsyncFlag.svelte.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import Icon from '../Icon.svelte';
+	import { Dimensions } from './Dimensions.js';
+	import type { SideMenuItemProps } from './SideMenuItemProps.js';
+
+	const { item, selected: maybeSelected }: SideMenuItemProps = $props();
+
+	const selected = $derived(maybeSelected ?? (item.path ? page.url.pathname == item.path : false));
+
+	const visible = useAsyncFlag(() => item.visible, true);
+
+	/**
+	 * Constrain the rendered `href` to safe, relative paths only.
+	 *
+	 * `item.path` is typed as the SvelteKit `Pathname` brand at the
+	 * boundary, but the property is still a `string` at runtime. To
+	 * keep the trust boundary tight we reject anything that contains
+	 * a URL scheme (anything matching `^[a-z][a-z0-9+.-]*:`) and any
+	 * input that does not start with `/`. Disallowed values resolve
+	 * to `#` so the link is harmless if a future consumer supplies an
+	 * unsafe value.
+	 */
+	function safeHref(path: string): string {
+		if (typeof path !== 'string' || path.length === 0) {
+			return '#';
+		}
+		if (!path.startsWith('/')) {
+			return '#';
+		}
+		if (/^[a-z][a-z0-9+.-]*:/i.test(path)) {
+			return '#';
+		}
+		return path;
+	}
+</script>
+
+{#if item.callback}
+	<button
+		onclick={() => {
+			item.callback();
+		}}
+		style="--iconWidth: {Dimensions.smallPanelWidth}rem"
+		class:selected
+		class:hidden={!visible.value}
+	>
+		<!-- <div class="selected-marker"></div> -->
+		<div class="icon-wrapper">
+			{#if item.iconName}
+				<Icon
+					name={item.iconName}
+					size={Size.Medium}
+					label={item.label}
+				/>
+			{/if}
+		</div>
+		<div class="spacer"></div>
+		<div class="text">
+			<div class="label">{item.label}</div>
+			{#if item.subtitle}
+				<div class="subtitle">{item.subtitle}</div>
+			{/if}
+		</div></button
+	>
+{:else if item.path}
+	<a
+		href={safeHref(item.path)}
+		style="--iconWidth: {Dimensions.smallPanelWidth}rem"
+		aria-current={selected ? 'page' : undefined}
+		class:selected
+		class:hidden={!visible.value}
+	>
+		<!-- <div class="selected-marker"></div> -->
+		<div class="icon-wrapper">
+			{#if item.iconName}
+				<Icon
+					name={item.iconName}
+					size={Size.Medium}
+					label={item.label}
+				/>
+			{/if}
+		</div>
+		<div class="spacer"></div>
+		<div class="text">
+			<div class="label">{item.label}</div>
+			{#if item.subtitle}
+				<div class="subtitle">{item.subtitle}</div>
+			{/if}
+		</div></a
+	>
+{:else if dev}
+	Error: Callback had neither callback nor path
+{/if}
+
 <style>button.hidden,
 a.hidden {
   display: none !important;
@@ -162,4 +162,4 @@ a:hover {
 button .spacer,
 a .spacer {
   width: 0.5rem;
-}</style>
+}</style>