@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/Nav/Nav.svelte

@@ -1,99 +1,101 @@
-<svelte:options runes />
-
-<script lang="ts">
-	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 }: NavProps = $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">
-	<span class="nav-link hoverable"> FloWMS </span>
-	<!-- HACK swap above for below when a decent landing page has been added -->
-	<!-- <a
-		href={resolve(Locations.Home)}
-		class="nav-link hoverable"
-	>
-		FloWMS
-	</a> -->
-
-	<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">
-		<!-- <TextInput
-			bind:value={searchParam}
-			placeholder="Search for anything"
-			leftIcon={{ name: 'search-1' }}
-		/> -->
-	</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 { 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>
+
 <style>div.overlay {
   position: fixed;
   top: calc(3.25rem + var(--env-border-height, 0));
@@ -104,8 +106,8 @@
   background-color: rgba(0, 0, 0, 0.2);
 }
 
-a.nav-link {
-  color: unset;
+span.brand {
+  font-weight: 600;
 }
 
 div.user {
@@ -142,18 +144,22 @@ nav button {
   width: 100%;
 }
 nav button:hover {
-  background-color: rgba(47, 151, 186, 0.1);
+  background-color: #f4f7f9;
   cursor: pointer;
 }
 
+.nav-search-container {
+  flex: 1;
+}
+
 .spaced {
-  gap: 1rem;
+  gap: 1.5rem;
 }
 
 .user-icon {
   background-color: #dae0e5;
   padding: 0.5rem;
-  border-radius: 17px;
+  border-radius: 4px;
   opacity: 0;
   font-weight: 600;
 }
@@ -161,8 +167,8 @@ nav button:hover {
   opacity: 1;
 }
 .user-icon.single-letter {
-  padding: 0.3rem 0.6rem;
-  border-radius: 14px;
+  padding: 0.375rem 0.75rem;
+  border-radius: 4px;
 }
 
 .main-navigation > *:nth-child(even) {
@@ -171,16 +177,16 @@ nav button:hover {
 .main-navigation > *:nth-child(even)::before {
   content: "";
   height: 1.5rem;
-  border-left: solid 1px #e8e8e8;
-  border-radius: 10px;
+  border-left: solid 1px #e9ecf1;
+  border-radius: 5px;
   left: 0;
   position: absolute;
 }
 .main-navigation > *:nth-child(even)::after {
   content: "";
   height: 1.5rem;
-  border-right: solid 1px #e8e8e8;
-  border-radius: 10px;
+  border-right: solid 1px #e9ecf1;
+  border-radius: 5px;
   position: absolute;
   right: 0;
 }
@@ -197,14 +203,13 @@ nav button:hover {
   justify-content: center;
   flex-flow: row;
   align-items: center;
-  /* flex-grow: 1; */
   min-width: 7.5rem;
   transition: background-color 200ms ease 0s;
 }
 .nav-link.padded {
   padding-left: 1rem;
   padding-right: 1rem;
-  gap: 1rem;
+  gap: 1.5rem;
 }
 
 div.delimited {
@@ -214,4 +219,4 @@ div.delimited {
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-}</style>
+}</style>

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

@@ -1,4 +1,25 @@
 import type { NavProps } from './NavProps.js';
-declare const Nav: import("svelte").Component<NavProps, {}, "">;
-type Nav = ReturnType<typeof Nav>;
+declare function $$render<T>(): {
+    props: NavProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Nav: $$IsomorphicComponent;
+type Nav<T> = InstanceType<typeof Nav<T>>;
 export default Nav;

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

@@ -1,9 +1,56 @@
 import type { TabOption } from '../../Types/Internal/TabOption.js';
 import type { Snippet } from 'svelte';
-export interface NavProps {
+/**
+ * Generic `T` parameterises the `TabOption<T>.args` payload type carried by
+ * each entry in {@link serviceTabs} / {@link selectedServiceTab}. Defaults
+ * to `unknown` so existing untyped consumers continue to compile unchanged;
+ * consumers that want a typed `args` payload (e.g. a discriminated union of
+ * service identifiers) can pass it explicitly: `Nav<MyServiceArgs>`.
+ */
+export interface NavProps<T = unknown> {
+    /**
+     * The name of the currently signed-in user. The component derives an
+     * initials badge from this value (first letter of the first one or two
+     * space-separated tokens) and renders the full name beside it.
+     */
     userName: string;
+    /**
+     * Snippet rendered when the user clicks the user badge. Receives a
+     * `closeUserDialog` callback that the snippet must invoke to dismiss
+     * the dialog (the component does not auto-dismiss on outside click).
+     */
     userDialog: Snippet<[closeUserDialog: () => void]>;
-    serviceTabs: Array<TabOption<unknown>>;
-    selectedServiceTab: TabOption<unknown> | undefined;
+    /**
+     * The set of service tabs presented in the services dialog. Each tab
+     * is a `TabOption` whose `args` payload is opaque to scoria; consumers
+     * may carry whatever shape they need through `unknown`.
+     */
+    serviceTabs: ReadonlyArray<TabOption<T>>;
+    /**
+     * The currently selected service tab, or `undefined` if no tab is
+     * selected. Must reference one of `serviceTabs` by identity for the
+     * selection styling to apply.
+     */
+    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.
+     */
+    brand?: string | Snippet;
+    /**
+     * Optional snippet rendered between the services button and the user
+     * badge. Typically used to host context-dependent selects such as
+     * warehouse and depot pickers.
+     */
     extras?: Snippet;
 }

package/dist/Components/Nav/NavServiceMenuList.svelte

@@ -1,36 +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 type { NavServiceMenuListProps } from './NavServiceMenuListProps.js';
-	import ServiceMenuItem from './ServiceMenuItem.svelte';
-
-	const { title, items, icon }: NavServiceMenuListProps = $props();
-</script>
-
-<div class="wrapper">
-	<h3>
-		<div class="icon">
-			{#if icon}
-				<Icon
-					size={Size.Large}
-					colour={Colour['$font-primary']}
-					{...icon}
-				/>
-			{/if}
-		</div>
-		{title}
-	</h3>
-
-	<div class="items">
-		{#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;
@@ -43,7 +52,7 @@ h3 .icon {
   flex-flow: row nowrap;
   align-items: center;
   justify-content: center;
-  width: 3.4rem;
+  width: var(--icon-column-width);
 }
 
 .wrapper {
@@ -54,4 +63,4 @@ h3 .icon {
 .wrapper .items {
   flex-shrink: 1;
   overflow: auto;
-}</style>
+}</style>

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

@@ -1,7 +1,31 @@
 import type { IconProps } from '../IconProps.js';
 import type { SideMenuItemProps } from './SideMenuItemProps.js';
+/**
+ * Props for the {@link NavServiceMenuList} component.
+ *
+ * A titled, optionally-iconed list of {@link ServiceMenuItem} entries.
+ * Used inside `ServicesNav` to render a single service grouping
+ * (e.g. "Orders", "Receiving") with its child links.
+ */
 export interface NavServiceMenuListProps {
-    items: Array<SideMenuItemProps>;
+    /**
+     * The menu entries to render in order. Each entry wraps a
+     * {@link CallbackButtonWithIcon} via `SideMenuItemProps.item`.
+     *
+     * Marked `readonly` so the component cannot accidentally mutate
+     * caller state. Callers pass an array literal or a `$state` value.
+     */
+    items: ReadonlyArray<SideMenuItemProps>;
+    /** The list heading shown above the items. */
     title: string;
+    /**
+     * Optional icon rendered to the left of the title.
+     *
+     * `IconProps` is spread onto the rendered `<Icon>`. Default colour
+     * and size are supplied by the component; pass only the overrides
+     * you need. The `name` property is required by `IconProps` and is
+     * effectively required here too: omit the prop entirely if no icon
+     * is wanted.
+     */
     icon?: IconProps;
 }

package/dist/Components/Nav/NavTab.svelte

@@ -1,93 +1,64 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { devCatch } from '../../Helpers/Helpers.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';
-
-	let { option, selected }: NavTabProps = $props();
-
-	let disabled = $state(true);
-	let visible = $state(true);
-	let isValid = $state(true);
-
-	$effect(() => {
-		if (typeof option.isValid === 'boolean') {
-			isValid = option.isValid;
-		} else {
-			option.isValid
-				?.then((v) => {
-					isValid = v;
-				})
-				.catch(devCatch);
-		}
-	});
-	$effect(() => {
-		if (typeof option.disabled === 'boolean') {
-			disabled = option.disabled;
-		} else if (option.disabled == undefined) {
-			disabled = false;
-		} else {
-			option.disabled
-				.then((v) => {
-					disabled = v;
-				})
-				.catch(devCatch);
-		}
-	});
-
-	$effect(() => {
-		if (typeof option.visible === 'boolean') {
-			visible = option.visible;
-		} else if (option.visible == undefined) {
-			visible = true;
-		} else {
-			option.visible
-				.then((v) => {
-					visible = v;
-				})
-				.catch(devCatch);
-		}
-	});
-</script>
-
-<button
-	class:selected
-	onclick={() => {
-		option.onclick();
-	}}
-	type="button"
-	class="tab"
-	{disabled}
-	class:invalid={!isValid}
-	class:hidden={!visible}
->
-	<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;
 }
@@ -120,4 +91,4 @@
 }
 .tab.invalid {
   color: #aa1414;
-}</style>
+}</style>