@lavalogic/scoria 0.35.0 → 0.37.0

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

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

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

@@ -1,5 +1,19 @@
 import type { TabOption } from '../../Types/Internal/TabOption.js';
-export interface NavTabProps {
-    option: TabOption<unknown>;
+/**
+ * Props for the {@link NavTab} component.
+ *
+ * `NavTab` is the tab button variant used by `ServicesNav` inside the
+ * shared `HorizontalTabGroup`. It mirrors the underlying
+ * {@link TabOption} `isValid` / `disabled` / `visible` async-flag
+ * contract via the shared `useAsyncFlag` helper, so consumers can
+ * pass plain booleans or Promises interchangeably.
+ *
+ * Generic over `Args` so the option's `content` snippet can be typed
+ * without resorting to `unknown` at the call site.
+ */
+export interface NavTabProps<Args = unknown> {
+    /** The tab option to render. */
+    option: TabOption<Args>;
+    /** Whether this tab is the currently selected one. */
     selected: boolean;
 }

package/dist/Components/Nav/ServiceMenuItem.svelte

@@ -1,93 +1,102 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { dev } from '$app/environment';
-	import { resolve } from '$app/paths';
-	import { page } from '$app/state';
-	import { devCatch } from '../../Helpers/Helpers.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));
-
-	let visible = $state(true);
-
-	$effect(() => {
-		if (typeof item.visible === 'boolean') {
-			visible = item.visible;
-		} else if (item.visible == undefined) {
-			visible = true;
-		} else {
-			item.visible
-				.then((v) => {
-					visible = v;
-				})
-				.catch(devCatch);
-		}
-	});
-</script>
-
-{#if item.callback}
-	<button
-		onclick={() => {
-			item.callback();
-		}}
-		style="--iconWidth: {Dimensions.smallPanelWidth}rem"
-		class:selected
-		class:hidden={!visible}
-	>
-		<!-- <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}
-	<!-- FIXME why is this type cast required? -->
-	<a
-		href={resolve(item.path as '/')}
-		style="--iconWidth: {Dimensions.smallPanelWidth}rem"
-		class:selected
-		class:hidden={!visible}
-	>
-		<!-- <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;
@@ -126,7 +135,7 @@ a .text .label {
 button .subtitle,
 a .subtitle {
   font-size: 0.875rem;
-  color: #9da9b1;
+  color: #718a9b;
 }
 button,
 a {
@@ -153,4 +162,4 @@ a:hover {
 button .spacer,
 a .spacer {
   width: 0.5rem;
-}</style>
+}</style>

package/dist/Components/Nav/ServicesNav.svelte

@@ -1,62 +1,102 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import type { TabOption } from '../../Types/Internal/TabOption.js';
-	import HorizontalTabGroup from '../HorizontalTabGroup.svelte';
-	import NavTab from './NavTab.svelte';
-	import type { ServicesNavProps } from './ServicesNavProps.js';
-
-	const { onclose, serviceTabs, selectedServiceTab }: ServicesNavProps = $props();
-
-	let servicesDialogRef: HTMLDivElement | undefined = $state.raw();
-</script>
-
-<div
-	bind:this={servicesDialogRef}
-	role="dialog"
-	tabindex="0"
-	class="overlay"
-	onclick={(e) => {
-		e.stopPropagation();
-		if (servicesDialogRef === e.target) {
-			onclose();
-		}
-	}}
-	onkeydown={(e) => {
-		if (e.key === 'Escape') {
-			onclose();
-		}
-	}}
->
-	<div
-		role="navigation"
-		class="services"
-	>
-		<HorizontalTabGroup
-			name="nav-services"
-			tabs={serviceTabs}
-			selected={selectedServiceTab}
-			tabComponent={navTab}
-			noRadius
-			grow
-		/>
-	</div>
-</div>
-
-{#snippet navTab(option: TabOption<unknown>, selected: boolean)}
-	<NavTab
-		{option}
-		{selected}
-	/>
-{/snippet}
-
-<style>div.overlay {
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="Args"
+>
+	import { devCatch } from '../../Helpers/Helpers.svelte.js';
+	import type { TabOption } from '../../Types/Internal/TabOption.js';
+	import HorizontalTabGroup from '../HorizontalTabGroup.svelte';
+	import NavTab from './NavTab.svelte';
+	import type { ServicesNavProps } from './ServicesNavProps.js';
+
+	// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-arguments
+	const { onclose, serviceTabs, selectedServiceTab }: ServicesNavProps<Args> = $props();
+
+	let dialogRef: HTMLDialogElement | undefined = $state.raw();
+
+	function fireClose(): void {
+		const result = onclose();
+		if (result instanceof Promise) {
+			result.catch((e: unknown) => {
+				devCatch(e);
+			});
+		}
+	}
+
+	// Open the dialog as soon as we mount; native showModal() gives us a
+	// real focus trap, Escape-to-close, and inert background without any
+	// manual aria-modal / tabindex bookkeeping.
+	$effect(() => {
+		const dialog = dialogRef;
+		if (dialog && !dialog.open) {
+			dialog.showModal();
+		}
+	});
+</script>
+
+<dialog
+	bind:this={dialogRef}
+	aria-label="Services"
+	class="overlay"
+	oncancel={(e) => {
+		// Escape fires `cancel` first; prevent the native close so we
+		// fully delegate to the parent (it owns the visibility flag).
+		e.preventDefault();
+		fireClose();
+	}}
+	onclick={(e) => {
+		// Native <dialog> click target is the dialog element itself when
+		// the user clicks the backdrop; clicks on inner content bubble
+		// up with a different target.
+		if (dialogRef === e.target) {
+			fireClose();
+		}
+	}}
+>
+	<div
+		role="navigation"
+		aria-label="Services tabs"
+		class="services"
+	>
+		<HorizontalTabGroup
+			name="nav-services"
+			tabs={serviceTabs}
+			selected={selectedServiceTab}
+			tabComponent={navTab}
+			noRadius
+			grow
+		/>
+	</div>
+</dialog>
+
+{#snippet navTab(option: TabOption<Args>, selected: boolean)}
+	<NavTab
+		{option}
+		{selected}
+	/>
+{/snippet}
+
+<style>dialog.overlay {
   position: fixed;
   top: calc(3.25rem + var(--env-border-height, 0));
   bottom: 0;
   left: 0;
   right: 0;
+  width: 100%;
+  height: auto;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
   z-index: 98;
+  overflow: visible;
+  color: inherit;
+}
+
+dialog.overlay::backdrop {
   background-color: rgba(0, 0, 0, 0.2);
 }
 
@@ -73,20 +113,6 @@ div.services {
   flex-flow: row nowrap;
   align-items: stretch;
   justify-content: stretch;
-  height: min(710px, 80%);
-  width: 800px;
-}
-
-div.wrapper {
-  display: flex;
-  flex-flow: row wrap;
-  width: 600px;
-  gap: 1.5rem;
-  --input-width: 100%;
-}
-div.wrapper .row {
-  width: 100%;
-  gap: 1.5rem;
-  display: flex;
-  flex-flow: row nowrap;
-}</style>
+  height: var(--services-nav-height, min(710px, 80%));
+  width: var(--services-nav-width, 800px);
+}</style>

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

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

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

@@ -1,6 +1,22 @@
 import type { TabOption } from '../../Types/Internal/TabOption.js';
-export interface ServicesNavProps {
-    onclose: () => void;
-    serviceTabs: Array<TabOption<unknown>>;
-    selectedServiceTab: TabOption<unknown> | undefined;
+/**
+ * Props for the {@link ServicesNav} dropdown.
+ *
+ * `ServicesNav` is the floating service-switcher panel rendered above
+ * the rest of the app chrome. It wraps the shared `HorizontalTabGroup`
+ * with the `NavTab` snippet so each service appears as a labelled
+ * tab. Generic over `Args` so the option's `content` snippet can be
+ * typed by the host rather than collapsing to `unknown`.
+ */
+export interface ServicesNavProps<Args = unknown> {
+    /**
+     * Called when the user dismisses the dropdown (click on the
+     * overlay or `Escape`). May return a Promise so async cleanup is
+     * supported.
+     */
+    onclose: () => void | Promise<void>;
+    /** The service tabs to render. */
+    serviceTabs: ReadonlyArray<TabOption<Args>>;
+    /** The currently selected tab, matched by reference. */
+    selectedServiceTab: TabOption<Args> | undefined;
 }

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

@@ -1,7 +1,23 @@
 import type { CallbackButtonWithIcon } from './CallbackButtonWithIcon.js';
 import type { SideMenuItemVariant } from './SideMenuItemVariant.js';
+/**
+ * Props for the {@link ServiceMenuItem} component.
+ *
+ * Each item is either a path-bearing link or a callback-bearing
+ * button (encoded by the {@link CallbackButtonWithIcon} discriminated
+ * union). Selection state is auto-derived from the current
+ * `page.url.pathname` for path items unless the host overrides it
+ * via `selected`.
+ */
 export interface SideMenuItemProps {
+    /** The underlying nav button data (path-or-callback). */
     item: CallbackButtonWithIcon;
+    /**
+     * Override the auto-derived selection. When omitted (and `item.path`
+     * is supplied) selection is computed by comparing `page.url.pathname`
+     * to `item.path`.
+     */
     selected?: boolean;
+    /** Visual variant. */
     variant?: SideMenuItemVariant;
 }