@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/PopoverButton.svelte

@@ -0,0 +1,151 @@
+<svelte:options runes />
+
+<!--
+@component
+An icon button that toggles a floating popover anchored beneath it, with a
+caret pointing back at the button. The popover holds arbitrary content (the
+default snippet) and closes on click-outside or Escape.
+-->
+<script lang="ts">import { Colour } from "../scss/colours.js";
+import { Size } from "../Types/Internal/Size.js";
+import Icon from "./Icon.svelte";
+let { icon, label, children, align = "center", borderless = false, open = $bindable(false) } = $props();
+let wrapper = $state();
+function onWindowPointerDown(e) {
+	if (!open) {
+		return;
+	}
+	if (wrapper && e.target instanceof Node && !wrapper.contains(e.target)) {
+		open = false;
+	}
+}
+function onWindowKeydown(e) {
+	if (open && e.key === "Escape") {
+		open = false;
+	}
+}
+</script>
+
+<svelte:window
+	onpointerdown={onWindowPointerDown}
+	onkeydown={onWindowKeydown}
+/>
+
+<div
+	class="popover-button"
+	bind:this={wrapper}
+>
+	<button
+		type="button"
+		class="trigger"
+		class:open
+		class:borderless
+		aria-label={label}
+		aria-expanded={open}
+		aria-haspopup="dialog"
+		onclick={() => {
+			open = !open;
+		}}
+	>
+		<Icon
+			name={icon}
+			size={Size.Large}
+			colour={open ? Colour['$brand-primary'] : Colour['$font-secondary']}
+		/>
+	</button>
+
+	{#if open}
+		<div
+			class="popover align-{align}"
+			role="dialog"
+			aria-label={label}
+		>
+			<span class="caret"></span>
+			<div class="popover-inner">
+				{@render children()}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>.popover-button {
+  position: relative;
+  display: inline-flex;
+}
+
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem;
+  cursor: pointer;
+  background-color: #ffffff;
+  border: solid 1px #cbd4da;
+  border-radius: 4px;
+}
+.trigger:hover {
+  background-color: #f4f7f9;
+}
+.trigger.open:not(.borderless) {
+  border-color: #259fc7;
+}
+.trigger.borderless {
+  border: none;
+  border-radius: 0;
+  background-color: transparent;
+  width: 100%;
+  height: 100%;
+}
+.trigger.borderless:hover {
+  background-color: #f4f7f9;
+}
+.trigger.borderless.open {
+  background-color: #f4fbfd;
+}
+
+.popover {
+  position: absolute;
+  top: calc(100% + 0.6rem);
+  z-index: 100;
+  background-color: #ffffff;
+  border: solid 1px #cbd4da;
+  border-radius: 4px;
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
+  padding: 1.25rem;
+  width: max-content;
+  max-width: 80vw;
+}
+.popover.align-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.popover.align-start {
+  left: 0;
+}
+.popover.align-end {
+  right: 0;
+}
+
+.caret {
+  position: absolute;
+  top: -6px;
+  width: 12px;
+  height: 12px;
+  background-color: #ffffff;
+  border-left: solid 1px #cbd4da;
+  border-top: solid 1px #cbd4da;
+  transform: rotate(45deg);
+}
+
+.align-center .caret {
+  left: 50%;
+  margin-left: -6px;
+}
+
+.align-start .caret {
+  left: 1.5rem;
+}
+
+.align-end .caret {
+  right: 1.5rem;
+}</style>

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

@@ -0,0 +1,9 @@
+import type { PopoverButtonProps } from './PopoverButtonProps.js';
+/**
+ * An icon button that toggles a floating popover anchored beneath it, with a
+ * caret pointing back at the button. The popover holds arbitrary content (the
+ * default snippet) and closes on click-outside or Escape.
+ */
+declare const PopoverButton: import("svelte").Component<PopoverButtonProps, {}, "open">;
+type PopoverButton = ReturnType<typeof PopoverButton>;
+export default PopoverButton;

package/dist/Components/PopoverButtonProps.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { icons } from './Icons.js';
+/**
+ * Props for {@link PopoverButton} — an icon button that toggles a floating
+ * popover (with a caret pointing back at the button) holding arbitrary
+ * content. Closes on click-outside or Escape.
+ */
+export interface PopoverButtonProps {
+    /** Icon shown in the trigger button. */
+    icon: keyof typeof icons;
+    /** Accessible label for the trigger button. */
+    label: string;
+    /** Popover contents. */
+    children: Snippet;
+    /** Horizontal alignment of the popover relative to the button. Defaults to `'center'`. */
+    align?: 'center' | 'start' | 'end';
+    /** Drop the trigger's border so it can sit flush inside a grouped bar. */
+    borderless?: boolean;
+    /** Two-way bindable open state. */
+    open?: boolean;
+}

package/dist/Components/PopoverButtonProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Portal.svelte

@@ -1,36 +1,30 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { browser } from '$app/environment';
-	import type { PortalProps } from './PortalProps.js';
-
-	let { target = browser ? globalThis.document.body : undefined, children }: PortalProps = $props();
-
-	let ref: HTMLElement | undefined = $state();
-	let lastTarget: HTMLElement | undefined;
-
-	$effect(() => {
-		// Identity guard: only re-parent when `target` actually changes.
-		// `appendChild` already moves the node when called, so this avoids
-		// unnecessary detach/attach when an upstream `$state` target
-		// re-fires the effect without changing identity.
-		if (target && ref && target !== lastTarget) {
-			if (target.ownerDocument === globalThis.document) {
-				target.appendChild(ref);
-				lastTarget = target;
-			}
+<svelte:options runes />
+
+<script lang="ts">import { browser } from "$app/environment";
+let { target = browser ? globalThis.document.body : undefined, children } = $props();
+let ref = $state();
+let lastTarget;
+$effect(() => {
+	// Identity guard: only re-parent when `target` actually changes.
+	// `appendChild` already moves the node when called, so this avoids
+	// unnecessary detach/attach when an upstream `$state` target
+	// re-fires the effect without changing identity.
+	if (target && ref && target !== lastTarget) {
+		if (target.ownerDocument === globalThis.document) {
+			target.appendChild(ref);
+			lastTarget = target;
 		}
-
-		// Cleanup is necessary, not redundant: without it, the appended
-		// node would remain inside `target` after the Portal unmounts,
-		// because `target` outlives the component.
-		return () => {
-			ref?.parentNode?.removeChild(ref);
-			lastTarget = undefined;
-		};
-	});
-</script>
-
-<div bind:this={ref}>
-	{@render children()}
-</div>
+	}
+	// Cleanup is necessary, not redundant: without it, the appended
+	// node would remain inside `target` after the Portal unmounts,
+	// because `target` outlives the component.
+	return () => {
+		ref?.parentNode?.removeChild(ref);
+		lastTarget = undefined;
+	};
+});
+</script>
+
+<div bind:this={ref}>
+	{@render children()}
+</div>

package/dist/Components/ProgressBubble.svelte

@@ -1,109 +1,94 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { useAsyncFlag } from '../Helpers/AsyncFlag.svelte.js';
-	import { getCanvasContext } from '../Helpers/Helpers.svelte.js';
-	import type { BubbleColour } from './BubbleColour.js';
-	import type { ProgressBubbleProps } from './ProgressBubbleProps.js';
-
-	const { value, colours }: ProgressBubbleProps = $props();
-
-	const current = $derived(value[0]);
-	const total = $derived(value[1]);
-	const progress = $derived(`${current}/${total}`);
-
-	// Clamp the percentage so callers passing `current > total` do not
-	// blow past the bar's edge.
-	const percent = $derived(Math.min((current / total) * 100, 100));
-
-	let progressBarRef: HTMLDivElement | undefined = $state();
-
-	// Observed inline-size of the filled bar. A `ResizeObserver` is used
-	// instead of `getBoundingClientRect()` inside an `$effect`: the latter
-	// forces a synchronous layout flush on every `progress` change, which
-	// is expensive inside a table with many `ProgressBubble` cells. The
-	// observer notifies us only when the bar's actual rendered size
-	// changes, and does so via a microtask scheduled by the browser so we
-	// never force layout ourselves.
-	let barWidth = $state(0);
-	$effect(() => {
-		if (!progressBarRef) {
-			return;
-		}
-		const ro = new ResizeObserver((entries) => {
-			const entry = entries[0];
-			barWidth = entry.borderBoxSize[0]?.inlineSize ?? entry.contentRect.width;
-		});
-		ro.observe(progressBarRef);
-		return () => {
-			ro.disconnect();
-		};
+<svelte:options runes />
+
+<script lang="ts">import { useAsyncFlag } from "../Helpers/AsyncFlag.svelte.js";
+import { getCanvasContext } from "../Helpers/Helpers.svelte.js";
+const { value, colours } = $props();
+const current = $derived(value[0]);
+const total = $derived(value[1]);
+const progress = $derived(`${current}/${total}`);
+// Clamp the percentage so callers passing `current > total` do not
+// blow past the bar's edge.
+const percent = $derived(Math.min(current / total * 100, 100));
+let progressBarRef = $state();
+// Observed inline-size of the filled bar. A `ResizeObserver` is used
+// instead of `getBoundingClientRect()` inside an `$effect`: the latter
+// forces a synchronous layout flush on every `progress` change, which
+// is expensive inside a table with many `ProgressBubble` cells. The
+// observer notifies us only when the bar's actual rendered size
+// changes, and does so via a microtask scheduled by the browser so we
+// never force layout ourselves.
+let barWidth = $state(0);
+$effect(() => {
+	if (!progressBarRef) {
+		return;
+	}
+	const ro = new ResizeObserver((entries) => {
+		const entry = entries[0];
+		barWidth = entry.borderBoxSize[0]?.inlineSize ?? entry.contentRect.width;
 	});
-
-	// Whether the `current/total` label fits inside the filled bar.
-	// Measured via a memoised offscreen canvas so we do not trigger
-	// layout.
-	const fitsInProgressBar = $derived.by(() => {
-		const textWidth = getCanvasContext()?.measureText(`__${progress}__`).width ?? 0;
-		return barWidth > textWidth;
-	});
-
-	// `colours` may be a bare `BubbleColour`, a Promise resolving to one,
-	// or undefined. Routed through `useAsyncFlag` which (a) cancels stale
-	// Promises via a sequence ticket so the freshest value always wins,
-	// (b) reports errors through `ToastContext` when one is mounted, and
-	// (c) falls back to `undefined` while no resolution is available.
-	const awaitedColoursFlag = useAsyncFlag<BubbleColour | undefined>(() => colours, undefined);
-	const awaitedColours = $derived(awaitedColoursFlag.value);
-
-	// Precompute the wrapper and bar style strings. Each colour comes
-	// from the trusted `Colour` registry (see `Bubble.svelte` security
-	// note) so interpolation into `style="..."` is safe.
-	const wrapperStyle = $derived(
-		awaitedColours
-			? `--bar-background-colour: ${awaitedColours.backgroundColour}; --text-colour: ${awaitedColours.colour};`
-			: ''
-	);
-	const barStyle = $derived(`width: ${percent}%;`);
-</script>
-
-<div
-	class="progress-wrapper"
-	style={wrapperStyle}
->
-	<!--
-		Native `<progress>` is kept as a fallback for assistive tech that
-		ignores ARIA progressbar roles. Visually hidden rather than
-		`display: none` so the element stays in the accessibility tree.
-	-->
-	<progress
-		class="visually-hidden"
-		value={current}
-		max={total}>{progress}</progress
-	>
-
-	<div
-		class="progress-background"
-		role="progressbar"
-		aria-valuenow={current}
-		aria-valuemin={0}
-		aria-valuemax={total}
-		aria-valuetext={progress}
-	>
-		<div
-			class:fits={fitsInProgressBar}
-			class="progress-value"
-			bind:this={progressBarRef}
-			style={barStyle}
-		>
-			<span
-				class:fits={fitsInProgressBar}
-				class="progress-text">{progress}</span
-			>
-		</div>
-	</div>
-</div>
-
+	ro.observe(progressBarRef);
+	return () => {
+		ro.disconnect();
+	};
+});
+// Whether the `current/total` label fits inside the filled bar.
+// Measured via a memoised offscreen canvas so we do not trigger
+// layout.
+const fitsInProgressBar = $derived.by(() => {
+	const textWidth = getCanvasContext()?.measureText(`__${progress}__`).width ?? 0;
+	return barWidth > textWidth;
+});
+// `colours` may be a bare `BubbleColour`, a Promise resolving to one,
+// or undefined. Routed through `useAsyncFlag` which (a) cancels stale
+// Promises via a sequence ticket so the freshest value always wins,
+// (b) reports errors through `ToastContext` when one is mounted, and
+// (c) falls back to `undefined` while no resolution is available.
+const awaitedColoursFlag = useAsyncFlag(() => colours, undefined);
+const awaitedColours = $derived(awaitedColoursFlag.value);
+// Precompute the wrapper and bar style strings. Each colour comes
+// from the trusted `Colour` registry (see `Bubble.svelte` security
+// note) so interpolation into `style="..."` is safe.
+const wrapperStyle = $derived(awaitedColours ? `--bar-background-colour: ${awaitedColours.backgroundColour}; --text-colour: ${awaitedColours.colour};` : "");
+const barStyle = $derived(`width: ${percent}%;`);
+</script>
+
+<div
+	class="progress-wrapper"
+	style={wrapperStyle}
+>
+	<!--
+		Native `<progress>` is kept as a fallback for assistive tech that
+		ignores ARIA progressbar roles. Visually hidden rather than
+		`display: none` so the element stays in the accessibility tree.
+	-->
+	<progress
+		class="visually-hidden"
+		value={current}
+		max={total}>{progress}</progress
+	>
+
+	<div
+		class="progress-background"
+		role="progressbar"
+		aria-valuenow={current}
+		aria-valuemin={0}
+		aria-valuemax={total}
+		aria-valuetext={progress}
+	>
+		<div
+			class:fits={fitsInProgressBar}
+			class="progress-value"
+			bind:this={progressBarRef}
+			style={barStyle}
+		>
+			<span
+				class:fits={fitsInProgressBar}
+				class="progress-text">{progress}</span
+			>
+		</div>
+	</div>
+</div>
+
 <style>.progress-wrapper {
   width: 100%;
   height: 100%;
@@ -172,4 +157,4 @@
 }
 .progress-text.fits {
   color: var(--text-colour, #3a4952);
-}</style>
+}</style>